feat(explore): Color scheme groups, new color schemes

superset-frontend/cypress-base/cypress/e2e/dashboard/editmode.test.ts

@@ -215,7 +215,7 @@ describe('Dashboard edit', () => {
 
     it('should apply same color to same labels with color scheme set', () => {
       openProperties();
-      selectColorScheme('lyftColors');
+      selectColorScheme('blueToGreen');
       applyChanges();
       saveChanges();
 
@@ -231,7 +231,7 @@ describe('Dashboard edit', () => {
         '[data-test-chart-name="Top 10 California Names Timeseries"] .line .nv-legend-symbol',
       )
         .first()
-        .should('have.css', 'fill', 'rgb(51, 61, 71)');
+        .should('have.css', 'fill', 'rgb(0, 234, 162)');
 
       // open 2nd main tab
       openTab(0, 1);
@@ -240,7 +240,7 @@ describe('Dashboard edit', () => {
       // label Anthony
       cy.get('[data-test-chart-name="Trends"] .line .nv-legend-symbol')
         .eq(2)
-        .should('have.css', 'fill', 'rgb(51, 61, 71)');
+        .should('have.css', 'fill', 'rgb(0, 234, 162)');
     });
 
     it('should apply same color to same labels with no color scheme set', () => {
@@ -480,7 +480,7 @@ describe('Dashboard edit', () => {
 
     it.skip('should change color scheme multiple times', () => {
       openProperties();
-      selectColorScheme('lyftColors');
+      selectColorScheme('blueToGreen');
       applyChanges();
       saveChanges();
 
@@ -509,7 +509,7 @@ describe('Dashboard edit', () => {
 
       editDashboard();
       openProperties();
-      selectColorScheme('bnbColors');
+      selectColorScheme('modernSunset');
       applyChanges();
       saveChanges();
 
@@ -532,7 +532,7 @@ describe('Dashboard edit', () => {
 
     it.skip('should apply the color scheme across main tabs', () => {
       openProperties();
-      selectColorScheme('lyftColors');
+      selectColorScheme('blueToGreen');
       applyChanges();
       saveChanges();
 
@@ -548,7 +548,7 @@ describe('Dashboard edit', () => {
     it.skip('should apply the color scheme across main tabs for rendered charts', () => {
       waitForChartLoad({ name: 'Treemap', viz: 'treemap_v2' });
       openProperties();
-      selectColorScheme('bnbColors');
+      selectColorScheme('blueToGreen');
       applyChanges();
       saveChanges();
 
@@ -563,7 +563,7 @@ describe('Dashboard edit', () => {
       // change scheme now that charts are rendered across the main tabs
       editDashboard();
       openProperties();
-      selectColorScheme('lyftColors');
+      selectColorScheme('modernSunset');
       applyChanges();
       saveChanges();
 
@@ -574,7 +574,7 @@ describe('Dashboard edit', () => {
 
     it.skip('should apply the color scheme in nested tabs', () => {
       openProperties();
-      selectColorScheme('lyftColors');
+      selectColorScheme('blueToGreen');
       applyChanges();
       saveChanges();
 
@@ -609,7 +609,7 @@ describe('Dashboard edit', () => {
       // go to previous tab
       openTab(1, 0);
       openProperties();
-      selectColorScheme('lyftColors');
+      selectColorScheme('blueToGreen');
       applyChanges();
       saveChanges();
 
@@ -646,16 +646,16 @@ describe('Dashboard edit', () => {
     });
 
     it.skip('should overwrite the color scheme when advanced is closed', () => {
-      selectColorScheme('d3Category20b');
+      selectColorScheme('blueToGreen');
       openAdvancedProperties();
-      assertMetadata('d3Category20b');
+      assertMetadata('blueToGreen');
       applyChanges();
     });
 
     it.skip('should overwrite the color scheme when advanced is open', () => {
       openAdvancedProperties();
-      selectColorScheme('googleCategory10c');
-      assertMetadata('googleCategory10c');
+      selectColorScheme('modernSunset');
+      assertMetadata('modernSunset');
       applyChanges();
     });
 

superset-frontend/packages/superset-ui-core/src/color/ColorScheme.ts

@@ -17,12 +17,15 @@
  * under the License.
  */
 
+import { ColorSchemeGroup } from './types';
+
 export interface ColorSchemeConfig {
   colors: string[];
   description?: string;
   id: string;
   label?: string;
   isDefault?: boolean;
+  group?: ColorSchemeGroup;
 }
 
 export default class ColorScheme {
@@ -36,17 +39,21 @@ export default class ColorScheme {
 
   isDefault?: boolean;
 
+  group?: ColorSchemeGroup;
+
   constructor({
     colors,
     description = '',
     id,
     label,
     isDefault,
+    group,
   }: ColorSchemeConfig) {
     this.id = id;
     this.label = label ?? id;
     this.colors = colors;
     this.description = description;
     this.isDefault = isDefault;
+    this.group = group;
   }
 }

superset-frontend/packages/superset-ui-core/src/color/colorSchemes/categorical/blueToGreen.ts

@@ -0,0 +1,43 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import CategoricalScheme from '../../CategoricalScheme';
+import { ColorSchemeGroup } from '../../types';
+
+const schemes = [
+  {
+    id: 'blueToGreen',
+    label: 'Blue to green',
+    group: ColorSchemeGroup.Featured,
+    colors: [
+      '#3200A7',
+      '#004CDA',
+      '#0074F1',
+      '#0096EF',
+      '#53BFFF',
+      '#41C8E6',
+      '#30DEDE',
+      '#04D9C7',
+      '#00EAA2',
+      '#A6FF93',
+    ],
+  },
+].map(s => new CategoricalScheme(s));
+
+export default schemes;

superset-frontend/packages/superset-ui-core/src/color/colorSchemes/categorical/colorsOfRainbow.ts

@@ -0,0 +1,45 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import CategoricalScheme from '../../CategoricalScheme';
+import { ColorSchemeGroup } from '../../types';
+
+const schemes = [
+  {
+    id: 'colorsOfRainbow',
+    label: 'Colors of rainbow',
+    group: ColorSchemeGroup.Featured,
+    colors: [
+      '#41ED86',
+      '#2FC096',
+      '#01DFFF',
+      '#153AE0',
+      '#850AD6',
+      '#BD59FF',
+      '#FF4A96',
+      '#C32668',
+      '#F40000',
+      '#FF8901',
+      '#FFBC0A',
+      '#FFEC43',
+    ],
+  },
+].map(s => new CategoricalScheme(s));
+
+export default schemes;

superset-frontend/packages/superset-ui-core/src/color/colorSchemes/categorical/index.ts

@@ -24,3 +24,9 @@ export { default as CategoricalGoogle } from './google';
 export { default as CategoricalLyft } from './lyft';
 export { default as CategoricalPreset } from './preset';
 export { default as CategoricalSuperset } from './superset';
+export { default as CategoricalPresetSuperset } from './presetAndSuperset';
+export { default as CategoricalModernSunset } from './modernSunset';
+export { default as CategoricalColorsOfRainbow } from './colorsOfRainbow';
+export { default as CategoricalBlueToGreen } from './blueToGreen';
+export { default as CategoricalRedToYellow } from './redToYellow';
+export { default as CategoricalWavesOfBlue } from './wavesOfBlue';

superset-frontend/packages/superset-ui-core/src/color/colorSchemes/categorical/modernSunset.ts

@@ -0,0 +1,45 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import CategoricalScheme from '../../CategoricalScheme';
+import { ColorSchemeGroup } from '../../types';
+
+const schemes = [
+  {
+    id: 'modernSunset',
+    label: 'Modern sunset',
+    group: ColorSchemeGroup.Featured,
+    colors: [
+      '#0080F6',
+      '#254081',
+      '#6C4592',
+      '#A94693',
+      '#DC4180',
+      '#F35193',
+      '#FF7582',
+      '#FF4C5D',
+      '#FF824E',
+      '#FFAD2A',
+      '#FFDB04',
+      '#F3F700',
+    ],
+  },
+].map(s => new CategoricalScheme(s));
+
+export default schemes;

superset-frontend/packages/superset-ui-core/src/color/colorSchemes/categorical/preset.ts

@@ -18,11 +18,13 @@
  */
 
 import CategoricalScheme from '../../CategoricalScheme';
+import { ColorSchemeGroup } from '../../types';
 
 const schemes = [
   {
     id: 'presetColors',
     label: 'Preset Colors',
+    group: ColorSchemeGroup.Featured,
     colors: [
       // Full color
       '#6BD3B3',

superset-frontend/packages/superset-ui-core/src/color/colorSchemes/categorical/presetAndSuperset.ts

@@ -0,0 +1,45 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import CategoricalScheme from '../../CategoricalScheme';
+import { ColorSchemeGroup } from '../../types';
+
+const schemes = [
+  {
+    id: 'supersetAndPresetColors',
+    label: 'Preset + Superset',
+    group: ColorSchemeGroup.Featured,
+    colors: [
+      '#004960',
+      '#2893B3',
+      '#20A7C9',
+      '#5CC0DA',
+      '#7DCDE1',
+      '#A9D3E1',
+      '#C6ECE1',
+      '#AAE2D2',
+      '#71CFB4',
+      '#2FC096',
+      '#178F7A',
+      '#067162',
+    ],
+  },
+].map(s => new CategoricalScheme(s));
+
+export default schemes;

superset-frontend/packages/superset-ui-core/src/color/colorSchemes/categorical/redToYellow.ts

@@ -0,0 +1,43 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import CategoricalScheme from '../../CategoricalScheme';
+import { ColorSchemeGroup } from '../../types';
+
+const schemes = [
+  {
+    id: 'redToYellow',
+    label: 'Red to yellow',
+    group: ColorSchemeGroup.Featured,
+    colors: [
+      '#90042A',
+      '#D60039',
+      '#D1353B',
+      '#E45233',
+      '#F47028',
+      '#FE8E17',
+      '#FFAD00',
+      '#FFCC00',
+      '#FFE601',
+      '#FFF46D',
+    ],
+  },
+].map(s => new CategoricalScheme(s));
+
+export default schemes;