feat(plugin-chart-echarts): add only_total control to ts chart (#1313)

* feat(plugin-chart-echarts): add only_total control to ts chart * fix * fix: ci
apache · Nov 26, 2021 · 471f245 · 471f245
1 parent 1e76ac6
commit 471f245
Show file tree

Hide file tree

Showing 8 changed files with 59 additions and 81 deletions.
diff --git a/...superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Area/controlPanel.tsx b/...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/...erset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Regular/controlPanel.tsx b/...erset_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_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Step/controlPanel.tsx b/...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/...rary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/controlPanel.tsx b/...rary_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/...ary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts b/...ary_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/...orary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/transformers.ts b/...orary_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/...nd/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/types.ts b/...nd/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/...-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/controls.tsx b/...-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]];