Cherry-picks: Allow users to choose color for BigNumber

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",

superset/assets/src/explore/visTypes.jsx

@@ -1242,6 +1242,7 @@ export const visTypes = {
           ['compare_lag', 'compare_suffix'],
           ['y_axis_format', null],
           ['show_trend_line', 'start_y_axis_at_zero'],
+          ['color_picker', null],
         ],
       },
     ],

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';
@@ -236,6 +237,11 @@ function adaptor(slice, payload) {
   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];
+  let userColor;
+  if (formData.color_picker) {
+    const { r, g, b } = formData.color_picker;
+    userColor = color.rgb(r, g, b).hex();
+  }
 
   let percentChange = 0;
   let formattedSubheader = subheader;
@@ -271,7 +277,7 @@ function adaptor(slice, payload) {
       showTrendline={showTrendline}
       startYAxisAtZero={startYAxisAtZero}
       trendlineData={trendlineData}
-      mainColor={brandColor}
+      mainColor={userColor}
       gradientId={`big_number_${containerId}`}
       renderTooltip={renderTooltipFactory(formatValue)}
     />,

superset/assets/src/visualizations/HorizonChart.css

@@ -9,9 +9,10 @@
   margin: 0px;
 }
 
-.horizon-row span {
+.horizon-row span.title {
   position: absolute;
   color: #333;
   font-size: 0.8em;
+  margin: 0;
   text-shadow: 1px 1px rgba(255, 255, 255, 0.75);
 }

superset/assets/yarn.lock

@@ -3248,7 +3248,7 @@ d3-collection@1:
   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"