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.wo...@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);
