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..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';
@@ -309,6 +313,72 @@ export const minorTicks: ControlSetItem = {
},
};
+export const dataZoom: ControlSetItem = {
+ name: 'zoomable',
+ config: {
+ type: 'CheckboxControl',
+ label: t('Data Zoom'),
+ default: DEFAULT_FORM_DATA.zoomable,
+ 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: TIMESERIES_CONSTANTS.dataZoomStart,
+ 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: TIMESERIES_CONSTANTS.dataZoomEnd,
+ 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: {