mirror of
https://github.com/apache/superset.git
synced 2024-09-19 20:19:37 -04:00
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>
This commit is contained in:
parent
6db9aef217
commit
368e19805d
@ -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;
|
@ -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,
|
||||
});
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user