mirror of
https://github.com/apache/superset.git
synced 2026-04-19 08:04:53 +00:00
feat(plugin-chart-echarts): Echarts Waterfall (#17906)
Co-authored-by: Michael S. Molina <michael.s.molina@gmail.com>
This commit is contained in:
Stephen Liu
@@ -0,0 +1,84 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
import React, { useCallback } from 'react';
|
||||
import Echart from '../components/Echart';
|
||||
import { allEventHandlers } from '../utils/eventHandlers';
|
||||
import { WaterfallChartTransformedProps } from './types';
|
||||
|
||||
export default function EchartsWaterfall(
|
||||
props: WaterfallChartTransformedProps,
|
||||
) {
|
||||
const {
|
||||
height,
|
||||
width,
|
||||
echartOptions,
|
||||
setDataMask,
|
||||
labelMap,
|
||||
groupby,
|
||||
refs,
|
||||
selectedValues,
|
||||
} = props;
|
||||
const handleChange = useCallback(
|
||||
(values: string[]) => {
|
||||
const groupbyValues = values.map(value => labelMap[value]);
|
||||
|
||||
setDataMask({
|
||||
extraFormData: {
|
||||
filters:
|
||||
values.length === 0
|
||||
? []
|
||||
: groupby.map((col, idx) => {
|
||||
const val = groupbyValues.map(v => v[idx]);
|
||||
if (val === null || val === undefined)
|
||||
return {
|
||||
col,
|
||||
op: 'IS NULL',
|
||||
};
|
||||
return {
|
||||
col,
|
||||
op: 'IN',
|
||||
val: val as (string | number | boolean)[],
|
||||
};
|
||||
}),
|
||||
},
|
||||
filterState: {
|
||||
value: groupbyValues.length ? groupbyValues : null,
|
||||
selectedValues: values.length ? values : null,
|
||||
},
|
||||
});
|
||||
},
|
||||
[setDataMask, groupby, labelMap],
|
||||
);
|
||||
|
||||
const eventHandlers = {
|
||||
...allEventHandlers(props),
|
||||
handleChange,
|
||||
};
|
||||
|
||||
return (
|
||||
<Echart
|
||||
refs={refs}
|
||||
height={height}
|
||||
width={width}
|
||||
echartOptions={echartOptions}
|
||||
eventHandlers={eventHandlers}
|
||||
selectedValues={selectedValues}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
import { buildQueryContext, QueryFormData } from '@superset-ui/core';
|
||||
|
||||
export default function buildQuery(formData: QueryFormData) {
|
||||
const { series, columns } = formData;
|
||||
return buildQueryContext(formData, baseQueryObject => [
|
||||
{
|
||||
...baseQueryObject,
|
||||
columns: columns?.length ? [series, columns] : [series],
|
||||
},
|
||||
]);
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
|
||||
import { t } from '@superset-ui/core';
|
||||
|
||||
export const TOTAL_MARK = t('Total');
|
||||
export const ASSIST_MARK = t('Assist');
|
||||
export const LEGEND = {
|
||||
INCREASE: t('Increase'),
|
||||
DECREASE: t('Decrease'),
|
||||
TOTAL: t('Total'),
|
||||
};
|
||||
export const TOKEN = '-';
|
||||
@@ -0,0 +1,142 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
import React from 'react';
|
||||
import { ensureIsArray, t } from '@superset-ui/core';
|
||||
import {
|
||||
ControlPanelConfig,
|
||||
formatSelectOptions,
|
||||
getStandardizedControls,
|
||||
sections,
|
||||
} from '@superset-ui/chart-controls';
|
||||
import { showValueControl } from '../controls';
|
||||
|
||||
const config: ControlPanelConfig = {
|
||||
controlPanelSections: [
|
||||
sections.legacyTimeseriesTime,
|
||||
{
|
||||
label: t('Query'),
|
||||
expanded: true,
|
||||
controlSetRows: [
|
||||
['series'],
|
||||
['columns'],
|
||||
['metric'],
|
||||
['adhoc_filters'],
|
||||
['row_limit'],
|
||||
],
|
||||
},
|
||||
{
|
||||
label: t('Chart Options'),
|
||||
expanded: true,
|
||||
controlSetRows: [
|
||||
['color_scheme'],
|
||||
[showValueControl],
|
||||
[
|
||||
{
|
||||
name: 'show_legend',
|
||||
config: {
|
||||
type: 'CheckboxControl',
|
||||
label: t('Show legend'),
|
||||
renderTrigger: true,
|
||||
default: false,
|
||||
description: t('Whether to display a legend for the chart'),
|
||||
},
|
||||
},
|
||||
],
|
||||
[
|
||||
{
|
||||
name: 'rich_tooltip',
|
||||
config: {
|
||||
type: 'CheckboxControl',
|
||||
label: t('Rich tooltip'),
|
||||
renderTrigger: true,
|
||||
default: true,
|
||||
description: t(
|
||||
'Shows a list of all series available at that point in time',
|
||||
),
|
||||
},
|
||||
},
|
||||
],
|
||||
[<div className="section-header">{t('X Axis')}</div>],
|
||||
[
|
||||
{
|
||||
name: 'x_axis_label',
|
||||
config: {
|
||||
type: 'TextControl',
|
||||
label: t('X Axis Label'),
|
||||
renderTrigger: true,
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
],
|
||||
[
|
||||
{
|
||||
name: 'x_ticks_layout',
|
||||
config: {
|
||||
type: 'SelectControl',
|
||||
label: t('X Tick Layout'),
|
||||
choices: formatSelectOptions([
|
||||
'auto',
|
||||
'flat',
|
||||
'45°',
|
||||
'90°',
|
||||
'staggered',
|
||||
]),
|
||||
default: 'auto',
|
||||
clearable: false,
|
||||
renderTrigger: true,
|
||||
description: t('The way the ticks are laid out on the X-axis'),
|
||||
},
|
||||
},
|
||||
],
|
||||
[<div className="section-header">{t('Y Axis')}</div>],
|
||||
[
|
||||
{
|
||||
name: 'y_axis_label',
|
||||
config: {
|
||||
type: 'TextControl',
|
||||
label: t('Y Axis Label'),
|
||||
renderTrigger: true,
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
],
|
||||
['y_axis_format'],
|
||||
],
|
||||
},
|
||||
],
|
||||
controlOverrides: {
|
||||
columns: {
|
||||
label: t('Breakdowns'),
|
||||
description: t('Defines how each series is broken down'),
|
||||
multi: false,
|
||||
},
|
||||
},
|
||||
formDataOverrides: formData => {
|
||||
const series = getStandardizedControls()
|
||||
.popAllColumns()
|
||||
.filter(col => !ensureIsArray(formData.columns).includes(col));
|
||||
return {
|
||||
...formData,
|
||||
series,
|
||||
metric: getStandardizedControls().shiftMetric(),
|
||||
};
|
||||
},
|
||||
};
|
||||
|
||||
export default config;
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 75 KiB |
@@ -0,0 +1,59 @@
|
||||
/**
|
||||
* 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
|
||||
* regardin
|
||||
* g 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.
|
||||
*/
|
||||
import { Behavior, ChartMetadata, ChartPlugin, t } from '@superset-ui/core';
|
||||
import buildQuery from './buildQuery';
|
||||
import controlPanel from './controlPanel';
|
||||
import transformProps from './transformProps';
|
||||
import thumbnail from './images/thumbnail.png';
|
||||
import { EchartsWaterfallChartProps, EchartsWaterfallFormData } from './types';
|
||||
|
||||
export default class EchartsWaterfallChartPlugin extends ChartPlugin<
|
||||
EchartsWaterfallFormData,
|
||||
EchartsWaterfallChartProps
|
||||
> {
|
||||
/**
|
||||
* The constructor is used to pass relevant metadata and callbacks that get
|
||||
* registered in respective registries that are used throughout the library
|
||||
* and application. A more thorough description of each property is given in
|
||||
* the respective imported file.
|
||||
*
|
||||
* It is worth noting that `buildQuery` and is optional, and only needed for
|
||||
* advanced visualizations that require either post processing operations
|
||||
* (pivoting, rolling aggregations, sorting etc) or submitting multiple queries.
|
||||
*/
|
||||
constructor() {
|
||||
super({
|
||||
buildQuery,
|
||||
controlPanel,
|
||||
loadChart: () => import('./EchartsWaterfall'),
|
||||
metadata: new ChartMetadata({
|
||||
behaviors: [Behavior.INTERACTIVE_CHART, Behavior.DRILL_TO_DETAIL],
|
||||
credits: ['https://echarts.apache.org'],
|
||||
category: t('Evolution'),
|
||||
description: '',
|
||||
exampleGallery: [],
|
||||
name: t('Waterfall Chart'),
|
||||
thumbnail,
|
||||
tags: [],
|
||||
}),
|
||||
transformProps,
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,401 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
import {
|
||||
CategoricalColorNamespace,
|
||||
DataRecord,
|
||||
getColumnLabel,
|
||||
getMetricLabel,
|
||||
getNumberFormatter,
|
||||
NumberFormatter,
|
||||
SupersetTheme,
|
||||
} from '@superset-ui/core';
|
||||
import { EChartsOption, BarSeriesOption } from 'echarts';
|
||||
import { CallbackDataParams } from 'echarts/types/src/util/types';
|
||||
import {
|
||||
EchartsWaterfallFormData,
|
||||
EchartsWaterfallChartProps,
|
||||
ISeriesData,
|
||||
WaterfallChartTransformedProps,
|
||||
} from './types';
|
||||
import { getDefaultTooltip } from '../utils/tooltip';
|
||||
import { defaultGrid, defaultYAxis } from '../defaults';
|
||||
import { ASSIST_MARK, LEGEND, TOKEN, TOTAL_MARK } from './constants';
|
||||
import { extractGroupbyLabel, getColtypesMapping } from '../utils/series';
|
||||
import { Refs } from '../types';
|
||||
|
||||
function formatTooltip({
|
||||
theme,
|
||||
params,
|
||||
numberFormatter,
|
||||
richTooltip,
|
||||
}: {
|
||||
theme: SupersetTheme;
|
||||
params: any;
|
||||
numberFormatter: NumberFormatter;
|
||||
richTooltip: boolean;
|
||||
}) {
|
||||
const htmlMaker = (params: any) =>
|
||||
`
|
||||
<div>${params.name}</div>
|
||||
<div>
|
||||
${params.marker}
|
||||
<span style="
|
||||
font-size:${theme.typography.sizes.m}px;
|
||||
color:${theme.colors.grayscale.base};
|
||||
font-weight:${theme.typography.weights.normal};
|
||||
margin-left:${theme.gridUnit * 0.5}px;"
|
||||
>
|
||||
${params.seriesName}:
|
||||
</span>
|
||||
<span style="
|
||||
float:right;
|
||||
margin-left:${theme.gridUnit * 5}px;
|
||||
font-size:${theme.typography.sizes.m}px;
|
||||
color:${theme.colors.grayscale.base};
|
||||
font-weight:${theme.typography.weights.bold}"
|
||||
>
|
||||
${numberFormatter(params.data)}
|
||||
</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
if (richTooltip) {
|
||||
const [, increaseParams, decreaseParams, totalParams] = params;
|
||||
if (increaseParams.data !== TOKEN || increaseParams.data === null) {
|
||||
return htmlMaker(increaseParams);
|
||||
}
|
||||
if (decreaseParams.data !== TOKEN) {
|
||||
return htmlMaker(decreaseParams);
|
||||
}
|
||||
if (totalParams.data !== TOKEN) {
|
||||
return htmlMaker(totalParams);
|
||||
}
|
||||
} else if (params.seriesName !== ASSIST_MARK) {
|
||||
return htmlMaker(params);
|
||||
}
|
||||
return '';
|
||||
}
|
||||
|
||||
function transformer({
|
||||
data,
|
||||
breakdown,
|
||||
series,
|
||||
metric,
|
||||
}: {
|
||||
data: DataRecord[];
|
||||
breakdown: string;
|
||||
series: string;
|
||||
metric: string;
|
||||
}) {
|
||||
// Group by series (temporary map)
|
||||
const groupedData = data.reduce((acc, cur) => {
|
||||
const categoryLabel = cur[series] as string;
|
||||
const categoryData = acc.get(categoryLabel) || [];
|
||||
categoryData.push(cur);
|
||||
acc.set(categoryLabel, categoryData);
|
||||
return acc;
|
||||
}, new Map<string, DataRecord[]>());
|
||||
|
||||
const transformedData: DataRecord[] = [];
|
||||
|
||||
if (breakdown?.length) {
|
||||
groupedData.forEach((value, key) => {
|
||||
const tempValue = value;
|
||||
// Calc total per period
|
||||
const sum = tempValue.reduce(
|
||||
(acc, cur) => acc + ((cur[metric] as number) ?? 0),
|
||||
0,
|
||||
);
|
||||
// Push total per period to the end of period values array
|
||||
tempValue.push({
|
||||
[series]: key,
|
||||
[breakdown]: TOTAL_MARK,
|
||||
[metric]: sum,
|
||||
});
|
||||
transformedData.push(...tempValue);
|
||||
});
|
||||
} else {
|
||||
let total = 0;
|
||||
groupedData.forEach((value, key) => {
|
||||
const sum = value.reduce(
|
||||
(acc, cur) => acc + ((cur[metric] as number) ?? 0),
|
||||
0,
|
||||
);
|
||||
transformedData.push({
|
||||
[series]: key,
|
||||
[metric]: sum,
|
||||
});
|
||||
total += sum;
|
||||
});
|
||||
transformedData.push({
|
||||
[series]: TOTAL_MARK,
|
||||
[metric]: total,
|
||||
});
|
||||
}
|
||||
|
||||
return transformedData;
|
||||
}
|
||||
|
||||
export default function transformProps(
|
||||
chartProps: EchartsWaterfallChartProps,
|
||||
): WaterfallChartTransformedProps {
|
||||
const {
|
||||
width,
|
||||
height,
|
||||
formData,
|
||||
queriesData,
|
||||
hooks,
|
||||
filterState,
|
||||
theme,
|
||||
inContextMenu,
|
||||
} = chartProps;
|
||||
const refs: Refs = {};
|
||||
const { data = [] } = queriesData[0];
|
||||
const coltypeMapping = getColtypesMapping(queriesData[0]);
|
||||
const { setDataMask = () => {}, onContextMenu } = hooks;
|
||||
const {
|
||||
colorScheme,
|
||||
metric = '',
|
||||
columns,
|
||||
series,
|
||||
xTicksLayout,
|
||||
showLegend,
|
||||
yAxisLabel,
|
||||
xAxisLabel,
|
||||
yAxisFormat,
|
||||
richTooltip,
|
||||
showValue,
|
||||
sliceId,
|
||||
} = formData as EchartsWaterfallFormData;
|
||||
const colorFn = CategoricalColorNamespace.getScale(colorScheme as string);
|
||||
const numberFormatter = getNumberFormatter(yAxisFormat);
|
||||
const formatter = (params: CallbackDataParams) => {
|
||||
const { value, seriesName } = params;
|
||||
let formattedValue = numberFormatter(value as number);
|
||||
if (seriesName === LEGEND.DECREASE) {
|
||||
formattedValue = `-${formattedValue}`;
|
||||
}
|
||||
return formattedValue;
|
||||
};
|
||||
const breakdown = columns?.length ? columns : '';
|
||||
const groupby = breakdown ? [series, breakdown] : [series];
|
||||
const metricLabel = getMetricLabel(metric);
|
||||
const columnLabels = groupby.map(getColumnLabel);
|
||||
const columnsLabelMap = new Map<string, string[]>();
|
||||
|
||||
const transformedData = transformer({
|
||||
data,
|
||||
breakdown,
|
||||
series,
|
||||
metric: metricLabel,
|
||||
});
|
||||
|
||||
const assistData: ISeriesData[] = [];
|
||||
const increaseData: ISeriesData[] = [];
|
||||
const decreaseData: ISeriesData[] = [];
|
||||
const totalData: ISeriesData[] = [];
|
||||
|
||||
transformedData.forEach((datum, index, self) => {
|
||||
const totalSum = self.slice(0, index + 1).reduce((prev, cur, i) => {
|
||||
if (breakdown?.length) {
|
||||
if (cur[breakdown] !== TOTAL_MARK || i === 0) {
|
||||
return prev + ((cur[metricLabel] as number) ?? 0);
|
||||
}
|
||||
} else if (cur[series] !== TOTAL_MARK) {
|
||||
return prev + ((cur[metricLabel] as number) ?? 0);
|
||||
}
|
||||
return prev;
|
||||
}, 0);
|
||||
|
||||
const joinedName = extractGroupbyLabel({
|
||||
datum,
|
||||
groupby: columnLabels,
|
||||
coltypeMapping,
|
||||
});
|
||||
columnsLabelMap.set(
|
||||
joinedName,
|
||||
columnLabels.map(col => datum[col] as string),
|
||||
);
|
||||
const value = datum[metricLabel] as number;
|
||||
const isNegative = value < 0;
|
||||
if (datum[breakdown] === TOTAL_MARK || datum[series] === TOTAL_MARK) {
|
||||
increaseData.push(TOKEN);
|
||||
decreaseData.push(TOKEN);
|
||||
assistData.push(TOKEN);
|
||||
totalData.push(totalSum);
|
||||
} else if (isNegative) {
|
||||
increaseData.push(TOKEN);
|
||||
decreaseData.push(Math.abs(value));
|
||||
assistData.push(totalSum);
|
||||
totalData.push(TOKEN);
|
||||
} else {
|
||||
increaseData.push(value);
|
||||
decreaseData.push(TOKEN);
|
||||
assistData.push(totalSum - value);
|
||||
totalData.push(TOKEN);
|
||||
}
|
||||
});
|
||||
|
||||
let axisLabel;
|
||||
if (xTicksLayout === '45°') {
|
||||
axisLabel = { rotate: -45 };
|
||||
} else if (xTicksLayout === '90°') {
|
||||
axisLabel = { rotate: -90 };
|
||||
} else if (xTicksLayout === 'flat') {
|
||||
axisLabel = { rotate: 0 };
|
||||
} else if (xTicksLayout === 'staggered') {
|
||||
axisLabel = { rotate: -45 };
|
||||
} else {
|
||||
axisLabel = { show: true };
|
||||
}
|
||||
|
||||
let xAxisData: string[] = [];
|
||||
if (breakdown?.length) {
|
||||
xAxisData = transformedData.map(row => {
|
||||
if (row[breakdown] === TOTAL_MARK) {
|
||||
return row[series] as string;
|
||||
}
|
||||
return row[breakdown] as string;
|
||||
});
|
||||
} else {
|
||||
xAxisData = transformedData.map(row => row[series] as string);
|
||||
}
|
||||
|
||||
const barSeries: BarSeriesOption[] = [
|
||||
{
|
||||
name: ASSIST_MARK,
|
||||
type: 'bar',
|
||||
stack: 'stack',
|
||||
itemStyle: {
|
||||
borderColor: 'transparent',
|
||||
color: 'transparent',
|
||||
},
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
borderColor: 'transparent',
|
||||
color: 'transparent',
|
||||
},
|
||||
},
|
||||
data: assistData,
|
||||
},
|
||||
{
|
||||
name: LEGEND.INCREASE,
|
||||
type: 'bar',
|
||||
stack: 'stack',
|
||||
label: {
|
||||
show: showValue,
|
||||
position: 'top',
|
||||
formatter,
|
||||
},
|
||||
itemStyle: {
|
||||
color: colorFn(LEGEND.INCREASE, sliceId),
|
||||
},
|
||||
data: increaseData,
|
||||
},
|
||||
{
|
||||
name: LEGEND.DECREASE,
|
||||
type: 'bar',
|
||||
stack: 'stack',
|
||||
label: {
|
||||
show: showValue,
|
||||
position: 'bottom',
|
||||
formatter,
|
||||
},
|
||||
itemStyle: {
|
||||
color: colorFn(LEGEND.DECREASE, sliceId),
|
||||
},
|
||||
data: decreaseData,
|
||||
},
|
||||
{
|
||||
name: LEGEND.TOTAL,
|
||||
type: 'bar',
|
||||
stack: 'stack',
|
||||
label: {
|
||||
show: showValue,
|
||||
position: 'top',
|
||||
formatter,
|
||||
},
|
||||
itemStyle: {
|
||||
color: colorFn(LEGEND.TOTAL, sliceId),
|
||||
},
|
||||
data: totalData,
|
||||
},
|
||||
];
|
||||
|
||||
const echartOptions: EChartsOption = {
|
||||
grid: {
|
||||
...defaultGrid,
|
||||
top: theme.gridUnit * 7,
|
||||
bottom: theme.gridUnit * 7,
|
||||
left: theme.gridUnit * 5,
|
||||
right: theme.gridUnit * 7,
|
||||
},
|
||||
legend: {
|
||||
show: showLegend,
|
||||
data: [LEGEND.INCREASE, LEGEND.DECREASE, LEGEND.TOTAL],
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: xAxisData,
|
||||
name: xAxisLabel,
|
||||
nameTextStyle: {
|
||||
padding: [theme.gridUnit * 4, 0, 0, 0],
|
||||
},
|
||||
nameLocation: 'middle',
|
||||
axisLabel,
|
||||
},
|
||||
yAxis: {
|
||||
...defaultYAxis,
|
||||
type: 'value',
|
||||
nameTextStyle: {
|
||||
padding: [0, 0, theme.gridUnit * 5, 0],
|
||||
},
|
||||
nameLocation: 'middle',
|
||||
name: yAxisLabel,
|
||||
axisLabel: { formatter: numberFormatter },
|
||||
},
|
||||
tooltip: {
|
||||
...getDefaultTooltip(refs),
|
||||
appendToBody: true,
|
||||
trigger: richTooltip ? 'axis' : 'item',
|
||||
show: !inContextMenu,
|
||||
formatter: (params: any) =>
|
||||
formatTooltip({
|
||||
theme,
|
||||
params,
|
||||
numberFormatter,
|
||||
richTooltip,
|
||||
}),
|
||||
},
|
||||
series: barSeries,
|
||||
};
|
||||
|
||||
return {
|
||||
refs,
|
||||
formData,
|
||||
width,
|
||||
height,
|
||||
echartOptions,
|
||||
setDataMask,
|
||||
labelMap: Object.fromEntries(columnsLabelMap),
|
||||
groupby,
|
||||
selectedValues: filterState.selectedValues || [],
|
||||
onContextMenu,
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
import {
|
||||
ChartDataResponseResult,
|
||||
ChartProps,
|
||||
QueryFormData,
|
||||
QueryFormMetric,
|
||||
} from '@superset-ui/core';
|
||||
import { BarDataItemOption } from 'echarts/types/src/chart/bar/BarSeries';
|
||||
import { OptionDataValue } from 'echarts/types/src/util/types';
|
||||
import {
|
||||
BaseTransformedProps,
|
||||
CrossFilterTransformedProps,
|
||||
LegendFormData,
|
||||
} from '../types';
|
||||
|
||||
export type WaterfallFormXTicksLayout =
|
||||
| '45°'
|
||||
| '90°'
|
||||
| 'auto'
|
||||
| 'flat'
|
||||
| 'staggered';
|
||||
|
||||
export type ISeriesData =
|
||||
| BarDataItemOption
|
||||
| OptionDataValue
|
||||
| OptionDataValue[];
|
||||
|
||||
export type EchartsWaterfallFormData = QueryFormData &
|
||||
LegendFormData & {
|
||||
metric: QueryFormMetric;
|
||||
yAxisLabel: string;
|
||||
xAxisLabel: string;
|
||||
yAxisFormat: string;
|
||||
xTicksLayout?: WaterfallFormXTicksLayout;
|
||||
series: string;
|
||||
columns?: string;
|
||||
};
|
||||
|
||||
export const DEFAULT_FORM_DATA: Partial<EchartsWaterfallFormData> = {
|
||||
showLegend: true,
|
||||
};
|
||||
|
||||
export interface EchartsWaterfallChartProps extends ChartProps {
|
||||
formData: EchartsWaterfallFormData;
|
||||
queriesData: ChartDataResponseResult[];
|
||||
}
|
||||
|
||||
export type WaterfallChartTransformedProps =
|
||||
BaseTransformedProps<EchartsWaterfallFormData> & CrossFilterTransformedProps;
|
||||
Reference in New Issue
Block a user