feat(dashboard): make color indices referable (#23657)

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

@@ -20,7 +20,7 @@
 /* eslint-disable no-dupe-class-members */
 import { scaleOrdinal, ScaleOrdinal } from 'd3-scale';
 import { ExtensibleFunction } from '../models';
-import { ColorsLookup } from './types';
+import { ColorsInitLookup, ColorsLookup } from './types';
 import stringifyAndTrim from './stringifyAndTrim';
 import getSharedLabelColor from './SharedLabelColorSingleton';
 import { getAnalogousColors } from './utils';
@@ -39,7 +39,7 @@ class CategoricalColorScale extends ExtensibleFunction {
 
   scale: ScaleOrdinal<{ toString(): string }, string>;
 
-  parentForcedColors?: ColorsLookup;
+  parentForcedColors: ColorsLookup;
 
   forcedColors: ColorsLookup;
 
@@ -51,14 +51,24 @@ class CategoricalColorScale extends ExtensibleFunction {
    * @param {*} parentForcedColors optional parameter that comes from parent
    * (usually CategoricalColorNamespace) and supersede this.forcedColors
    */
-  constructor(colors: string[], parentForcedColors: ColorsLookup = {}) {
+  constructor(colors: string[], parentForcedColors: ColorsInitLookup = {}) {
     super((value: string, sliceId?: number) => this.getColor(value, sliceId));
 
     this.originColors = colors;
     this.colors = colors;
     this.scale = scaleOrdinal<{ toString(): string }, string>();
     this.scale.range(colors);
-    this.parentForcedColors = parentForcedColors;
+
+    // reserve fixed colors in parent map based on their index in the scale
+    Object.entries(parentForcedColors).forEach(([key, value]) => {
+      if (typeof value === 'number') {
+        // eslint-disable-next-line no-param-reassign
+        parentForcedColors[key] = colors[value % colors.length];
+      }
+    });
+
+    // all indexes have been replaced by a fixed color
+    this.parentForcedColors = parentForcedColors as ColorsLookup;
     this.forcedColors = {};
     this.multiple = 0;
   }
@@ -165,7 +175,7 @@ class CategoricalColorScale extends ExtensibleFunction {
    *
    * If there are fewer elements in the range than in the domain, the scale will reuse values from the start of the range.
    *
-   * @param range Array of range values.
+   * @param newRange Array of range values.
    */
   range(newRange: string[]): this;
 

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

@@ -17,6 +17,10 @@
  * under the License.
  */
 
+export interface ColorsInitLookup {
+  [key: string]: string | number;
+}
+
 export interface ColorsLookup {
   [key: string]: string;
 }

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

@@ -39,7 +39,22 @@ describe('CategoricalColorScale', () => {
       expect(scale).toBeInstanceOf(CategoricalColorScale);
       expect(scale.parentForcedColors).toBe(parentForcedColors);
     });
+
+    it('can refer to colors based on their index', () => {
+      const parentForcedColors = { pig: 1, horse: 5 };
+      const scale = new CategoricalColorScale(
+        ['blue', 'red', 'green'],
+        parentForcedColors,
+      );
+      expect(scale.getColor('pig')).toEqual('red');
+      expect(parentForcedColors.pig).toEqual('red');
+
+      // can loop around the scale
+      expect(scale.getColor('horse')).toEqual('green');
+      expect(parentForcedColors.horse).toEqual('green');
+    });
   });
+
   describe('.getColor(value)', () => {
     it('returns same color for same value', () => {
       const scale = new CategoricalColorScale(['blue', 'red', 'green']);