feat(plugin-chart-echarts): [feature-parity] support Extra Control on the time-series area chart

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

@@ -28,7 +28,7 @@ export interface RadioButtonControlProps {
   description?: string;
   options: RadioButtonOption[];
   hovered?: boolean;
-  value?: string;
+  value?: JsonValue;
   onChange: (opt: RadioButtonOption[0]) => void;
 }
 
@@ -38,7 +38,7 @@ export default function RadioButtonControl({
   onChange,
   ...props
 }: RadioButtonControlProps) {
-  const currentValue = initialValue || options[0][0];
+  const currentValue = initialValue === null ? options[0][0] : initialValue;
   const theme = useTheme();
   return (
     <div

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

@@ -149,7 +149,7 @@ export default function transformProps(
       markerSize,
       areaOpacity: opacity,
       seriesType,
-      stack,
+      stack: Boolean(stack),
       yAxisIndex,
       filterState,
     });
@@ -162,7 +162,7 @@ export default function transformProps(
       markerSize: markerSizeB,
       areaOpacity: opacityB,
       seriesType: seriesTypeB,
-      stack: stackB,
+      stack: Boolean(stackB),
       yAxisIndex: yAxisIndexB,
       filterState,
     });

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

@@ -37,6 +37,7 @@ import {
   EchartsTimeseriesContributionType,
   EchartsTimeseriesSeriesType,
 } from '../Timeseries/types';
