[SIP-5&6] Refactor line_multi (#6058)

* Rewrite line_multi

* move dir

* add chartplugin for line_multi

* rename var

superset/assets/src/visualizations/index.js

@@ -87,7 +87,7 @@ const vizMap = {
   [VIZ_TYPES.iframe]: () => loadVis(import(/* webpackChunkName: "iframe" */ './iframe.js')),
   [VIZ_TYPES.line]: loadNvd3,
   [VIZ_TYPES.line_multi]: () =>
-    loadVis(import(/* webpackChunkName: "line_multi" */ './nvd3/LineMulti.js')),
+    loadVis(import(/* webpackChunkName: "line_multi" */ './nvd3/LineMulti/adaptor.jsx')),
   [VIZ_TYPES.time_pivot]: loadNvd3,
   [VIZ_TYPES.mapbox]: () => loadVis(import(/* webpackChunkName: "mapbox" */ './MapBox/adaptor.jsx')),
   [VIZ_TYPES.markup]: () => loadVis(import(/* webpackChunkName: "markup" */ './markup.js')),

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

@@ -0,0 +1,149 @@
+import d3 from 'd3';
+import React from 'react';
+import PropTypes from 'prop-types';
+import { getExploreLongUrl } from '../../../explore/exploreUtils';
+import ReactNVD3 from '../ReactNVD3';
+import transformProps from '../transformProps';
+
+const propTypes = {
+  width: PropTypes.number,
+  height: PropTypes.number,
+  annotationData: PropTypes.object,
+  datasource: PropTypes.array,
+  formData: PropTypes.object,
+  onAddFilter: PropTypes.func,
+  onError: PropTypes.func,
+};
+const defaultProps = {
+  onAddFilter() {},
+  onError() {},
+};
+
+function getJson(url) {
+  return new Promise((resolve, reject) => {
+    d3.json(url, (error, response) => {
+      if (error) {
+        reject(error);
+      } else {
+        resolve(response.data);
+      }
+    });
+  });
+}
+
+/*
+ * Show multiple line charts
+ *
+ * This visualization works by fetching the data from each of the saved
+ * charts, building the payload data and passing it along to nvd3Vis.
+ */
+class LineMulti extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { payload: [] };
+  }
+
+  componentDidMount() {
+    this.loadData(this.props);
+  }
+
+  componentWillReceiveProps(nextProps) {
+    this.loadData(nextProps);
+  }
+
+  loadData(props) {
+    const { formData, payload } = props;
+    const slices = payload.data.slices;
+    const {
+      extraFilters,
+      filters,
+      lineCharts,
+      lineCharts2,
+      prefixMetricWithSliceName,
+      timeRange,
+    } = formData;
+
+    this.setState({ payload: [] });
+
+    // fetch data from all the charts
+    const subslices = [
+      ...slices.axis1.map(subslice => [1, subslice]),
+      ...slices.axis2.map(subslice => [2, subslice]),
+    ];
+
+    const promises = subslices.map(([yAxis, subslice]) => {
+      const subsliceFormData = subslice.form_data;
+      const combinedFormData = {
+        ...subslice.form_data,
+        filters: (subsliceFormData.filters || [])
+          .concat(filters || [])
+          .concat(extraFilters || []),
+        time_range: timeRange,
+      };
+      const addPrefix = prefixMetricWithSliceName;
+      return getJson(getExploreLongUrl(combinedFormData, 'json'))
+        .then(data => data.map(({ key, values }) => ({
+          key: addPrefix ? `${subslice.slice_name}: ${key}` : key,
+          type: combinedFormData.viz_type,
+          values,
+          yAxis,
+        })));
+    });
+
+    Promise.all(promises).then((data) => {
+      const payloadCopy = { ...payload };
+      payloadCopy.data = [].concat(...data);
+
+      // add null values at the edges to fix multiChart bug when series with
+      // different x values use different y axes
+      if (lineCharts.length && lineCharts2.length) {
+        let minX = Infinity;
+        let maxX = -Infinity;
+        payloadCopy.data.forEach((datum) => {
+          minX = Math.min(minX, ...datum.values.map(v => v.x));
+          maxX = Math.max(maxX, ...datum.values.map(v => v.x));
+        });
+        // add null values at the edges
+        payloadCopy.data.forEach((datum) => {
+          datum.values.push({ x: minX, y: null });
+          datum.values.push({ x: maxX, y: null });
+        });
+      }
+
+      this.setState({ payload: payloadCopy });
+    });
+  }
+
+  render() {
+    const {
+      width,
+      height,
+      annotationData,
+      datasource,
+      formData,
+      onAddFilter,
+      onError,
+    } = this.props;
+    const { payload } = this.state;
+
+    return (
+      <ReactNVD3
+        width={width}
+        height={height}
+        {...transformProps({
+          annotationData,
+          datasource,
+          formData,
+          onError,
+          onAddFilter,
+          payload,
+        })}
+      />
+    );
+  }
+}
+
+LineMulti.propTypes = propTypes;
+LineMulti.defaultProps = defaultProps;
+
+export default LineMulti;

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

@@ -0,0 +1,19 @@
+import ChartPlugin from '../../core/models/ChartPlugin';
+import ChartMetadata from '../../core/models/ChartMetadata';
+import thumbnail from './images/thumbnail.png';
+
+const metadata = new ChartMetadata({
+  name: 'Multiple Line Charts',
+  description: '',
+  credits: ['http://nvd3.org'],
+  thumbnail,
+});
+
+export default class LineChartPlugin extends ChartPlugin {
+  constructor() {
+    super({
+      metadata,
+      loadChart: () => import('./LineMulti.jsx'),
+    });
+  }
+}

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

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