feat(superset-ui-core): add feature flag for the analogous colors

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

@@ -24,6 +24,7 @@ import { ColorsLookup } from './types';
 import stringifyAndTrim from './stringifyAndTrim';
 import getSharedLabelColor from './SharedLabelColorSingleton';
 import { getAnalogousColors } from './utils';
+import { FeatureFlag, isFeatureEnabled } from '../utils';
 
 // Use type augmentation to correct the fact that
 // an instance of CategoricalScale is also a function
@@ -79,13 +80,15 @@ class CategoricalColorScale extends ExtensibleFunction {
       return forcedColor;
     }
 
-    const multiple = Math.floor(
-      this.domain().length / this.originColors.length,
-    );
-    if (multiple > this.multiple) {
-      this.multiple = multiple;
-      const newRange = getAnalogousColors(this.originColors, multiple);
-      this.range(this.originColors.concat(newRange));
+    if (isFeatureEnabled(FeatureFlag.USE_ANALAGOUS_COLORS)) {
+      const multiple = Math.floor(
+        this.domain().length / this.originColors.length,
+      );
+      if (multiple > this.multiple) {
+        this.multiple = multiple;
+        const newRange = getAnalogousColors(this.originColors, multiple);
+        this.range(this.originColors.concat(newRange));
+      }
     }
 
     const color = this.scale(cleanedValue);

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

@@ -18,7 +18,7 @@
  */
 
 import { CategoricalColorNamespace } from '.';
-import makeSingleton from '../utils/makeSingleton';
+import { FeatureFlag, isFeatureEnabled, makeSingleton } from '../utils';
 import { getAnalogousColors } from './utils';
 
 export class SharedLabelColor {
@@ -37,25 +37,39 @@ export class SharedLabelColor {
     if (colorScheme) {
       const categoricalNamespace =
         CategoricalColorNamespace.getNamespace(colorNamespace);
-      const colors = categoricalNamespace.getScale(colorScheme).range();
       const sharedLabels = this.getSharedLabels();
       let generatedColors: string[] = [];
       let sharedLabelMap;
 
       if (sharedLabels.length) {
-        const multiple = Math.ceil(sharedLabels.length / colors.length);
-        generatedColors = getAnalogousColors(colors, multiple);
-        sharedLabelMap = sharedLabels.reduce(
-          (res, label, index) => ({
-            ...res,
-            [label.toString()]: generatedColors[index],
-          }),
-          {},
-        );
+        const colorScale = categoricalNamespace.getScale(colorScheme);
+        const colors = colorScale.range();
+        if (isFeatureEnabled(FeatureFlag.USE_ANALAGOUS_COLORS)) {
+          const multiple = Math.ceil(sharedLabels.length / colors.length);
+          generatedColors = getAnalogousColors(colors, multiple);
+          sharedLabelMap = sharedLabels.reduce(
+            (res, label, index) => ({
+              ...res,
+              [label.toString()]: generatedColors[index],
+            }),
+            {},
+          );
+        } else {
+          // reverse colors to reduce color conflicts
+          colorScale.range(colors.reverse());
+          sharedLabelMap = sharedLabels.reduce(
+            (res, label) => ({
+              ...res,
+              [label.toString()]: colorScale(label),
+            }),
+            {},
+          );
+        }
       }
 
       const labelMap = Object.keys(this.sliceLabelColorMap).reduce(
         (res, sliceId) => {
+          // get new color scale instance
           const colorScale = categoricalNamespace.getScale(colorScheme);
           return {
             ...res,

superset-frontend/packages/superset-ui-core/src/utils/featureFlags.ts

@@ -54,6 +54,7 @@ export enum FeatureFlag {
   ALLOW_FULL_CSV_EXPORT = 'ALLOW_FULL_CSV_EXPORT',
   UX_BETA = 'UX_BETA',
   GENERIC_CHART_AXES = 'GENERIC_CHART_AXES',
+  USE_ANALAGOUS_COLORS = 'USE_ANALAGOUS_COLORS',
 }
 export type ScheduleQueriesProps = {
   JSONSCHEMA: {

superset-frontend/packages/superset-ui-core/test/color/CategoricalColorScale.test.ts

@@ -18,7 +18,7 @@
  */
 
 import { ScaleOrdinal } from 'd3-scale';
-import { CategoricalColorScale } from '@superset-ui/core';
+import { CategoricalColorScale, FeatureFlag } from '@superset-ui/core';
 
 describe('CategoricalColorScale', () => {
   it('exists', () => {
@@ -62,7 +62,36 @@ describe('CategoricalColorScale', () => {
       expect(c2).not.toBe(c3);
       expect(c3).not.toBe(c1);
     });
+    it('recycles colors when number of items exceed available colors', () => {
+      window.featureFlags = {
+        [FeatureFlag.USE_ANALAGOUS_COLORS]: false,
+      };
+      const colorSet: { [key: string]: number } = {};
+      const scale = new CategoricalColorScale(['blue', 'red', 'green']);
+      const colors = [
+        scale.getColor('pig'),
+        scale.getColor('horse'),
+        scale.getColor('cat'),
+        scale.getColor('cow'),
+        scale.getColor('donkey'),
+        scale.getColor('goat'),
+      ];
+      colors.forEach(color => {
+        if (colorSet[color]) {
+          colorSet[color] += 1;
+        } else {
+          colorSet[color] = 1;
+        }
+      });
+      expect(Object.keys(colorSet)).toHaveLength(3);
+      ['blue', 'red', 'green'].forEach(color => {
+        expect(colorSet[color]).toBe(2);
+      });
+    });
     it('get analogous colors when number of items exceed available colors', () => {
+      window.featureFlags = {
+        [FeatureFlag.USE_ANALAGOUS_COLORS]: true,
+      };
       const scale = new CategoricalColorScale(['blue', 'red', 'green']);
       scale.getColor('pig');
       scale.getColor('horse');

superset/config.py

@@ -425,6 +425,7 @@ def _try_json_readsha(filepath: str, length: int) -> Optional[str]:
     "UX_BETA": False,
     "GENERIC_CHART_AXES": False,
     "ALLOW_ADHOC_SUBQUERY": False,
+    "USE_ANALAGOUS_COLORS": True,
     # Apply RLS rules to SQL Lab queries. This requires parsing and manipulating the
     # query, and might break queries and/or allow users to bypass RLS. Use with care!
     "RLS_IN_SQLLAB": False,