diff --git a/superset-frontend/packages/superset-ui-core/src/color/CategoricalColorScale.ts b/superset-frontend/packages/superset-ui-core/src/color/CategoricalColorScale.ts index c6f37e4ff7..2a6a4d63a0 100644 --- a/superset-frontend/packages/superset-ui-core/src/color/CategoricalColorScale.ts +++ b/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); diff --git a/superset-frontend/packages/superset-ui-core/src/color/SharedLabelColorSingleton.ts b/superset-frontend/packages/superset-ui-core/src/color/SharedLabelColorSingleton.ts index d2a59ac7c2..10a14df075 100644 --- a/superset-frontend/packages/superset-ui-core/src/color/SharedLabelColorSingleton.ts +++ b/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, diff --git a/superset-frontend/packages/superset-ui-core/src/utils/featureFlags.ts b/superset-frontend/packages/superset-ui-core/src/utils/featureFlags.ts index 422f88f8f1..d6a1f2097f 100644 --- a/superset-frontend/packages/superset-ui-core/src/utils/featureFlags.ts +++ b/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: { diff --git a/superset-frontend/packages/superset-ui-core/test/color/CategoricalColorScale.test.ts b/superset-frontend/packages/superset-ui-core/test/color/CategoricalColorScale.test.ts index 1d47cf760e..91a8f4a318 100644 --- a/superset-frontend/packages/superset-ui-core/test/color/CategoricalColorScale.test.ts +++ b/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'); diff --git a/superset/config.py b/superset/config.py index c4af7bc8a5..8a5ec248fb 100644 --- a/superset/config.py +++ b/superset/config.py @@ -425,6 +425,7 @@ DEFAULT_FEATURE_FLAGS: Dict[str, bool] = { "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,