From 11e3e4f215e2c2f3188c89fbdeeb5d077f661d3c Mon Sep 17 00:00:00 2001 From: Jose Quintas Date: Thu, 16 Jan 2025 18:22:36 +0100 Subject: [PATCH 01/12] Flatten ChartDataProvider out of `context` --- docs/data/charts/components/HtmlLegend.js | 2 +- docs/data/charts/components/HtmlLegend.tsx | 2 +- docs/data/charts/legend/LegendClickNoSnap.js | 2 +- docs/data/charts/legend/LegendLabelPositions.js | 2 +- docs/data/charts/legend/LegendLabelPositions.tsx | 2 +- packages/x-charts/src/BarChart/BarChart.tsx | 2 +- .../x-charts/src/ChartContainer/ChartContainer.tsx | 2 +- .../src/ChartContainer/useChartContainerProps.ts | 2 +- .../ChartDataProvider/ChartDataProvider.test.tsx | 2 +- .../ChartDataProvider/ChartDataProvider.tsx | 12 ++++++------ .../src/{context => }/ChartDataProvider/index.ts | 0 .../ChartDataProvider/useChartDataProviderProps.ts | 14 +++++++------- packages/x-charts/src/LineChart/LineChart.tsx | 2 +- packages/x-charts/src/PieChart/PieChart.tsx | 2 +- .../x-charts/src/ScatterChart/ScatterChart.tsx | 2 +- packages/x-charts/src/context/index.ts | 2 -- .../x-charts/src/hooks/useChartGradientId.test.tsx | 2 +- packages/x-charts/src/internals/index.ts | 3 +-- 18 files changed, 27 insertions(+), 30 deletions(-) rename packages/x-charts/src/{context => }/ChartDataProvider/ChartDataProvider.test.tsx (91%) rename packages/x-charts/src/{context => }/ChartDataProvider/ChartDataProvider.tsx (90%) rename packages/x-charts/src/{context => }/ChartDataProvider/index.ts (100%) rename packages/x-charts/src/{context => }/ChartDataProvider/useChartDataProviderProps.ts (76%) diff --git a/docs/data/charts/components/HtmlLegend.js b/docs/data/charts/components/HtmlLegend.js index b716c8e433055..89e9f0ed9a14e 100644 --- a/docs/data/charts/components/HtmlLegend.js +++ b/docs/data/charts/components/HtmlLegend.js @@ -1,7 +1,7 @@ import * as React from 'react'; import Box from '@mui/material/Box'; import { useLegend } from '@mui/x-charts/hooks'; -import { ChartDataProvider } from '@mui/x-charts/context'; +import { ChartDataProvider } from '@mui/x-charts/ChartDataProvider'; import { ChartsSurface } from '@mui/x-charts/ChartsSurface'; import { BarPlot } from '@mui/x-charts/BarChart'; import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis'; diff --git a/docs/data/charts/components/HtmlLegend.tsx b/docs/data/charts/components/HtmlLegend.tsx index b716c8e433055..89e9f0ed9a14e 100644 --- a/docs/data/charts/components/HtmlLegend.tsx +++ b/docs/data/charts/components/HtmlLegend.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import Box from '@mui/material/Box'; import { useLegend } from '@mui/x-charts/hooks'; -import { ChartDataProvider } from '@mui/x-charts/context'; +import { ChartDataProvider } from '@mui/x-charts/ChartDataProvider'; import { ChartsSurface } from '@mui/x-charts/ChartsSurface'; import { BarPlot } from '@mui/x-charts/BarChart'; import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis'; diff --git a/docs/data/charts/legend/LegendClickNoSnap.js b/docs/data/charts/legend/LegendClickNoSnap.js index f9ca1551987df..5cc59c83552e1 100644 --- a/docs/data/charts/legend/LegendClickNoSnap.js +++ b/docs/data/charts/legend/LegendClickNoSnap.js @@ -10,7 +10,7 @@ import UndoOutlinedIcon from '@mui/icons-material/UndoOutlined'; import { ChartsLegend, PiecewiseColorLegend } from '@mui/x-charts/ChartsLegend'; import { HighlightedCode } from '@mui/docs/HighlightedCode'; -import { ChartDataProvider } from '@mui/x-charts/context'; +import { ChartDataProvider } from '@mui/x-charts/ChartDataProvider'; /** @type {import('@mui/x-charts/PieChart').PieChartProps['series']} */ const pieSeries = [ diff --git a/docs/data/charts/legend/LegendLabelPositions.js b/docs/data/charts/legend/LegendLabelPositions.js index 4b1817806d249..d15229f3f57bb 100644 --- a/docs/data/charts/legend/LegendLabelPositions.js +++ b/docs/data/charts/legend/LegendLabelPositions.js @@ -5,7 +5,7 @@ import { piecewiseColorDefaultLabelFormatter, PiecewiseColorLegend, } from '@mui/x-charts/ChartsLegend'; -import { ChartDataProvider } from '@mui/x-charts/context'; +import { ChartDataProvider } from '@mui/x-charts/ChartDataProvider'; import { ChartsAxesGradients } from '@mui/x-charts/internals'; import Stack from '@mui/material/Stack'; import Typography from '@mui/material/Typography'; diff --git a/docs/data/charts/legend/LegendLabelPositions.tsx b/docs/data/charts/legend/LegendLabelPositions.tsx index 9494cff502e70..d0f9a8d9f29f8 100644 --- a/docs/data/charts/legend/LegendLabelPositions.tsx +++ b/docs/data/charts/legend/LegendLabelPositions.tsx @@ -6,7 +6,7 @@ import { PiecewiseColorLegend, PiecewiseLabelFormatterParams, } from '@mui/x-charts/ChartsLegend'; -import { ChartDataProvider } from '@mui/x-charts/context'; +import { ChartDataProvider } from '@mui/x-charts/ChartDataProvider'; import { ChartsAxesGradients } from '@mui/x-charts/internals'; import Stack from '@mui/material/Stack'; import Typography from '@mui/material/Typography'; diff --git a/packages/x-charts/src/BarChart/BarChart.tsx b/packages/x-charts/src/BarChart/BarChart.tsx index 1329a8b1a0561..dc168923a3e32 100644 --- a/packages/x-charts/src/BarChart/BarChart.tsx +++ b/packages/x-charts/src/BarChart/BarChart.tsx @@ -25,7 +25,7 @@ import { ChartsOverlaySlots, } from '../ChartsOverlay/ChartsOverlay'; import { useBarChartProps } from './useBarChartProps'; -import { ChartDataProvider } from '../context'; +import { ChartDataProvider } from '../ChartDataProvider'; import { ChartsSurface } from '../ChartsSurface'; import { useChartContainerProps } from '../ChartContainer/useChartContainerProps'; import { ChartsWrapper } from '../internals/components/ChartsWrapper'; diff --git a/packages/x-charts/src/ChartContainer/ChartContainer.tsx b/packages/x-charts/src/ChartContainer/ChartContainer.tsx index cc7951aa287a4..edbc82592c35d 100644 --- a/packages/x-charts/src/ChartContainer/ChartContainer.tsx +++ b/packages/x-charts/src/ChartContainer/ChartContainer.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import { ChartSeriesType } from '../models/seriesType/config'; -import { ChartDataProvider, ChartDataProviderProps } from '../context/ChartDataProvider'; +import { ChartDataProvider, ChartDataProviderProps } from '../ChartDataProvider'; import { useChartContainerProps } from './useChartContainerProps'; import { ChartsSurface, ChartsSurfaceProps } from '../ChartsSurface'; import { AllPluginSignatures } from '../internals/plugins/allPlugins'; diff --git a/packages/x-charts/src/ChartContainer/useChartContainerProps.ts b/packages/x-charts/src/ChartContainer/useChartContainerProps.ts index 9e9b14a3e064d..211628947122a 100644 --- a/packages/x-charts/src/ChartContainer/useChartContainerProps.ts +++ b/packages/x-charts/src/ChartContainer/useChartContainerProps.ts @@ -1,7 +1,7 @@ 'use client'; import * as React from 'react'; import { ChartsSurfaceProps } from '../ChartsSurface'; -import { ChartDataProviderProps } from '../context/ChartDataProvider'; +import { ChartDataProviderProps } from '../ChartDataProvider'; import type { ChartContainerProps } from './ChartContainer'; import { ChartSeriesType } from '../models/seriesType/config'; import { ALL_PLUGINS, AllPluginSignatures, AllPluginsType } from '../internals/plugins/allPlugins'; diff --git a/packages/x-charts/src/context/ChartDataProvider/ChartDataProvider.test.tsx b/packages/x-charts/src/ChartDataProvider/ChartDataProvider.test.tsx similarity index 91% rename from packages/x-charts/src/context/ChartDataProvider/ChartDataProvider.test.tsx rename to packages/x-charts/src/ChartDataProvider/ChartDataProvider.test.tsx index ca0355c210291..54b61a375b681 100644 --- a/packages/x-charts/src/context/ChartDataProvider/ChartDataProvider.test.tsx +++ b/packages/x-charts/src/ChartDataProvider/ChartDataProvider.test.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { createRenderer, describeConformance } from '@mui/internal-test-utils'; -import { ChartDataProvider } from '@mui/x-charts/context/ChartDataProvider'; +import { ChartDataProvider } from '@mui/x-charts/ChartDataProvider'; describe('', () => { const { render } = createRenderer(); diff --git a/packages/x-charts/src/context/ChartDataProvider/ChartDataProvider.tsx b/packages/x-charts/src/ChartDataProvider/ChartDataProvider.tsx similarity index 90% rename from packages/x-charts/src/context/ChartDataProvider/ChartDataProvider.tsx rename to packages/x-charts/src/ChartDataProvider/ChartDataProvider.tsx index a2c4752fd3d71..5637b10cf0382 100644 --- a/packages/x-charts/src/context/ChartDataProvider/ChartDataProvider.tsx +++ b/packages/x-charts/src/ChartDataProvider/ChartDataProvider.tsx @@ -2,12 +2,12 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import { useChartDataProviderProps } from './useChartDataProviderProps'; -import { AnimationProvider, AnimationProviderProps } from '../AnimationProvider'; -import { HighlightedProvider, HighlightedProviderProps } from '../HighlightedProvider'; -import { ChartProvider, ChartProviderProps } from '../ChartProvider'; -import { ChartSeriesType } from '../../models/seriesType/config'; -import { ChartAnyPluginSignature } from '../../internals/plugins/models/plugin'; -import { AllPluginSignatures } from '../../internals/plugins/allPlugins'; +import { AnimationProvider, AnimationProviderProps } from '../context/AnimationProvider'; +import { HighlightedProvider, HighlightedProviderProps } from '../context/HighlightedProvider'; +import { ChartProvider, ChartProviderProps } from '../context/ChartProvider'; +import { ChartSeriesType } from '../models/seriesType/config'; +import { ChartAnyPluginSignature } from '../internals/plugins/models/plugin'; +import { AllPluginSignatures } from '../internals/plugins/allPlugins'; export type ChartDataProviderProps< TSeries extends ChartSeriesType = ChartSeriesType, diff --git a/packages/x-charts/src/context/ChartDataProvider/index.ts b/packages/x-charts/src/ChartDataProvider/index.ts similarity index 100% rename from packages/x-charts/src/context/ChartDataProvider/index.ts rename to packages/x-charts/src/ChartDataProvider/index.ts diff --git a/packages/x-charts/src/context/ChartDataProvider/useChartDataProviderProps.ts b/packages/x-charts/src/ChartDataProvider/useChartDataProviderProps.ts similarity index 76% rename from packages/x-charts/src/context/ChartDataProvider/useChartDataProviderProps.ts rename to packages/x-charts/src/ChartDataProvider/useChartDataProviderProps.ts index 6905d4c2b0937..c7f341193212c 100644 --- a/packages/x-charts/src/context/ChartDataProvider/useChartDataProviderProps.ts +++ b/packages/x-charts/src/ChartDataProvider/useChartDataProviderProps.ts @@ -1,13 +1,13 @@ 'use client'; import { useTheme } from '@mui/material/styles'; import type { ChartDataProviderProps } from './ChartDataProvider'; -import { HighlightedProviderProps } from '../HighlightedProvider'; -import { AnimationProviderProps } from '../AnimationProvider'; -import { ChartProviderProps } from '../ChartProvider'; -import { ChartAnyPluginSignature, MergeSignaturesProperty } from '../../internals/plugins/models'; -import { ChartSeriesType } from '../../models/seriesType/config'; -import { ChartCorePluginSignatures } from '../../internals/plugins/corePlugins'; -import { AllPluginSignatures } from '../../internals/plugins/allPlugins'; +import { HighlightedProviderProps } from '../context/HighlightedProvider'; +import { AnimationProviderProps } from '../context/AnimationProvider'; +import { ChartProviderProps } from '../context/ChartProvider'; +import { ChartAnyPluginSignature, MergeSignaturesProperty } from '../internals/plugins/models'; +import { ChartSeriesType } from '../models/seriesType/config'; +import { ChartCorePluginSignatures } from '../internals/plugins/corePlugins'; +import { AllPluginSignatures } from '../internals/plugins/allPlugins'; export const useChartDataProviderProps = < TSeries extends ChartSeriesType = ChartSeriesType, diff --git a/packages/x-charts/src/LineChart/LineChart.tsx b/packages/x-charts/src/LineChart/LineChart.tsx index d1f74261b74c3..35d6d96a6de56 100644 --- a/packages/x-charts/src/LineChart/LineChart.tsx +++ b/packages/x-charts/src/LineChart/LineChart.tsx @@ -33,7 +33,7 @@ import { } from '../ChartsOverlay'; import { useLineChartProps } from './useLineChartProps'; import { useChartContainerProps } from '../ChartContainer/useChartContainerProps'; -import { ChartDataProvider } from '../context'; +import { ChartDataProvider } from '../ChartDataProvider'; import { ChartsSurface } from '../ChartsSurface'; import { ChartsWrapper } from '../internals/components/ChartsWrapper'; diff --git a/packages/x-charts/src/PieChart/PieChart.tsx b/packages/x-charts/src/PieChart/PieChart.tsx index 688b05787e296..4ba222284ba7a 100644 --- a/packages/x-charts/src/PieChart/PieChart.tsx +++ b/packages/x-charts/src/PieChart/PieChart.tsx @@ -17,7 +17,7 @@ import { ChartsOverlaySlots, } from '../ChartsOverlay'; import { ChartsSurface } from '../ChartsSurface'; -import { ChartDataProvider } from '../context'; +import { ChartDataProvider } from '../ChartDataProvider'; import { useChartContainerProps } from '../ChartContainer/useChartContainerProps'; import { ChartsWrapper } from '../internals/components/ChartsWrapper'; diff --git a/packages/x-charts/src/ScatterChart/ScatterChart.tsx b/packages/x-charts/src/ScatterChart/ScatterChart.tsx index 6261eeb7384a2..db5d22390f72b 100644 --- a/packages/x-charts/src/ScatterChart/ScatterChart.tsx +++ b/packages/x-charts/src/ScatterChart/ScatterChart.tsx @@ -30,7 +30,7 @@ import { import { ChartsGrid, ChartsGridProps } from '../ChartsGrid'; import { useScatterChartProps } from './useScatterChartProps'; import { useChartContainerProps } from '../ChartContainer/useChartContainerProps'; -import { ChartDataProvider } from '../context'; +import { ChartDataProvider } from '../ChartDataProvider'; import { ChartsSurface } from '../ChartsSurface'; import { ChartsWrapper } from '../internals/components/ChartsWrapper'; diff --git a/packages/x-charts/src/context/index.ts b/packages/x-charts/src/context/index.ts index c3aa10f8cdee3..da6326f1f9407 100644 --- a/packages/x-charts/src/context/index.ts +++ b/packages/x-charts/src/context/index.ts @@ -1,3 +1 @@ export * from './HighlightedProvider'; -export { ChartDataProvider } from './ChartDataProvider'; -export type { ChartDataProviderProps } from './ChartDataProvider'; diff --git a/packages/x-charts/src/hooks/useChartGradientId.test.tsx b/packages/x-charts/src/hooks/useChartGradientId.test.tsx index da6616bbbff19..cc6924c3b9de6 100644 --- a/packages/x-charts/src/hooks/useChartGradientId.test.tsx +++ b/packages/x-charts/src/hooks/useChartGradientId.test.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { expect } from 'chai'; import { createRenderer, screen } from '@mui/internal-test-utils'; import { useChartGradientId, useChartGradientIdObjectBound } from './useChartGradientId'; -import { ChartDataProvider } from '../context'; +import { ChartDataProvider } from '../ChartDataProvider'; function UseGradientId() { const id = useChartGradientId('test-id'); diff --git a/packages/x-charts/src/internals/index.ts b/packages/x-charts/src/internals/index.ts index f970e13c70c87..bd70fa0195249 100644 --- a/packages/x-charts/src/internals/index.ts +++ b/packages/x-charts/src/internals/index.ts @@ -11,7 +11,7 @@ export { useScatterChartProps } from '../ScatterChart/useScatterChartProps'; export { useLineChartProps } from '../LineChart/useLineChartProps'; export { useBarChartProps } from '../BarChart/useBarChartProps'; export * from '../ChartContainer/useChartContainerProps'; -export * from '../context/ChartDataProvider/useChartDataProviderProps'; +export * from '../ChartDataProvider/useChartDataProviderProps'; // plugins export * from './plugins/corePlugins/useChartId'; @@ -40,7 +40,6 @@ export * from './getScale'; export * from '../context/AnimationProvider'; export type * from '../context/context.types'; export { getAxisExtremum } from './plugins/featurePlugins/useChartCartesianAxis/getAxisExtremum'; -export * from '../context/ChartDataProvider'; export * from '../context/ChartProvider'; // series configuration From ab3849a866ff2fe9f80ba3820c1bd0ebb637e451 Mon Sep 17 00:00:00 2001 From: Jose Quintas Date: Thu, 16 Jan 2025 19:01:49 +0100 Subject: [PATCH 02/12] Create ChartDataProviderPro --- .../ChartContainerPro/ChartContainerPro.tsx | 22 +-- .../useChartContainerProProps.ts | 2 +- .../ChartDataProviderPro.test.tsx | 31 +++++ .../ChartDataProviderPro.tsx | 129 ++++++++++++++++++ .../src/ChartDataProviderPro/index.ts | 1 + .../useChartDataProviderProProps.ts | 23 ++++ 6 files changed, 190 insertions(+), 18 deletions(-) create mode 100644 packages/x-charts-pro/src/ChartDataProviderPro/ChartDataProviderPro.test.tsx create mode 100644 packages/x-charts-pro/src/ChartDataProviderPro/ChartDataProviderPro.tsx create mode 100644 packages/x-charts-pro/src/ChartDataProviderPro/index.ts create mode 100644 packages/x-charts-pro/src/ChartDataProviderPro/useChartDataProviderProProps.ts diff --git a/packages/x-charts-pro/src/ChartContainerPro/ChartContainerPro.tsx b/packages/x-charts-pro/src/ChartContainerPro/ChartContainerPro.tsx index 7cd6613028db6..5629fee9ba765 100644 --- a/packages/x-charts-pro/src/ChartContainerPro/ChartContainerPro.tsx +++ b/packages/x-charts-pro/src/ChartContainerPro/ChartContainerPro.tsx @@ -2,21 +2,16 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import type {} from '../typeOverloads'; -import { Watermark } from '@mui/x-license/Watermark'; -import { useLicenseVerifier } from '@mui/x-license/useLicenseVerifier'; import { ChartsSurface, ChartsSurfaceProps } from '@mui/x-charts/ChartsSurface'; -import { ChartDataProvider, ChartDataProviderProps } from '@mui/x-charts/context'; import { ChartSeriesType } from '@mui/x-charts/internals'; -import { getReleaseInfo } from '../internals/utils/releaseInfo'; import { useChartContainerProProps } from './useChartContainerProProps'; import { AllPluginSignatures } from '../internals/plugins/allPlugins'; +import { ChartDataProviderPro, ChartDataProviderProProps } from '../ChartDataProviderPro'; export interface ChartContainerProProps - extends ChartDataProviderProps>, + extends ChartDataProviderProProps>, ChartsSurfaceProps {} -const releaseInfo = getReleaseInfo(); - /** * It sets up the data providers as well as the `` for the chart. * @@ -47,19 +42,12 @@ const ChartContainerPro = React.forwardRef(function ChartContainerProInner< const { chartDataProviderProProps, children, chartsSurfaceProps } = useChartContainerProProps(props, ref); - useLicenseVerifier('x-charts-pro', releaseInfo); - return ( - > {...chartDataProviderProProps}> + {...chartDataProviderProProps}> {children} - - + ); -}) as ( - props: ChartContainerProProps & { ref?: React.ForwardedRef }, -) => React.JSX.Element; - -// @ts-ignore +}); ChartContainerPro.propTypes = { // ----------------------------- Warning -------------------------------- diff --git a/packages/x-charts-pro/src/ChartContainerPro/useChartContainerProProps.ts b/packages/x-charts-pro/src/ChartContainerPro/useChartContainerProProps.ts index 3c127fb68a6eb..4da229dffb9cd 100644 --- a/packages/x-charts-pro/src/ChartContainerPro/useChartContainerProProps.ts +++ b/packages/x-charts-pro/src/ChartContainerPro/useChartContainerProProps.ts @@ -1,11 +1,11 @@ 'use client'; import { - ChartDataProviderProps, ChartSeriesType, useChartContainerProps, UseChartContainerPropsReturnValue, } from '@mui/x-charts/internals'; 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'; diff --git a/packages/x-charts-pro/src/ChartDataProviderPro/ChartDataProviderPro.test.tsx b/packages/x-charts-pro/src/ChartDataProviderPro/ChartDataProviderPro.test.tsx new file mode 100644 index 0000000000000..0a5dbeb201a04 --- /dev/null +++ b/packages/x-charts-pro/src/ChartDataProviderPro/ChartDataProviderPro.test.tsx @@ -0,0 +1,31 @@ +import * as React from 'react'; +import { createRenderer, describeConformance } from '@mui/internal-test-utils'; +import { ChartDataProviderPro } from '@mui/x-charts-pro/ChartDataProviderPro'; + +describe('', () => { + const { render } = createRenderer(); + + describeConformance(, () => ({ + classes: {} as any, + inheritComponent: 'svg', + render, + muiName: 'MuiChartDataProviderPro', + testComponentPropWith: 'div', + refInstanceof: window.SVGSVGElement, + skip: [ + 'mergeClassName', + 'propsSpread', + 'rootClass', + 'refForwarding', + 'componentProp', + 'componentsProp', + 'slotPropsProp', + 'slotPropsCallback', + 'slotsProp', + 'themeDefaultProps', + 'themeStyleOverrides', + 'themeVariants', + 'themeCustomPalette', + ], + })); +}); diff --git a/packages/x-charts-pro/src/ChartDataProviderPro/ChartDataProviderPro.tsx b/packages/x-charts-pro/src/ChartDataProviderPro/ChartDataProviderPro.tsx new file mode 100644 index 0000000000000..94692d2b1856d --- /dev/null +++ b/packages/x-charts-pro/src/ChartDataProviderPro/ChartDataProviderPro.tsx @@ -0,0 +1,129 @@ +'use client'; +import * as React from 'react'; +import PropTypes from 'prop-types'; +import { Watermark } from '@mui/x-license/Watermark'; +import { + ChartProvider, + AnimationProvider, + ChartSeriesType, + ChartAnyPluginSignature, +} from '@mui/x-charts/internals'; +import { HighlightedProvider } from '@mui/x-charts/context'; +import { ChartDataProviderProps } from '@mui/x-charts/ChartDataProvider'; +import { useLicenseVerifier } from '@mui/x-license/useLicenseVerifier'; +import { AllPluginSignatures } from '../internals/plugins/allPlugins'; +import { useChartDataProviderProProps } from './useChartDataProviderProProps'; +import { getReleaseInfo } from '../internals/utils/releaseInfo'; + +const releaseInfo = getReleaseInfo(); +const packageIdentifier = 'x-charts-pro'; + +export type ChartDataProviderProProps< + TSeries extends ChartSeriesType = ChartSeriesType, + TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures, +> = ChartDataProviderProps; + +/** + * Orchestrates the data providers for the chart components and hooks. + * + * Use this component if you have custom HTML components that need to access the chart data. + * + * Demos: + * + * - [Composition](http://localhost:3001/x/react-charts/composition/) + * + * API: + * + * - [ChartDataProviderPro API](https://mui.com/x/api/charts/chart-data-provider/) + * + * @example + * ```jsx + * + * + * + * + * + * {'Custom Legend Component'} + * + * ``` + */ +function ChartDataProviderPro( + props: ChartDataProviderProProps, +) { + const { children, highlightedProviderProps, animationProviderProps, chartProviderProps } = + useChartDataProviderProProps(props); + + useLicenseVerifier(packageIdentifier, releaseInfo); + + return ( + + + + {children} + + + + + ); +} + +ChartDataProviderPro.propTypes = { + // ----------------------------- Warning -------------------------------- + // | These PropTypes are generated from the TypeScript type definitions | + // | To update them edit the TypeScript types and run "pnpm proptypes" | + // ---------------------------------------------------------------------- + apiRef: PropTypes.any, + children: PropTypes.node, + /** + * Color palette used to colorize multiple series. + * @default blueberryTwilightPalette + */ + colors: PropTypes.any, + dataset: PropTypes.any, + /** + * The height of the chart in px. If not defined, it takes the height of the parent element. + */ + height: PropTypes.any, + /** + * The item currently highlighted. Turns highlighting into a controlled prop. + */ + highlightedItem: 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.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.any, + /** + * The callback fired when the highlighted item changes. + * + * @param {HighlightItemData | null} highlightedItem The newly highlighted item. + */ + onHighlightChange: 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.any, + /** + * If `true`, animations are skipped. + * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting. + */ + 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.any, +} as any; + +export { ChartDataProviderPro }; diff --git a/packages/x-charts-pro/src/ChartDataProviderPro/index.ts b/packages/x-charts-pro/src/ChartDataProviderPro/index.ts new file mode 100644 index 0000000000000..1e34719a86a3b --- /dev/null +++ b/packages/x-charts-pro/src/ChartDataProviderPro/index.ts @@ -0,0 +1 @@ +export * from './ChartDataProviderPro'; diff --git a/packages/x-charts-pro/src/ChartDataProviderPro/useChartDataProviderProProps.ts b/packages/x-charts-pro/src/ChartDataProviderPro/useChartDataProviderProProps.ts new file mode 100644 index 0000000000000..698995c46a36c --- /dev/null +++ b/packages/x-charts-pro/src/ChartDataProviderPro/useChartDataProviderProProps.ts @@ -0,0 +1,23 @@ +'use client'; +import { ChartSeriesType, useChartDataProviderProps } from '@mui/x-charts/internals'; +import type { ChartDataProviderProProps } from './ChartDataProviderPro'; + +export const useChartDataProviderProProps = ( + props: ChartDataProviderProProps, +) => { + const { children, initialZoom, onZoomChange, ...other } = props; + + const { animationProviderProps, chartProviderProps, highlightedProviderProps } = + useChartDataProviderProps(other); + + return { + children, + highlightedProviderProps, + animationProviderProps, + chartProviderProps: { + ...chartProviderProps, + initialZoom, + onZoomChange, + }, + }; +}; From 50262c6a303660dc0fef8b033575242ae3fccc5a Mon Sep 17 00:00:00 2001 From: Jose Quintas Date: Fri, 17 Jan 2025 11:01:42 +0100 Subject: [PATCH 03/12] Add tests --- .../src/BarChartPro/BarChartPro.test.tsx | 26 +++++++++++++++++++ .../src/BarChartPro/BarChartPro.tsx | 13 +++------- .../x-charts-pro/src/Heatmap/Heatmap.test.tsx | 26 +++++++++++++++++++ .../src/LineChartPro/LineChartPro.test.tsx | 26 +++++++++++++++++++ .../src/LineChartPro/LineChartPro.tsx | 13 +++------- .../ScatterChartPro/ScatterChartPro.test.tsx | 26 +++++++++++++++++++ .../src/ScatterChartPro/ScatterChartPro.tsx | 13 +++------- 7 files changed, 116 insertions(+), 27 deletions(-) create mode 100644 packages/x-charts-pro/src/BarChartPro/BarChartPro.test.tsx create mode 100644 packages/x-charts-pro/src/Heatmap/Heatmap.test.tsx create mode 100644 packages/x-charts-pro/src/LineChartPro/LineChartPro.test.tsx create mode 100644 packages/x-charts-pro/src/ScatterChartPro/ScatterChartPro.test.tsx diff --git a/packages/x-charts-pro/src/BarChartPro/BarChartPro.test.tsx b/packages/x-charts-pro/src/BarChartPro/BarChartPro.test.tsx new file mode 100644 index 0000000000000..3d061986f8431 --- /dev/null +++ b/packages/x-charts-pro/src/BarChartPro/BarChartPro.test.tsx @@ -0,0 +1,26 @@ +import * as React from 'react'; +import { expect } from 'chai'; +import { createRenderer, screen } from '@mui/internal-test-utils'; +import { LicenseInfo } from '@mui/x-license'; +import { sharedLicenseStatuses } from '@mui/x-license/useLicenseVerifier/useLicenseVerifier'; +import { BarChartPro } from './BarChartPro'; + +describe(' - License', () => { + const { render } = createRenderer(); + + beforeEach(() => { + Object.keys(sharedLicenseStatuses).forEach((key) => { + delete sharedLicenseStatuses[key]; + }); + }); + + it('should render watermark when the license is missing', async () => { + LicenseInfo.setLicenseKey(''); + + expect(() => render()).toErrorDev([ + 'MUI X: Missing license key.', + ]); + + expect(await screen.findAllByText('MUI X Missing license key')).not.to.equal(null); + }); +}); diff --git a/packages/x-charts-pro/src/BarChartPro/BarChartPro.tsx b/packages/x-charts-pro/src/BarChartPro/BarChartPro.tsx index 1c20e6fb71426..6672b65385a5f 100644 --- a/packages/x-charts-pro/src/BarChartPro/BarChartPro.tsx +++ b/packages/x-charts-pro/src/BarChartPro/BarChartPro.tsx @@ -12,11 +12,11 @@ import { ChartsAxisHighlight } from '@mui/x-charts/ChartsAxisHighlight'; import { ChartsTooltip } from '@mui/x-charts/ChartsTooltip'; import { ChartsClipPath } from '@mui/x-charts/ChartsClipPath'; import { useBarChartProps, ChartsWrapper } from '@mui/x-charts/internals'; -import { ChartDataProvider } from '@mui/x-charts/context'; import { ChartsSurface } from '@mui/x-charts/ChartsSurface'; import { ChartContainerProProps } from '../ChartContainerPro'; import { useIsZoomInteracting } from '../hooks/zoom'; import { useChartContainerProProps } from '../ChartContainerPro/useChartContainerProProps'; +import { ChartDataProviderPro } from '../ChartDataProviderPro'; function BarChartPlotZoom(props: BarPlotProps) { const isInteracting = useIsZoomInteracting(); @@ -101,19 +101,14 @@ const BarChartPro = React.forwardRef(function BarChartPro( } = useBarChartProps(other); const { chartDataProviderProProps, chartsSurfaceProps } = useChartContainerProProps( - { ...chartContainerProps, apiRef }, + { ...chartContainerProps, initialZoom, onZoomChange, apiRef }, ref, ); const Tooltip = props.slots?.tooltip ?? ChartsTooltip; return ( - + {!props.hideLegend && } @@ -130,7 +125,7 @@ const BarChartPro = React.forwardRef(function BarChartPro( {children} - + ); }); diff --git a/packages/x-charts-pro/src/Heatmap/Heatmap.test.tsx b/packages/x-charts-pro/src/Heatmap/Heatmap.test.tsx new file mode 100644 index 0000000000000..d7d0720670214 --- /dev/null +++ b/packages/x-charts-pro/src/Heatmap/Heatmap.test.tsx @@ -0,0 +1,26 @@ +import * as React from 'react'; +import { expect } from 'chai'; +import { createRenderer, screen } from '@mui/internal-test-utils'; +import { LicenseInfo } from '@mui/x-license'; +import { sharedLicenseStatuses } from '@mui/x-license/useLicenseVerifier/useLicenseVerifier'; +import { Heatmap } from './Heatmap'; + +describe(' - License', () => { + const { render } = createRenderer(); + + beforeEach(() => { + Object.keys(sharedLicenseStatuses).forEach((key) => { + delete sharedLicenseStatuses[key]; + }); + }); + + it('should render watermark when the license is missing', async () => { + LicenseInfo.setLicenseKey(''); + + expect(() => + render(), + ).toErrorDev(['MUI X: Missing license key.']); + + expect(await screen.findAllByText('MUI X Missing license key')).not.to.equal(null); + }); +}); diff --git a/packages/x-charts-pro/src/LineChartPro/LineChartPro.test.tsx b/packages/x-charts-pro/src/LineChartPro/LineChartPro.test.tsx new file mode 100644 index 0000000000000..8cb30a035c922 --- /dev/null +++ b/packages/x-charts-pro/src/LineChartPro/LineChartPro.test.tsx @@ -0,0 +1,26 @@ +import * as React from 'react'; +import { expect } from 'chai'; +import { createRenderer, screen } from '@mui/internal-test-utils'; +import { LicenseInfo } from '@mui/x-license'; +import { sharedLicenseStatuses } from '@mui/x-license/useLicenseVerifier/useLicenseVerifier'; +import { LineChartPro } from './LineChartPro'; + +describe(' - License', () => { + const { render } = createRenderer(); + + beforeEach(() => { + Object.keys(sharedLicenseStatuses).forEach((key) => { + delete sharedLicenseStatuses[key]; + }); + }); + + it('should render watermark when the license is missing', async () => { + LicenseInfo.setLicenseKey(''); + + expect(() => render()).toErrorDev([ + 'MUI X: Missing license key.', + ]); + + expect(await screen.findAllByText('MUI X Missing license key')).not.to.equal(null); + }); +}); diff --git a/packages/x-charts-pro/src/LineChartPro/LineChartPro.tsx b/packages/x-charts-pro/src/LineChartPro/LineChartPro.tsx index 4aa0203fa2e6c..6ec130926320e 100644 --- a/packages/x-charts-pro/src/LineChartPro/LineChartPro.tsx +++ b/packages/x-charts-pro/src/LineChartPro/LineChartPro.tsx @@ -22,10 +22,10 @@ import { ChartsTooltip } from '@mui/x-charts/ChartsTooltip'; import { ChartsClipPath } from '@mui/x-charts/ChartsClipPath'; import { ChartsSurface } from '@mui/x-charts/ChartsSurface'; import { useLineChartProps, ChartsWrapper } from '@mui/x-charts/internals'; -import { ChartDataProvider } from '@mui/x-charts/context'; import { ChartContainerProProps } from '../ChartContainerPro'; import { useIsZoomInteracting } from '../hooks/zoom'; import { useChartContainerProProps } from '../ChartContainerPro/useChartContainerProProps'; +import { ChartDataProviderPro } from '../ChartDataProviderPro'; function AreaPlotZoom(props: AreaPlotProps) { const isInteracting = useIsZoomInteracting(); @@ -170,19 +170,14 @@ const LineChartPro = React.forwardRef(function LineChartPro( children, } = useLineChartProps(other); const { chartDataProviderProProps, chartsSurfaceProps } = useChartContainerProProps( - { ...chartContainerProps, apiRef }, + { ...chartContainerProps, initialZoom, onZoomChange, apiRef }, ref, ); const Tooltip = props.slots?.tooltip ?? ChartsTooltip; return ( - + {!props.hideLegend && } @@ -205,7 +200,7 @@ const LineChartPro = React.forwardRef(function LineChartPro( {children} - + ); }); diff --git a/packages/x-charts-pro/src/ScatterChartPro/ScatterChartPro.test.tsx b/packages/x-charts-pro/src/ScatterChartPro/ScatterChartPro.test.tsx new file mode 100644 index 0000000000000..11613c25591de --- /dev/null +++ b/packages/x-charts-pro/src/ScatterChartPro/ScatterChartPro.test.tsx @@ -0,0 +1,26 @@ +import * as React from 'react'; +import { expect } from 'chai'; +import { createRenderer, screen } from '@mui/internal-test-utils'; +import { LicenseInfo } from '@mui/x-license'; +import { sharedLicenseStatuses } from '@mui/x-license/useLicenseVerifier/useLicenseVerifier'; +import { ScatterChartPro } from './ScatterChartPro'; + +describe(' - License', () => { + const { render } = createRenderer(); + + beforeEach(() => { + Object.keys(sharedLicenseStatuses).forEach((key) => { + delete sharedLicenseStatuses[key]; + }); + }); + + it('should render watermark when the license is missing', async () => { + LicenseInfo.setLicenseKey(''); + + expect(() => render()).toErrorDev([ + 'MUI X: Missing license key.', + ]); + + expect(await screen.findAllByText('MUI X Missing license key')).not.to.equal(null); + }); +}); diff --git a/packages/x-charts-pro/src/ScatterChartPro/ScatterChartPro.tsx b/packages/x-charts-pro/src/ScatterChartPro/ScatterChartPro.tsx index 011536b3a1e99..e9cf45460cee3 100644 --- a/packages/x-charts-pro/src/ScatterChartPro/ScatterChartPro.tsx +++ b/packages/x-charts-pro/src/ScatterChartPro/ScatterChartPro.tsx @@ -4,7 +4,6 @@ import PropTypes from 'prop-types'; import { useThemeProps } from '@mui/material/styles'; import { ChartsOverlay } from '@mui/x-charts/ChartsOverlay'; import { ScatterChartProps, ScatterPlot } from '@mui/x-charts/ScatterChart'; -import { ChartDataProvider } from '@mui/x-charts/context'; import { ChartsVoronoiHandler } from '@mui/x-charts/ChartsVoronoiHandler'; import { ChartsAxis } from '@mui/x-charts/ChartsAxis'; import { ChartsGrid } from '@mui/x-charts/ChartsGrid'; @@ -15,6 +14,7 @@ import { ChartsTooltip } from '@mui/x-charts/ChartsTooltip'; import { useScatterChartProps, ChartsWrapper } from '@mui/x-charts/internals'; import { useChartContainerProProps } from '../ChartContainerPro/useChartContainerProProps'; import { ChartContainerProProps } from '../ChartContainerPro/ChartContainerPro'; +import { ChartDataProviderPro } from '../ChartDataProviderPro'; export interface ScatterChartProProps extends Omit, @@ -49,19 +49,14 @@ const ScatterChartPro = React.forwardRef(function ScatterChartPro( children, } = useScatterChartProps(other); const { chartDataProviderProProps, chartsSurfaceProps } = useChartContainerProProps( - { ...chartContainerProps, apiRef }, + { ...chartContainerProps, initialZoom, onZoomChange, apiRef }, ref, ); const Tooltip = props.slots?.tooltip ?? ChartsTooltip; return ( - + {!props.hideLegend && } @@ -78,7 +73,7 @@ const ScatterChartPro = React.forwardRef(function ScatterChartPro( {children} - + ); }); From 63a1c1efbb643f15d0414e400e0e65b001fef02a Mon Sep 17 00:00:00 2001 From: Jose Quintas Date: Fri, 17 Jan 2025 11:09:14 +0100 Subject: [PATCH 04/12] Add demo tag --- docs/data/charts/composition/composition.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/data/charts/composition/composition.md b/docs/data/charts/composition/composition.md index 4bf8606dd5dba..4a6bdcd0d3f60 100644 --- a/docs/data/charts/composition/composition.md +++ b/docs/data/charts/composition/composition.md @@ -2,7 +2,7 @@ title: React Chart composition productId: x-charts githubLabel: 'component: charts' -components: ChartContainer, ChartContainerPro, ChartsGrid, ChartDataProvider, ChartsSurface +components: ChartContainer, ChartContainerPro, ChartsGrid, ChartDataProvider, ChartDataProviderPro, ChartsSurface packageName: '@mui/x-charts' --- From 3dfa03a12cb9236a49d8abd9611d2fa0e0157b39 Mon Sep 17 00:00:00 2001 From: Jose Quintas Date: Fri, 17 Jan 2025 11:16:25 +0100 Subject: [PATCH 05/12] fix links --- .../pages/x/api/charts/chart-data-provider.js | 23 --------------- .../x/api/charts/chart-data-provider.json | 28 ------------------- .../ChartContainerPro/ChartContainerPro.tsx | 4 +-- .../ChartDataProviderPro.tsx | 2 +- .../src/ChartContainer/ChartContainer.tsx | 2 +- .../ChartDataProvider/ChartDataProvider.tsx | 2 +- .../src/ChartsSurface/ChartsSurface.tsx | 2 +- 7 files changed, 6 insertions(+), 57 deletions(-) delete mode 100644 docs/pages/x/api/charts/chart-data-provider.js delete mode 100644 docs/pages/x/api/charts/chart-data-provider.json diff --git a/docs/pages/x/api/charts/chart-data-provider.js b/docs/pages/x/api/charts/chart-data-provider.js deleted file mode 100644 index 73a45a0bc9325..0000000000000 --- a/docs/pages/x/api/charts/chart-data-provider.js +++ /dev/null @@ -1,23 +0,0 @@ -import * as React from 'react'; -import ApiPage from 'docs/src/modules/components/ApiPage'; -import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations'; -import jsonPageContent from './chart-data-provider.json'; - -export default function Page(props) { - const { descriptions, pageContent } = props; - return ; -} - -Page.getInitialProps = () => { - const req = require.context( - 'docsx/translations/api-docs/charts/chart-data-provider', - false, - /\.\/chart-data-provider.*.json$/, - ); - const descriptions = mapApiPageTranslations(req); - - return { - descriptions, - pageContent: jsonPageContent, - }; -}; diff --git a/docs/pages/x/api/charts/chart-data-provider.json b/docs/pages/x/api/charts/chart-data-provider.json deleted file mode 100644 index dd5b141136850..0000000000000 --- a/docs/pages/x/api/charts/chart-data-provider.json +++ /dev/null @@ -1,28 +0,0 @@ -{ - "props": { - "colors": { "type": { "name": "any" }, "default": "blueberryTwilightPalette" }, - "height": { "type": { "name": "any" } }, - "highlightedItem": { "type": { "name": "any" } }, - "id": { "type": { "name": "any" } }, - "margin": { "type": { "name": "any" } }, - "onHighlightChange": { "type": { "name": "any" } }, - "series": { "type": { "name": "any" } }, - "skipAnimation": { "type": { "name": "any" } }, - "width": { "type": { "name": "any" } } - }, - "name": "ChartDataProvider", - "imports": [ - "import { ChartDataProvider } from '@mui/x-charts/context';", - "import { ChartDataProvider } from '@mui/x-charts';", - "import { ChartDataProvider } from '@mui/x-charts-pro';" - ], - "classes": [], - "spread": false, - "themeDefaultProps": false, - "muiName": "MuiChartDataProvider", - "forwardsRefTo": "SVGSVGElement", - "filename": "/packages/x-charts/src/context/ChartDataProvider/ChartDataProvider.tsx", - "inheritance": null, - "demos": "", - "cssComponent": false -} diff --git a/packages/x-charts-pro/src/ChartContainerPro/ChartContainerPro.tsx b/packages/x-charts-pro/src/ChartContainerPro/ChartContainerPro.tsx index 5629fee9ba765..0d852de2e5b68 100644 --- a/packages/x-charts-pro/src/ChartContainerPro/ChartContainerPro.tsx +++ b/packages/x-charts-pro/src/ChartContainerPro/ChartContainerPro.tsx @@ -15,11 +15,11 @@ export interface ChartContainerProProps` for the chart. * - * This is a combination of both the `ChartDataProvider` and `ChartsSurface` components. + * This is a combination of both the `ChartDataProviderPro` and `ChartsSurface` components. * * Demos: * - * - [Composition](http://localhost:3001/x/react-charts/composition/) + * - [Composition](https://mui.com/x/api/charts/composition/) * * API: * diff --git a/packages/x-charts-pro/src/ChartDataProviderPro/ChartDataProviderPro.tsx b/packages/x-charts-pro/src/ChartDataProviderPro/ChartDataProviderPro.tsx index 94692d2b1856d..727a343a822c2 100644 --- a/packages/x-charts-pro/src/ChartDataProviderPro/ChartDataProviderPro.tsx +++ b/packages/x-charts-pro/src/ChartDataProviderPro/ChartDataProviderPro.tsx @@ -30,7 +30,7 @@ export type ChartDataProviderProProps< * * Demos: * - * - [Composition](http://localhost:3001/x/react-charts/composition/) + * - [Composition](https://mui.com/x/api/charts/composition/) * * API: * diff --git a/packages/x-charts/src/ChartContainer/ChartContainer.tsx b/packages/x-charts/src/ChartContainer/ChartContainer.tsx index edbc82592c35d..bcc7e5392881f 100644 --- a/packages/x-charts/src/ChartContainer/ChartContainer.tsx +++ b/packages/x-charts/src/ChartContainer/ChartContainer.tsx @@ -18,7 +18,7 @@ export interface ChartContainerProps Date: Fri, 17 Jan 2025 11:19:15 +0100 Subject: [PATCH 06/12] fix missing refs/exports --- packages/x-charts-pro/src/index.ts | 1 + packages/x-charts/src/ChartsLegend/ChartsLegend.test.tsx | 2 +- .../x-charts/src/ChartsLegend/ContinuousColorLegend.test.tsx | 2 +- .../x-charts/src/ChartsLegend/PiecewiseColorLegend.test.tsx | 2 +- packages/x-charts/src/index.ts | 1 + 5 files changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/x-charts-pro/src/index.ts b/packages/x-charts-pro/src/index.ts index c2bd03b9ef5e1..b79e578b6ddcf 100644 --- a/packages/x-charts-pro/src/index.ts +++ b/packages/x-charts-pro/src/index.ts @@ -29,6 +29,7 @@ export * from '@mui/x-charts/ChartsSurface'; // Pro components export * from './Heatmap'; export * from './ChartContainerPro'; +export * from './ChartDataProviderPro'; export * from './ScatterChartPro'; export * from './BarChartPro'; export * from './LineChartPro'; diff --git a/packages/x-charts/src/ChartsLegend/ChartsLegend.test.tsx b/packages/x-charts/src/ChartsLegend/ChartsLegend.test.tsx index b943131348948..6eee79c4006d1 100644 --- a/packages/x-charts/src/ChartsLegend/ChartsLegend.test.tsx +++ b/packages/x-charts/src/ChartsLegend/ChartsLegend.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { createRenderer, describeConformance } from '@mui/internal-test-utils'; import { ChartsLegend, legendClasses } from '@mui/x-charts/ChartsLegend'; -import { ChartDataProvider } from '@mui/x-charts/context'; +import { ChartDataProvider } from '@mui/x-charts/ChartDataProvider'; import { ChartsSurface } from '@mui/x-charts/ChartsSurface'; import { createTheme, ThemeProvider } from '@mui/material/styles'; diff --git a/packages/x-charts/src/ChartsLegend/ContinuousColorLegend.test.tsx b/packages/x-charts/src/ChartsLegend/ContinuousColorLegend.test.tsx index baf93faeb0e46..e32fb26d0afa1 100644 --- a/packages/x-charts/src/ChartsLegend/ContinuousColorLegend.test.tsx +++ b/packages/x-charts/src/ChartsLegend/ContinuousColorLegend.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { createRenderer, describeConformance } from '@mui/internal-test-utils'; import { ContinuousColorLegend, continuousColorLegendClasses } from '@mui/x-charts/ChartsLegend'; -import { ChartDataProvider } from '@mui/x-charts/context'; +import { ChartDataProvider } from '@mui/x-charts/ChartDataProvider'; import { ChartsSurface } from '@mui/x-charts/ChartsSurface'; import { createTheme, ThemeProvider } from '@mui/material/styles'; diff --git a/packages/x-charts/src/ChartsLegend/PiecewiseColorLegend.test.tsx b/packages/x-charts/src/ChartsLegend/PiecewiseColorLegend.test.tsx index b42baa978eb5a..dbc384b592ed2 100644 --- a/packages/x-charts/src/ChartsLegend/PiecewiseColorLegend.test.tsx +++ b/packages/x-charts/src/ChartsLegend/PiecewiseColorLegend.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { createRenderer, describeConformance } from '@mui/internal-test-utils'; import { PiecewiseColorLegend, piecewiseColorLegendClasses } from '@mui/x-charts/ChartsLegend'; -import { ChartDataProvider } from '@mui/x-charts/context'; +import { ChartDataProvider } from '@mui/x-charts/ChartDataProvider'; import { ChartsSurface } from '@mui/x-charts/ChartsSurface'; import { createTheme, ThemeProvider } from '@mui/material/styles'; diff --git a/packages/x-charts/src/index.ts b/packages/x-charts/src/index.ts index 485077ceba010..eb6e690367996 100644 --- a/packages/x-charts/src/index.ts +++ b/packages/x-charts/src/index.ts @@ -24,3 +24,4 @@ export * from './SparkLineChart'; export * from './Gauge'; export * from './ChartsSurface'; export * from './ChartContainer'; +export * from './ChartDataProvider'; From 8ae546c0691c3fb2e0cf5747faa2238ed5def1ec Mon Sep 17 00:00:00 2001 From: Jose Quintas Date: Fri, 17 Jan 2025 11:33:54 +0100 Subject: [PATCH 07/12] fix chartcontainerpro coercion --- .../src/ChartContainerPro/ChartContainerPro.tsx | 9 +++++++-- packages/x-charts-pro/src/Heatmap/Heatmap.tsx | 2 +- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/packages/x-charts-pro/src/ChartContainerPro/ChartContainerPro.tsx b/packages/x-charts-pro/src/ChartContainerPro/ChartContainerPro.tsx index 0d852de2e5b68..6f92034b49ff2 100644 --- a/packages/x-charts-pro/src/ChartContainerPro/ChartContainerPro.tsx +++ b/packages/x-charts-pro/src/ChartContainerPro/ChartContainerPro.tsx @@ -12,6 +12,10 @@ export interface ChartContainerProProps>, ChartsSurfaceProps {} +type ChartContainerProComponent = ( + props: ChartContainerProProps & { ref?: React.ForwardedRef }, +) => React.JSX.Element; + /** * It sets up the data providers as well as the `` for the chart. * @@ -43,12 +47,13 @@ const ChartContainerPro = React.forwardRef(function ChartContainerProInner< useChartContainerProProps(props, ref); return ( - {...chartDataProviderProProps}> + {children} ); -}); +}) as unknown as ChartContainerProComponent; +// @ts-expect-error the type coercion breaks the prop types ChartContainerPro.propTypes = { // ----------------------------- Warning -------------------------------- // | These PropTypes are generated from the TypeScript type definitions | diff --git a/packages/x-charts-pro/src/Heatmap/Heatmap.tsx b/packages/x-charts-pro/src/Heatmap/Heatmap.tsx index 5bdcf39ec317a..a7f4a1d9ca533 100644 --- a/packages/x-charts-pro/src/Heatmap/Heatmap.tsx +++ b/packages/x-charts-pro/src/Heatmap/Heatmap.tsx @@ -164,7 +164,7 @@ const Heatmap = React.forwardRef(function Heatmap( const Tooltip = props.slots?.tooltip ?? HeatmapTooltip; return ( - + ({ From efd89cf59a48a9fb76f492cfe06e569b9533addd Mon Sep 17 00:00:00 2001 From: Jose Quintas Date: Fri, 17 Jan 2025 11:39:43 +0100 Subject: [PATCH 08/12] scripts --- docs/data/chartsApiPages.ts | 5 + docs/pages/x/api/charts/bar-chart-pro.json | 2 + .../x/api/charts/chart-data-provider-pro.js | 23 ++ .../x/api/charts/chart-data-provider-pro.json | 78 +++++ .../pages/x/api/charts/chart-data-provider.js | 23 ++ .../x/api/charts/chart-data-provider.json | 28 ++ docs/pages/x/api/charts/heatmap.json | 2 + docs/pages/x/api/charts/line-chart-pro.json | 2 + .../pages/x/api/charts/scatter-chart-pro.json | 2 + .../chart-container-pro.json | 2 +- .../chart-data-provider-pro.json | 47 ++++ .../ChartDataProviderPro.tsx | 266 +++++++++++++++++- scripts/x-charts-pro.exports.json | 4 +- 13 files changed, 469 insertions(+), 15 deletions(-) create mode 100644 docs/pages/x/api/charts/chart-data-provider-pro.js create mode 100644 docs/pages/x/api/charts/chart-data-provider-pro.json create mode 100644 docs/pages/x/api/charts/chart-data-provider.js create mode 100644 docs/pages/x/api/charts/chart-data-provider.json create mode 100644 docs/translations/api-docs/charts/chart-data-provider-pro/chart-data-provider-pro.json diff --git a/docs/data/chartsApiPages.ts b/docs/data/chartsApiPages.ts index dbc2961b5e3d8..b9e5531c8d152 100644 --- a/docs/data/chartsApiPages.ts +++ b/docs/data/chartsApiPages.ts @@ -51,6 +51,11 @@ const chartsApiPages: MuiPage[] = [ pathname: '/x/api/charts/chart-data-provider', title: 'ChartDataProvider', }, + { + pathname: '/x/api/charts/chart-data-provider-pro', + title: 'ChartDataProviderPro', + plan: 'pro', + }, { pathname: '/x/api/charts/charts-axis', title: 'ChartsAxis', diff --git a/docs/pages/x/api/charts/bar-chart-pro.json b/docs/pages/x/api/charts/bar-chart-pro.json index e7cff8489f235..3bb9df3a58e32 100644 --- a/docs/pages/x/api/charts/bar-chart-pro.json +++ b/docs/pages/x/api/charts/bar-chart-pro.json @@ -128,6 +128,8 @@ "import { BarChartPro } from '@mui/x-charts-pro';" ], "classes": [], + "spread": true, + "themeDefaultProps": null, "muiName": "MuiBarChartPro", "filename": "/packages/x-charts-pro/src/BarChartPro/BarChartPro.tsx", "inheritance": null, diff --git a/docs/pages/x/api/charts/chart-data-provider-pro.js b/docs/pages/x/api/charts/chart-data-provider-pro.js new file mode 100644 index 0000000000000..acef3376e3cc9 --- /dev/null +++ b/docs/pages/x/api/charts/chart-data-provider-pro.js @@ -0,0 +1,23 @@ +import * as React from 'react'; +import ApiPage from 'docs/src/modules/components/ApiPage'; +import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations'; +import jsonPageContent from './chart-data-provider-pro.json'; + +export default function Page(props) { + const { descriptions, pageContent } = props; + return ; +} + +Page.getInitialProps = () => { + const req = require.context( + 'docsx/translations/api-docs/charts/chart-data-provider-pro', + false, + /\.\/chart-data-provider-pro.*.json$/, + ); + const descriptions = mapApiPageTranslations(req); + + return { + descriptions, + pageContent: jsonPageContent, + }; +}; diff --git a/docs/pages/x/api/charts/chart-data-provider-pro.json b/docs/pages/x/api/charts/chart-data-provider-pro.json new file mode 100644 index 0000000000000..379dd6ed5d96c --- /dev/null +++ b/docs/pages/x/api/charts/chart-data-provider-pro.json @@ -0,0 +1,78 @@ +{ + "props": { + "colors": { + "type": { "name": "union", "description": "Array<string>
| func" }, + "default": "blueberryTwilightPalette" + }, + "dataset": { "type": { "name": "arrayOf", "description": "Array<object>" } }, + "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 }" + } + }, + "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 }>" + } + } + }, + "name": "ChartDataProviderPro", + "imports": [ + "import { ChartDataProviderPro } from '@mui/x-charts-pro/ChartDataProviderPro';", + "import { ChartDataProviderPro } from '@mui/x-charts-pro';" + ], + "classes": [], + "spread": false, + "themeDefaultProps": false, + "muiName": "MuiChartDataProviderPro", + "forwardsRefTo": "SVGSVGElement", + "filename": "/packages/x-charts-pro/src/ChartDataProviderPro/ChartDataProviderPro.tsx", + "inheritance": null, + "demos": "", + "cssComponent": false +} diff --git a/docs/pages/x/api/charts/chart-data-provider.js b/docs/pages/x/api/charts/chart-data-provider.js new file mode 100644 index 0000000000000..73a45a0bc9325 --- /dev/null +++ b/docs/pages/x/api/charts/chart-data-provider.js @@ -0,0 +1,23 @@ +import * as React from 'react'; +import ApiPage from 'docs/src/modules/components/ApiPage'; +import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations'; +import jsonPageContent from './chart-data-provider.json'; + +export default function Page(props) { + const { descriptions, pageContent } = props; + return ; +} + +Page.getInitialProps = () => { + const req = require.context( + 'docsx/translations/api-docs/charts/chart-data-provider', + false, + /\.\/chart-data-provider.*.json$/, + ); + const descriptions = mapApiPageTranslations(req); + + return { + descriptions, + pageContent: jsonPageContent, + }; +}; diff --git a/docs/pages/x/api/charts/chart-data-provider.json b/docs/pages/x/api/charts/chart-data-provider.json new file mode 100644 index 0000000000000..77371e213cabe --- /dev/null +++ b/docs/pages/x/api/charts/chart-data-provider.json @@ -0,0 +1,28 @@ +{ + "props": { + "colors": { "type": { "name": "any" }, "default": "blueberryTwilightPalette" }, + "height": { "type": { "name": "any" } }, + "highlightedItem": { "type": { "name": "any" } }, + "id": { "type": { "name": "any" } }, + "margin": { "type": { "name": "any" } }, + "onHighlightChange": { "type": { "name": "any" } }, + "series": { "type": { "name": "any" } }, + "skipAnimation": { "type": { "name": "any" } }, + "width": { "type": { "name": "any" } } + }, + "name": "ChartDataProvider", + "imports": [ + "import { ChartDataProvider } from '@mui/x-charts/ChartDataProvider';", + "import { ChartDataProvider } from '@mui/x-charts';", + "import { ChartDataProvider } from '@mui/x-charts-pro';" + ], + "classes": [], + "spread": false, + "themeDefaultProps": false, + "muiName": "MuiChartDataProvider", + "forwardsRefTo": "SVGSVGElement", + "filename": "/packages/x-charts/src/ChartDataProvider/ChartDataProvider.tsx", + "inheritance": null, + "demos": "", + "cssComponent": false +} diff --git a/docs/pages/x/api/charts/heatmap.json b/docs/pages/x/api/charts/heatmap.json index eed304fc47d4f..825a7c3329d84 100644 --- a/docs/pages/x/api/charts/heatmap.json +++ b/docs/pages/x/api/charts/heatmap.json @@ -118,6 +118,8 @@ "isGlobal": false } ], + "spread": true, + "themeDefaultProps": null, "muiName": "MuiHeatmap", "filename": "/packages/x-charts-pro/src/Heatmap/Heatmap.tsx", "inheritance": null, diff --git a/docs/pages/x/api/charts/line-chart-pro.json b/docs/pages/x/api/charts/line-chart-pro.json index f893f333c3a76..ec86cbc7249b1 100644 --- a/docs/pages/x/api/charts/line-chart-pro.json +++ b/docs/pages/x/api/charts/line-chart-pro.json @@ -121,6 +121,8 @@ "import { LineChartPro } from '@mui/x-charts-pro';" ], "classes": [], + "spread": true, + "themeDefaultProps": null, "muiName": "MuiLineChartPro", "filename": "/packages/x-charts-pro/src/LineChartPro/LineChartPro.tsx", "inheritance": null, diff --git a/docs/pages/x/api/charts/scatter-chart-pro.json b/docs/pages/x/api/charts/scatter-chart-pro.json index 237d22e922312..2107b9bb5a55a 100644 --- a/docs/pages/x/api/charts/scatter-chart-pro.json +++ b/docs/pages/x/api/charts/scatter-chart-pro.json @@ -118,6 +118,8 @@ "import { ScatterChartPro } from '@mui/x-charts-pro';" ], "classes": [], + "spread": true, + "themeDefaultProps": null, "muiName": "MuiScatterChartPro", "filename": "/packages/x-charts-pro/src/ScatterChartPro/ScatterChartPro.tsx", "inheritance": null, diff --git a/docs/translations/api-docs/charts/chart-container-pro/chart-container-pro.json b/docs/translations/api-docs/charts/chart-container-pro/chart-container-pro.json index f9dad77f658ed..4ca839b3c8e08 100644 --- a/docs/translations/api-docs/charts/chart-container-pro/chart-container-pro.json +++ b/docs/translations/api-docs/charts/chart-container-pro/chart-container-pro.json @@ -1,5 +1,5 @@ { - "componentDescription": "It sets up the data providers as well as the `` for the chart.\n\nThis is a combination of both the `ChartDataProvider` and `ChartsSurface` components.", + "componentDescription": "It sets up the data providers as well as the `` for the chart.\n\nThis is a combination of both the `ChartDataProviderPro` and `ChartsSurface` components.", "propDescriptions": { "colors": { "description": "Color palette used to colorize multiple series." }, "dataset": { 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 new file mode 100644 index 0000000000000..dbed26cfbd469 --- /dev/null +++ b/docs/translations/api-docs/charts/chart-data-provider-pro/chart-data-provider-pro.json @@ -0,0 +1,47 @@ +{ + "componentDescription": "Orchestrates the data providers for the chart components and hooks.\n\nUse this component if you have custom HTML components that need to access the chart data.", + "propDescriptions": { + "colors": { "description": "Color palette used to colorize multiple series." }, + "dataset": { + "description": "An array of objects that can be used to populate series and axes data using their dataKey property." + }, + "height": { + "description": "The height of the chart in px. If not defined, it takes the height of the parent element." + }, + "highlightedItem": { + "description": "The item currently highlighted. Turns highlighting into a controlled prop." + }, + "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." + }, + "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." + }, + "skipAnimation": { + "description": "If true, animations are skipped. If unset or false, the animations respects the user's prefers-reduced-motion setting." + }, + "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/ChartDataProviderPro/ChartDataProviderPro.tsx b/packages/x-charts-pro/src/ChartDataProviderPro/ChartDataProviderPro.tsx index 727a343a822c2..af891f61153e9 100644 --- a/packages/x-charts-pro/src/ChartDataProviderPro/ChartDataProviderPro.tsx +++ b/packages/x-charts-pro/src/ChartDataProviderPro/ChartDataProviderPro.tsx @@ -75,55 +75,297 @@ ChartDataProviderPro.propTypes = { // | These PropTypes are generated from the TypeScript type definitions | // | To update them edit the TypeScript types and run "pnpm proptypes" | // ---------------------------------------------------------------------- - apiRef: PropTypes.any, + apiRef: PropTypes.shape({ + current: PropTypes.shape({ + setZoomData: PropTypes.func.isRequired, + }), + }), children: PropTypes.node, /** * Color palette used to colorize multiple series. * @default blueberryTwilightPalette */ - colors: PropTypes.any, - dataset: PropTypes.any, + colors: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.func]), + /** + * An array of objects that can be used to populate series and axes data using their `dataKey` property. + */ + dataset: PropTypes.arrayOf(PropTypes.object), /** * The height of the chart in px. If not defined, it takes the height of the parent element. */ - height: PropTypes.any, + height: PropTypes.number, /** * The item currently highlighted. Turns highlighting into a controlled prop. */ - highlightedItem: PropTypes.any, + highlightedItem: PropTypes.shape({ + dataIndex: PropTypes.number, + seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), + }), /** * 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.any, + 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, + }), + ), /** * 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.any, + margin: PropTypes.shape({ + bottom: PropTypes.number, + left: PropTypes.number, + right: PropTypes.number, + top: PropTypes.number, + }), /** * The callback fired when the highlighted item changes. * * @param {HighlightItemData | null} highlightedItem The newly highlighted item. */ - onHighlightChange: PropTypes.any, + onHighlightChange: PropTypes.func, + /** + * Callback fired when the zoom has changed. + * + * @param {ZoomData[]} zoomData Updated zoom data. + */ + onZoomChange: PropTypes.func, /** * 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.any, + series: PropTypes.arrayOf(PropTypes.object), /** * If `true`, animations are skipped. * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting. */ - skipAnimation: PropTypes.any, - theme: PropTypes.any, + skipAnimation: PropTypes.bool, + theme: PropTypes.oneOf(['dark', 'light']), /** * The width of the chart in px. If not defined, it takes the width of the parent element. */ - width: PropTypes.any, + 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, + }), + ), } as any; export { ChartDataProviderPro }; diff --git a/scripts/x-charts-pro.exports.json b/scripts/x-charts-pro.exports.json index b457362dd31ec..d4b93e6807539 100644 --- a/scripts/x-charts-pro.exports.json +++ b/scripts/x-charts-pro.exports.json @@ -55,8 +55,8 @@ { "name": "CartesianSeriesType", "kind": "TypeAlias" }, { "name": "ChartContainerPro", "kind": "Variable" }, { "name": "ChartContainerProProps", "kind": "Interface" }, - { "name": "ChartDataProvider", "kind": "Function" }, - { "name": "ChartDataProviderProps", "kind": "TypeAlias" }, + { "name": "ChartDataProviderPro", "kind": "Function" }, + { "name": "ChartDataProviderProProps", "kind": "TypeAlias" }, { "name": "ChartDrawingArea", "kind": "TypeAlias" }, { "name": "ChartsAxis", "kind": "Function" }, { "name": "ChartsAxisClasses", "kind": "Interface" }, From 999901270e7d47a892af88851bb62ec0a1cc6bd5 Mon Sep 17 00:00:00 2001 From: Jose Quintas Date: Fri, 17 Jan 2025 12:12:07 +0100 Subject: [PATCH 09/12] Fix zoom behavior --- .../useChartDataProviderProProps.ts | 12 +++--------- 1 file changed, 3 insertions(+), 9 deletions(-) diff --git a/packages/x-charts-pro/src/ChartDataProviderPro/useChartDataProviderProProps.ts b/packages/x-charts-pro/src/ChartDataProviderPro/useChartDataProviderProProps.ts index 698995c46a36c..eba62b0bcb7f5 100644 --- a/packages/x-charts-pro/src/ChartDataProviderPro/useChartDataProviderProProps.ts +++ b/packages/x-charts-pro/src/ChartDataProviderPro/useChartDataProviderProProps.ts @@ -5,19 +5,13 @@ import type { ChartDataProviderProProps } from './ChartDataProviderPro'; export const useChartDataProviderProProps = ( props: ChartDataProviderProProps, ) => { - const { children, initialZoom, onZoomChange, ...other } = props; - - const { animationProviderProps, chartProviderProps, highlightedProviderProps } = - useChartDataProviderProps(other); + const { animationProviderProps, chartProviderProps, highlightedProviderProps, children } = + useChartDataProviderProps(props); return { children, highlightedProviderProps, animationProviderProps, - chartProviderProps: { - ...chartProviderProps, - initialZoom, - onZoomChange, - }, + chartProviderProps, }; }; From c387fb4377d36775f7fce403c6aa2e331b3fccee Mon Sep 17 00:00:00 2001 From: Jose Quintas Date: Fri, 17 Jan 2025 13:20:05 +0100 Subject: [PATCH 10/12] From 405617fada8f91607683e4c02372f637c612d764 Mon Sep 17 00:00:00 2001 From: Jose Quintas Date: Fri, 17 Jan 2025 14:08:53 +0100 Subject: [PATCH 11/12] Export community from pro --- packages/x-charts-pro/src/index.ts | 2 ++ scripts/x-charts-pro.exports.json | 9 +++++++++ 2 files changed, 11 insertions(+) diff --git a/packages/x-charts-pro/src/index.ts b/packages/x-charts-pro/src/index.ts index b79e578b6ddcf..00458d88cfdfe 100644 --- a/packages/x-charts-pro/src/index.ts +++ b/packages/x-charts-pro/src/index.ts @@ -25,6 +25,8 @@ export * from '@mui/x-charts/ScatterChart'; export * from '@mui/x-charts/SparkLineChart'; export * from '@mui/x-charts/Gauge'; export * from '@mui/x-charts/ChartsSurface'; +export * from '@mui/x-charts/ChartDataProvider'; +export * from '@mui/x-charts/ChartsLabel'; // Pro components export * from './Heatmap'; diff --git a/scripts/x-charts-pro.exports.json b/scripts/x-charts-pro.exports.json index d4b93e6807539..a68e0179c5c42 100644 --- a/scripts/x-charts-pro.exports.json +++ b/scripts/x-charts-pro.exports.json @@ -55,8 +55,10 @@ { "name": "CartesianSeriesType", "kind": "TypeAlias" }, { "name": "ChartContainerPro", "kind": "Variable" }, { "name": "ChartContainerProProps", "kind": "Interface" }, + { "name": "ChartDataProvider", "kind": "Function" }, { "name": "ChartDataProviderPro", "kind": "Function" }, { "name": "ChartDataProviderProProps", "kind": "TypeAlias" }, + { "name": "ChartDataProviderProps", "kind": "TypeAlias" }, { "name": "ChartDrawingArea", "kind": "TypeAlias" }, { "name": "ChartsAxis", "kind": "Function" }, { "name": "ChartsAxisClasses", "kind": "Interface" }, @@ -83,6 +85,10 @@ { "name": "ChartsGridProps", "kind": "Interface" }, { "name": "ChartsItemTooltipContent", "kind": "Function" }, { "name": "ChartsItemTooltipContentProps", "kind": "Interface" }, + { "name": "ChartsLabelClasses", "kind": "Interface" }, + { "name": "ChartsLabelGradientClasses", "kind": "Interface" }, + { "name": "ChartsLabelMarkClasses", "kind": "Interface" }, + { "name": "ChartsLabelMarkProps", "kind": "Interface" }, { "name": "ChartsLegend", "kind": "Variable" }, { "name": "ChartsLegendClasses", "kind": "Interface" }, { "name": "ChartsLegendPosition", "kind": "TypeAlias" }, @@ -189,6 +195,9 @@ { "name": "isBarSeries", "kind": "Function" }, { "name": "isDefaultizedBarSeries", "kind": "Function" }, { "name": "ItemHighlightedState", "kind": "TypeAlias" }, + { "name": "labelClasses", "kind": "Variable" }, + { "name": "labelGradientClasses", "kind": "Variable" }, + { "name": "labelMarkClasses", "kind": "Variable" }, { "name": "LayoutConfig", "kind": "TypeAlias" }, { "name": "legendClasses", "kind": "Variable" }, { "name": "LegendItemContext", "kind": "TypeAlias" }, From bd7d59bdddfef2d3d3ede6994ee96ef51092c5e7 Mon Sep 17 00:00:00 2001 From: Jose Quintas Date: Fri, 17 Jan 2025 17:33:26 +0100 Subject: [PATCH 12/12] Allow skip animation --- packages/x-charts-pro/src/BarChartPro/BarChartPro.tsx | 2 +- packages/x-charts-pro/src/LineChartPro/LineChartPro.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/x-charts-pro/src/BarChartPro/BarChartPro.tsx b/packages/x-charts-pro/src/BarChartPro/BarChartPro.tsx index 6672b65385a5f..f4a82ead6409a 100644 --- a/packages/x-charts-pro/src/BarChartPro/BarChartPro.tsx +++ b/packages/x-charts-pro/src/BarChartPro/BarChartPro.tsx @@ -21,7 +21,7 @@ import { ChartDataProviderPro } from '../ChartDataProviderPro'; function BarChartPlotZoom(props: BarPlotProps) { const isInteracting = useIsZoomInteracting(); - return ; + return ; } BarChartPlotZoom.propTypes = { diff --git a/packages/x-charts-pro/src/LineChartPro/LineChartPro.tsx b/packages/x-charts-pro/src/LineChartPro/LineChartPro.tsx index 6ec130926320e..ee2c046299d08 100644 --- a/packages/x-charts-pro/src/LineChartPro/LineChartPro.tsx +++ b/packages/x-charts-pro/src/LineChartPro/LineChartPro.tsx @@ -29,7 +29,7 @@ import { ChartDataProviderPro } from '../ChartDataProviderPro'; function AreaPlotZoom(props: AreaPlotProps) { const isInteracting = useIsZoomInteracting(); - return ; + return ; } AreaPlotZoom.propTypes = { @@ -62,7 +62,7 @@ AreaPlotZoom.propTypes = { function LinePlotZoom(props: LinePlotProps) { const isInteracting = useIsZoomInteracting(); - return ; + return ; } LinePlotZoom.propTypes = {