[charts-pro] Fix pro components watermark

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';

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';

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'
 ---
 

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 = [

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';

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';

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',

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,

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 <ApiPage descriptions={descriptions} pageContent={pageContent} />;
+}
+
+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,
+  };
+};

docs/pages/x/api/charts/chart-data-provider-pro.json

@@ -0,0 +1,78 @@
+{
+  "props": {
+    "colors": {
+      "type": { "name": "union", "description": "Array&lt;string&gt;<br>&#124;&nbsp;func" },
+      "default": "blueberryTwilightPalette"
+    },
+    "dataset": { "type": { "name": "arrayOf", "description": "Array&lt;object&gt;" } },
+    "height": { "type": { "name": "number" } },
+    "highlightedItem": {
+      "type": {
+        "name": "shape",
+        "description": "{ dataIndex?: number, seriesId?: number<br>&#124;&nbsp;string }"
+      }
+    },
+    "id": { "type": { "name": "string" } },
+    "initialZoom": {
+      "type": {
+        "name": "arrayOf",
+        "description": "Array&lt;{ axisId: number<br>&#124;&nbsp;string, end: number, start: number }&gt;"
+      }
+    },
+    "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<ZoomData>) => void",
+        "describedArgs": ["zoomData"]
+      }
+    },
+    "series": { "type": { "name": "arrayOf", "description": "Array&lt;object&gt;" } },
+    "skipAnimation": { "type": { "name": "bool" } },
+    "width": { "type": { "name": "number" } },
+    "xAxis": {
+      "type": {
+        "name": "arrayOf",
+        "description": "Array&lt;{ classes?: object, colorMap?: { colors: Array&lt;string&gt;, type: 'ordinal', unknownColor?: string, values?: Array&lt;Date<br>&#124;&nbsp;number<br>&#124;&nbsp;string&gt; }<br>&#124;&nbsp;{ color: Array&lt;string&gt;<br>&#124;&nbsp;func, max?: Date<br>&#124;&nbsp;number, min?: Date<br>&#124;&nbsp;number, type: 'continuous' }<br>&#124;&nbsp;{ colors: Array&lt;string&gt;, thresholds: Array&lt;Date<br>&#124;&nbsp;number&gt;, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'<br>&#124;&nbsp;'strict'<br>&#124;&nbsp;func, fill?: string, hideTooltip?: bool, id?: number<br>&#124;&nbsp;string, label?: string, labelStyle?: object, max?: Date<br>&#124;&nbsp;number, min?: Date<br>&#124;&nbsp;number, position?: 'bottom'<br>&#124;&nbsp;'top', reverse?: bool, scaleType?: 'band'<br>&#124;&nbsp;'linear'<br>&#124;&nbsp;'log'<br>&#124;&nbsp;'point'<br>&#124;&nbsp;'pow'<br>&#124;&nbsp;'sqrt'<br>&#124;&nbsp;'time'<br>&#124;&nbsp;'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array&lt;func<br>&#124;&nbsp;object<br>&#124;&nbsp;bool&gt;<br>&#124;&nbsp;func<br>&#124;&nbsp;object, tickInterval?: 'auto'<br>&#124;&nbsp;array<br>&#124;&nbsp;func, tickLabelInterval?: 'auto'<br>&#124;&nbsp;func, tickLabelPlacement?: 'middle'<br>&#124;&nbsp;'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'<br>&#124;&nbsp;'extremities'<br>&#124;&nbsp;'middle'<br>&#124;&nbsp;'start', tickSize?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard'<br>&#124;&nbsp;'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, step?: number }<br>&#124;&nbsp;bool }&gt;"
+      }
+    },
+    "yAxis": {
+      "type": {
+        "name": "arrayOf",
+        "description": "Array&lt;{ classes?: object, colorMap?: { colors: Array&lt;string&gt;, type: 'ordinal', unknownColor?: string, values?: Array&lt;Date<br>&#124;&nbsp;number<br>&#124;&nbsp;string&gt; }<br>&#124;&nbsp;{ color: Array&lt;string&gt;<br>&#124;&nbsp;func, max?: Date<br>&#124;&nbsp;number, min?: Date<br>&#124;&nbsp;number, type: 'continuous' }<br>&#124;&nbsp;{ colors: Array&lt;string&gt;, thresholds: Array&lt;Date<br>&#124;&nbsp;number&gt;, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'<br>&#124;&nbsp;'strict'<br>&#124;&nbsp;func, fill?: string, hideTooltip?: bool, id?: number<br>&#124;&nbsp;string, label?: string, labelStyle?: object, max?: Date<br>&#124;&nbsp;number, min?: Date<br>&#124;&nbsp;number, position?: 'left'<br>&#124;&nbsp;'right', reverse?: bool, scaleType?: 'band'<br>&#124;&nbsp;'linear'<br>&#124;&nbsp;'log'<br>&#124;&nbsp;'point'<br>&#124;&nbsp;'pow'<br>&#124;&nbsp;'sqrt'<br>&#124;&nbsp;'time'<br>&#124;&nbsp;'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array&lt;func<br>&#124;&nbsp;object<br>&#124;&nbsp;bool&gt;<br>&#124;&nbsp;func<br>&#124;&nbsp;object, tickInterval?: 'auto'<br>&#124;&nbsp;array<br>&#124;&nbsp;func, tickLabelInterval?: 'auto'<br>&#124;&nbsp;func, tickLabelPlacement?: 'middle'<br>&#124;&nbsp;'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'<br>&#124;&nbsp;'extremities'<br>&#124;&nbsp;'middle'<br>&#124;&nbsp;'start', tickSize?: number, valueFormatter?: func, zoom?: { filterMode?: 'discard'<br>&#124;&nbsp;'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, step?: number }<br>&#124;&nbsp;bool }&gt;"
+      }
+    },
+    "zAxis": {
+      "type": {
+        "name": "arrayOf",
+        "description": "Array&lt;{ colorMap?: { colors: Array&lt;string&gt;, type: 'ordinal', unknownColor?: string, values?: Array&lt;Date<br>&#124;&nbsp;number<br>&#124;&nbsp;string&gt; }<br>&#124;&nbsp;{ color: Array&lt;string&gt;<br>&#124;&nbsp;func, max?: Date<br>&#124;&nbsp;number, min?: Date<br>&#124;&nbsp;number, type: 'continuous' }<br>&#124;&nbsp;{ colors: Array&lt;string&gt;, thresholds: Array&lt;Date<br>&#124;&nbsp;number&gt;, type: 'piecewise' }, data?: array, dataKey?: string, id?: string, max?: number, min?: number }&gt;"
+      }
+    }
+  },
+  "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": "<ul><li><a href=\"/x/react-charts/composition/\">Chart composition</a></li></ul>",
+  "cssComponent": false
+}

