Allow for multiple color schemes (#3295)

* Allow for multiple color schemes

1. create ColorSchemeControl component
2. using the same new control component for linear colors

* add color spectum for linear color scheme

* remove dup css

* fix controls setting for linear color scheme

* minor fix by code review comment

superset/assets/javascripts/explore/components/Control.jsx

@@ -10,6 +10,7 @@ import SelectControl from './controls/SelectControl';
 import TextAreaControl from './controls/TextAreaControl';
 import TextControl from './controls/TextControl';
 import VizTypeControl from './controls/VizTypeControl';
+import ColorSchemeControl from './controls/ColorSchemeControl';
 
 const controlMap = {
   BoundsControl,
@@ -21,6 +22,7 @@ const controlMap = {
   TextAreaControl,
   TextControl,
   VizTypeControl,
+  ColorSchemeControl,
 };
 const controlTypes = Object.keys(controlMap);
 

superset/assets/javascripts/explore/components/controls/ColorSchemeControl.jsx

@@ -0,0 +1,87 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Creatable } from 'react-select';
+import ControlHeader from '../ControlHeader';
+
+import { colorScalerFactory } from '../../../modules/colors';
+
+const propTypes = {
+  description: PropTypes.string,
+  label: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  onChange: PropTypes.func,
+  value: PropTypes.string,
+  default: PropTypes.string,
+  choices: PropTypes.arrayOf(React.PropTypes.array).isRequired,
+  schemes: PropTypes.object.isRequired,
+  isLinear: PropTypes.bool,
+};
+
+const defaultProps = {
+  choices: [],
+  schemes: {},
+  onChange: () => {},
+};
+
+export default class ColorSchemeControl extends React.PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {
+      scheme: this.props.value,
+    };
+
+    this.onChange = this.onChange.bind(this);
+    this.renderOption = this.renderOption.bind(this);
+  }
+
+  onChange(option) {
+    const optionValue = option ? option.value : null;
+    this.props.onChange(optionValue);
+    this.setState({ scheme: optionValue });
+  }
+
+  renderOption(key) {
+    const currentScheme = key.value ?
+      this.props.schemes[key.value] :
+      this.props.schemes[defaultProps.value];
+
+    let colors = currentScheme;
+    if (this.props.isLinear) {
+      const colorScaler = colorScalerFactory(currentScheme);
+      colors = [...Array(20).keys()].map(d => (colorScaler(d / 20)));
+    }
+
+    const list = colors.map((color, i) => (
+      <li
+        key={`${currentScheme}-${i}`}
+        style={{ backgroundColor: color, border: `1px solid ${color === 'white' ? 'black' : color}` }}
+      >&nbsp;</li>
+    ));
+    return (<ul className="color-scheme-container">{list}</ul>);
+  }
+
+  render() {
+    const selectProps = {
+      multi: false,
+      name: `select-${this.props.name}`,
+      placeholder: `Select (${this.props.choices.length})`,
+      default: this.props.default,
+      options: this.props.choices.map(choice => ({ value: choice[0], label: choice[1] })),
+      value: this.props.value,
+      autosize: false,
+      clearable: false,
+      onChange: this.onChange,
+      optionRenderer: this.renderOption,
+      valueRenderer: this.renderOption,
+    };
+    return (
+      <div>
+        <ControlHeader {...this.props} />
+        <Creatable {...selectProps} />
+      </div>
+    );
+  }
+}
+
+ColorSchemeControl.propTypes = propTypes;
+ColorSchemeControl.defaultProps = defaultProps;

superset/assets/javascripts/explore/main.css

@@ -60,3 +60,16 @@
   cursor: not-allowed;
   border: 1px solid #aaa;
 }
+
+.color-scheme-container {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  align-items: center;
+}
+.color-scheme-container li {
+  flex-basis: 9px;
+  height: 10px;
+  margin: 9px 1px;
+}

superset/assets/javascripts/explore/stores/controls.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { formatSelectOptionsForRange, formatSelectOptions } from '../../modules/utils';
 import * as v from '../validators';
+import { ALL_COLOR_SCHEMES, spectrums } from '../../modules/colors';
 import MetricOption from '../../components/MetricOption';
 import ColumnOption from '../../components/ColumnOption';
 
