feat: improve world map colors (apache#711)

* feat: improve world map colors

* sqrt

* addressing comment

* ad d3-color

Author: mistercrunch

superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-world-map/package.json

@@ -29,12 +29,15 @@
   },
   "dependencies": {
     "d3": "^3.5.17",
+    "d3-array": "^2.4.0",
+    "d3-color": "^1.4.1",
     "datamaps": "^0.5.8",
     "prop-types": "^15.6.2"
   },
   "peerDependencies": {
     "@superset-ui/chart": "^0.14.0",
     "@superset-ui/chart-controls": "^0.14.0",
+    "@superset-ui/color": "^0.14.9",
     "@superset-ui/number-format": "^0.14.0",
     "@superset-ui/style": "^0.14.3",
     "@superset-ui/translation": "^0.14.0",

superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-world-map/src/WorldMap.js

@@ -19,6 +19,8 @@
 /* eslint-disable react/sort-prop-types */
 import d3 from 'd3';
 import PropTypes from 'prop-types';
+import { extent as d3Extent } from 'd3-array';
+import { getSequentialSchemeRegistry } from '@superset-ui/color';
 import Datamap from 'datamaps/dist/datamaps.world.min';
 import { getNumberFormatter } from '@superset-ui/number-format';
 
@@ -36,33 +38,34 @@ const propTypes = {
   height: PropTypes.number,
   maxBubbleSize: PropTypes.number,
   showBubbles: PropTypes.bool,
+  linearColorScheme: PropTypes.string,
+  color: PropTypes.string,
 };
 
 const formatter = getNumberFormatter();
 
 function WorldMap(element, props) {
-  const { data, width, height, maxBubbleSize, showBubbles } = props;
-
+  const { data, width, height, maxBubbleSize, showBubbles, linearColorScheme, color } = props;
   const div = d3.select(element);
   div.classed('superset-legacy-chart-world-map', true);
   div.selectAll('*').remove();
 
   // Ignore XXX's to get better normalization
   const filteredData = data.filter(d => d.country && d.country !== 'XXX');
 
-  const ext = d3.extent(filteredData, d => d.m1);
-  const extRadius = d3.extent(filteredData, d => d.m2);
+  const extRadius = d3.extent(filteredData, d => Math.sqrt(d.m2));
   const radiusScale = d3.scale
     .linear()
     .domain([extRadius[0], extRadius[1]])
     .range([1, maxBubbleSize]);
 
-  // color gradient based on http://colorbrewer2.org/#type=sequential&scheme=Greens&n=9
-  const colorScale = d3.scale.linear().domain([ext[0], ext[1]]).range(['#c7e9c0', '#00441b']);
+  const colorScale = getSequentialSchemeRegistry()
+    .get(linearColorScheme)
+    .createLinearScale(d3Extent(filteredData, d => d.m1));
 
   const processedData = filteredData.map(d => ({
     ...d,
-    radius: radiusScale(d.m2),
+    radius: radiusScale(Math.sqrt(d.m2)),
     fillColor: colorScale(d.m1),
   }));
 
@@ -85,23 +88,23 @@ function WorldMap(element, props) {
       borderWidth: 1,
       borderColor: '#feffff',
       highlightBorderColor: '#feffff',
-      highlightFillColor: '#00749A',
+      highlightFillColor: color,
       highlightBorderWidth: 1,
       popupTemplate: (geo, d) =>
         `<div class="hoverinfo"><strong>${d.name}</strong><br>${formatter(d.m1)}</div>`,
     },
     bubblesConfig: {
       borderWidth: 1,
       borderOpacity: 1,
-      borderColor: '#00749A',
+      borderColor: color,
       popupOnHover: true,
       radius: null,
       popupTemplate: (geo, d) =>
         `<div class="hoverinfo"><strong>${d.name}</strong><br>${formatter(d.m2)}</div>`,
       fillOpacity: 0.5,
       animate: true,
       highlightOnHover: true,
-      highlightFillColor: '#00749A',
+      highlightFillColor: color,
       highlightBorderColor: 'black',
       highlightBorderWidth: 2,
       highlightBorderOpacity: 1,
@@ -115,7 +118,7 @@ function WorldMap(element, props) {
 
   if (showBubbles) {
     map.bubbles(processedData);
-    div.selectAll('circle.datamaps-bubble').style('fill', '#00749A');
+    div.selectAll('circle.datamaps-bubble').style('fill', color).style('stroke', color);
   }
 }
 

superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-world-map/src/controlPanel.js

@@ -52,7 +52,8 @@ export default {
       ],
     },
     {
-      label: t('Bubbles'),
+      label: t('Options'),
+      expanded: true,
       controlSetRows: [
         [
           {
@@ -79,21 +80,29 @@ export default {
             },
           },
         ],
+        ['color_picker'],
+        ['linear_color_scheme'],
       ],
     },
   ],
   controlOverrides: {
     entity: {
-      label: t('Country Control'),
+      label: t('Country Column'),
       description: t('3 letter code of the country'),
     },
     metric: {
-      label: t('Metric for color'),
+      label: t('Metric for Color'),
       description: t('Metric that defines the color of the country'),
     },
     secondary_metric: {
-      label: t('Bubble size'),
+      label: t('Bubble Size'),
       description: t('Metric that defines the size of the bubble'),
     },
+    color_picker: {
+      label: t('Bubble Color'),
+    },
+    linear_color_scheme: {
+      label: t('Country Color Scheme'),
+    },
   },
 };

superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-world-map/src/transformProps.js

@@ -16,15 +16,20 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+import { rgb } from 'd3-color';
+
 export default function transformProps(chartProps) {
   const { width, height, formData, queryData } = chartProps;
-  const { maxBubbleSize, showBubbles } = formData;
+  const { maxBubbleSize, showBubbles, linearColorScheme, colorPicker } = formData;
+  const { r, g, b } = colorPicker;
 
   return {
     data: queryData.data,
     width,
     height,
     maxBubbleSize: parseInt(maxBubbleSize, 10),
     showBubbles,
+    linearColorScheme,
+    color: rgb(r, g, b).hex(),
   };
 }