;
+}
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/index.ts b/superset-frontend/plugins/plugin-chart-echarts/src/index.ts
index f8c7cf61036fb..5d1adcfe0caab 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/index.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/index.ts
@@ -35,6 +35,7 @@ export { default as EchartsTreemapChartPlugin } from './Treemap';
export { BigNumberChartPlugin, BigNumberTotalChartPlugin } from './BigNumber';
export { default as EchartsSunburstChartPlugin } from './Sunburst';
export { default as EchartsBubbleChartPlugin } from './Bubble';
+export { default as EchartsWaterfallChartPlugin } from './Waterfall';
export { default as BoxPlotTransformProps } from './BoxPlot/transformProps';
export { default as FunnelTransformProps } from './Funnel/transformProps';
diff --git a/superset-frontend/plugins/plugin-chart-echarts/test/Waterfall/buildQuery.test.ts b/superset-frontend/plugins/plugin-chart-echarts/test/Waterfall/buildQuery.test.ts
new file mode 100644
index 0000000000000..26d2673010df2
--- /dev/null
+++ b/superset-frontend/plugins/plugin-chart-echarts/test/Waterfall/buildQuery.test.ts
@@ -0,0 +1,37 @@
+/**
+ * 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 buildQuery from '../../src/Waterfall/buildQuery';
+
+describe('Waterfall buildQuery', () => {
+ const formData = {
+ datasource: '5__table',
+ granularity_sqla: 'ds',
+ metric: 'foo',
+ series: 'bar',
+ columns: ['baz'],
+ viz_type: 'my_chart',
+ };
+
+ it('should build query fields from form data', () => {
+ const queryContext = buildQuery(formData);
+ const [query] = queryContext.queries;
+ expect(query.metrics).toEqual(['foo']);
+ expect(query.groupby).toEqual(['bar', 'baz']);
+ });
+});
diff --git a/superset-frontend/plugins/plugin-chart-echarts/test/Waterfall/transformProps.test.ts b/superset-frontend/plugins/plugin-chart-echarts/test/Waterfall/transformProps.test.ts
new file mode 100644
index 0000000000000..dbcffbf5f964b
--- /dev/null
+++ b/superset-frontend/plugins/plugin-chart-echarts/test/Waterfall/transformProps.test.ts
@@ -0,0 +1,114 @@
+/**
+ * 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 { ChartProps } from '@superset-ui/core';
+import transformProps from '../../src/Waterfall/transformProps';
+
+describe('Waterfall tranformProps', () => {
+ const data = [
+ { foo: 'Sylvester', bar: '2019', sum: 10 },
+ { foo: 'Arnold', bar: '2019', sum: 3 },
+ { foo: 'Sylvester', bar: '2020', sum: -10 },
+ { foo: 'Arnold', bar: '2020', sum: 5 },
+ ];
+
+ it('should tranform chart props for viz when breakdown not exist', () => {
+ const formData1 = {
+ colorScheme: 'bnbColors',
+ datasource: '3__table',
+ granularity_sqla: 'ds',
+ metric: 'sum',
+ series: 'bar',
+ };
+ const chartProps = new ChartProps({
+ formData: formData1,
+ width: 800,
+ height: 600,
+ queriesData: [
+ {
+ data,
+ },
+ ],
+ });
+ expect(transformProps(chartProps)).toEqual(
+ expect.objectContaining({
+ width: 800,
+ height: 600,
+ echartOptions: expect.objectContaining({
+ series: [
+ expect.objectContaining({
+ data: [0, 8, '-'],
+ }),
+ expect.objectContaining({
+ data: [13, '-', '-'],
+ }),
+ expect.objectContaining({
+ data: ['-', 5, '-'],
+ }),
+ expect.objectContaining({
+ data: ['-', '-', 8],
+ }),
+ ],
+ }),
+ }),
+ );
+ });
+
+ it('should tranform chart props for viz when breakdown exist', () => {
+ const formData1 = {
+ colorScheme: 'bnbColors',
+ datasource: '3__table',
+ granularity_sqla: 'ds',
+ metric: 'sum',
+ series: 'bar',
+ columns: 'foo',
+ };
+ const chartProps = new ChartProps({
+ formData: formData1,
+ width: 800,
+ height: 600,
+ queriesData: [
+ {
+ data,
+ },
+ ],
+ });
+ expect(transformProps(chartProps)).toEqual(
+ expect.objectContaining({
+ width: 800,
+ height: 600,
+ echartOptions: expect.objectContaining({
+ series: [
+ expect.objectContaining({
+ data: [0, 10, '-', 3, 3, '-'],
+ }),
+ expect.objectContaining({
+ data: [10, 3, '-', '-', 5, '-'],
+ }),
+ expect.objectContaining({
+ data: ['-', '-', '-', 10, '-', '-'],
+ }),
+ expect.objectContaining({
+ data: ['-', '-', 13, '-', '-', 8],
+ }),
+ ],
+ }),
+ }),
+ );
+ });
+});
From c13e2f40f2a8b96faeac23eb76811cdd40028c6f Mon Sep 17 00:00:00 2001
From: stephenLYZ <750188453@qq.com>
Date: Tue, 8 Nov 2022 00:29:20 +0800
Subject: [PATCH 2/6] improve waterfall
---
.../src/Waterfall/EchartsWaterfall.tsx | 69 +++++-
.../src/Waterfall/buildQuery.ts | 2 +-
.../src/Waterfall/constants.ts | 29 +++
.../src/Waterfall/controlPanel.tsx | 23 +-
.../src/Waterfall/index.ts | 3 +-
.../src/Waterfall/transformProps.ts | 202 ++++++++++--------
.../src/Waterfall/types.ts | 25 +--
.../test/Waterfall/buildQuery.test.ts | 7 +-
.../test/Waterfall/transformProps.test.ts | 13 +-
.../src/visualizations/presets/MainPreset.js | 4 +
10 files changed, 258 insertions(+), 119 deletions(-)
create mode 100644 superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/constants.ts
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/EchartsWaterfall.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/EchartsWaterfall.tsx
index d423ff0a21954..636d4816b3623 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/EchartsWaterfall.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/EchartsWaterfall.tsx
@@ -16,14 +16,69 @@
* specific language governing permissions and limitations
* under the License.
*/
-import React from 'react';
+import React, { useCallback } from 'react';
import Echart from '../components/Echart';
+import { allEventHandlers } from '../utils/eventHandlers';
import { WaterfallChartTransformedProps } from './types';
-export default function EchartsWaterfall({
- height,
- width,
- echartOptions,
-}: WaterfallChartTransformedProps) {
- return ;
+export default function EchartsWaterfall(
+ props: WaterfallChartTransformedProps,
+) {
+ const {
+ height,
+ width,
+ echartOptions,
+ setDataMask,
+ labelMap,
+ groupby,
+ selectedValues,
+ formData,
+ } = props;
+ const handleChange = useCallback(
+ (values: string[]) => {
+ if (!formData.emitFilter) {
+ return;
+ }
+
+ 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,
+ },
+ });
+ },
+ [formData.emitFilter, setDataMask, groupby, labelMap],
+ );
+
+ const eventHandlers = allEventHandlers(props, handleChange);
+
+ return (
+
+ );
}
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/buildQuery.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/buildQuery.ts
index 3be90f39f50f8..353ee8fa20e00 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/buildQuery.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/buildQuery.ts
@@ -23,7 +23,7 @@ export default function buildQuery(formData: QueryFormData) {
return buildQueryContext(formData, baseQueryObject => [
{
...baseQueryObject,
- groupby: columns?.length ? [series, columns] : [series],
+ columns: columns?.length ? [series, columns] : [series],
},
]);
}
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/constants.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/constants.ts
new file mode 100644
index 0000000000000..17b7861f80ade
--- /dev/null
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/constants.ts
@@ -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 = '-';
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/controlPanel.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/controlPanel.tsx
index a77906b9672a1..4ab84fba6258a 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/controlPanel.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/controlPanel.tsx
@@ -17,10 +17,12 @@
* under the License.
*/
import React from 'react';
-import { t } from '@superset-ui/core';
+import { ensureIsArray, t } from '@superset-ui/core';
import {
ControlPanelConfig,
+ emitFilterControl,
formatSelectOptions,
+ getStandardizedControls,
sections,
} from '@superset-ui/chart-controls';
import { showValueControl } from '../controls';
@@ -32,10 +34,11 @@ const config: ControlPanelConfig = {
label: t('Query'),
expanded: true,
controlSetRows: [
- ['metric'],
- ['adhoc_filters'],
['series'],
['columns'],
+ ['metric'],
+ ['adhoc_filters'],
+ emitFilterControl,
['row_limit'],
],
},
@@ -71,7 +74,7 @@ const config: ControlPanelConfig = {
},
},
],
- [{t('X Axis')}
],
+ [{t('X Axis')}
],
[
{
name: 'x_axis_label',
@@ -103,7 +106,7 @@ const config: ControlPanelConfig = {
},
},
],
- [{t('Y Axis')}
],
+ [{t('Y Axis')}
],
[
{
name: 'y_axis_label',
@@ -126,6 +129,16 @@ const config: ControlPanelConfig = {
multi: false,
},
},
+ formDataOverrides: formData => {
+ const series = getStandardizedControls()
+ .popAllColumns()
+ .filter(col => !ensureIsArray(formData.columns).includes(col));
+ return {
+ ...formData,
+ series,
+ metric: getStandardizedControls().shiftMetric(),
+ };
+ },
};
export default config;
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/index.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/index.ts
index e249bc93d6f0f..5242434f94c1f 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/index.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/index.ts
@@ -17,7 +17,7 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { ChartMetadata, ChartPlugin, t } from '@superset-ui/core';
+import { Behavior, ChartMetadata, ChartPlugin, t } from '@superset-ui/core';
import buildQuery from './buildQuery';
import controlPanel from './controlPanel';
import transformProps from './transformProps';
@@ -44,6 +44,7 @@ export default class EchartsWaterfallChartPlugin extends ChartPlugin<
controlPanel,
loadChart: () => import('./EchartsWaterfall'),
metadata: new ChartMetadata({
+ behaviors: [Behavior.INTERACTIVE_CHART, Behavior.DRILL_TO_DETAIL],
credits: ['https://echarts.apache.org'],
category: t('Evolution'),
description: '',
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/transformProps.ts
index c6329d4422d15..7219b89c44608 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/transformProps.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/transformProps.ts
@@ -19,35 +19,32 @@
import {
CategoricalColorNamespace,
DataRecord,
+ getColumnLabel,
getMetricLabel,
getNumberFormatter,
NumberFormatter,
+ SupersetTheme,
t,
} from '@superset-ui/core';
import { EChartsOption, BarSeriesOption } from 'echarts';
+import { CallbackDataParams } from 'echarts/types/src/util/types';
import {
- CallbackDataParams,
- OptionDataValue,
-} from 'echarts/types/src/util/types';
-import { BarDataItemOption } from 'echarts/types/src/chart/bar/BarSeries';
-import { EchartsWaterfallFormData, EchartsWaterfallChartProps } from './types';
+ EchartsWaterfallFormData,
+ EchartsWaterfallChartProps,
+ ISeriesData,
+ WaterfallChartTransformedProps,
+} from './types';
import { defaultGrid, defaultTooltip, defaultYAxis } from '../defaults';
-import { EchartsProps } from '../types';
-
-const TOTAL_MARK = t('Total');
-const ASSIST_MARK = t('assist');
-
-const LEGEND = {
- INCREASE: t('Increase'),
- DECREASE: t('Decrease'),
- TOTAL: t('Total'),
-};
+import { ASSIST_MARK, LEGEND, TOKEN, TOTAL_MARK } from './constants';
+import { extractGroupbyLabel, getColtypesMapping } from '../utils/series';
function formatTooltip({
+ theme,
params,
numberFormatter,
richTooltip,
}: {
+ theme: SupersetTheme;
params: any;
numberFormatter: NumberFormatter;
richTooltip: boolean;
@@ -57,24 +54,35 @@ function formatTooltip({
${params.name}
${params.marker}
- ${
- params.seriesName
- }:
- ${numberFormatter(
- params.data,
- )}
+
+ ${params.seriesName}:
+
+
+ ${numberFormatter(params.data)}
+
`;
if (richTooltip) {
const [, increaseParams, decreaseParams, totalParams] = params;
- if (increaseParams.data !== '-' || increaseParams.data === null) {
+ if (increaseParams.data !== TOKEN || increaseParams.data === null) {
return htmlMaker(increaseParams);
}
- if (decreaseParams.data !== '-') {
+ if (decreaseParams.data !== TOKEN) {
return htmlMaker(decreaseParams);
}
- if (totalParams.data !== '-') {
+ if (totalParams.data !== TOKEN) {
return htmlMaker(totalParams);
}
} else if (params.seriesName !== ASSIST_MARK) {
@@ -85,12 +93,12 @@ function formatTooltip({
function transformer({
data,
- columns,
+ breakdown,
series,
metric,
}: {
data: DataRecord[];
- columns: string;
+ breakdown: string;
series: string;
metric: string;
}) {
@@ -105,7 +113,7 @@ function transformer({
const transformedData: DataRecord[] = [];
- if (columns?.length) {
+ if (breakdown?.length) {
groupedData.forEach((value, key) => {
const tempValue = value;
// Calc total per period
@@ -116,7 +124,7 @@ function transformer({
// Push total per period to the end of period values array
tempValue.push({
[series]: key,
- [columns]: TOTAL_MARK,
+ [breakdown]: TOTAL_MARK,
[metric]: sum,
});
transformedData.push(...tempValue);
@@ -145,13 +153,24 @@ function transformer({
export default function transformProps(
chartProps: EchartsWaterfallChartProps,
-): EchartsProps {
- const { width, height, formData, queriesData } = chartProps;
+): WaterfallChartTransformedProps {
+ const {
+ width,
+ height,
+ formData,
+ queriesData,
+ hooks,
+ filterState,
+ theme,
+ inContextMenu,
+ } = chartProps;
const { data = [] } = queriesData[0];
+ const coltypeMapping = getColtypesMapping(queriesData[0]);
+ const { setDataMask = () => {}, onContextMenu } = hooks;
const {
colorScheme,
metric = '',
- columns = '',
+ columns,
series,
xTicksLayout,
showLegend,
@@ -160,6 +179,8 @@ export default function transformProps(
yAxisFormat,
richTooltip,
showValue,
+ emitFilter,
+ sliceId,
} = formData as EchartsWaterfallFormData;
const colorFn = CategoricalColorNamespace.getScale(colorScheme as string);
const numberFormatter = getNumberFormatter(yAxisFormat);
@@ -171,38 +192,28 @@ export default function transformProps(
}
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();
const transformedData = transformer({
data,
- columns,
+ breakdown,
series,
metric: metricLabel,
});
- const assistData: (
- | BarDataItemOption
- | OptionDataValue
- | OptionDataValue[]
- )[] = [];
- const increaseData: (
- | BarDataItemOption
- | OptionDataValue
- | OptionDataValue[]
- )[] = [];
- const decreaseData: (
- | BarDataItemOption
- | OptionDataValue
- | OptionDataValue[]
- )[] = [];
- const totalData: (BarDataItemOption | OptionDataValue | OptionDataValue[])[] =
- [];
+ const assistData: ISeriesData[] = [];
+ const increaseData: ISeriesData[] = [];
+ const decreaseData: ISeriesData[] = [];
+ const totalData: ISeriesData[] = [];
- transformedData.forEach((data, index, self) => {
+ transformedData.forEach((datum, index, self) => {
const totalSum = self.slice(0, index + 1).reduce((prev, cur, i) => {
- if (columns?.length) {
- if (cur[columns] !== TOTAL_MARK || i === 0) {
+ if (breakdown?.length) {
+ if (cur[breakdown] !== TOTAL_MARK || i === 0) {
return prev + ((cur[metricLabel] as number) ?? 0);
}
} else if (cur[series] !== TOTAL_MARK) {
@@ -211,40 +222,55 @@ export default function transformProps(
return prev;
}, 0);
- const value = data[metricLabel] as number;
+ 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 (data[columns] === TOTAL_MARK || data[series] === TOTAL_MARK) {
- increaseData.push('-');
- decreaseData.push('-');
- assistData.push('-');
+ 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('-');
+ increaseData.push(TOKEN);
decreaseData.push(Math.abs(value));
assistData.push(totalSum);
- totalData.push('-');
+ totalData.push(TOKEN);
} else {
increaseData.push(value);
- decreaseData.push('-');
+ decreaseData.push(TOKEN);
assistData.push(totalSum - value);
- totalData.push('-');
+ 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 };
+ 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 (columns?.length) {
+ if (breakdown?.length) {
xAxisData = transformedData.map(row => {
- if (row[columns] === TOTAL_MARK) {
+ if (row[breakdown] === TOTAL_MARK) {
return row[series] as string;
}
- return row[columns] as string;
+ return row[breakdown] as string;
});
} else {
xAxisData = transformedData.map(row => row[series] as string);
@@ -256,13 +282,13 @@ export default function transformProps(
type: 'bar',
stack: 'stack',
itemStyle: {
- borderColor: 'rgba(0,0,0,0)',
- color: 'rgba(0,0,0,0)',
+ borderColor: 'transparent',
+ color: 'transparent',
},
emphasis: {
itemStyle: {
- borderColor: 'rgba(0,0,0,0)',
- color: 'rgba(0,0,0,0)',
+ borderColor: 'transparent',
+ color: 'transparent',
},
},
data: assistData,
@@ -277,7 +303,7 @@ export default function transformProps(
formatter,
},
itemStyle: {
- color: colorFn(LEGEND.INCREASE),
+ color: colorFn(LEGEND.INCREASE, sliceId),
},
data: increaseData,
},
@@ -291,7 +317,7 @@ export default function transformProps(
formatter,
},
itemStyle: {
- color: colorFn(LEGEND.DECREASE),
+ color: colorFn(LEGEND.DECREASE, sliceId),
},
data: decreaseData,
},
@@ -305,7 +331,7 @@ export default function transformProps(
formatter,
},
itemStyle: {
- color: colorFn(LEGEND.TOTAL),
+ color: colorFn(LEGEND.TOTAL, sliceId),
},
data: totalData,
},
@@ -314,10 +340,10 @@ export default function transformProps(
const echartOptions: EChartsOption = {
grid: {
...defaultGrid,
- top: 30,
- bottom: 30,
- left: 20,
- right: 20,
+ top: theme.gridUnit * 7,
+ bottom: theme.gridUnit * 7,
+ left: theme.gridUnit * 5,
+ right: theme.gridUnit * 7,
},
legend: {
show: showLegend,
@@ -328,7 +354,7 @@ export default function transformProps(
data: xAxisData,
name: xAxisLabel,
nameTextStyle: {
- padding: [15, 0, 0, 0],
+ padding: [theme.gridUnit * 4, 0, 0, 0],
},
nameLocation: 'middle',
axisLabel,
@@ -337,19 +363,20 @@ export default function transformProps(
...defaultYAxis,
type: 'value',
nameTextStyle: {
- padding: [0, 0, 20, 0],
+ padding: [0, 0, theme.gridUnit * 5, 0],
},
nameLocation: 'middle',
name: yAxisLabel,
-
axisLabel: { formatter: numberFormatter },
},
tooltip: {
...defaultTooltip,
appendToBody: true,
trigger: richTooltip ? 'axis' : 'item',
+ show: !inContextMenu,
formatter: (params: any) =>
formatTooltip({
+ theme,
params,
numberFormatter,
richTooltip,
@@ -359,8 +386,15 @@ export default function transformProps(
};
return {
+ formData,
width,
height,
echartOptions,
+ setDataMask,
+ emitFilter,
+ labelMap: Object.fromEntries(columnsLabelMap),
+ groupby,
+ selectedValues: filterState.selectedValues || [],
+ onContextMenu,
};
}
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/types.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/types.ts
index ce0684a271f11..6774fa4d2b21d 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/types.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/types.ts
@@ -19,13 +19,12 @@
import {
ChartDataResponseResult,
ChartProps,
- DataRecordValue,
QueryFormData,
QueryFormMetric,
- SetDataMaskHook,
} from '@superset-ui/core';
-import { EChartsOption } from 'echarts';
-import { EchartsLegendFormData } from '../types';
+import { BarDataItemOption } from 'echarts/types/src/chart/bar/BarSeries';
+import { OptionDataValue } from 'echarts/types/src/util/types';
+import { EchartsLegendFormData, EChartTransformedProps } from '../types';
export type WaterfallFormXTicksLayout =
| '45°'
@@ -34,6 +33,11 @@ export type WaterfallFormXTicksLayout =
| 'flat'
| 'staggered';
+export type ISeriesData =
+ | BarDataItemOption
+ | OptionDataValue
+ | OptionDataValue[];
+
export type EchartsWaterfallFormData = QueryFormData &
EchartsLegendFormData & {
metric: QueryFormMetric;
@@ -54,14 +58,5 @@ export interface EchartsWaterfallChartProps extends ChartProps {
queriesData: ChartDataResponseResult[];
}
-export interface WaterfallChartTransformedProps {
- formData: EchartsWaterfallFormData;
- height: number;
- width: number;
- echartOptions: EChartsOption;
- emitFilter: boolean;
- setDataMask: SetDataMaskHook;
- labelMap: Record;
- groupby: string[];
- selectedValues: Record;
-}
+export type WaterfallChartTransformedProps =
+ EChartTransformedProps;
diff --git a/superset-frontend/plugins/plugin-chart-echarts/test/Waterfall/buildQuery.test.ts b/superset-frontend/plugins/plugin-chart-echarts/test/Waterfall/buildQuery.test.ts
index 26d2673010df2..9c5d28376ba28 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/test/Waterfall/buildQuery.test.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/test/Waterfall/buildQuery.test.ts
@@ -16,6 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
+import { SqlaFormData } from '@superset-ui/core';
import buildQuery from '../../src/Waterfall/buildQuery';
describe('Waterfall buildQuery', () => {
@@ -24,14 +25,14 @@ describe('Waterfall buildQuery', () => {
granularity_sqla: 'ds',
metric: 'foo',
series: 'bar',
- columns: ['baz'],
+ columns: 'baz',
viz_type: 'my_chart',
};
it('should build query fields from form data', () => {
- const queryContext = buildQuery(formData);
+ const queryContext = buildQuery(formData as unknown as SqlaFormData);
const [query] = queryContext.queries;
expect(query.metrics).toEqual(['foo']);
- expect(query.groupby).toEqual(['bar', 'baz']);
+ expect(query.columns).toEqual(['bar', 'baz']);
});
});
diff --git a/superset-frontend/plugins/plugin-chart-echarts/test/Waterfall/transformProps.test.ts b/superset-frontend/plugins/plugin-chart-echarts/test/Waterfall/transformProps.test.ts
index dbcffbf5f964b..c221b9303358a 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/test/Waterfall/transformProps.test.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/test/Waterfall/transformProps.test.ts
@@ -16,7 +16,8 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { ChartProps } from '@superset-ui/core';
+import { ChartProps, supersetTheme } from '@superset-ui/core';
+import { EchartsWaterfallChartProps } from '../../src/Waterfall/types';
import transformProps from '../../src/Waterfall/transformProps';
describe('Waterfall tranformProps', () => {
@@ -44,8 +45,11 @@ describe('Waterfall tranformProps', () => {
data,
},
],
+ theme: supersetTheme,
});
- expect(transformProps(chartProps)).toEqual(
+ expect(
+ transformProps(chartProps as unknown as EchartsWaterfallChartProps),
+ ).toEqual(
expect.objectContaining({
width: 800,
height: 600,
@@ -87,8 +91,11 @@ describe('Waterfall tranformProps', () => {
data,
},
],
+ theme: supersetTheme,
});
- expect(transformProps(chartProps)).toEqual(
+ expect(
+ transformProps(chartProps as unknown as EchartsWaterfallChartProps),
+ ).toEqual(
expect.objectContaining({
width: 800,
height: 600,
diff --git a/superset-frontend/src/visualizations/presets/MainPreset.js b/superset-frontend/src/visualizations/presets/MainPreset.js
index 451196c35dbac..f37a9155e1d71 100644
--- a/superset-frontend/src/visualizations/presets/MainPreset.js
+++ b/superset-frontend/src/visualizations/presets/MainPreset.js
@@ -66,6 +66,7 @@ import {
EchartsTreeChartPlugin,
EchartsSunburstChartPlugin,
EchartsBubbleChartPlugin,
+ EchartsWaterfallChartPlugin,
} from '@superset-ui/plugin-chart-echarts';
import {
SelectFilterPlugin,
@@ -153,6 +154,9 @@ export default class MainPreset extends Preset {
new EchartsTimeseriesStepChartPlugin().configure({
key: 'echarts_timeseries_step',
}),
+ new EchartsWaterfallChartPlugin().configure({
+ key: 'waterfall',
+ }),
new SelectFilterPlugin().configure({ key: 'filter_select' }),
new RangeFilterPlugin().configure({ key: 'filter_range' }),
new TimeFilterPlugin().configure({ key: 'filter_time' }),
From 3e46d94aaf52782c673092f50521e3b17304fda5 Mon Sep 17 00:00:00 2001
From: stephenLYZ <750188453@qq.com>
Date: Tue, 8 Nov 2022 00:37:49 +0800
Subject: [PATCH 3/6] fix lint
---
.../plugins/plugin-chart-echarts/src/Waterfall/transformProps.ts | 1 -
1 file changed, 1 deletion(-)
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/transformProps.ts
index 7219b89c44608..95a1a34e3eab9 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/transformProps.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/transformProps.ts
@@ -24,7 +24,6 @@ import {
getNumberFormatter,
NumberFormatter,
SupersetTheme,
- t,
} from '@superset-ui/core';
import { EChartsOption, BarSeriesOption } from 'echarts';
import { CallbackDataParams } from 'echarts/types/src/util/types';
From f63b6fe09506b5faafe936d7533279707e3c6e9f Mon Sep 17 00:00:00 2001
From: stephenLYZ <750188453@qq.com>
Date: Tue, 8 Nov 2022 01:00:29 +0800
Subject: [PATCH 4/6] fix lint
---
.../plugins/plugin-chart-echarts/Waterfall/Stories.tsx | 8 +++++---
.../plugins/plugin-chart-echarts/src/index.ts | 1 +
2 files changed, 6 insertions(+), 3 deletions(-)
diff --git a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-echarts/Waterfall/Stories.tsx b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-echarts/Waterfall/Stories.tsx
index b2b2b2dcd792d..6b880fd6f8c2f 100644
--- a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-echarts/Waterfall/Stories.tsx
+++ b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-echarts/Waterfall/Stories.tsx
@@ -19,8 +19,10 @@
import React from 'react';
import { SuperChart, getChartTransformPropsRegistry } from '@superset-ui/core';
import { withKnobs } from '@storybook/addon-knobs';
-import { EchartsWaterfallChartPlugin } from '@superset-ui/plugin-chart-echarts';
-import transformProps from '@superset-ui/plugin-chart-echarts/src/Waterfall/transformProps';
+import {
+ EchartsWaterfallChartPlugin,
+ WaterfallTransformProps,
+} from '@superset-ui/plugin-chart-echarts';
import data from './data';
import { withResizableChartDemo } from '../../../../shared/components/ResizableChartDemo';
@@ -30,7 +32,7 @@ new EchartsWaterfallChartPlugin()
getChartTransformPropsRegistry().registerValue(
'echarts-waterfall',
- transformProps,
+ WaterfallTransformProps,
);
export default {
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/index.ts b/superset-frontend/plugins/plugin-chart-echarts/src/index.ts
index 5d1adcfe0caab..1a7458a58605e 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/index.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/index.ts
@@ -49,6 +49,7 @@ export { default as TreeTransformProps } from './Tree/transformProps';
export { default as TreemapTransformProps } from './Treemap/transformProps';
export { default as SunburstTransformProps } from './Sunburst/transformProps';
export { default as BubbleTransformProps } from './Bubble/transformProps';
+export { default as WaterfallTransformProps } from './Waterfall/transformProps';
export { DEFAULT_FORM_DATA as TimeseriesDefaultFormData } from './Timeseries/constants';
From bb68aace1fb02de75db267e96cb31e01d967ca0b Mon Sep 17 00:00:00 2001
From: stephenLYZ <750188453@qq.com>
Date: Wed, 9 Nov 2022 11:13:47 +0800
Subject: [PATCH 5/6] cross-filter by default
---
.../src/Waterfall/EchartsWaterfall.tsx | 7 +------
.../plugin-chart-echarts/src/Waterfall/controlPanel.tsx | 2 --
.../plugin-chart-echarts/src/Waterfall/transformProps.ts | 2 --
3 files changed, 1 insertion(+), 10 deletions(-)
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/EchartsWaterfall.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/EchartsWaterfall.tsx
index 636d4816b3623..7fca5e642bca7 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/EchartsWaterfall.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/EchartsWaterfall.tsx
@@ -32,14 +32,9 @@ export default function EchartsWaterfall(
labelMap,
groupby,
selectedValues,
- formData,
} = props;
const handleChange = useCallback(
(values: string[]) => {
- if (!formData.emitFilter) {
- return;
- }
-
const groupbyValues = values.map(value => labelMap[value]);
setDataMask({
@@ -67,7 +62,7 @@ export default function EchartsWaterfall(
},
});
},
- [formData.emitFilter, setDataMask, groupby, labelMap],
+ [setDataMask, groupby, labelMap],
);
const eventHandlers = allEventHandlers(props, handleChange);
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/controlPanel.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/controlPanel.tsx
index 4ab84fba6258a..852f2680b3c15 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/controlPanel.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/controlPanel.tsx
@@ -20,7 +20,6 @@ import React from 'react';
import { ensureIsArray, t } from '@superset-ui/core';
import {
ControlPanelConfig,
- emitFilterControl,
formatSelectOptions,
getStandardizedControls,
sections,
@@ -38,7 +37,6 @@ const config: ControlPanelConfig = {
['columns'],
['metric'],
['adhoc_filters'],
- emitFilterControl,
['row_limit'],
],
},
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/transformProps.ts
index 95a1a34e3eab9..a8a2a054a8311 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/transformProps.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/transformProps.ts
@@ -178,7 +178,6 @@ export default function transformProps(
yAxisFormat,
richTooltip,
showValue,
- emitFilter,
sliceId,
} = formData as EchartsWaterfallFormData;
const colorFn = CategoricalColorNamespace.getScale(colorScheme as string);
@@ -390,7 +389,6 @@ export default function transformProps(
height,
echartOptions,
setDataMask,
- emitFilter,
labelMap: Object.fromEntries(columnsLabelMap),
groupby,
selectedValues: filterState.selectedValues || [],
From fa0d0e6fedf4fadab6f605757dd0135205674ff4 Mon Sep 17 00:00:00 2001
From: "Michael S. Molina"
Date: Thu, 5 Oct 2023 13:24:38 -0300
Subject: [PATCH 6/6] Fixes lint
---
.../src/Waterfall/EchartsWaterfall.tsx | 7 ++++++-
.../src/Waterfall/transformProps.ts | 8 ++++++--
.../plugin-chart-echarts/src/Waterfall/types.ts | 10 +++++++---
3 files changed, 19 insertions(+), 6 deletions(-)
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/EchartsWaterfall.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/EchartsWaterfall.tsx
index 7fca5e642bca7..a448c9f93eab6 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/EchartsWaterfall.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/EchartsWaterfall.tsx
@@ -31,6 +31,7 @@ export default function EchartsWaterfall(
setDataMask,
labelMap,
groupby,
+ refs,
selectedValues,
} = props;
const handleChange = useCallback(
@@ -65,10 +66,14 @@ export default function EchartsWaterfall(
[setDataMask, groupby, labelMap],
);
- const eventHandlers = allEventHandlers(props, handleChange);
+ const eventHandlers = {
+ ...allEventHandlers(props),
+ handleChange,
+ };
return (
{}, onContextMenu } = hooks;
@@ -368,7 +371,7 @@ export default function transformProps(
axisLabel: { formatter: numberFormatter },
},
tooltip: {
- ...defaultTooltip,
+ ...getDefaultTooltip(refs),
appendToBody: true,
trigger: richTooltip ? 'axis' : 'item',
show: !inContextMenu,
@@ -384,6 +387,7 @@ export default function transformProps(
};
return {
+ refs,
formData,
width,
height,
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/types.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/types.ts
index 6774fa4d2b21d..9821cf3146392 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/types.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/types.ts
@@ -24,7 +24,11 @@ import {
} from '@superset-ui/core';
import { BarDataItemOption } from 'echarts/types/src/chart/bar/BarSeries';
import { OptionDataValue } from 'echarts/types/src/util/types';
-import { EchartsLegendFormData, EChartTransformedProps } from '../types';
+import {
+ BaseTransformedProps,
+ CrossFilterTransformedProps,
+ LegendFormData,
+} from '../types';
export type WaterfallFormXTicksLayout =
| '45°'
@@ -39,7 +43,7 @@ export type ISeriesData =
| OptionDataValue[];
export type EchartsWaterfallFormData = QueryFormData &
- EchartsLegendFormData & {
+ LegendFormData & {
metric: QueryFormMetric;
yAxisLabel: string;
xAxisLabel: string;
@@ -59,4 +63,4 @@ export interface EchartsWaterfallChartProps extends ChartProps {
}
export type WaterfallChartTransformedProps =
- EChartTransformedProps;
+ BaseTransformedProps & CrossFilterTransformedProps;