feat(color): add official ECharts color schemes (#751)

* feat(color): add echarts colors * rename categorical schemes
apache · Nov 26, 2021 · 9f1aafa · 9f1aafa
1 parent 46ea739
commit 9f1aafa
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 0 deletions.
diff --git a/...uperset_ui/superset-ui/packages/superset-ui-color/src/colorSchemes/categorical/echarts.ts b/...uperset_ui/superset-ui/packages/superset-ui-color/src/colorSchemes/categorical/echarts.ts
@@ -0,0 +1,38 @@
+import CategoricalScheme from '../../CategoricalScheme';
+
+const schemes = [
+  {
+    id: 'echarts4Colors',
+    label: 'ECharts v4.x Colors',
+    colors: [
+      '#c23531',
+      '#2f4554',
+      '#61a0a8',
+      '#d48265',
+      '#91c7ae',
+      '#749f83',
+      '#ca8622',
+      '#bda29a',
+      '#6e7074',
+      '#546570',
+      '#c4ccd3',
+    ],
+  },
+  {
+    id: 'echarts5Colors',
+    label: 'ECharts v5.x Colors',
+    colors: [
+      '#5470C6',
+      '#91CC75',
+      '#FAC858',
+      '#EE6666',
+      '#73C0DE',
+      '#3BA272',
+      '#FC8452',
+      '#9A60B4',
+      '#EA7CCC',
+    ],
+  },
+].map(s => new CategoricalScheme(s));
+
+export default schemes;
diff --git a/..._superset_ui/superset-ui/packages/superset-ui-color/src/colorSchemes/sequential/common.ts b/..._superset_ui/superset-ui/packages/superset-ui-color/src/colorSchemes/sequential/common.ts
@@ -193,6 +193,12 @@ const schemes = [
       '#3AA3B2',
     ],
   },
+  {
+    id: 'echarts_gradient',
+    label: 'ECharts gradient',
+    isDiverging: false,
+    colors: ['#f6EFA6', '#D88273', '#BF444C'],
+  },
 ].map(s => new SequentialScheme(s));
 
 export default schemes;
diff --git a/...nd/temporary_superset_ui/superset-ui/packages/superset-ui-color/test/colorSchemes.test.ts b/...nd/temporary_superset_ui/superset-ui/packages/superset-ui-color/test/colorSchemes.test.ts
@@ -1,4 +1,5 @@
 import categoricalAirbnb from '../src/colorSchemes/categorical/airbnb';
+import categoricalEcharts from '../src/colorSchemes/categorical/echarts';
 import categoricalSuperset from '../src/colorSchemes/categorical/superset';
 import categoricalPreset from '../src/colorSchemes/categorical/preset';
 import categoricalD3 from '../src/colorSchemes/categorical/d3';
@@ -14,6 +15,7 @@ describe('Color Schemes', () => {
     it('returns an array of CategoricalScheme', () => {
       [
         categoricalAirbnb,
+        categoricalEcharts,
         categoricalD3,
         categoricalGoogle,
         categoricalLyft,

diff --git a/...i/packages/superset-ui-demo/storybook/stories/superset-ui-color/ColorPallettesStories.jsx b/...i/packages/superset-ui-demo/storybook/stories/superset-ui-color/ColorPallettesStories.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 
 import AirbnbPalettes from '@superset-ui/color/src/colorSchemes/categorical/airbnb';
 import D3Palettes from '@superset-ui/color/src/colorSchemes/categorical/d3';
+import EchartsPalettes from '@superset-ui/color/src/colorSchemes/categorical/echarts';
 import GooglePalettes from '@superset-ui/color/src/colorSchemes/categorical/google';
 import LyftPalettes from '@superset-ui/color/src/colorSchemes/categorical/lyft';
 import PresetPalettes from '@superset-ui/color/src/colorSchemes/categorical/preset';
@@ -21,6 +22,7 @@ export const categoricalPalettes = () =>
     { palettes: SupersetPalettes, storyName: 'Superset' },
     { palettes: AirbnbPalettes, storyName: 'Airbnb' },
     { palettes: D3Palettes, storyName: 'd3' },
+    { palettes: EchartsPalettes, storyName: 'ECharts' },
     { palettes: GooglePalettes, storyName: 'Google' },
     { palettes: LyftPalettes, storyName: 'Lyft' },
     { palettes: PresetPalettes, storyName: 'Preset' },