@@ -155,7 +156,7 @@ export const controls = {
   },
 
   linear_color_scheme: {
-    type: 'SelectControl',
+    type: 'ColorSchemeControl',
     label: 'Linear Color Scheme',
     choices: [
       ['fire', 'fire'],
@@ -165,6 +166,9 @@ export const controls = {
     ],
     default: 'blue_white_yellow',
     description: '',
+    renderTrigger: true,
+    schemes: spectrums,
+    isLinear: true,
   },
 
   normalize_across: {
@@ -1307,5 +1311,15 @@ export const controls = {
     description: 'Leaf nodes that represent fewer than this number of events will be initially ' +
     'hidden in the visualization',
   },
+
+  color_scheme: {
+    type: 'ColorSchemeControl',
+    label: 'Color Scheme',
+    default: 'bnbColors',
+    renderTrigger: true,
+    choices: Object.keys(ALL_COLOR_SCHEMES).map(s => ([s, s])),
+    description: 'The color scheme for rendering chart',
+    schemes: ALL_COLOR_SCHEMES,
+  },
 };
 export default controls;

superset/assets/javascripts/explore/stores/visTypes.js

@@ -18,6 +18,12 @@ export const sections = {
       ['slice_id', 'cache_timeout'],
     ],
   },
+  colorScheme: {
+    label: 'Color Scheme',
+    controlSetRows: [
+      ['color_scheme'],
+    ],
+  },
   sqlaTimeSeries: {
     label: 'Time',
     description: 'Time related form attributes',
@@ -83,6 +89,7 @@ export const visTypes = {
       {
         label: 'Chart Options',
         controlSetRows: [
+          ['color_scheme'],
           ['metrics'],
           ['groupby'],
           ['columns'],
@@ -119,6 +126,7 @@ export const visTypes = {
           ['pie_label_type'],
           ['donut', 'show_legend'],
           ['labels_outside'],
+          ['color_scheme'],
         ],
       },
     ],
@@ -133,6 +141,7 @@ export const visTypes = {
       {
         label: 'Chart Options',
         controlSetRows: [
+          ['color_scheme'],
           ['show_brush', 'show_legend'],
           ['rich_tooltip', null],
           ['show_markers', 'x_axis_showminmax'],
@@ -164,6 +173,7 @@ export const visTypes = {
       {
         label: 'Chart Options',
         controlSetRows: [
+          ['color_scheme'],
           ['x_axis_format'],
         ],
       },
@@ -204,6 +214,7 @@ export const visTypes = {
       {
         label: 'Chart Options',
         controlSetRows: [
+          ['color_scheme'],
           ['show_brush', 'show_legend', 'show_bar_value'],
           ['rich_tooltip', 'contribution'],
           ['line_interpolation', 'bar_stacked'],
@@ -237,6 +248,7 @@ export const visTypes = {
       {
         label: 'Chart Options',
         controlSetRows: [
+          ['color_scheme'],
           ['x_axis_format', 'y_axis_format'],
         ],
       },
@@ -260,6 +272,7 @@ export const visTypes = {
         controlSetRows: [
           ['show_brush', 'show_legend'],
           ['line_interpolation', 'stacked_style'],
+          ['color_scheme'],
           ['rich_tooltip', 'contribution'],
           ['show_controls', null],
         ],
@@ -383,6 +396,7 @@ export const visTypes = {
           ['series', 'metric', 'limit'],
           ['size_from', 'size_to'],
           ['rotation'],
+          ['color_scheme'],
         ],
       },
     ],
@@ -401,6 +415,7 @@ export const visTypes = {
       {
         label: 'Chart Options',
         controlSetRows: [
+          ['color_scheme'],
           ['treemap_ratio'],
           ['number_format'],
         ],
@@ -436,6 +451,7 @@ export const visTypes = {
       {
         label: 'Chart Options',
         controlSetRows: [
+          ['color_scheme'],
           ['whisker_options'],
         ],
       },
@@ -455,6 +471,7 @@ export const visTypes = {
       {
         label: 'Chart Options',
         controlSetRows: [
+          ['color_scheme'],
           ['show_legend', null],
         ],
       },
@@ -553,6 +570,7 @@ export const visTypes = {
       {
         label: 'Histogram Options',
         controlSetRows: [
+          ['color_scheme'],
           ['link_length'],
         ],
       },
@@ -579,6 +597,7 @@ export const visTypes = {
           ['groupby'],
           ['metric', 'secondary_metric'],
           ['row_limit'],
+          ['color_scheme'],
         ],
       },
     ],
@@ -609,6 +628,7 @@ export const visTypes = {
           ['groupby'],
           ['metric'],
           ['row_limit'],
+          ['color_scheme'],
         ],
       },
     ],
@@ -655,6 +675,7 @@ export const visTypes = {
           ['groupby', 'columns'],
           ['metric'],
           ['row_limit', 'y_axis_format'],
+          ['color_scheme'],
         ],
       },
     ],