Merge commit '587f7c5757e0d66222ea1f3d37c923a0814e9d86' into axis-siz…

…e-poc

README.md

@@ -40,10 +40,10 @@ Get started in the [MUI X documentation](https://mui.com/x/introduction/).
 
 ### Installation
 
-- [Data Grid installation](https://mui.com/x/react-data-grid/getting-started/#installation)
-- [Date and Time Pickers installation](https://mui.com/x/react-date-pickers/getting-started/#installation)
-- [Charts installation](https://mui.com/x/react-charts/getting-started/#installation)
-- [Tree View installation](https://mui.com/x/react-tree-view/getting-started/#installation)
+- [Data Grid installation](https://mui.com/x/react-data-grid/quickstart/#installation)
+- [Date and Time Pickers installation](https://mui.com/x/react-date-pickers/quickstart/#installation)
+- [Charts installation](https://mui.com/x/react-charts/quickstart/#installation)
+- [Tree View installation](https://mui.com/x/react-tree-view/quickstart/#installation)
 
 ## Licensing
 

docs/.link-check-errors.txt

@@ -1,5 +1,12 @@
 Broken links found by `docs:link-check` that exist:
 
+- https://mui.com/x/react-charts/getting-started/
 - https://mui.com/x/react-data-grid/#premium-plan
+- https://mui.com/x/react-data-grid/getting-started/
 - https://mui.com/x/react-data-grid/getting-started/#feature-comparison
 - https://mui.com/x/react-date-pickers/fields/#accessible-dom-structure
+- https://mui.com/x/react-date-pickers/getting-started/
+- https://mui.com/x/react-date-pickers/quickstart/#date-and-time-types
+- https://mui.com/x/react-tree-view/#rich-tree-view
+- https://mui.com/x/react-tree-view/#simple-tree-view
+- https://mui.com/x/react-tree-view/getting-started/

docs/data/charts/components/SeriesDemo.js

@@ -0,0 +1,104 @@
+import * as React from 'react';
+import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis';
+import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis';
+import { LinePlot } from '@mui/x-charts/LineChart';
+import { useLineSeries, useXAxis, useXScale, useYScale } from '@mui/x-charts/hooks';
+import { ChartsSurface } from '@mui/x-charts/ChartsSurface';
+import { ChartDataProvider } from '@mui/x-charts/ChartDataProvider';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+
+function ExtremaLabels() {
+  const lineSeries = useLineSeries();
+
+  if (!lineSeries) {
+    return null;
+  }
+
+  return (
+    <React.Fragment>
+      {lineSeries.seriesOrder.map((seriesId) => (
+        <SingleSeriesExtremaLabels series={lineSeries.series[seriesId]} />
+      ))}
+    </React.Fragment>
+  );
+}
+
+function SingleSeriesExtremaLabels({ series }) {
+  const xAxis = useXAxis('x');
+
+  const min = series.data.reduce(
+    (acc, value, index) =>
+      value != null && value < acc.value ? { index, value } : acc,
+    { index: -1, value: Infinity },
+  );
+  const max = series.data.reduce(
+    (acc, value, index) =>
+      value != null && value > acc.value ? { index, value } : acc,
+    { index: -1, value: -Infinity },
+  );
+
+  return (
+    <React.Fragment>
+      <PointLabel
+        x={xAxis.data?.[min.index]}
+        y={min.value}
+        placement="below"
+        color={series.color}
+      />
+      <PointLabel
+        x={xAxis.data?.[max.index]}
+        y={max.value}
+        placement="above"
+        color={series.color}
+      />
+    </React.Fragment>
+  );
+}
+
+function PointLabel({ x, y, placement, color }) {
+  const xAxisScale = useXScale();
+  const yAxisScale = useYScale();
+
+  const left = xAxisScale(x) ?? 0;
+  const top = (yAxisScale(y) ?? 0) + (placement === 'below' ? 20 : -20);
+
+  return (
+    <Box
+      sx={{
+        position: 'absolute',
+        left,
+        top,
+        translate: '-50% -50%',
+        border: `2px solid ${color}`,
+        borderRadius: 1,
+        px: 1,
+      }}
+    >
+      <Typography variant="caption">{y}</Typography>
+    </Box>
+  );
+}
+
+export default function SeriesDemo() {
+  return (
+    <Box sx={{ position: 'relative', width: '100%' }}>
+      <ChartDataProvider
+        xAxis={[{ id: 'x', data: [1, 2, 3, 5, 8, 10] }]}
+        series={[
+          { id: 'a', type: 'line', data: [4, 6, 4, 9, 3, 5] },
+          { id: 'b', type: 'line', data: [3, 7, 8, 2, 4, 9] },
+        ]}
+        yAxis={[{ min: 0, max: 10 }]}
+        height={300}
+      >
+        <ChartsSurface>
+          <LinePlot />
+          <ChartsXAxis />
+          <ChartsYAxis />
+        </ChartsSurface>
+        <ExtremaLabels />
+      </ChartDataProvider>
+    </Box>
+  );
+}

docs/data/charts/components/SeriesDemo.tsx

@@ -0,0 +1,119 @@
+import * as React from 'react';
+import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis';
+import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis';
+import { LinePlot } from '@mui/x-charts/LineChart';
+import { useLineSeries, useXAxis, useXScale, useYScale } from '@mui/x-charts/hooks';
+import { ChartsSurface } from '@mui/x-charts/ChartsSurface';
+import { ChartDataProvider } from '@mui/x-charts/ChartDataProvider';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import { DefaultizedLineSeriesType } from '@mui/x-charts/models';
+
+function ExtremaLabels() {
+  const lineSeries = useLineSeries();
+
+  if (!lineSeries) {
+    return null;
+  }
+
+  return (
+    <React.Fragment>
+      {lineSeries.seriesOrder.map((seriesId) => (
+        <SingleSeriesExtremaLabels series={lineSeries.series[seriesId]} />
+      ))}
+    </React.Fragment>
+  );
+}
+
+function SingleSeriesExtremaLabels({
+  series,
+}: {
+  series: DefaultizedLineSeriesType;
+}) {
+  const xAxis = useXAxis('x');
+
+  const min = series.data.reduce(
+    (acc, value, index) =>
+      value != null && value < acc.value ? { index, value } : acc,
+    { index: -1, value: Infinity },
+  );
+  const max = series.data.reduce(
+    (acc, value, index) =>
+      value != null && value > acc.value ? { index, value } : acc,
+    { index: -1, value: -Infinity },
+  );
+
+  return (
+    <React.Fragment>
+      <PointLabel
+        x={xAxis.data?.[min.index]}
+        y={min.value}
+        placement="below"
+        color={series.color}
+      />
+      <PointLabel
+        x={xAxis.data?.[max.index]}
+        y={max.value}
+        placement="above"
+        color={series.color}
+      />
+    </React.Fragment>
+  );
+}
+
+function PointLabel({
+  x,
+  y,
+  placement,
+  color,
+}: {
+  x: number;
+  y: number;
+  placement: 'above' | 'below';
+  color: string;
+}) {
+  const xAxisScale = useXScale();
+  const yAxisScale = useYScale();
+
+  const left = xAxisScale(x) ?? 0;
+  const top = (yAxisScale(y) ?? 0) + (placement === 'below' ? 20 : -20);
+
+  return (
+    <Box
+      sx={{
+        position: 'absolute',
+        left,
+        top,
+        translate: '-50% -50%',
+        border: `2px solid ${color}`,
+        borderRadius: 1,
+        px: 1,
+      }}
+    >
+      <Typography variant="caption">{y}</Typography>
+    </Box>
+  );
+}
+
+export default function SeriesDemo() {
+  return (
+    <Box sx={{ position: 'relative', width: '100%' }}>
+      <ChartDataProvider
+        xAxis={[{ id: 'x', data: [1, 2, 3, 5, 8, 10] }]}
+        series={[
+          { id: 'a', type: 'line', data: [4, 6, 4, 9, 3, 5] },
+          { id: 'b', type: 'line', data: [3, 7, 8, 2, 4, 9] },
+        ]}
+        yAxis={[{ min: 0, max: 10 }]}
+        height={300}
+      >
+        <ChartsSurface>
+          <LinePlot />
+          <ChartsXAxis />
+          <ChartsYAxis />
+        </ChartsSurface>
+        <ExtremaLabels />
+      </ChartDataProvider>
+    </Box>
+  );
+}

docs/data/charts/components/SeriesDemo.tsx.preview

@@ -0,0 +1,16 @@
+<ChartDataProvider
+  xAxis={[{ id: 'x', data: [1, 2, 3, 5, 8, 10] }]}
+  series={[
+    { id: 'a', type: 'line', data: [4, 6, 4, 9, 3, 5] },
+    { id: 'b', type: 'line', data: [3, 7, 8, 2, 4, 9] },
+  ]}
+  yAxis={[{ min: 0, max: 10 }]}
+  height={300}
+>
+  <ChartsSurface>
+    <LinePlot />
+    <ChartsXAxis />
+    <ChartsYAxis />
+  </ChartsSurface>
+  <ExtremaLabels />
+</ChartDataProvider>

docs/data/charts/components/components.md

@@ -77,6 +77,16 @@ By using `invert`, the value associated with the current mouse coordinate `y` ca
 
 {{"demo": "ScaleDemo.js"}}
 
+### Series
+
+Series information is accessible through the `useSeries` hook for all series types, and `useXxxSeries` hook for a specific series type.
+These hooks return the order of the series and their configuration, including data points, color, among others.
+
+You can leverage that information to create custom charts.
+For example, you can use `useLineSeries` to obtain the series of a line chart and display an indicator of the minimum and maximum values of each series:
+
+{{"demo": "SeriesDemo.js"}}
+
 ## HTML components
 
 With the introduction of the `ChartDataProvider` in v8, the chart data can be accessed from any component.

docs/data/charts/overview/overview.md

@@ -17,20 +17,19 @@ MUI X Charts is a library of production-ready components for rendering charts w
 It uses [D3.js](https://d3js.org/) for data manipulation and SVGs for rendering.
 
 The components provide a high level of customization, with beautiful defaults as well as extensive configuration props and flexible composition options.
-They also have access to all [MUI System](https://mui.com/system/getting-started/) tools such as theme overrides and the `sx` prop.
+Theming features are designed to be frictionless when integrating with Material UI and other MUI X components, but they can also stand on their own and be customized to meet the needs of any design system.
+
+The Charts package is **open-core**: The Community version is MIT-licensed and free forever, while more advanced features require a Pro commercial license.
+See [MUI X Licensing](/x/introduction/licensing/) for complete details.
 
 {{"demo": "ChartsOverviewDemo.js", "defaultCodeOpen": true}}
 
 ## All MUI X Charts
 
-{{"component": "modules/components/ChartComponentsGrid.js"}}
-
-## Using this documentation
+The MIT-licensed Community version of the Charts package covers the most common use cases for data visualization.
+The Pro plan, denoted by the blue cube icon (<span class="plan-pro"></span>) throughout the documentation, expands on the Community version to support more complex visualizations.
 
-Each Chart type has two accompanying documents:
-
-1. **Overview** – a general description of built-in features
-2. **Demo** – a collection of custom examples
+{{"component": "modules/components/ChartComponentsGrid.js"}}
 
 ## Supported features