From b92e73084b474807af162faa035a296e9c6ce137 Mon Sep 17 00:00:00 2001
From: "Hugh A. Miles II" <hughmil3s@gmail.com>
Date: Wed, 22 Aug 2018 10:27:19 -0700
Subject: [PATCH] Allow users to select color for big number (#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
---
 superset/assets/package.json                     | 1 +
 superset/assets/src/explore/visTypes.jsx         | 1 +
 superset/assets/src/visualizations/BigNumber.jsx | 5 ++++-
 superset/assets/yarn.lock                        | 2 +-
 4 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/superset/assets/package.json b/superset/assets/package.json
index 836515ad51110..743ea1f871635 100644
--- 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
index ac4285c364eb7..8e719817f214f 100644
--- 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
index 9976579adb144..f5c701d0acdae 100644
--- 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
index 784ec3cc1821c..2f941b9301509 100644
--- 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"