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.
|
* under the License.
|
||||||
*/
|
*/
|
||||||
import { t, ChartMetadata, ChartPlugin } from '@superset-ui/core';
|
import { t, ChartMetadata, ChartPlugin } from '@superset-ui/core';
|
||||||
|
import transformProps from '../transformProps';
|
||||||
import thumbnail from './images/thumbnail.png';
|
import thumbnail from './images/thumbnail.png';
|
||||||
import controlPanel from './controlPanel';
|
import controlPanel from './controlPanel';
|
||||||
|
|
||||||
@ -31,8 +32,9 @@ const metadata = new ChartMetadata({
|
|||||||
export default class LineChartPlugin extends ChartPlugin {
|
export default class LineChartPlugin extends ChartPlugin {
|
||||||
constructor() {
|
constructor() {
|
||||||
super({
|
super({
|
||||||
loadChart: () => import('./LineMulti'),
|
loadChart: () => import('../ReactNVD3'),
|
||||||
metadata,
|
metadata,
|
||||||
|
transformProps,
|
||||||
controlPanel,
|
controlPanel,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user