feat: improve color consistency

.gitignore

@@ -108,3 +108,5 @@ release.json
 messages.mo
 
 docker/requirements-local.txt
+
+cache/

superset-frontend/package.json

@@ -197,6 +197,7 @@
     "rison": "^0.1.1",
     "scroll-into-view-if-needed": "^2.2.28",
     "shortid": "^2.2.6",
+    "tinycolor2": "^1.4.2",
     "urijs": "^1.19.8",
     "use-immer": "^0.6.0",
     "use-query-params": "^1.1.9",
@@ -262,6 +263,7 @@
     "@types/rison": "0.0.6",
     "@types/shortid": "^0.0.29",
     "@types/sinon": "^9.0.5",
+    "@types/tinycolor2": "^1.4.3",
     "@types/yargs": "12 - 15",
     "@typescript-eslint/eslint-plugin": "^5.3.0",
     "@typescript-eslint/parser": "^5.3.0",

superset-frontend/packages/superset-ui-core/package.json

@@ -42,6 +42,7 @@
     "@types/math-expression-evaluator": "^1.2.1",
     "@types/rison": "0.0.6",
     "@types/seedrandom": "^2.4.28",
+    "@types/tinycolor2": "^1.4.3",
     "@types/fetch-mock": "^7.3.3",
     "@types/enzyme": "^3.10.5",
     "@types/prop-types": "^15.7.2",

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

@@ -22,12 +22,12 @@ import { scaleOrdinal, ScaleOrdinal } from 'd3-scale';
 import { ExtensibleFunction } from '../models';
 import { ColorsLookup } from './types';
 import stringifyAndTrim from './stringifyAndTrim';
+import getSharedLabelColor from './SharedLabelColorSingleton';
 
 // Use type augmentation to correct the fact that
 // an instance of CategoricalScale is also a function
