fix: propagate color mapping from dashboard to charts

superset/assets/backendSync.json

@@ -3278,6 +3278,11 @@
       "renderTrigger": true,
       "description": "The color scheme for rendering chart"
     },
+    "label_colors": {
+      "type": "ColorMapControl",
+      "label": "Color Map",
+      "default": {}
+    },
     "significance_level": {
       "type": "TextControl",
       "label": "Significance Level",

superset/assets/src/dashboard/components/Dashboard.jsx

@@ -153,6 +153,8 @@ class Dashboard extends React.PureComponent {
           chart,
           dashboardMetadata: this.props.dashboardInfo.metadata,
           filters: this.props.dashboardState.filters,
+          colorScheme: this.props.dashboardState.colorScheme,
+          colorNamespace: this.props.dashboardState.colorNamespace,
           sliceId: chart.id,
         });
 

superset/assets/src/dashboard/containers/Chart.jsx

@@ -43,7 +43,7 @@ function mapStateToProps(
 ) {
   const { id } = ownProps;
   const chart = chartQueries[id] || {};
-  const { filters, colorScheme } = dashboardState;
+  const { filters, colorScheme, colorNamespace } = dashboardState;
 
   return {
     chart,
@@ -59,6 +59,7 @@ function mapStateToProps(
       dashboardMetadata: dashboardInfo.metadata,
       filters,
       colorScheme,
+      colorNamespace,
       sliceId: id,
     }),
     editMode: dashboardState.editMode,

superset/assets/src/dashboard/util/charts/getFormDataWithExtraFilters.js

@@ -16,6 +16,8 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+import { isEqual } from 'lodash';
+import { CategoricalColorNamespace } from '@superset-ui/color';
 import getEffectiveExtraFilters from './getEffectiveExtraFilters';
 
 // We cache formData objects so that our connected container components don't always trigger
@@ -29,14 +31,21 @@ export default function getFormDataWithExtraFilters({
   dashboardMetadata,
   filters,
   colorScheme,
+  colorNamespace,
   sliceId,
 }) {
+  // Propagate color mapping to chart
+  const scale = CategoricalColorNamespace.getScale(colorScheme, colorNamespace);
+  const labelColors = scale.getColorMap();
+
   // if dashboard metadata + filters have not changed, use cache if possible
   if (
     (cachedDashboardMetadataByChart[sliceId] || {}) === dashboardMetadata &&
     (cachedFiltersByChart[sliceId] || {}) === filters &&
     (colorScheme == null ||
       cachedFormdataByChart[sliceId].color_scheme === colorScheme) &&
+    cachedFormdataByChart[sliceId].color_namespace === colorNamespace &&
+    isEqual(cachedFormdataByChart[sliceId].label_colors, labelColors) &&
     !!cachedFormdataByChart[sliceId]
   ) {
     return cachedFormdataByChart[sliceId];
@@ -45,6 +54,7 @@ export default function getFormDataWithExtraFilters({
   const formData = {
     ...chart.formData,
     ...(colorScheme && { color_scheme: colorScheme }),
+    label_colors: labelColors,
     extra_filters: getEffectiveExtraFilters({
       dashboardMetadata,
       filters,

superset/assets/src/explore/components/controls/ColorMapControl.jsx

@@ -0,0 +1,54 @@
+/**
+ * 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 PropTypes from 'prop-types';
+import React from 'react';
+import { CategoricalColorNamespace } from '@superset-ui/color';
+
+const propTypes = {
+  onChange: PropTypes.func,
+  value: PropTypes.object,
+  colorScheme: PropTypes.string,
+  colorNamespace: PropTypes.string,
+};
+
+const defaultProps = {
+  onChange: () => {},
+  value: {},
+  colorScheme: undefined,
+  colorNamespace: undefined,
+};
+
+export default class ColorMapControl extends React.PureComponent {
+  constructor(props) {
+    super(props);
+    Object.keys(this.props.value).forEach((label) => {
+      CategoricalColorNamespace.getScale(
+        this.props.colorScheme,
+        this.props.colorNamespace,
+      ).setColor(label, this.props.value[label]);
+    });
+  }
+
+  render() {
+    return null;
+  }
+}
+
+ColorMapControl.propTypes = propTypes;
+ColorMapControl.defaultProps = defaultProps;

superset/assets/src/explore/components/controls/index.js

@@ -20,6 +20,7 @@ import AnnotationLayerControl from './AnnotationLayerControl';
 import BoundsControl from './BoundsControl';
 import CheckboxControl from './CheckboxControl';
 import CollectionControl from './CollectionControl';
+import ColorMapControl from './ColorMapControl';
 import ColorPickerControl from './ColorPickerControl';
 import ColorSchemeControl from './ColorSchemeControl';
 import DatasourceControl from './DatasourceControl';
@@ -45,6 +46,7 @@ const controlMap = {
   BoundsControl,
   CheckboxControl,
   CollectionControl,
+  ColorMapControl,
   ColorPickerControl,
   ColorSchemeControl,
   DatasourceControl,

superset/assets/src/explore/controlPanels/Area.js

@@ -30,7 +30,7 @@ export default {
       controlSetRows: [
         ['show_brush', 'show_legend'],
         ['line_interpolation', 'stacked_style'],
-        ['color_scheme'],
+        ['color_scheme', 'label_colors'],
         ['rich_tooltip', 'show_controls'],
       ],
     },

superset/assets/src/explore/controlPanels/Bar.js

@@ -28,7 +28,7 @@ export default {
       label: t('Chart Options'),
       expanded: true,
       controlSetRows: [
-        ['color_scheme'],
+        ['color_scheme', 'label_colors'],
         ['show_brush', 'show_legend', 'show_bar_value'],
         ['rich_tooltip', 'bar_stacked'],
         ['line_interpolation', 'show_controls'],

superset/assets/src/explore/controlPanels/BoxPlot.js

@@ -34,7 +34,7 @@ export default {
       label: t('Chart Options'),
       expanded: true,
       controlSetRows: [
-        ['color_scheme'],
+        ['color_scheme', 'label_colors'],
         ['whisker_options', 'x_ticks_layout'],
       ],
     },

superset/assets/src/explore/controlPanels/Bubble.js

@@ -38,7 +38,7 @@ export default {
       label: t('Chart Options'),
       expanded: true,
       controlSetRows: [
-        ['color_scheme'],
+        ['color_scheme', 'label_colors'],
         ['show_legend', null],
       ],
     },

superset/assets/src/explore/controlPanels/Chord.js

@@ -37,7 +37,7 @@ export default {
       expanded: true,
       controlSetRows: [
         ['y_axis_format', null],
-        ['color_scheme'],
+        ['color_scheme', 'label_colors'],
       ],
     },
   ],

superset/assets/src/explore/controlPanels/Compare.js

@@ -28,7 +28,7 @@ export default {
       label: t('Chart Options'),
       expanded: true,
       controlSetRows: [
-        ['color_scheme'],
+        ['color_scheme', 'label_colors'],
       ],
     },
     {

superset/assets/src/explore/controlPanels/DeckArc.js

@@ -42,7 +42,7 @@ export default {
       label: t('Arc'),
       controlSetRows: [
         ['color_picker', 'target_color_picker'],
-        ['dimension', 'color_scheme'],
+        ['dimension', 'color_scheme', 'label_colors'],
         ['stroke_width', 'legend_position'],
       ],
     },

superset/assets/src/explore/controlPanels/DeckScatter.js

@@ -62,7 +62,7 @@ export default {
       label: t('Point Color'),
       controlSetRows: [
         ['color_picker', 'legend_position'],
-        ['dimension', 'color_scheme'],
+        ['dimension', 'color_scheme', 'label_colors'],
       ],
     },
     {

superset/assets/src/explore/controlPanels/DistBar.js

@@ -36,7 +36,7 @@ export default {
       label: t('Chart Options'),
       expanded: true,
       controlSetRows: [
-        ['color_scheme'],
+        ['color_scheme', 'label_colors'],
         ['show_legend', 'show_bar_value'],
         ['bar_stacked', 'order_bars'],
         ['y_axis_format', 'y_axis_label'],

superset/assets/src/explore/controlPanels/DualLine.js

@@ -27,7 +27,7 @@ export default {
       label: t('Chart Options'),
       expanded: true,
       controlSetRows: [
-        ['color_scheme'],
+        ['color_scheme', 'label_colors'],
         ['x_axis_format'],
       ],
     },

superset/assets/src/explore/controlPanels/Histogram.js

@@ -35,7 +35,7 @@ export default {
       label: t('Chart Options'),
       expanded: true,
       controlSetRows: [
-        ['color_scheme'],
+        ['color_scheme', 'label_colors'],
         ['link_length'],
         ['x_axis_label', 'y_axis_label'],
         ['global_opacity'],

superset/assets/src/explore/controlPanels/Line.js

@@ -28,7 +28,7 @@ export default {
       label: t('Chart Options'),
       expanded: true,
       controlSetRows: [
-        ['color_scheme'],
+        ['color_scheme', 'label_colors'],
         ['show_brush', 'send_time_range', 'show_legend'],
         ['rich_tooltip', 'show_markers'],
         ['line_interpolation'],

superset/assets/src/explore/controlPanels/LineMulti.js

@@ -27,7 +27,7 @@ export default {
       label: t('Chart Options'),
       expanded: true,
       controlSetRows: [
-        ['color_scheme'],
+        ['color_scheme', 'label_colors'],
         ['prefix_metric_with_slice_name', null],
         ['show_legend', 'show_markers'],
         ['line_interpolation', null],

superset/assets/src/explore/controlPanels/Partition.js

@@ -33,7 +33,7 @@ export default {
       label: t('Chart Options'),
       expanded: true,
       controlSetRows: [
-        ['color_scheme'],
+        ['color_scheme', 'label_colors'],
         ['number_format', 'date_time_format'],
         ['partition_limit', 'partition_threshold'],
         ['log_scale', 'equal_date_size'],

superset/assets/src/explore/controlPanels/Pie.js

@@ -37,7 +37,7 @@ export default {
         ['pie_label_type', 'number_format'],
         ['donut', 'show_legend'],
         ['show_labels', 'labels_outside'],
-        ['color_scheme'],
+        ['color_scheme', 'label_colors'],
       ],
     },
   ],

superset/assets/src/explore/controlPanels/Rose.js

@@ -27,7 +27,7 @@ export default {
       label: t('Chart Options'),
       expanded: true,
       controlSetRows: [
-        ['color_scheme'],
+        ['color_scheme', 'label_colors'],
         ['number_format', 'date_time_format'],
         ['rich_tooltip', 'rose_area_proportion'],
       ],

superset/assets/src/explore/controlPanels/Sankey.js

@@ -34,7 +34,7 @@ export default {
       label: t('Chart Options'),
       expanded: true,
       controlSetRows: [
-        ['color_scheme'],
+        ['color_scheme', 'label_colors'],
       ],
     },
   ],

superset/assets/src/explore/controlPanels/Sunburst.js

@@ -35,7 +35,7 @@ export default {
       label: t('Chart Options'),
       expanded: true,
       controlSetRows: [
-        ['color_scheme'],
+        ['color_scheme', 'label_colors'],
       ],
     },
   ],

superset/assets/src/explore/controlPanels/Treemap.js

@@ -34,7 +34,7 @@ export default {
       label: t('Chart Options'),
       expanded: true,
       controlSetRows: [
-        ['color_scheme'],
+        ['color_scheme', 'label_colors'],
         ['treemap_ratio'],
         ['number_format'],
       ],

superset/assets/src/explore/controlPanels/WordCloud.js

@@ -35,7 +35,7 @@ export default {
       controlSetRows: [
         ['size_from', 'size_to'],
         ['rotation'],
-        ['color_scheme'],
+        ['color_scheme', 'label_colors'],
       ],
     },
   ],

superset/assets/src/explore/controlPanels/sections.jsx

@@ -42,7 +42,7 @@ export const datasourceAndVizType = {
 export const colorScheme = {
   label: t('Color Scheme'),
   controlSetRows: [
-    ['color_scheme'],
+    ['color_scheme', 'label_colors'],
   ],
 };
 

superset/assets/src/explore/controls.jsx

@@ -2090,6 +2090,16 @@ export const controls = {
     schemes: () => categoricalSchemeRegistry.getMap(),
   },
 
+  label_colors: {
+    type: 'ColorMapControl',
+    label: t('Color Map'),
+    default: {},
+    mapStateToProps: state => ({
+      colorNamespace: state.form_data.color_namespace,
+      colorScheme: state.form_data.color_scheme,
+    }),
+  },
+
   significance_level: {
     type: 'TextControl',
     label: t('Significance Level'),