[SIP-6] Migrate visualizations to new directory structure (part 3 - n…

…vd3) (#6006)

* migrate nvd3

* update basicchartinput

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/NVD3Vis.js'));
+const loadNvd3 = () => loadVis(import(/* webpackChunkName: "nvd3_vis" */ './nvd3/adaptor.jsx'));
 
 const vizMap = {
   [VIZ_TYPES.area]: loadNvd3,

superset/assets/src/visualizations/models/BasicChartInput.js

@@ -10,6 +10,9 @@ export default class BasicChartInput {
     this.onAddFilter = (...args) => {
       slice.addFilter(...args);
     };
+    this.onError = (...args) => {
+      slice.error(...args);
+    };
     this.payload = payload;
     this.setControlValue = setControlValue;
   }

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

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

superset/assets/src/visualizations/nvd3/NVD3Vis.js

@@ -15,7 +15,6 @@ import { isTruthy } from '../../utils/common';
 import {
   computeBarChartWidth,
   drawBarValues,
-  formatLabel,
   generateBubbleTooltipContent,
   generateMultiLineTooltipContent,
   generateRichLineTooltipContent,
@@ -176,8 +175,6 @@ const NOOP = () => {};
 const formatter = d3.format('.3s');
 
 function nvd3Vis(element, props) {
-  PropTypes.checkPropTypes(propTypes, props, 'prop', 'NVD3Vis');
-
   const {
     data,
     width: maxWidth,
@@ -901,116 +898,6 @@ function nvd3Vis(element, props) {
   nv.addGraph(drawGraph);
 }
 
+nvd3Vis.displayName = 'NVD3';
 nvd3Vis.propTypes = propTypes;
-
-function adaptor(slice, payload) {
-  const { formData, datasource, selector, annotationData } = slice;
-  const {
-    annotation_layers: annotationLayers,
-    bar_stacked: isBarStacked,
-    bottom_margin: bottomMargin,
-    color_picker: baseColor,
-    color_scheme: colorScheme,
-    comparison_type: comparisonType,
-    contribution,
-    donut: isDonut,
-    entity,
-    labels_outside: isPieLabelOutside,
-    left_margin: leftMargin,
-    line_interpolation: lineInterpolation,
-    max_bubble_size: maxBubbleSize,
-    order_bars: orderBars,
-    pie_label_type: pieLabelType,
-    reduce_x_ticks: reduceXTicks,
-    rich_tooltip: useRichTooltip,
-    send_time_range: hasBrushAction,
-    show_bar_value: showBarValue,
-    show_brush: showBrush,
-    show_controls: showControls,
-    show_labels: showLabels,
-    show_legend: showLegend,
-    show_markers: showMarkers,
-    size: sizeField,
-    stacked_style: areaStackedStyle,
-    viz_type: vizType,
-    x: xField,
-    x_axis_format: xAxisFormat,
-    x_axis_label: xAxisLabel,
-    x_axis_showminmax: xAxisShowMinMax,
-    x_log_scale: xIsLogScale,
-    x_ticks_layout: xTicksLayout,
-    y: yField,
-    y_axis_format: yAxisFormat,
-    y_axis_2_format: yAxis2Format,
-    y_axis_bounds: yAxisBounds,
-    y_axis_label: yAxisLabel,
-    y_axis_showminmax: yAxisShowMinMax,
-    y_log_scale: yIsLogScale,
-  } = formData;
-
-  const element = document.querySelector(selector);
-
-  const rawData = payload.data || [];
-  const data = Array.isArray(rawData)
-    ? rawData.map(row => ({
-      ...row,
-      key: formatLabel(row.key, datasource.verbose_map),
-    }))
-    : rawData;
-
-  const props = {
-    data,
-    width: slice.width(),
-    height: slice.height(),
-    annotationData,
-    annotationLayers,
-    areaStackedStyle,
-    baseColor,
-    bottomMargin,
-    colorScheme,
-    comparisonType,
-    contribution,
-    entity,
-    isBarStacked,
-    isDonut,
-    isPieLabelOutside,
-    leftMargin,
-    lineInterpolation,
-    maxBubbleSize: parseInt(maxBubbleSize, 10),
-    onBrushEnd: isTruthy(hasBrushAction) ? ((timeRange) => {
-      slice.addFilter('__time_range', timeRange, false, true);
-    }) : undefined,
-    onError(err) { slice.error(err); },
-    orderBars,
-    pieLabelType,
-    reduceXTicks,
-    showBarValue,
-    showBrush,
-    showControls,
-    showLabels,
-    showLegend,
-    showMarkers,
-    sizeField,
-    useRichTooltip,
-    vizType,
-    xAxisFormat,
-    xAxisLabel,
-    xAxisShowMinMax,
-    xField,
-    xIsLogScale,
-    xTicksLayout,
-    yAxisFormat,
-    yAxis2Format,
-    yAxisBounds,
-    yAxisLabel,
-    yAxisShowMinMax,
-    yField,
-    yIsLogScale,
-  };
-
-  slice.clearError();
-
-  return nvd3Vis(element, props);
-}
-
-export default adaptor;
+export default nvd3Vis;

superset/assets/src/visualizations/nvd3/ReactNVD3.js

@@ -0,0 +1,4 @@
+import reactify from '../../utils/reactify';
+import Component from './NVD3Vis';
+
+export default reactify(Component);

superset/assets/src/visualizations/nvd3/adaptor.jsx

@@ -0,0 +1,5 @@
+import createAdaptor from '../../utils/createAdaptor';
+import Component from './ReactNVD3';
+import transformProps from './transformProps';
+
+export default createAdaptor(Component, transformProps);

superset/assets/src/visualizations/nvd3/transformProps.js

@@ -0,0 +1,112 @@
+import { isTruthy } from '../../utils/common';
+import { formatLabel } from './utils';
+
+export default function transformProps(basicChartInput) {
+  const {
+    annotationData,
+    datasource,
+    formData,
+    onError,
+    onAddFilter,
+    payload,
+  } = basicChartInput;
+
+  const {
+    annotationLayers,
+    barStacked,
+    bottomMargin,
+    colorPicker,
+    colorScheme,
+    comparisonType,
+    contribution,
+    donut,
+    entity,
+    labelsOutside,
+    leftMargin,
+    lineInterpolation,
+    maxBubbleSize,
+    orderBars,
+    pieLabelType,
+    reduceXTicks,
+    richTooltip,
+    sendTimeRange,
+    showBarValue,
+    showBrush,
+    showControls,
+    showLabels,
+    showLegend,
+    showMarkers,
+    size,
+    stackedStyle,
+    vizType,
+    x,
+    xAxisFormat,
+    xAxisLabel,
+    xAxisShowminmax,
+    xLogScale,
+    xTicksLayout,
+    y,
+    yAxisFormat,
+    yAxis2Format,
+    yAxisBounds,
+    yAxisLabel,
+    yAxisShowminmax,
+    yLogScale,
+  } = formData;
+
+  const rawData = payload.data || [];
+  const data = Array.isArray(rawData)
+    ? rawData.map(row => ({
+      ...row,
+      key: formatLabel(row.key, datasource.verbose_map),
+    }))
+    : rawData;
+
+  return {
+    data,
+    annotationData,
+    annotationLayers,
+    areaStackedStyle: stackedStyle,
+    baseColor: colorPicker,
+    bottomMargin,
+    colorScheme,
+    comparisonType,
+    contribution,
+    entity,
+    isBarStacked: barStacked,
+    isDonut: donut,
+    isPieLabelOutside: labelsOutside,
+    leftMargin,
+    lineInterpolation,
+    maxBubbleSize: parseInt(maxBubbleSize, 10),
+    onBrushEnd: isTruthy(sendTimeRange) ? ((timeRange) => {
+      onAddFilter('__time_range', timeRange, false, true);
+    }) : undefined,
+    onError,
+    orderBars,
+    pieLabelType,
+    reduceXTicks,
+    showBarValue,
+    showBrush,
+    showControls,
+    showLabels,
+    showLegend,
+    showMarkers,
+    sizeField: size,
+    useRichTooltip: richTooltip,
+    vizType,
+    xAxisFormat,
+    xAxisLabel,
+    xAxisShowMinMax: xAxisShowminmax,
+    xField: x,
+    xIsLogScale: xLogScale,
+    xTicksLayout,
+    yAxisFormat,
+    yAxis2Format,
+    yAxisBounds,
+    yAxisLabel,
+    yAxisShowMinMax: yAxisShowminmax,
+    yField: y,
+    yIsLogScale: yLogScale,
+  };
+}