feat: improve color consistency (save all labels) (#19038)

.gitignore

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

superset-frontend/package.json

@@ -196,6 +196,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",
@@ -261,6 +262,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-chart-controls/src/shared-controls/index.tsx

@@ -205,6 +205,9 @@ const linear_color_scheme: SharedControlConfig<'ColorSchemeControl'> = {
   renderTrigger: true,
   schemes: () => sequentialSchemeRegistry.getMap(),
   isLinear: true,
+  mapStateToProps: state => ({
+    dashboardId: state?.form_data?.dashboardId,
+  }),
 };
 
 const secondary_metric: SharedControlConfig<'MetricsControl'> = {

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,20 +55,27 @@ class CategoricalColorScale extends ExtensibleFunction {
     this.forcedColors = {};
   }
 
-  getColor(value?: string) {
+  getColor(value?: string, sliceId?: number) {
     const cleanedValue = stringifyAndTrim(value);
+    const sharedLabelColor = getSharedLabelColor();
+
     const parentColor =
       this.parentForcedColors && this.parentForcedColors[cleanedValue];
     if (parentColor) {
+      sharedLabelColor.addSlice(cleanedValue, parentColor, sliceId);
       return parentColor;
     }
 
     const forcedColor = this.forcedColors[cleanedValue];
     if (forcedColor) {
+      sharedLabelColor.addSlice(cleanedValue, forcedColor, sliceId);
       return forcedColor;
     }
 
-    return this.scale(cleanedValue);
+    const color = this.scale(cleanedValue);
+    sharedLabelColor.addSlice(cleanedValue, color, sliceId);
+
+    return color;
   }
 
   /**

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

@@ -0,0 +1,130 @@
+/*
+ * 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 {
+  sliceLabelColorMap: Record<number, Record<string, string | undefined>>;
+
+  constructor() {
+    // { sliceId1: { label1: color1 }, sliceId2: { label2: color2 } }
+    this.sliceLabelColorMap = {};
+  }
+
+  getColorMap(
+    colorNamespace?: string,
+    colorScheme?: string,
+    updateColorScheme?: boolean,
+  ) {
+    if (colorScheme) {
+      const categoricalNamespace =
+        CategoricalColorNamespace.getNamespace(colorNamespace);
+      const colors = categoricalNamespace.getScale(colorScheme).range();
+      const sharedLabels = this.getSharedLabels();
+      const generatedColors: tinycolor.Instance[] = [];
+      let sharedLabelMap;
+
+      if (sharedLabels.length) {
+        const multiple = Math.ceil(sharedLabels.length / colors.length);
+        const ext = 5;
+        const analogousColors = colors.map(color => {
+          const result = tinycolor(color).analogous(multiple + ext);
+          return result.slice(ext);
+        });
+
+        // [[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),
+          );
+        }
+        sharedLabelMap = sharedLabels.reduce(
+          (res, label, index) => ({
+            ...res,
+            [label.toString()]: generatedColors[index]?.toHexString(),
+          }),
+          {},
+        );
+      }
+
+      const labelMap = Object.keys(this.sliceLabelColorMap).reduce(
+        (res, sliceId) => {
+          const colorScale = categoricalNamespace.getScale(colorScheme);
+          return {
+            ...res,
+            ...Object.keys(this.sliceLabelColorMap[sliceId]).reduce(
+              (res, label) => ({
+                ...res,
+                [label]: updateColorScheme
+                  ? colorScale(label)
+                  : this.sliceLabelColorMap[sliceId][label],
+              }),
+              {},
+            ),
+          };
+        },
+        {},
+      );
+
+      return {
+        ...labelMap,
+        ...sharedLabelMap,
+      };
+    }
+    return undefined;
+  }
+
+  addSlice(label: string, color: string, sliceId?: number) {
+    if (!sliceId) return;
+    this.sliceLabelColorMap[sliceId] = {
+      ...this.sliceLabelColorMap[sliceId],
+      [label]: color,
+    };
+  }
+
+  removeSlice(sliceId: number) {
+    delete this.sliceLabelColorMap[sliceId];
+  }
+
+  clear() {
+    this.sliceLabelColorMap = {};
+  }
+
+  getSharedLabels() {
+    const tempLabels = new Set<string>();
+    const result = new Set<string>();
+    Object.keys(this.sliceLabelColorMap).forEach(sliceId => {
+      const colorMap = this.sliceLabelColorMap[sliceId];
+      Object.keys(colorMap).forEach(label => {
+        if (tempLabels.has(label) && !result.has(label)) {
+          result.add(label);
+        } else {
+          tempLabels.add(label);
+        }
+      });
+    });
+    return [...result];
+  }
+}
+
+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';