feat: derived metrics use different line style (#20242)

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

@@ -31,7 +31,9 @@ import {
   isTimeseriesAnnotationLayer,
   TimeseriesChartDataResponseResult,
 } from '@superset-ui/core';
+import { isDerivedSeries } from '@superset-ui/chart-controls';
 import { EChartsCoreOption, SeriesOption } from 'echarts';
+import { ZRLineType } from 'echarts/types/src/util/types';
 import {
   DEFAULT_FORM_DATA,
   EchartsTimeseriesChartProps,
@@ -181,6 +183,9 @@ export default function transformProps(
   }
 
   rawSeries.forEach(entry => {
+    const lineStyle = isDerivedSeries(entry, chartProps.rawFormData)
+      ? { type: 'dashed' as ZRLineType }
+      : {};
     const transformedSeries = transformSeries(entry, colorScale, {
       area,
       filterState,
@@ -199,6 +204,7 @@ export default function transformProps(
       richTooltip,
       sliceId,
       isHorizontal,
+      lineStyle,
     });
     if (transformedSeries) series.push(transformedSeries);
   });

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

@@ -87,6 +87,7 @@ export function transformSeries(
     seriesKey?: OptionName;
     sliceId?: number;
     isHorizontal?: boolean;
+    lineStyle?: LineStyleOption;
   },
 ): SeriesOption | undefined {
   const { name } = series;
@@ -183,8 +184,8 @@ export function transformSeries(
     }
   }
   const lineStyle = isConfidenceBand
-    ? { opacity: OpacityEnum.Transparent }
-    : { opacity };
+    ? { ...opts.lineStyle, opacity: OpacityEnum.Transparent }
+    : { ...opts.lineStyle, opacity };
   return {
     ...series,
     yAxisIndex,