fix: dual line chart color consistency for secondary y axis (#18)

airbnb · Nov 26, 2021 · 7ea874c · 7ea874c
1 parent 49a6951
commit 7ea874c
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 2 deletions.
diff --git a/...ui/plugins/superset-ui-plugins/packages/superset-ui-legacy-preset-chart-nvd3/src/utils.js b/...ui/plugins/superset-ui-plugins/packages/superset-ui-legacy-preset-chart-nvd3/src/utils.js
@@ -33,6 +33,7 @@ export function cleanColorInput(value) {
   // for superset series that should have the same color
   return String(value)
     .trim()
+    .replace(' (right axis)', '')
     .split(', ')
     .filter(k => !TIME_SHIFT_PATTERN.test(k))
     .join(', ');

diff --git a/.../superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/DualLine/Stories.jsx b/.../superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/DualLine/Stories.jsx
@@ -3,6 +3,11 @@ import React from 'react';
 import { SuperChart } from '@superset-ui/chart';
 import data from './data';
 
+const reverseData = data.map(series => ({
+  ...series,
+  yAxis: series.yAxis === 1 ? 2 : 1,
+}));
+
 export default [
   {
     renderStory: () => (
@@ -12,8 +17,6 @@ export default [
           datasource: { verboseMap: {} },
           formData: {
             colorScheme: 'd3Category10',
-            metric: 'avg__num',
-            metric2: 'sum__num',
             vizType: 'dual_line',
             xAxisFormat: 'smart_date',
             yAxis2Format: '.3s',
@@ -28,4 +31,44 @@ export default [
     storyName: 'Basic',
     storyPath: 'legacy-|preset-chart-nvd3|DualLineChartPlugin',
   },
+  {
+    renderStory: () => (
+      <div>
+        <SuperChart
+          chartType="dual-line"
+          chartProps={{
+            datasource: { verboseMap: {} },
+            formData: {
+              colorScheme: 'd3Category10',
+              vizType: 'dual_line',
+              xAxisFormat: 'smart_date',
+              yAxis2Format: '.3s',
+              yAxisFormat: '.3s',
+            },
+            height: 400,
+            payload: { data },
+            width: 400,
+          }}
+        />
+        <SuperChart
+          chartType="dual-line"
+          chartProps={{
+            datasource: { verboseMap: {} },
+            formData: {
+              colorScheme: 'd3Category10',
+              vizType: 'dual_line',
+              xAxisFormat: 'smart_date',
+              yAxis2Format: '.3s',
+              yAxisFormat: '.3s',
+            },
+            height: 400,
+            payload: { data: reverseData },
+            width: 400,
+          }}
+        />
+      </div>
+    ),
+    storyName: 'Swap y-axis with consistent color',
+    storyPath: 'legacy-|preset-chart-nvd3|DualLineChartPlugin',
+  },
 ];