You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by gi...@apache.org on 2024/10/11 10:52:00 UTC
(superset) 01/01: Draft: chart-specific label_colors
This is an automated email from the ASF dual-hosted git repository.
giftig pushed a commit to branch label_colors
in repository https://gitbox.apache.org/repos/asf/superset.git
commit 186f7acfa478ff7de79b0e3d250b502fa0a02dcc
Author: Rob Moore <gi...@gmail.com>
AuthorDate: Fri Oct 11 11:51:35 2024 +0100
Draft: chart-specific label_colors
---
.../src/color/CategoricalColorNamespace.ts | 20 ++++++++++++++++----
.../src/color/CategoricalColorScale.ts | 22 ++++++++++++++++++----
.../packages/superset-ui-core/src/color/types.ts | 4 ++++
superset-frontend/src/utils/colorScheme.ts | 9 +++++++++
4 files changed, 47 insertions(+), 8 deletions(-)
diff --git a/superset-frontend/packages/superset-ui-core/src/color/CategoricalColorNamespace.ts b/superset-frontend/packages/superset-ui-core/src/color/CategoricalColorNamespace.ts
index 9c56d5114b..328ca12ff8 100644
--- a/superset-frontend/packages/superset-ui-core/src/color/CategoricalColorNamespace.ts
+++ b/superset-frontend/packages/superset-ui-core/src/color/CategoricalColorNamespace.ts
@@ -18,7 +18,7 @@
*/
import CategoricalColorScale from './CategoricalColorScale';
-import { ColorsLookup } from './types';
+import { ColorsLookup, ChartColorsLookup } from './types';
import getCategoricalSchemeRegistry from './CategoricalSchemeRegistrySingleton';
import stringifyAndTrim from './stringifyAndTrim';
@@ -26,6 +26,7 @@ export default class CategoricalColorNamespace {
name: string;
forcedItems: ColorsLookup;
+ perChartForcedItems: ChartColorsLookup;
scales: {
[key: string]: CategoricalColorScale;
@@ -35,12 +36,15 @@ export default class CategoricalColorNamespace {
this.name = name;
this.scales = {};
this.forcedItems = {};
+ this.perChartForcedItems = {};
}
getScale(schemeId?: string) {
const id = schemeId ?? getCategoricalSchemeRegistry().getDefaultKey() ?? '';
const scheme = getCategoricalSchemeRegistry().get(id);
- return new CategoricalColorScale(scheme?.colors ?? [], this.forcedItems);
+ return new CategoricalColorScale(
+ scheme?.colors ?? [], this.forcedItems, this.perChartForcedItems
+ );
}
/**
@@ -50,14 +54,22 @@ export default class CategoricalColorNamespace {
* @param {*} value value
* @param {*} forcedColor color
*/
- setColor(value: string, forcedColor: string) {
- this.forcedItems[stringifyAndTrim(value)] = forcedColor;
+ setColor(value: string, forcedColor: string, chartId?: string) {
+ if (chartId != null) {
+ let cleanChartId = stringifyAndTrim(chartId);
+ let perChart = this.perChartForcedItems[cleanChartId] || {};
+ perChart[stringifyAndTrim(value)] = forcedColor;
+ this.perChartForcedItems[cleanChartId] = perChart;
+ } else {
+ this.forcedItems[stringifyAndTrim(value)] = forcedColor;
+ }
return this;
}
resetColors() {
this.forcedItems = {};
+ this.perChartForcedItems = {};
}
}
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 f97f84cdec..f80f7f7166 100644
--- a/superset-frontend/packages/superset-ui-core/src/color/CategoricalColorScale.ts
+++ b/superset-frontend/packages/superset-ui-core/src/color/CategoricalColorScale.ts
@@ -19,7 +19,7 @@
import { scaleOrdinal, ScaleOrdinal } from 'd3-scale';
import { ExtensibleFunction } from '../models';
-import { ColorsInitLookup, ColorsLookup } from './types';
+import { ColorsInitLookup, ColorsLookup, ChartColorsLookup } from './types';
import stringifyAndTrim from './stringifyAndTrim';
import getLabelsColorMap from './LabelsColorMapSingleton';
import { getAnalogousColors } from './utils';
@@ -39,6 +39,7 @@ class CategoricalColorScale extends ExtensibleFunction {
scale: ScaleOrdinal<{ toString(): string }, string>;
forcedColors: ColorsLookup;
+ perChartForcedColors: ChartColorsLookup;
labelsColorMapInstance: ReturnType<typeof getLabelsColorMap>;
@@ -52,7 +53,11 @@ class CategoricalColorScale extends ExtensibleFunction {
* @param {*} forcedColors optional parameter that comes from parent
* (usually CategoricalColorNamespace)
*/
- constructor(colors: string[], forcedColors: ColorsInitLookup = {}) {
+ constructor(
+ colors: string[],
+ forcedColors: ColorsInitLookup = {},
+ perChartForcedColors: ChartColorsLookup = {}
+ ) {
super((value: string, sliceId?: number, colorScheme?: string) =>
this.getColor(value, sliceId, colorScheme),
);
@@ -81,6 +86,7 @@ class CategoricalColorScale extends ExtensibleFunction {
// forced colors from parent (usually CategoricalColorNamespace)
// currently used in dashboards to set custom label colors
this.forcedColors = forcedColors as ColorsLookup;
+ this.perChartForcedColors = perChartForcedColors;
}
/**
@@ -112,8 +118,16 @@ class CategoricalColorScale extends ExtensibleFunction {
*/
getColor(value?: string, sliceId?: number, colorScheme?: string): string {
const cleanedValue = stringifyAndTrim(value);
- // priority: forced color (i.e. custom label colors) > shared color > scale color
- const forcedColor = this.forcedColors?.[cleanedValue];
+
+ // priority: forced color (i.e. custom label colors) per chart > forced color per dashboard >
+ // shared color > scale color
+ let chartForcedColor = null;
+ if (sliceId != null) {
+ chartForcedColor = this.perChartForcedColors?.[stringifyAndTrim(sliceId)]?.[cleanedValue];
+ }
+ console.log(`HODOR HODOR HODOR: ${chartForcedColor}`);
+ const forcedColor = chartForcedColor ?? this.forcedColors?.[cleanedValue];
+
const isExistingLabel = this.chartLabelsColorMap.has(cleanedValue);
let color = forcedColor || this.scale(cleanedValue);
diff --git a/superset-frontend/packages/superset-ui-core/src/color/types.ts b/superset-frontend/packages/superset-ui-core/src/color/types.ts
index d3fab4b971..9031b19746 100644
--- a/superset-frontend/packages/superset-ui-core/src/color/types.ts
+++ b/superset-frontend/packages/superset-ui-core/src/color/types.ts
@@ -25,6 +25,10 @@ export interface ColorsLookup {
[key: string]: string;
}
+export interface ChartColorsLookup {
+ [key: string]: ColorsLookup;
+}
+
export interface RgbaColor {
r: number;
g: number;
diff --git a/superset-frontend/src/utils/colorScheme.ts b/superset-frontend/src/utils/colorScheme.ts
index be4d3786e0..f70135c6db 100644
--- a/superset-frontend/src/utils/colorScheme.ts
+++ b/superset-frontend/src/utils/colorScheme.ts
@@ -124,6 +124,15 @@ export const applyColors = (metadata: Record<string, any>, fresh = false) => {
categoricalNamespace.setColor(label, customLabelColors[label]);
});
+ // per-chart custom label colors
+ Object.keys(metadata?.chart_configuration).forEach(chartId => {
+ const perChartCustomLabelColors = metadata?.chart_configuration?.[chartId]?.label_colors || {};
+
+ Object.keys(perChartCustomLabelColors).forEach(label => {
+ categoricalNamespace.setColor(label, perChartCustomLabelColors[label], chartId);
+ });
+ });
+
// re-instantiate a fresh labels color map based on current scheme
// will consider also just applied custom label colors
refreshLabelsColorMap(metadata?.color_namespace, colorScheme);