-
 interface CategoricalColorScale {
-  (x: { toString(): string }): string;
+  (x: { toString(): string }, y?: number): string;
 }
 
 class CategoricalColorScale extends ExtensibleFunction {
@@ -46,7 +46,7 @@ class CategoricalColorScale extends ExtensibleFunction {
    * (usually CategoricalColorNamespace) and supersede this.forcedColors
    */
   constructor(colors: string[], parentForcedColors?: ColorsLookup) {
-    super((value: string) => this.getColor(value));
+    super((value: string, sliceId?: number) => this.getColor(value, sliceId));
 
     this.colors = colors;
     this.scale = scaleOrdinal<{ toString(): string }, string>();
@@ -55,8 +55,11 @@ class CategoricalColorScale extends ExtensibleFunction {
     this.forcedColors = {};
   }
 
-  getColor(value?: string) {
+  getColor(value?: string, sliceId?: number) {
     const cleanedValue = stringifyAndTrim(value);
+
+    getSharedLabelColor().addSlice(cleanedValue, sliceId);
+
     const parentColor =
       this.parentForcedColors && this.parentForcedColors[cleanedValue];
     if (parentColor) {

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

@@ -0,0 +1,97 @@
+/*
+ * 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 tinycolor from 'tinycolor2';
+import { CategoricalColorNamespace } from '.';
+import makeSingleton from '../utils/makeSingleton';
+
+export class SharedLabelColor {
+  values: string[];
+
+  valueSliceMap: Record<string, number[]>;
+
+  constructor() {
+    // save all shared label value
+    this.values = [];
+    // { value1: [sliceId1, sliceId2], value2: [sliceId], ...}
+    this.valueSliceMap = {};
+  }
+
+  getColorMap(colorNamespace?: string, colorScheme?: string) {
+    if (colorScheme) {
+      const categoricalNamespace =
+        CategoricalColorNamespace.getNamespace(colorNamespace);
+      const scale = categoricalNamespace.getScale(colorScheme);
+      const colors = scale.range();
+      const multiple = Math.ceil(this.values.length / colors.length);
+      const analogousColors = colors.map(color => {
+        const result = tinycolor(color).analogous(Math.max(multiple, 5));
+        return result.slice(result.length - multiple, result.length);
+      });
+      const generatedColors: tinycolor.Instance[] = [];
+      // [[A, AA, AAA], [B, BB, BBB]] => [A, B, AA, BB, AAA, BBB]
+      while (analogousColors[analogousColors.length - 1]?.length) {
+        analogousColors.forEach(colors =>
+          generatedColors.push(colors.shift() as tinycolor.Instance),
+        );
+      }
+      return this.values.reduce(
+        (res, name, index) => ({
+          ...res,
+          [name.toString()]: generatedColors[index]?.toHexString(),
+        }),
+        {},
+      );
+    }
+    return undefined;
+  }
+
+  addSlice(value: string, sliceId?: number) {
+    if (!sliceId) return;
+    const sliceIds = this.valueSliceMap[value] ?? [];
+    if (sliceIds.indexOf(sliceId) === -1) {
+      sliceIds.push(sliceId);
+    }
+    this.valueSliceMap[value] = sliceIds;
+    if (sliceIds.length > 1 && this.values.indexOf(value) === -1) {
+      this.values.push(value);
+    }
+  }
+
+  removeSlice(sliceId: number) {
+    Object.keys(this.valueSliceMap).forEach(value => {
+      const sliceIds = this.valueSliceMap[value];
+      if (sliceIds.indexOf(sliceId) > -1) {
+        sliceIds.splice(sliceIds.indexOf(sliceId), 1);
+        if (sliceIds.length <= 1 && this.values.indexOf(value) > -1) {
+          this.values.splice(this.values.indexOf(value), 1);
+        }
+      }
+    });
+  }
+
+  clear() {
+    this.values = [];
+    this.valueSliceMap = {};
+  }
+}
+
+const getInstance = makeSingleton(SharedLabelColor);
+
+export default getInstance;

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

@@ -32,5 +32,9 @@ export * from './SequentialScheme';
 export { default as ColorSchemeRegistry } from './ColorSchemeRegistry';
 export * from './colorSchemes';
 export * from './utils';
+export {
+  default as getSharedLabelColor,
+  SharedLabelColor,
+} from './SharedLabelColorSingleton';
 
 export const BRAND_COLOR = '#00A699';

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

@@ -0,0 +1,126 @@
+/*
+ * 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,
+  getCategoricalSchemeRegistry,
+  getSharedLabelColor,
+  SharedLabelColor,
+} from '@superset-ui/core';
+
+describe('SharedLabelColor', () => {
+  beforeAll(() => {
+    getCategoricalSchemeRegistry()
+      .registerValue(
+        'testColors',
+        new CategoricalScheme({
+          id: 'testColors',
+          colors: ['red', 'green', 'blue'],
+        }),
+      )
+      .registerValue(
+        'testColors2',
+        new CategoricalScheme({
+          id: 'testColors2',
+          colors: ['red', 'green', 'blue'],
+        }),
+      );
+  });
+
+  beforeEach(() => {
+    getSharedLabelColor().clear();
+  });
+
+  it('has default value out-of-the-box', () => {
+    expect(getSharedLabelColor()).toBeInstanceOf(SharedLabelColor);
+  });
+
+  describe('.addSlice(value, sliceId)', () => {
+    it('should add to valueSliceMap when first adding label', () => {
+      const sharedLabelColor = getSharedLabelColor();
+      sharedLabelColor.addSlice('a', 1);
+      expect(sharedLabelColor.valueSliceMap).toHaveProperty('a', [1]);
+      expect(sharedLabelColor.values).toHaveLength(0);
+    });
+
+    it('should not add to value when adding same sliceId', () => {
+      const sharedLabelColor = getSharedLabelColor();
+      sharedLabelColor.addSlice('a', 1);
+      sharedLabelColor.addSlice('a', 1);
+      expect(sharedLabelColor.valueSliceMap).toHaveProperty('a', [1]);
+      expect(sharedLabelColor.values).toHaveLength(0);
+    });
+
+    it('should add to value when adding same label', () => {
+      const sharedLabelColor = getSharedLabelColor();
+      sharedLabelColor.addSlice('a', 1);
+      sharedLabelColor.addSlice('a', 2);
+      expect(sharedLabelColor.valueSliceMap).toHaveProperty('a', [1, 2]);
+      expect(sharedLabelColor.values).toHaveLength(1);
+    });
+
+    it('do nothing when sliceId is undefined', () => {
+      const sharedLabelColor = getSharedLabelColor();
+      sharedLabelColor.addSlice('a');
+      expect(sharedLabelColor.valueSliceMap).toEqual({});
+      expect(sharedLabelColor.values).toHaveLength(0);
+    });
+  });
+
+  describe('.remove(sliceId)', () => {
+    it('should remove sliceId', () => {
+      const sharedLabelColor = getSharedLabelColor();
+      sharedLabelColor.addSlice('a', 1);
+      sharedLabelColor.removeSlice(1);
+      expect(sharedLabelColor.valueSliceMap).toHaveProperty('a', []);
+    });
+
+    it('should not remove sliceId when do not have sliceId', () => {
+      const sharedLabelColor = getSharedLabelColor();
+      sharedLabelColor.addSlice('a', 1);
+      sharedLabelColor.removeSlice(2);
+      expect(sharedLabelColor.valueSliceMap).toHaveProperty('a', [1]);
+    });
+
+    it('should remove label if less than two sliceIds', () => {
+      const sharedLabelColor = getSharedLabelColor();
+      sharedLabelColor.addSlice('a', 1);
+      sharedLabelColor.addSlice('a', 2);
+      sharedLabelColor.removeSlice(2);
+      expect(sharedLabelColor.valueSliceMap).toHaveProperty('a', [1]);
+      expect(sharedLabelColor.values).toHaveLength(0);
+    });
+  });
+
+  describe('.getColorMap(namespace, scheme)', () => {
+    it('return undefined when scheme is undefined', () => {
+      const sharedLabelColor = getSharedLabelColor();
+      const colorMap = sharedLabelColor.getColorMap();
+      expect(colorMap).toBeUndefined();
+    });
+
+    it('return colorMap when scheme is defined', () => {
+      const sharedLabelColor = getSharedLabelColor();
+      sharedLabelColor.addSlice('a', 1);
+      sharedLabelColor.addSlice('a', 2);
+      const colorMap = sharedLabelColor.getColorMap('', 'testColors');
+      expect(colorMap).not.toBeUndefined();
+    });
+  });
+});