fix(legacy-preset-chart-nvd3): remove data fetching from multiline chart (#899)

Co-authored-by: Kamil Gabryjelski <kamil.gabryjelski@polidea.com>
Co-authored-by: Ville Brofeldt <ville.v.brofeldt@gmail.com>

superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-preset-chart-nvd3/src/LineMulti/LineMulti.jsx

@@ -1,166 +0,0 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements.  See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership.  The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License.  You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-/* eslint-disable react/require-default-props, react/sort-prop-types */
-import d3 from 'd3';
-import React from 'react';
-import PropTypes from 'prop-types';
-import { isEqual, cloneDeep } from 'lodash';
-import { getExploreLongUrl } from '../vendor/superset/exploreUtils';
-import ReactNVD3 from '../ReactNVD3';
-import transformProps from '../transformProps';
-
-const propTypes = {
-  width: PropTypes.number,
-  height: PropTypes.number,
-  annotationData: PropTypes.object,
-  datasource: PropTypes.object,
-  formData: PropTypes.object,
-  queriesData: PropTypes.arrayOf(PropTypes.object),
-  rawFormData: PropTypes.object,
-  hooks: PropTypes.shape({
-    onAddFilter: PropTypes.func,
-    onError: PropTypes.func,
-  }),
-};
-const defaultProps = {};
-
-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 queryData data and passing it along to nvd3Vis.
- */
-class LineMulti extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = { queryData: {} };
-  }
-
-  componentDidMount() {
-    this.loadData(this.props);
-  }
-
-  shouldComponentUpdate(nextProps, nextState) {
-    const { rawFormData } = this.props;
-    const { rawFormData: nextRawFormData } = nextProps;
-    const { queryData } = this.state;
-    const { queryData: nextQueryData } = nextState;
-    if (!isEqual(queryData, nextQueryData) || !isEqual(rawFormData, nextRawFormData)) {
-      return true;
-    }
-
-    return false;
-  }
-
-  componentDidUpdate() {
-    this.loadData(this.props);
-  }
-
-  loadData(props) {
-    const { formData, queriesData } = props;
-    const { slices } = queriesData[0].data;
-    const {
-      extraFilters,
-      filters,
-      lineCharts,
-      lineCharts2,
-      prefixMetricWithSliceName,
-      timeRange,
-    } = formData;
-
-    // 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,
-        extra_filters: extraFilters || [],
-        filters: (subsliceFormData.filters || []).concat(filters || []),
-        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 queryDataCopy = { ...queriesData[0] };
-      queryDataCopy.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 > 0 && lineCharts2.length > 0) {
-        let minX = Infinity;
-        let maxX = -Infinity;
-        queryDataCopy.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
-        queryDataCopy.data.forEach(datum => {
-          datum.values.push({ x: minX, y: null });
-          datum.values.push({ x: maxX, y: null });
-        });
-      }
-
-      this.setState({ queryData: queryDataCopy });
-    });
-  }
-
-  render() {
-    const { queryData } = this.state;
-
-    return (
-      <ReactNVD3
-        {...transformProps({
-          ...this.props,
-          queryData: cloneDeep(queryData),
-        })}
-      />
-    );
-  }
-}
-
-LineMulti.propTypes = propTypes;
-LineMulti.defaultProps = defaultProps;
-
-export default LineMulti;

superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-preset-chart-nvd3/src/LineMulti/index.js

@@ -17,6 +17,7 @@
  * under the License.
  */
 import { t, ChartMetadata, ChartPlugin } from '@superset-ui/core';
+import transformProps from '../transformProps';
 import thumbnail from './images/thumbnail.png';
 import controlPanel from './controlPanel';
 
@@ -31,8 +32,9 @@ const metadata = new ChartMetadata({
 export default class LineChartPlugin extends ChartPlugin {
   constructor() {
     super({
-      loadChart: () => import('./LineMulti'),
+      loadChart: () => import('../ReactNVD3'),
       metadata,
+      transformProps,
       controlPanel,
     });
   }