diff --git a/superset/assets/spec/javascripts/visualizations/table_spec.jsx b/superset/assets/spec/javascripts/visualizations/table_spec.jsx index 5252e9dd4fe..adbbf9dee0d 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 = { 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 73% rename from superset/assets/src/visualizations/cal_heatmap.js rename to superset/assets/src/visualizations/Calendar/Calendar.js index af91dcee689..bcecb3c6d69 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(); @@ -37,8 +37,6 @@ const propTypes = { }; function Calendar(element, props) { - PropTypes.checkPropTypes(propTypes, props, 'prop', 'Calendar'); - const { data, height, @@ -124,40 +122,7 @@ function Calendar(element, props) { }); } +Calendar.displayName = 'Calendar'; 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 00000000000..349930b3ad3 --- /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 00000000000..6df23615e39 --- /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 00000000000..e97e1665f13 --- /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, + yAxisFormat, + } = formData; + + const { verboseMap } = datasource; + + return { + data: payload.data, + cellPadding, + cellRadius, + cellSize, + linearColorScheme, + showLegend, + showMetricName, + showValues, + steps, + timeFormat: xAxisTimeFormat, + valueFormat: yAxisFormat, + 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.js similarity index 82% rename from superset/assets/src/visualizations/chord.jsx rename to superset/assets/src/visualizations/Chord/Chord.js index 672a31e5495..cb5ae6dc2cd 100644 --- a/superset/assets/src/visualizations/chord.jsx +++ b/superset/assets/src/visualizations/Chord/Chord.js @@ -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,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,20 +115,7 @@ function chordVis(element, props) { }); } -chordVis.propTypes = propTypes; +Chord.displayName = 'Chord'; +Chord.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 Chord; diff --git a/superset/assets/src/visualizations/Chord/ReactChord.js b/superset/assets/src/visualizations/Chord/ReactChord.js new file mode 100644 index 00000000000..3a41d7fc7f3 --- /dev/null +++ b/superset/assets/src/visualizations/Chord/ReactChord.js @@ -0,0 +1,4 @@ +import reactify from '../../utils/reactify'; +import Component from './Chord'; + +export default reactify(Component); diff --git a/superset/assets/src/visualizations/Chord/adaptor.jsx b/superset/assets/src/visualizations/Chord/adaptor.jsx new file mode 100644 index 00000000000..ced5895770d --- /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 00000000000..f52a1dc32ef --- /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, colorScheme } = formData; + + return { + data: payload.data, + numberFormat: yAxisFormat, + colorScheme, + }; +} 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 89% rename from superset/assets/src/visualizations/country_map.js rename to superset/assets/src/visualizations/CountryMap/CountryMap.js index 92c799bff3d..52e961d4e3f 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({ @@ -19,8 +19,6 @@ const propTypes = { const maps = {}; function CountryMap(element, props) { - PropTypes.checkPropTypes(propTypes, props, 'prop', 'CountryMap'); - const { data, width, @@ -196,25 +194,7 @@ function CountryMap(element, props) { } +CountryMap.displayName = 'CountryMap'; 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 00000000000..9b88976404e --- /dev/null +++ b/superset/assets/src/visualizations/CountryMap/ReactCountryMap.js @@ -0,0 +1,4 @@ +import reactify from '../../utils/reactify'; +import Component from './CountryMap'; + +export default reactify(Component); diff --git a/superset/assets/src/visualizations/CountryMap/adaptor.jsx b/superset/assets/src/visualizations/CountryMap/adaptor.jsx new file mode 100644 index 00000000000..8553cb4798a --- /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 00000000000..40263356840 --- /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, + } = formData; + + return { + data: payload.data, + country: selectCountry, + linearColorScheme, + numberFormat, + }; +} 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 34c8d77b00d..78822616df8 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 00000000000..9d502af18dc --- /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 00000000000..e5077f8b7c8 --- /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/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 b3bf0f3b971..2c6c4e31ca3 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); +ForceDirected.displayName = 'ForceDirected'; +ForceDirected.propTypes = propTypes; - return ForceDirectedGraph(element, { - data: payload.data, - width: slice.width(), - height: slice.height(), - linkLength, - charge, - }); -} - -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 00000000000..d769de7747c --- /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 00000000000..be20f6d3556 --- /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 00000000000..115f353960a --- /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/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 87% rename from superset/assets/src/visualizations/heatmap.js rename to superset/assets/src/visualizations/Heatmap/Heatmap.js index 3a6b3516789..ca6d7a120f8 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({ @@ -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, @@ -342,53 +340,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 00000000000..453797826df --- /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 00000000000..f46baa8878a --- /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 00000000000..9c4ad106218 --- /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/Histogram.jsx b/superset/assets/src/visualizations/Histogram/Histogram.jsx similarity index 78% rename from superset/assets/src/visualizations/Histogram.jsx rename to superset/assets/src/visualizations/Histogram/Histogram.jsx index 44ffafbe990..34540bb9df4 100644 --- a/superset/assets/src/visualizations/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, @@ -108,31 +107,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 00000000000..e72932f8b42 --- /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 00000000000..0c522a1d35b --- /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/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 80% rename from superset/assets/src/visualizations/HorizonChart.jsx rename to superset/assets/src/visualizations/Horizon/HorizonChart.jsx index c17e98266af..1bc1e055604 100644 --- a/superset/assets/src/visualizations/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'; @@ -81,23 +80,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 00000000000..53b08a83ee8 --- /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 00000000000..b5838c2f969 --- /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/PairedTTest/PairedTTest.jsx b/superset/assets/src/visualizations/PairedTTest/PairedTTest.jsx index 3fd9f61c258..cc157c3e75c 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 00000000000..c71b9077bc9 --- /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 00000000000..84abe5b1e7a --- /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/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 7d454e10e85..d52d08de661 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 00000000000..b0236ca0f78 --- /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 00000000000..d4c9be9f462 --- /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 00000000000..6f5c7c4b617 --- /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/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 88% rename from superset/assets/src/visualizations/partition.js rename to superset/assets/src/visualizations/Partition/Partition.js index e70a1eece78..9093d556d3c 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 @@ -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,15 +63,14 @@ 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 // http://mbostock.github.io/d3/talk/20111018/partition.html function Icicle(element, props) { - PropTypes.checkPropTypes(propTypes, props, 'prop', 'Icicle'); - const { width, height, @@ -80,7 +78,7 @@ function Icicle(element, props) { colorScheme, dateTimeFormat, equalDateSize, - groupBy, + levels, useLogScale = false, metrics = [], numberFormat, @@ -220,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) { @@ -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 00000000000..42785b499b2 --- /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 00000000000..9c279a216f6 --- /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 00000000000..04ed059c270 --- /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, + logScale, + metrics, + numberFormat, + partitionLimit, + partitionThreshold, + richTooltip, + timeSeriesOption, + } = formData; + const { verboseMap } = datasource; + + return { + data: payload.data, + colorScheme, + dateTimeFormat, + equalDateSize, + levels: 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/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 77% rename from superset/assets/src/visualizations/pivot_table.js rename to superset/assets/src/visualizations/PivotTable/PivotTable.js index 2d8c6fb4ff1..71d0cfad1f7 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, $); @@ -18,20 +18,18 @@ 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), }; function PivotTable(element, props) { - PropTypes.checkPropTypes(propTypes, props, 'prop', 'PivotTable'); - const { data, height, columnFormats, - groupBy, numberFormat, + numGroups, verboseMap, } = props; @@ -67,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 @@ -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 00000000000..9afda850119 --- /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 00000000000..4a23926f75f --- /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 00000000000..880cd2845df --- /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, + numberFormat, + } = formData; + const { + columnFormats, + verboseMap, + } = datasource; + + return { + data: payload.data, + columnFormats, + numGroups: groupby.length, + numberFormat, + verboseMap, + }; +} diff --git a/superset/assets/src/visualizations/Rose/ReactRose.js b/superset/assets/src/visualizations/Rose/ReactRose.js new file mode 100644 index 00000000000..d5cad0813b9 --- /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 62df302020d..3c76d8fbf9d 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 00000000000..8819150e01d --- /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 00000000000..afc09eab216 --- /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/Sankey/ReactSankey.js b/superset/assets/src/visualizations/Sankey/ReactSankey.js new file mode 100644 index 00000000000..444f720d3e9 --- /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 2509a50db6f..0efca777228 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); +export default Sankey; - return Sankey(element, { - data: payload.data, - width: slice.width(), - height: slice.height(), - colorScheme, - }); -} - -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 00000000000..c1f36beb209 --- /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 00000000000..4d354b2ef33 --- /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/Sunburst/ReactSunburst.js b/superset/assets/src/visualizations/Sunburst/ReactSunburst.js new file mode 100644 index 00000000000..960b67702e2 --- /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 7a8717311c0..bd9b56af2d7 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 00000000000..9c3ffaf22ad --- /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 00000000000..465bd7c34af --- /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/Table/ReactTable.js b/superset/assets/src/visualizations/Table/ReactTable.js new file mode 100644 index 00000000000..459a48ab6f2 --- /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 2b20a7da1f3..070a96c1ed4 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 00000000000..7eaf61e31ef --- /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 00000000000..381931b4d5e --- /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/Treemap/ReactTreemap.js b/superset/assets/src/visualizations/Treemap/ReactTreemap.js new file mode 100644 index 00000000000..68c98028660 --- /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 8ffd14055b5..3596357ee3b 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; +Treemap.displayName = 'Treemap'; +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, - }); -} - -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 00000000000..b763c7fa688 --- /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 00000000000..c0c3c032348 --- /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/WorldMap/WorldMap.js b/superset/assets/src/visualizations/WorldMap/WorldMap.js index d83d79411b0..924c5149f40 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; diff --git a/superset/assets/src/visualizations/WorldMap/adaptor.jsx b/superset/assets/src/visualizations/WorldMap/adaptor.jsx index 30d0400f35a..faa1a2cebf5 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 e924dd4d12e..6507b97d486 100644 --- a/superset/assets/src/visualizations/index.js +++ b/superset/assets/src/visualizations/index.js @@ -72,18 +72,18 @@ 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')), + 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]: () => - loadVis(import(/* webpackChunkName: "filter_box" */ './filter_box.jsx')), - [VIZ_TYPES.heatmap]: () => loadVis(import(/* webpackChunkName: "heatmap" */ './heatmap.js')), + 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.jsx')), - [VIZ_TYPES.horizon]: () => loadVis(import(/* webpackChunkName: "horizon" */ './HorizonChart.jsx')), + loadVis(import(/* webpackChunkName: "histogram" */ './Histogram/adaptor.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]: () => @@ -92,30 +92,30 @@ 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')), - [VIZ_TYPES.sankey]: () => loadVis(import(/* webpackChunkName: "sankey" */ './sankey.js')), + 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.table]: () => loadVis(import(/* webpackChunkName: "table" */ './table.js')), + [VIZ_TYPES.sunburst]: () => loadVis(import(/* webpackChunkName: "sunburst" */ './Sunburst/adaptor.jsx')), + [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" */ './country_map.js')), + 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, [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.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]: () => @@ -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; diff --git a/superset/assets/src/visualizations/models/BasicChartInput.js b/superset/assets/src/visualizations/models/BasicChartInput.js index de4add53363..73aff9553aa 100644 --- a/superset/assets/src/visualizations/models/BasicChartInput.js +++ b/superset/assets/src/visualizations/models/BasicChartInput.js @@ -3,7 +3,13 @@ import convertKeysToCamelCase from '../../utils/convertKeysToCamelCase'; 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) => { + slice.addFilter(...args); + }; this.payload = payload; this.setControlValue = setControlValue; } diff --git a/superset/assets/src/visualizations/wordcloud/ReactWordCloud.js b/superset/assets/src/visualizations/wordcloud/ReactWordCloud.js new file mode 100644 index 00000000000..80d0024e395 --- /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 876626329b0..2b91665ee28 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; +WordCloud.displayName = 'WordCloud'; +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, - }); -} - -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 00000000000..cbe00ea0dc4 --- /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 00000000000..7400a3af310 --- /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], + }; +}