+import { AreaChartExtraControlsValue } from '../constants';
 
 export type EchartsMixedTimeseriesFormData = QueryFormData & {
   annotationLayers: AnnotationLayer[];
@@ -77,8 +78,8 @@ export type EchartsMixedTimeseriesFormData = QueryFormData & {
   rowLimitB: number;
   seriesType: EchartsTimeseriesSeriesType;
   seriesTypeB: EchartsTimeseriesSeriesType;
-  stack: boolean;
-  stackB: boolean;
+  stack: boolean | Partial<AreaChartExtraControlsValue> | null;
+  stackB: boolean | Partial<AreaChartExtraControlsValue> | null;
   yAxisIndex?: number;
   yAxisIndexB?: number;
   groupby: string[];

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

@@ -32,7 +32,8 @@ import {
   EchartsTimeseriesContributionType,
   EchartsTimeseriesSeriesType,
 } from '../types';
-import { legendSection, showValueSection } from '../../controls';
+import { legendSection, onlyTotalControl, showValueControl } from '../../controls';
+import { AreaChartExtraControlsValue } from '../../constants';
 
 const {
   contributionMode,
@@ -135,7 +136,40 @@ const config: ControlPanelConfig = {
             },
           },
         ],
-        ...showValueSection,
+        [showValueControl],
+        [
+          {
+            name: 'stack',
+            config: {
+              type: 'SelectControl',
+              label: t('Stacked Style'),
+              renderTrigger: true,
+              choices: [
+                [AreaChartExtraControlsValue.Stacked, 'stack'],
+                [AreaChartExtraControlsValue.Expanded, 'expand'],
+              ],
+              default: 'stack',
+              description: t('Stack series on top of each other'),
+            },
+          },
+        ],
+        [onlyTotalControl],
+        [
+          {
+            name: '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',

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

@@ -16,14 +16,63 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React, { useCallback, useRef } from 'react';
+import React, { useCallback, useEffect, useRef, useMemo, useState } from 'react';
 import { ViewRootGroup } from 'echarts/types/src/util/types';
 import GlobalModel from 'echarts/types/src/model/Global';
 import ComponentModel from 'echarts/types/src/model/Component';
+import { sharedControlComponents, RadioButtonOption } from '@superset-ui/chart-controls';
+import { HandlerFunction, JsonValue, styled } from '@superset-ui/core';
 import { EchartsHandler, EventHandlers } from '../types';
 import Echart from '../components/Echart';
-import { TimeseriesChartTransformedProps } from './types';
+import { EchartsTimeseriesFormData, TimeseriesChartTransformedProps } from './types';
 import { currentSeries } from '../utils/series';
+import { AreaChartExtraControlsOptions } from '../constants';
+
+const { RadioButtonControl } = sharedControlComponents;
+
+const ExtraControlsWrapper = styled.div`
+  text-align: center;
+`;
+
+function useExtraControl({
+  formData,
+  setControlValue,
+}: {
+  formData: EchartsTimeseriesFormData;
+  setControlValue: HandlerFunction | undefined;
+}) {
+  const { stack, area } = formData;
+  const [extraValue, setExtraValue] = useState<JsonValue | undefined>(stack ?? undefined);
+
+  useEffect(() => {
+    setExtraValue(stack ?? undefined);
+  }, [stack]);
+
+  const extraControlsOptions = useMemo(() => {
+    if (area) {
+      return AreaChartExtraControlsOptions;
+    }
+    return [];
+  }, [area]);
+
+  const extraControlsHandler = useCallback(
+    (value: RadioButtonOption[0]) => {
+      if (area) {
+        if (setControlValue) {
+          setControlValue('stack', value);
+          setExtraValue(value ?? undefined);
+        }
+      }
+    },
+    [area, setControlValue],
+  );
+
+  return {
+    extraControlsOptions,
+    extraControlsHandler,
+    extraValue,
+  };
+}
 
 const TIMER_DURATION = 300;
 // @ts-ignore
@@ -37,8 +86,9 @@ export default function EchartsTimeseries({
   selectedValues,
   setDataMask,
   legendData = [],
+  setControlValue,
 }: TimeseriesChartTransformedProps) {
-  const { emitFilter, stack } = formData;
+  const { emitFilter, stack, extraControls } = formData;
   const echartRef = useRef<EchartsHandler | null>(null);
   const lastTimeRef = useRef(Date.now());
   const lastSelectedLegend = useRef('');
@@ -115,7 +165,7 @@ export default function EchartsTimeseries({
         },
       });
     },
-    [groupby, labelMap, setDataMask],
+    [groupby, labelMap, setDataMask, emitFilter],
   );
 
   const eventHandlers: EventHandlers = {
@@ -189,15 +239,31 @@ export default function EchartsTimeseries({
     },
   };
 
+  const { extraControlsOptions, extraControlsHandler, extraValue } = useExtraControl({
+    formData,
+    setControlValue,
+  });
+
   return (
-    <Echart
-      ref={echartRef}
-      height={height}
-      width={width}
-      echartOptions={echartOptions}
-      eventHandlers={eventHandlers}
-      zrEventHandlers={zrEventHandlers}
-      selectedValues={selectedValues}
-    />
+    <>
+      {extraControls && (
+        <ExtraControlsWrapper>
+          <RadioButtonControl
+            options={extraControlsOptions}
+            onChange={extraControlsHandler}
+            value={extraValue}
+          />
+        </ExtraControlsWrapper>
+      )}
+      <Echart
+        ref={echartRef}
+        height={height}
+        width={width}
+        echartOptions={echartOptions}
+        eventHandlers={eventHandlers}
+        zrEventHandlers={zrEventHandlers}
+        selectedValues={selectedValues}
+      />
+    </>
   );
 }

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

@@ -27,6 +27,7 @@ import {
   isTimeseriesAnnotationLayer,
   TimeseriesChartDataResponseResult,
   DataRecordValue,
+  t,
 } from '@superset-ui/core';
 import { EChartsCoreOption, SeriesOption } from 'echarts';
 import {
@@ -42,6 +43,7 @@ import {
   extractTimeseriesSeries,
   getLegendProps,
   currentSeries,
+  extractTotalValues,
 } from '../utils/series';
 import { extractAnnotationLabels } from '../utils/annotation';
 import {
@@ -62,7 +64,7 @@ import {
   transformSeries,
   transformTimeseriesAnnotation,
 } from './transformers';
-import { TIMESERIES_CONSTANTS } from '../constants';
+import { AreaChartExtraControlsValue, TIMESERIES_CONSTANTS } from '../constants';
 
 export default function transformProps(
   chartProps: EchartsTimeseriesChartProps,
@@ -107,31 +109,23 @@ export default function transformProps(
     yAxisTitleMargin,
     yAxisTitlePosition,
   }: EchartsTimeseriesFormData = { ...DEFAULT_FORM_DATA, ...formData };
+  const isExpended = stack === AreaChartExtraControlsValue.Expanded;
+
   const colorScale = CategoricalColorNamespace.getScale(colorScheme as string);
   const rebasedData = rebaseTimeseriesDatum(data, verboseMap);
+  const totalValues = extractTotalValues(rebasedData);
   const rawSeries = extractTimeseriesSeries(rebasedData, {
     fillNeighborValue: stack && !forecastEnabled ? 0 : undefined,
+    isExpended,
+    totalValues,
   });
   const seriesContexts = extractForecastSeriesContexts(
     Object.values(rawSeries).map(series => series.name as string),
   );
   const series: SeriesOption[] = [];
-  const formatter = getNumberFormatter(contributionMode ? ',.0%' : yAxisFormat);
-
-  const totalStackedValues: number[] = [];
+  const formatter = getNumberFormatter(contributionMode || isExpended ? ',.0%' : yAxisFormat);
   const showValueIndexes: number[] = [];
 
-  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;
@@ -152,11 +146,11 @@ export default function transformProps(
       markerSize,
       areaOpacity: opacity,
       seriesType,
-      stack,
+      stack: Boolean(stack),
       formatter,
       showValue,
       onlyTotal,
-      totalStackedValues,
+      totalStackedValues: isExpended ? totalValues.fill(1) : totalValues,
       showValueIndexes,
       richTooltip,
     });
@@ -192,7 +186,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' || isExpended) && stack) {
     if (min === undefined) min = 0;
     if (max === undefined) max = 1;
   }
@@ -208,7 +202,7 @@ export default function transformProps(
     };
   }, {});
 
