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

superset-frontend/plugins/plugin-chart-word-cloud/src/chart/WordCloud.tsx

@@ -25,7 +25,12 @@ import {
   DeriveEncoding,
   Encoder,
 } from 'encodable';
-import { SupersetThemeProps, withTheme, seedRandom } from '@superset-ui/core';
+import {
+  SupersetThemeProps,
+  withTheme,
+  seedRandom,
+  CategoricalColorScale,
+} from '@superset-ui/core';
 
 export const ROTATION = {
   flat: () => 0,
@@ -58,6 +63,7 @@ export interface WordCloudProps extends WordCloudVisualProps {
   data: PlainObject[];
   height: number;
   width: number;
+  sliceId: number;
 }
 
 export interface WordCloudState {
@@ -210,12 +216,15 @@ class WordCloud extends React.PureComponent<
 
   render() {
     const { scaleFactor } = this.state;
-    const { width, height, encoding } = this.props;
+    const { width, height, encoding, sliceId } = this.props;
     const { words } = this.state;
 
     const encoder = this.createEncoder(encoding);
     encoder.channels.color.setDomainFromDataset(words);
 
+    const { getValueFromDatum } = encoder.channels.color;
+    const colorFn = encoder.channels.color.scale as CategoricalColorScale;
+
     const viewBoxWidth = width * scaleFactor;
     const viewBoxHeight = height * scaleFactor;
 
@@ -234,7 +243,7 @@ class WordCloud extends React.PureComponent<
               fontSize={`${w.size}px`}
               fontWeight={w.weight}
               fontFamily={w.font}
-              fill={encoder.channels.color.encodeDatum(w, '')}
+              fill={colorFn(getValueFromDatum(w) as string, sliceId)}
               textAnchor="middle"
               transform={`translate(${w.x}, ${w.y}) rotate(${w.rotate})`}
             >

superset-frontend/plugins/plugin-chart-word-cloud/src/legacyPlugin/transformProps.ts

@@ -43,6 +43,7 @@ export default function transformProps(chartProps: ChartProps): WordCloudProps {
     series,
     sizeFrom = 0,
     sizeTo,
+    sliceId,
   } = formData as LegacyWordCloudFormData;
 
   const metricLabel = getMetricLabel(metric);
@@ -77,5 +78,6 @@ export default function transformProps(chartProps: ChartProps): WordCloudProps {
     height,
     rotation,
     width,
+    sliceId,
   };
 }

superset-frontend/plugins/plugin-chart-word-cloud/src/plugin/transformProps.ts

@@ -23,7 +23,7 @@ import { WordCloudFormData } from '../types';
 
 export default function transformProps(chartProps: ChartProps): WordCloudProps {
   const { width, height, formData, queriesData } = chartProps;
-  const { encoding, rotation } = formData as WordCloudFormData;
+  const { encoding, rotation, sliceId } = formData as WordCloudFormData;
 
   return {
     data: queriesData[0].data,
@@ -31,5 +31,6 @@ export default function transformProps(chartProps: ChartProps): WordCloudProps {
     height,
     rotation,
     width,
+    sliceId,
   };
 }