From 5c2a7880cc6834651690f5ce7d1db3242fc45526 Mon Sep 17 00:00:00 2001 From: Krist Wongsuphasawat Date: Wed, 3 Oct 2018 10:18:04 -0700 Subject: [PATCH] [SIP-6] Migrate visualizations to new directory structure (part 3 - nvd3) (#6006) * migrate nvd3 * update basicchartinput --- superset/assets/src/visualizations/index.js | 2 +- .../visualizations/models/BasicChartInput.js | 3 + .../src/visualizations/nvd3/LineMulti.js | 2 +- .../assets/src/visualizations/nvd3/NVD3Vis.js | 117 +----------------- .../src/visualizations/nvd3/ReactNVD3.js | 4 + .../src/visualizations/nvd3/adaptor.jsx | 5 + .../src/visualizations/nvd3/transformProps.js | 112 +++++++++++++++++ 7 files changed, 128 insertions(+), 117 deletions(-) create mode 100644 superset/assets/src/visualizations/nvd3/ReactNVD3.js create mode 100644 superset/assets/src/visualizations/nvd3/adaptor.jsx create mode 100644 superset/assets/src/visualizations/nvd3/transformProps.js diff --git a/superset/assets/src/visualizations/index.js b/superset/assets/src/visualizations/index.js index 6507b97d486fc..5d9b3b4d9184d 100644 --- a/superset/assets/src/visualizations/index.js +++ b/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, diff --git a/superset/assets/src/visualizations/models/BasicChartInput.js b/superset/assets/src/visualizations/models/BasicChartInput.js index 73aff9553aa2e..d4a5a32c495fd 100644 --- a/superset/assets/src/visualizations/models/BasicChartInput.js +++ b/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; } diff --git a/superset/assets/src/visualizations/nvd3/LineMulti.js b/superset/assets/src/visualizations/nvd3/LineMulti.js index 7309641433d8d..d5f1c48bbac6f 100644 --- a/superset/assets/src/visualizations/nvd3/LineMulti.js +++ b/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) { diff --git a/superset/assets/src/visualizations/nvd3/NVD3Vis.js b/superset/assets/src/visualizations/nvd3/NVD3Vis.js index 4e47b8e5b3046..392e3a5d56e0f 100644 --- a/superset/assets/src/visualizations/nvd3/NVD3Vis.js +++ b/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; diff --git a/superset/assets/src/visualizations/nvd3/ReactNVD3.js b/superset/assets/src/visualizations/nvd3/ReactNVD3.js new file mode 100644 index 0000000000000..b7e884dcde3de --- /dev/null +++ b/superset/assets/src/visualizations/nvd3/ReactNVD3.js @@ -0,0 +1,4 @@ +import reactify from '../../utils/reactify'; +import Component from './NVD3Vis'; + +export default reactify(Component); diff --git a/superset/assets/src/visualizations/nvd3/adaptor.jsx b/superset/assets/src/visualizations/nvd3/adaptor.jsx new file mode 100644 index 0000000000000..ce6e7b3702ce7 --- /dev/null +++ b/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); diff --git a/superset/assets/src/visualizations/nvd3/transformProps.js b/superset/assets/src/visualizations/nvd3/transformProps.js new file mode 100644 index 0000000000000..4445b912eb46d --- /dev/null +++ b/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, + }; +}