From a559e10a379057151585d806cbae87c6ef13be9a Mon Sep 17 00:00:00 2001 From: geido Date: Mon, 7 Feb 2022 16:28:51 +0000 Subject: [PATCH 1/3] Force different color for same metrics --- .../src/MixedTimeseries/transformProps.ts | 28 +++++++++++-------- .../src/Timeseries/transformers.ts | 9 +++++- 2 files changed, 25 insertions(+), 12 deletions(-) diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts index 4ac85317b9af..2d8b45dd798e 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts @@ -165,19 +165,25 @@ export default function transformProps( ); rawSeriesA.forEach(entry => { - const transformedSeries = transformSeries(entry, colorScale, { - area, - markerEnabled, - markerSize, - areaOpacity: opacity, - seriesType, - showValue, - stack, - yAxisIndex, - filterState, - }); + const transformedSeries = transformSeries( + entry, + colorScale, + { + area, + markerEnabled, + markerSize, + areaOpacity: opacity, + seriesType, + showValue, + stack, + yAxisIndex, + filterState, + }, + rawSeriesB, + ); if (transformedSeries) series.push(transformedSeries); }); + rawSeriesB.forEach(entry => { const transformedSeries = transformSeries(entry, colorScale, { area: areaB, diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformers.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformers.ts index c1a90fd6155a..69991a96a4d6 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformers.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformers.ts @@ -84,6 +84,7 @@ export function transformSeries( thresholdValues?: number[]; richTooltip?: boolean; }, + rawSeriesB?: SeriesOption[], ): SeriesOption | undefined { const { name } = series; const { @@ -147,8 +148,14 @@ export function transformSeries( } else { plotType = seriesType === 'bar' ? 'bar' : 'line'; } + const rawSeriesBHasMetric = !!(rawSeriesB || []).find( + (serie: SeriesOption) => serie.name === forecastSeries.name, + ); + // forcing the colorScale to return a different color for same metrics across different queries const itemStyle = { - color: colorScale(forecastSeries.name), + color: colorScale( + rawSeriesBHasMetric ? `${forecastSeries.name}-A` : forecastSeries.name, + ), opacity, }; let emphasis = {}; From 754c334e318795f0d8d734646b0acf34938f1162 Mon Sep 17 00:00:00 2001 From: geido Date: Tue, 8 Feb 2022 14:34:53 +0000 Subject: [PATCH 2/3] Conform to chart labels suffix --- .../src/MixedTimeseries/transformProps.ts | 48 +++++++++---------- .../src/Timeseries/transformers.ts | 14 ++++-- 2 files changed, 34 insertions(+), 28 deletions(-) diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts index 2d8b45dd798e..349fdb8d9fa2 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts @@ -165,40 +165,40 @@ export default function transformProps( ); rawSeriesA.forEach(entry => { + const transformedSeries = transformSeries(entry, colorScale, { + area, + markerEnabled, + markerSize, + areaOpacity: opacity, + seriesType, + showValue, + stack, + yAxisIndex, + filterState, + }); + if (transformedSeries) series.push(transformedSeries); + }); + + rawSeriesB.forEach(entry => { const transformedSeries = transformSeries( entry, colorScale, { - area, - markerEnabled, - markerSize, - areaOpacity: opacity, - seriesType, - showValue, - stack, - yAxisIndex, + area: areaB, + markerEnabled: markerEnabledB, + markerSize: markerSizeB, + areaOpacity: opacityB, + seriesType: seriesTypeB, + showValue: showValueB, + stack: stackB, + yAxisIndex: yAxisIndexB, filterState, }, - rawSeriesB, + rawSeriesA, ); if (transformedSeries) series.push(transformedSeries); }); - rawSeriesB.forEach(entry => { - const transformedSeries = transformSeries(entry, colorScale, { - area: areaB, - markerEnabled: markerEnabledB, - markerSize: markerSizeB, - areaOpacity: opacityB, - seriesType: seriesTypeB, - showValue: showValueB, - stack: stackB, - yAxisIndex: yAxisIndexB, - filterState, - }); - if (transformedSeries) series.push(transformedSeries); - }); - annotationLayers .filter((layer: AnnotationLayer) => layer.show) .forEach((layer: AnnotationLayer) => { diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformers.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformers.ts index 69991a96a4d6..e8f498cd5171 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformers.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformers.ts @@ -84,7 +84,7 @@ export function transformSeries( thresholdValues?: number[]; richTooltip?: boolean; }, - rawSeriesB?: SeriesOption[], + additionalSeriesGroup?: SeriesOption[], ): SeriesOption | undefined { const { name } = series; const { @@ -148,13 +148,19 @@ export function transformSeries( } else { plotType = seriesType === 'bar' ? 'bar' : 'line'; } - const rawSeriesBHasMetric = !!(rawSeriesB || []).find( - (serie: SeriesOption) => serie.name === forecastSeries.name, + // checking if the same metric name is available in the previous query + const metricExists = !!(additionalSeriesGroup || []).find( + (serie: SeriesOption) => { + const otherForecastedSeries = extractForecastSeriesContext( + serie.name || '', + ); + return otherForecastedSeries.name === forecastSeries.name; + }, ); // forcing the colorScale to return a different color for same metrics across different queries const itemStyle = { color: colorScale( - rawSeriesBHasMetric ? `${forecastSeries.name}-A` : forecastSeries.name, + metricExists ? `${forecastSeries.name} (1)` : forecastSeries.name, ), opacity, }; From 6b0f3c7d6b02e48fa64884128c33b920a173b98f Mon Sep 17 00:00:00 2001 From: geido Date: Tue, 8 Feb 2022 15:59:46 +0000 Subject: [PATCH 3/3] Simplify --- .../src/MixedTimeseries/transformProps.ts | 31 +++++++++---------- .../src/Timeseries/transformers.ts | 16 ++-------- 2 files changed, 18 insertions(+), 29 deletions(-) diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts index 349fdb8d9fa2..9ac3ff28c2df 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts @@ -175,27 +175,26 @@ export default function transformProps( stack, yAxisIndex, filterState, + seriesKey: entry.name, }); if (transformedSeries) series.push(transformedSeries); }); rawSeriesB.forEach(entry => { - const transformedSeries = transformSeries( - entry, - colorScale, - { - area: areaB, - markerEnabled: markerEnabledB, - markerSize: markerSizeB, - areaOpacity: opacityB, - seriesType: seriesTypeB, - showValue: showValueB, - stack: stackB, - yAxisIndex: yAxisIndexB, - filterState, - }, - rawSeriesA, - ); + const transformedSeries = transformSeries(entry, colorScale, { + area: areaB, + markerEnabled: markerEnabledB, + markerSize: markerSizeB, + areaOpacity: opacityB, + seriesType: seriesTypeB, + showValue: showValueB, + stack: stackB, + yAxisIndex: yAxisIndexB, + filterState, + seriesKey: primarySeries.has(entry.name as string) + ? `${entry.name} (1)` + : entry.name, + }); if (transformedSeries) series.push(transformedSeries); }); diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformers.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformers.ts index e8f498cd5171..19fe600ca31c 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformers.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformers.ts @@ -83,8 +83,8 @@ export function transformSeries( showValueIndexes?: number[]; thresholdValues?: number[]; richTooltip?: boolean; + seriesKey?: OptionName; }, - additionalSeriesGroup?: SeriesOption[], ): SeriesOption | undefined { const { name } = series; const { @@ -104,6 +104,7 @@ export function transformSeries( showValueIndexes = [], thresholdValues = [], richTooltip, + seriesKey, } = opts; const contexts = seriesContexts[name || ''] || []; const hasForecast = @@ -148,20 +149,9 @@ export function transformSeries( } else { plotType = seriesType === 'bar' ? 'bar' : 'line'; } - // checking if the same metric name is available in the previous query - const metricExists = !!(additionalSeriesGroup || []).find( - (serie: SeriesOption) => { - const otherForecastedSeries = extractForecastSeriesContext( - serie.name || '', - ); - return otherForecastedSeries.name === forecastSeries.name; - }, - ); // forcing the colorScale to return a different color for same metrics across different queries const itemStyle = { - color: colorScale( - metricExists ? `${forecastSeries.name} (1)` : forecastSeries.name, - ), + color: colorScale(seriesKey || forecastSeries.name), opacity, }; let emphasis = {};