From a1a7f691a02e7699864a877d9d797cbd6713d87e Mon Sep 17 00:00:00 2001 From: Ville Brofeldt <33317356+villebro@users.noreply.github.com> Date: Fri, 14 Apr 2023 20:43:15 +0300 Subject: [PATCH] fix(plugin-chart-echarts): reorder totals and support multimetric sort (#23675) --- .../src/shared-controls/customControls.tsx | 29 ++++- .../src/MixedTimeseries/transformProps.ts | 4 +- .../src/Timeseries/transformProps.ts | 2 +- .../src/Timeseries/types.ts | 2 + .../test/utils/series.test.ts | 120 ++++++++++-------- 5 files changed, 97 insertions(+), 60 deletions(-) diff --git a/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/customControls.tsx b/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/customControls.tsx index 979912e58f1da..5706449f39db7 100644 --- a/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/customControls.tsx +++ b/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/customControls.tsx @@ -46,14 +46,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; +}) => + !isTemporal(controls) && + (!!ensureIsArray(controls?.groupby?.value).length || + ensureIsArray(controls?.metrics?.value).length > 1); export const xAxisSortControl = { name: 'x_axis_sort', diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts index 98367daf9a84e..da8ac01f4e850 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts +++ b/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, }); diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts index eadded44a9ac5..b3df61fbd2c99 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts @@ -209,7 +209,7 @@ export default function transformProps( formatter, showValue, onlyTotal, - totalStackedValues, + totalStackedValues: sortedTotalValues, showValueIndexes, thresholdValues, richTooltip, diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/types.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/types.ts index 56527ebd63bf9..b5a67d977daa5 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/types.ts +++ b/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; diff --git a/superset-frontend/plugins/plugin-chart-echarts/test/utils/series.test.ts b/superset-frontend/plugins/plugin-chart-echarts/test/utils/series.test.ts index 3bd949d8ad63d..ad3769b202a1a 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/test/utils/series.test.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/test/utils/series.test.ts @@ -51,25 +51,29 @@ describe('extractSeries', () => { abc: 5, }, ]; - expect(extractSeries(data)).toEqual([ - { - id: 'Hulk', - name: 'Hulk', - data: [ - ['2000-01-01', null], - ['2000-02-01', 2], - ['2000-03-01', 1], - ], - }, - { - id: 'abc', - name: 'abc', - data: [ - ['2000-01-01', 2], - ['2000-02-01', 10], - ['2000-03-01', 5], - ], - }, + const totalStackedValues = [2, 12, 6]; + expect(extractSeries(data, { totalStackedValues })).toEqual([ + [ + { + id: 'Hulk', + name: 'Hulk', + data: [ + ['2000-01-01', null], + ['2000-02-01', 2], + ['2000-03-01', 1], + ], + }, + { + id: 'abc', + name: 'abc', + data: [ + ['2000-01-01', 2], + ['2000-02-01', 10], + ['2000-03-01', 5], + ], + }, + ], + totalStackedValues, ]); }); @@ -91,20 +95,30 @@ describe('extractSeries', () => { abc: 5, }, ]; - expect(extractSeries(data, { xAxis: 'x', removeNulls: true })).toEqual([ - { - id: 'Hulk', - name: 'Hulk', - data: [[2, 1]], - }, - { - id: 'abc', - name: 'abc', - data: [ - [1, 2], - [2, 5], - ], - }, + const totalStackedValues = [3, 12, 8]; + expect( + extractSeries(data, { + totalStackedValues, + xAxis: 'x', + removeNulls: true, + }), + ).toEqual([ + [ + { + id: 'Hulk', + name: 'Hulk', + data: [[2, 1]], + }, + { + id: 'abc', + name: 'abc', + data: [ + [1, 2], + [2, 5], + ], + }, + ], + totalStackedValues, ]); }); @@ -151,23 +165,29 @@ describe('extractSeries', () => { abc: null, }, ]; - expect(extractSeries(data, { fillNeighborValue: 0 })).toEqual([ - { - id: 'abc', - name: 'abc', - data: [ - ['2000-01-01', null], - ['2000-02-01', 0], - ['2000-03-01', 1], - ['2000-04-01', 0], - ['2000-05-01', null], - ['2000-06-01', 0], - ['2000-07-01', 2], - ['2000-08-01', 3], - ['2000-09-01', 0], - ['2000-10-01', null], - ], - }, + const totalStackedValues = [0, 0, 1, 0, 0, 0, 2, 3, 0, 0]; + expect( + extractSeries(data, { totalStackedValues, fillNeighborValue: 0 }), + ).toEqual([ + [ + { + id: 'abc', + name: 'abc', + data: [ + ['2000-01-01', null], + ['2000-02-01', 0], + ['2000-03-01', 1], + ['2000-04-01', 0], + ['2000-05-01', null], + ['2000-06-01', 0], + ['2000-07-01', 2], + ['2000-08-01', 3], + ['2000-09-01', 0], + ['2000-10-01', null], + ], + }, + ], + totalStackedValues, ]); }); });