[SIP-6] Migrate visualizations to new directory structure. (#5949)

* Migrate Chord, Calendar

* Migrate CountryMap

* Add display name and rename Chord.jsx to Chord.js

* migrate Histogram

* add force-directed

* migrate Heatmap

* add horizon

* migrate parallel coordinates

* migrate partition

* migrate pivot table

* migrate rose

* remove react-dom

* migrate Sankey

* migrate sunburst

* migrate table

* migrate treemap

* migrate filterbox

* migrate wordcloud

* add paired t-test

* fix unit test

* remove renaming

* rename fields

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 = '<div id="slice-container"><div class="dataTables_wrapper"></div></div>';
@@ -17,6 +17,7 @@ describe('table viz', () => {
     getFilters: () => ({}),
     removeFilter() {},
     addFilter() {},
+    width: () => 0,
     height: () => 0,
   };
   const basePayload = {

superset/assets/src/visualizations/cal_heatmap.js → 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;

superset/assets/src/visualizations/Calendar/ReactCalendar.js

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

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);

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,
+  };
+}

superset/assets/src/visualizations/chord.jsx → 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;
-
-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,
-  });
-}
+Chord.displayName = 'Chord';
+Chord.propTypes = propTypes;
 
-export default adaptor;
+export default Chord;

superset/assets/src/visualizations/Chord/ReactChord.js

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

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);

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,
+  };
+}

superset/assets/src/visualizations/country_map.js → 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;

superset/assets/src/visualizations/CountryMap/ReactCountryMap.js

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

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);

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,
+  };
+}

superset/assets/src/visualizations/filter_box.jsx → 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(
-    <FilterBox
-      datasource={datasource}
-      filtersFields={filtersFields}
-      filtersChoices={payload.data}
-      onChange={slice.addFilter}
-      showDateFilter={showDateFilter}
-      showSqlaTimeGrain={showSqlaTimeGrain}
-      showSqlaTimeColumn={showSqlaTimeColumn}
-      showDruidTimeGrain={showDruidTimeGrain}
-      showDruidTimeOrigin={showDruidTimeOrigin}
-      origSelectedValues={slice.getFilters() || {}}
-      instantFiltering={instantFiltering}
-    />,
-    document.getElementById(slice.containerId),
-  );
-}
-
-export default adaptor;
+export default FilterBox;

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);

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,
+  };
+}