fix(plugin-chart-echarts): reorder totals and support multimetric sort (apache#23675)

Author: villebro

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

@@ -54,27 +54,29 @@ export const contributionModeControl = {
   },
 };
 
+function isTemporal(controls: ControlStateMapping): boolean {
+  return !(
+    isDefined(controls?.x_axis?.value) &&
+    !isTemporalColumn(
+      getColumnLabel(controls?.x_axis?.value as QueryFormColumn),
+      controls?.datasource?.datasource,
+    )
+  );
+}
+
 const xAxisSortVisibility = ({ controls }: { controls: ControlStateMapping }) =>
-  isDefined(controls?.x_axis?.value) &&
-  !isTemporalColumn(
-    getColumnLabel(controls?.x_axis?.value as QueryFormColumn),
-    controls?.datasource?.datasource,
-  ) &&
-  Array.isArray(controls?.groupby?.value) &&
-  controls.groupby.value.length === 0;
+  !isTemporal(controls) &&
+  ensureIsArray(controls?.groupby?.value).length === 0 &&
+  ensureIsArray(controls?.metrics?.value).length === 1;
 
 const xAxisMultiSortVisibility = ({
   controls,
 }: {
   controls: ControlStateMapping;
 }) =>
-  isDefined(controls?.x_axis?.value) &&
-  !isTemporalColumn(
-    getColumnLabel(controls?.x_axis?.value as QueryFormColumn),
-    controls?.datasource?.datasource,
-  ) &&
-  Array.isArray(controls?.groupby?.value) &&
-  !!controls.groupby.value.length;
+  !isTemporal(controls) &&
+  (!!ensureIsArray(controls?.groupby?.value).length ||
+    ensureIsArray(controls?.metrics?.value).length > 1);
 
 export const xAxisSortControl = {
   name: 'x_axis_sort',

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

@@ -170,12 +170,12 @@ export default function transformProps(
   }
 
   const rebasedDataA = rebaseForecastDatum(data1, verboseMap);
-  const rawSeriesA = extractSeries(rebasedDataA, {
+  const [rawSeriesA] = extractSeries(rebasedDataA, {
     fillNeighborValue: stack ? 0 : undefined,
     xAxis: xAxisLabel,
   });
   const rebasedDataB = rebaseForecastDatum(data2, verboseMap);
-  const rawSeriesB = extractSeries(rebasedDataB, {
+  const [rawSeriesB] = extractSeries(rebasedDataB, {
     fillNeighborValue: stackB ? 0 : undefined,
     xAxis: xAxisLabel,
   });

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

@@ -126,6 +126,7 @@ export default function transformProps(
     logAxis,
     markerEnabled,
     markerSize,
+    metrics,
     minorSplitLine,
     onlyTotal,
     opacity,
@@ -193,7 +194,9 @@ export default function transformProps(
     getMetricLabel,
   );
 
-  const rawSeries = extractSeries(rebasedData, {
+  const isMultiSeries = groupby.length || metrics.length > 1;
+
+  const [rawSeries, sortedTotalValues] = extractSeries(rebasedData, {
     fillNeighborValue: stack && !forecastEnabled ? 0 : undefined,
     xAxis: xAxisLabel,
     extraMetricLabels,
@@ -202,8 +205,8 @@ export default function transformProps(
     isHorizontal,
     sortSeriesType,
     sortSeriesAscending,
-    xAxisSortSeries: groupby.length ? xAxisSortSeries : undefined,
-    xAxisSortSeriesAscending: groupby.length
+    xAxisSortSeries: isMultiSeries ? xAxisSortSeries : undefined,
+    xAxisSortSeriesAscending: isMultiSeries
       ? xAxisSortSeriesAscending
       : undefined,
   });
@@ -240,7 +243,7 @@ export default function transformProps(
       formatter,
       showValue,
       onlyTotal,
-      totalStackedValues,
+      totalStackedValues: sortedTotalValues,
       showValueIndexes,
       thresholdValues,
       richTooltip,

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

@@ -23,6 +23,7 @@ import {
   ContributionType,
   QueryFormColumn,
   QueryFormData,
+  QueryFormMetric,
   TimeFormatter,
   TimeGranularity,
 } from '@superset-ui/core';
@@ -65,6 +66,7 @@ export type EchartsTimeseriesFormData = QueryFormData & {
   logAxis: boolean;
   markerEnabled: boolean;
   markerSize: number;
+  metrics: QueryFormMetric[];
   minorSplitLine: boolean;
   opacity: number;
   orderDesc: boolean;

superset-frontend/plugins/plugin-chart-echarts/src/utils/series.ts

@@ -153,11 +153,12 @@ export function sortAndFilterSeries(
 
 export function sortRows(
   rows: DataRecord[],
+  totalStackedValues: number[],
   xAxis: string,
   xAxisSortSeries: SortSeriesType,
   xAxisSortSeriesAscending: boolean,
 ) {
-  const sortedRows = rows.map(row => {
+  const sortedRows = rows.map((row, idx) => {
     let sortKey: DataRecordValue = '';
     let aggregate: number | undefined;
     let entries = 0;
@@ -219,14 +220,15 @@ export function sortRows(
       key: sortKey,
       value,
       row,
+      totalStackedValue: totalStackedValues[idx],
     };
   });
 
   return orderBy(
     sortedRows,
     ['value'],
     [xAxisSortSeriesAscending ? 'asc' : 'desc'],
-  ).map(({ row }) => row);
+  ).map(({ row, totalStackedValue }) => ({ row, totalStackedValue }));
 }
 
 export function extractSeries(
@@ -244,7 +246,7 @@ export function extractSeries(
     xAxisSortSeries?: SortSeriesType;
     xAxisSortSeriesAscending?: boolean;
   } = {},
-): SeriesOption[] {
+): [SeriesOption[], number[]] {
   const {
     fillNeighborValue,
     xAxis = DTTM_ALIAS,
@@ -258,7 +260,7 @@ export function extractSeries(
     xAxisSortSeries,
     xAxisSortSeriesAscending,
   } = opts;
-  if (data.length === 0) return [];
+  if (data.length === 0) return [[], []];
   const rows: DataRecord[] = data.map(datum => ({
     ...datum,
     [xAxis]: datum[xAxis],
@@ -272,14 +274,23 @@ export function extractSeries(
   );
   const sortedRows =
     isDefined(xAxisSortSeries) && isDefined(xAxisSortSeriesAscending)
-      ? sortRows(rows, xAxis, xAxisSortSeries!, xAxisSortSeriesAscending!)
-      : rows;
+      ? sortRows(
+          rows,
+          totalStackedValues,
+          xAxis,
+          xAxisSortSeries!,
+          xAxisSortSeriesAscending!,
+        )
+      : rows.map((row, idx) => ({
+          row,
+          totalStackedValue: totalStackedValues[idx],
+        }));
 
-  return sortedSeries.map(name => ({
+  const finalSeries = sortedSeries.map(name => ({
     id: name,
     name,
     data: sortedRows
-      .map((row, idx) => {
+      .map(({ row, totalStackedValue }, idx) => {
         const isNextToDefinedValue =
           isDefined(rows[idx - 1]?.[name]) || isDefined(rows[idx + 1]?.[name]);
         const isFillNeighborValue =
@@ -291,15 +302,19 @@ export function extractSeries(
           value = fillNeighborValue;
         } else if (
           stack === StackControlsValue.Expand &&
-          totalStackedValues.length > 0
+          totalStackedValue !== undefined
         ) {
-          value = ((value || 0) as number) / totalStackedValues[idx];
+          value = ((value || 0) as number) / totalStackedValue;
         }
         return [row[xAxis], value];
       })
       .filter(obs => !removeNulls || (obs[0] !== null && obs[1] !== null))
       .map(obs => (isHorizontal ? [obs[1], obs[0]] : obs)),
   }));
+  return [
+    finalSeries,
+    sortedRows.map(({ totalStackedValue }) => totalStackedValue),
+  ];
 }
 
 export function formatSeriesName(