superset-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From ccwilli...@apache.org
Subject [incubator-superset] branch master updated: [SIP-5&6] Refactor line_multi (#6058)
Date Tue, 16 Oct 2018 21:54:06 GMT
This is an automated email from the ASF dual-hosted git repository.

ccwilliams pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-superset.git


The following commit(s) were added to refs/heads/master by this push:
     new dcfbae1  [SIP-5&6] Refactor line_multi (#6058)
dcfbae1 is described below

commit dcfbae1ab9cc72468dde09928b8b8c3b0d39b0d3
Author: Krist Wongsuphasawat <krist.wongz@gmail.com>
AuthorDate: Tue Oct 16 14:54:01 2018 -0700

    [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        |   2 +-
 .../assets/src/visualizations/nvd3/LineMulti.js    |  71 ----------
 .../visualizations/nvd3/LineMulti/LineMulti.jsx    | 149 +++++++++++++++++++++
 .../nvd3/LineMulti/LineMultiChartPlugin.js         |  19 +++
 .../src/visualizations/nvd3/LineMulti/adaptor.jsx  |   4 +
 5 files changed, 173 insertions(+), 72 deletions(-)

diff --git a/superset/assets/src/visualizations/index.js b/superset/assets/src/visualizations/index.js
index 486b64d..2e4610e 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 d5f1c48..0000000
--- 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 0000000..e872169
--- /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 0000000..1c7a85f
--- /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 0000000..3b5c175
--- /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);


Mime
View raw message