fix(echart): multiple time shift line pattern (#38866)

superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts

@@ -124,6 +124,60 @@ import {
 import { safeParseEChartOptions } from '../utils/safeEChartOptionsParser';
 import { mergeCustomEChartOptions } from '../utils/mergeCustomEChartOptions';
 
+const visibleDashPatterns: ([number, number] | 'dashed' | 'dotted')[] = [
+  'dashed',
+  'dotted',
+  [6, 15], // narrow dashed
+  [2, 10], // wide dotted
+  [20, 3], // wide dashed
+];
+const visibleSymbols = [
+  'rect',
+  'triangle',
+  'diamond',
+  'roundRect',
+  'pin',
+] as const;
+
+function getSymbolMarker(symbol: string, color: string) {
+  const size = 10;
+  switch (symbol) {
+    case 'circle':
+      return `<span style="
+        display:inline-block;width:${size}px;height:${size}px;
+        border-radius:50%;background:${color};margin-right:5px"></span>`;
+    case 'rect':
+      return `<span style="
+        display:inline-block;width:${size}px;height:${size}px;
+        background:${color};margin-right:5px"></span>`;
+    case 'roundRect':
+      return `<span style="
+        display:inline-block;width:${size}px;height:${size}px;border-radius:2px;
+        background:${color};margin-right:5px"></span>`;
+    case 'triangle':
+      return `<span style="
+        display:inline-block;width:0;height:0;
+        border-left:${size / 2}px solid transparent;
+        border-right:${size / 2}px solid transparent;
+        border-bottom:${size}px solid ${color};
+        margin-right:5px"></span>`;
+    case 'diamond':
+      return `<span style="
+        display:inline-block;width:${size - 2}px;height:${size - 2}px;
+        background:${color};transform: rotate(45deg) translateX(1px) translateY(-1px);
+        margin-right:5px"></span>`;
+    case 'pin':
+      return `<span style="
+        display:inline-block;width:${size - 2}px;height:${size - 2}px;
+        background:${color};transform: rotate(45deg) translateX(1px) translateY(-1px);
+        border-radius:50%;border-bottom-right-radius:0;margin-right:5px"></span>`;
+    default:
+      return `<span style="
+        display:inline-block;width:${size}px;height:${size}px;
+        border-radius:50%;background:${color};margin-right:5px"></span>`;
+  }
+}
+
 export default function transformProps(
   chartProps: EchartsTimeseriesChartProps,
 ): TimeseriesChartTransformedProps {
@@ -346,7 +400,8 @@ export default function transformProps(
     );
 
     const lineStyle: LineStyleOption = {};
-    if (derivedSeries) {
+    let lineSymbol;
+    if (derivedSeries && timeShiftColor) {
       // Get the time offset for this series to assign different dash patterns
       const offset = getTimeOffset(entry, array) || seriesName;
       if (!offsetLineWidths[offset]) {
@@ -355,11 +410,11 @@ export default function transformProps(
       // Use visible dash patterns that vary by offset index
       // Pattern: [dash length, gap length] - scaled to be clearly visible
       const patternIndex = offsetLineWidths[offset];
-      lineStyle.type = [
-        (patternIndex % 5) + 4, // dash: 4-8px (visible)
-        (patternIndex % 3) + 3, // gap: 3-5px (visible)
-      ];
+      lineStyle.type =
+        visibleDashPatterns[patternIndex % visibleDashPatterns.length];
+
       lineStyle.opacity = OpacityEnum.DerivedSeries;
+      lineSymbol = visibleSymbols[patternIndex % visibleSymbols.length];
     }
 
     // Calculate min/max from data for horizontal bar charts
@@ -443,6 +498,7 @@ export default function transformProps(
         sliceId,
         isHorizontal,
         lineStyle,
+        lineSymbol,
         timeCompare: array,
         timeShiftColor,
         theme,
@@ -934,10 +990,16 @@ export default function transformProps(
             if (value.observation === 0 && stack) {
               return;
             }
+            const seriesForKey = series.find(s => s.name === key);
+            const symbolForSeries = (seriesForKey as any)?.symbol || 'circle';
+            const marker = value.color
+              ? getSymbolMarker(symbolForSeries, value.color)
+              : value.marker;
             const row = formatForecastTooltipSeries({
               ...value,
               seriesName: key,
               formatter,
+              marker,
             });
 
             const annotationRow = annotationLayers.some(