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

superset-frontend/plugins/legacy-plugin-chart-world-map/src/WorldMap.js

@@ -23,6 +23,7 @@ import { extent as d3Extent } from 'd3-array';
 import {
   getNumberFormatter,
   getSequentialSchemeRegistry,
+  CategoricalColorNamespace,
 } from '@superset-ui/core';
 import Datamap from 'datamaps/dist/datamaps.world.min';
 
@@ -55,6 +56,8 @@ function WorldMap(element, props) {
     showBubbles,
     linearColorScheme,
     color,
+    colorScheme,
+    sliceId,
   } = props;
   const div = d3.select(element);
   div.classed('superset-legacy-chart-world-map', true);
@@ -69,15 +72,24 @@ function WorldMap(element, props) {
     .domain([extRadius[0], extRadius[1]])
     .range([1, maxBubbleSize]);
 
-  const colorScale = getSequentialSchemeRegistry()
+  const linearColorScale = getSequentialSchemeRegistry()
     .get(linearColorScheme)
     .createLinearScale(d3Extent(filteredData, d => d.m1));
 
-  const processedData = filteredData.map(d => ({
-    ...d,
-    radius: radiusScale(Math.sqrt(d.m2)),
-    fillColor: colorScale(d.m1),
-  }));
+  const colorScale = CategoricalColorNamespace.getScale(colorScheme);
+
+  const processedData = filteredData.map(d => {
+    let color = linearColorScale(d.m1);
+    if (colorScheme) {
+      // use color scheme instead
+      color = colorScale(d.name, sliceId);
+    }
+    return {
+      ...d,
+      radius: radiusScale(Math.sqrt(d.m2)),
+      fillColor: color,
+    };
+  });
 
   const mapData = {};
   processedData.forEach(d => {

superset-frontend/plugins/legacy-plugin-chart-world-map/src/controlPanel.ts

@@ -106,6 +106,7 @@ const config: ControlPanelConfig = {
           },
         ],
         ['color_picker'],
+        ['color_scheme'],
         ['linear_color_scheme'],
       ],
     },
@@ -126,6 +127,9 @@ const config: ControlPanelConfig = {
     color_picker: {
       label: t('Bubble Color'),
     },
+    color_scheme: {
+      label: t('Categorical Color Scheme'),
+    },
     linear_color_scheme: {
       label: t('Country Color Scheme'),
     },

superset-frontend/plugins/legacy-plugin-chart-world-map/src/transformProps.js

@@ -20,8 +20,14 @@ import { rgb } from 'd3-color';
 
 export default function transformProps(chartProps) {
   const { width, height, formData, queriesData } = chartProps;
-  const { maxBubbleSize, showBubbles, linearColorScheme, colorPicker } =
-    formData;
+  const {
+    maxBubbleSize,
+    showBubbles,
+    linearColorScheme,
+    colorPicker,
+    colorScheme,
+    sliceId,
+  } = formData;
   const { r, g, b } = colorPicker;
 
   return {
@@ -32,5 +38,7 @@ export default function transformProps(chartProps) {
     showBubbles,
     linearColorScheme,
     color: rgb(r, g, b).hex(),
+    colorScheme,
+    sliceId,
   };
 }