[SIP-5] Refactor nvd3 (#5838)

* move into folder and scaffold adaptor

* extract width and height

* remove jquery

* extract showBrush

* extract lineInterpolation

* extract xAxisFormat and yAxisFormat

* extract annotationData

* extract xTicksLayout and colorScheme

* extract showXXX

* extract x and y axis labels

* extract showminmax

* extract pie chart props

* extract area chart props

* extract logscale and yAxisBounds

* extract margin

* extract bubble props x,y,size

* extract contribution, comparisonType and color_picker

* remove the last fd.xxx

* remove unnecessary variables

* remove slice.container

* fix unit test reference

* Rewrite logic to compute max label lengths to use only d3, not jquery.

* extract annotationLayers and no more slice.xxx in nvd3vis

* rename x, y, size to xField, yField, sizeField

* use arrow function

* move tooltip function

* extract helper functions into utils

* remove unused argument

* fix height calculation and show bar labels

* rename function

* update unit test

* organize tooltip generator

* update line_multi

* Add proptypes for data

* list proptypes for data

* extract tooltip function for bubble chart

* rename variables

* remove console.log

* enumerate vizTypes and pieLabelType

* parse maxBubble

* use new color scale

* fix import"

* remove line

superset/assets/spec/javascripts/modules/utils_spec.jsx

@@ -1,6 +1,5 @@
 import { expect, assert } from 'chai';
 import {
-  tryNumify,
   slugify,
   formatSelectOptionsForRange,
   d3format,
@@ -11,12 +10,6 @@ import {
 } from '../../../src/modules/utils';
 
 describe('utils', () => {
-  it('tryNumify works as expected', () => {
-    expect(tryNumify(5)).to.equal(5);
-    expect(tryNumify('5')).to.equal(5);
-    expect(tryNumify('5.1')).to.equal(5.1);
-    expect(tryNumify('a string')).to.equal('a string');
-  });
   it('slugify slugifies', () => {
     expect(slugify('My Neat Label! ')).to.equal('my-neat-label');
     expect(slugify('Some Letters AnD a 5')).to.equal('some-letters-and-a-5');

superset/assets/spec/javascripts/visualizations/nvd3_viz_spec.jsx → superset/assets/spec/javascripts/visualizations/nvd3/utils_spec.js

@@ -1,13 +1,13 @@
 import { expect } from 'chai';
 
-import { formatLabel } from '../../../src/visualizations/nvd3_vis';
+import { formatLabel, tryNumify } from '../../../../src/visualizations/nvd3/utils';
 
-describe('nvd3 viz', () => {
+describe('nvd3/utils', () => {
   const verboseMap = {
     foo: 'Foo',
     bar: 'Bar',
   };
-  describe('formatLabel', () => {
+  describe('formatLabel()', () => {
     it('formats simple labels', () => {
       expect(formatLabel('foo')).to.equal('foo');
       expect(formatLabel(['foo'])).to.equal('foo');
@@ -24,4 +24,12 @@ describe('nvd3 viz', () => {
       expect(formatLabel(['foo', 'bar', 'baz', '2 hours offset'], verboseMap)).to.equal('Foo, Bar, baz, 2 hours offset');
     });
   });
+  describe('tryNumify()', () => {
+    it('tryNumify works as expected', () => {
+      expect(tryNumify(5)).to.equal(5);
+      expect(tryNumify('5')).to.equal(5);
+      expect(tryNumify('5.1')).to.equal(5.1);
+      expect(tryNumify('a string')).to.equal('a string');
+    });
+  });
 });

superset/assets/src/modules/utils.js

@@ -206,31 +206,6 @@ export function getDatasourceParameter(datasourceId, datasourceType) {
   return `${datasourceId}__${datasourceType}`;
 }
 
-export function customizeToolTip(chart, xAxisFormatter, yAxisFormatters) {
-  chart.useInteractiveGuideline(true);
-  chart.interactiveLayer.tooltip.contentGenerator(function (d) {
-    const tooltipTitle = xAxisFormatter(d.value);
-    let tooltip = '';
-
-    tooltip += "<table><thead><tr><td colspan='3'>"
-      + `<strong class='x-value'>${tooltipTitle}</strong>`
-      + '</td></tr></thead><tbody>';
-
-    d.series.forEach((series, i) => {
-      const yAxisFormatter = yAxisFormatters[i];
-      const value = yAxisFormatter(series.value);
-      tooltip += "<tr><td class='legend-color-guide'>"
-        + `<div style="background-color: ${series.color};"></div></td>`
-        + `<td class='key'>${series.key}</td>`
-        + `<td class='value'>${value}</td></tr>`;
-    });
-
-    tooltip += '</tbody></table>';
-
-    return tooltip;
-  });
-}
-
 export function initJQueryAjax() {
   // Works in conjunction with a Flask-WTF token as described here:
   // http://flask-wtf.readthedocs.io/en/stable/csrf.html#javascript-requests
@@ -246,15 +221,6 @@ export function initJQueryAjax() {
   }
 }
 
-export function tryNumify(s) {
-  // Attempts casting to Number, returns string when failing
-  const n = Number(s);
-  if (isNaN(n)) {
-    return s;
-  }
-  return n;
-}
-
 export function getParam(name) {
   /* eslint no-useless-escape: 0 */
   const formattedName = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');

superset/assets/src/visualizations/index.js

@@ -59,7 +59,7 @@ const loadVis = promise =>
     // deckgl visualizations don't use esModules, fix it?
     return defaultExport.default || defaultExport;
   });
-const loadNvd3 = () => loadVis(import(/* webpackChunkName: "nvd3_vis" */ './nvd3_vis.js'));
+const loadNvd3 = () => loadVis(import(/* webpackChunkName: "nvd3_vis" */ './nvd3/NVD3Vis.js'));
 
 const vizMap = {
   [VIZ_TYPES.area]: loadNvd3,
@@ -87,7 +87,7 @@ const vizMap = {
   [VIZ_TYPES.iframe]: () => loadVis(import(/* webpackChunkName: "iframe" */ './iframe.js')),
   [VIZ_TYPES.line]: loadNvd3,
   [VIZ_TYPES.line_multi]: () =>
-    loadVis(import(/* webpackChunkName: "line_multi" */ './line_multi.js')),
+    loadVis(import(/* webpackChunkName: "line_multi" */ './nvd3/LineMulti.js')),
   [VIZ_TYPES.time_pivot]: loadNvd3,
   [VIZ_TYPES.mapbox]: () => loadVis(import(/* webpackChunkName: "mapbox" */ './MapBox/MapBox.jsx')),
   [VIZ_TYPES.markup]: () => loadVis(import(/* webpackChunkName: "markup" */ './markup.js')),

superset/assets/src/visualizations/line_multi.js → superset/assets/src/visualizations/nvd3/LineMulti.js

@@ -1,7 +1,6 @@
 import d3 from 'd3';
-
-import nvd3Vis from './nvd3_vis';
-import { getExploreLongUrl } from '../explore/exploreUtils';
+import nvd3Vis from './NVD3Vis';
+import { getExploreLongUrl } from '../../explore/exploreUtils';
 
 export default function lineMulti(slice, payload) {
   /*