feat(plugin-chart-echarts): Add support for series values to ECharts …

…timeseries charts (#1279) * feat(plugin-chart-echarts): add support for series values * feat(plugin-chart-echarts): name * fix: lint * fix: extract control * fix: extract control
apache · Nov 26, 2021 · f68d465 · f68d465
1 parent e693381
commit f68d465
Show file tree

Hide file tree

Showing 13 changed files with 99 additions and 12 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 } from '../../controls';
+import { legendSection, showValueControl } from '../../controls';
 
 const {
   annotationLayers,
@@ -251,6 +251,7 @@ const config: ControlPanelConfig = {
             },
           },
         ],
+        [showValueControl],
         [
           {
             name: 'stack',

diff --git a/...mporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Area/index.ts b/...mporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Area/index.ts
@@ -30,7 +30,7 @@ const areaTransformProps = (chartProps: EchartsTimeseriesChartProps) =>
     formData: { ...chartProps.formData, area: true },
   });
 
-export default class EchartsTimeseriesScatterChartPlugin extends ChartPlugin<
+export default class EchartsAreaChartPlugin extends ChartPlugin<
   EchartsTimeseriesFormData,
   EchartsTimeseriesChartProps
 > {

diff --git a/..._superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Regular/Bar/index.ts b/..._superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Regular/Bar/index.ts
@@ -36,7 +36,7 @@ const barTransformProps = (chartProps: EchartsTimeseriesChartProps) =>
     formData: { ...chartProps.formData, seriesType: EchartsTimeseriesSeriesType.Bar },
   });
 
-export default class EchartsTimeseriesScatterChartPlugin extends ChartPlugin<
+export default class EchartsTimeseriesBarChartPlugin extends ChartPlugin<
   EchartsTimeseriesFormData,
   EchartsTimeseriesChartProps
 > {

diff --git a/...superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Regular/Line/index.ts b/...superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Regular/Line/index.ts
@@ -35,7 +35,7 @@ const lineTransformProps = (chartProps: EchartsTimeseriesChartProps) =>
     formData: { ...chartProps.formData, seriesType: EchartsTimeseriesSeriesType.Line },
   });
 
-export default class EchartsTimeseriesScatterChartPlugin extends ChartPlugin<
+export default class EchartsTimeseriesLineChartPlugin extends ChartPlugin<
   EchartsTimeseriesFormData,
   EchartsTimeseriesChartProps
 > {

diff --git a/...et_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Regular/SmoothLine/index.ts b/...et_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Regular/SmoothLine/index.ts
@@ -34,7 +34,7 @@ const smoothTransformProps = (chartProps: EchartsTimeseriesChartProps) =>
     formData: { ...chartProps.formData, seriesType: EchartsTimeseriesSeriesType.Smooth },
   });
 
