From c1347ed1da9d5bf7fbfbab376d32d3ec792b0b62 Mon Sep 17 00:00:00 2001 From: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com> Date: Thu, 30 Nov 2023 16:06:09 +0100 Subject: [PATCH 1/5] [docs] Document charts composition (#10710) (#11239) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Michel Engelen <32863416+michelengelen@users.noreply.github.com> Co-authored-by: Andrew Cherniavskii Co-authored-by: Lukas Co-authored-by: Rom Grk Co-authored-by: Olivier Tassinari Co-authored-by: Matheus Lúcio Co-authored-by: Andrew Cherniavskii Co-authored-by: Flavien DELANGLE Co-authored-by: Bilal Shafi Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Lucas Hilgert <77863078+lhilgert9@users.noreply.github.com> Co-authored-by: José Rodolfo Freitas Co-authored-by: Jerry_wu <409187100@qq.com> Co-authored-by: wuls Co-authored-by: Vu Dao Co-authored-by: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com> --- README.md | 2 +- docs/.link-check-errors.txt | 1 + docs/data/charts/bars/bars.md | 2 +- .../charts/composition/BasicComposition.js | 57 +++++++ .../charts/composition/BasicComposition.tsx | 58 +++++++ .../charts/composition/SwitchSeriesType.js | 54 +++++++ .../charts/composition/SwitchSeriesType.tsx | 54 +++++++ docs/data/charts/composition/composition.md | 143 ++++++++++++++++++ .../Combining.js | 0 .../Combining.tsx | 0 .../SimpleCharts.js | 0 .../SimpleCharts.tsx | 0 .../SimpleCharts.tsx.preview | 0 .../charts/getting-started/getting-started.md | 75 +++++++++ docs/data/charts/overview/overview.md | 70 +++------ .../introduction/installation/installation.md | 16 +- docs/data/pages.ts | 84 +++++----- docs/pages/x/react-charts/composition.js | 7 + docs/pages/x/react-charts/getting-started.js | 7 + .../modules/components/InstallationGrid.js | 2 +- 20 files changed, 542 insertions(+), 90 deletions(-) create mode 100644 docs/data/charts/composition/BasicComposition.js create mode 100644 docs/data/charts/composition/BasicComposition.tsx create mode 100644 docs/data/charts/composition/SwitchSeriesType.js create mode 100644 docs/data/charts/composition/SwitchSeriesType.tsx create mode 100644 docs/data/charts/composition/composition.md rename docs/data/charts/{overview => getting-started}/Combining.js (100%) rename docs/data/charts/{overview => getting-started}/Combining.tsx (100%) rename docs/data/charts/{overview => getting-started}/SimpleCharts.js (100%) rename docs/data/charts/{overview => getting-started}/SimpleCharts.tsx (100%) rename docs/data/charts/{overview => getting-started}/SimpleCharts.tsx.preview (100%) create mode 100644 docs/data/charts/getting-started/getting-started.md create mode 100644 docs/pages/x/react-charts/composition.js create mode 100644 docs/pages/x/react-charts/getting-started.js diff --git a/README.md b/README.md index ad2839f6b3c0e..a6fb7a237b7d1 100644 --- a/README.md +++ b/README.md @@ -32,7 +32,7 @@ Read the Date and Time Pickers [Installation instructions](https://mui.com/x/rea ### Charts -Read the Charts [Installation instructions](https://mui.com/x/react-charts/#getting-started) in the MUI X docs. +Read the Charts [Installation instructions](https://mui.com/x/react-charts/getting-started/#installation) in the MUI X docs. ### Tree View diff --git a/docs/.link-check-errors.txt b/docs/.link-check-errors.txt index 64df821e209b1..83c6048265201 100644 --- a/docs/.link-check-errors.txt +++ b/docs/.link-check-errors.txt @@ -17,3 +17,4 @@ Broken links found by `yarn docs:link-check` that exist: - https://mui.com/x/api/data-grid/data-grid/#slots - https://mui.com/x/api/date-pickers/date-picker/#slots - https://mui.com/x/introduction/licensing/#license-key-installation +- https://mui.com/x/react-charts/#getting-started diff --git a/docs/data/charts/bars/bars.md b/docs/data/charts/bars/bars.md index cfcf13135e6a5..f79a2dddcba00 100644 --- a/docs/data/charts/bars/bars.md +++ b/docs/data/charts/bars/bars.md @@ -58,7 +58,7 @@ For more information, see [stacking docs](/x/react-charts/stacking/). ## Layout Bar charts can be rendered with a horizontal layout by providing the `layout="horizontal"` prop. -If you're using [composition](/x/react-charts/#multiple-charts), you should set the property `layout: 'horizontal'` to each bar series object. +If you're using [composition](/x/react-charts/composition/), you should set the property `layout: 'horizontal'` to each bar series object. {{"demo": "HorizontalBars.js"}} diff --git a/docs/data/charts/composition/BasicComposition.js b/docs/data/charts/composition/BasicComposition.js new file mode 100644 index 0000000000000..ed6525ed6c9d2 --- /dev/null +++ b/docs/data/charts/composition/BasicComposition.js @@ -0,0 +1,57 @@ +import * as React from 'react'; +import Paper from '@mui/material/Paper'; +import Box from '@mui/material/Box'; +import Checkbox from '@mui/material/Checkbox'; +import FormControlLabel from '@mui/material/FormControlLabel'; +import { ChartContainer } from '@mui/x-charts/ChartContainer'; +import { ResponsiveChartContainer } from '@mui/x-charts/ResponsiveChartContainer'; +import { BarPlot } from '@mui/x-charts/BarChart'; +import { LinePlot, MarkPlot } from '@mui/x-charts/LineChart'; +import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis'; + +export default function BasicComposition() { + const [isResponsive, setIsResponsive] = React.useState(false); + + const Container = isResponsive ? ResponsiveChartContainer : ChartContainer; + const sizingProps = isResponsive ? {} : { width: 500, height: 300 }; + return ( + + setIsResponsive(event.target.checked)} /> + } + label="Use responsive container" + labelPlacement="end" + /> + + {/* @ts-ignore */} + + + + + + + + + ); +} diff --git a/docs/data/charts/composition/BasicComposition.tsx b/docs/data/charts/composition/BasicComposition.tsx new file mode 100644 index 0000000000000..cd7e893f0c852 --- /dev/null +++ b/docs/data/charts/composition/BasicComposition.tsx @@ -0,0 +1,58 @@ +import * as React from 'react'; +import Paper from '@mui/material/Paper'; +import Box from '@mui/material/Box'; +import Checkbox from '@mui/material/Checkbox'; +import FormControlLabel from '@mui/material/FormControlLabel'; +import { ChartContainer } from '@mui/x-charts/ChartContainer'; +import { ResponsiveChartContainer } from '@mui/x-charts/ResponsiveChartContainer'; +import { BarPlot } from '@mui/x-charts/BarChart'; +import { LinePlot, MarkPlot } from '@mui/x-charts/LineChart'; +import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis'; + +export default function BasicComposition() { + const [isResponsive, setIsResponsive] = React.useState(false); + + const Container = isResponsive ? ResponsiveChartContainer : ChartContainer; + const sizingProps = isResponsive ? {} : { width: 500, height: 300 }; + return ( + + setIsResponsive(event.target.checked)} /> + } + label="Use responsive container" + labelPlacement="end" + /> + + + {/* @ts-ignore */} + + + + + + + + + ); +} diff --git a/docs/data/charts/composition/SwitchSeriesType.js b/docs/data/charts/composition/SwitchSeriesType.js new file mode 100644 index 0000000000000..793f111f009d4 --- /dev/null +++ b/docs/data/charts/composition/SwitchSeriesType.js @@ -0,0 +1,54 @@ +import * as React from 'react'; +import Box from '@mui/material/Box'; +import TextField from '@mui/material/TextField'; +import MenuItem from '@mui/material/MenuItem'; +import { ResponsiveChartContainer } from '@mui/x-charts/ResponsiveChartContainer'; +import { BarPlot } from '@mui/x-charts/BarChart'; +import { LinePlot } from '@mui/x-charts/LineChart'; +import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis'; + +export default function SwitchSeriesType() { + const [type, setType] = React.useState('line'); + + return ( + + setType(event.target.value)} + label="series type" + sx={{ minWidth: 150 }} + > + line + bar + + +
+ + + + + +
+ + ); +} diff --git a/docs/data/charts/composition/SwitchSeriesType.tsx b/docs/data/charts/composition/SwitchSeriesType.tsx new file mode 100644 index 0000000000000..2cfd30184af82 --- /dev/null +++ b/docs/data/charts/composition/SwitchSeriesType.tsx @@ -0,0 +1,54 @@ +import * as React from 'react'; +import Box from '@mui/material/Box'; +import TextField from '@mui/material/TextField'; +import MenuItem from '@mui/material/MenuItem'; +import { ResponsiveChartContainer } from '@mui/x-charts/ResponsiveChartContainer'; +import { BarPlot } from '@mui/x-charts/BarChart'; +import { LinePlot } from '@mui/x-charts/LineChart'; +import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis'; + +export default function SwitchSeriesType() { + const [type, setType] = React.useState<'line' | 'bar'>('line'); + + return ( + + setType(event.target.value as 'line' | 'bar')} + label="series type" + sx={{ minWidth: 150 }} + > + line + bar + + +
+ + + + + +
+ + ); +} diff --git a/docs/data/charts/composition/composition.md b/docs/data/charts/composition/composition.md new file mode 100644 index 0000000000000..ee82414bcd197 --- /dev/null +++ b/docs/data/charts/composition/composition.md @@ -0,0 +1,143 @@ +--- +title: React Chart composition +githubLabel: 'component: charts' +packageName: '@mui/x-charts' +--- + +# Chart composition + +

