[superset] branch master updated: fix(Explore): Force different color for same metrics in Mixed Time-Series (#18603)

[di...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

diegopucci pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/superset.git


The following commit(s) were added to refs/heads/master by this push:
     new f565230  fix(Explore): Force different color for same metrics in Mixed Time-Series (#18603)
f565230 is described below

commit f565230d8d8342f7a51b263d2a0865122c8f756e
Author: Geido <60...@users.noreply.github.com>
AuthorDate: Thu Feb 10 16:21:47 2022 +0200

    fix(Explore): Force different color for same metrics in Mixed Time-Series (#18603)
    
    * Force different color for same metrics
    
    * Conform to chart labels suffix
    
    * Simplify
---
 .../plugin-chart-echarts/src/MixedTimeseries/transformProps.ts       | 5 +++++
 .../plugins/plugin-chart-echarts/src/Timeseries/transformers.ts      | 5 ++++-
 2 files changed, 9 insertions(+), 1 deletion(-)

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 4ac8531..9ac3ff2 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts
@@ -175,9 +175,11 @@ 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,
@@ -189,6 +191,9 @@ export default function transformProps(
       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 c1a90fd..19fe600 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformers.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformers.ts
@@ -83,6 +83,7 @@ export function transformSeries(
     showValueIndexes?: number[];
     thresholdValues?: number[];
     richTooltip?: boolean;
+    seriesKey?: OptionName;
   },
 ): SeriesOption | undefined {
   const { name } = series;
@@ -103,6 +104,7 @@ export function transformSeries(
     showValueIndexes = [],
     thresholdValues = [],
     richTooltip,
+    seriesKey,
   } = opts;
   const contexts = seriesContexts[name || ''] || [];
   const hasForecast =
@@ -147,8 +149,9 @@ export function transformSeries(
   } else {
     plotType = seriesType === 'bar' ? 'bar' : 'line';
   }
+  // forcing the colorScale to return a different color for same metrics across different queries
   const itemStyle = {
-    color: colorScale(forecastSeries.name),
+    color: colorScale(seriesKey || forecastSeries.name),
     opacity,
   };
   let emphasis = {};