From 4aeb6d43de905dd59d33c47b94f99606ab9edfa7 Mon Sep 17 00:00:00 2001 From: hexcafe Date: Sun, 30 Jun 2024 18:14:14 -0700 Subject: [PATCH 1/2] echarts: add data zoom options (start/end/lock) --- .../src/MixedTimeseries/controlPanel.tsx | 17 ++--- .../src/Timeseries/Area/controlPanel.tsx | 17 ++--- .../Timeseries/Regular/Bar/controlPanel.tsx | 26 ++------ .../Timeseries/Regular/Line/controlPanel.tsx | 17 ++--- .../Regular/Scatter/controlPanel.tsx | 17 ++--- .../Regular/SmoothLine/controlPanel.tsx | 17 ++--- .../src/Timeseries/Step/controlPanel.tsx | 17 ++--- .../src/Timeseries/transformProps.ts | 8 ++- .../src/Timeseries/types.ts | 3 + .../plugin-chart-echarts/src/controls.tsx | 66 +++++++++++++++++++ 10 files changed, 105 insertions(+), 100 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 201244f68941..f28f67d37d7d 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/controlPanel.tsx +++ b/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/controlPanel.tsx @@ -32,6 +32,8 @@ import { import { DEFAULT_FORM_DATA } from './types'; import { EchartsTimeseriesSeriesType } from '../Timeseries/types'; import { + dataZoom, + dataZoomSliderOptions, legendSection, minorTicks, richTooltipSection, @@ -54,7 +56,6 @@ const { stack, truncateYAxis, yAxisBounds, - zoomable, yAxisIndex, } = DEFAULT_FORM_DATA; @@ -301,18 +302,8 @@ const config: ControlPanelConfig = { ['color_scheme'], ...createCustomizeSection(t('Query A'), ''), ...createCustomizeSection(t('Query B'), 'B'), - [ - { - name: 'zoomable', - config: { - type: 'CheckboxControl', - label: t('Data Zoom'), - default: zoomable, - renderTrigger: true, - description: t('Enable data zooming controls'), - }, - }, - ], + [dataZoom], + ...dataZoomSliderOptions, [minorTicks], ...legendSection, [{t('X Axis')}], diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Area/controlPanel.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Area/controlPanel.tsx index ae9dc0afaac3..ef60742d61dd 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Area/controlPanel.tsx +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Area/controlPanel.tsx @@ -40,6 +40,8 @@ import { truncateXAxis, xAxisBounds, minorTicks, + dataZoom, + dataZoomSliderOptions, } from '../../controls'; import { AreaChartStackControlOptions } from '../../constants'; @@ -53,7 +55,6 @@ const { seriesType, truncateYAxis, yAxisBounds, - zoomable, } = DEFAULT_FORM_DATA; const config: ControlPanelConfig = { controlPanelSections: [ @@ -168,19 +169,9 @@ const config: ControlPanelConfig = { }, }, ], + [dataZoom], + ...dataZoomSliderOptions, [minorTicks], - [ - { - name: 'zoomable', - config: { - type: 'CheckboxControl', - label: t('Data Zoom'), - default: zoomable, - renderTrigger: true, - description: t('Enable data zooming controls'), - }, - }, - ], ...legendSection, [{t('X Axis')}], [ diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Bar/controlPanel.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Bar/controlPanel.tsx index 7482c7a16b01..c52f4fe293a5 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Bar/controlPanel.tsx +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Bar/controlPanel.tsx @@ -30,6 +30,8 @@ import { sharedControls, } from '@superset-ui/chart-controls'; import { + dataZoom, + dataZoomSliderOptions, legendSection, minorTicks, richTooltipSection, @@ -46,14 +48,8 @@ import { TIME_SERIES_DESCRIPTION_TEXT, } from '../../constants'; -const { - logAxis, - minorSplitLine, - truncateYAxis, - yAxisBounds, - zoomable, - orientation, -} = DEFAULT_FORM_DATA; +const { logAxis, minorSplitLine, truncateYAxis, yAxisBounds, orientation } = + DEFAULT_FORM_DATA; function createAxisTitleControl(axis: 'x' | 'y'): ControlSetRow[] { const isXAxis = axis === 'x'; @@ -298,19 +294,9 @@ const config: ControlPanelConfig = { ...seriesOrderSection, ['color_scheme'], ...showValueSection, + [dataZoom], + ...dataZoomSliderOptions, [minorTicks], - [ - { - name: 'zoomable', - config: { - type: 'CheckboxControl', - label: t('Data Zoom'), - default: zoomable, - renderTrigger: true, - description: t('Enable data zooming controls'), - }, - }, - ], ...legendSection, [{t('X Axis')}], ...createAxisControl('x'), diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Line/controlPanel.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Line/controlPanel.tsx index ca5d3377c4f8..b7b0c43f0119 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Line/controlPanel.tsx +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Line/controlPanel.tsx @@ -33,6 +33,8 @@ import { TIME_SERIES_DESCRIPTION_TEXT, } from '../../constants'; import { + dataZoom, + dataZoomSliderOptions, legendSection, minorTicks, richTooltipSection, @@ -54,7 +56,6 @@ const { seriesType, truncateYAxis, yAxisBounds, - zoomable, } = DEFAULT_FORM_DATA; const config: ControlPanelConfig = { controlPanelSections: [ @@ -156,18 +157,8 @@ const config: ControlPanelConfig = { }, }, ], - [ - { - name: 'zoomable', - config: { - type: 'CheckboxControl', - label: t('Data Zoom'), - default: zoomable, - renderTrigger: true, - description: t('Enable data zooming controls'), - }, - }, - ], + [dataZoom], + ...dataZoomSliderOptions, [minorTicks], ...legendSection, [{t('X Axis')}], diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Scatter/controlPanel.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Scatter/controlPanel.tsx index 8ca10e02fdb0..ede3bb2a3505 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Scatter/controlPanel.tsx +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Scatter/controlPanel.tsx @@ -32,6 +32,8 @@ import { TIME_SERIES_DESCRIPTION_TEXT, } from '../../constants'; import { + dataZoom, + dataZoomSliderOptions, legendSection, minorTicks, richTooltipSection, @@ -50,7 +52,6 @@ const { rowLimit, truncateYAxis, yAxisBounds, - zoomable, } = DEFAULT_FORM_DATA; const config: ControlPanelConfig = { controlPanelSections: [ @@ -98,18 +99,8 @@ const config: ControlPanelConfig = { }, }, ], - [ - { - name: 'zoomable', - config: { - type: 'CheckboxControl', - label: t('Data Zoom'), - default: zoomable, - renderTrigger: true, - description: t('Enable data zooming controls'), - }, - }, - ], + [dataZoom], + ...dataZoomSliderOptions, [minorTicks], ...legendSection, [{t('X Axis')}], diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/SmoothLine/controlPanel.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/SmoothLine/controlPanel.tsx index 45681d7be7fb..72c2fe791965 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/SmoothLine/controlPanel.tsx +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/SmoothLine/controlPanel.tsx @@ -32,6 +32,8 @@ import { TIME_SERIES_DESCRIPTION_TEXT, } from '../../constants'; import { + dataZoom, + dataZoomSliderOptions, legendSection, minorTicks, richTooltipSection, @@ -50,7 +52,6 @@ const { rowLimit, truncateYAxis, yAxisBounds, - zoomable, } = DEFAULT_FORM_DATA; const config: ControlPanelConfig = { controlPanelSections: [ @@ -98,18 +99,8 @@ const config: ControlPanelConfig = { }, }, ], - [ - { - name: 'zoomable', - config: { - type: 'CheckboxControl', - label: t('Data Zoom'), - default: zoomable, - renderTrigger: true, - description: t('Enable data zooming controls'), - }, - }, - ], + [dataZoom], + ...dataZoomSliderOptions, [minorTicks], ...legendSection, [{t('X Axis')}], diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Step/controlPanel.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Step/controlPanel.tsx index 274f11d62933..0350f7cf5cd9 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Step/controlPanel.tsx +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Step/controlPanel.tsx @@ -30,6 +30,8 @@ import { import { EchartsTimeseriesSeriesType } from '../../types'; import { DEFAULT_FORM_DATA, TIME_SERIES_DESCRIPTION_TEXT } from '../constants'; import { + dataZoom, + dataZoomSliderOptions, legendSection, minorTicks, richTooltipSection, @@ -50,7 +52,6 @@ const { rowLimit, truncateYAxis, yAxisBounds, - zoomable, } = DEFAULT_FORM_DATA; const config: ControlPanelConfig = { controlPanelSections: [ @@ -150,18 +151,8 @@ const config: ControlPanelConfig = { }, }, ], - [ - { - name: 'zoomable', - config: { - type: 'CheckboxControl', - label: t('Data Zoom'), - default: zoomable, - renderTrigger: true, - description: t('Enable data zooming controls'), - }, - }, - ], + [dataZoom], + ...dataZoomSliderOptions, [minorTicks], ...legendSection, [{t('X Axis')}], 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 9dae4385e973..a73fe8e7cb7b 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts @@ -185,6 +185,9 @@ export default function transformProps( yAxisTitleMargin, yAxisTitlePosition, zoomable, + zoomStart, + zoomEnd, + zoomLock, }: EchartsTimeseriesFormData = { ...DEFAULT_FORM_DATA, ...formData }; const refs: Refs = {}; const groupBy = ensureIsArray(groupby); @@ -627,8 +630,9 @@ export default function transformProps( ? [ { type: 'slider', - start: TIMESERIES_CONSTANTS.dataZoomStart, - end: TIMESERIES_CONSTANTS.dataZoomEnd, + start: zoomStart || TIMESERIES_CONSTANTS.dataZoomStart, + end: zoomEnd || TIMESERIES_CONSTANTS.dataZoomEnd, + zoomLock: zoomLock || false, bottom: TIMESERIES_CONSTANTS.zoomBottom, yAxisIndex: isHorizontal ? 0 : undefined, }, 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 6ca9650db62e..343444e99008 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/types.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/types.ts @@ -84,6 +84,9 @@ export type EchartsTimeseriesFormData = QueryFormData & { xAxisBounds: [number | undefined | null, number | undefined | null]; yAxisBounds: [number | undefined | null, number | undefined | null]; zoomable: boolean; + zoomStart?: number; + zoomEnd?: number; + zoomLock?: boolean; richTooltip: boolean; xAxisLabelRotation: number; showValue: boolean; diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/controls.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/controls.tsx index d6e9d6c68841..e38b3b0e3dbd 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/controls.tsx +++ b/superset-frontend/plugins/plugin-chart-echarts/src/controls.tsx @@ -309,6 +309,72 @@ export const minorTicks: ControlSetItem = { }, }; +export const dataZoom: ControlSetItem = { + name: 'zoomable', + config: { + type: 'CheckboxControl', + label: t('Data Zoom'), + default: false, + renderTrigger: true, + description: t('Enable data zooming controls'), + }, +}; + +export const dataZoomSliderOptions: ControlSetItem[][] = [ + [ + { + name: 'zoomStart', + config: { + type: 'SliderControl', + label: t('Zoom Start'), + renderTrigger: true, + min: 0, + max: 100, + step: 1, + default: 0, + description: t( + 'The start percentage of the window out of the data extent, in the range of 0 ~ 100.', + ), + visibility: ({ controls }: ControlPanelsContainerProps) => + Boolean(controls?.zoomable?.value), + }, + }, + ], + [ + { + name: 'zoomEnd', + config: { + type: 'SliderControl', + label: t('Zoom End'), + renderTrigger: true, + min: 0, + max: 100, + step: 1, + default: 0, + description: t( + 'The end percentage of the window out of the data extent, in the range of 0 ~ 100.', + ), + visibility: ({ controls }: ControlPanelsContainerProps) => + Boolean(controls?.zoomable?.value), + }, + }, + ], + [ + { + name: 'zoomLock', + config: { + type: 'CheckboxControl', + label: t('Zoom Lock'), + default: false, + renderTrigger: true, + description: t('Specify whether to lock the size of window.'), + visibility: ({ controls }: ControlPanelsContainerProps) => + Boolean(controls?.zoomable?.value), + }, + }, + ], +]; + export const forceCategorical: ControlSetItem = { name: 'forceCategorical', config: { From b32b91e295c165c4352e6e7e1447637a4da50c41 Mon Sep 17 00:00:00 2001 From: hexcafe Date: Mon, 1 Jul 2024 12:16:51 -0700 Subject: [PATCH 2/2] use default values from constants --- .../plugins/plugin-chart-echarts/src/controls.tsx | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/controls.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/controls.tsx index e38b3b0e3dbd..cc705d42b4da 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/controls.tsx +++ b/superset-frontend/plugins/plugin-chart-echarts/src/controls.tsx @@ -26,7 +26,11 @@ import { SORT_SERIES_CHOICES, sharedControls, } from '@superset-ui/chart-controls'; -import { DEFAULT_LEGEND_FORM_DATA, StackControlOptions } from './constants'; +import { + DEFAULT_LEGEND_FORM_DATA, + StackControlOptions, + TIMESERIES_CONSTANTS, +} from './constants'; import { DEFAULT_FORM_DATA } from './Timeseries/constants'; import { defaultXAxis } from './defaults'; @@ -314,7 +318,7 @@ export const dataZoom: ControlSetItem = { config: { type: 'CheckboxControl', label: t('Data Zoom'), - default: false, + default: DEFAULT_FORM_DATA.zoomable, renderTrigger: true, description: t('Enable data zooming controls'), }, @@ -331,7 +335,7 @@ export const dataZoomSliderOptions: ControlSetItem[][] = [ min: 0, max: 100, step: 1, - default: 0, + default: TIMESERIES_CONSTANTS.dataZoomStart, description: t( 'The start percentage of the window out of the data extent, in the range of 0 ~ 100.', ), @@ -350,7 +354,7 @@ export const dataZoomSliderOptions: ControlSetItem[][] = [ min: 0, max: 100, step: 1, - default: 0, + default: TIMESERIES_CONSTANTS.dataZoomEnd, description: t( 'The end percentage of the window out of the data extent, in the range of 0 ~ 100.', ),