echarts: add data zoom options (start/end/lock)

apache · Jul 1, 2024 · 4aeb6d4 · 4aeb6d4
1 parent ba405ba
commit 4aeb6d4
Show file tree

Hide file tree

Showing 10 changed files with 105 additions and 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
@@ -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,
         [<ControlSubSectionHeader>{t('X Axis')}</ControlSubSectionHeader>],

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
@@ -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,
         [<ControlSubSectionHeader>{t('X Axis')}</ControlSubSectionHeader>],
         [

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
@@ -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,
         [<ControlSubSectionHeader>{t('X Axis')}</ControlSubSectionHeader>],
         ...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
@@ -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,
         [<ControlSubSectionHeader>{t('X Axis')}</ControlSubSectionHeader>],

diff --git a/...set-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Scatter/controlPanel.tsx b/...set-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,
         [<ControlSubSectionHeader>{t('X Axis')}</ControlSubSectionHeader>],

diff --git a/...-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/SmoothLine/controlPanel.tsx b/...-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,
         [<ControlSubSectionHeader>{t('X Axis')}</ControlSubSectionHeader>],

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
@@ -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,
         [<ControlSubSectionHeader>{t('X Axis')}</ControlSubSectionHeader>],

diff --git 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
@@ -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
@@ -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: {