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 e19960e7460..63824974e29 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/controlPanel.tsx +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/controlPanel.tsx @@ -129,6 +129,18 @@ const config: ControlPanelConfig = { {t('Series total setting')} , ], + [ + { + name: 'show_total', + config: { + type: 'CheckboxControl', + label: t('Show total'), + renderTrigger: true, + default: true, + description: t('Display cumulative total at end'), + }, + }, + ], [ { name: 'total_color', 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 68678216098..c77a2783f47 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/transformProps.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/transformProps.ts @@ -94,12 +94,14 @@ function transformer({ metric, breakdown, totalMark, + showTotal, }: { data: DataRecord[]; xAxis: string; metric: string; breakdown?: string; totalMark: string; + showTotal: boolean; }) { // Group by series (temporary map) const groupedData = data.reduce((acc, cur) => { @@ -121,11 +123,13 @@ function transformer({ 0, ); // Push total per period to the end of period values array - tempValue.push({ - [xAxis]: key, - [breakdown]: totalMark, - [metric]: sum, - }); + if (showTotal) { + tempValue.push({ + [xAxis]: key, + [breakdown]: totalMark, + [metric]: sum, + }); + } transformedData.push(...tempValue); }); } else { @@ -141,10 +145,12 @@ function transformer({ }); total += sum; }); - transformedData.push({ - [xAxis]: totalMark, - [metric]: total, - }); + if (showTotal) { + transformedData.push({ + [xAxis]: totalMark, + [metric]: total, + }); + } } return transformedData; @@ -183,6 +189,7 @@ export default function transformProps( xAxisLabel, yAxisFormat, showValue, + showTotal, totalLabel, increaseLabel, decreaseLabel, @@ -220,6 +227,7 @@ export default function transformProps( xAxis: xAxisName, metric: metricLabel, totalMark, + showTotal, }); const assistData: ISeriesData[] = []; 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 10cf1ee4230..9ca53991486 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/types.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/types.ts @@ -60,6 +60,7 @@ export type EchartsWaterfallFormData = QueryFormData & increaseLabel?: string; decreaseLabel?: string; totalLabel?: string; + showTotal: boolean; }; export const DEFAULT_FORM_DATA: Partial = { 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 761bc00b972..98906752f61 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 @@ -39,107 +39,129 @@ const extractSeriesName = (props: WaterfallChartTransformedProps) => { return series.map(item => item.name); }; -describe('Waterfall tranformProps', () => { - const data = [ - { year: '2019', name: 'Sylvester', sum: 10 }, - { year: '2019', name: 'Arnold', sum: 3 }, - { year: '2020', name: 'Sylvester', sum: -10 }, - { year: '2020', name: 'Arnold', sum: 5 }, - ]; +const data = [ + { year: '2019', name: 'Sylvester', sum: 10 }, + { year: '2019', name: 'Arnold', sum: 3 }, + { year: '2020', name: 'Sylvester', sum: -10 }, + { year: '2020', name: 'Arnold', sum: 5 }, +]; - const formData = { - colorScheme: 'bnbColors', - datasource: '3__table', - x_axis: 'year', - metric: 'sum', - increaseColor: { r: 0, b: 0, g: 0 }, - decreaseColor: { r: 0, b: 0, g: 0 }, - totalColor: { r: 0, b: 0, g: 0 }, - }; +const formData = { + colorScheme: 'bnbColors', + datasource: '3__table', + x_axis: 'year', + metric: 'sum', + increaseColor: { r: 0, b: 0, g: 0 }, + decreaseColor: { r: 0, b: 0, g: 0 }, + totalColor: { r: 0, b: 0, g: 0 }, + showTotal: true, +}; - it('should tranform chart props for viz when breakdown not exist', () => { - const chartProps = new ChartProps({ - formData: { ...formData, series: 'bar' }, - width: 800, - height: 600, - queriesData: [ - { - data, - }, - ], - theme: supersetTheme, - }); - const transformedProps = transformProps( - chartProps as unknown as EchartsWaterfallChartProps, - ); - expect(extractSeries(transformedProps)).toEqual([ - [0, 8, '-'], - [13, '-', '-'], - ['-', 5, '-'], - ['-', '-', 8], - ]); - }); - - it('should tranform chart props for viz when breakdown exist', () => { - const chartProps = new ChartProps({ - formData: { ...formData, groupby: 'name' }, - width: 800, - height: 600, - queriesData: [ - { - data, - }, - ], - theme: supersetTheme, - }); - const transformedProps = transformProps( - chartProps as unknown as EchartsWaterfallChartProps, - ); - expect(extractSeries(transformedProps)).toEqual([ - [0, 10, '-', 3, 3, '-'], - [10, 3, '-', '-', 5, '-'], - ['-', '-', '-', 10, '-', '-'], - ['-', '-', 13, '-', '-', 8], - ]); - }); - - it('renaming series names, checking legend and X axis labels', () => { - const chartProps = new ChartProps({ - formData: { - ...formData, - increaseLabel: 'sale increase', - decreaseLabel: 'sale decrease', - totalLabel: 'sale total', +test('should tranform chart props for viz when breakdown not exist', () => { + const chartProps = new ChartProps({ + formData: { ...formData, series: 'bar' }, + width: 800, + height: 600, + queriesData: [ + { + data, }, - width: 800, - height: 600, - queriesData: [ - { - data, - }, - ], - theme: supersetTheme, - }); - const transformedProps = transformProps( - chartProps as unknown as EchartsWaterfallChartProps, - ); - expect((transformedProps.echartOptions.legend as any).data).toEqual([ - 'sale increase', - 'sale decrease', - 'sale total', - ]); - - expect((transformedProps.echartOptions.xAxis as any).data).toEqual([ - '2019', - '2020', - 'sale total', - ]); - - expect(extractSeriesName(transformedProps)).toEqual([ - 'Assist', - 'sale increase', - 'sale decrease', - 'sale total', - ]); + ], + theme: supersetTheme, }); + const transformedProps = transformProps( + chartProps as unknown as EchartsWaterfallChartProps, + ); + expect(extractSeries(transformedProps)).toEqual([ + [0, 8, '-'], + [13, '-', '-'], + ['-', 5, '-'], + ['-', '-', 8], + ]); +}); + +test('should tranform chart props for viz when breakdown exist', () => { + const chartProps = new ChartProps({ + formData: { ...formData, groupby: 'name' }, + width: 800, + height: 600, + queriesData: [ + { + data, + }, + ], + theme: supersetTheme, + }); + const transformedProps = transformProps( + chartProps as unknown as EchartsWaterfallChartProps, + ); + expect(extractSeries(transformedProps)).toEqual([ + [0, 10, '-', 3, 3, '-'], + [10, 3, '-', '-', 5, '-'], + ['-', '-', '-', 10, '-', '-'], + ['-', '-', 13, '-', '-', 8], + ]); +}); + +test('renaming series names, checking legend and X axis labels', () => { + const chartProps = new ChartProps({ + formData: { + ...formData, + increaseLabel: 'sale increase', + decreaseLabel: 'sale decrease', + totalLabel: 'sale total', + }, + width: 800, + height: 600, + queriesData: [ + { + data, + }, + ], + theme: supersetTheme, + }); + const transformedProps = transformProps( + chartProps as unknown as EchartsWaterfallChartProps, + ); + expect((transformedProps.echartOptions.legend as any).data).toEqual([ + 'sale increase', + 'sale decrease', + 'sale total', + ]); + + expect((transformedProps.echartOptions.xAxis as any).data).toEqual([ + '2019', + '2020', + 'sale total', + ]); + + expect(extractSeriesName(transformedProps)).toEqual([ + 'Assist', + 'sale increase', + 'sale decrease', + 'sale total', + ]); +}); + +test('hide totals', () => { + const chartProps = new ChartProps({ + formData: { ...formData, series: 'bar', showTotal: false }, + width: 800, + height: 600, + queriesData: [ + { + data, + }, + ], + theme: supersetTheme, + }); + const transformedProps = transformProps( + chartProps as unknown as EchartsWaterfallChartProps, + ); + expect(extractSeries(transformedProps)).toEqual([ + [0, 8], + [13, '-'], + ['-', 5], + ['-', '-'], + ]); });