-export default class EchartsTimeseriesScatterChartPlugin extends ChartPlugin<
+export default class EchartsTimeseriesSmoothLineChartPlugin extends ChartPlugin<
   EchartsTimeseriesFormData,
   EchartsTimeseriesChartProps
 > {

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 } from '../../controls';
+import { legendSection, showValueControl } from '../../controls';
 
 const {
   annotationLayers,
@@ -211,6 +211,7 @@ const config: ControlPanelConfig = {
       expanded: true,
       controlSetRows: [
         ['color_scheme', 'label_colors'],
+        [showValueControl],
         [
           {
             name: 'stack',

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 } from '../../controls';
+import { legendSection, showValueControl } from '../../controls';
 
 const {
   area,
@@ -237,6 +237,7 @@ const config: ControlPanelConfig = {
             },
           },
         ],
+        [showValueControl],
         [
           {
             name: 'stack',

diff --git a/...mporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Step/index.ts b/...mporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Timeseries/Step/index.ts
@@ -25,7 +25,7 @@ import { EchartsTimeseriesChartProps, EchartsTimeseriesFormData } from '../types
 import example1 from './images/Step1.png';
 import example2 from './images/Step2.png';
 
-export default class EchartsTimeseriesScatterChartPlugin extends ChartPlugin<
+export default class EchartsTimeseriesStepChartPlugin extends ChartPlugin<
   EchartsTimeseriesFormData,
   EchartsTimeseriesChartProps
 > {

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 } from '../controls';
+import { legendSection, showValueControl } from '../controls';
 
 const {
   area,
@@ -240,6 +240,7 @@ const config: ControlPanelConfig = {
             },
           },
         ],
+        [showValueControl],
         [
           {
             name: 'stack',

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
@@ -95,6 +95,7 @@ export default function transformProps(
     xAxisLabelRotation,
     emitFilter,
     groupby,
+    showValue,
   }: EchartsTimeseriesFormData = { ...DEFAULT_FORM_DATA, ...formData };
 
   const colorScale = CategoricalColorNamespace.getScale(colorScheme as string);
@@ -105,6 +106,31 @@ export default function transformProps(
   const series: SeriesOption[] = [];
   const formatter = getNumberFormatter(contributionMode ? ',.0%' : yAxisFormat);
 
+  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);
+    });
+
+    rawSeries.forEach((entry, seriesIndex) => {
+      const { data = [] } = entry;
+      (data as [Date, number][]).forEach((datum, dataIndex) => {
+        if (datum[1] !== null) {
+          showValueIndexes[dataIndex] = seriesIndex;
+        }
+      });
+    });
+  }
+
   rawSeries.forEach(entry => {
     const transformedSeries = transformSeries(entry, colorScale, {
       area,
@@ -115,6 +141,10 @@ export default function transformProps(
       areaOpacity: opacity,
       seriesType,
       stack,
+      formatter,
+      showValue,
+      totalStackedValues,
+      showValueIndexes,
     });
     if (transformedSeries) series.push(transformedSeries);
   });

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
@@ -26,6 +26,7 @@ import {
   getTimeFormatter,
   IntervalAnnotationLayer,
   isTimeseriesAnnotationResult,
+  NumberFormatter,
   smartDateDetailedFormatter,
   smartDateFormatter,
   TimeFormatter,
@@ -73,6 +74,10 @@ export function transformSeries(
     seriesType?: EchartsTimeseriesSeriesType;
     stack?: boolean;
     yAxisIndex?: number;
+    showValue?: boolean;
+    formatter?: NumberFormatter;
+    totalStackedValues?: number[];
+    showValueIndexes?: number[];
   },
 ): SeriesOption | undefined {
   const { name } = series;
@@ -86,6 +91,10 @@ export function transformSeries(
     seriesType,
     stack,
     yAxisIndex = 0,
+    showValue,
+    formatter,
+    totalStackedValues = [],
+    showValueIndexes = [],
   } = opts;
 
   const forecastSeries = extractForecastSeriesContext(name || '');
@@ -119,6 +128,18 @@ export function transformSeries(
   } else {
     plotType = seriesType === 'bar' ? 'bar' : 'line';
   }
+  let showSymbol = false;
+  if (!isConfidenceBand) {
+    if (plotType === 'scatter') {
+      showSymbol = true;
+    } else if (forecastEnabled && isObservation) {
+      showSymbol = true;
+    } else if (plotType === 'line' && showValue) {
+      showSymbol = true;
+    } else if (markerEnabled) {
+      showSymbol = true;
+    }
+  }
   const lineStyle = isConfidenceBand ? { opacity: OpacityEnum.Transparent } : { opacity };
   return {
     ...series,
@@ -141,10 +162,29 @@ export function transformSeries(
           ? opacity * areaOpacity
           : 0,
     },
-    showSymbol:
-      !isConfidenceBand &&
-      (plotType === 'scatter' || (forecastEnabled && isObservation) || markerEnabled),
+    showSymbol,
     symbolSize: markerSize,
+    label: {
+      show: !!showValue,
+      position: 'top',
+      formatter: (params: any) => {
+        const {
+          value: [, numericValue],
+          dataIndex,
+          seriesIndex,
+        } = params;
+        if (formatter) {
+          if (!stack) {
+            return formatter(numericValue);
+          }
+          if (seriesIndex === showValueIndexes[dataIndex]) {
+            return formatter(totalStackedValues[dataIndex]);
+          }
+          return '';
+        }
+        return numericValue;
+      },
+    },
   };
 }
 

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
@@ -74,6 +74,7 @@ export type EchartsTimeseriesFormData = QueryFormData & {
   xAxisLabelRotation: number;
   emitFilter: boolean;
   groupby: string[];
+  showValue: boolean;
 } & EchartsLegendFormData;
 
 // @ts-ignore
@@ -105,6 +106,7 @@ export const DEFAULT_FORM_DATA: EchartsTimeseriesFormData = {
   emitFilter: false,
   groupby: [],
   yAxisTitle: '',
+  showValue: 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
@@ -93,3 +93,14 @@ export const legendSection = [
   [legendOrientationControl],
   [legendMarginControl],
 ];
+
+export const showValueControl = {
+  name: 'show_value',
+  config: {
+    type: 'CheckboxControl',
+    label: t('Show Value'),
+    default: false,
+    renderTrigger: true,
+    description: t('Show series values on the chart'),
+  },
+};