Creating advanced custom charts.

+ +## Overview + +The `@mui/x-charts` follows an architecture based on context providers. +The overall idea is to pass your series and axes definitions to a single component: the ``. +This component transforms the data and makes it available to its children. + +Based on the data provided by the container, you can render some graphical elements with provided subcomponents, such as `` or ``. +Or you can [create your own components](/x/react-charts/components/). + +## Container options + +### Responsive + +There are two types of Chart containers available: `` and ``. +As the names suggest, the only difference between them is responsiveness. + +The first container requires you to provide `width` and `height` props. +In contrast, `` automatically adjusts its dimensions to fit the available space defined by the parent element. + +:::warning +The parent element must have intrinsic dimensions. +If the parent's dimensions rely on its content, the responsive charts will not render. +::: + +The following demo lets you switch between a chart using `` with `width` set to `500` and `height` set to `300`, and a chart using ``, so you can see how they differ. + +{{"demo": "BasicComposition.js" }} + +### Properties + +The chart container gets all props that are not specific to a single graphical element. +This includes: + +- The `xAxis` and `yAxis` props—find more information in the [Axis doc](/x/react-charts/axis/) +- The `colors` prop as defined in the [color palette page](/x/react-charts/styling/#color-palette) +- The `series` and `dataset` props + +#### Series + +The `series` prop is an array of series definitions. +You can find an explanation about each specific series type in their respective docs page: [Line](/x/react-charts/lines/), [Bar](/x/react-charts/bars/), [Pie](/x/react-charts/pie/), and [Scatter](/x/react-charts/scatter/). + +When using a single Charts component, the library can guess which kind of series you are defining. +For example, the Bar Chart component assumes that `series` will be of type `'bar'`. + +With composition, the chart container isn't able to guess the series type, so you must explicitly define it. + +```jsx + + + + {/* Will only display series with type: 'bar' */} + {/* Will only display series with type: 'line' */} + +``` + +Those series can use the `dataset` prop the same way that a single-component chart does—see [Using a dataset](/x/react-charts/bars/#using-a-dataset) in the Bar Chart documentation for more details. + +In the next demo, the chart is made by composing the `` and `` components. +By modifying the series `type` property, you can switch between rendering a line and a bar. + +```jsx + + + + + +``` + +{{"demo": "SwitchSeriesType.js" }} + +## Subcomponents + +### Plotting + +To display data, you have components named `` such as ``, ``, ``, ``, etc. + +### Axis + +To add axes, you can use `` and `` as defined in the [axis page](/x/react-charts/axis/#composition). + +It takes an `axisId` prop that indicates which axis, defined in the container, should be rendered. +If `axisId` is not provided it will pick the first one. + +### Additional information + +To add a legend to your chart, you can use ``. + +Most of the props are explained in the [legend page](/x/react-charts/legend/). +The demos use the `slotProps.legend` object, but with composition, you can pass props directly to ``. + +```jsx +// With single component chart + + +// With composition + + + +``` + +### Interaction + +You can also add interactive elements such as `` and ``. + +:::info +By default, the container listens to mouse events to keep track of where the mouse is located on the chart. + +If you are not using the axis highlight or the tooltip, consider disabling this feature with the `disableAxisListener` prop. + +```jsx + +``` + +::: diff --git a/docs/data/charts/overview/Combining.js b/docs/data/charts/getting-started/Combining.js similarity index 100% rename from docs/data/charts/overview/Combining.js rename to docs/data/charts/getting-started/Combining.js diff --git a/docs/data/charts/overview/Combining.tsx b/docs/data/charts/getting-started/Combining.tsx similarity index 100% rename from docs/data/charts/overview/Combining.tsx rename to docs/data/charts/getting-started/Combining.tsx diff --git a/docs/data/charts/overview/SimpleCharts.js b/docs/data/charts/getting-started/SimpleCharts.js similarity index 100% rename from docs/data/charts/overview/SimpleCharts.js rename to docs/data/charts/getting-started/SimpleCharts.js diff --git a/docs/data/charts/overview/SimpleCharts.tsx b/docs/data/charts/getting-started/SimpleCharts.tsx similarity index 100% rename from docs/data/charts/overview/SimpleCharts.tsx rename to docs/data/charts/getting-started/SimpleCharts.tsx diff --git a/docs/data/charts/overview/SimpleCharts.tsx.preview b/docs/data/charts/getting-started/SimpleCharts.tsx.preview similarity index 100% rename from docs/data/charts/overview/SimpleCharts.tsx.preview rename to docs/data/charts/getting-started/SimpleCharts.tsx.preview diff --git a/docs/data/charts/getting-started/getting-started.md b/docs/data/charts/getting-started/getting-started.md new file mode 100644 index 0000000000000..e846a6968c92d --- /dev/null +++ b/docs/data/charts/getting-started/getting-started.md @@ -0,0 +1,75 @@ +--- +title: React Chart library - Getting started +githubLabel: 'component: charts' +packageName: '@mui/x-charts' +--- + +# Charts - Getting Started + +

