[GitHub] williaster closed pull request #6058: [SIP-5&6] Refactor line_multi

[GitBox <gi...@apache.org>]

williaster closed pull request #6058: [SIP-5&6] Refactor line_multi
URL: https://github.com/apache/incubator-superset/pull/6058
 
 
   

This is a PR merged from a forked repository.
As GitHub hides the original diff on merge, it is displayed below for
the sake of provenance:

As this is a foreign pull request (from a fork), the diff is supplied
below (as it won't show otherwise due to GitHub magic):

diff --git a/superset/assets/src/visualizations/index.js b/superset/assets/src/visualizations/index.js
index 486b64d1ad..2e4610e4af 100644
--- a/superset/assets/src/visualizations/index.js
+++ b/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')),
diff --git a/superset/assets/src/visualizations/nvd3/LineMulti.js b/superset/assets/src/visualizations/nvd3/LineMulti.js
deleted file mode 100644
index d5f1c48bba..0000000000
--- a/superset/assets/src/visualizations/nvd3/LineMulti.js
+++ /dev/null
@@ -1,71 +0,0 @@
-import d3 from 'd3';
-import nvd3Vis from './adaptor';
-import { getExploreLongUrl } from '../../explore/exploreUtils';
-
-export default function lineMulti(slice, payload) {
-  /*
-   * 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.
-   */
-  const fd = slice.formData;
-
-  // fetch data from all the charts
-  const subslices = [
-    ...payload.data.slices.axis1.map(subslice => [1, subslice]),
-    ...payload.data.slices.axis2.map(subslice => [2, subslice]),
-  ];
-  const promises = subslices.map(([yAxis, subslice]) => {
-    let filters = subslice.form_data.filters || [];
-    filters.concat(fd.filters);
-    if (fd.extra_filters) {
-      filters = filters.concat(fd.extra_filters);
-    }
-    const fdCopy = {
-      ...subslice.form_data,
-      filters,
-      time_range: fd.time_range,
-    };
-    const url = getExploreLongUrl(fdCopy, 'json');
-    return new Promise((resolve, reject) => {
-      d3.json(url, (error, response) => {
-        if (error) {
-          reject(error);
-        } else {
-          const addPrefix = fd.prefix_metric_with_slice_name;
-          const data = response.data.map(({ key, values }) => ({
-            key: addPrefix ? `${subslice.slice_name}: ${key}` : key,
-            type: fdCopy.viz_type,
-            values,
-            yAxis,
-          }));
-          resolve(data);
-        }
-      });
-    });
-  });
-
-  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 (fd.line_charts.length && fd.line_charts_2.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 });
-      });
-    }
-
-    nvd3Vis(slice, payloadCopy);
-  });
-}
diff --git a/superset/assets/src/visualizations/nvd3/LineMulti/LineMulti.jsx b/superset/assets/src/visualizations/nvd3/LineMulti/LineMulti.jsx
new file mode 100644
index 0000000000..e872169391
--- /dev/null
+++ b/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;
diff --git a/superset/assets/src/visualizations/nvd3/LineMulti/LineMultiChartPlugin.js b/superset/assets/src/visualizations/nvd3/LineMulti/LineMultiChartPlugin.js
new file mode 100644
index 0000000000..1c7a85f11c
--- /dev/null
+++ b/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'),
+    });
+  }
+}
diff --git a/superset/assets/src/visualizations/nvd3/LineMulti/adaptor.jsx b/superset/assets/src/visualizations/nvd3/LineMulti/adaptor.jsx
new file mode 100644
index 0000000000..3b5c175d01
--- /dev/null
+++ b/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);


 

----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on GitHub and use the
URL above to go to the specific comment.
 
For queries about this service, please contact Infrastructure at:
users@infra.apache.org


With regards,
Apache Git Services

---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org