feat(plugin-chart-echarts): [feature-parity] support extra control for the area chart V2

superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/components/RadioButtonControl.tsx

@@ -31,7 +31,7 @@ export interface RadioButtonControlProps {
   description?: string;
   options: RadioButtonOption[];
   hovered?: boolean;
-  value?: string;
+  value?: JsonValue;
   onChange: (opt: RadioButtonOption[0]) => void;
 }
 

superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts

@@ -191,7 +191,7 @@ export default function transformProps(
       areaOpacity: opacity,
       seriesType,
       showValue,
-      stack,
+      stack: Boolean(stack),
       yAxisIndex,
       filterState,
       seriesKey: entry.name,
@@ -208,7 +208,7 @@ export default function transformProps(
       areaOpacity: opacityB,
       seriesType: seriesTypeB,
       showValue: showValueB,
-      stack: stackB,
+      stack: Boolean(stackB),
       yAxisIndex: yAxisIndexB,
       filterState,
       seriesKey: primarySeries.has(entry.name as string)

superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/types.ts

@@ -32,6 +32,7 @@ import {
   EchartsLegendFormData,
   EchartsTitleFormData,
   DEFAULT_TITLE_FORM_DATA,
+  StackType,
 } from '../types';
 import {
   DEFAULT_FORM_DATA as TIMESERIES_DEFAULTS,
@@ -78,8 +79,8 @@ export type EchartsMixedTimeseriesFormData = QueryFormData & {
   seriesTypeB: EchartsTimeseriesSeriesType;
   showValue: boolean;
   showValueB: boolean;
-  stack: boolean;
-  stackB: boolean;
+  stack: StackType;
+  stackB: StackType;
   yAxisIndex?: number;
   yAxisIndexB?: number;
   groupby: QueryFormColumn[];

superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Area/controlPanel.tsx

@@ -34,10 +34,12 @@ import {
 } from '../types';
 import {
   legendSection,
+  onlyTotalControl,
+  showValueControl,
   richTooltipSection,
-  showValueSection,
   xAxisControl,
 } from '../../controls';
+import { AreaChartExtraControlsOptions } from '../../constants';
 
 const {
   contributionMode,
@@ -132,7 +134,37 @@ const config: ControlPanelConfig = {
             },
           },
         ],
-        ...showValueSection,
+        [showValueControl],
+        [
+          {
+            name: 'stack',
+            config: {
+              type: 'SelectControl',
+              label: t('Stacked Style'),
+              renderTrigger: true,
+              choices: AreaChartExtraControlsOptions,
+              default: null,
+              description: t('Stack series on top of each other'),
+            },
+          },
+        ],
+        [onlyTotalControl],
+        [
+          {
+            name: 'show_extra_controls',
+            config: {
+              type: 'CheckboxControl',
+              label: t('Extra Controls'),
+              renderTrigger: true,
+              default: false,
+              description: t(
+                'Whether to show extra controls or not. Extra controls ' +
+                  'include things like making mulitBar charts stacked ' +
+                  'or side by side.',
+              ),
+            },
+          },
+        ],
         [
           {
             name: 'markerEnabled',

superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/EchartsTimeseries.tsx

@@ -24,8 +24,10 @@ import { EchartsHandler, EventHandlers } from '../types';
 import Echart from '../components/Echart';
 import { TimeseriesChartTransformedProps } from './types';
 import { currentSeries } from '../utils/series';
+import { ExtraControls } from '../components/ExtraControls';
 
 const TIMER_DURATION = 300;
+
 // @ts-ignore
 export default function EchartsTimeseries({
   formData,
@@ -36,6 +38,7 @@ export default function EchartsTimeseries({
   labelMap,
   selectedValues,
   setDataMask,
+  setControlValue,
   legendData = [],
 }: TimeseriesChartTransformedProps) {
   const { emitFilter, stack } = formData;
@@ -120,7 +123,7 @@ export default function EchartsTimeseries({
         },
       });
     },
-    [groupby, labelMap, setDataMask],
+    [groupby, labelMap, setDataMask, emitFilter],
   );
 
   const eventHandlers: EventHandlers = {
@@ -195,14 +198,17 @@ export default function EchartsTimeseries({
   };
 
   return (
-    <Echart
-      ref={echartRef}
-      height={height}
-      width={width}
-      echartOptions={echartOptions}
-      eventHandlers={eventHandlers}
-      zrEventHandlers={zrEventHandlers}
-      selectedValues={selectedValues}
-    />
+    <>
+      <ExtraControls formData={formData} setControlValue={setControlValue} />
+      <Echart
+        ref={echartRef}
+        height={height}
+        width={width}
+        echartOptions={echartOptions}
+        eventHandlers={eventHandlers}
+        zrEventHandlers={zrEventHandlers}
+        selectedValues={selectedValues}
+      />
+    </>
   );
 }

superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts

@@ -30,6 +30,7 @@ import {
   isIntervalAnnotationLayer,
   isTimeseriesAnnotationLayer,
   TimeseriesChartDataResponseResult,
+  t,
 } from '@superset-ui/core';
 import { EChartsCoreOption, SeriesOption } from 'echarts';
 import {
@@ -49,6 +50,8 @@ import {
   getAxisType,
   getColtypesMapping,
   getLegendProps,
+  extractDataTotalValues,
+  extractShowValueIndexes,
 } from '../utils/series';
 import { extractAnnotationLabels } from '../utils/annotation';
 import {
@@ -70,7 +73,11 @@ import {
   transformSeries,
   transformTimeseriesAnnotation,
 } from './transformers';
-import { TIMESERIES_CONSTANTS, TIMEGRAIN_TO_TIMESTAMP } from '../constants';
+import {
+  AreaChartExtraControlsValue,
+  TIMESERIES_CONSTANTS,
+  TIMEGRAIN_TO_TIMESTAMP,
+} from '../constants';
 
 export default function transformProps(
   chartProps: EchartsTimeseriesChartProps,
@@ -139,46 +146,35 @@ export default function transformProps(
   const xAxisCol =
     verboseMap[xAxisOrig] || getColumnLabel(xAxisOrig || DTTM_ALIAS);
   const isHorizontal = orientation === OrientationType.horizontal;
+  const { totalStackedValues, thresholdValues } = extractDataTotalValues(
+    rebasedData,
+    {
+      stack,
+      percentageThreshold,
+      xAxisCol,
+    },
+  );
   const rawSeries = extractSeries(rebasedData, {
     fillNeighborValue: stack && !forecastEnabled ? 0 : undefined,
     xAxis: xAxisCol,
     removeNulls: seriesType === EchartsTimeseriesSeriesType.Scatter,
+    stack,
+    totalStackedValues,
     isHorizontal,
   });
+  const showValueIndexes = extractShowValueIndexes(rawSeries, {
+    stack,
+  });
   const seriesContexts = extractForecastSeriesContexts(
     Object.values(rawSeries).map(series => series.name as string),
   );
+  const isAreaExpand = stack === AreaChartExtraControlsValue.Expand;
   const xAxisDataType = dataTypes?.[xAxisCol];
   const xAxisType = getAxisType(xAxisDataType);
   const series: SeriesOption[] = [];
-  const formatter = getNumberFormatter(contributionMode ? ',.0%' : yAxisFormat);
-
-  const totalStackedValues: number[] = [];
-  const showValueIndexes: number[] = [];
-  const thresholdValues: number[] = [];
-
-  rebasedData.forEach(data => {
-    const values = Object.keys(data).reduce((prev, curr) => {
-      if (curr === xAxisCol) {
-        return prev;
-      }
-      const value = data[curr] || 0;
-      return prev + (value as number);
-    }, 0);
-    totalStackedValues.push(values);
-    thresholdValues.push(((percentageThreshold || 0) / 100) * values);
-  });
-
-  if (stack) {
-    rawSeries.forEach((entry, seriesIndex) => {
-      const { data = [] } = entry;
-      (data as [Date, number][]).forEach((datum, dataIndex) => {
-        if (datum[1] !== null) {
-          showValueIndexes[dataIndex] = seriesIndex;
-        }
-      });
-    });
-  }
+  const formatter = getNumberFormatter(
+    contributionMode || isAreaExpand ? ',.0%' : yAxisFormat,
+  );
 
   rawSeries.forEach(entry => {
     const transformedSeries = transformSeries(entry, colorScale, {
@@ -261,7 +257,7 @@ export default function transformProps(
   let [min, max] = (yAxisBounds || []).map(parseYAxisBound);
 
   // default to 0-100% range when doing row-level contribution chart
-  if (contributionMode === 'row' && stack) {
+  if ((contributionMode === 'row' || isAreaExpand) && stack) {
     if (min === undefined) min = 0;
     if (max === undefined) max = 1;
   }
@@ -286,7 +282,10 @@ export default function transformProps(
     {},
   );
 
-  const { setDataMask = () => {} } = hooks;
+  const {
+    setDataMask = () => {},
+    setControlValue = (...args: unknown[]) => {},
+  } = hooks;
 
   const addYAxisLabelOffset = !!yAxisTitle;
   const addXAxisLabelOffset = !!xAxisTitle;
@@ -401,8 +400,8 @@ export default function transformProps(
         dataZoom: {
           yAxisIndex: false,
           title: {
-            zoom: 'zoom area',
-            back: 'restore zoom',
+            zoom: t('zoom area'),
+            back: t('restore zoom'),
           },
         },
       },
@@ -428,6 +427,7 @@ export default function transformProps(
     labelMap,
     selectedValues,
     setDataMask,
+    setControlValue,
     width,
     legendData,
   };

superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformers.ts

@@ -52,7 +52,7 @@ import {
 import { MarkLine1DDataItemOption } from 'echarts/types/src/component/marker/MarkLineModel';
 
 import { extractForecastSeriesContext } from '../utils/forecast';
-import { ForecastSeriesEnum, LegendOrientation } from '../types';
+import { ForecastSeriesEnum, LegendOrientation, StackType } from '../types';
 import { EchartsTimeseriesSeriesType } from './types';
 
 import {
@@ -62,7 +62,11 @@ import {
   parseAnnotationOpacity,
 } from '../utils/annotation';
 import { currentSeries, getChartPadding } from '../utils/series';
-import { OpacityEnum, TIMESERIES_CONSTANTS } from '../constants';
+import {
+  AreaChartExtraControlsValue,
+  OpacityEnum,
+  TIMESERIES_CONSTANTS,
+} from '../constants';
 
 export function transformSeries(
   series: SeriesOption,
@@ -75,7 +79,7 @@ export function transformSeries(
     markerSize?: number;
     areaOpacity?: number;
     seriesType?: EchartsTimeseriesSeriesType;
-    stack?: boolean;
+    stack?: StackType;
     yAxisIndex?: number;
     showValue?: boolean;
     onlyTotal?: boolean;
@@ -224,6 +228,7 @@ export function transformSeries(
         const { value, dataIndex, seriesIndex, seriesName } = params;
         const numericValue = isHorizontal ? value[0] : value[1];
         const isSelectedLegend = currentSeries.legend === seriesName;
+        const isAreaExpand = stack === AreaChartExtraControlsValue.Expand;
         if (!formatter) return numericValue;
         if (!stack || isSelectedLegend) return formatter(numericValue);
         if (!onlyTotal) {
@@ -233,7 +238,7 @@ export function transformSeries(
           return '';
         }
         if (seriesIndex === showValueIndexes[dataIndex]) {
-          return formatter(totalStackedValues[dataIndex]);
+          return formatter(isAreaExpand ? 1 : totalStackedValues[dataIndex]);
         }
         return '';
       },

superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/types.ts

@@ -31,6 +31,7 @@ import {
   EChartTransformedProps,
   EchartsTitleFormData,
   DEFAULT_TITLE_FORM_DATA,
+  StackType,
 } from '../types';
 
 export enum EchartsTimeseriesContributionType {
@@ -72,7 +73,7 @@ export type EchartsTimeseriesFormData = QueryFormData & {
   orderDesc: boolean;
   rowLimit: number;
   seriesType: EchartsTimeseriesSeriesType;
-  stack: boolean;
+  stack: StackType;
   tooltipTimeFormat?: string;
   truncateYAxis: boolean;
   yAxisFormat?: string;
@@ -86,6 +87,7 @@ export type EchartsTimeseriesFormData = QueryFormData & {
   groupby: QueryFormColumn[];
   showValue: boolean;
   onlyTotal: boolean;
+  showExtraControls: boolean;
   percentageThreshold: number;
   orientation?: OrientationType;
 } & EchartsLegendFormData &