Get started with the Charts components. Install the package, configure your application and start using the components.

+ +## Installation + +:::warning +The `next` tag is used to download the latest v7 **pre-release** version. +::: + +To install this library, run + + +```bash npm +npm install @mui/x-charts@next +``` + +```bash yarn +yarn add @mui/x-charts@next +``` + +```bash pnpm +pnpm add @mui/x-charts@next +``` + + + +:::info +With Next.js you might face the following error: + +```bash +[ESM][charts] Doesn't build due to require() of ES Module (ERR_REQUIRE_ESM) +``` + +The solution is to transpile the package by adding `transpilePackages: ['@mui/x-charts']` to your `next.config.js` file—see [this GitHub issue and comment](https://github.com/mui/mui-x/issues/9826#issuecomment-1658333978) for details. +::: + +## Displaying Charts + +A Chart can be rendered in one of two ways: as a single component, or by composing subcomponents. + +### Single Charts + +For most common use cases, we recommend rendering as a single component. + +The components intended to be rendered individually are named with "Chart" (as opposed to "Plot") and only require the `series` prop, which describes the data to render. + +{{"demo": "SimpleCharts.js"}} + +### Composed Charts + +To combine different Charts, like Lines with Bars, you can use composition with the `` wrapper. + +Inside this wrapper, you can render ``, ``, or any plot component (``, ``, ``, or ``). +See the [Composition doc](/x/react-charts/composition/) for complete details. + +{{"demo": "Combining.js"}} + +## Axis management + +MUI X Charts are flexible when it comes to axis management: they support multiple-axis charts with any combination of scales and ranges. + +See the [Axis doc](/x/react-charts/axis/) for more details. + +## Styling + +The Charts library follows the same styling patterns as other MUI component libraries, such as Material UI. + +See the [Styling doc](/x/react-charts/styling/) for details. diff --git a/docs/data/charts/overview/overview.md b/docs/data/charts/overview/overview.md index f4220baa29a7d..43e54ae10b5e3 100644 --- a/docs/data/charts/overview/overview.md +++ b/docs/data/charts/overview/overview.md @@ -19,65 +19,33 @@ Like other MUI X components, charts are built to be production-ready components They also provide a high level of customization. To achieve this goal, the `@mui/x-charts` relies on three levels of customization: -_single components_ with nice default, extensive _configuration props_, and subcomponents for _composition_. + +- _single components_ with nice defaults +- extensive _configuration props_ +- subcomponents for _composition_ To modify the styling of charts you can rely on all the MUI styling tools, such as the theme override, or the `sx` props. -## Getting started +## Documentation -:::warning -The `next` tag is used to download the latest v7 **pre-release** version. +:::info +This documentation does not follow the usual MUI structure. ::: -To install this library, run - - -```bash npm -npm install @mui/x-charts@next -``` - -```bash yarn -yarn add @mui/x-charts@next -``` - -```bash pnpm -pnpm add @mui/x-charts@next -``` - - - -## Display charts - -Charts can be rendered in two ways. -With a single component or by composing sub-components. - -### Single charts - -For common use cases, the single component is the recommended way. - -Those components' name ends with "Chart" and only require the `series` prop, describing the data to render. - -They also have plenty of other props to customize the chart behavior. - -{{"demo": "SimpleCharts.js"}} - -### Multiple charts - -To combine different charts, like lines with bars, you can use composition with `` wrapper. - -Inside this wrapper, you can render ``, ``, or any plot component (``, ``, ``, ``) - -{{"demo": "Combining.js"}} - -## Axis management +Each component has two docs pages: -The library is flexible about axis management. -It supports multiple-axis charts with any combination of scales and ranges. +- The first one describes behaviors that are specific to this component. +- The second one provides a set of basic examples. -For more details, have a look at the [axis docs page](/x/react-charts/axis/). +For features shared across multiple components, likes axes and legends, visit their corresponding documents: -## Styling +- [Axis](/x/react-charts/axis/) +- [Custom components](/x/react-charts/components/) +- [Legend](/x/react-charts/legend/) +- [Stacking](/x/react-charts/stacking/) +- [Styling](/x/react-charts/styling/) +- [Tooltips and Highlights](/x/react-charts/tooltip/) -The library is following MUI styling behavior, such that customizing charts is made as simple as customizing buttons. +## What's next? -For more details, have a look at the [styling docs page](/x/react-charts/styling/). +Continue to the [Getting started doc](/x/react-charts/getting-started/) and learn how to prepare your application for Charts. diff --git a/docs/data/introduction/installation/installation.md b/docs/data/introduction/installation/installation.md index dfe4b3f29da66..4355794df38c6 100644 --- a/docs/data/introduction/installation/installation.md +++ b/docs/data/introduction/installation/installation.md @@ -13,4 +13,18 @@ MUI X components have a peer dependency on `@mui/material`: the installation [in Note that you only need to install the packages corresponding to the components you're using—e.g., Data Grid users don't need to install the Date and Time Pickers. -{{"component": "modules/components/InstallationGrid.js"}} +### Data Grid + +The installation [instructions](/x/react-data-grid/getting-started/#installation). + +### Date and Time Pickers + +The installation [instructions](/x/react-date-pickers/getting-started/#installation). + +### Charts + +The installation [instructions](/x/react-charts/getting-started/#installation). + +### Tree View + +The installation [instructions](/x/react-tree-view/getting-started/#installation). diff --git a/docs/data/pages.ts b/docs/data/pages.ts index b01def2cee069..e5643ef5ed4cf 100644 --- a/docs/data/pages.ts +++ b/docs/data/pages.ts @@ -381,49 +381,63 @@ const pages: MuiPage[] = [ newFeature: true, children: [ { pathname: '/x/react-charts', title: 'Overview' }, + { pathname: '/x/react-charts/getting-started' }, { - pathname: '/x/react-charts-bars', - title: 'Bars', - children: [ - { pathname: '/x/react-charts/bars', title: 'Bars' }, - { pathname: '/x/react-charts/bar-demo', title: 'Demo' }, - ], - }, - { - pathname: '/x/react-charts-lines', - title: 'Lines', - children: [ - { pathname: '/x/react-charts/lines', title: 'Lines' }, - { pathname: '/x/react-charts/line-demo', title: 'Demo lines' }, - { pathname: '/x/react-charts/areas-demo', title: 'Demo area' }, - ], - }, - { - pathname: '/x/react-charts-pie', - title: 'Pie', + pathname: '/x/react-charts-components', + subheader: 'Components', children: [ - { pathname: '/x/react-charts/pie', title: 'Pie' }, - { pathname: '/x/react-charts/pie-demo', title: 'Demo' }, + { + pathname: '/x/react-charts-bars', + title: 'Bars', + children: [ + { pathname: '/x/react-charts/bars', title: 'Bars' }, + { pathname: '/x/react-charts/bar-demo', title: 'Demo' }, + ], + }, + { + pathname: '/x/react-charts-lines', + title: 'Lines', + children: [ + { pathname: '/x/react-charts/lines', title: 'Lines' }, + { pathname: '/x/react-charts/line-demo', title: 'Demo lines' }, + { pathname: '/x/react-charts/areas-demo', title: 'Demo area' }, + ], + }, + { + pathname: '/x/react-charts-pie', + title: 'Pie', + children: [ + { pathname: '/x/react-charts/pie', title: 'Pie' }, + { pathname: '/x/react-charts/pie-demo', title: 'Demo' }, + ], + }, + { + pathname: '/x/react-charts-scatter', + title: 'Scatter', + children: [ + { pathname: '/x/react-charts/scatter', title: 'Scatter' }, + { pathname: '/x/react-charts/scatter-demo', title: 'Demo' }, + ], + }, + { + pathname: '/x/react-charts/sparkline', + title: 'Sparkline', + }, ], }, { - pathname: '/x/react-charts-scatter', - title: 'Scatter', + pathname: '/x/react-charts/common-features', + subheader: 'Common features', children: [ - { pathname: '/x/react-charts/scatter', title: 'Scatter' }, - { pathname: '/x/react-charts/scatter-demo', title: 'Demo' }, + { pathname: '/x/react-charts/axis', title: 'Axis' }, + { pathname: '/x/react-charts/components', title: 'Custom components' }, + { pathname: '/x/react-charts/composition', title: 'Composition' }, + { pathname: '/x/react-charts/legend', title: 'Legend' }, + { pathname: '/x/react-charts/stacking', title: 'Stacking' }, + { pathname: '/x/react-charts/styling', title: 'Styling' }, + { pathname: '/x/react-charts/tooltip', title: 'Tooltip & Highlights' }, ], }, - { - pathname: '/x/react-charts/sparkline', - title: 'Sparkline', - }, - { pathname: '/x/react-charts/axis', title: 'Axis' }, - { pathname: '/x/react-charts/components', title: 'Custom components' }, - { pathname: '/x/react-charts/legend', title: 'Legend' }, - { pathname: '/x/react-charts/stacking', title: 'Stacking' }, - { pathname: '/x/react-charts/styling', title: 'Styling' }, - { pathname: '/x/react-charts/tooltip', title: 'Tooltip' }, { pathname: '/x/api/charts-group', title: 'API Reference', diff --git a/docs/pages/x/react-charts/composition.js b/docs/pages/x/react-charts/composition.js new file mode 100644 index 0000000000000..a49089a512652 --- /dev/null +++ b/docs/pages/x/react-charts/composition.js @@ -0,0 +1,7 @@ +import * as React from 'react'; +import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; +import * as pageProps from 'docsx/data/charts/composition/composition.md?@mui/markdown'; + +export default function Page() { + return ; +} diff --git a/docs/pages/x/react-charts/getting-started.js b/docs/pages/x/react-charts/getting-started.js new file mode 100644 index 0000000000000..951ac46c0aba6 --- /dev/null +++ b/docs/pages/x/react-charts/getting-started.js @@ -0,0 +1,7 @@ +import * as React from 'react'; +import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; +import * as pageProps from 'docsx/data/charts/getting-started/getting-started.md?@mui/markdown'; + +export default function Page() { + return ; +} diff --git a/docs/src/modules/components/InstallationGrid.js b/docs/src/modules/components/InstallationGrid.js index 1d3594bd9bed9..1ec5bfc316cb2 100644 --- a/docs/src/modules/components/InstallationGrid.js +++ b/docs/src/modules/components/InstallationGrid.js @@ -21,7 +21,7 @@ const content = [ }, { title: 'Charts', - link: '/x/react-charts/#getting-started', + link: '/x/react-charts/getting-started/#installation', description: 'A collection of data visualization graphs, including bar, line, pie, scatter, and more.', icon: , From c0dad73c63b15d57aefa996a37dbc3b8d0be0bbe Mon Sep 17 00:00:00 2001 From: Michel Engelen <32863416+michelengelen@users.noreply.github.com> Date: Thu, 30 Nov 2023 16:35:08 +0100 Subject: [PATCH 2/5] [pickers] Moved extend with `customParseFormat` to constructor (#11151) Signed-off-by: Michel Engelen <32863416+michelengelen@users.noreply.github.com> --- .../migration-pickers-v6.md | 21 ++++++++++++++++++- .../src/AdapterDayjs/AdapterDayjs.ts | 8 ++++--- 2 files changed, 25 insertions(+), 4 deletions(-) diff --git a/docs/data/migration/migration-pickers-v6/migration-pickers-v6.md b/docs/data/migration/migration-pickers-v6/migration-pickers-v6.md index f6cdac98489df..a486f3a7f5d4e 100644 --- a/docs/data/migration/migration-pickers-v6/migration-pickers-v6.md +++ b/docs/data/migration/migration-pickers-v6/migration-pickers-v6.md @@ -277,7 +277,9 @@ The `dayPickerClasses` variable has been renamed `dayCalendarClasses` to be cons +import { dayCalendarClasses } from '@mui/x-date-pickers/DateCalendar'; ``` -## Use UTC with the Day.js adapter +## Usage with Day.js + +### Use UTC with the Day.js adapter The `dateLibInstance` prop of `LocalizationProvider` does not work with `AdapterDayjs` anymore. This prop was used to set the pickers in UTC mode before the implementation of a proper timezone support in the components. @@ -302,6 +304,23 @@ You can learn more about the new approach on the [dedicated doc page](https://mu ``` +### Usage with `customParseFormat` + +The call to `dayjs.extend(customParseFormatPlugin)` has been moved to the `AdapterDayjs` constructor. This allows users +to pass custom options to this plugin before the adapter uses it. + +If you are using this plugin before the rendering of the first `LocalizationProvider` component and did not call +`dayjs.extend` in your own codebase, you will need to manually extend `dayjs`: + +```tsx +import dayjs from 'dayjs'; +import customParseFormatPlugin from 'dayjs/plugin/customParseFormat'; + +dayjs.extend(customParseFormatPlugin); +``` + +The other plugins are still added before the adapter initialization. + ## Adapters internal changes :::success diff --git a/packages/x-date-pickers/src/AdapterDayjs/AdapterDayjs.ts b/packages/x-date-pickers/src/AdapterDayjs/AdapterDayjs.ts index 68e6fcbbc06ec..853b72d4edf1a 100644 --- a/packages/x-date-pickers/src/AdapterDayjs/AdapterDayjs.ts +++ b/packages/x-date-pickers/src/AdapterDayjs/AdapterDayjs.ts @@ -1,6 +1,6 @@ /* eslint-disable class-methods-use-this */ import defaultDayjs, { Dayjs } from 'dayjs'; -import weekOfYear from 'dayjs/plugin/weekOfYear'; +import weekOfYearPlugin from 'dayjs/plugin/weekOfYear'; import customParseFormatPlugin from 'dayjs/plugin/customParseFormat'; import localizedFormatPlugin from 'dayjs/plugin/localizedFormat'; import isBetweenPlugin from 'dayjs/plugin/isBetween'; @@ -14,8 +14,8 @@ import { } from '../models'; import { buildWarning } from '../internals/utils/warning'; -defaultDayjs.extend(customParseFormatPlugin); defaultDayjs.extend(localizedFormatPlugin); +defaultDayjs.extend(weekOfYearPlugin); defaultDayjs.extend(isBetweenPlugin); type Constructor = (...args: Parameters) => Dayjs; @@ -158,7 +158,9 @@ export class AdapterDayjs implements MuiPickersAdapter { this.locale = locale; this.formats = { ...defaultFormats, ...formats }; - defaultDayjs.extend(weekOfYear); + // Moved plugins to the constructor to allow for users to use options on the library + // for reference: https://github.com/mui/mui-x/pull/11151 + defaultDayjs.extend(customParseFormatPlugin); } private setLocaleToValue = (value: Dayjs) => { From f179b035da3a8eefee07cd05fd1ca7add50e0310 Mon Sep 17 00:00:00 2001 From: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com> Date: Thu, 30 Nov 2023 19:08:32 +0100 Subject: [PATCH 3/5] [charts] Fix TS config (#11259) --- .../default-charts-axis-tooltip-content.json | 2 +- .../default-charts-item-tooltip-content.json | 2 +- .../ChartsAxisTooltipContent.tsx | 79 ++++++++-------- .../ChartsItemTooltipContent.tsx | 47 +--------- .../DefaultChartsAxisTooltipContent.tsx | 79 ++++++++-------- .../DefaultChartsItemTooltipContent.tsx | 89 +------------------ .../x-charts/src/ScatterChart/Scatter.tsx | 2 +- .../x-charts/src/models/seriesType/config.ts | 7 +- .../x-charts/src/models/seriesType/scatter.ts | 2 +- 9 files changed, 87 insertions(+), 222 deletions(-) diff --git a/docs/pages/x/api/charts/default-charts-axis-tooltip-content.json b/docs/pages/x/api/charts/default-charts-axis-tooltip-content.json index b82d53103675a..de049a6d062c1 100644 --- a/docs/pages/x/api/charts/default-charts-axis-tooltip-content.json +++ b/docs/pages/x/api/charts/default-charts-axis-tooltip-content.json @@ -23,7 +23,7 @@ "series": { "type": { "name": "arrayOf", - "description": "Array<any
| { area?: bool, color: string, connectNulls?: bool, curve?: 'catmullRom'
| 'linear'
| 'monotoneX'
| 'monotoneY'
| 'natural'
| 'step'
| 'stepAfter'
| 'stepBefore', data: Array<number>, dataKey?: string, disableHighlight?: bool, highlightScope?: { faded?: 'global'
| 'none'
| 'series', highlighted?: 'item'
| 'none'
| 'series' }, id: string, label?: string, showMark?: func
| bool, stack?: string, stackOffset?: 'diverging'
| 'expand'
| 'none'
| 'silhouette'
| 'wiggle', stackOrder?: 'appearance'
| 'ascending'
| 'descending'
| 'insideOut'
| 'none'
| 'reverse', type: 'line', valueFormatter: func, xAxisKey?: string, yAxisKey?: string }>" + "description": "Array<{ area?: bool, color: string, connectNulls?: bool, curve?: 'catmullRom'
| 'linear'
| 'monotoneX'
| 'monotoneY'
| 'natural'
| 'step'
| 'stepAfter'
| 'stepBefore', data: Array<number>, dataKey?: string, disableHighlight?: bool, highlightScope?: { faded?: 'global'
| 'none'
| 'series', highlighted?: 'item'
| 'none'
| 'series' }, id: string, label?: string, showMark?: func
| bool, stack?: string, stackOffset?: 'diverging'
| 'expand'
| 'none'
| 'silhouette'
| 'wiggle', stackOrder?: 'appearance'
| 'ascending'
| 'descending'
| 'insideOut'
| 'none'
| 'reverse', type: 'line', valueFormatter: func, xAxisKey?: string, yAxisKey?: string }>" }, "required": true }, diff --git a/docs/pages/x/api/charts/default-charts-item-tooltip-content.json b/docs/pages/x/api/charts/default-charts-item-tooltip-content.json index 13cbb86a2fe0f..4204b878e9f47 100644 --- a/docs/pages/x/api/charts/default-charts-item-tooltip-content.json +++ b/docs/pages/x/api/charts/default-charts-item-tooltip-content.json @@ -15,7 +15,7 @@ "series": { "type": { "name": "shape", - "description": "{ color?: string, data: Array<number>
| { __@iterator@33399: func, __@unscopables@36265: { __@iterator@33399?: bool, __@unscopables@36265?: bool, at?: bool, concat?: bool, copyWithin?: bool, entries?: bool, every?: bool, fill?: bool, filter?: bool, find?: bool, findIndex?: bool, findLast?: bool, findLastIndex?: bool, flat?: bool, flatMap?: bool, forEach?: bool, includes?: bool, indexOf?: bool, join?: bool, keys?: bool, lastIndexOf?: bool, length?: bool, map?: bool, pop?: bool, push?: bool, reduce?: bool, reduceRight?: bool, reverse?: bool, shift?: bool, slice?: bool, some?: bool, sort?: bool, splice?: bool, toLocaleString?: bool, toReversed?: bool, toSorted?: bool, toSpliced?: bool, toString?: bool, unshift?: bool, values?: bool, with?: bool }, at: func, concat: func, copyWithin: func, entries: func, every: func, fill: func, filter: func, find: func, findIndex: func, findLast: func, findLastIndex: func, flat: func, flatMap: func, forEach: func, includes: func, indexOf: func, join: func, keys: func, lastIndexOf: func, length: number, map: func, pop: func, push: func, reduce: func, reduceRight: func, reverse: func, shift: func, slice: func, some: func, sort: func, splice: func, toLocaleString: func, toReversed: func, toSorted: func, toSpliced: func, toString: func, unshift: func, values: func, with: func }, highlightScope?: { faded?: 'global'
| 'none'
| 'series', highlighted?: 'item'
| 'none'
| 'series' }, id: string, type: 'bar'
| 'line'
| 'pie'
| 'scatter', valueFormatter: func }" + "description": "{ color?: string, data: Array<number>, highlightScope?: { faded?: 'global'
| 'none'
| 'series', highlighted?: 'item'
| 'none'
| 'series' }, id: string, type: 'bar'
| 'line'
| 'pie'
| 'scatter', valueFormatter: func }" }, "required": true } diff --git a/packages/x-charts/src/ChartsTooltip/ChartsAxisTooltipContent.tsx b/packages/x-charts/src/ChartsTooltip/ChartsAxisTooltipContent.tsx index 384b09cb09075..522ebd76d1f7b 100644 --- a/packages/x-charts/src/ChartsTooltip/ChartsAxisTooltipContent.tsx +++ b/packages/x-charts/src/ChartsTooltip/ChartsAxisTooltipContent.tsx @@ -168,48 +168,45 @@ ChartsAxisTooltipContent.propTypes = { classes: PropTypes.object, dataIndex: PropTypes.number, series: PropTypes.arrayOf( - PropTypes.oneOfType([ - PropTypes.any, - PropTypes.shape({ - area: PropTypes.bool, - color: PropTypes.string.isRequired, - connectNulls: PropTypes.bool, - curve: PropTypes.oneOf([ - 'catmullRom', - 'linear', - 'monotoneX', - 'monotoneY', - 'natural', - 'step', - 'stepAfter', - 'stepBefore', - ]), - data: PropTypes.arrayOf(PropTypes.number).isRequired, - dataKey: PropTypes.string, - disableHighlight: PropTypes.bool, - highlightScope: PropTypes.shape({ - faded: PropTypes.oneOf(['global', 'none', 'series']), - highlighted: PropTypes.oneOf(['item', 'none', 'series']), - }), - id: PropTypes.string.isRequired, - label: PropTypes.string, - showMark: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]), - stack: PropTypes.string, - stackOffset: PropTypes.oneOf(['diverging', 'expand', 'none', 'silhouette', 'wiggle']), - stackOrder: PropTypes.oneOf([ - 'appearance', - 'ascending', - 'descending', - 'insideOut', - 'none', - 'reverse', - ]), - type: PropTypes.oneOf(['line']).isRequired, - valueFormatter: PropTypes.func.isRequired, - xAxisKey: PropTypes.string, - yAxisKey: PropTypes.string, + PropTypes.shape({ + area: PropTypes.bool, + color: PropTypes.string.isRequired, + connectNulls: PropTypes.bool, + curve: PropTypes.oneOf([ + 'catmullRom', + 'linear', + 'monotoneX', + 'monotoneY', + 'natural', + 'step', + 'stepAfter', + 'stepBefore', + ]), + data: PropTypes.arrayOf(PropTypes.number).isRequired, + dataKey: PropTypes.string, + disableHighlight: PropTypes.bool, + highlightScope: PropTypes.shape({ + faded: PropTypes.oneOf(['global', 'none', 'series']), + highlighted: PropTypes.oneOf(['item', 'none', 'series']), }), - ]).isRequired, + id: PropTypes.string.isRequired, + label: PropTypes.string, + showMark: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]), + stack: PropTypes.string, + stackOffset: PropTypes.oneOf(['diverging', 'expand', 'none', 'silhouette', 'wiggle']), + stackOrder: PropTypes.oneOf([ + 'appearance', + 'ascending', + 'descending', + 'insideOut', + 'none', + 'reverse', + ]), + type: PropTypes.oneOf(['line']).isRequired, + valueFormatter: PropTypes.func.isRequired, + xAxisKey: PropTypes.string, + yAxisKey: PropTypes.string, + }), ), sx: PropTypes.oneOfType([ PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), diff --git a/packages/x-charts/src/ChartsTooltip/ChartsItemTooltipContent.tsx b/packages/x-charts/src/ChartsTooltip/ChartsItemTooltipContent.tsx index 4e8add66455ce..5fa02a6067e23 100644 --- a/packages/x-charts/src/ChartsTooltip/ChartsItemTooltipContent.tsx +++ b/packages/x-charts/src/ChartsTooltip/ChartsItemTooltipContent.tsx @@ -68,52 +68,7 @@ ChartsItemTooltipContent.propTypes = { }), series: PropTypes.shape({ color: PropTypes.string, - data: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.number), - PropTypes.shape({ - '__@iterator@33399': PropTypes.func.isRequired, - '__@unscopables@36265': PropTypes.object.isRequired, - at: PropTypes.func.isRequired, - concat: PropTypes.func.isRequired, - copyWithin: PropTypes.func.isRequired, - entries: PropTypes.func.isRequired, - every: PropTypes.func.isRequired, - fill: PropTypes.func.isRequired, - filter: PropTypes.func.isRequired, - find: PropTypes.func.isRequired, - findIndex: PropTypes.func.isRequired, - findLast: PropTypes.func.isRequired, - findLastIndex: PropTypes.func.isRequired, - flat: PropTypes.func.isRequired, - flatMap: PropTypes.func.isRequired, - forEach: PropTypes.func.isRequired, - includes: PropTypes.func.isRequired, - indexOf: PropTypes.func.isRequired, - join: PropTypes.func.isRequired, - keys: PropTypes.func.isRequired, - lastIndexOf: PropTypes.func.isRequired, - length: PropTypes.number.isRequired, - map: PropTypes.func.isRequired, - pop: PropTypes.func.isRequired, - push: PropTypes.func.isRequired, - reduce: PropTypes.func.isRequired, - reduceRight: PropTypes.func.isRequired, - reverse: PropTypes.func.isRequired, - shift: PropTypes.func.isRequired, - slice: PropTypes.func.isRequired, - some: PropTypes.func.isRequired, - sort: PropTypes.func.isRequired, - splice: PropTypes.func.isRequired, - toLocaleString: PropTypes.func.isRequired, - toReversed: PropTypes.func.isRequired, - toSorted: PropTypes.func.isRequired, - toSpliced: PropTypes.func.isRequired, - toString: PropTypes.func.isRequired, - unshift: PropTypes.func.isRequired, - values: PropTypes.func.isRequired, - with: PropTypes.func.isRequired, - }), - ]).isRequired, + data: PropTypes.arrayOf(PropTypes.number).isRequired, highlightScope: PropTypes.shape({ faded: PropTypes.oneOf(['global', 'none', 'series']), highlighted: PropTypes.oneOf(['item', 'none', 'series']), diff --git a/packages/x-charts/src/ChartsTooltip/DefaultChartsAxisTooltipContent.tsx b/packages/x-charts/src/ChartsTooltip/DefaultChartsAxisTooltipContent.tsx index a8398c2209326..44898b2190226 100644 --- a/packages/x-charts/src/ChartsTooltip/DefaultChartsAxisTooltipContent.tsx +++ b/packages/x-charts/src/ChartsTooltip/DefaultChartsAxisTooltipContent.tsx @@ -132,48 +132,45 @@ DefaultChartsAxisTooltipContent.propTypes = { * The series linked to the triggered axis. */ series: PropTypes.arrayOf( - PropTypes.oneOfType([ - PropTypes.any, - PropTypes.shape({ - area: PropTypes.bool, - color: PropTypes.string.isRequired, - connectNulls: PropTypes.bool, - curve: PropTypes.oneOf([ - 'catmullRom', - 'linear', - 'monotoneX', - 'monotoneY', - 'natural', - 'step', - 'stepAfter', - 'stepBefore', - ]), - data: PropTypes.arrayOf(PropTypes.number).isRequired, - dataKey: PropTypes.string, - disableHighlight: PropTypes.bool, - highlightScope: PropTypes.shape({ - faded: PropTypes.oneOf(['global', 'none', 'series']), - highlighted: PropTypes.oneOf(['item', 'none', 'series']), - }), - id: PropTypes.string.isRequired, - label: PropTypes.string, - showMark: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]), - stack: PropTypes.string, - stackOffset: PropTypes.oneOf(['diverging', 'expand', 'none', 'silhouette', 'wiggle']), - stackOrder: PropTypes.oneOf([ - 'appearance', - 'ascending', - 'descending', - 'insideOut', - 'none', - 'reverse', - ]), - type: PropTypes.oneOf(['line']).isRequired, - valueFormatter: PropTypes.func.isRequired, - xAxisKey: PropTypes.string, - yAxisKey: PropTypes.string, + PropTypes.shape({ + area: PropTypes.bool, + color: PropTypes.string.isRequired, + connectNulls: PropTypes.bool, + curve: PropTypes.oneOf([ + 'catmullRom', + 'linear', + 'monotoneX', + 'monotoneY', + 'natural', + 'step', + 'stepAfter', + 'stepBefore', + ]), + data: PropTypes.arrayOf(PropTypes.number).isRequired, + dataKey: PropTypes.string, + disableHighlight: PropTypes.bool, + highlightScope: PropTypes.shape({ + faded: PropTypes.oneOf(['global', 'none', 'series']), + highlighted: PropTypes.oneOf(['item', 'none', 'series']), }), - ]).isRequired, + id: PropTypes.string.isRequired, + label: PropTypes.string, + showMark: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]), + stack: PropTypes.string, + stackOffset: PropTypes.oneOf(['diverging', 'expand', 'none', 'silhouette', 'wiggle']), + stackOrder: PropTypes.oneOf([ + 'appearance', + 'ascending', + 'descending', + 'insideOut', + 'none', + 'reverse', + ]), + type: PropTypes.oneOf(['line']).isRequired, + valueFormatter: PropTypes.func.isRequired, + xAxisKey: PropTypes.string, + yAxisKey: PropTypes.string, + }), ).isRequired, sx: PropTypes.oneOfType([ PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), diff --git a/packages/x-charts/src/ChartsTooltip/DefaultChartsItemTooltipContent.tsx b/packages/x-charts/src/ChartsTooltip/DefaultChartsItemTooltipContent.tsx index 12e8ffbfe3b81..4e936f1097401 100644 --- a/packages/x-charts/src/ChartsTooltip/DefaultChartsItemTooltipContent.tsx +++ b/packages/x-charts/src/ChartsTooltip/DefaultChartsItemTooltipContent.tsx @@ -78,94 +78,7 @@ DefaultChartsItemTooltipContent.propTypes = { */ series: PropTypes.shape({ color: PropTypes.string, - data: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.number), - PropTypes.shape({ - '__@iterator@33399': PropTypes.func.isRequired, - '__@unscopables@36265': PropTypes.shape({ - '__@iterator@33399': PropTypes.bool, - '__@unscopables@36265': PropTypes.bool, - at: PropTypes.bool, - concat: PropTypes.bool, - copyWithin: PropTypes.bool, - entries: PropTypes.bool, - every: PropTypes.bool, - fill: PropTypes.bool, - filter: PropTypes.bool, - find: PropTypes.bool, - findIndex: PropTypes.bool, - findLast: PropTypes.bool, - findLastIndex: PropTypes.bool, - flat: PropTypes.bool, - flatMap: PropTypes.bool, - forEach: PropTypes.bool, - includes: PropTypes.bool, - indexOf: PropTypes.bool, - join: PropTypes.bool, - keys: PropTypes.bool, - lastIndexOf: PropTypes.bool, - length: PropTypes.bool, - map: PropTypes.bool, - pop: PropTypes.bool, - push: PropTypes.bool, - reduce: PropTypes.bool, - reduceRight: PropTypes.bool, - reverse: PropTypes.bool, - shift: PropTypes.bool, - slice: PropTypes.bool, - some: PropTypes.bool, - sort: PropTypes.bool, - splice: PropTypes.bool, - toLocaleString: PropTypes.bool, - toReversed: PropTypes.bool, - toSorted: PropTypes.bool, - toSpliced: PropTypes.bool, - toString: PropTypes.bool, - unshift: PropTypes.bool, - values: PropTypes.bool, - with: PropTypes.bool, - }).isRequired, - at: PropTypes.func.isRequired, - concat: PropTypes.func.isRequired, - copyWithin: PropTypes.func.isRequired, - entries: PropTypes.func.isRequired, - every: PropTypes.func.isRequired, - fill: PropTypes.func.isRequired, - filter: PropTypes.func.isRequired, - find: PropTypes.func.isRequired, - findIndex: PropTypes.func.isRequired, - findLast: PropTypes.func.isRequired, - findLastIndex: PropTypes.func.isRequired, - flat: PropTypes.func.isRequired, - flatMap: PropTypes.func.isRequired, - forEach: PropTypes.func.isRequired, - includes: PropTypes.func.isRequired, - indexOf: PropTypes.func.isRequired, - join: PropTypes.func.isRequired, - keys: PropTypes.func.isRequired, - lastIndexOf: PropTypes.func.isRequired, - length: PropTypes.number.isRequired, - map: PropTypes.func.isRequired, - pop: PropTypes.func.isRequired, - push: PropTypes.func.isRequired, - reduce: PropTypes.func.isRequired, - reduceRight: PropTypes.func.isRequired, - reverse: PropTypes.func.isRequired, - shift: PropTypes.func.isRequired, - slice: PropTypes.func.isRequired, - some: PropTypes.func.isRequired, - sort: PropTypes.func.isRequired, - splice: PropTypes.func.isRequired, - toLocaleString: PropTypes.func.isRequired, - toReversed: PropTypes.func.isRequired, - toSorted: PropTypes.func.isRequired, - toSpliced: PropTypes.func.isRequired, - toString: PropTypes.func.isRequired, - unshift: PropTypes.func.isRequired, - values: PropTypes.func.isRequired, - with: PropTypes.func.isRequired, - }), - ]).isRequired, + data: PropTypes.arrayOf(PropTypes.number).isRequired, highlightScope: PropTypes.shape({ faded: PropTypes.oneOf(['global', 'none', 'series']), highlighted: PropTypes.oneOf(['item', 'none', 'series']), diff --git a/packages/x-charts/src/ScatterChart/Scatter.tsx b/packages/x-charts/src/ScatterChart/Scatter.tsx index fd3db8d2e8852..20611154388ad 100644 --- a/packages/x-charts/src/ScatterChart/Scatter.tsx +++ b/packages/x-charts/src/ScatterChart/Scatter.tsx @@ -113,7 +113,7 @@ Scatter.propTypes = { color: PropTypes.string.isRequired, markerSize: PropTypes.number.isRequired, series: PropTypes.shape({ - color: PropTypes.string, + color: PropTypes.string.isRequired, data: PropTypes.arrayOf( PropTypes.shape({ id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired, diff --git a/packages/x-charts/src/models/seriesType/config.ts b/packages/x-charts/src/models/seriesType/config.ts index 74361857fe8e2..9342d52b51ed4 100644 --- a/packages/x-charts/src/models/seriesType/config.ts +++ b/packages/x-charts/src/models/seriesType/config.ts @@ -42,8 +42,11 @@ export type ChartSeries = ChartsSeriesConfig[T] exten ? ChartsSeriesConfig[T]['seriesInput'] & { stackedData: [number, number][] } : ChartsSeriesConfig[T]['seriesInput']; -export type ChartSeriesDefaultized = ChartsSeriesConfig[T]['series'] & - ChartSeries; +export type ChartSeriesDefaultized = ChartsSeriesConfig[T] extends { + canBeStacked: true; +} + ? ChartsSeriesConfig[T]['series'] & { stackedData: [number, number][] } + : ChartsSeriesConfig[T]['series']; export type ChartItemIdentifier = ChartsSeriesConfig[T]['itemIdentifier']; diff --git a/packages/x-charts/src/models/seriesType/scatter.ts b/packages/x-charts/src/models/seriesType/scatter.ts index 2170a34e410f8..5c5ac30601ec5 100644 --- a/packages/x-charts/src/models/seriesType/scatter.ts +++ b/packages/x-charts/src/models/seriesType/scatter.ts @@ -21,4 +21,4 @@ export type ScatterItemIdentifier = { }; export interface DefaultizedScatterSeriesType - extends DefaultizedProps {} + extends DefaultizedProps {} From 2e9e436b8cd3d95a8ef36804a4f4553ce57cea5c Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Thu, 30 Nov 2023 21:37:28 +0100 Subject: [PATCH 4/5] [docs] Polish Next.js header description Match the Next.js docs. --- docs/data/introduction/licensing/licensing.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/data/introduction/licensing/licensing.md b/docs/data/introduction/licensing/licensing.md index 6467b5a666dc9..92dae49647a40 100644 --- a/docs/data/introduction/licensing/licensing.md +++ b/docs/data/introduction/licensing/licensing.md @@ -201,7 +201,7 @@ export default function RootLayout(props: { children: React.ReactNode }) { } ``` -### Next.js pages +### Next.js Pages Router When using Next.js pages, a great place to call `setLicenseKey` is in [`_app.js`](https://nextjs.org/docs/pages/building-your-application/routing/custom-app). From 66cf56c9b03b749d6030050667825f695dc933f2 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Thu, 30 Nov 2023 22:05:24 +0100 Subject: [PATCH 5/5] [docs] Fix dead anchor link (#11265) --- docs/.link-check-errors.txt | 1 - .../migration/migration-pickers-lab/migration-pickers-lab.md | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/docs/.link-check-errors.txt b/docs/.link-check-errors.txt index 83c6048265201..65180aa5191e7 100644 --- a/docs/.link-check-errors.txt +++ b/docs/.link-check-errors.txt @@ -16,5 +16,4 @@ Broken links found by `yarn docs:link-check` that exist: - https://mui.com/x/api/data-grid/data-grid/#props - https://mui.com/x/api/data-grid/data-grid/#slots - https://mui.com/x/api/date-pickers/date-picker/#slots -- https://mui.com/x/introduction/licensing/#license-key-installation - https://mui.com/x/react-charts/#getting-started diff --git a/docs/data/migration/migration-pickers-lab/migration-pickers-lab.md b/docs/data/migration/migration-pickers-lab/migration-pickers-lab.md index f058725b85121..dd52b25988ec3 100644 --- a/docs/data/migration/migration-pickers-lab/migration-pickers-lab.md +++ b/docs/data/migration/migration-pickers-lab/migration-pickers-lab.md @@ -73,7 +73,7 @@ import { LicenseInfo } from '@mui/x-license-pro'; LicenseInfo.setLicenseKey('YOUR_LICENSE_KEY'); ``` -Learn more on [the Licensing page](/x/introduction/licensing/#license-key-installation). +Learn more on [the Licensing page](/x/introduction/licensing/#license-key). ### 2. Run the code mod