diff --git a/packages/x-charts-pro/src/internals/plugins/useChartProZoom/useChartProZoom.selectors.ts b/packages/x-charts-pro/src/internals/plugins/useChartProZoom/useChartProZoom.selectors.ts index a12c8134cba3f..0a8a7df477bd9 100644 --- a/packages/x-charts-pro/src/internals/plugins/useChartProZoom/useChartProZoom.selectors.ts +++ b/packages/x-charts-pro/src/internals/plugins/useChartProZoom/useChartProZoom.selectors.ts @@ -1,29 +1,13 @@ import { ChartRootSelector, createSelector, - selectorChartRawXAxis, - selectorChartRawYAxis, + selectorChartZoomOptionsLookup, } from '@mui/x-charts/internals'; import { UseChartProZoomSignature } from './useChartProZoom.types'; -import { creatZoomLookup } from './creatZoomLookup'; export const selectorChartZoomState: ChartRootSelector = (state) => state.zoom; -const selectorChartXZoomOptionsLookup = createSelector(selectorChartRawXAxis, creatZoomLookup('x')); - -const selectorChartYZoomOptionsLookup = createSelector(selectorChartRawYAxis, creatZoomLookup('y')); - -export const selectorChartZoomOptionsLookup = createSelector( - [selectorChartXZoomOptionsLookup, selectorChartYZoomOptionsLookup], - (xLookup, yLookup) => ({ ...xLookup, ...yLookup }), -); - -export const selectorChartZoomData = createSelector( - selectorChartZoomState, - (zoom) => zoom.zoomData, -); - export const selectorChartZoomIsInteracting = createSelector( selectorChartZoomState, (zoom) => zoom.isInteracting, diff --git a/packages/x-charts-pro/src/internals/plugins/useChartProZoom/useChartProZoom.ts b/packages/x-charts-pro/src/internals/plugins/useChartProZoom/useChartProZoom.ts index 2181339e01054..d9d63cd2fbdfd 100644 --- a/packages/x-charts-pro/src/internals/plugins/useChartProZoom/useChartProZoom.ts +++ b/packages/x-charts-pro/src/internals/plugins/useChartProZoom/useChartProZoom.ts @@ -8,9 +8,10 @@ import { getSVGPoint, selectorChartDrawingArea, ZoomData, + creatZoomLookup, + selectorChartZoomOptionsLookup, } from '@mui/x-charts/internals'; import { UseChartProZoomSignature } from './useChartProZoom.types'; -import { creatZoomLookup } from './creatZoomLookup'; import { getDiff, getHorizontalCenterRatio, @@ -21,7 +22,6 @@ import { preventDefault, zoomAtPoint, } from './useChartProZoom.utils'; -import { selectorChartZoomOptionsLookup } from './useChartProZoom.selectors'; // It is helpful to avoid the need to provide the possibly auto-generated id for each axis. function initializeZoomData(options: Record) { @@ -372,24 +372,20 @@ useChartProZoom.params = { }; useChartProZoom.getDefaultizedParams = ({ params }) => { - const optionsLookup = { - ...creatZoomLookup('x')(params.defaultizedXAxis), - ...creatZoomLookup('y')(params.defaultizedYAxis), - }; - return { ...params, - optionsLookup, }; }; useChartProZoom.getInitialState = (params) => { + const optionsLookup = { + ...creatZoomLookup('x')(params.defaultizedXAxis), + ...creatZoomLookup('y')(params.defaultizedYAxis), + }; return { zoom: { zoomData: - params.initialZoom === undefined - ? initializeZoomData(params.optionsLookup) - : params.initialZoom, + params.initialZoom === undefined ? initializeZoomData(optionsLookup) : params.initialZoom, isInteracting: false, }, }; diff --git a/packages/x-charts-pro/src/internals/plugins/useChartProZoom/useChartProZoom.types.ts b/packages/x-charts-pro/src/internals/plugins/useChartProZoom/useChartProZoom.types.ts index 6eb4fec5f6b7f..ef1146f6b2d70 100644 --- a/packages/x-charts-pro/src/internals/plugins/useChartProZoom/useChartProZoom.types.ts +++ b/packages/x-charts-pro/src/internals/plugins/useChartProZoom/useChartProZoom.types.ts @@ -1,8 +1,6 @@ import { - AxisId, UseChartSeriesSignature, ChartPluginSignature, - DefaultizedZoomOptions, UseChartCartesianAxisSignature, UseChartCartesianAxisDefaultizedParameters, ZoomData, @@ -22,12 +20,7 @@ export interface UseChartProZoomParameters { } export type UseChartProZoomDefaultizedParameters = UseChartProZoomParameters & - UseChartCartesianAxisDefaultizedParameters & { - /** - * The zoom options for each axis. - */ - optionsLookup: Record; - }; + UseChartCartesianAxisDefaultizedParameters; export interface UseChartProZoomState { zoom: { diff --git a/packages/x-charts-pro/src/internals/plugins/useChartProZoom/zoom.types.ts b/packages/x-charts-pro/src/internals/plugins/useChartProZoom/zoom.types.ts deleted file mode 100644 index 65f9970232f2d..0000000000000 --- a/packages/x-charts-pro/src/internals/plugins/useChartProZoom/zoom.types.ts +++ /dev/null @@ -1,53 +0,0 @@ -export interface ZoomOptions { - /** - * The starting percentage of the zoom range. In the range of 0 to 100. - * - * @default 0 - */ - minStart?: number; - /** - * The ending percentage of the zoom range. In the range of 0 to 100. - * - * @default 100 - */ - maxEnd?: number; - /** - * The step size of the zooming function. Defines the granularity of the zoom. - * - * @default 5 - */ - step?: number; - /** - * Restricts the minimum span size in the range of 0 to 100. - * - * If the span size is smaller than the minSpan, the span will be resized to the minSpan. - * - * @default 10 - */ - minSpan?: number; - /** - * Restricts the maximum span size in the range of 0 to 100. - * - * If the span size is larger than the maxSpan, the span will be resized to the maxSpan. - * - * @default 100 - */ - maxSpan?: number; - /** - * Set to `false` to disable panning. Useful when you want to pan programmatically, - * or to show only a specific section of the chart. - * - * @default true - */ - panning?: boolean; - /** - * Defines how to filter the axis data when it is outside of the zoomed range of this axis. - * - * - `keep`: The data outside the zoomed range is kept. And the other axes will stay the same. - * - `discard`: The data outside the zoomed range is discarded for the other axes. - * The other axes will be adjusted to fit the zoomed range. - * - * @default 'keep' - */ - filterMode?: 'discard' | 'keep'; -} diff --git a/packages/x-charts-pro/src/typeOverloads/modules.ts b/packages/x-charts-pro/src/typeOverloads/modules.ts index 7fff71f5e95f9..3ff1b0682b654 100644 --- a/packages/x-charts-pro/src/typeOverloads/modules.ts +++ b/packages/x-charts-pro/src/typeOverloads/modules.ts @@ -1,12 +1,11 @@ import { DefaultizedProps } from '@mui/x-internals/types'; -import { AxisId } from '@mui/x-charts/internals'; +import { AxisId, ZoomOptions } from '@mui/x-charts/internals'; import { HeatmapItemIdentifier, HeatmapSeriesType, DefaultizedHeatmapSeriesType, HeatmapValueType, } from '../models/seriesType/heatmap'; -import { ZoomOptions as ZoomOptionsPro } from '../internals/plugins/useChartProZoom/zoom.types'; declare module '@mui/x-charts/internals' { interface ChartsSeriesConfig { @@ -20,9 +19,7 @@ declare module '@mui/x-charts/internals' { }; } - interface ZoomOptions extends ZoomOptionsPro {} - - interface DefaultizedZoomOptions extends Required { + interface DefaultizedZoomOptions extends Required { axisId: AxisId; axisDirection: 'x' | 'y'; } diff --git a/packages/x-charts-pro/src/internals/plugins/useChartProZoom/creatZoomLookup.ts b/packages/x-charts/src/internals/plugins/featurePlugins/useChartCartesianAxis/creatZoomLookup.ts similarity index 73% rename from packages/x-charts-pro/src/internals/plugins/useChartProZoom/creatZoomLookup.ts rename to packages/x-charts/src/internals/plugins/featurePlugins/useChartCartesianAxis/creatZoomLookup.ts index 18030d64b7229..9501c1e397ad1 100644 --- a/packages/x-charts-pro/src/internals/plugins/useChartProZoom/creatZoomLookup.ts +++ b/packages/x-charts/src/internals/plugins/featurePlugins/useChartCartesianAxis/creatZoomLookup.ts @@ -1,11 +1,13 @@ -import { AxisId, DefaultizedZoomOptions } from '@mui/x-charts/internals'; -import { AxisConfig, ChartsXAxisProps, ChartsYAxisProps, ScaleName } from '@mui/x-charts/models'; +import { AxisConfig, ChartsXAxisProps, ChartsYAxisProps, ScaleName } from '../../../../models'; +import { AxisId } from '../../../../models/axis'; import { defaultizeZoom } from './defaultizeZoom'; +import { DefaultizedZoomOptions } from './useChartCartesianAxis.types'; export const creatZoomLookup = (axisDirection: 'x' | 'y') => - (axes: AxisConfig[]) => + (axes: AxisConfig[] = []) => axes.reduce>((acc, v) => { + // @ts-ignore const { zoom, id: axisId } = v; const defaultizedZoom = defaultizeZoom(zoom, axisId, axisDirection); if (defaultizedZoom) { diff --git a/packages/x-charts-pro/src/internals/plugins/useChartProZoom/defaultizeZoom.ts b/packages/x-charts/src/internals/plugins/featurePlugins/useChartCartesianAxis/defaultizeZoom.ts similarity index 77% rename from packages/x-charts-pro/src/internals/plugins/useChartProZoom/defaultizeZoom.ts rename to packages/x-charts/src/internals/plugins/featurePlugins/useChartCartesianAxis/defaultizeZoom.ts index 6424d21c3d4c6..945201f0001a7 100644 --- a/packages/x-charts-pro/src/internals/plugins/useChartProZoom/defaultizeZoom.ts +++ b/packages/x-charts/src/internals/plugins/featurePlugins/useChartCartesianAxis/defaultizeZoom.ts @@ -1,4 +1,6 @@ -import { AxisId, DefaultizedZoomOptions, ZoomOptions } from '@mui/x-charts/internals'; +import { AxisId } from '../../../../models/axis'; +import { DefaultizedZoomOptions } from './useChartCartesianAxis.types'; +import { ZoomOptions } from './zoom.types'; const defaultZoomOptions: Required = { minStart: 0, diff --git a/packages/x-charts/src/internals/plugins/featurePlugins/useChartCartesianAxis/index.ts b/packages/x-charts/src/internals/plugins/featurePlugins/useChartCartesianAxis/index.ts index 679c01b919737..ddd9c10a11b63 100644 --- a/packages/x-charts/src/internals/plugins/featurePlugins/useChartCartesianAxis/index.ts +++ b/packages/x-charts/src/internals/plugins/featurePlugins/useChartCartesianAxis/index.ts @@ -3,4 +3,5 @@ export type * from './useChartCartesianAxis.types'; export * from './useChartCartesianAxis.selectors'; export { defaultizeAxis } from './defaultizeAxis'; export * from './computeAxisValue'; +export * from './creatZoomLookup'; export * from './zoom.types'; diff --git a/packages/x-charts/src/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxis.selectors.ts b/packages/x-charts/src/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxis.selectors.ts index 29680e8361ac3..fa2564ffd9465 100644 --- a/packages/x-charts/src/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxis.selectors.ts +++ b/packages/x-charts/src/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxis.selectors.ts @@ -10,6 +10,7 @@ import { UseChartCartesianAxisSignature } from './useChartCartesianAxis.types'; import { ChartState } from '../../models/chart'; import { createAxisFilterMapper, createGetAxisFilters } from './createAxisFilterMapper'; import { ZoomAxisFilters, ZoomData } from './zoom.types'; +import { creatZoomLookup } from './creatZoomLookup'; export const createZoomMap = (zoom: ZoomData[]) => { const zoomItemMap = new Map(); @@ -44,7 +45,14 @@ const selectorChartZoomMap = createSelector( (zoom) => zoom?.zoomData && createZoomMap(zoom?.zoomData), ); -const selectorChartZoomOptionsLookup = createSelector(selectorChartZoomState, () => undefined); +const selectorChartXZoomOptionsLookup = createSelector(selectorChartRawXAxis, creatZoomLookup('x')); + +const selectorChartYZoomOptionsLookup = createSelector(selectorChartRawYAxis, creatZoomLookup('y')); + +export const selectorChartZoomOptionsLookup = createSelector( + [selectorChartXZoomOptionsLookup, selectorChartYZoomOptionsLookup], + (xLookup, yLookup) => ({ ...xLookup, ...yLookup }), +); const selectorChartXFilter = createSelector( [ @@ -93,7 +101,6 @@ const selectorChartZoomAxisFilters = createSelector( } const xFilters = xAxis.reduce((acc, axis, index) => { - // @ts-expect-error The type is defined in the pro package const filter = xMapper(axis, index); if (filter !== null) { acc[axis.id] = filter; @@ -102,7 +109,6 @@ const selectorChartZoomAxisFilters = createSelector( }, {}); const yFilters = yAxis.reduce((acc, axis, index) => { - // @ts-expect-error The type is defined in the pro package const filter = yMapper(axis, index); if (filter !== null) { acc[axis.id] = filter; diff --git a/packages/x-charts/src/internals/plugins/featurePlugins/useChartCartesianAxis/zoom.types.ts b/packages/x-charts/src/internals/plugins/featurePlugins/useChartCartesianAxis/zoom.types.ts index 6d88ab9bc4ce1..674086c2d3a1e 100644 --- a/packages/x-charts/src/internals/plugins/featurePlugins/useChartCartesianAxis/zoom.types.ts +++ b/packages/x-charts/src/internals/plugins/featurePlugins/useChartCartesianAxis/zoom.types.ts @@ -7,7 +7,57 @@ export type ZoomData = { axisId: AxisId; start: number; end: number }; export type ZoomFilterMode = 'keep' | 'discard'; export interface ZoomOptions { - filterMode?: ZoomFilterMode; + /** + * The starting percentage of the zoom range. In the range of 0 to 100. + * + * @default 0 + */ + minStart?: number; + /** + * The ending percentage of the zoom range. In the range of 0 to 100. + * + * @default 100 + */ + maxEnd?: number; + /** + * The step size of the zooming function. Defines the granularity of the zoom. + * + * @default 5 + */ + step?: number; + /** + * Restricts the minimum span size in the range of 0 to 100. + * + * If the span size is smaller than the minSpan, the span will be resized to the minSpan. + * + * @default 10 + */ + minSpan?: number; + /** + * Restricts the maximum span size in the range of 0 to 100. + * + * If the span size is larger than the maxSpan, the span will be resized to the maxSpan. + * + * @default 100 + */ + maxSpan?: number; + /** + * Set to `false` to disable panning. Useful when you want to pan programmatically, + * or to show only a specific section of the chart. + * + * @default true + */ + panning?: boolean; + /** + * Defines how to filter the axis data when it is outside of the zoomed range of this axis. + * + * - `keep`: The data outside the zoomed range is kept. And the other axes will stay the same. + * - `discard`: The data outside the zoomed range is discarded for the other axes. + * The other axes will be adjusted to fit the zoomed range. + * + * @default 'keep' + */ + filterMode?: 'discard' | 'keep'; } export type ZoomAxisFilters = Record;