diff --git a/docs/pages/x/api/charts/chart-data-provider-pro.json b/docs/pages/x/api/charts/chart-data-provider-pro.json index 3553c23034f75..102cf940fbd87 100644 --- a/docs/pages/x/api/charts/chart-data-provider-pro.json +++ b/docs/pages/x/api/charts/chart-data-provider-pro.json @@ -1,73 +1,13 @@ { "props": { - "colors": { - "type": { "name": "union", "description": "Array<string>
| func" }, - "default": "rainbowSurgePalette" - }, - "dataset": { "type": { "name": "arrayOf", "description": "Array<object>" } }, - "disableAxisListener": { "type": { "name": "bool" }, "default": "false" }, - "height": { "type": { "name": "number" } }, - "highlightedItem": { - "type": { - "name": "shape", - "description": "{ dataIndex?: number, seriesId: number
| string }" - } - }, - "id": { "type": { "name": "string" } }, - "initialZoom": { - "type": { - "name": "arrayOf", - "description": "Array<{ axisId: number
| string, end: number, start: number }>" - } - }, - "margin": { - "type": { - "name": "shape", - "description": "{ bottom?: number, left?: number, right?: number, top?: number }" - } - }, - "onAxisClick": { - "type": { "name": "func" }, - "signature": { - "type": "function(event: MouseEvent, data: null | AxisData) => void", - "describedArgs": ["event", "data"] - } - }, - "onHighlightChange": { - "type": { "name": "func" }, - "signature": { - "type": "function(highlightedItem: HighlightItemData | null) => void", - "describedArgs": ["highlightedItem"] - } - }, - "onZoomChange": { - "type": { "name": "func" }, - "signature": { - "type": "function(zoomData: Array) => void", - "describedArgs": ["zoomData"] - } - }, - "series": { "type": { "name": "arrayOf", "description": "Array<object>" } }, - "skipAnimation": { "type": { "name": "bool" } }, - "width": { "type": { "name": "number" } }, - "xAxis": { - "type": { - "name": "arrayOf", - "description": "Array<{ classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'bottom'
| 'top', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, step?: number }
| bool }>" - } - }, - "yAxis": { - "type": { - "name": "arrayOf", - "description": "Array<{ classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| func, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'left'
| 'right', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, step?: number }
| bool }>" - } - }, - "zAxis": { - "type": { - "name": "arrayOf", - "description": "Array<{ colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }
| { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }, data?: array, dataKey?: string, id?: string, max?: number, min?: number }>" - } - } + "colors": { "type": { "name": "any" }, "default": "rainbowSurgePalette" }, + "dataset": { "type": { "name": "any" } }, + "height": { "type": { "name": "any" } }, + "id": { "type": { "name": "any" } }, + "margin": { "type": { "name": "any" } }, + "series": { "type": { "name": "any" } }, + "skipAnimation": { "type": { "name": "any" } }, + "width": { "type": { "name": "any" } } }, "name": "ChartDataProviderPro", "imports": [ diff --git a/docs/translations/api-docs/charts/chart-data-provider-pro/chart-data-provider-pro.json b/docs/translations/api-docs/charts/chart-data-provider-pro/chart-data-provider-pro.json index aa13e7ba34571..20f5342072d16 100644 --- a/docs/translations/api-docs/charts/chart-data-provider-pro/chart-data-provider-pro.json +++ b/docs/translations/api-docs/charts/chart-data-provider-pro/chart-data-provider-pro.json @@ -5,37 +5,15 @@ "dataset": { "description": "An array of objects that can be used to populate series and axes data using their dataKey property." }, - "disableAxisListener": { - "description": "If true, the charts will not listen to the mouse move event. It might break interactive features, but will improve performance." - }, "height": { "description": "The height of the chart in px. If not defined, it takes the height of the parent element." }, - "highlightedItem": { - "description": "The highlighted item. Used when the highlight is controlled." - }, "id": { "description": "This prop is used to help implement the accessibility logic. If you don't provide this prop. It falls back to a randomly generated id." }, - "initialZoom": { "description": "The list of zoom data related to each axis." }, "margin": { "description": "The margin between the SVG and the drawing area. It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts an object with the optional properties: top, bottom, left, and right." }, - "onAxisClick": { - "description": "The function called for onClick events. The second argument contains information about all line/bar elements at the current mouse position.", - "typeDescriptions": { - "event": "The mouse event recorded on the <svg/> element.", - "data": "The data about the clicked axis and items associated with it." - } - }, - "onHighlightChange": { - "description": "The callback fired when the highlighted item changes.", - "typeDescriptions": { "highlightedItem": "The newly highlighted item." } - }, - "onZoomChange": { - "description": "Callback fired when the zoom has changed.", - "typeDescriptions": { "zoomData": "Updated zoom data." } - }, "series": { "description": "The array of series to display. Each type of series has its own specificity. Please refer to the appropriate docs page to learn more about it." }, @@ -44,14 +22,7 @@ }, "width": { "description": "The width of the chart in px. If not defined, it takes the width of the parent element." - }, - "xAxis": { - "description": "The configuration of the x-axes. If not provided, a default axis config is used. An array of AxisConfig objects." - }, - "yAxis": { - "description": "The configuration of the y-axes. If not provided, a default axis config is used. An array of AxisConfig objects." - }, - "zAxis": { "description": "The configuration of the z-axes." } + } }, "classDescriptions": {} } diff --git a/packages/x-charts-pro/src/BarChartPro/BarChartPro.plugins.ts b/packages/x-charts-pro/src/BarChartPro/BarChartPro.plugins.ts new file mode 100644 index 0000000000000..35ea24d234221 --- /dev/null +++ b/packages/x-charts-pro/src/BarChartPro/BarChartPro.plugins.ts @@ -0,0 +1,28 @@ +import { + useChartZAxis, + UseChartZAxisSignature, + useChartCartesianAxis, + UseChartCartesianAxisSignature, + useChartInteraction, + UseChartInteractionSignature, + useChartHighlight, + UseChartHighlightSignature, + ConvertSignaturesIntoPlugins, +} from '@mui/x-charts/internals'; +import { useChartProZoom, UseChartProZoomSignature } from '../internals/plugins/useChartProZoom'; + +export type BarChartProPluginsSignatures = [ + UseChartZAxisSignature, + UseChartCartesianAxisSignature<'bar'>, + UseChartInteractionSignature, + UseChartHighlightSignature, + UseChartProZoomSignature, +]; + +export const BAR_CHART_PRO_PLUGINS: ConvertSignaturesIntoPlugins = [ + useChartZAxis, + useChartCartesianAxis, + useChartInteraction, + useChartHighlight, + useChartProZoom, +]; diff --git a/packages/x-charts-pro/src/BarChartPro/BarChartPro.tsx b/packages/x-charts-pro/src/BarChartPro/BarChartPro.tsx index ca97302564544..f596a36fbc6cf 100644 --- a/packages/x-charts-pro/src/BarChartPro/BarChartPro.tsx +++ b/packages/x-charts-pro/src/BarChartPro/BarChartPro.tsx @@ -16,6 +16,7 @@ import { ChartContainerProProps } from '../ChartContainerPro'; import { useIsZoomInteracting } from '../hooks/zoom'; import { useChartContainerProProps } from '../ChartContainerPro/useChartContainerProProps'; import { ChartDataProviderPro } from '../ChartDataProviderPro'; +import { BAR_CHART_PRO_PLUGINS, BarChartProPluginsSignatures } from './BarChartPro.plugins'; function BarChartPlotZoom(props: BarPlotProps) { const isInteracting = useIsZoomInteracting(); @@ -98,8 +99,11 @@ const BarChartPro = React.forwardRef(function BarChartPro( children, } = useBarChartProps(other); - const { chartDataProviderProProps, chartsSurfaceProps } = useChartContainerProProps( - { ...chartContainerProps, initialZoom, onZoomChange, apiRef }, + const { chartDataProviderProProps, chartsSurfaceProps } = useChartContainerProProps< + 'bar', + BarChartProPluginsSignatures + >( + { ...chartContainerProps, initialZoom, onZoomChange, apiRef, plugins: BAR_CHART_PRO_PLUGINS }, ref, ); diff --git a/packages/x-charts-pro/src/ChartContainerPro/ChartContainerPro.tsx b/packages/x-charts-pro/src/ChartContainerPro/ChartContainerPro.tsx index 842116e0d2d9d..b35db160b63f8 100644 --- a/packages/x-charts-pro/src/ChartContainerPro/ChartContainerPro.tsx +++ b/packages/x-charts-pro/src/ChartContainerPro/ChartContainerPro.tsx @@ -3,17 +3,21 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import type {} from '../typeOverloads'; import { ChartsSurface, ChartsSurfaceProps } from '@mui/x-charts/ChartsSurface'; -import { ChartSeriesType } from '@mui/x-charts/internals'; +import { ChartAnyPluginSignature, ChartSeriesType } from '@mui/x-charts/internals'; import { useChartContainerProProps } from './useChartContainerProProps'; import { AllPluginSignatures } from '../internals/plugins/allPlugins'; import { ChartDataProviderPro, ChartDataProviderProProps } from '../ChartDataProviderPro'; -export interface ChartContainerProProps - extends ChartDataProviderProProps>, - ChartsSurfaceProps {} +export type ChartContainerProProps< + TSeries extends ChartSeriesType = ChartSeriesType, + TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures, +> = ChartDataProviderProProps & ChartsSurfaceProps; -type ChartContainerProComponent = ( - props: ChartContainerProProps & { ref?: React.ForwardedRef }, +type ChartContainerProComponent = < + TSeries extends ChartSeriesType = ChartSeriesType, + TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures, +>( + props: ChartContainerProProps & { ref?: React.ForwardedRef }, ) => React.JSX.Element; /** @@ -42,9 +46,12 @@ type ChartContainerProComponent = (props: ChartContainerProProps, ref: React.Ref) { - const { chartDataProviderProProps, children, chartsSurfaceProps } = - useChartContainerProProps(props, ref); + TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures, +>(props: ChartContainerProProps, ref: React.Ref) { + const { chartDataProviderProProps, children, chartsSurfaceProps } = useChartContainerProProps< + TSeries, + TSignatures + >(props, ref); return ( diff --git a/packages/x-charts-pro/src/ChartContainerPro/useChartContainerProProps.ts b/packages/x-charts-pro/src/ChartContainerPro/useChartContainerProProps.ts index 4da229dffb9cd..b03bed1e0757e 100644 --- a/packages/x-charts-pro/src/ChartContainerPro/useChartContainerProProps.ts +++ b/packages/x-charts-pro/src/ChartContainerPro/useChartContainerProProps.ts @@ -1,5 +1,6 @@ 'use client'; import { + ChartAnyPluginSignature, ChartSeriesType, useChartContainerProps, UseChartContainerPropsReturnValue, @@ -7,41 +8,43 @@ import { import * as React from 'react'; import { ChartDataProviderProps } from '@mui/x-charts/ChartDataProvider'; import type { ChartContainerProProps } from './ChartContainerPro'; -import { ALL_PLUGINS, AllPluginsType, AllPluginSignatures } from '../internals/plugins/allPlugins'; +import { ALL_PLUGINS, AllPluginSignatures } from '../internals/plugins/allPlugins'; -export type UseChartContainerProPropsReturnValue = Pick< - UseChartContainerPropsReturnValue, +export type UseChartContainerProPropsReturnValue< + TSeries extends ChartSeriesType, + TSignatures extends readonly ChartAnyPluginSignature[], +> = Pick< + UseChartContainerPropsReturnValue, 'chartsSurfaceProps' | 'children' > & { - chartDataProviderProProps: ChartDataProviderProps>; + chartDataProviderProProps: ChartDataProviderProps; }; -export const useChartContainerProProps = ( - props: ChartContainerProProps, +export const useChartContainerProProps = < + TSeries extends ChartSeriesType = ChartSeriesType, + TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures, +>( + props: ChartContainerProProps, ref: React.Ref, -): UseChartContainerProPropsReturnValue => { - const { initialZoom, onZoomChange, plugins, apiRef, ...baseProps } = props; - - const chartDataProviderProProps: Pick< - ChartDataProviderProps>, - 'initialZoom' | 'onZoomChange' - > = { - initialZoom, - onZoomChange, - }; +): UseChartContainerProPropsReturnValue => { + const { initialZoom, onZoomChange, plugins, apiRef, ...baseProps } = + props as ChartContainerProProps; const { chartDataProviderProps, chartsSurfaceProps, children } = useChartContainerProps( baseProps, ref, ); + const chartDataProviderProProps = { + ...chartDataProviderProps, + initialZoom, + onZoomChange, + apiRef, + plugins: plugins ?? ALL_PLUGINS, + } as unknown as ChartDataProviderProps; + return { - chartDataProviderProProps: { - ...chartDataProviderProps, - ...chartDataProviderProProps, - apiRef, - plugins: plugins ?? (ALL_PLUGINS as unknown as AllPluginsType), - }, + chartDataProviderProProps, chartsSurfaceProps, children, }; diff --git a/packages/x-charts-pro/src/ChartDataProviderPro/ChartDataProviderPro.tsx b/packages/x-charts-pro/src/ChartDataProviderPro/ChartDataProviderPro.tsx index 1112d71adf234..7dfbd28ff5189 100644 --- a/packages/x-charts-pro/src/ChartDataProviderPro/ChartDataProviderPro.tsx +++ b/packages/x-charts-pro/src/ChartDataProviderPro/ChartDataProviderPro.tsx @@ -51,9 +51,10 @@ export type ChartDataProviderProProps< * * ``` */ -function ChartDataProviderPro( - props: ChartDataProviderProProps, -) { +function ChartDataProviderPro< + TSeries extends ChartSeriesType = ChartSeriesType, + TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures, +>(props: ChartDataProviderProProps) { const { children, animationProviderProps, chartProviderProps } = useChartDataProviderProProps(props); @@ -74,311 +75,48 @@ ChartDataProviderPro.propTypes = { // | These PropTypes are generated from the TypeScript type definitions | // | To update them edit the TypeScript types and run "pnpm proptypes" | // ---------------------------------------------------------------------- - apiRef: PropTypes.shape({ - current: PropTypes.shape({ - setZoomData: PropTypes.func.isRequired, - }), - }), + apiRef: PropTypes.any, children: PropTypes.node, /** * Color palette used to colorize multiple series. * @default rainbowSurgePalette */ - colors: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.func]), + colors: PropTypes.any, /** * An array of objects that can be used to populate series and axes data using their `dataKey` property. */ - dataset: PropTypes.arrayOf(PropTypes.object), - /** - * If `true`, the charts will not listen to the mouse move event. - * It might break interactive features, but will improve performance. - * @default false - */ - disableAxisListener: PropTypes.bool, + dataset: PropTypes.any, /** * The height of the chart in px. If not defined, it takes the height of the parent element. */ - height: PropTypes.number, - /** - * The highlighted item. - * Used when the highlight is controlled. - */ - highlightedItem: PropTypes.shape({ - dataIndex: PropTypes.number, - seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired, - }), + height: PropTypes.any, /** * This prop is used to help implement the accessibility logic. * If you don't provide this prop. It falls back to a randomly generated id. */ - id: PropTypes.string, - /** - * The list of zoom data related to each axis. - */ - initialZoom: PropTypes.arrayOf( - PropTypes.shape({ - axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired, - end: PropTypes.number.isRequired, - start: PropTypes.number.isRequired, - }), - ), + id: PropTypes.any, /** * The margin between the SVG and the drawing area. * It's used for leaving some space for extra information such as the x- and y-axis or legend. * Accepts an object with the optional properties: `top`, `bottom`, `left`, and `right`. */ - margin: PropTypes.shape({ - bottom: PropTypes.number, - left: PropTypes.number, - right: PropTypes.number, - top: PropTypes.number, - }), - /** - * The function called for onClick events. - * The second argument contains information about all line/bar elements at the current mouse position. - * @param {MouseEvent} event The mouse event recorded on the `` element. - * @param {null | AxisData} data The data about the clicked axis and items associated with it. - */ - onAxisClick: PropTypes.func, - /** - * The callback fired when the highlighted item changes. - * - * @param {HighlightItemData | null} highlightedItem The newly highlighted item. - */ - onHighlightChange: PropTypes.func, - /** - * Callback fired when the zoom has changed. - * - * @param {ZoomData[]} zoomData Updated zoom data. - */ - onZoomChange: PropTypes.func, + margin: PropTypes.any, /** * The array of series to display. * Each type of series has its own specificity. * Please refer to the appropriate docs page to learn more about it. */ - series: PropTypes.arrayOf(PropTypes.object), + series: PropTypes.any, /** * If `true`, animations are skipped. * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting. */ - skipAnimation: PropTypes.bool, - theme: PropTypes.oneOf(['dark', 'light']), + skipAnimation: PropTypes.any, + theme: PropTypes.any, /** * The width of the chart in px. If not defined, it takes the width of the parent element. */ - width: PropTypes.number, - /** - * The configuration of the x-axes. - * If not provided, a default axis config is used. - * An array of [[AxisConfig]] objects. - */ - xAxis: PropTypes.arrayOf( - PropTypes.shape({ - classes: PropTypes.object, - colorMap: PropTypes.oneOfType([ - PropTypes.shape({ - colors: PropTypes.arrayOf(PropTypes.string).isRequired, - type: PropTypes.oneOf(['ordinal']).isRequired, - unknownColor: PropTypes.string, - values: PropTypes.arrayOf( - PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]) - .isRequired, - ), - }), - PropTypes.shape({ - color: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.string.isRequired), - PropTypes.func, - ]).isRequired, - max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), - min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), - type: PropTypes.oneOf(['continuous']).isRequired, - }), - PropTypes.shape({ - colors: PropTypes.arrayOf(PropTypes.string).isRequired, - thresholds: PropTypes.arrayOf( - PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired, - ).isRequired, - type: PropTypes.oneOf(['piecewise']).isRequired, - }), - ]), - data: PropTypes.array, - dataKey: PropTypes.string, - disableLine: PropTypes.bool, - disableTicks: PropTypes.bool, - domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]), - fill: PropTypes.string, - hideTooltip: PropTypes.bool, - id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), - label: PropTypes.string, - labelStyle: PropTypes.object, - max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), - min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), - position: PropTypes.oneOf(['bottom', 'top']), - reverse: PropTypes.bool, - scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']), - slotProps: PropTypes.object, - slots: PropTypes.object, - stroke: PropTypes.string, - sx: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), - PropTypes.func, - PropTypes.object, - ]), - tickInterval: PropTypes.oneOfType([ - PropTypes.oneOf(['auto']), - PropTypes.array, - PropTypes.func, - ]), - tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), - tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']), - tickLabelStyle: PropTypes.object, - tickMaxStep: PropTypes.number, - tickMinStep: PropTypes.number, - tickNumber: PropTypes.number, - tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']), - tickSize: PropTypes.number, - valueFormatter: PropTypes.func, - zoom: PropTypes.oneOfType([ - PropTypes.shape({ - filterMode: PropTypes.oneOf(['discard', 'keep']), - maxEnd: PropTypes.number, - maxSpan: PropTypes.number, - minSpan: PropTypes.number, - minStart: PropTypes.number, - panning: PropTypes.bool, - step: PropTypes.number, - }), - PropTypes.bool, - ]), - }), - ), - /** - * The configuration of the y-axes. - * If not provided, a default axis config is used. - * An array of [[AxisConfig]] objects. - */ - yAxis: PropTypes.arrayOf( - PropTypes.shape({ - classes: PropTypes.object, - colorMap: PropTypes.oneOfType([ - PropTypes.shape({ - colors: PropTypes.arrayOf(PropTypes.string).isRequired, - type: PropTypes.oneOf(['ordinal']).isRequired, - unknownColor: PropTypes.string, - values: PropTypes.arrayOf( - PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]) - .isRequired, - ), - }), - PropTypes.shape({ - color: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.string.isRequired), - PropTypes.func, - ]).isRequired, - max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), - min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), - type: PropTypes.oneOf(['continuous']).isRequired, - }), - PropTypes.shape({ - colors: PropTypes.arrayOf(PropTypes.string).isRequired, - thresholds: PropTypes.arrayOf( - PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired, - ).isRequired, - type: PropTypes.oneOf(['piecewise']).isRequired, - }), - ]), - data: PropTypes.array, - dataKey: PropTypes.string, - disableLine: PropTypes.bool, - disableTicks: PropTypes.bool, - domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]), - fill: PropTypes.string, - hideTooltip: PropTypes.bool, - id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), - label: PropTypes.string, - labelStyle: PropTypes.object, - max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), - min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), - position: PropTypes.oneOf(['left', 'right']), - reverse: PropTypes.bool, - scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']), - slotProps: PropTypes.object, - slots: PropTypes.object, - stroke: PropTypes.string, - sx: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), - PropTypes.func, - PropTypes.object, - ]), - tickInterval: PropTypes.oneOfType([ - PropTypes.oneOf(['auto']), - PropTypes.array, - PropTypes.func, - ]), - tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]), - tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']), - tickLabelStyle: PropTypes.object, - tickMaxStep: PropTypes.number, - tickMinStep: PropTypes.number, - tickNumber: PropTypes.number, - tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']), - tickSize: PropTypes.number, - valueFormatter: PropTypes.func, - zoom: PropTypes.oneOfType([ - PropTypes.shape({ - filterMode: PropTypes.oneOf(['discard', 'keep']), - maxEnd: PropTypes.number, - maxSpan: PropTypes.number, - minSpan: PropTypes.number, - minStart: PropTypes.number, - panning: PropTypes.bool, - step: PropTypes.number, - }), - PropTypes.bool, - ]), - }), - ), - /** - * The configuration of the z-axes. - */ - zAxis: PropTypes.arrayOf( - PropTypes.shape({ - colorMap: PropTypes.oneOfType([ - PropTypes.shape({ - colors: PropTypes.arrayOf(PropTypes.string).isRequired, - type: PropTypes.oneOf(['ordinal']).isRequired, - unknownColor: PropTypes.string, - values: PropTypes.arrayOf( - PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]) - .isRequired, - ), - }), - PropTypes.shape({ - color: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.string.isRequired), - PropTypes.func, - ]).isRequired, - max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), - min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]), - type: PropTypes.oneOf(['continuous']).isRequired, - }), - PropTypes.shape({ - colors: PropTypes.arrayOf(PropTypes.string).isRequired, - thresholds: PropTypes.arrayOf( - PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired, - ).isRequired, - type: PropTypes.oneOf(['piecewise']).isRequired, - }), - ]), - data: PropTypes.array, - dataKey: PropTypes.string, - id: PropTypes.string, - max: PropTypes.number, - min: PropTypes.number, - }), - ), + width: PropTypes.any, } as any; export { ChartDataProviderPro }; diff --git a/packages/x-charts-pro/src/Heatmap/Heatmap.plugins.ts b/packages/x-charts-pro/src/Heatmap/Heatmap.plugins.ts new file mode 100644 index 0000000000000..c8e6d8551ca2c --- /dev/null +++ b/packages/x-charts-pro/src/Heatmap/Heatmap.plugins.ts @@ -0,0 +1,25 @@ +import { + useChartZAxis, + UseChartZAxisSignature, + useChartCartesianAxis, + UseChartCartesianAxisSignature, + useChartInteraction, + UseChartInteractionSignature, + useChartHighlight, + UseChartHighlightSignature, + ConvertSignaturesIntoPlugins, +} from '@mui/x-charts/internals'; + +export type HeatmapPluginsSignatures = [ + UseChartZAxisSignature, + UseChartCartesianAxisSignature<'heatmap'>, + UseChartInteractionSignature, + UseChartHighlightSignature, +]; + +export const HEATMAP_PLUGINS = [ + useChartZAxis, + useChartCartesianAxis, + useChartInteraction, + useChartHighlight, +] as ConvertSignaturesIntoPlugins; diff --git a/packages/x-charts-pro/src/Heatmap/Heatmap.tsx b/packages/x-charts-pro/src/Heatmap/Heatmap.tsx index 6997842e1f505..1362f96eb6de3 100644 --- a/packages/x-charts-pro/src/Heatmap/Heatmap.tsx +++ b/packages/x-charts-pro/src/Heatmap/Heatmap.tsx @@ -28,6 +28,7 @@ import { HeatmapPlot } from './HeatmapPlot'; import { plugin as heatmapPlugin } from './plugin'; import { HeatmapTooltip, HeatmapTooltipProps } from './HeatmapTooltip'; import { HeatmapItemSlotProps, HeatmapItemSlots } from './HeatmapItem'; +import { HEATMAP_PLUGINS, HeatmapPluginsSignatures } from './Heatmap.plugins'; export interface HeatmapSlots extends ChartsAxisSlots, ChartsOverlaySlots, HeatmapItemSlots { /** @@ -159,7 +160,7 @@ const Heatmap = React.forwardRef(function Heatmap( const Tooltip = props.slots?.tooltip ?? HeatmapTooltip; return ( - ref={ref} seriesConfig={seriesConfig} series={series.map((s) => ({ @@ -179,6 +180,7 @@ const Heatmap = React.forwardRef(function Heatmap( highlightedItem={highlightedItem} onHighlightChange={onHighlightChange} onAxisClick={onAxisClick} + plugins={HEATMAP_PLUGINS} > diff --git a/packages/x-charts-pro/src/LineChartPro/LineChartPro.plugins.ts b/packages/x-charts-pro/src/LineChartPro/LineChartPro.plugins.ts new file mode 100644 index 0000000000000..63ba44dfbdf61 --- /dev/null +++ b/packages/x-charts-pro/src/LineChartPro/LineChartPro.plugins.ts @@ -0,0 +1,28 @@ +import { + useChartZAxis, + UseChartZAxisSignature, + useChartCartesianAxis, + UseChartCartesianAxisSignature, + useChartInteraction, + UseChartInteractionSignature, + useChartHighlight, + UseChartHighlightSignature, + ConvertSignaturesIntoPlugins, +} from '@mui/x-charts/internals'; +import { useChartProZoom, UseChartProZoomSignature } from '../internals/plugins/useChartProZoom'; + +export type LineChartProPluginsSignatures = [ + UseChartZAxisSignature, + UseChartCartesianAxisSignature<'line'>, + UseChartInteractionSignature, + UseChartHighlightSignature, + UseChartProZoomSignature, +]; + +export const LINE_CHART_PRO_PLUGINS: ConvertSignaturesIntoPlugins = [ + useChartZAxis, + useChartCartesianAxis, + useChartInteraction, + useChartHighlight, + useChartProZoom, +]; diff --git a/packages/x-charts-pro/src/LineChartPro/LineChartPro.tsx b/packages/x-charts-pro/src/LineChartPro/LineChartPro.tsx index 758af80c177dc..9f1636afbd03f 100644 --- a/packages/x-charts-pro/src/LineChartPro/LineChartPro.tsx +++ b/packages/x-charts-pro/src/LineChartPro/LineChartPro.tsx @@ -25,6 +25,7 @@ import { ChartContainerProProps } from '../ChartContainerPro'; import { useIsZoomInteracting } from '../hooks/zoom'; import { useChartContainerProProps } from '../ChartContainerPro/useChartContainerProProps'; import { ChartDataProviderPro } from '../ChartDataProviderPro'; +import { LINE_CHART_PRO_PLUGINS, LineChartProPluginsSignatures } from './LineChartPro.plugins'; function AreaPlotZoom(props: AreaPlotProps) { const isInteracting = useIsZoomInteracting(); @@ -161,8 +162,11 @@ const LineChartPro = React.forwardRef(function LineChartPro( legendProps, children, } = useLineChartProps(other); - const { chartDataProviderProProps, chartsSurfaceProps } = useChartContainerProProps( - { ...chartContainerProps, initialZoom, onZoomChange, apiRef }, + const { chartDataProviderProProps, chartsSurfaceProps } = useChartContainerProProps< + 'line', + LineChartProPluginsSignatures + >( + { ...chartContainerProps, initialZoom, onZoomChange, apiRef, plugins: LINE_CHART_PRO_PLUGINS }, ref, ); diff --git a/packages/x-charts-pro/src/ScatterChartPro/ScatterChartPro.plugins.ts b/packages/x-charts-pro/src/ScatterChartPro/ScatterChartPro.plugins.ts new file mode 100644 index 0000000000000..5b5afe9c4e333 --- /dev/null +++ b/packages/x-charts-pro/src/ScatterChartPro/ScatterChartPro.plugins.ts @@ -0,0 +1,23 @@ +import { + useChartZAxis, + UseChartZAxisSignature, + useChartCartesianAxis, + UseChartCartesianAxisSignature, + useChartInteraction, + UseChartInteractionSignature, + useChartHighlight, + UseChartHighlightSignature, + ConvertSignaturesIntoPlugins, +} from '@mui/x-charts/internals'; +import { useChartProZoom, UseChartProZoomSignature } from '../internals/plugins/useChartProZoom'; + +export type ScatterChartProPluginsSignatures = [ + UseChartZAxisSignature, + UseChartCartesianAxisSignature<'scatter'>, + UseChartInteractionSignature, + UseChartHighlightSignature, + UseChartProZoomSignature, +]; + +export const SCATTER_CHART_PRO_PLUGINS: ConvertSignaturesIntoPlugins = + [useChartZAxis, useChartCartesianAxis, useChartInteraction, useChartHighlight, useChartProZoom]; diff --git a/packages/x-charts-pro/src/ScatterChartPro/ScatterChartPro.tsx b/packages/x-charts-pro/src/ScatterChartPro/ScatterChartPro.tsx index 695c301719114..4cd2d530403a9 100644 --- a/packages/x-charts-pro/src/ScatterChartPro/ScatterChartPro.tsx +++ b/packages/x-charts-pro/src/ScatterChartPro/ScatterChartPro.tsx @@ -15,6 +15,10 @@ import { useScatterChartProps, ChartsWrapper } from '@mui/x-charts/internals'; import { useChartContainerProProps } from '../ChartContainerPro/useChartContainerProProps'; import { ChartContainerProProps } from '../ChartContainerPro/ChartContainerPro'; import { ChartDataProviderPro } from '../ChartDataProviderPro'; +import { + SCATTER_CHART_PRO_PLUGINS, + ScatterChartProPluginsSignatures, +} from './ScatterChartPro.plugins'; export interface ScatterChartProProps extends Omit, @@ -48,8 +52,17 @@ const ScatterChartPro = React.forwardRef(function ScatterChartPro( axisHighlightProps, children, } = useScatterChartProps(other); - const { chartDataProviderProProps, chartsSurfaceProps } = useChartContainerProProps( - { ...chartContainerProps, initialZoom, onZoomChange, apiRef }, + const { chartDataProviderProProps, chartsSurfaceProps } = useChartContainerProProps< + 'scatter', + ScatterChartProPluginsSignatures + >( + { + ...chartContainerProps, + initialZoom, + onZoomChange, + apiRef, + plugins: SCATTER_CHART_PRO_PLUGINS, + }, ref, ); diff --git a/packages/x-charts/src/BarChart/BarChart.plugins.ts b/packages/x-charts/src/BarChart/BarChart.plugins.ts new file mode 100644 index 0000000000000..b4bd12980e041 --- /dev/null +++ b/packages/x-charts/src/BarChart/BarChart.plugins.ts @@ -0,0 +1,31 @@ +import { + useChartZAxis, + UseChartZAxisSignature, +} from '../internals/plugins/featurePlugins/useChartZAxis'; +import { + useChartCartesianAxis, + UseChartCartesianAxisSignature, +} from '../internals/plugins/featurePlugins/useChartCartesianAxis'; +import { + useChartInteraction, + UseChartInteractionSignature, +} from '../internals/plugins/featurePlugins/useChartInteraction'; +import { + useChartHighlight, + UseChartHighlightSignature, +} from '../internals/plugins/featurePlugins/useChartHighlight'; +import { ConvertSignaturesIntoPlugins } from '../internals/plugins/models/helpers'; + +export type BarChartPluginsSignatures = [ + UseChartZAxisSignature, + UseChartCartesianAxisSignature<'bar'>, + UseChartInteractionSignature, + UseChartHighlightSignature, +]; + +export const BAR_CHART_PLUGINS: ConvertSignaturesIntoPlugins = [ + useChartZAxis, + useChartCartesianAxis, + useChartInteraction, + useChartHighlight, +]; diff --git a/packages/x-charts/src/BarChart/useBarChartProps.ts b/packages/x-charts/src/BarChart/useBarChartProps.ts index 30c66f44891db..79b0b880529ac 100644 --- a/packages/x-charts/src/BarChart/useBarChartProps.ts +++ b/packages/x-charts/src/BarChart/useBarChartProps.ts @@ -12,6 +12,7 @@ import { ChartsAxisHighlightProps } from '../ChartsAxisHighlight'; import { ChartsLegendSlotExtension } from '../ChartsLegend'; import type { ChartsWrapperProps } from '../internals/components/ChartsWrapper'; import { calculateMargins } from '../internals/calculateMargins'; +import { BAR_CHART_PLUGINS, BarChartPluginsSignatures } from './BarChart.plugins'; /** * A helper function that extracts BarChartProps from the input props @@ -68,7 +69,7 @@ export const useBarChartProps = (props: BarChartProps) => { ), } as const; - const chartContainerProps: Omit, 'plugins'> = { + const chartContainerProps: ChartContainerProps<'bar', BarChartPluginsSignatures> = { ...rest, series: series.map((s) => ({ type: 'bar' as const, @@ -94,6 +95,7 @@ export const useBarChartProps = (props: BarChartProps) => { axisHighlight?.y === 'none', className, skipAnimation, + plugins: BAR_CHART_PLUGINS, }; const barPlotProps: BarPlotProps = { diff --git a/packages/x-charts/src/ChartContainer/useChartContainerProps.ts b/packages/x-charts/src/ChartContainer/useChartContainerProps.ts index 14676b294c1f8..430643de9bebb 100644 --- a/packages/x-charts/src/ChartContainer/useChartContainerProps.ts +++ b/packages/x-charts/src/ChartContainer/useChartContainerProps.ts @@ -4,11 +4,14 @@ import { ChartsSurfaceProps } from '../ChartsSurface'; import { ChartDataProviderProps } from '../ChartDataProvider'; import type { ChartContainerProps } from './ChartContainer'; import { ChartSeriesType } from '../models/seriesType/config'; -import { ALL_PLUGINS, AllPluginSignatures, AllPluginsType } from '../internals/plugins/allPlugins'; -import { ChartAnyPluginSignature } from '../internals/plugins/models'; +import { ALL_PLUGINS, AllPluginSignatures } from '../internals/plugins/allPlugins'; +import { ChartAnyPluginSignature } from '../internals/plugins/models/plugin'; -export type UseChartContainerPropsReturnValue = { - chartDataProviderProps: ChartDataProviderProps>; +export type UseChartContainerPropsReturnValue< + TSeries extends ChartSeriesType, + TSignatures extends readonly ChartAnyPluginSignature[], +> = { + chartDataProviderProps: Omit, 'children'>; chartsSurfaceProps: ChartsSurfaceProps & { ref: React.Ref }; children: React.ReactNode; }; @@ -19,7 +22,7 @@ export const useChartContainerProps = < >( props: ChartContainerProps, ref: React.Ref, -): UseChartContainerPropsReturnValue => { +): UseChartContainerPropsReturnValue => { const { width, height, @@ -42,7 +45,7 @@ export const useChartContainerProps = < seriesConfig, plugins, ...other - } = props as ChartContainerProps>; + } = props as ChartContainerProps; const chartsSurfaceProps: ChartsSurfaceProps & { ref: React.Ref } = { title, @@ -52,10 +55,7 @@ export const useChartContainerProps = < ...other, }; - const chartDataProviderProps: Omit< - ChartDataProviderProps>, - 'children' - > = { + const chartDataProviderProps: Omit, 'children'> = { margin, series, colors, @@ -69,10 +69,10 @@ export const useChartContainerProps = < skipAnimation, width, height, - seriesConfig, - plugins: plugins ?? (ALL_PLUGINS as unknown as AllPluginsType), disableAxisListener, - }; + seriesConfig, + plugins: plugins ?? ALL_PLUGINS, + } as unknown as Omit, 'children'>; return { chartDataProviderProps, diff --git a/packages/x-charts/src/LineChart/LineChart.plugins.ts b/packages/x-charts/src/LineChart/LineChart.plugins.ts new file mode 100644 index 0000000000000..80d8532323aa7 --- /dev/null +++ b/packages/x-charts/src/LineChart/LineChart.plugins.ts @@ -0,0 +1,31 @@ +import { + useChartZAxis, + UseChartZAxisSignature, +} from '../internals/plugins/featurePlugins/useChartZAxis'; +import { + useChartCartesianAxis, + UseChartCartesianAxisSignature, +} from '../internals/plugins/featurePlugins/useChartCartesianAxis'; +import { + useChartInteraction, + UseChartInteractionSignature, +} from '../internals/plugins/featurePlugins/useChartInteraction'; +import { + useChartHighlight, + UseChartHighlightSignature, +} from '../internals/plugins/featurePlugins/useChartHighlight'; +import { ConvertSignaturesIntoPlugins } from '../internals/plugins/models/helpers'; + +export type LineChartPluginsSignatures = [ + UseChartZAxisSignature, + UseChartCartesianAxisSignature<'line'>, + UseChartInteractionSignature, + UseChartHighlightSignature, +]; + +export const LINE_CHART_PLUGINS: ConvertSignaturesIntoPlugins = [ + useChartZAxis, + useChartCartesianAxis, + useChartInteraction, + useChartHighlight, +]; diff --git a/packages/x-charts/src/LineChart/useLineChartProps.ts b/packages/x-charts/src/LineChart/useLineChartProps.ts index 2b30274e30eca..bea419f24c7d8 100644 --- a/packages/x-charts/src/LineChart/useLineChartProps.ts +++ b/packages/x-charts/src/LineChart/useLineChartProps.ts @@ -15,6 +15,7 @@ import { LinePlotProps } from './LinePlot'; import { MarkPlotProps } from './MarkPlot'; import type { ChartsWrapperProps } from '../internals/components/ChartsWrapper'; import { calculateMargins } from '../internals/calculateMargins'; +import { LINE_CHART_PLUGINS, LineChartPluginsSignatures } from './LineChart.plugins'; /** * A helper function that extracts LineChartProps from the input props @@ -59,7 +60,7 @@ export const useLineChartProps = (props: LineChartProps) => { const id = useId(); const clipPathId = `${id}-clip-path`; - const chartContainerProps: Omit, 'plugins'> = { + const chartContainerProps: ChartContainerProps<'line', LineChartPluginsSignatures> = { ...other, series: series.map((s) => ({ disableHighlight: !!disableLineItemHighlight, @@ -90,6 +91,7 @@ export const useLineChartProps = (props: LineChartProps) => { axisHighlight?.y === 'none', className, skipAnimation, + plugins: LINE_CHART_PLUGINS, }; const gridProps: ChartsGridProps = { diff --git a/packages/x-charts/src/PieChart/PieChart.plugins.ts b/packages/x-charts/src/PieChart/PieChart.plugins.ts new file mode 100644 index 0000000000000..1641655d506f7 --- /dev/null +++ b/packages/x-charts/src/PieChart/PieChart.plugins.ts @@ -0,0 +1,16 @@ +import { + useChartInteraction, + UseChartInteractionSignature, +} from '../internals/plugins/featurePlugins/useChartInteraction'; +import { + useChartHighlight, + UseChartHighlightSignature, +} from '../internals/plugins/featurePlugins/useChartHighlight'; +import { ConvertSignaturesIntoPlugins } from '../internals/plugins/models/helpers'; + +export type PieChartPluginSignatures = [UseChartInteractionSignature, UseChartHighlightSignature]; + +export const PIE_CHART_PLUGINS: ConvertSignaturesIntoPlugins = [ + useChartInteraction, + useChartHighlight, +]; diff --git a/packages/x-charts/src/PieChart/PieChart.tsx b/packages/x-charts/src/PieChart/PieChart.tsx index 3f33cd0635340..91ef9300ecc3b 100644 --- a/packages/x-charts/src/PieChart/PieChart.tsx +++ b/packages/x-charts/src/PieChart/PieChart.tsx @@ -28,6 +28,7 @@ import { useChartHighlight, UseChartHighlightSignature, } from '../internals/plugins/featurePlugins/useChartHighlight'; +import { PieChartPluginSignatures } from './PieChart.plugins'; export interface PieChartSlots extends PiePlotSlots, @@ -114,7 +115,7 @@ const PieChart = React.forwardRef(function PieChart( const { chartDataProviderProps, chartsSurfaceProps } = useChartContainerProps< 'pie', - [UseChartInteractionSignature, UseChartHighlightSignature] + PieChartPluginSignatures >( { ...other, @@ -134,7 +135,7 @@ const PieChart = React.forwardRef(function PieChart( const Tooltip = slots?.tooltip ?? ChartsTooltip; return ( - + {...chartDataProviderProps}> , + UseChartInteractionSignature, + UseChartHighlightSignature, +]; + +export const SCATTER_CHART_PLUGINS: ConvertSignaturesIntoPlugins = [ + useChartZAxis, + useChartCartesianAxis, + useChartInteraction, + useChartHighlight, +]; diff --git a/packages/x-charts/src/ScatterChart/useScatterChartProps.ts b/packages/x-charts/src/ScatterChart/useScatterChartProps.ts index 44a579aeed422..f9bdc734f173c 100644 --- a/packages/x-charts/src/ScatterChart/useScatterChartProps.ts +++ b/packages/x-charts/src/ScatterChart/useScatterChartProps.ts @@ -10,6 +10,7 @@ import type { ScatterChartProps } from './ScatterChart'; import type { ScatterPlotProps } from './ScatterPlot'; import type { ChartsWrapperProps } from '../internals/components/ChartsWrapper'; import { calculateMargins } from '../internals/calculateMargins'; +import { SCATTER_CHART_PLUGINS, ScatterChartPluginsSignatures } from './ScatterChart.plugins'; /** * A helper function that extracts ScatterChartProps from the input props @@ -49,7 +50,7 @@ export const useScatterChartProps = (props: ScatterChartProps) => { ...other } = props; - const chartContainerProps: Omit, 'plugins'> = { + const chartContainerProps: ChartContainerProps<'scatter', ScatterChartPluginsSignatures> = { ...other, series: series.map((s) => ({ type: 'scatter' as const, ...s })), width, @@ -62,6 +63,7 @@ export const useScatterChartProps = (props: ScatterChartProps) => { highlightedItem, onHighlightChange, className, + plugins: SCATTER_CHART_PLUGINS, }; const voronoiHandlerProps: ChartsVoronoiHandlerProps = { diff --git a/packages/x-charts/src/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxis.ts b/packages/x-charts/src/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxis.ts index fc3d0af117c45..e8b35aa636857 100644 --- a/packages/x-charts/src/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxis.ts +++ b/packages/x-charts/src/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxis.ts @@ -2,7 +2,6 @@ import * as React from 'react'; import { warnOnce } from '@mui/x-internals/warning'; import { ChartPlugin } from '../../models'; -import { ChartSeriesType } from '../../../../models/seriesType/config'; import { UseChartCartesianAxisSignature } from './useChartCartesianAxis.types'; import { rainbowSurgePalette } from '../../../../colorPalettes'; import { useSelector } from '../../../store/useSelector'; @@ -14,9 +13,13 @@ import { getAxisValue } from './getAxisValue'; import { getSVGPoint } from '../../../getSVGPoint'; import { selectorChartsInteractionAxis } from '../useChartInteraction'; -export const useChartCartesianAxis: ChartPlugin< - UseChartCartesianAxisSignature -> = ({ params, store, seriesConfig, svgRef, instance }) => { +export const useChartCartesianAxis: ChartPlugin> = ({ + params, + store, + seriesConfig, + svgRef, + instance, +}) => { const { xAxis, yAxis, dataset } = params; if (process.env.NODE_ENV !== 'production') { diff --git a/scripts/x-charts-pro.exports.json b/scripts/x-charts-pro.exports.json index cfc7ec6590d97..3da603cd4787a 100644 --- a/scripts/x-charts-pro.exports.json +++ b/scripts/x-charts-pro.exports.json @@ -54,7 +54,7 @@ { "name": "CardinalDirections", "kind": "Interface" }, { "name": "CartesianSeriesType", "kind": "TypeAlias" }, { "name": "ChartContainerPro", "kind": "Variable" }, - { "name": "ChartContainerProProps", "kind": "Interface" }, + { "name": "ChartContainerProProps", "kind": "TypeAlias" }, { "name": "ChartDataProvider", "kind": "Function" }, { "name": "ChartDataProviderPro", "kind": "Function" }, { "name": "ChartDataProviderProProps", "kind": "TypeAlias" },