Allow users to select color for big number (apache#5694)

* allow user to choose color * add color control * remove rgbToHex reference * change to color picker control * add d3-color * remove module * use d3-colors * add semicolon
kristw · Aug 22, 2018 · b92e730 · b92e730
1 parent 0e057d5
commit b92e730
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 2 deletions.
diff --git a/superset/assets/package.json b/superset/assets/package.json
@@ -54,6 +54,7 @@
     "classnames": "^2.2.5",
     "d3": "^3.5.17",
     "d3-cloud": "^1.2.1",
+    "d3-color": "^1.2.0",
     "d3-hierarchy": "^1.1.5",
     "d3-sankey": "^0.4.2",
     "d3-svg-legend": "^1.x",

diff --git a/superset/assets/src/explore/visTypes.jsx b/superset/assets/src/explore/visTypes.jsx
@@ -1255,6 +1255,7 @@ export const visTypes = {
           ['compare_lag', 'compare_suffix'],
           ['y_axis_format', null],
           ['show_trend_line', 'start_y_axis_at_zero'],
+          ['color_picker', null],
         ],
       },
     ],

diff --git a/superset/assets/src/visualizations/BigNumber.jsx b/superset/assets/src/visualizations/BigNumber.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
+import * as color from 'd3-color';
 import { XYChart, AreaSeries, CrossHair, LinearGradient } from '@data-ui/xy-chart';
 
 import { brandColor } from '../modules/colors';
@@ -230,12 +231,14 @@ BigNumberVis.defaultProps = defaultProps;
 function adaptor(slice, payload) {
   const { formData, containerId } = slice;
   const { data, subheader, compare_suffix: compareSuffix } = payload.data;
+  const { r, g, b } = formData.color_picker;
   const compareLag = Number(payload.data.compare_lag);
   const supportTrendline = formData.viz_type === 'big_number';
   const showTrendline = supportTrendline && formData.show_trend_line;
   const startYAxisAtZero = formData.start_y_axis_at_zero;
   const formatValue = d3FormatPreset(formData.y_axis_format);
   const bigNumber = supportTrendline ? data[data.length - 1][1] : data[0][0];
+  const userColor = color.rgb(r, g, b).hex();
 
   let percentChange = 0;
   let formattedSubheader = subheader;
@@ -271,7 +274,7 @@ function adaptor(slice, payload) {
       showTrendline={showTrendline}
       startYAxisAtZero={startYAxisAtZero}
       trendlineData={trendlineData}
-      mainColor={brandColor}
+      mainColor={userColor}
       gradientId={`big_number_${containerId}`}
       renderTooltip={renderTooltipFactory(formatValue)}
     />,

diff --git a/superset/assets/yarn.lock b/superset/assets/yarn.lock
@@ -3164,7 +3164,7 @@ d3-collection@1, d3-collection@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/d3-collection/-/d3-collection-1.0.4.tgz#342dfd12837c90974f33f1cc0a785aea570dcdc2"
 
-d3-color@1:
+d3-color@1, d3-color@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/d3-color/-/d3-color-1.2.0.tgz#d1ea19db5859c86854586276ec892cf93148459a"