docs/pages/x/api/charts/chart-data-provider.json

@@ -12,7 +12,7 @@
   },
   "name": "ChartDataProvider",
   "imports": [
-    "import { ChartDataProvider } from '@mui/x-charts/context';",
+    "import { ChartDataProvider } from '@mui/x-charts/ChartDataProvider';",
     "import { ChartDataProvider } from '@mui/x-charts';",
     "import { ChartDataProvider } from '@mui/x-charts-pro';"
   ],
@@ -21,7 +21,7 @@
   "themeDefaultProps": false,
   "muiName": "MuiChartDataProvider",
   "forwardsRefTo": "SVGSVGElement",
-  "filename": "/packages/x-charts/src/context/ChartDataProvider/ChartDataProvider.tsx",
+  "filename": "/packages/x-charts/src/ChartDataProvider/ChartDataProvider.tsx",
   "inheritance": null,
   "demos": "<ul><li><a href=\"/x/react-charts/composition/\">Chart composition</a></li></ul>",
   "cssComponent": false

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,

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,

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,

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 `<svg>` 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 `<svg>` 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": {

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 <code>dataKey</code> 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&#39;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&#39;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: <code>top</code>, <code>bottom</code>, <code>left</code>, and <code>right</code>."
+    },
+    "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 <code>true</code>, animations are skipped. If unset or <code>false</code>, the animations respects the user&#39;s <code>prefers-reduced-motion</code> 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 <a href='/x/api/charts/axis-config/'>AxisConfig</a> objects."
+    },
+    "yAxis": {
+      "description": "The configuration of the y-axes. If not provided, a default axis config is used. An array of <a href='/x/api/charts/axis-config/'>AxisConfig</a> objects."
+    },
+    "zAxis": { "description": "The configuration of the z-axes." }
+  },
+  "classDescriptions": {}
+}

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('<BarChartPro /> - 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(<BarChartPro series={[]} width={100} height={100} />)).toErrorDev([
+      'MUI X: Missing license key.',
+    ]);
+
+    expect(await screen.findAllByText('MUI X Missing license key')).not.to.equal(null);
+  });
+});

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 (
-    <ChartDataProvider
-      {...chartDataProviderProProps}
-      apiRef={apiRef}
-      initialZoom={initialZoom}
-      onZoomChange={onZoomChange}
-    >
+    <ChartDataProviderPro {...chartDataProviderProProps}>
       <ChartsWrapper {...chartsWrapperProps}>
         {!props.hideLegend && <ChartsLegend {...legendProps} />}
         <ChartsSurface {...chartsSurfaceProps}>
@@ -130,7 +125,7 @@ const BarChartPro = React.forwardRef(function BarChartPro(
           {children}
         </ChartsSurface>
       </ChartsWrapper>
-    </ChartDataProvider>
+    </ChartDataProviderPro>
   );
 });