From 8006795f3fe799c475dcef66e891dece5db2604c Mon Sep 17 00:00:00 2001 From: "Michael S. Molina" Date: Wed, 3 May 2023 10:56:25 -0300 Subject: [PATCH 1/3] feat: Adds an option to Mixed Chart to make Y axes independent of each other --- .../src/MixedTimeseries/controlPanel.tsx | 54 ++++++++++++------- .../src/MixedTimeseries/transformProps.ts | 17 ++++-- .../src/MixedTimeseries/types.ts | 6 +-- 3 files changed, 48 insertions(+), 29 deletions(-) diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/controlPanel.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/controlPanel.tsx index c1a3007785887..bf1a0fc420bd8 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/controlPanel.tsx +++ b/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/controlPanel.tsx @@ -35,6 +35,7 @@ import { legendSection, richTooltipSection } from '../controls'; const { area, + independentYAxesBounds, logAxis, markerEnabled, markerSize, @@ -49,7 +50,6 @@ const { yAxisBounds, zoomable, xAxisLabelRotation, - yAxisIndex, } = DEFAULT_FORM_DATA; function createQuerySection( @@ -235,23 +235,6 @@ function createCustomizeSection( }, }, ], - [ - { - name: `yAxisIndex${controlSuffix}`, - config: { - type: 'SelectControl', - label: t('Y Axis'), - choices: [ - [0, t('Primary')], - [1, t('Secondary')], - ], - default: yAxisIndex, - clearable: false, - renderTrigger: true, - description: t('Primary or secondary y-axis'), - }, - }, - ], ]; } @@ -367,11 +350,11 @@ const config: ControlPanelConfig = { name: 'y_axis_bounds', config: { type: 'BoundsControl', - label: t('Y Axis Bounds'), + label: t('Primary y-axis Bounds'), renderTrigger: true, default: yAxisBounds, description: t( - 'Bounds for the Y-axis. When left empty, the bounds are ' + + 'Bounds for the primary Y-axis. When left empty, the bounds are ' + 'dynamically defined based on the min/max of the data. Note that ' + "this feature will only expand the axis range. It won't " + "narrow the data's extent.", @@ -400,6 +383,23 @@ const config: ControlPanelConfig = { }, }, ], + [ + { + name: 'y_axis_bounds_secondary', + config: { + type: 'BoundsControl', + label: t('Secondary y-axis Bounds'), + renderTrigger: true, + default: yAxisBounds, + description: t( + `Bounds for the secondary Y-axis. Only works when Independent Y-axes + bounds is enabled. When left empty, the bounds are dynamically defined + based on the min/max of the data. Note that this feature will only expand + the axis range. It won't narrow the data's extent.`, + ), + }, + }, + ], [ { name: `y_axis_format_secondary`, @@ -433,6 +433,20 @@ const config: ControlPanelConfig = { }, }, ], + [ + { + name: `independentYAxesBounds`, + config: { + type: 'CheckboxControl', + label: t('Independent Y-axes bounds'), + renderTrigger: true, + default: independentYAxesBounds, + description: t( + 'Whether to display Y-axes bounds independently of each other', + ), + }, + }, + ], ], }, ], 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 a924292980a63..66f05619ed6af 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts @@ -139,8 +139,8 @@ export default function transformProps( yAxisFormatSecondary, xAxisTimeFormat, yAxisBounds, - yAxisIndex, - yAxisIndexB, + yAxisBoundsSecondary, + independentYAxesBounds, yAxisTitleSecondary, zoomable, richTooltip, @@ -159,6 +159,8 @@ export default function transformProps( percentageThreshold, }: EchartsMixedTimeseriesFormData = { ...DEFAULT_FORM_DATA, ...formData }; + const yAxisIndex = 0; + const yAxisIndexB = independentYAxesBounds ? 1 : 0; const refs: Refs = {}; const colorScale = CategoricalColorNamespace.getScale(colorScheme as string); @@ -285,10 +287,13 @@ export default function transformProps( // yAxisBounds need to be parsed to replace incompatible values with undefined let [min, max] = (yAxisBounds || []).map(parseYAxisBound); + let [minSecondary, maxSecondary] = (yAxisBoundsSecondary || []).map( + parseYAxisBound, + ); const maxLabelFormatter = getOverMaxHiddenFormatter({ max, formatter }); const maxLabelFormatterSecondary = getOverMaxHiddenFormatter({ - max, + max: maxSecondary, formatter: formatterSecondary, }); @@ -348,6 +353,8 @@ export default function transformProps( if (contributionMode === 'row' && stack) { if (min === undefined) min = 0; if (max === undefined) max = 1; + if (minSecondary === undefined) minSecondary = 0; + if (maxSecondary === undefined) maxSecondary = 1; } const tooltipFormatter = @@ -415,8 +422,8 @@ export default function transformProps( { ...defaultYAxis, type: logAxisSecondary ? 'log' : 'value', - min, - max, + min: minSecondary, + max: maxSecondary, minorTick: { show: true }, splitLine: { show: false }, minorSplitLine: { show: minorSplitLine }, diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/types.ts b/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/types.ts index 3ec9b2a4b6d38..11e6e60e57c40 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/types.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/types.ts @@ -82,8 +82,7 @@ export type EchartsMixedTimeseriesFormData = QueryFormData & { showValueB: boolean; stack: StackType; stackB: StackType; - yAxisIndex?: number; - yAxisIndexB?: number; + independentYAxesBounds: boolean; groupby: QueryFormColumn[]; groupbyB: QueryFormColumn[]; } & LegendFormData & @@ -123,8 +122,7 @@ export const DEFAULT_FORM_DATA: EchartsMixedTimeseriesFormData = { showValueB: TIMESERIES_DEFAULTS.showValue, stack: TIMESERIES_DEFAULTS.stack, stackB: TIMESERIES_DEFAULTS.stack, - yAxisIndex: 0, - yAxisIndexB: 0, + independentYAxesBounds: false, groupby: [], groupbyB: [], zoomable: TIMESERIES_DEFAULTS.zoomable, From afece3a7ce00baf174ad1a6a9233ea36365bf331 Mon Sep 17 00:00:00 2001 From: "Michael S. Molina" Date: Wed, 3 May 2023 16:30:52 -0300 Subject: [PATCH 2/3] Reverts new control --- .../src/MixedTimeseries/controlPanel.tsx | 33 ++++++++++--------- .../src/MixedTimeseries/transformProps.ts | 5 ++- .../src/MixedTimeseries/types.ts | 6 ++-- 3 files changed, 24 insertions(+), 20 deletions(-) diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/controlPanel.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/controlPanel.tsx index bf1a0fc420bd8..cf5acd917e4ce 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/controlPanel.tsx +++ b/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/controlPanel.tsx @@ -35,7 +35,6 @@ import { legendSection, richTooltipSection } from '../controls'; const { area, - independentYAxesBounds, logAxis, markerEnabled, markerSize, @@ -50,6 +49,7 @@ const { yAxisBounds, zoomable, xAxisLabelRotation, + yAxisIndex, } = DEFAULT_FORM_DATA; function createQuerySection( @@ -235,6 +235,23 @@ function createCustomizeSection( }, }, ], + [ + { + name: `yAxisIndex${controlSuffix}`, + config: { + type: 'SelectControl', + label: t('Y Axis'), + choices: [ + [0, t('Primary')], + [1, t('Secondary')], + ], + default: yAxisIndex, + clearable: false, + renderTrigger: true, + description: t('Primary or secondary y-axis'), + }, + }, + ], ]; } @@ -433,20 +450,6 @@ const config: ControlPanelConfig = { }, }, ], - [ - { - name: `independentYAxesBounds`, - config: { - type: 'CheckboxControl', - label: t('Independent Y-axes bounds'), - renderTrigger: true, - default: independentYAxesBounds, - description: t( - 'Whether to display Y-axes bounds independently of each other', - ), - }, - }, - ], ], }, ], 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 66f05619ed6af..d47b0047c94db 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts @@ -140,7 +140,8 @@ export default function transformProps( xAxisTimeFormat, yAxisBounds, yAxisBoundsSecondary, - independentYAxesBounds, + yAxisIndex, + yAxisIndexB, yAxisTitleSecondary, zoomable, richTooltip, @@ -159,8 +160,6 @@ export default function transformProps( percentageThreshold, }: EchartsMixedTimeseriesFormData = { ...DEFAULT_FORM_DATA, ...formData }; - const yAxisIndex = 0; - const yAxisIndexB = independentYAxesBounds ? 1 : 0; const refs: Refs = {}; const colorScale = CategoricalColorNamespace.getScale(colorScheme as string); diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/types.ts b/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/types.ts index 11e6e60e57c40..3ec9b2a4b6d38 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/types.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/types.ts @@ -82,7 +82,8 @@ export type EchartsMixedTimeseriesFormData = QueryFormData & { showValueB: boolean; stack: StackType; stackB: StackType; - independentYAxesBounds: boolean; + yAxisIndex?: number; + yAxisIndexB?: number; groupby: QueryFormColumn[]; groupbyB: QueryFormColumn[]; } & LegendFormData & @@ -122,7 +123,8 @@ export const DEFAULT_FORM_DATA: EchartsMixedTimeseriesFormData = { showValueB: TIMESERIES_DEFAULTS.showValue, stack: TIMESERIES_DEFAULTS.stack, stackB: TIMESERIES_DEFAULTS.stack, - independentYAxesBounds: false, + yAxisIndex: 0, + yAxisIndexB: 0, groupby: [], groupbyB: [], zoomable: TIMESERIES_DEFAULTS.zoomable, From ac527ef03a9c1cf560bcf9b6d8b5ed90287372c0 Mon Sep 17 00:00:00 2001 From: "Michael S. Molina" <70410625+michael-s-molina@users.noreply.github.com> Date: Thu, 4 May 2023 16:16:32 -0300 Subject: [PATCH 3/3] Improves text Co-authored-by: Evan Rusackas --- .../plugin-chart-echarts/src/MixedTimeseries/controlPanel.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/controlPanel.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/controlPanel.tsx index cf5acd917e4ce..76abcb0b21a4b 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/controlPanel.tsx +++ b/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/controlPanel.tsx @@ -409,8 +409,8 @@ const config: ControlPanelConfig = { renderTrigger: true, default: yAxisBounds, description: t( - `Bounds for the secondary Y-axis. Only works when Independent Y-axes - bounds is enabled. When left empty, the bounds are dynamically defined + `Bounds for the secondary Y-axis. Only works when Independent Y-axis + bounds are enabled. When left empty, the bounds are dynamically defined based on the min/max of the data. Note that this feature will only expand the axis range. It won't narrow the data's extent.`, ),