diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Area/controlPanel.tsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Area/controlPanel.tsx index bbe96e2527d5..128645ae3c63 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Area/controlPanel.tsx +++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Area/controlPanel.tsx @@ -32,7 +32,7 @@ import { EchartsTimeseriesContributionType, EchartsTimeseriesSeriesType, } from '../types'; -import { legendSection, showValueControl } from '../../controls'; +import { legendSection, showValueSection } from '../../controls'; const { contributionMode, @@ -43,7 +43,6 @@ const { opacity, rowLimit, seriesType, - stack, tooltipTimeFormat, truncateYAxis, yAxisBounds, @@ -135,19 +134,7 @@ const config: ControlPanelConfig = { }, }, ], - [showValueControl], - [ - { - name: 'stack', - config: { - type: 'CheckboxControl', - label: t('Stack series'), - renderTrigger: true, - default: stack, - description: t('Stack series on top of each other'), - }, - }, - ], + ...showValueSection, [ { name: 'markerEnabled', diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Regular/controlPanel.tsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Regular/controlPanel.tsx index 285ca561a702..79307315b9d1 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Regular/controlPanel.tsx +++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Regular/controlPanel.tsx @@ -28,7 +28,7 @@ import { } from '@superset-ui/chart-controls'; import { DEFAULT_FORM_DATA, EchartsTimeseriesContributionType } from '../types'; -import { legendSection, showValueControl } from '../../controls'; +import { legendSection, showValueSection } from '../../controls'; const { contributionMode, @@ -37,7 +37,6 @@ const { markerSize, minorSplitLine, rowLimit, - stack, tooltipTimeFormat, truncateYAxis, yAxisBounds, @@ -95,19 +94,7 @@ const config: ControlPanelConfig = { expanded: true, controlSetRows: [ ['color_scheme', 'label_colors'], - [showValueControl], - [ - { - name: 'stack', - config: { - type: 'CheckboxControl', - label: t('Stack series'), - renderTrigger: true, - default: stack, - description: t('Stack series on top of each other'), - }, - }, - ], + ...showValueSection, [ { name: 'markerEnabled', diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Step/controlPanel.tsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Step/controlPanel.tsx index 3da963876c1e..a0e0f85301e4 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Step/controlPanel.tsx +++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Step/controlPanel.tsx @@ -32,7 +32,7 @@ import { EchartsTimeseriesContributionType, EchartsTimeseriesSeriesType, } from '../types'; -import { legendSection, showValueControl } from '../../controls'; +import { legendSection, showValueSection } from '../../controls'; const { area, @@ -43,7 +43,6 @@ const { minorSplitLine, opacity, rowLimit, - stack, tooltipTimeFormat, truncateYAxis, yAxisBounds, @@ -120,19 +119,7 @@ const config: ControlPanelConfig = { }, }, ], - [showValueControl], - [ - { - name: 'stack', - config: { - type: 'CheckboxControl', - label: t('Stack series'), - renderTrigger: true, - default: stack, - description: t('Stack series on top of each other'), - }, - }, - ], + ...showValueSection, [ { name: 'area', diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/controlPanel.tsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/controlPanel.tsx index 53e70fc1ea7d..c85a986b3ecb 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/controlPanel.tsx +++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/controlPanel.tsx @@ -32,7 +32,7 @@ import { EchartsTimeseriesContributionType, EchartsTimeseriesSeriesType, } from './types'; -import { legendSection, showValueControl } from '../controls'; +import { legendSection, showValueSection } from '../controls'; const { area, @@ -44,7 +44,6 @@ const { opacity, rowLimit, seriesType, - stack, tooltipTimeFormat, truncateYAxis, yAxisBounds, @@ -123,19 +122,7 @@ const config: ControlPanelConfig = { }, }, ], - [showValueControl], - [ - { - name: 'stack', - config: { - type: 'CheckboxControl', - label: t('Stack series'), - renderTrigger: true, - default: stack, - description: t('Stack series on top of each other'), - }, - }, - ], + ...showValueSection, [ { name: 'area', diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts index 587b1ba38b9b..138c2371ee25 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts +++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts @@ -101,6 +101,7 @@ export default function transformProps( emitFilter, groupby, showValue, + onlyTotal, }: EchartsTimeseriesFormData = { ...DEFAULT_FORM_DATA, ...formData }; const colorScale = CategoricalColorNamespace.getScale(colorScheme as string); @@ -114,18 +115,18 @@ export default function transformProps( const totalStackedValues: number[] = []; const showValueIndexes: number[] = []; - if (stack) { - rebasedData.forEach(data => { - const values = Object.keys(data).reduce((prev, curr) => { - if (curr === '__timestamp') { - return prev; - } - const value = data[curr] || 0; - return prev + (value as number); - }, 0); - totalStackedValues.push(values); - }); + rebasedData.forEach(data => { + const values = Object.keys(data).reduce((prev, curr) => { + if (curr === '__timestamp') { + return prev; + } + const value = data[curr] || 0; + return prev + (value as number); + }, 0); + totalStackedValues.push(values); + }); + if (stack) { rawSeries.forEach((entry, seriesIndex) => { const { data = [] } = entry; (data as [Date, number][]).forEach((datum, dataIndex) => { @@ -148,6 +149,7 @@ export default function transformProps( stack, formatter, showValue, + onlyTotal, totalStackedValues, showValueIndexes, richTooltip, diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/transformers.ts b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/transformers.ts index 164977bb984e..2470bf22bf17 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/transformers.ts +++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/transformers.ts @@ -75,6 +75,7 @@ export function transformSeries( stack?: boolean; yAxisIndex?: number; showValue?: boolean; + onlyTotal?: boolean; formatter?: NumberFormatter; totalStackedValues?: number[]; showValueIndexes?: number[]; @@ -93,6 +94,7 @@ export function transformSeries( stack, yAxisIndex = 0, showValue, + onlyTotal, formatter, totalStackedValues = [], showValueIndexes = [], @@ -188,16 +190,14 @@ export function transformSeries( dataIndex, seriesIndex, } = params; - if (formatter) { - if (!stack) { - return formatter(numericValue); - } - if (seriesIndex === showValueIndexes[dataIndex]) { - return formatter(totalStackedValues[dataIndex]); - } - return ''; + if (!formatter) return numericValue; + if (!stack || !onlyTotal) { + return formatter(numericValue); } - return numericValue; + if (seriesIndex === showValueIndexes[dataIndex]) { + return formatter(totalStackedValues[dataIndex]); + } + return ''; }, }, }; diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/types.ts b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/types.ts index 9c0af522861a..1d6a7a9b70d0 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/types.ts +++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/types.ts @@ -76,6 +76,7 @@ export type EchartsTimeseriesFormData = QueryFormData & { emitFilter: boolean; groupby: string[]; showValue: boolean; + onlyTotal: boolean; } & EchartsLegendFormData; // @ts-ignore @@ -108,6 +109,7 @@ export const DEFAULT_FORM_DATA: EchartsTimeseriesFormData = { groupby: [], yAxisTitle: '', showValue: false, + onlyTotal: false, }; export interface EchartsTimeseriesChartProps extends ChartProps { diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/controls.tsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/controls.tsx index 88a344f4b9e9..e170febf7c35 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/controls.tsx +++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/controls.tsx @@ -94,7 +94,7 @@ export const legendSection = [ [legendMarginControl], ]; -export const showValueControl = { +const showValueControl = { name: 'show_value', config: { type: 'CheckboxControl', @@ -104,3 +104,29 @@ export const showValueControl = { description: t('Show series values on the chart'), }, }; + +const stackControl = { + name: 'stack', + config: { + type: 'CheckboxControl', + label: t('Stack series'), + renderTrigger: true, + default: false, + description: t('Stack series on top of each other'), + }, +}; + +const onlyTotalControl = { + name: 'only_total', + config: { + type: 'CheckboxControl', + label: t('Only Total'), + default: true, + renderTrigger: true, + description: t('Only show the total value on the stacked chart'), + visibility: ({ controls }: ControlPanelsContainerProps) => + Boolean(controls?.show_value?.value) && Boolean(controls?.stack?.value), + }, +}; + +export const showValueSection = [[showValueControl], [stackControl], [onlyTotalControl]];