From 4421c10d5bbd0f1a813e541fabca19111d505a85 Mon Sep 17 00:00:00 2001 From: Krist Wongsuphasawat Date: Thu, 20 Sep 2018 16:41:06 -0700 Subject: [PATCH 01/22] Migrate Chord, Calendar --- .../Calendar.css} | 0 .../{cal_heatmap.js => Calendar/Calendar.js} | 48 +++---------------- .../visualizations/Calendar/ReactCalendar.js | 4 ++ .../src/visualizations/Calendar/adaptor.jsx | 5 ++ .../visualizations/Calendar/transformProps.js | 32 +++++++++++++ .../{chord.css => Chord/Chord.css} | 0 .../{chord.jsx => Chord/Chord.jsx} | 24 ++-------- .../src/visualizations/Chord/ReactChord.js | 4 ++ .../src/visualizations/Chord/adaptor.jsx | 5 ++ .../visualizations/Chord/transformProps.js | 10 ++++ .../src/visualizations/WorldMap/adaptor.jsx | 4 +- superset/assets/src/visualizations/index.js | 4 +- .../visualizations/models/BasicChartInput.js | 1 + 13 files changed, 77 insertions(+), 64 deletions(-) rename superset/assets/src/visualizations/{cal_heatmap.css => Calendar/Calendar.css} (100%) rename superset/assets/src/visualizations/{cal_heatmap.js => Calendar/Calendar.js} (75%) create mode 100644 superset/assets/src/visualizations/Calendar/ReactCalendar.js create mode 100644 superset/assets/src/visualizations/Calendar/adaptor.jsx create mode 100644 superset/assets/src/visualizations/Calendar/transformProps.js rename superset/assets/src/visualizations/{chord.css => Chord/Chord.css} (100%) rename superset/assets/src/visualizations/{chord.jsx => Chord/Chord.jsx} (84%) create mode 100644 superset/assets/src/visualizations/Chord/ReactChord.js create mode 100644 superset/assets/src/visualizations/Chord/adaptor.jsx create mode 100644 superset/assets/src/visualizations/Chord/transformProps.js diff --git a/superset/assets/src/visualizations/cal_heatmap.css b/superset/assets/src/visualizations/Calendar/Calendar.css similarity index 100% rename from superset/assets/src/visualizations/cal_heatmap.css rename to superset/assets/src/visualizations/Calendar/Calendar.css diff --git a/superset/assets/src/visualizations/cal_heatmap.js b/superset/assets/src/visualizations/Calendar/Calendar.js similarity index 75% rename from superset/assets/src/visualizations/cal_heatmap.js rename to superset/assets/src/visualizations/Calendar/Calendar.js index af91dcee6891c..d52dd62162ff8 100644 --- a/superset/assets/src/visualizations/cal_heatmap.js +++ b/superset/assets/src/visualizations/Calendar/Calendar.js @@ -1,11 +1,11 @@ import d3 from 'd3'; import PropTypes from 'prop-types'; -import { colorScalerFactory } from '../modules/colors'; -import CalHeatMap from '../../vendor/cal-heatmap/cal-heatmap'; -import { d3TimeFormatPreset, d3FormatPreset } from '../modules/utils'; -import { UTC } from '../modules/dates'; -import '../../vendor/cal-heatmap/cal-heatmap.css'; -import './cal_heatmap.css'; +import { colorScalerFactory } from '../../modules/colors'; +import CalHeatMap from '../../../vendor/cal-heatmap/cal-heatmap'; +import { d3TimeFormatPreset, d3FormatPreset } from '../../modules/utils'; +import { UTC } from '../../modules/dates'; +import '../../../vendor/cal-heatmap/cal-heatmap.css'; +import './Calendar.css'; const UTCTS = uts => UTC(new Date(uts)).getTime(); @@ -126,38 +126,4 @@ function Calendar(element, props) { Calendar.propTypes = propTypes; -function adaptor(slice, payload) { - const { selector, formData, datasource } = slice; - const { - cell_padding: cellPadding, - cell_radius: cellRadius, - cell_size: cellSize, - linear_color_scheme: linearColorScheme, - show_legend: showLegend, - show_metric_name: showMetricName, - show_values: showValues, - steps, - x_axis_time_format: timeFormat, - y_axis_format: valueFormat, - } = formData; - const { verbose_map: verboseMap } = datasource; - const element = document.querySelector(selector); - - return Calendar(element, { - data: payload.data, - height: slice.height(), - cellPadding, - cellRadius, - cellSize, - linearColorScheme, - showLegend, - showMetricName, - showValues, - steps, - timeFormat, - valueFormat, - verboseMap, - }); -} - -export default adaptor; +export default Calendar; diff --git a/superset/assets/src/visualizations/Calendar/ReactCalendar.js b/superset/assets/src/visualizations/Calendar/ReactCalendar.js new file mode 100644 index 0000000000000..349930b3ad36e --- /dev/null +++ b/superset/assets/src/visualizations/Calendar/ReactCalendar.js @@ -0,0 +1,4 @@ +import reactify from '../../utils/reactify'; +import Component from './Calendar'; + +export default reactify(Component); diff --git a/superset/assets/src/visualizations/Calendar/adaptor.jsx b/superset/assets/src/visualizations/Calendar/adaptor.jsx new file mode 100644 index 0000000000000..6df23615e3998 --- /dev/null +++ b/superset/assets/src/visualizations/Calendar/adaptor.jsx @@ -0,0 +1,5 @@ +import createAdaptor from '../../utils/createAdaptor'; +import Component from './ReactCalendar'; +import transformProps from './transformProps'; + +export default createAdaptor(Component, transformProps); diff --git a/superset/assets/src/visualizations/Calendar/transformProps.js b/superset/assets/src/visualizations/Calendar/transformProps.js new file mode 100644 index 0000000000000..91390947c75c7 --- /dev/null +++ b/superset/assets/src/visualizations/Calendar/transformProps.js @@ -0,0 +1,32 @@ +export default function transformProps(basicChartInput) { + const { formData, payload, datasource } = basicChartInput; + const { + cellPadding, + cellRadius, + cellSize, + linearColorScheme, + showLegend, + showMetricName, + showValues, + steps, + xAxisTimeFormat: timeFormat, + yAxisFormat: valueFormat, + } = formData; + + const { verboseMap } = datasource; + + return { + data: payload.data, + cellPadding, + cellRadius, + cellSize, + linearColorScheme, + showLegend, + showMetricName, + showValues, + steps, + timeFormat, + valueFormat, + verboseMap, + }; +} diff --git a/superset/assets/src/visualizations/chord.css b/superset/assets/src/visualizations/Chord/Chord.css similarity index 100% rename from superset/assets/src/visualizations/chord.css rename to superset/assets/src/visualizations/Chord/Chord.css diff --git a/superset/assets/src/visualizations/chord.jsx b/superset/assets/src/visualizations/Chord/Chord.jsx similarity index 84% rename from superset/assets/src/visualizations/chord.jsx rename to superset/assets/src/visualizations/Chord/Chord.jsx index 672a31e549514..2b95aa40a9c86 100644 --- a/superset/assets/src/visualizations/chord.jsx +++ b/superset/assets/src/visualizations/Chord/Chord.jsx @@ -1,8 +1,8 @@ /* eslint-disable no-param-reassign */ import d3 from 'd3'; import PropTypes from 'prop-types'; -import { getScale } from '../modules/CategoricalColorNamespace'; -import './chord.css'; +import { getScale } from '../../modules/CategoricalColorNamespace'; +import './Chord.css'; const propTypes = { data: PropTypes.shape({ @@ -15,7 +15,7 @@ const propTypes = { colorScheme: PropTypes.string, }; -function chordVis(element, props) { +function ChordVis(element, props) { PropTypes.checkPropTypes(propTypes, props, 'prop', 'ChordVis'); const { @@ -117,20 +117,6 @@ function chordVis(element, props) { }); } -chordVis.propTypes = propTypes; +ChordVis.propTypes = propTypes; -function adaptor(slice, payload) { - const { selector, formData } = slice; - const { y_axis_format: numberFormat, color_scheme: colorScheme } = formData; - const element = document.querySelector(selector); - - return chordVis(element, { - data: payload.data, - width: slice.width(), - height: slice.height(), - numberFormat, - colorScheme, - }); -} - -export default adaptor; +export default ChordVis; diff --git a/superset/assets/src/visualizations/Chord/ReactChord.js b/superset/assets/src/visualizations/Chord/ReactChord.js new file mode 100644 index 0000000000000..dcb8118944d6f --- /dev/null +++ b/superset/assets/src/visualizations/Chord/ReactChord.js @@ -0,0 +1,4 @@ +import reactify from '../../utils/reactify'; +import Chord from './Chord'; + +export default reactify(Chord); diff --git a/superset/assets/src/visualizations/Chord/adaptor.jsx b/superset/assets/src/visualizations/Chord/adaptor.jsx new file mode 100644 index 0000000000000..ced5895770d1b --- /dev/null +++ b/superset/assets/src/visualizations/Chord/adaptor.jsx @@ -0,0 +1,5 @@ +import createAdaptor from '../../utils/createAdaptor'; +import Component from './ReactChord'; +import transformProps from './transformProps'; + +export default createAdaptor(Component, transformProps); diff --git a/superset/assets/src/visualizations/Chord/transformProps.js b/superset/assets/src/visualizations/Chord/transformProps.js new file mode 100644 index 0000000000000..505b8f31287cb --- /dev/null +++ b/superset/assets/src/visualizations/Chord/transformProps.js @@ -0,0 +1,10 @@ +export default function transformProps(basicChartInput) { + const { formData, payload } = basicChartInput; + const { yAxisFormat: numberFormat, colorScheme } = formData; + + return { + data: payload.data, + numberFormat, + colorScheme, + }; +} diff --git a/superset/assets/src/visualizations/WorldMap/adaptor.jsx b/superset/assets/src/visualizations/WorldMap/adaptor.jsx index 30d0400f35a11..faa1a2cebf5e7 100644 --- a/superset/assets/src/visualizations/WorldMap/adaptor.jsx +++ b/superset/assets/src/visualizations/WorldMap/adaptor.jsx @@ -1,5 +1,5 @@ import createAdaptor from '../../utils/createAdaptor'; -import WorldMap from './ReactWorldMap'; +import Component from './ReactWorldMap'; import transformProps from './transformProps'; -export default createAdaptor(WorldMap, transformProps); +export default createAdaptor(Component, transformProps); diff --git a/superset/assets/src/visualizations/index.js b/superset/assets/src/visualizations/index.js index e924dd4d12e06..6764b201eaaf8 100644 --- a/superset/assets/src/visualizations/index.js +++ b/superset/assets/src/visualizations/index.js @@ -72,11 +72,11 @@ const vizMap = { [VIZ_TYPES.bubble]: loadNvd3, [VIZ_TYPES.bullet]: loadNvd3, [VIZ_TYPES.cal_heatmap]: () => - loadVis(import(/* webpackChunkName: "cal_heatmap" */ './cal_heatmap.js')), + loadVis(import(/* webpackChunkName: "cal_heatmap" */ './Calendar/adaptor.jsx')), [VIZ_TYPES.compare]: loadNvd3, [VIZ_TYPES.directed_force]: () => loadVis(import(/* webpackChunkName: "directed_force" */ './directed_force.js')), - [VIZ_TYPES.chord]: () => loadVis(import(/* webpackChunkName: "chord" */ './chord.jsx')), + [VIZ_TYPES.chord]: () => loadVis(import(/* webpackChunkName: "chord" */ './Chord/adaptor.jsx')), [VIZ_TYPES.dist_bar]: loadNvd3, [VIZ_TYPES.filter_box]: () => loadVis(import(/* webpackChunkName: "filter_box" */ './filter_box.jsx')), diff --git a/superset/assets/src/visualizations/models/BasicChartInput.js b/superset/assets/src/visualizations/models/BasicChartInput.js index de4add533639b..c7b5aaa196f55 100644 --- a/superset/assets/src/visualizations/models/BasicChartInput.js +++ b/superset/assets/src/visualizations/models/BasicChartInput.js @@ -3,6 +3,7 @@ import convertKeysToCamelCase from '../../utils/convertKeysToCamelCase'; export default class BasicChartInput { constructor(slice, payload, setControlValue) { this.annotationData = slice.annotationData; + this.datasource = convertKeysToCamelCase(slice.datasource); this.formData = convertKeysToCamelCase(slice.formData); this.payload = payload; this.setControlValue = setControlValue; From 57cedca75299282c24d284bea87555bb6dc659d7 Mon Sep 17 00:00:00 2001 From: Krist Wongsuphasawat Date: Thu, 20 Sep 2018 16:48:18 -0700 Subject: [PATCH 02/22] Migrate CountryMap --- .../CountryMap.css} | 0 .../CountryMap.js} | 25 +++---------------- .../CountryMap/ReactCountryMap.js | 4 +++ .../src/visualizations/CountryMap/adaptor.jsx | 5 ++++ .../CountryMap/transformProps.js | 15 +++++++++++ superset/assets/src/visualizations/index.js | 2 +- 6 files changed, 28 insertions(+), 23 deletions(-) rename superset/assets/src/visualizations/{country_map.css => CountryMap/CountryMap.css} (100%) rename superset/assets/src/visualizations/{country_map.js => CountryMap/CountryMap.js} (90%) create mode 100644 superset/assets/src/visualizations/CountryMap/ReactCountryMap.js create mode 100644 superset/assets/src/visualizations/CountryMap/adaptor.jsx create mode 100644 superset/assets/src/visualizations/CountryMap/transformProps.js diff --git a/superset/assets/src/visualizations/country_map.css b/superset/assets/src/visualizations/CountryMap/CountryMap.css similarity index 100% rename from superset/assets/src/visualizations/country_map.css rename to superset/assets/src/visualizations/CountryMap/CountryMap.css diff --git a/superset/assets/src/visualizations/country_map.js b/superset/assets/src/visualizations/CountryMap/CountryMap.js similarity index 90% rename from superset/assets/src/visualizations/country_map.js rename to superset/assets/src/visualizations/CountryMap/CountryMap.js index 92c799bff3d9f..c39ccad441f9c 100644 --- a/superset/assets/src/visualizations/country_map.js +++ b/superset/assets/src/visualizations/CountryMap/CountryMap.js @@ -1,7 +1,7 @@ import d3 from 'd3'; import PropTypes from 'prop-types'; -import { colorScalerFactory } from '../modules/colors'; -import './country_map.css'; +import { colorScalerFactory } from '../../modules/colors'; +import './CountryMap.css'; const propTypes = { data: PropTypes.arrayOf(PropTypes.shape({ @@ -198,23 +198,4 @@ function CountryMap(element, props) { CountryMap.propTypes = propTypes; -function adaptor(slice, payload) { - const { selector, formData } = slice; - const { - linear_color_scheme: linearColorScheme, - number_format: numberFormat, - select_country: country, - } = formData; - const element = document.querySelector(selector); - - return CountryMap(element, { - data: payload.data, - width: slice.width(), - height: slice.height(), - country, - linearColorScheme, - numberFormat, - }); -} - -export default adaptor; +export default CountryMap; diff --git a/superset/assets/src/visualizations/CountryMap/ReactCountryMap.js b/superset/assets/src/visualizations/CountryMap/ReactCountryMap.js new file mode 100644 index 0000000000000..dce4a8410b450 --- /dev/null +++ b/superset/assets/src/visualizations/CountryMap/ReactCountryMap.js @@ -0,0 +1,4 @@ +import reactify from '../../utils/reactify'; +import CountryMap from './CountryMap'; + +export default reactify(CountryMap); diff --git a/superset/assets/src/visualizations/CountryMap/adaptor.jsx b/superset/assets/src/visualizations/CountryMap/adaptor.jsx new file mode 100644 index 0000000000000..8553cb4798afd --- /dev/null +++ b/superset/assets/src/visualizations/CountryMap/adaptor.jsx @@ -0,0 +1,5 @@ +import createAdaptor from '../../utils/createAdaptor'; +import Component from './ReactCountryMap'; +import transformProps from './transformProps'; + +export default createAdaptor(Component, transformProps); diff --git a/superset/assets/src/visualizations/CountryMap/transformProps.js b/superset/assets/src/visualizations/CountryMap/transformProps.js new file mode 100644 index 0000000000000..9f83163a06642 --- /dev/null +++ b/superset/assets/src/visualizations/CountryMap/transformProps.js @@ -0,0 +1,15 @@ +export default function transformProps(basicChartInput) { + const { formData, payload } = basicChartInput; + const { + linearColorScheme, + numberFormat, + selectCountry: country, + } = formData; + + return { + data: payload.data, + country, + linearColorScheme, + numberFormat, + }; +} diff --git a/superset/assets/src/visualizations/index.js b/superset/assets/src/visualizations/index.js index 6764b201eaaf8..e421fb3fe2a91 100644 --- a/superset/assets/src/visualizations/index.js +++ b/superset/assets/src/visualizations/index.js @@ -104,7 +104,7 @@ const vizMap = { loadVis(import(/* webpackChunkName: "time_table" */ './TimeTable/TimeTable.jsx')), [VIZ_TYPES.treemap]: () => loadVis(import(/* webpackChunkName: "treemap" */ './treemap.js')), [VIZ_TYPES.country_map]: () => - loadVis(import(/* webpackChunkName: "country_map" */ './country_map.js')), + loadVis(import(/* webpackChunkName: "country_map" */ './CountryMap/adaptor.jsx')), [VIZ_TYPES.word_cloud]: () => loadVis(import(/* webpackChunkName: "word_cloud" */ './wordcloud/WordCloud.js')), [VIZ_TYPES.world_map]: () => From d804eb2c04b222cb9a08dedd47f5dce3b64c4979 Mon Sep 17 00:00:00 2001 From: Krist Wongsuphasawat Date: Thu, 20 Sep 2018 16:52:55 -0700 Subject: [PATCH 03/22] Add display name and rename Chord.jsx to Chord.js --- superset/assets/src/visualizations/Calendar/Calendar.js | 3 +-- .../src/visualizations/Chord/{Chord.jsx => Chord.js} | 9 ++++----- .../assets/src/visualizations/CountryMap/CountryMap.js | 3 +-- superset/assets/src/visualizations/WorldMap/WorldMap.js | 3 +-- 4 files changed, 7 insertions(+), 11 deletions(-) rename superset/assets/src/visualizations/Chord/{Chord.jsx => Chord.js} (94%) diff --git a/superset/assets/src/visualizations/Calendar/Calendar.js b/superset/assets/src/visualizations/Calendar/Calendar.js index d52dd62162ff8..bcecb3c6d6936 100644 --- a/superset/assets/src/visualizations/Calendar/Calendar.js +++ b/superset/assets/src/visualizations/Calendar/Calendar.js @@ -37,8 +37,6 @@ const propTypes = { }; function Calendar(element, props) { - PropTypes.checkPropTypes(propTypes, props, 'prop', 'Calendar'); - const { data, height, @@ -124,6 +122,7 @@ function Calendar(element, props) { }); } +Calendar.displayName = 'Calendar'; Calendar.propTypes = propTypes; export default Calendar; diff --git a/superset/assets/src/visualizations/Chord/Chord.jsx b/superset/assets/src/visualizations/Chord/Chord.js similarity index 94% rename from superset/assets/src/visualizations/Chord/Chord.jsx rename to superset/assets/src/visualizations/Chord/Chord.js index 2b95aa40a9c86..cb5ae6dc2cd61 100644 --- a/superset/assets/src/visualizations/Chord/Chord.jsx +++ b/superset/assets/src/visualizations/Chord/Chord.js @@ -15,9 +15,7 @@ const propTypes = { colorScheme: PropTypes.string, }; -function ChordVis(element, props) { - PropTypes.checkPropTypes(propTypes, props, 'prop', 'ChordVis'); - +function Chord(element, props) { const { data, width, @@ -117,6 +115,7 @@ function ChordVis(element, props) { }); } -ChordVis.propTypes = propTypes; +Chord.displayName = 'Chord'; +Chord.propTypes = propTypes; -export default ChordVis; +export default Chord; diff --git a/superset/assets/src/visualizations/CountryMap/CountryMap.js b/superset/assets/src/visualizations/CountryMap/CountryMap.js index c39ccad441f9c..52e961d4e3f2b 100644 --- a/superset/assets/src/visualizations/CountryMap/CountryMap.js +++ b/superset/assets/src/visualizations/CountryMap/CountryMap.js @@ -19,8 +19,6 @@ const propTypes = { const maps = {}; function CountryMap(element, props) { - PropTypes.checkPropTypes(propTypes, props, 'prop', 'CountryMap'); - const { data, width, @@ -196,6 +194,7 @@ function CountryMap(element, props) { } +CountryMap.displayName = 'CountryMap'; CountryMap.propTypes = propTypes; export default CountryMap; diff --git a/superset/assets/src/visualizations/WorldMap/WorldMap.js b/superset/assets/src/visualizations/WorldMap/WorldMap.js index d83d79411b0d7..924c5149f40b9 100644 --- a/superset/assets/src/visualizations/WorldMap/WorldMap.js +++ b/superset/assets/src/visualizations/WorldMap/WorldMap.js @@ -20,8 +20,6 @@ const propTypes = { const formatter = d3.format('.3s'); function WorldMap(element, props) { - PropTypes.checkPropTypes(propTypes, props, 'prop', 'WorldMap'); - const { data, height, @@ -107,6 +105,7 @@ function WorldMap(element, props) { } } +WorldMap.displayName = 'WorldMap'; WorldMap.propTypes = propTypes; export default WorldMap; From a234e097ebe06dcfaf7e96f044791521315b2f9d Mon Sep 17 00:00:00 2001 From: Krist Wongsuphasawat Date: Fri, 21 Sep 2018 14:05:52 -0700 Subject: [PATCH 04/22] migrate Histogram --- .../visualizations/Calendar/transformProps.js | 8 ++--- .../visualizations/Chord/transformProps.js | 4 +-- .../CountryMap/transformProps.js | 4 +-- .../{ => Histogram}/Histogram.jsx | 29 +------------------ .../src/visualizations/Histogram/adaptor.jsx | 5 ++++ .../Histogram/transformProps.js | 21 ++++++++++++++ superset/assets/src/visualizations/index.js | 2 +- 7 files changed, 36 insertions(+), 37 deletions(-) rename superset/assets/src/visualizations/{ => Histogram}/Histogram.jsx (82%) create mode 100644 superset/assets/src/visualizations/Histogram/adaptor.jsx create mode 100644 superset/assets/src/visualizations/Histogram/transformProps.js diff --git a/superset/assets/src/visualizations/Calendar/transformProps.js b/superset/assets/src/visualizations/Calendar/transformProps.js index 91390947c75c7..e97e1665f1369 100644 --- a/superset/assets/src/visualizations/Calendar/transformProps.js +++ b/superset/assets/src/visualizations/Calendar/transformProps.js @@ -9,8 +9,8 @@ export default function transformProps(basicChartInput) { showMetricName, showValues, steps, - xAxisTimeFormat: timeFormat, - yAxisFormat: valueFormat, + xAxisTimeFormat, + yAxisFormat, } = formData; const { verboseMap } = datasource; @@ -25,8 +25,8 @@ export default function transformProps(basicChartInput) { showMetricName, showValues, steps, - timeFormat, - valueFormat, + timeFormat: xAxisTimeFormat, + valueFormat: yAxisFormat, verboseMap, }; } diff --git a/superset/assets/src/visualizations/Chord/transformProps.js b/superset/assets/src/visualizations/Chord/transformProps.js index 505b8f31287cb..f52a1dc32ef07 100644 --- a/superset/assets/src/visualizations/Chord/transformProps.js +++ b/superset/assets/src/visualizations/Chord/transformProps.js @@ -1,10 +1,10 @@ export default function transformProps(basicChartInput) { const { formData, payload } = basicChartInput; - const { yAxisFormat: numberFormat, colorScheme } = formData; + const { yAxisFormat, colorScheme } = formData; return { data: payload.data, - numberFormat, + numberFormat: yAxisFormat, colorScheme, }; } diff --git a/superset/assets/src/visualizations/CountryMap/transformProps.js b/superset/assets/src/visualizations/CountryMap/transformProps.js index 9f83163a06642..40263356840a8 100644 --- a/superset/assets/src/visualizations/CountryMap/transformProps.js +++ b/superset/assets/src/visualizations/CountryMap/transformProps.js @@ -3,12 +3,12 @@ export default function transformProps(basicChartInput) { const { linearColorScheme, numberFormat, - selectCountry: country, + selectCountry, } = formData; return { data: payload.data, - country, + country: selectCountry, linearColorScheme, numberFormat, }; diff --git a/superset/assets/src/visualizations/Histogram.jsx b/superset/assets/src/visualizations/Histogram/Histogram.jsx similarity index 82% rename from superset/assets/src/visualizations/Histogram.jsx rename to superset/assets/src/visualizations/Histogram/Histogram.jsx index 44ffafbe99097..7f940c559342f 100644 --- a/superset/assets/src/visualizations/Histogram.jsx +++ b/superset/assets/src/visualizations/Histogram/Histogram.jsx @@ -108,31 +108,4 @@ class CustomHistogram extends React.PureComponent { CustomHistogram.propTypes = propTypes; CustomHistogram.defaultProps = defaultProps; -function adaptor(slice, payload) { - const { selector, formData } = slice; - const { - color_scheme: colorScheme, - link_length: binCount, - normalized, - global_opacity: opacity, - x_axis_label: xAxisLabel, - y_axis_label: yAxisLabel, - } = formData; - - ReactDOM.render( - , - document.querySelector(selector), - ); -} - -export default adaptor; +export default CustomHistogram; diff --git a/superset/assets/src/visualizations/Histogram/adaptor.jsx b/superset/assets/src/visualizations/Histogram/adaptor.jsx new file mode 100644 index 0000000000000..e72932f8b426f --- /dev/null +++ b/superset/assets/src/visualizations/Histogram/adaptor.jsx @@ -0,0 +1,5 @@ +import createAdaptor from '../../utils/createAdaptor'; +import Component from './Histogram'; +import transformProps from './transformProps'; + +export default createAdaptor(Component, transformProps); diff --git a/superset/assets/src/visualizations/Histogram/transformProps.js b/superset/assets/src/visualizations/Histogram/transformProps.js new file mode 100644 index 0000000000000..0c522a1d35bd9 --- /dev/null +++ b/superset/assets/src/visualizations/Histogram/transformProps.js @@ -0,0 +1,21 @@ +export default function transformProps(basicChartInput) { + const { formData, payload } = basicChartInput; + const { + colorScheme, + linkLength, + normalized, + globalOpacity, + xAxisLabel, + yAxisLabel, + } = formData; + + return { + data: payload.data, + binCount: parseInt(linkLength, 10), + colorScheme, + normalized, + opacity: globalOpacity, + xAxisLabel, + yAxisLabel, + }; +} diff --git a/superset/assets/src/visualizations/index.js b/superset/assets/src/visualizations/index.js index e421fb3fe2a91..7a2c5290df746 100644 --- a/superset/assets/src/visualizations/index.js +++ b/superset/assets/src/visualizations/index.js @@ -82,7 +82,7 @@ const vizMap = { loadVis(import(/* webpackChunkName: "filter_box" */ './filter_box.jsx')), [VIZ_TYPES.heatmap]: () => loadVis(import(/* webpackChunkName: "heatmap" */ './heatmap.js')), [VIZ_TYPES.histogram]: () => - loadVis(import(/* webpackChunkName: "histogram" */ './Histogram.jsx')), + loadVis(import(/* webpackChunkName: "histogram" */ './Histogram/adaptor.jsx')), [VIZ_TYPES.horizon]: () => loadVis(import(/* webpackChunkName: "horizon" */ './HorizonChart.jsx')), [VIZ_TYPES.iframe]: () => loadVis(import(/* webpackChunkName: "iframe" */ './iframe.js')), [VIZ_TYPES.line]: loadNvd3, From a048c1bf2f7af33ff6f3de79bed62dc59ee77467 Mon Sep 17 00:00:00 2001 From: Krist Wongsuphasawat Date: Fri, 21 Sep 2018 14:12:57 -0700 Subject: [PATCH 05/22] add force-directed --- .../src/visualizations/Chord/ReactChord.js | 4 ++-- .../CountryMap/ReactCountryMap.js | 4 ++-- .../ForceDirected.css} | 0 .../ForceDirected.js} | 23 ++++--------------- .../ForceDirected/ReactForceDirected.js | 4 ++++ .../visualizations/ForceDirected/adaptor.jsx | 5 ++++ .../ForceDirected/transformProps.js | 10 ++++++++ .../visualizations/Histogram/Histogram.jsx | 5 ++-- superset/assets/src/visualizations/index.js | 2 +- 9 files changed, 31 insertions(+), 26 deletions(-) rename superset/assets/src/visualizations/{directed_force.css => ForceDirected/ForceDirected.css} (100%) rename superset/assets/src/visualizations/{directed_force.js => ForceDirected/ForceDirected.js} (89%) create mode 100644 superset/assets/src/visualizations/ForceDirected/ReactForceDirected.js create mode 100644 superset/assets/src/visualizations/ForceDirected/adaptor.jsx create mode 100644 superset/assets/src/visualizations/ForceDirected/transformProps.js diff --git a/superset/assets/src/visualizations/Chord/ReactChord.js b/superset/assets/src/visualizations/Chord/ReactChord.js index dcb8118944d6f..3a41d7fc7f3b2 100644 --- a/superset/assets/src/visualizations/Chord/ReactChord.js +++ b/superset/assets/src/visualizations/Chord/ReactChord.js @@ -1,4 +1,4 @@ import reactify from '../../utils/reactify'; -import Chord from './Chord'; +import Component from './Chord'; -export default reactify(Chord); +export default reactify(Component); diff --git a/superset/assets/src/visualizations/CountryMap/ReactCountryMap.js b/superset/assets/src/visualizations/CountryMap/ReactCountryMap.js index dce4a8410b450..9b88976404e77 100644 --- a/superset/assets/src/visualizations/CountryMap/ReactCountryMap.js +++ b/superset/assets/src/visualizations/CountryMap/ReactCountryMap.js @@ -1,4 +1,4 @@ import reactify from '../../utils/reactify'; -import CountryMap from './CountryMap'; +import Component from './CountryMap'; -export default reactify(CountryMap); +export default reactify(Component); diff --git a/superset/assets/src/visualizations/directed_force.css b/superset/assets/src/visualizations/ForceDirected/ForceDirected.css similarity index 100% rename from superset/assets/src/visualizations/directed_force.css rename to superset/assets/src/visualizations/ForceDirected/ForceDirected.css diff --git a/superset/assets/src/visualizations/directed_force.js b/superset/assets/src/visualizations/ForceDirected/ForceDirected.js similarity index 89% rename from superset/assets/src/visualizations/directed_force.js rename to superset/assets/src/visualizations/ForceDirected/ForceDirected.js index b3bf0f3b971fa..2c6c4e31ca3f7 100644 --- a/superset/assets/src/visualizations/directed_force.js +++ b/superset/assets/src/visualizations/ForceDirected/ForceDirected.js @@ -1,7 +1,7 @@ /* eslint-disable no-param-reassign */ import d3 from 'd3'; import PropTypes from 'prop-types'; -import './directed_force.css'; +import './ForceDirected.css'; const propTypes = { data: PropTypes.arrayOf(PropTypes.shape({ @@ -16,9 +16,7 @@ const propTypes = { }; /* Modified from http://bl.ocks.org/d3noob/5141278 */ -function ForceDirectedGraph(element, props) { - PropTypes.checkPropTypes(propTypes, props, 'prop', 'ForceDirectedGraph'); - +function ForceDirected(element, props) { const { data, width, @@ -179,18 +177,7 @@ function ForceDirectedGraph(element, props) { .text(d => d.name); } -function adaptor(slice, payload) { - const { selector, formData } = slice; - const { link_length: linkLength, charge } = formData; - const element = document.querySelector(selector); - - return ForceDirectedGraph(element, { - data: payload.data, - width: slice.width(), - height: slice.height(), - linkLength, - charge, - }); -} +ForceDirected.displayName = 'ForceDirected'; +ForceDirected.propTypes = propTypes; -export default adaptor; +export default ForceDirected; diff --git a/superset/assets/src/visualizations/ForceDirected/ReactForceDirected.js b/superset/assets/src/visualizations/ForceDirected/ReactForceDirected.js new file mode 100644 index 0000000000000..d769de7747c5a --- /dev/null +++ b/superset/assets/src/visualizations/ForceDirected/ReactForceDirected.js @@ -0,0 +1,4 @@ +import reactify from '../../utils/reactify'; +import Component from './ForceDirected'; + +export default reactify(Component); diff --git a/superset/assets/src/visualizations/ForceDirected/adaptor.jsx b/superset/assets/src/visualizations/ForceDirected/adaptor.jsx new file mode 100644 index 0000000000000..be20f6d355618 --- /dev/null +++ b/superset/assets/src/visualizations/ForceDirected/adaptor.jsx @@ -0,0 +1,5 @@ +import createAdaptor from '../../utils/createAdaptor'; +import Component from './ReactForceDirected'; +import transformProps from './transformProps'; + +export default createAdaptor(Component, transformProps); diff --git a/superset/assets/src/visualizations/ForceDirected/transformProps.js b/superset/assets/src/visualizations/ForceDirected/transformProps.js new file mode 100644 index 0000000000000..115f353960a34 --- /dev/null +++ b/superset/assets/src/visualizations/ForceDirected/transformProps.js @@ -0,0 +1,10 @@ +export default function transformProps(basicChartInput) { + const { formData, payload } = basicChartInput; + const { charge, linkLength } = formData; + + return { + data: payload.data, + charge, + linkLength, + }; +} diff --git a/superset/assets/src/visualizations/Histogram/Histogram.jsx b/superset/assets/src/visualizations/Histogram/Histogram.jsx index 7f940c559342f..34540bb9df4eb 100644 --- a/superset/assets/src/visualizations/Histogram/Histogram.jsx +++ b/superset/assets/src/visualizations/Histogram/Histogram.jsx @@ -1,12 +1,11 @@ import PropTypes from 'prop-types'; import React from 'react'; -import ReactDOM from 'react-dom'; import { Histogram, BarSeries, XAxis, YAxis } from '@data-ui/histogram'; import { chartTheme } from '@data-ui/theme'; import { LegendOrdinal } from '@vx/legend'; import { scaleOrdinal } from '@vx/scale'; -import WithLegend from './WithLegend'; -import { getScale } from '../modules/CategoricalColorNamespace'; +import WithLegend from '../WithLegend'; +import { getScale } from '../../modules/CategoricalColorNamespace'; const propTypes = { className: PropTypes.string, diff --git a/superset/assets/src/visualizations/index.js b/superset/assets/src/visualizations/index.js index 7a2c5290df746..35df95a03b838 100644 --- a/superset/assets/src/visualizations/index.js +++ b/superset/assets/src/visualizations/index.js @@ -75,7 +75,7 @@ const vizMap = { loadVis(import(/* webpackChunkName: "cal_heatmap" */ './Calendar/adaptor.jsx')), [VIZ_TYPES.compare]: loadNvd3, [VIZ_TYPES.directed_force]: () => - loadVis(import(/* webpackChunkName: "directed_force" */ './directed_force.js')), + loadVis(import(/* webpackChunkName: "directed_force" */ './ForceDirected/adaptor.jsx')), [VIZ_TYPES.chord]: () => loadVis(import(/* webpackChunkName: "chord" */ './Chord/adaptor.jsx')), [VIZ_TYPES.dist_bar]: loadNvd3, [VIZ_TYPES.filter_box]: () => From eec0d113053b842e94878b763980b60c5c27fdd4 Mon Sep 17 00:00:00 2001 From: Krist Wongsuphasawat Date: Fri, 21 Sep 2018 14:27:14 -0700 Subject: [PATCH 06/22] migrate Heatmap --- .../{heatmap.css => Heatmap/Heatmap.css} | 0 .../{heatmap.js => Heatmap/Heatmap.js} | 56 ++----------------- .../visualizations/Heatmap/ReactHeatmap.js | 4 ++ .../src/visualizations/Heatmap/adaptor.jsx | 5 ++ .../visualizations/Heatmap/transformProps.js | 43 ++++++++++++++ superset/assets/src/visualizations/index.js | 2 +- 6 files changed, 58 insertions(+), 52 deletions(-) rename superset/assets/src/visualizations/{heatmap.css => Heatmap/Heatmap.css} (100%) rename superset/assets/src/visualizations/{heatmap.js => Heatmap/Heatmap.js} (88%) create mode 100644 superset/assets/src/visualizations/Heatmap/ReactHeatmap.js create mode 100644 superset/assets/src/visualizations/Heatmap/adaptor.jsx create mode 100644 superset/assets/src/visualizations/Heatmap/transformProps.js diff --git a/superset/assets/src/visualizations/heatmap.css b/superset/assets/src/visualizations/Heatmap/Heatmap.css similarity index 100% rename from superset/assets/src/visualizations/heatmap.css rename to superset/assets/src/visualizations/Heatmap/Heatmap.css diff --git a/superset/assets/src/visualizations/heatmap.js b/superset/assets/src/visualizations/Heatmap/Heatmap.js similarity index 88% rename from superset/assets/src/visualizations/heatmap.js rename to superset/assets/src/visualizations/Heatmap/Heatmap.js index 3a6b35167899d..d8723b4fbde20 100644 --- a/superset/assets/src/visualizations/heatmap.js +++ b/superset/assets/src/visualizations/Heatmap/Heatmap.js @@ -3,9 +3,9 @@ import PropTypes from 'prop-types'; import 'd3-svg-legend'; import d3tip from 'd3-tip'; -import { colorScalerFactory } from '../modules/colors'; -import '../../stylesheets/d3tip.css'; -import './heatmap.css'; +import { colorScalerFactory } from '../../modules/colors'; +import '../../../stylesheets/d3tip.css'; +import './Heatmap.css'; const propTypes = { data: PropTypes.shape({ @@ -342,53 +342,7 @@ function Heatmap(element, props) { createImageObj(); } +Heatmap.displayName = 'Heatmap'; Heatmap.propTypes = propTypes; -function adaptor(slice, payload) { - const { selector, formData } = slice; - const { - bottom_margin: bottomMargin, - canvas_image_rendering: canvasImageRendering, - all_columns_x: columnX, - all_columns_y: columnY, - linear_color_scheme: colorScheme, - left_margin: leftMargin, - metric, - normalized, - show_legend: showLegend, - show_perc: showPercentage, - show_values: showValues, - sort_x_axis: sortXAxis, - sort_y_axis: sortYAxis, - xscale_interval: xScaleInterval, - yscale_interval: yScaleInterval, - y_axis_bounds: yAxisBounds, - y_axis_format: numberFormat, - } = formData; - const element = document.querySelector(selector); - - return Heatmap(element, { - data: payload.data, - width: slice.width(), - height: slice.height(), - bottomMargin, - canvasImageRendering, - colorScheme, - columnX, - columnY, - leftMargin, - metric, - normalized, - numberFormat, - showLegend, - showPercentage, - showValues, - sortXAxis, - sortYAxis, - xScaleInterval: parseInt(xScaleInterval, 10), - yScaleInterval: parseInt(yScaleInterval, 10), - yAxisBounds, - }); -} - -export default adaptor; +export default Heatmap; diff --git a/superset/assets/src/visualizations/Heatmap/ReactHeatmap.js b/superset/assets/src/visualizations/Heatmap/ReactHeatmap.js new file mode 100644 index 0000000000000..453797826dfde --- /dev/null +++ b/superset/assets/src/visualizations/Heatmap/ReactHeatmap.js @@ -0,0 +1,4 @@ +import reactify from '../../utils/reactify'; +import Component from './Heatmap'; + +export default reactify(Component); diff --git a/superset/assets/src/visualizations/Heatmap/adaptor.jsx b/superset/assets/src/visualizations/Heatmap/adaptor.jsx new file mode 100644 index 0000000000000..f46baa8878a1d --- /dev/null +++ b/superset/assets/src/visualizations/Heatmap/adaptor.jsx @@ -0,0 +1,5 @@ +import createAdaptor from '../../utils/createAdaptor'; +import Component from './ReactHeatmap'; +import transformProps from './transformProps'; + +export default createAdaptor(Component, transformProps); diff --git a/superset/assets/src/visualizations/Heatmap/transformProps.js b/superset/assets/src/visualizations/Heatmap/transformProps.js new file mode 100644 index 0000000000000..9c4ad1062185c --- /dev/null +++ b/superset/assets/src/visualizations/Heatmap/transformProps.js @@ -0,0 +1,43 @@ +export default function transformProps(basicChartInput) { + const { formData, payload } = basicChartInput; + const { + bottomMargin, + canvasImageRendering, + allColumnsX, + allColumnsY, + linearColorScheme, + leftMargin, + metric, + normalized, + showLegend, + showPerc, + showValues, + sortXAxis, + sortYAxis, + xscaleInterval, + yscaleInterval, + yAxisBounds, + yAxisFormat, + } = formData; + + return { + data: payload.data, + bottomMargin, + canvasImageRendering, + colorScheme: linearColorScheme, + columnX: allColumnsX, + columnY: allColumnsY, + leftMargin, + metric, + normalized, + numberFormat: yAxisFormat, + showLegend, + showPercentage: showPerc, + showValues, + sortXAxis, + sortYAxis, + xScaleInterval: parseInt(xscaleInterval, 10), + yScaleInterval: parseInt(yscaleInterval, 10), + yAxisBounds, + }; +} diff --git a/superset/assets/src/visualizations/index.js b/superset/assets/src/visualizations/index.js index 35df95a03b838..b0d7710c2091e 100644 --- a/superset/assets/src/visualizations/index.js +++ b/superset/assets/src/visualizations/index.js @@ -80,7 +80,7 @@ const vizMap = { [VIZ_TYPES.dist_bar]: loadNvd3, [VIZ_TYPES.filter_box]: () => loadVis(import(/* webpackChunkName: "filter_box" */ './filter_box.jsx')), - [VIZ_TYPES.heatmap]: () => loadVis(import(/* webpackChunkName: "heatmap" */ './heatmap.js')), + [VIZ_TYPES.heatmap]: () => loadVis(import(/* webpackChunkName: "heatmap" */ './Heatmap/adaptor.jsx')), [VIZ_TYPES.histogram]: () => loadVis(import(/* webpackChunkName: "histogram" */ './Histogram/adaptor.jsx')), [VIZ_TYPES.horizon]: () => loadVis(import(/* webpackChunkName: "horizon" */ './HorizonChart.jsx')), From 246af992d48b80fcabd66a07e5b01de69f7ab110 Mon Sep 17 00:00:00 2001 From: Krist Wongsuphasawat Date: Fri, 21 Sep 2018 14:30:56 -0700 Subject: [PATCH 07/22] add horizon --- .../src/visualizations/Heatmap/Heatmap.js | 2 -- .../{ => Horizon}/HorizonChart.css | 0 .../{ => Horizon}/HorizonChart.jsx | 21 +------------------ .../{ => Horizon}/HorizonRow.jsx | 0 .../src/visualizations/Horizon/adaptor.jsx | 5 +++++ .../visualizations/Horizon/transformProps.js | 13 ++++++++++++ superset/assets/src/visualizations/index.js | 2 +- 7 files changed, 20 insertions(+), 23 deletions(-) rename superset/assets/src/visualizations/{ => Horizon}/HorizonChart.css (100%) rename superset/assets/src/visualizations/{ => Horizon}/HorizonChart.jsx (81%) rename superset/assets/src/visualizations/{ => Horizon}/HorizonRow.jsx (100%) create mode 100644 superset/assets/src/visualizations/Horizon/adaptor.jsx create mode 100644 superset/assets/src/visualizations/Horizon/transformProps.js diff --git a/superset/assets/src/visualizations/Heatmap/Heatmap.js b/superset/assets/src/visualizations/Heatmap/Heatmap.js index d8723b4fbde20..ca6d7a120f8b0 100644 --- a/superset/assets/src/visualizations/Heatmap/Heatmap.js +++ b/superset/assets/src/visualizations/Heatmap/Heatmap.js @@ -54,8 +54,6 @@ function cmp(a, b) { // Inspired from http://bl.ocks.org/mbostock/3074470 // https://jsfiddle.net/cyril123/h0reyumq/ function Heatmap(element, props) { - PropTypes.checkPropTypes(propTypes, props, 'prop', 'Heatmap'); - const { data, width, diff --git a/superset/assets/src/visualizations/HorizonChart.css b/superset/assets/src/visualizations/Horizon/HorizonChart.css similarity index 100% rename from superset/assets/src/visualizations/HorizonChart.css rename to superset/assets/src/visualizations/Horizon/HorizonChart.css diff --git a/superset/assets/src/visualizations/HorizonChart.jsx b/superset/assets/src/visualizations/Horizon/HorizonChart.jsx similarity index 81% rename from superset/assets/src/visualizations/HorizonChart.jsx rename to superset/assets/src/visualizations/Horizon/HorizonChart.jsx index c17e98266af68..0e5b024a1e92b 100644 --- a/superset/assets/src/visualizations/HorizonChart.jsx +++ b/superset/assets/src/visualizations/Horizon/HorizonChart.jsx @@ -81,23 +81,4 @@ class HorizonChart extends React.PureComponent { HorizonChart.propTypes = propTypes; HorizonChart.defaultProps = defaultProps; -function adaptor(slice, payload) { - const { selector, formData } = slice; - const element = document.querySelector(selector); - const { - horizon_color_scale: colorScale, - series_height: seriesHeight, - } = formData; - - ReactDOM.render( - , - element, - ); -} - -export default adaptor; +export default HorizonChart; diff --git a/superset/assets/src/visualizations/HorizonRow.jsx b/superset/assets/src/visualizations/Horizon/HorizonRow.jsx similarity index 100% rename from superset/assets/src/visualizations/HorizonRow.jsx rename to superset/assets/src/visualizations/Horizon/HorizonRow.jsx diff --git a/superset/assets/src/visualizations/Horizon/adaptor.jsx b/superset/assets/src/visualizations/Horizon/adaptor.jsx new file mode 100644 index 0000000000000..53b08a83ee8a1 --- /dev/null +++ b/superset/assets/src/visualizations/Horizon/adaptor.jsx @@ -0,0 +1,5 @@ +import createAdaptor from '../../utils/createAdaptor'; +import Component from './HorizonChart'; +import transformProps from './transformProps'; + +export default createAdaptor(Component, transformProps); diff --git a/superset/assets/src/visualizations/Horizon/transformProps.js b/superset/assets/src/visualizations/Horizon/transformProps.js new file mode 100644 index 0000000000000..b5838c2f96954 --- /dev/null +++ b/superset/assets/src/visualizations/Horizon/transformProps.js @@ -0,0 +1,13 @@ +export default function transformProps(basicChartInput) { + const { formData, payload } = basicChartInput; + const { + horizonColorScale, + seriesHeight, + } = formData; + + return { + data: payload.data, + seriesHeight: parseInt(seriesHeight, 10), + colorScale: horizonColorScale, + }; +} diff --git a/superset/assets/src/visualizations/index.js b/superset/assets/src/visualizations/index.js index b0d7710c2091e..01b72dd537872 100644 --- a/superset/assets/src/visualizations/index.js +++ b/superset/assets/src/visualizations/index.js @@ -83,7 +83,7 @@ const vizMap = { [VIZ_TYPES.heatmap]: () => loadVis(import(/* webpackChunkName: "heatmap" */ './Heatmap/adaptor.jsx')), [VIZ_TYPES.histogram]: () => loadVis(import(/* webpackChunkName: "histogram" */ './Histogram/adaptor.jsx')), - [VIZ_TYPES.horizon]: () => loadVis(import(/* webpackChunkName: "horizon" */ './HorizonChart.jsx')), + [VIZ_TYPES.horizon]: () => loadVis(import(/* webpackChunkName: "horizon" */ './Horizon/adaptor.jsx')), [VIZ_TYPES.iframe]: () => loadVis(import(/* webpackChunkName: "iframe" */ './iframe.js')), [VIZ_TYPES.line]: loadNvd3, [VIZ_TYPES.line_multi]: () => From a3d03e7674d0e00d031ac12197f44e48a1fe1f65 Mon Sep 17 00:00:00 2001 From: Krist Wongsuphasawat Date: Fri, 21 Sep 2018 14:36:44 -0700 Subject: [PATCH 08/22] migrate parallel coordinates --- .../ParallelCoordinates.css} | 0 .../ParallelCoordinates.js} | 42 ++++--------------- .../ReactParallelCoordinates.js | 4 ++ .../ParallelCoordinates/adaptor.jsx | 5 +++ .../ParallelCoordinates/transformProps.js | 23 ++++++++++ superset/assets/src/visualizations/index.js | 2 +- 6 files changed, 40 insertions(+), 36 deletions(-) rename superset/assets/src/visualizations/{parallel_coordinates.css => ParallelCoordinates/ParallelCoordinates.css} (100%) rename superset/assets/src/visualizations/{parallel_coordinates.js => ParallelCoordinates/ParallelCoordinates.js} (68%) create mode 100644 superset/assets/src/visualizations/ParallelCoordinates/ReactParallelCoordinates.js create mode 100644 superset/assets/src/visualizations/ParallelCoordinates/adaptor.jsx create mode 100644 superset/assets/src/visualizations/ParallelCoordinates/transformProps.js diff --git a/superset/assets/src/visualizations/parallel_coordinates.css b/superset/assets/src/visualizations/ParallelCoordinates/ParallelCoordinates.css similarity index 100% rename from superset/assets/src/visualizations/parallel_coordinates.css rename to superset/assets/src/visualizations/ParallelCoordinates/ParallelCoordinates.css diff --git a/superset/assets/src/visualizations/parallel_coordinates.js b/superset/assets/src/visualizations/ParallelCoordinates/ParallelCoordinates.js similarity index 68% rename from superset/assets/src/visualizations/parallel_coordinates.js rename to superset/assets/src/visualizations/ParallelCoordinates/ParallelCoordinates.js index 7d454e10e8568..d52d08de66181 100644 --- a/superset/assets/src/visualizations/parallel_coordinates.js +++ b/superset/assets/src/visualizations/ParallelCoordinates/ParallelCoordinates.js @@ -1,10 +1,10 @@ import d3 from 'd3'; import PropTypes from 'prop-types'; -import { colorScalerFactory } from '../modules/colors'; -import parcoords from '../../vendor/parallel_coordinates/d3.parcoords'; -import divgrid from '../../vendor/parallel_coordinates/divgrid'; -import '../../vendor/parallel_coordinates/d3.parcoords.css'; -import './parallel_coordinates.css'; +import { colorScalerFactory } from '../../modules/colors'; +import parcoords from '../../../vendor/parallel_coordinates/d3.parcoords'; +import divgrid from '../../../vendor/parallel_coordinates/divgrid'; +import '../../../vendor/parallel_coordinates/d3.parcoords.css'; +import './ParallelCoordinates.css'; const propTypes = { // Standard tabular data [{ fieldName1: value1, fieldName2: value2 }] @@ -20,8 +20,6 @@ const propTypes = { }; function ParallelCoordinates(element, props) { - PropTypes.checkPropTypes(propTypes, props, 'prop', 'ParallelCoordinates'); - const { data, width, @@ -98,33 +96,7 @@ function ParallelCoordinates(element, props) { } } +ParallelCoordinates.displayName = 'ParallelCoordinates'; ParallelCoordinates.propTypes = propTypes; -function adaptor(slice, payload) { - const { selector, formData } = slice; - const { - include_series: includeSeries, - linear_color_scheme: linearColorScheme, - metrics, - secondary_metric: secondaryMetric, - series, - show_datatable: showDatatable, - } = formData; - const element = document.querySelector(selector); - - return ParallelCoordinates(element, { - data: payload.data, - width: slice.width(), - height: slice.height(), - includeSeries, - linearColorScheme, - metrics: metrics.map(m => m.label || m), - colorMetric: secondaryMetric && secondaryMetric.label - ? secondaryMetric.label - : secondaryMetric, - series, - showDatatable, - }); -} - -export default adaptor; +export default ParallelCoordinates; diff --git a/superset/assets/src/visualizations/ParallelCoordinates/ReactParallelCoordinates.js b/superset/assets/src/visualizations/ParallelCoordinates/ReactParallelCoordinates.js new file mode 100644 index 0000000000000..b0236ca0f782b --- /dev/null +++ b/superset/assets/src/visualizations/ParallelCoordinates/ReactParallelCoordinates.js @@ -0,0 +1,4 @@ +import reactify from '../../utils/reactify'; +import Component from './ParallelCoordinates'; + +export default reactify(Component); diff --git a/superset/assets/src/visualizations/ParallelCoordinates/adaptor.jsx b/superset/assets/src/visualizations/ParallelCoordinates/adaptor.jsx new file mode 100644 index 0000000000000..d4c9be9f462c5 --- /dev/null +++ b/superset/assets/src/visualizations/ParallelCoordinates/adaptor.jsx @@ -0,0 +1,5 @@ +import createAdaptor from '../../utils/createAdaptor'; +import Component from './ReactParallelCoordinates'; +import transformProps from './transformProps'; + +export default createAdaptor(Component, transformProps); diff --git a/superset/assets/src/visualizations/ParallelCoordinates/transformProps.js b/superset/assets/src/visualizations/ParallelCoordinates/transformProps.js new file mode 100644 index 0000000000000..6f5c7c4b61764 --- /dev/null +++ b/superset/assets/src/visualizations/ParallelCoordinates/transformProps.js @@ -0,0 +1,23 @@ +export default function transformProps(basicChartInput) { + const { formData, payload } = basicChartInput; + const { + includeSeries, + linearColorScheme, + metrics, + secondaryMetric, + series, + showDatatable, + } = formData; + + return { + data: payload.data, + includeSeries, + linearColorScheme, + metrics: metrics.map(m => m.label || m), + colorMetric: secondaryMetric && secondaryMetric.label + ? secondaryMetric.label + : secondaryMetric, + series, + showDatatable, + }; +} diff --git a/superset/assets/src/visualizations/index.js b/superset/assets/src/visualizations/index.js index 01b72dd537872..7ed727f802a0e 100644 --- a/superset/assets/src/visualizations/index.js +++ b/superset/assets/src/visualizations/index.js @@ -92,7 +92,7 @@ const vizMap = { [VIZ_TYPES.mapbox]: () => loadVis(import(/* webpackChunkName: "mapbox" */ './MapBox/MapBox.jsx')), [VIZ_TYPES.markup]: () => loadVis(import(/* webpackChunkName: "markup" */ './markup.js')), [VIZ_TYPES.para]: () => - loadVis(import(/* webpackChunkName: "parallel_coordinates" */ './parallel_coordinates.js')), + loadVis(import(/* webpackChunkName: "parallel_coordinates" */ './ParallelCoordinates/adaptor.jsx')), [VIZ_TYPES.pie]: loadNvd3, [VIZ_TYPES.pivot_table]: () => loadVis(import(/* webpackChunkName: "pivot_table" */ './pivot_table.js')), From 28fc7c8d7f01f020de0ec4802c7fbb89646fd69a Mon Sep 17 00:00:00 2001 From: Krist Wongsuphasawat Date: Fri, 21 Sep 2018 14:41:36 -0700 Subject: [PATCH 09/22] migrate partition --- .../Partition.css} | 0 .../{partition.js => Partition/Partition.js} | 47 ++----------------- .../Partition/ReactPartition.js | 4 ++ .../src/visualizations/Partition/adaptor.jsx | 5 ++ .../Partition/transformProps.js | 32 +++++++++++++ superset/assets/src/visualizations/index.js | 2 +- 6 files changed, 47 insertions(+), 43 deletions(-) rename superset/assets/src/visualizations/{partition.css => Partition/Partition.css} (100%) rename superset/assets/src/visualizations/{partition.js => Partition/Partition.js} (89%) create mode 100644 superset/assets/src/visualizations/Partition/ReactPartition.js create mode 100644 superset/assets/src/visualizations/Partition/adaptor.jsx create mode 100644 superset/assets/src/visualizations/Partition/transformProps.js diff --git a/superset/assets/src/visualizations/partition.css b/superset/assets/src/visualizations/Partition/Partition.css similarity index 100% rename from superset/assets/src/visualizations/partition.css rename to superset/assets/src/visualizations/Partition/Partition.css diff --git a/superset/assets/src/visualizations/partition.js b/superset/assets/src/visualizations/Partition/Partition.js similarity index 89% rename from superset/assets/src/visualizations/partition.js rename to superset/assets/src/visualizations/Partition/Partition.js index e70a1eece7823..0a561d1787718 100644 --- a/superset/assets/src/visualizations/partition.js +++ b/superset/assets/src/visualizations/Partition/Partition.js @@ -2,9 +2,9 @@ import d3 from 'd3'; import PropTypes from 'prop-types'; import { hierarchy } from 'd3-hierarchy'; -import { getScale } from '../modules/CategoricalColorNamespace'; -import { d3TimeFormatPreset } from '../modules/utils'; -import './partition.css'; +import { getScale } from '../../modules/CategoricalColorNamespace'; +import { d3TimeFormatPreset } from '../../modules/utils'; +import './Partition.css'; // Compute dx, dy, x, y for each node and // return an array of nodes in breadth-first order @@ -71,8 +71,6 @@ const propTypes = { // This vis is based on // http://mbostock.github.io/d3/talk/20111018/partition.html function Icicle(element, props) { - PropTypes.checkPropTypes(propTypes, props, 'prop', 'Icicle'); - const { width, height, @@ -374,42 +372,7 @@ function Icicle(element, props) { } } +Icicle.displayName = 'Icicle'; Icicle.propTypes = propTypes; -function adaptor(slice, payload) { - const { selector, formData, datasource } = slice; - const { - color_scheme: colorScheme, - date_time_format: dateTimeFormat, - equal_date_size: equalDateSize, - groupby: groupBy, - log_scale: useLogScale, - metrics, - number_format: numberFormat, - partition_limit: partitionLimit, - partition_threshold: partitionThreshold, - rich_tooltip: useRichTooltip, - time_series_option: timeSeriesOption, - } = formData; - const { verbose_map: verboseMap } = datasource; - const element = document.querySelector(selector); - - return Icicle(element, { - data: payload.data, - width: slice.width(), - height: slice.height(), - colorScheme, - dateTimeFormat, - equalDateSize, - groupBy: groupBy.map(g => verboseMap[g] || g), - useLogScale, - metrics, - numberFormat, - partitionLimit: partitionLimit && parseInt(partitionLimit, 10), - partitionThreshold: partitionThreshold && parseInt(partitionThreshold, 10), - useRichTooltip, - timeSeriesOption, - }); -} - -export default adaptor; +export default Icicle; diff --git a/superset/assets/src/visualizations/Partition/ReactPartition.js b/superset/assets/src/visualizations/Partition/ReactPartition.js new file mode 100644 index 0000000000000..42785b499b2cb --- /dev/null +++ b/superset/assets/src/visualizations/Partition/ReactPartition.js @@ -0,0 +1,4 @@ +import reactify from '../../utils/reactify'; +import Component from './Partition'; + +export default reactify(Component); diff --git a/superset/assets/src/visualizations/Partition/adaptor.jsx b/superset/assets/src/visualizations/Partition/adaptor.jsx new file mode 100644 index 0000000000000..9c279a216f6e4 --- /dev/null +++ b/superset/assets/src/visualizations/Partition/adaptor.jsx @@ -0,0 +1,5 @@ +import createAdaptor from '../../utils/createAdaptor'; +import Component from './ReactPartition'; +import transformProps from './transformProps'; + +export default createAdaptor(Component, transformProps); diff --git a/superset/assets/src/visualizations/Partition/transformProps.js b/superset/assets/src/visualizations/Partition/transformProps.js new file mode 100644 index 0000000000000..8d88890f43272 --- /dev/null +++ b/superset/assets/src/visualizations/Partition/transformProps.js @@ -0,0 +1,32 @@ +export default function transformProps(basicChartInput) { + const { datasource, formData, payload } = basicChartInput; + const { + colorScheme, + dateTimeFormat, + equalDateSize, + groupby: groupBy, + logScale, + metrics, + numberFormat, + partitionLimit, + partitionThreshold, + richTooltip, + timeSeriesOption, + } = formData; + const { verboseMap } = datasource; + + return { + data: payload.data, + colorScheme, + dateTimeFormat, + equalDateSize, + groupBy: groupBy.map(g => verboseMap[g] || g), + metrics, + numberFormat, + partitionLimit: partitionLimit && parseInt(partitionLimit, 10), + partitionThreshold: partitionThreshold && parseInt(partitionThreshold, 10), + timeSeriesOption, + useLogScale: logScale, + useRichTooltip: richTooltip, + }; +} diff --git a/superset/assets/src/visualizations/index.js b/superset/assets/src/visualizations/index.js index 7ed727f802a0e..f4c32e3fcad7a 100644 --- a/superset/assets/src/visualizations/index.js +++ b/superset/assets/src/visualizations/index.js @@ -115,7 +115,7 @@ const vizMap = { [VIZ_TYPES.paired_ttest]: () => loadVis(import(/* webpackChunkName: "paired_ttest" */ './PairedTTest/PairedTTest.jsx')), [VIZ_TYPES.partition]: () => - loadVis(import(/* webpackChunkName: "partition" */ './partition.js')), + loadVis(import(/* webpackChunkName: "partition" */ './Partition/adaptor.jsx')), [VIZ_TYPES.deck_scatter]: () => loadVis(import(/* webpackChunkName: "deckgl/layers/scatter" */ './deckgl/layers/scatter.jsx')), [VIZ_TYPES.deck_screengrid]: () => From 11bea487d76eb17ad36d33a1236082e314915bf3 Mon Sep 17 00:00:00 2001 From: Krist Wongsuphasawat Date: Fri, 21 Sep 2018 14:47:43 -0700 Subject: [PATCH 10/22] migrate pivot table --- .../PivotTable.css} | 0 .../PivotTable.js} | 32 +++---------------- .../PivotTable/ReactPivotTable.js | 4 +++ .../src/visualizations/PivotTable/adaptor.jsx | 5 +++ .../PivotTable/transformProps.js | 19 +++++++++++ superset/assets/src/visualizations/index.js | 2 +- 6 files changed, 34 insertions(+), 28 deletions(-) rename superset/assets/src/visualizations/{pivot_table.css => PivotTable/PivotTable.css} (100%) rename superset/assets/src/visualizations/{pivot_table.js => PivotTable/PivotTable.js} (80%) create mode 100644 superset/assets/src/visualizations/PivotTable/ReactPivotTable.js create mode 100644 superset/assets/src/visualizations/PivotTable/adaptor.jsx create mode 100644 superset/assets/src/visualizations/PivotTable/transformProps.js diff --git a/superset/assets/src/visualizations/pivot_table.css b/superset/assets/src/visualizations/PivotTable/PivotTable.css similarity index 100% rename from superset/assets/src/visualizations/pivot_table.css rename to superset/assets/src/visualizations/PivotTable/PivotTable.css diff --git a/superset/assets/src/visualizations/pivot_table.js b/superset/assets/src/visualizations/PivotTable/PivotTable.js similarity index 80% rename from superset/assets/src/visualizations/pivot_table.js rename to superset/assets/src/visualizations/PivotTable/PivotTable.js index 2d8c6fb4ff132..cc74279a48308 100644 --- a/superset/assets/src/visualizations/pivot_table.js +++ b/superset/assets/src/visualizations/PivotTable/PivotTable.js @@ -2,8 +2,8 @@ import dt from 'datatables.net-bs'; import 'datatables.net-bs/css/dataTables.bootstrap.css'; import $ from 'jquery'; import PropTypes from 'prop-types'; -import { d3format, fixDataTableBodyHeight } from '../modules/utils'; -import './pivot_table.css'; +import { d3format, fixDataTableBodyHeight } from '../../modules/utils'; +import './PivotTable.css'; dt(window, $); @@ -24,8 +24,6 @@ const propTypes = { }; function PivotTable(element, props) { - PropTypes.checkPropTypes(propTypes, props, 'prop', 'PivotTable'); - const { data, height, @@ -92,27 +90,7 @@ function PivotTable(element, props) { } } -function adaptor(slice, payload) { - const { selector, formData, datasource } = slice; - const { - groupby: groupBy, - number_format: numberFormat, - } = formData; - const { - column_formats: columnFormats, - verbose_map: verboseMap, - } = datasource; - const element = document.querySelector(selector); - - return PivotTable(element, { - data: payload.data, - height: slice.height(), - columnFormats, - groupBy, - numberFormat, - verboseMap, - }); -} - -export default adaptor; +PivotTable.displayName = 'PivotTable'; +PivotTable.propTypes = propTypes; +export default PivotTable; diff --git a/superset/assets/src/visualizations/PivotTable/ReactPivotTable.js b/superset/assets/src/visualizations/PivotTable/ReactPivotTable.js new file mode 100644 index 0000000000000..9afda850119e8 --- /dev/null +++ b/superset/assets/src/visualizations/PivotTable/ReactPivotTable.js @@ -0,0 +1,4 @@ +import reactify from '../../utils/reactify'; +import Component from './PivotTable'; + +export default reactify(Component); diff --git a/superset/assets/src/visualizations/PivotTable/adaptor.jsx b/superset/assets/src/visualizations/PivotTable/adaptor.jsx new file mode 100644 index 0000000000000..4a23926f75f20 --- /dev/null +++ b/superset/assets/src/visualizations/PivotTable/adaptor.jsx @@ -0,0 +1,5 @@ +import createAdaptor from '../../utils/createAdaptor'; +import Component from './ReactPivotTable'; +import transformProps from './transformProps'; + +export default createAdaptor(Component, transformProps); diff --git a/superset/assets/src/visualizations/PivotTable/transformProps.js b/superset/assets/src/visualizations/PivotTable/transformProps.js new file mode 100644 index 0000000000000..45da7e7ded493 --- /dev/null +++ b/superset/assets/src/visualizations/PivotTable/transformProps.js @@ -0,0 +1,19 @@ +export default function transformProps(basicChartInput) { + const { datasource, formData, payload } = basicChartInput; + const { + groupby: groupBy, + numberFormat, + } = formData; + const { + columnFormats, + verboseMap, + } = datasource; + + return { + data: payload.data, + columnFormats, + groupBy, + numberFormat, + verboseMap, + }; +} diff --git a/superset/assets/src/visualizations/index.js b/superset/assets/src/visualizations/index.js index f4c32e3fcad7a..e89751885837b 100644 --- a/superset/assets/src/visualizations/index.js +++ b/superset/assets/src/visualizations/index.js @@ -95,7 +95,7 @@ const vizMap = { loadVis(import(/* webpackChunkName: "parallel_coordinates" */ './ParallelCoordinates/adaptor.jsx')), [VIZ_TYPES.pie]: loadNvd3, [VIZ_TYPES.pivot_table]: () => - loadVis(import(/* webpackChunkName: "pivot_table" */ './pivot_table.js')), + loadVis(import(/* webpackChunkName: "pivot_table" */ './PivotTable/adaptor.jsx')), [VIZ_TYPES.sankey]: () => loadVis(import(/* webpackChunkName: "sankey" */ './sankey.js')), [VIZ_TYPES.separator]: () => loadVis(import(/* webpackChunkName: "markup" */ './markup.js')), [VIZ_TYPES.sunburst]: () => loadVis(import(/* webpackChunkName: "sunburst" */ './sunburst.js')), From cfb0b902f20c1a695684cb79db3c73bbe0ab5d61 Mon Sep 17 00:00:00 2001 From: Krist Wongsuphasawat Date: Fri, 21 Sep 2018 14:51:43 -0700 Subject: [PATCH 11/22] migrate rose --- .../src/visualizations/Rose/ReactRose.js | 4 +++ .../{rose.css => Rose/Rose.css} | 0 .../visualizations/{rose.js => Rose/Rose.js} | 34 +++---------------- .../src/visualizations/Rose/adaptor.jsx | 5 +++ .../src/visualizations/Rose/transformProps.js | 19 +++++++++++ superset/assets/src/visualizations/index.js | 2 +- 6 files changed, 34 insertions(+), 30 deletions(-) create mode 100644 superset/assets/src/visualizations/Rose/ReactRose.js rename superset/assets/src/visualizations/{rose.css => Rose/Rose.css} (100%) rename superset/assets/src/visualizations/{rose.js => Rose/Rose.js} (95%) create mode 100644 superset/assets/src/visualizations/Rose/adaptor.jsx create mode 100644 superset/assets/src/visualizations/Rose/transformProps.js diff --git a/superset/assets/src/visualizations/Rose/ReactRose.js b/superset/assets/src/visualizations/Rose/ReactRose.js new file mode 100644 index 0000000000000..d5cad0813b948 --- /dev/null +++ b/superset/assets/src/visualizations/Rose/ReactRose.js @@ -0,0 +1,4 @@ +import reactify from '../../utils/reactify'; +import Component from './Rose'; + +export default reactify(Component); diff --git a/superset/assets/src/visualizations/rose.css b/superset/assets/src/visualizations/Rose/Rose.css similarity index 100% rename from superset/assets/src/visualizations/rose.css rename to superset/assets/src/visualizations/Rose/Rose.css diff --git a/superset/assets/src/visualizations/rose.js b/superset/assets/src/visualizations/Rose/Rose.js similarity index 95% rename from superset/assets/src/visualizations/rose.js rename to superset/assets/src/visualizations/Rose/Rose.js index 62df302020d0d..3c76d8fbf9dad 100644 --- a/superset/assets/src/visualizations/rose.js +++ b/superset/assets/src/visualizations/Rose/Rose.js @@ -2,9 +2,9 @@ import d3 from 'd3'; import PropTypes from 'prop-types'; import nv from 'nvd3'; -import { getScale } from '../modules/CategoricalColorNamespace'; -import { d3TimeFormatPreset } from '../modules/utils'; -import './rose.css'; +import { getScale } from '../../modules/CategoricalColorNamespace'; +import { d3TimeFormatPreset } from '../../modules/utils'; +import './Rose.css'; const propTypes = { // Data is an object hashed by numeric value, perhaps timestamp @@ -39,8 +39,6 @@ function sortValues(a, b) { } function Rose(element, props) { - PropTypes.checkPropTypes(propTypes, props, 'prop', 'Rose'); - const { data, width, @@ -563,29 +561,7 @@ function Rose(element, props) { }); } +Rose.displayName = 'Rose'; Rose.propTypes = propTypes; -function adaptor(slice, payload) { - const { selector, formData } = slice; - const { - color_scheme: colorScheme, - date_time_format: dateTimeFormat, - number_format: numberFormat, - rich_tooltip: useRichTooltip, - rose_area_proportion: useAreaProportions, - } = formData; - const element = document.querySelector(selector); - - return Rose(element, { - data: payload.data, - width: slice.width(), - height: slice.height(), - colorScheme, - dateTimeFormat, - numberFormat, - useRichTooltip, - useAreaProportions, - }); -} - -export default adaptor; +export default Rose; diff --git a/superset/assets/src/visualizations/Rose/adaptor.jsx b/superset/assets/src/visualizations/Rose/adaptor.jsx new file mode 100644 index 0000000000000..8819150e01df9 --- /dev/null +++ b/superset/assets/src/visualizations/Rose/adaptor.jsx @@ -0,0 +1,5 @@ +import createAdaptor from '../../utils/createAdaptor'; +import Component from './ReactRose'; +import transformProps from './transformProps'; + +export default createAdaptor(Component, transformProps); diff --git a/superset/assets/src/visualizations/Rose/transformProps.js b/superset/assets/src/visualizations/Rose/transformProps.js new file mode 100644 index 0000000000000..afc09eab2162c --- /dev/null +++ b/superset/assets/src/visualizations/Rose/transformProps.js @@ -0,0 +1,19 @@ +export default function transformProps(basicChartInput) { + const { formData, payload } = basicChartInput; + const { + colorScheme, + dateTimeFormat, + numberFormat, + richTooltip, + roseAreaProportion, + } = formData; + + return { + data: payload.data, + colorScheme, + dateTimeFormat, + numberFormat, + useAreaProportions: roseAreaProportion, + useRichTooltip: richTooltip, + }; +} diff --git a/superset/assets/src/visualizations/index.js b/superset/assets/src/visualizations/index.js index e89751885837b..fc4f6a5b9a35c 100644 --- a/superset/assets/src/visualizations/index.js +++ b/superset/assets/src/visualizations/index.js @@ -136,7 +136,7 @@ const vizMap = { loadVis(import(/* webpackChunkName: "deckgl/layers/polygon" */ './deckgl/layers/polygon.jsx')), [VIZ_TYPES.deck_multi]: () => loadVis(import(/* webpackChunkName: "deckgl/multi" */ './deckgl/multi.jsx')), - [VIZ_TYPES.rose]: () => loadVis(import(/* webpackChunkName: "rose" */ './rose.js')), + [VIZ_TYPES.rose]: () => loadVis(import(/* webpackChunkName: "rose" */ './Rose/adaptor.jsx')), }; export default vizMap; From 33efef89d50c702e94c6cbb2052af364891fcaba Mon Sep 17 00:00:00 2001 From: Krist Wongsuphasawat Date: Fri, 21 Sep 2018 14:52:18 -0700 Subject: [PATCH 12/22] remove react-dom --- superset/assets/src/visualizations/Horizon/HorizonChart.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/superset/assets/src/visualizations/Horizon/HorizonChart.jsx b/superset/assets/src/visualizations/Horizon/HorizonChart.jsx index 0e5b024a1e92b..1bc1e055604a4 100644 --- a/superset/assets/src/visualizations/Horizon/HorizonChart.jsx +++ b/superset/assets/src/visualizations/Horizon/HorizonChart.jsx @@ -1,5 +1,4 @@ import React from 'react'; -import ReactDOM from 'react-dom'; import PropTypes from 'prop-types'; import d3 from 'd3'; import HorizonRow, { DEFAULT_COLORS } from './HorizonRow'; From 371d144cc0954c9355e6c57cdc081a7f52f2f8d2 Mon Sep 17 00:00:00 2001 From: Krist Wongsuphasawat Date: Fri, 21 Sep 2018 14:55:40 -0700 Subject: [PATCH 13/22] migrate Sankey --- .../src/visualizations/Sankey/ReactSankey.js | 4 ++++ .../{sankey.css => Sankey/Sankey.css} | 0 .../{sankey.js => Sankey/Sankey.js} | 21 ++++--------------- .../src/visualizations/Sankey/adaptor.jsx | 5 +++++ .../visualizations/Sankey/transformProps.js | 9 ++++++++ superset/assets/src/visualizations/index.js | 2 +- 6 files changed, 23 insertions(+), 18 deletions(-) create mode 100644 superset/assets/src/visualizations/Sankey/ReactSankey.js rename superset/assets/src/visualizations/{sankey.css => Sankey/Sankey.css} (100%) rename superset/assets/src/visualizations/{sankey.js => Sankey/Sankey.js} (90%) create mode 100644 superset/assets/src/visualizations/Sankey/adaptor.jsx create mode 100644 superset/assets/src/visualizations/Sankey/transformProps.js diff --git a/superset/assets/src/visualizations/Sankey/ReactSankey.js b/superset/assets/src/visualizations/Sankey/ReactSankey.js new file mode 100644 index 0000000000000..444f720d3e955 --- /dev/null +++ b/superset/assets/src/visualizations/Sankey/ReactSankey.js @@ -0,0 +1,4 @@ +import reactify from '../../utils/reactify'; +import Component from './Sankey'; + +export default reactify(Component); diff --git a/superset/assets/src/visualizations/sankey.css b/superset/assets/src/visualizations/Sankey/Sankey.css similarity index 100% rename from superset/assets/src/visualizations/sankey.css rename to superset/assets/src/visualizations/Sankey/Sankey.css diff --git a/superset/assets/src/visualizations/sankey.js b/superset/assets/src/visualizations/Sankey/Sankey.js similarity index 90% rename from superset/assets/src/visualizations/sankey.js rename to superset/assets/src/visualizations/Sankey/Sankey.js index 2509a50db6fc3..0efca777228ca 100644 --- a/superset/assets/src/visualizations/sankey.js +++ b/superset/assets/src/visualizations/Sankey/Sankey.js @@ -2,8 +2,8 @@ import d3 from 'd3'; import PropTypes from 'prop-types'; import { sankey as d3Sankey } from 'd3-sankey'; -import { getScale } from '../modules/CategoricalColorNamespace'; -import './sankey.css'; +import { getScale } from '../../modules/CategoricalColorNamespace'; +import './Sankey.css'; const propTypes = { data: PropTypes.arrayOf(PropTypes.shape({ @@ -19,8 +19,6 @@ const propTypes = { const formatNumber = d3.format(',.2f'); function Sankey(element, props) { - PropTypes.checkPropTypes(propTypes, props, 'prop', 'Sankey'); - const { data, width, @@ -174,19 +172,8 @@ function Sankey(element, props) { .attr('text-anchor', 'start'); } +Sankey.displayName = 'Sankey'; Sankey.propTypes = propTypes; -function adaptor(slice, payload) { - const { selector, formData } = slice; - const { color_scheme: colorScheme } = formData; - const element = document.querySelector(selector); - - return Sankey(element, { - data: payload.data, - width: slice.width(), - height: slice.height(), - colorScheme, - }); -} +export default Sankey; -export default adaptor; diff --git a/superset/assets/src/visualizations/Sankey/adaptor.jsx b/superset/assets/src/visualizations/Sankey/adaptor.jsx new file mode 100644 index 0000000000000..c1f36beb2090d --- /dev/null +++ b/superset/assets/src/visualizations/Sankey/adaptor.jsx @@ -0,0 +1,5 @@ +import createAdaptor from '../../utils/createAdaptor'; +import Component from './ReactSankey'; +import transformProps from './transformProps'; + +export default createAdaptor(Component, transformProps); diff --git a/superset/assets/src/visualizations/Sankey/transformProps.js b/superset/assets/src/visualizations/Sankey/transformProps.js new file mode 100644 index 0000000000000..4d354b2ef333e --- /dev/null +++ b/superset/assets/src/visualizations/Sankey/transformProps.js @@ -0,0 +1,9 @@ +export default function transformProps(basicChartInput) { + const { formData, payload } = basicChartInput; + const { colorScheme } = formData; + + return { + data: payload.data, + colorScheme, + }; +} diff --git a/superset/assets/src/visualizations/index.js b/superset/assets/src/visualizations/index.js index fc4f6a5b9a35c..9f90ad349aee0 100644 --- a/superset/assets/src/visualizations/index.js +++ b/superset/assets/src/visualizations/index.js @@ -96,7 +96,7 @@ const vizMap = { [VIZ_TYPES.pie]: loadNvd3, [VIZ_TYPES.pivot_table]: () => loadVis(import(/* webpackChunkName: "pivot_table" */ './PivotTable/adaptor.jsx')), - [VIZ_TYPES.sankey]: () => loadVis(import(/* webpackChunkName: "sankey" */ './sankey.js')), + [VIZ_TYPES.sankey]: () => loadVis(import(/* webpackChunkName: "sankey" */ './Sankey/adaptor.jsx')), [VIZ_TYPES.separator]: () => loadVis(import(/* webpackChunkName: "markup" */ './markup.js')), [VIZ_TYPES.sunburst]: () => loadVis(import(/* webpackChunkName: "sunburst" */ './sunburst.js')), [VIZ_TYPES.table]: () => loadVis(import(/* webpackChunkName: "table" */ './table.js')), From 127d0f4a377b084a24811287043c040a60e382df Mon Sep 17 00:00:00 2001 From: Krist Wongsuphasawat Date: Fri, 21 Sep 2018 15:01:02 -0700 Subject: [PATCH 14/22] migrate sunburst --- .../visualizations/Sunburst/ReactSunburst.js | 4 +++ .../{sunburst.css => Sunburst/Sunburst.css} | 0 .../{sunburst.js => Sunburst/Sunburst.js} | 25 ++++--------------- .../src/visualizations/Sunburst/adaptor.jsx | 5 ++++ .../visualizations/Sunburst/transformProps.js | 10 ++++++++ superset/assets/src/visualizations/index.js | 2 +- 6 files changed, 25 insertions(+), 21 deletions(-) create mode 100644 superset/assets/src/visualizations/Sunburst/ReactSunburst.js rename superset/assets/src/visualizations/{sunburst.css => Sunburst/Sunburst.css} (100%) rename superset/assets/src/visualizations/{sunburst.js => Sunburst/Sunburst.js} (95%) create mode 100644 superset/assets/src/visualizations/Sunburst/adaptor.jsx create mode 100644 superset/assets/src/visualizations/Sunburst/transformProps.js diff --git a/superset/assets/src/visualizations/Sunburst/ReactSunburst.js b/superset/assets/src/visualizations/Sunburst/ReactSunburst.js new file mode 100644 index 0000000000000..960b67702e201 --- /dev/null +++ b/superset/assets/src/visualizations/Sunburst/ReactSunburst.js @@ -0,0 +1,4 @@ +import reactify from '../../utils/reactify'; +import Component from './Sunburst'; + +export default reactify(Component); diff --git a/superset/assets/src/visualizations/sunburst.css b/superset/assets/src/visualizations/Sunburst/Sunburst.css similarity index 100% rename from superset/assets/src/visualizations/sunburst.css rename to superset/assets/src/visualizations/Sunburst/Sunburst.css diff --git a/superset/assets/src/visualizations/sunburst.js b/superset/assets/src/visualizations/Sunburst/Sunburst.js similarity index 95% rename from superset/assets/src/visualizations/sunburst.js rename to superset/assets/src/visualizations/Sunburst/Sunburst.js index 7a8717311c073..bd9b56af2d7e9 100644 --- a/superset/assets/src/visualizations/sunburst.js +++ b/superset/assets/src/visualizations/Sunburst/Sunburst.js @@ -1,9 +1,9 @@ /* eslint-disable no-param-reassign */ import d3 from 'd3'; import PropTypes from 'prop-types'; -import { getScale } from '../modules/CategoricalColorNamespace'; -import { wrapSvgText } from '../modules/utils'; -import './sunburst.css'; +import { getScale } from '../../modules/CategoricalColorNamespace'; +import { wrapSvgText } from '../../modules/utils'; +import './Sunburst.css'; const propTypes = { // Each row is an array of [hierarchy-lvl1, hierarchy-lvl2, metric1, metric2] @@ -38,8 +38,6 @@ function getAncestors(node) { // Modified from http://bl.ocks.org/kerryrodden/7090426 function Sunburst(element, props) { - PropTypes.checkPropTypes(propTypes, props, 'prop', 'Sunburst'); - const container = d3.select(element); const { data, @@ -391,20 +389,7 @@ function Sunburst(element, props) { createVisualization(data); } +Sunburst.displayName = 'Sunburst'; Sunburst.propTypes = propTypes; -function adaptor(slice, payload) { - const { selector, formData } = slice; - const { color_scheme: colorScheme, metric, secondary_metric: secondaryMetric } = formData; - const element = document.querySelector(selector); - - return Sunburst(element, { - data: payload.data, - width: slice.width(), - height: slice.height(), - colorScheme, - metrics: [metric, secondaryMetric], - }); -} - -export default adaptor; +export default Sunburst; diff --git a/superset/assets/src/visualizations/Sunburst/adaptor.jsx b/superset/assets/src/visualizations/Sunburst/adaptor.jsx new file mode 100644 index 0000000000000..9c3ffaf22ad7b --- /dev/null +++ b/superset/assets/src/visualizations/Sunburst/adaptor.jsx @@ -0,0 +1,5 @@ +import createAdaptor from '../../utils/createAdaptor'; +import Component from './ReactSunburst'; +import transformProps from './transformProps'; + +export default createAdaptor(Component, transformProps); diff --git a/superset/assets/src/visualizations/Sunburst/transformProps.js b/superset/assets/src/visualizations/Sunburst/transformProps.js new file mode 100644 index 0000000000000..465bd7c34af15 --- /dev/null +++ b/superset/assets/src/visualizations/Sunburst/transformProps.js @@ -0,0 +1,10 @@ +export default function transformProps(basicChartInput) { + const { formData, payload } = basicChartInput; + const { colorScheme, metric, secondaryMetric } = formData; + + return { + data: payload.data, + colorScheme, + metrics: [metric, secondaryMetric], + }; +} diff --git a/superset/assets/src/visualizations/index.js b/superset/assets/src/visualizations/index.js index 9f90ad349aee0..cdbb94c03bbfc 100644 --- a/superset/assets/src/visualizations/index.js +++ b/superset/assets/src/visualizations/index.js @@ -98,7 +98,7 @@ const vizMap = { loadVis(import(/* webpackChunkName: "pivot_table" */ './PivotTable/adaptor.jsx')), [VIZ_TYPES.sankey]: () => loadVis(import(/* webpackChunkName: "sankey" */ './Sankey/adaptor.jsx')), [VIZ_TYPES.separator]: () => loadVis(import(/* webpackChunkName: "markup" */ './markup.js')), - [VIZ_TYPES.sunburst]: () => loadVis(import(/* webpackChunkName: "sunburst" */ './sunburst.js')), + [VIZ_TYPES.sunburst]: () => loadVis(import(/* webpackChunkName: "sunburst" */ './Sunburst/adaptor.jsx')), [VIZ_TYPES.table]: () => loadVis(import(/* webpackChunkName: "table" */ './table.js')), [VIZ_TYPES.time_table]: () => loadVis(import(/* webpackChunkName: "time_table" */ './TimeTable/TimeTable.jsx')), From 0aa0aa5bff0dac8eccc5e7a87dd32dbc541779ed Mon Sep 17 00:00:00 2001 From: Krist Wongsuphasawat Date: Fri, 21 Sep 2018 15:06:46 -0700 Subject: [PATCH 15/22] migrate table --- .../src/visualizations/Table/ReactTable.js | 4 ++ .../{table.css => Table/Table.css} | 0 .../{table.js => Table/Table.js} | 69 ++----------------- .../src/visualizations/Table/adaptor.jsx | 5 ++ .../visualizations/Table/transformProps.js | 58 ++++++++++++++++ superset/assets/src/visualizations/index.js | 2 +- .../visualizations/models/BasicChartInput.js | 4 ++ 7 files changed, 76 insertions(+), 66 deletions(-) create mode 100644 superset/assets/src/visualizations/Table/ReactTable.js rename superset/assets/src/visualizations/{table.css => Table/Table.css} (100%) rename superset/assets/src/visualizations/{table.js => Table/Table.js} (80%) create mode 100644 superset/assets/src/visualizations/Table/adaptor.jsx create mode 100644 superset/assets/src/visualizations/Table/transformProps.js diff --git a/superset/assets/src/visualizations/Table/ReactTable.js b/superset/assets/src/visualizations/Table/ReactTable.js new file mode 100644 index 0000000000000..459a48ab6f29d --- /dev/null +++ b/superset/assets/src/visualizations/Table/ReactTable.js @@ -0,0 +1,4 @@ +import reactify from '../../utils/reactify'; +import Component from './Table'; + +export default reactify(Component); diff --git a/superset/assets/src/visualizations/table.css b/superset/assets/src/visualizations/Table/Table.css similarity index 100% rename from superset/assets/src/visualizations/table.css rename to superset/assets/src/visualizations/Table/Table.css diff --git a/superset/assets/src/visualizations/table.js b/superset/assets/src/visualizations/Table/Table.js similarity index 80% rename from superset/assets/src/visualizations/table.js rename to superset/assets/src/visualizations/Table/Table.js index 2b20a7da1f37c..070a96c1ed40c 100644 --- a/superset/assets/src/visualizations/table.js +++ b/superset/assets/src/visualizations/Table/Table.js @@ -4,8 +4,8 @@ import PropTypes from 'prop-types'; import dt from 'datatables.net-bs'; import 'datatables.net-bs/css/dataTables.bootstrap.css'; import dompurify from 'dompurify'; -import { fixDataTableBodyHeight, d3TimeFormatPreset } from '../modules/utils'; -import './table.css'; +import { fixDataTableBodyHeight, d3TimeFormatPreset } from '../../modules/utils'; +import './Table.css'; dt(window, $); @@ -50,8 +50,6 @@ const formatPercent = d3.format('.3p'); function NOOP() {} function TableVis(element, props) { - PropTypes.checkPropTypes(propTypes, props, 'prop', 'TableVis'); - const { data, height, @@ -235,66 +233,7 @@ function TableVis(element, props) { datatable.draw(); } +TableVis.displayName = 'TableVis'; TableVis.propTypes = propTypes; -function adaptor(slice, payload) { - const { selector, formData, datasource } = slice; - const { - align_pn: alignPositiveNegative, - color_pn: colorPositiveNegative, - include_search: includeSearch, - metrics, - order_desc: orderDesc, - page_length: pageLength, - percent_metrics: percentMetrics, - table_filter: tableFilter, - table_timestamp_format: tableTimestampFormat, - timeseries_limit_metric: timeseriesLimitMetric, - } = formData; - const { - verbose_map: verboseMap, - column_formats: columnFormats, - } = datasource; - - const { records, columns } = payload.data; - - const processedColumns = columns.map((key) => { - let label = verboseMap[key]; - // Handle verbose names for percents - if (!label) { - if (key[0] === '%') { - const cleanedKey = key.substring(1); - label = '% ' + (verboseMap[cleanedKey] || cleanedKey); - } else { - label = key; - } - } - return { - key, - label, - format: columnFormats && columnFormats[key], - }; - }); - - const element = document.querySelector(selector); - - return TableVis(element, { - data: records, - height: slice.height(), - alignPositiveNegative, - colorPositiveNegative, - columns: processedColumns, - filters: slice.getFilters(), - includeSearch, - metrics, - onAddFilter(...args) { slice.addFilter(...args); }, - orderDesc, - pageLength: pageLength && parseInt(pageLength, 10), - percentMetrics, - tableFilter, - tableTimestampFormat, - timeseriesLimitMetric, - }); -} - -export default adaptor; +export default TableVis; diff --git a/superset/assets/src/visualizations/Table/adaptor.jsx b/superset/assets/src/visualizations/Table/adaptor.jsx new file mode 100644 index 0000000000000..7eaf61e31ef61 --- /dev/null +++ b/superset/assets/src/visualizations/Table/adaptor.jsx @@ -0,0 +1,5 @@ +import createAdaptor from '../../utils/createAdaptor'; +import Component from './ReactTable'; +import transformProps from './transformProps'; + +export default createAdaptor(Component, transformProps); diff --git a/superset/assets/src/visualizations/Table/transformProps.js b/superset/assets/src/visualizations/Table/transformProps.js new file mode 100644 index 0000000000000..381931b4d5e2b --- /dev/null +++ b/superset/assets/src/visualizations/Table/transformProps.js @@ -0,0 +1,58 @@ +export default function transformProps(basicChartInput) { + const { + datasource, + filters, + formData, + onAddFilter, + payload, + } = basicChartInput; + const { + alignPn, + colorPn, + includeSearch, + metrics, + orderDesc, + pageLength, + percentMetrics, + tableFilter, + tableTimestampFormat, + timeseriesLimitMetric, + } = formData; + const { columnFormats, verboseMap } = datasource; + const { records, columns } = payload.data; + + const processedColumns = columns.map((key) => { + let label = verboseMap[key]; + // Handle verbose names for percents + if (!label) { + if (key[0] === '%') { + const cleanedKey = key.substring(1); + label = '% ' + (verboseMap[cleanedKey] || cleanedKey); + } else { + label = key; + } + } + return { + key, + label, + format: columnFormats && columnFormats[key], + }; + }); + + return { + data: records, + alignPositiveNegative: alignPn, + colorPositiveNegative: colorPn, + columns: processedColumns, + filters, + includeSearch, + metrics, + onAddFilter, + orderDesc, + pageLength: pageLength && parseInt(pageLength, 10), + percentMetrics, + tableFilter, + tableTimestampFormat, + timeseriesLimitMetric, + }; +} diff --git a/superset/assets/src/visualizations/index.js b/superset/assets/src/visualizations/index.js index cdbb94c03bbfc..483b615ceb1ab 100644 --- a/superset/assets/src/visualizations/index.js +++ b/superset/assets/src/visualizations/index.js @@ -99,7 +99,7 @@ const vizMap = { [VIZ_TYPES.sankey]: () => loadVis(import(/* webpackChunkName: "sankey" */ './Sankey/adaptor.jsx')), [VIZ_TYPES.separator]: () => loadVis(import(/* webpackChunkName: "markup" */ './markup.js')), [VIZ_TYPES.sunburst]: () => loadVis(import(/* webpackChunkName: "sunburst" */ './Sunburst/adaptor.jsx')), - [VIZ_TYPES.table]: () => loadVis(import(/* webpackChunkName: "table" */ './table.js')), + [VIZ_TYPES.table]: () => loadVis(import(/* webpackChunkName: "table" */ './Table/adaptor.jsx')), [VIZ_TYPES.time_table]: () => loadVis(import(/* webpackChunkName: "time_table" */ './TimeTable/TimeTable.jsx')), [VIZ_TYPES.treemap]: () => loadVis(import(/* webpackChunkName: "treemap" */ './treemap.js')), diff --git a/superset/assets/src/visualizations/models/BasicChartInput.js b/superset/assets/src/visualizations/models/BasicChartInput.js index c7b5aaa196f55..302a5a7f868ae 100644 --- a/superset/assets/src/visualizations/models/BasicChartInput.js +++ b/superset/assets/src/visualizations/models/BasicChartInput.js @@ -4,7 +4,11 @@ export default class BasicChartInput { constructor(slice, payload, setControlValue) { this.annotationData = slice.annotationData; this.datasource = convertKeysToCamelCase(slice.datasource); + this.filters = slice.getFilters(); this.formData = convertKeysToCamelCase(slice.formData); + this.onAddFilter = (...args) => { + slice.addFilter(...args); + }; this.payload = payload; this.setControlValue = setControlValue; } From a512ec27d7b76a9b50564da1bd0872e554245cac Mon Sep 17 00:00:00 2001 From: Krist Wongsuphasawat Date: Fri, 21 Sep 2018 15:22:28 -0700 Subject: [PATCH 16/22] migrate treemap --- .../visualizations/Treemap/ReactTreemap.js | 4 +++ .../{treemap.css => Treemap/Treemap.css} | 0 .../{treemap.js => Treemap/Treemap.js} | 32 ++++--------------- .../src/visualizations/Treemap/adaptor.jsx | 5 +++ .../visualizations/Treemap/transformProps.js | 15 +++++++++ superset/assets/src/visualizations/index.js | 2 +- 6 files changed, 31 insertions(+), 27 deletions(-) create mode 100644 superset/assets/src/visualizations/Treemap/ReactTreemap.js rename superset/assets/src/visualizations/{treemap.css => Treemap/Treemap.css} (100%) rename superset/assets/src/visualizations/{treemap.js => Treemap/Treemap.js} (92%) create mode 100644 superset/assets/src/visualizations/Treemap/adaptor.jsx create mode 100644 superset/assets/src/visualizations/Treemap/transformProps.js diff --git a/superset/assets/src/visualizations/Treemap/ReactTreemap.js b/superset/assets/src/visualizations/Treemap/ReactTreemap.js new file mode 100644 index 0000000000000..68c980286608a --- /dev/null +++ b/superset/assets/src/visualizations/Treemap/ReactTreemap.js @@ -0,0 +1,4 @@ +import reactify from '../../utils/reactify'; +import Component from './Treemap'; + +export default reactify(Component); diff --git a/superset/assets/src/visualizations/treemap.css b/superset/assets/src/visualizations/Treemap/Treemap.css similarity index 100% rename from superset/assets/src/visualizations/treemap.css rename to superset/assets/src/visualizations/Treemap/Treemap.css diff --git a/superset/assets/src/visualizations/treemap.js b/superset/assets/src/visualizations/Treemap/Treemap.js similarity index 92% rename from superset/assets/src/visualizations/treemap.js rename to superset/assets/src/visualizations/Treemap/Treemap.js index 8ffd14055b5bf..3596357ee3b04 100644 --- a/superset/assets/src/visualizations/treemap.js +++ b/superset/assets/src/visualizations/Treemap/Treemap.js @@ -1,8 +1,8 @@ /* eslint-disable no-shadow, no-param-reassign */ import d3 from 'd3'; import PropTypes from 'prop-types'; -import { getScale } from '../modules/CategoricalColorNamespace'; -import './treemap.css'; +import { getScale } from '../../modules/CategoricalColorNamespace'; +import './Treemap.css'; // Declare PropTypes for recursive data structures // https://github.com/facebook/react/issues/5676 @@ -49,9 +49,7 @@ const DEFAULT_MARGIN = { }; /* Modified from http://bl.ocks.org/ganeshv/6a8e9ada3ab7f2d88022 */ -function treemap(element, props) { - PropTypes.checkPropTypes(propTypes, props, 'prop', 'Treemap'); - +function Treemap(element, props) { const { data, width, @@ -299,25 +297,7 @@ function treemap(element, props) { data.forEach(d => draw(d, width, eachHeight)); } -treemap.propTypes = propTypes; - -function adaptor(slice, payload) { - const { selector, formData } = slice; - const { - number_format: numberFormat, - color_scheme: colorScheme, - treemap_ratio: treemapRatio, - } = formData; - const element = document.querySelector(selector); - - return treemap(element, { - data: payload.data, - width: slice.width(), - height: slice.height(), - numberFormat, - colorScheme, - treemapRatio, - }); -} +Treemap.displayName = 'Treemap'; +Treemap.propTypes = propTypes; -export default adaptor; +export default Treemap; diff --git a/superset/assets/src/visualizations/Treemap/adaptor.jsx b/superset/assets/src/visualizations/Treemap/adaptor.jsx new file mode 100644 index 0000000000000..b763c7fa68896 --- /dev/null +++ b/superset/assets/src/visualizations/Treemap/adaptor.jsx @@ -0,0 +1,5 @@ +import createAdaptor from '../../utils/createAdaptor'; +import Component from './ReactTreemap'; +import transformProps from './transformProps'; + +export default createAdaptor(Component, transformProps); diff --git a/superset/assets/src/visualizations/Treemap/transformProps.js b/superset/assets/src/visualizations/Treemap/transformProps.js new file mode 100644 index 0000000000000..c0c3c0323482b --- /dev/null +++ b/superset/assets/src/visualizations/Treemap/transformProps.js @@ -0,0 +1,15 @@ +export default function transformProps(basicChartInput) { + const { formData, payload } = basicChartInput; + const { + colorScheme, + numberFormat, + treemapRatio, + } = formData; + + return { + data: payload.data, + colorScheme, + numberFormat, + treemapRatio, + }; +} diff --git a/superset/assets/src/visualizations/index.js b/superset/assets/src/visualizations/index.js index 483b615ceb1ab..c8599919a43c8 100644 --- a/superset/assets/src/visualizations/index.js +++ b/superset/assets/src/visualizations/index.js @@ -102,7 +102,7 @@ const vizMap = { [VIZ_TYPES.table]: () => loadVis(import(/* webpackChunkName: "table" */ './Table/adaptor.jsx')), [VIZ_TYPES.time_table]: () => loadVis(import(/* webpackChunkName: "time_table" */ './TimeTable/TimeTable.jsx')), - [VIZ_TYPES.treemap]: () => loadVis(import(/* webpackChunkName: "treemap" */ './treemap.js')), + [VIZ_TYPES.treemap]: () => loadVis(import(/* webpackChunkName: "treemap" */ './Treemap/adaptor.jsx')), [VIZ_TYPES.country_map]: () => loadVis(import(/* webpackChunkName: "country_map" */ './CountryMap/adaptor.jsx')), [VIZ_TYPES.word_cloud]: () => From b859e3d087150e6e422e0785354b8fd509be4dfc Mon Sep 17 00:00:00 2001 From: Krist Wongsuphasawat Date: Fri, 21 Sep 2018 15:34:52 -0700 Subject: [PATCH 17/22] migrate filterbox --- .../FilterBox.css} | 0 .../FilterBox.jsx} | 57 +++---------------- .../src/visualizations/FilterBox/adaptor.jsx | 5 ++ .../FilterBox/transformProps.js | 39 +++++++++++++ superset/assets/src/visualizations/index.js | 2 +- .../visualizations/models/BasicChartInput.js | 1 + 6 files changed, 55 insertions(+), 49 deletions(-) rename superset/assets/src/visualizations/{filter_box.css => FilterBox/FilterBox.css} (100%) rename superset/assets/src/visualizations/{filter_box.jsx => FilterBox/FilterBox.jsx} (81%) create mode 100644 superset/assets/src/visualizations/FilterBox/adaptor.jsx create mode 100644 superset/assets/src/visualizations/FilterBox/transformProps.js diff --git a/superset/assets/src/visualizations/filter_box.css b/superset/assets/src/visualizations/FilterBox/FilterBox.css similarity index 100% rename from superset/assets/src/visualizations/filter_box.css rename to superset/assets/src/visualizations/FilterBox/FilterBox.css diff --git a/superset/assets/src/visualizations/filter_box.jsx b/superset/assets/src/visualizations/FilterBox/FilterBox.jsx similarity index 81% rename from superset/assets/src/visualizations/filter_box.jsx rename to superset/assets/src/visualizations/FilterBox/FilterBox.jsx index 34c8d77b00dad..78822616df88d 100644 --- a/superset/assets/src/visualizations/filter_box.jsx +++ b/superset/assets/src/visualizations/FilterBox/FilterBox.jsx @@ -1,18 +1,17 @@ import React from 'react'; import PropTypes from 'prop-types'; -import ReactDOM from 'react-dom'; import VirtualizedSelect from 'react-virtualized-select'; import { Creatable } from 'react-select'; import { Button } from 'react-bootstrap'; -import DateFilterControl from '../explore/components/controls/DateFilterControl'; -import ControlRow from '../explore/components/ControlRow'; -import Control from '../explore/components/Control'; -import controls from '../explore/controls'; -import OnPasteSelect from '../components/OnPasteSelect'; -import VirtualizedRendererWrap from '../components/VirtualizedRendererWrap'; -import { t } from '../locales'; -import './filter_box.css'; +import DateFilterControl from '../../explore/components/controls/DateFilterControl'; +import ControlRow from '../../explore/components/ControlRow'; +import Control from '../../explore/components/Control'; +import controls from '../../explore/controls'; +import OnPasteSelect from '../../components/OnPasteSelect'; +import VirtualizedRendererWrap from '../../components/VirtualizedRendererWrap'; +import { t } from '../../locales'; +import './FilterBox.css'; // maps control names to their key in extra_filters const TIME_FILTER_MAP = { @@ -257,42 +256,4 @@ class FilterBox extends React.Component { FilterBox.propTypes = propTypes; FilterBox.defaultProps = defaultProps; -function adaptor(slice, payload) { - // filter box should ignore the dashboard's filters - // const url = slice.jsonEndpoint({ extraFilters: false }); - const { formData, datasource } = slice; - const { verbose_map: verboseMap } = datasource; - const { - groupby, - instant_filtering: instantFiltering, - date_filter: showDateFilter, - show_sqla_time_granularity: showSqlaTimeGrain, - show_sqla_time_column: showSqlaTimeColumn, - show_druid_time_granularity: showDruidTimeGrain, - show_druid_time_origin: showDruidTimeOrigin, - } = formData; - - const filtersFields = groupby.map(key => ({ - key, - label: verboseMap[key] || key, - })); - - ReactDOM.render( - , - document.getElementById(slice.containerId), - ); -} - -export default adaptor; +export default FilterBox; diff --git a/superset/assets/src/visualizations/FilterBox/adaptor.jsx b/superset/assets/src/visualizations/FilterBox/adaptor.jsx new file mode 100644 index 0000000000000..9d502af18dc81 --- /dev/null +++ b/superset/assets/src/visualizations/FilterBox/adaptor.jsx @@ -0,0 +1,5 @@ +import createAdaptor from '../../utils/createAdaptor'; +import Component from './FilterBox'; +import transformProps from './transformProps'; + +export default createAdaptor(Component, transformProps); diff --git a/superset/assets/src/visualizations/FilterBox/transformProps.js b/superset/assets/src/visualizations/FilterBox/transformProps.js new file mode 100644 index 0000000000000..e5077f8b7c8b1 --- /dev/null +++ b/superset/assets/src/visualizations/FilterBox/transformProps.js @@ -0,0 +1,39 @@ +export default function transformProps(basicChartInput) { + const { + datasource, + filters, + formData, + onAddFilter, + payload, + rawDatasource, + } = basicChartInput; + const { + dateFilter, + groupby, + instantFiltering, + showDruidTimeGranularity, + showDruidTimeOrigin, + showSqlaTimeColumn, + showSqlaTimeGranularity, + } = formData; + const { verboseMap } = datasource; + + const filtersFields = groupby.map(key => ({ + key, + label: verboseMap[key] || key, + })); + + return { + datasource: rawDatasource, + filtersFields, + filtersChoices: payload.data, + instantFiltering, + onChange: onAddFilter, + origSelectedValues: filters || {}, + showDateFilter: dateFilter, + showDruidTimeGrain: showDruidTimeGranularity, + showDruidTimeOrigin, + showSqlaTimeColumn, + showSqlaTimeGrain: showSqlaTimeGranularity, + }; +} diff --git a/superset/assets/src/visualizations/index.js b/superset/assets/src/visualizations/index.js index c8599919a43c8..7cb7a8cd42d9f 100644 --- a/superset/assets/src/visualizations/index.js +++ b/superset/assets/src/visualizations/index.js @@ -79,7 +79,7 @@ const vizMap = { [VIZ_TYPES.chord]: () => loadVis(import(/* webpackChunkName: "chord" */ './Chord/adaptor.jsx')), [VIZ_TYPES.dist_bar]: loadNvd3, [VIZ_TYPES.filter_box]: () => - loadVis(import(/* webpackChunkName: "filter_box" */ './filter_box.jsx')), + loadVis(import(/* webpackChunkName: "filter_box" */ './FilterBox/adaptor.jsx')), [VIZ_TYPES.heatmap]: () => loadVis(import(/* webpackChunkName: "heatmap" */ './Heatmap/adaptor.jsx')), [VIZ_TYPES.histogram]: () => loadVis(import(/* webpackChunkName: "histogram" */ './Histogram/adaptor.jsx')), diff --git a/superset/assets/src/visualizations/models/BasicChartInput.js b/superset/assets/src/visualizations/models/BasicChartInput.js index 302a5a7f868ae..73aff9553aa2e 100644 --- a/superset/assets/src/visualizations/models/BasicChartInput.js +++ b/superset/assets/src/visualizations/models/BasicChartInput.js @@ -4,6 +4,7 @@ export default class BasicChartInput { constructor(slice, payload, setControlValue) { this.annotationData = slice.annotationData; this.datasource = convertKeysToCamelCase(slice.datasource); + this.rawDatasource = slice.datasource; this.filters = slice.getFilters(); this.formData = convertKeysToCamelCase(slice.formData); this.onAddFilter = (...args) => { From cead20e5ebc467ad7d5282b8dceb601aafe0b6c4 Mon Sep 17 00:00:00 2001 From: Krist Wongsuphasawat Date: Fri, 21 Sep 2018 15:55:10 -0700 Subject: [PATCH 18/22] migrate wordcloud --- superset/assets/src/visualizations/index.js | 2 +- .../wordcloud/ReactWordCloud.js | 4 ++ .../src/visualizations/wordcloud/WordCloud.js | 46 ++----------------- .../src/visualizations/wordcloud/adaptor.jsx | 5 ++ .../wordcloud/transformProps.js | 27 +++++++++++ 5 files changed, 41 insertions(+), 43 deletions(-) create mode 100644 superset/assets/src/visualizations/wordcloud/ReactWordCloud.js create mode 100644 superset/assets/src/visualizations/wordcloud/adaptor.jsx create mode 100644 superset/assets/src/visualizations/wordcloud/transformProps.js diff --git a/superset/assets/src/visualizations/index.js b/superset/assets/src/visualizations/index.js index 7cb7a8cd42d9f..19a9919cae604 100644 --- a/superset/assets/src/visualizations/index.js +++ b/superset/assets/src/visualizations/index.js @@ -106,7 +106,7 @@ const vizMap = { [VIZ_TYPES.country_map]: () => loadVis(import(/* webpackChunkName: "country_map" */ './CountryMap/adaptor.jsx')), [VIZ_TYPES.word_cloud]: () => - loadVis(import(/* webpackChunkName: "word_cloud" */ './wordcloud/WordCloud.js')), + loadVis(import(/* webpackChunkName: "word_cloud" */ './wordcloud/adaptor.jsx')), [VIZ_TYPES.world_map]: () => loadVis(import(/* webpackChunkName: "world_map" */ './WorldMap/adaptor.jsx')), [VIZ_TYPES.dual_line]: loadNvd3, diff --git a/superset/assets/src/visualizations/wordcloud/ReactWordCloud.js b/superset/assets/src/visualizations/wordcloud/ReactWordCloud.js new file mode 100644 index 0000000000000..80d0024e3957f --- /dev/null +++ b/superset/assets/src/visualizations/wordcloud/ReactWordCloud.js @@ -0,0 +1,4 @@ +import reactify from '../../utils/reactify'; +import Component from './WordCloud'; + +export default reactify(Component); diff --git a/superset/assets/src/visualizations/wordcloud/WordCloud.js b/superset/assets/src/visualizations/wordcloud/WordCloud.js index 876626329b0ee..2b91665ee2870 100644 --- a/superset/assets/src/visualizations/wordcloud/WordCloud.js +++ b/superset/assets/src/visualizations/wordcloud/WordCloud.js @@ -21,9 +21,7 @@ const propTypes = { colorScheme: PropTypes.string, }; -function wordCloud(element, props) { - PropTypes.checkPropTypes(propTypes, props, 'prop', 'WordCloud'); - +function WordCloud(element, props) { const { data, width, @@ -78,43 +76,7 @@ function wordCloud(element, props) { layout.on('end', draw).start(); } -wordCloud.propTypes = propTypes; - -function transform(data, formData) { - const { - metric, - series, - } = formData; - - const transformedData = data.map(datum => ({ - text: datum[series], - size: datum[metric.label || metric], - })); - - return transformedData; -} - -function adaptor(slice, payload) { - const { selector, formData } = slice; - - const { - rotation, - size_to: sizeTo, - size_from: sizeFrom, - color_scheme: colorScheme, - } = formData; - const element = document.querySelector(selector); - - const data = transform(payload.data, formData); - - return wordCloud(element, { - data, - width: slice.width(), - height: slice.height(), - rotation, - sizeRange: [sizeFrom, sizeTo], - colorScheme, - }); -} +WordCloud.displayName = 'WordCloud'; +WordCloud.propTypes = propTypes; -export default adaptor; +export default WordCloud; diff --git a/superset/assets/src/visualizations/wordcloud/adaptor.jsx b/superset/assets/src/visualizations/wordcloud/adaptor.jsx new file mode 100644 index 0000000000000..cbe00ea0dc4f2 --- /dev/null +++ b/superset/assets/src/visualizations/wordcloud/adaptor.jsx @@ -0,0 +1,5 @@ +import createAdaptor from '../../utils/createAdaptor'; +import Component from './ReactWordCloud'; +import transformProps from './transformProps'; + +export default createAdaptor(Component, transformProps); diff --git a/superset/assets/src/visualizations/wordcloud/transformProps.js b/superset/assets/src/visualizations/wordcloud/transformProps.js new file mode 100644 index 0000000000000..7400a3af310fd --- /dev/null +++ b/superset/assets/src/visualizations/wordcloud/transformProps.js @@ -0,0 +1,27 @@ +function transformData(data, formData) { + const { metric, series } = formData; + + const transformedData = data.map(datum => ({ + text: datum[series], + size: datum[metric.label || metric], + })); + + return transformedData; +} + +export default function transformProps(basicChartInput) { + const { formData, payload } = basicChartInput; + const { + colorScheme, + rotation, + sizeTo, + sizeFrom, + } = formData; + + return { + data: transformData(payload.data, formData), + colorScheme, + rotation, + sizeRange: [sizeFrom, sizeTo], + }; +} From 90ff8ef8826f16cfc1a795fd1999d26b0d60380e Mon Sep 17 00:00:00 2001 From: Krist Wongsuphasawat Date: Fri, 21 Sep 2018 16:01:18 -0700 Subject: [PATCH 19/22] add paired t-test --- .../PairedTTest/PairedTTest.jsx | 27 +------------------ .../visualizations/PairedTTest/adaptor.jsx | 5 ++++ .../PairedTTest/transformProps.js | 19 +++++++++++++ superset/assets/src/visualizations/index.js | 2 +- 4 files changed, 26 insertions(+), 27 deletions(-) create mode 100644 superset/assets/src/visualizations/PairedTTest/adaptor.jsx create mode 100644 superset/assets/src/visualizations/PairedTTest/transformProps.js diff --git a/superset/assets/src/visualizations/PairedTTest/PairedTTest.jsx b/superset/assets/src/visualizations/PairedTTest/PairedTTest.jsx index 3fd9f61c25811..cc157c3e75c53 100644 --- a/superset/assets/src/visualizations/PairedTTest/PairedTTest.jsx +++ b/superset/assets/src/visualizations/PairedTTest/PairedTTest.jsx @@ -1,6 +1,5 @@ import PropTypes from 'prop-types'; -import ReactDOM from 'react-dom'; import React from 'react'; import TTestTable, { dataPropType } from './TTestTable'; import './PairedTTest.css'; @@ -56,28 +55,4 @@ class PairedTTest extends React.PureComponent { PairedTTest.propTypes = propTypes; PairedTTest.defaultProps = defaultProps; -function adaptor(slice, payload) { - const { formData, selector } = slice; - const element = document.querySelector(selector); - const { - groupby: groups, - metrics, - liftvalue_precision: liftValPrec, - pvalue_precision: pValPrec, - significance_level: alpha, - } = formData; - - ReactDOM.render( - , - element, - ); -} - -export default adaptor; +export default PairedTTest; diff --git a/superset/assets/src/visualizations/PairedTTest/adaptor.jsx b/superset/assets/src/visualizations/PairedTTest/adaptor.jsx new file mode 100644 index 0000000000000..c71b9077bc9d2 --- /dev/null +++ b/superset/assets/src/visualizations/PairedTTest/adaptor.jsx @@ -0,0 +1,5 @@ +import createAdaptor from '../../utils/createAdaptor'; +import Component from './PairedTTest'; +import transformProps from './transformProps'; + +export default createAdaptor(Component, transformProps); diff --git a/superset/assets/src/visualizations/PairedTTest/transformProps.js b/superset/assets/src/visualizations/PairedTTest/transformProps.js new file mode 100644 index 0000000000000..84abe5b1e7ae1 --- /dev/null +++ b/superset/assets/src/visualizations/PairedTTest/transformProps.js @@ -0,0 +1,19 @@ +export default function transformProps(basicChartInput) { + const { formData, payload } = basicChartInput; + const { + groupby, + liftvaluePrecision, + metrics, + pvaluePrecision, + significanceLevel, + } = formData; + + return { + data: payload.data, + alpha: significanceLevel, + groups: groupby, + liftValPrec: parseInt(liftvaluePrecision, 10), + metrics, + pValPrec: parseInt(pvaluePrecision, 10), + }; +} diff --git a/superset/assets/src/visualizations/index.js b/superset/assets/src/visualizations/index.js index 19a9919cae604..6507b97d486fc 100644 --- a/superset/assets/src/visualizations/index.js +++ b/superset/assets/src/visualizations/index.js @@ -113,7 +113,7 @@ const vizMap = { [VIZ_TYPES.event_flow]: () => loadVis(import(/* webpackChunkName: "EventFlow" */ './EventFlow.jsx')), [VIZ_TYPES.paired_ttest]: () => - loadVis(import(/* webpackChunkName: "paired_ttest" */ './PairedTTest/PairedTTest.jsx')), + loadVis(import(/* webpackChunkName: "paired_ttest" */ './PairedTTest/adaptor.jsx')), [VIZ_TYPES.partition]: () => loadVis(import(/* webpackChunkName: "partition" */ './Partition/adaptor.jsx')), [VIZ_TYPES.deck_scatter]: () => From 970eecfb9b0cfd0af3f1bd0a69d6b5a735d5d1c2 Mon Sep 17 00:00:00 2001 From: Krist Wongsuphasawat Date: Tue, 25 Sep 2018 14:45:13 -0700 Subject: [PATCH 20/22] fix unit test --- superset/assets/spec/javascripts/visualizations/table_spec.jsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/superset/assets/spec/javascripts/visualizations/table_spec.jsx b/superset/assets/spec/javascripts/visualizations/table_spec.jsx index 5252e9dd4fe49..adbbf9dee0d48 100644 --- a/superset/assets/spec/javascripts/visualizations/table_spec.jsx +++ b/superset/assets/spec/javascripts/visualizations/table_spec.jsx @@ -1,7 +1,7 @@ import { expect } from 'chai'; import $ from 'jquery'; import '../../helpers/shim'; -import tableVis from '../../../src/visualizations/table'; +import tableVis from '../../../src/visualizations/Table/adaptor'; describe('table viz', () => { const div = '
'; @@ -17,6 +17,7 @@ describe('table viz', () => { getFilters: () => ({}), removeFilter() {}, addFilter() {}, + width: () => 0, height: () => 0, }; const basePayload = { From be3234f0b29bf6d86af9b61feabbbd4c64db9244 Mon Sep 17 00:00:00 2001 From: Krist Wongsuphasawat Date: Thu, 27 Sep 2018 01:47:12 -0700 Subject: [PATCH 21/22] remove renaming --- .../assets/src/visualizations/Partition/transformProps.js | 4 ++-- .../assets/src/visualizations/PivotTable/transformProps.js | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/superset/assets/src/visualizations/Partition/transformProps.js b/superset/assets/src/visualizations/Partition/transformProps.js index 8d88890f43272..e83d24b2b96cb 100644 --- a/superset/assets/src/visualizations/Partition/transformProps.js +++ b/superset/assets/src/visualizations/Partition/transformProps.js @@ -4,7 +4,7 @@ export default function transformProps(basicChartInput) { colorScheme, dateTimeFormat, equalDateSize, - groupby: groupBy, + groupby, logScale, metrics, numberFormat, @@ -20,7 +20,7 @@ export default function transformProps(basicChartInput) { colorScheme, dateTimeFormat, equalDateSize, - groupBy: groupBy.map(g => verboseMap[g] || g), + groupBy: groupby.map(g => verboseMap[g] || g), metrics, numberFormat, partitionLimit: partitionLimit && parseInt(partitionLimit, 10), diff --git a/superset/assets/src/visualizations/PivotTable/transformProps.js b/superset/assets/src/visualizations/PivotTable/transformProps.js index 45da7e7ded493..93eb162788e30 100644 --- a/superset/assets/src/visualizations/PivotTable/transformProps.js +++ b/superset/assets/src/visualizations/PivotTable/transformProps.js @@ -1,7 +1,7 @@ export default function transformProps(basicChartInput) { const { datasource, formData, payload } = basicChartInput; const { - groupby: groupBy, + groupby, numberFormat, } = formData; const { @@ -12,7 +12,7 @@ export default function transformProps(basicChartInput) { return { data: payload.data, columnFormats, - groupBy, + groupBy: groupby, numberFormat, verboseMap, }; From 5245497ad2ad0bc9c0b88d8174eed813fb3c95d1 Mon Sep 17 00:00:00 2001 From: Krist Wongsuphasawat Date: Thu, 27 Sep 2018 11:40:18 -0700 Subject: [PATCH 22/22] rename fields --- .../assets/src/visualizations/Partition/Partition.js | 10 +++++----- .../src/visualizations/Partition/transformProps.js | 2 +- .../assets/src/visualizations/PivotTable/PivotTable.js | 6 +++--- .../src/visualizations/PivotTable/transformProps.js | 2 +- 4 files changed, 10 insertions(+), 10 deletions(-) diff --git a/superset/assets/src/visualizations/Partition/Partition.js b/superset/assets/src/visualizations/Partition/Partition.js index 0a561d1787718..9093d556d3c25 100644 --- a/superset/assets/src/visualizations/Partition/Partition.js +++ b/superset/assets/src/visualizations/Partition/Partition.js @@ -55,8 +55,7 @@ const propTypes = { colorScheme: PropTypes.string, dateTimeFormat: PropTypes.string, equalDateSize: PropTypes.bool, - groupBy: PropTypes.arrayOf(PropTypes.string), - useLogScale: PropTypes.bool, + levels: PropTypes.arrayOf(PropTypes.string), metrics: PropTypes.arrayOf(PropTypes.oneOfType([ PropTypes.string, PropTypes.object, @@ -64,8 +63,9 @@ const propTypes = { numberFormat: PropTypes.string, partitionLimit: PropTypes.number, partitionThreshold: PropTypes.number, - useRichTooltip: PropTypes.bool, timeSeriesOption: PropTypes.string, + useLogScale: PropTypes.bool, + useRichTooltip: PropTypes.bool, }; // This vis is based on @@ -78,7 +78,7 @@ function Icicle(element, props) { colorScheme, dateTimeFormat, equalDateSize, - groupBy, + levels, useLogScale = false, metrics = [], numberFormat, @@ -218,7 +218,7 @@ function Icicle(element, props) { if (hasTime && depth === 1) { return 'Date'; } - return groupBy[depth - (hasTime ? 2 : 1)]; + return levels[depth - (hasTime ? 2 : 1)]; } function getAncestors(d) { diff --git a/superset/assets/src/visualizations/Partition/transformProps.js b/superset/assets/src/visualizations/Partition/transformProps.js index e83d24b2b96cb..04ed059c2707c 100644 --- a/superset/assets/src/visualizations/Partition/transformProps.js +++ b/superset/assets/src/visualizations/Partition/transformProps.js @@ -20,7 +20,7 @@ export default function transformProps(basicChartInput) { colorScheme, dateTimeFormat, equalDateSize, - groupBy: groupby.map(g => verboseMap[g] || g), + levels: groupby.map(g => verboseMap[g] || g), metrics, numberFormat, partitionLimit: partitionLimit && parseInt(partitionLimit, 10), diff --git a/superset/assets/src/visualizations/PivotTable/PivotTable.js b/superset/assets/src/visualizations/PivotTable/PivotTable.js index cc74279a48308..71d0cfad1f7ab 100644 --- a/superset/assets/src/visualizations/PivotTable/PivotTable.js +++ b/superset/assets/src/visualizations/PivotTable/PivotTable.js @@ -18,8 +18,8 @@ const propTypes = { }), height: PropTypes.number, columnFormats: PropTypes.objectOf(PropTypes.string), - groupBy: PropTypes.arrayOf(PropTypes.string), numberFormat: PropTypes.string, + numGroups: PropTypes.number, verboseMap: PropTypes.objectOf(PropTypes.string), }; @@ -28,8 +28,8 @@ function PivotTable(element, props) { data, height, columnFormats, - groupBy, numberFormat, + numGroups, verboseMap, } = props; @@ -65,7 +65,7 @@ function PivotTable(element, props) { }); }); - if (groupBy.length === 1) { + if (numGroups === 1) { // When there is only 1 group by column, // we use the DataTable plugin to make the header fixed. // The plugin takes care of the scrolling so we don't need diff --git a/superset/assets/src/visualizations/PivotTable/transformProps.js b/superset/assets/src/visualizations/PivotTable/transformProps.js index 93eb162788e30..880cd2845df85 100644 --- a/superset/assets/src/visualizations/PivotTable/transformProps.js +++ b/superset/assets/src/visualizations/PivotTable/transformProps.js @@ -12,7 +12,7 @@ export default function transformProps(basicChartInput) { return { data: payload.data, columnFormats, - groupBy: groupby, + numGroups: groupby.length, numberFormat, verboseMap, };