adjust line type as well as weight for time series

apache · Nov 16, 2024 · cb5c2d1 · cb5c2d1
1 parent 58f9be9
commit cb5c2d1
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 14 deletions.
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts
@@ -278,7 +278,7 @@ export default function transformProps(
   const array = ensureIsArray(chartProps.rawFormData?.time_compare);
   const inverted = invert(verboseMap);
 
-  const offsetLineWidths: { [key: string]: number } = {};
+  const offsetLineWidths: string[] = [];
 
   rawSeries.forEach(entry => {
     const derivedSeries = isDerivedSeries(entry, chartProps.rawFormData);
@@ -288,11 +288,20 @@ export default function transformProps(
         entry,
         ensureIsArray(chartProps.rawFormData?.time_compare),
       )!;
-      if (!offsetLineWidths[offset]) {
-        offsetLineWidths[offset] = Object.keys(offsetLineWidths).length + 1;
+      if (!offsetLineWidths.includes(offset)) {
+        offsetLineWidths.push(offset);
+        const position = offsetLineWidths.length;
+        if (position < 5) {
+          // increase the width of the line only up to 5
+          // or it gets too thick and hard to distinguish
+          lineStyle.width = position;
+          lineStyle.type = 'dashed';
+        } else {
+          // use a combination of dash and dot for the line style
+          lineStyle.width = (position % 3) + 1;
+          lineStyle.type = [(position % 5) + 1, (position % 3) + 1];
+        }
       }
-      lineStyle.type = 'dashed';
-      lineStyle.width = offsetLineWidths[offset];
       lineStyle.opacity = OpacityEnum.DerivedSeries;
     }
 

diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformers.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformers.ts
@@ -314,15 +314,7 @@ export function transformSeries(
             opacity: opacity * areaOpacity,
           }
         : undefined,
-    emphasis: {
-      // bold on hover as required since 5.3.0 to retain backwards feature parity:
-      // https://apache.github.io/echarts-handbook/en/basics/release-note/5-3-0/#removing-the-default-bolding-emphasis-effect-in-the-line-chart
-      // TODO: should consider only adding emphasis to currently hovered series
-      lineStyle: {
-        width: 'bolder',
-      },
-      ...emphasis,
-    },
+    emphasis,
     showSymbol,
     symbolSize: markerSize,
     label: {