-  const { setDataMask = () => {} } = hooks;
+  const { setDataMask = () => {}, setControlValue = (...args: unknown[]) => {} } = hooks;
 
   const addYAxisLabelOffset = !!yAxisTitle;
   const addXAxisLabelOffset = !!xAxisTitle;
@@ -303,8 +297,8 @@ export default function transformProps(
         dataZoom: {
           yAxisIndex: false,
           title: {
-            zoom: 'zoom area',
-            back: 'restore zoom',
+            zoom: t('zoom area'),
+            back: t('restore zoom'),
           },
         },
       },
@@ -330,6 +324,7 @@ export default function transformProps(
     labelMap,
     selectedValues,
     setDataMask,
+    setControlValue,
     width,
     legendData,
   };

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

@@ -197,7 +197,7 @@ export function transformSeries(
         } = params;
         if (!formatter) return numericValue;
         if (!stack || !onlyTotal) {
-          return formatter(numericValue);
+          return numericValue ? formatter(numericValue) : '';
         }
         if (seriesIndex === showValueIndexes[dataIndex]) {
           return formatter(totalStackedValues[dataIndex]);

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

@@ -31,6 +31,7 @@ import {
   EchartsTitleFormData,
   DEFAULT_TITLE_FORM_DATA,
 } from '../types';
+import { AreaChartExtraControlsValue } from '../constants';
 
 export enum EchartsTimeseriesContributionType {
   Row = 'row',
@@ -66,7 +67,7 @@ export type EchartsTimeseriesFormData = QueryFormData & {
   orderDesc: boolean;
   rowLimit: number;
   seriesType: EchartsTimeseriesSeriesType;
-  stack: boolean;
+  stack: boolean | null | Partial<AreaChartExtraControlsValue>;
   tooltipTimeFormat?: string;
   truncateYAxis: boolean;
   yAxisFormat?: string;
@@ -82,6 +83,7 @@ export type EchartsTimeseriesFormData = QueryFormData & {
   groupby: string[];
   showValue: boolean;
   onlyTotal: boolean;
+  extraControls: boolean;
 } & EchartsLegendFormData &
   EchartsTitleFormData;