[charts] Generate API documentation for pro components

docs/data/charts-component-api-pages.ts

@@ -21,6 +21,11 @@ const apiPages: MuiPage[] = [
     pathname: '/x/api/charts/bar-chart',
     title: 'BarChart',
   },
+  {
+    pathname: '/x/api/charts/bar-chart-pro',
+    title: 'BarChartPro',
+    plan: 'pro',
+  },
   {
     pathname: '/x/api/charts/bar-element',
     title: 'BarElement',
@@ -37,6 +42,11 @@ const apiPages: MuiPage[] = [
     pathname: '/x/api/charts/chart-container',
     title: 'ChartContainer',
   },
+  {
+    pathname: '/x/api/charts/chart-container-pro',
+    title: 'ChartContainerPro',
+    plan: 'pro',
+  },
   {
     pathname: '/x/api/charts/charts-axis',
     title: 'ChartsAxis',
@@ -101,6 +111,11 @@ const apiPages: MuiPage[] = [
     pathname: '/x/api/charts/default-charts-legend',
     title: 'DefaultChartsLegend',
   },
+  {
+    pathname: '/x/api/charts/default-heatmap-tooltip',
+    title: 'DefaultHeatmapTooltip',
+    plan: 'pro',
+  },
   {
     pathname: '/x/api/charts/gauge',
     title: 'Gauge',
@@ -109,10 +124,30 @@ const apiPages: MuiPage[] = [
     pathname: '/x/api/charts/gauge-container',
     title: 'GaugeContainer',
   },
+  {
+    pathname: '/x/api/charts/heatmap',
+    title: 'Heatmap',
+    plan: 'pro',
+  },
+  {
+    pathname: '/x/api/charts/heatmap-item',
+    title: 'HeatmapItem',
+    plan: 'pro',
+  },
+  {
+    pathname: '/x/api/charts/heatmap-plot',
+    title: 'HeatmapPlot',
+    plan: 'pro',
+  },
   {
     pathname: '/x/api/charts/line-chart',
     title: 'LineChart',
   },
+  {
+    pathname: '/x/api/charts/line-chart-pro',
+    title: 'LineChartPro',
+    plan: 'pro',
+  },
   {
     pathname: '/x/api/charts/line-element',
     title: 'LineElement',
@@ -165,6 +200,11 @@ const apiPages: MuiPage[] = [
     pathname: '/x/api/charts/responsive-chart-container',
     title: 'ResponsiveChartContainer',
   },
+  {
+    pathname: '/x/api/charts/responsive-chart-container-pro',
+    title: 'ResponsiveChartContainerPro',
+    plan: 'pro',
+  },
   {
     pathname: '/x/api/charts/scatter',
     title: 'Scatter',
@@ -173,6 +213,11 @@ const apiPages: MuiPage[] = [
     pathname: '/x/api/charts/scatter-chart',
     title: 'ScatterChart',
   },
+  {
+    pathname: '/x/api/charts/scatter-chart-pro',
+    title: 'ScatterChartPro',
+    plan: 'pro',
+  },
   {
     pathname: '/x/api/charts/scatter-plot',
     title: 'ScatterPlot',

docs/data/charts/bars/bars.md

@@ -1,7 +1,7 @@
 ---
 title: React Bar chart
 productId: x-charts
-components: BarChart, BarElement, BarPlot, ChartsGrid, ChartsOnAxisClickHandler, BarLabel
+components: BarChart, BarChartPro, BarElement, BarPlot, ChartsGrid, ChartsOnAxisClickHandler, BarLabel
 ---
 
 # Charts - Bars

docs/data/charts/composition/composition.md

@@ -2,7 +2,7 @@
 title: React Chart composition
 productId: x-charts
 githubLabel: 'component: charts'
-components: ChartContainer, ResponsiveChartContainer, ChartsGrid
+components: ChartContainer, ChartContainerPro, ResponsiveChartContainer, ResponsiveChartContainerPro, ChartsGrid
 packageName: '@mui/x-charts'
 ---
 

docs/data/charts/heatmap/BasicHeatmap.js

@@ -1,13 +1,13 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
 import '@mui/x-charts-pro/typeOverloads';
-import { UnstableHeatmap } from '@mui/x-charts-pro/Heatmap';
+import { Heatmap } from '@mui/x-charts-pro/Heatmap';
 import { data } from './dumbData';
 
 export default function BasicHeatmap() {
   return (
     <Box sx={{ width: '100%', maxWidth: 400 }}>
-      <UnstableHeatmap
+      <Heatmap
         xAxis={[{ data: [1, 2, 3, 4] }]}
         yAxis={[{ data: ['A', 'B', 'C', 'D', 'E'] }]}
         series={[{ data }]}

docs/data/charts/heatmap/BasicHeatmap.tsx

@@ -1,13 +1,13 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
 import '@mui/x-charts-pro/typeOverloads';
-import { UnstableHeatmap } from '@mui/x-charts-pro/Heatmap';
+import { Heatmap } from '@mui/x-charts-pro/Heatmap';
 import { data } from './dumbData';
 
 export default function BasicHeatmap() {
   return (
     <Box sx={{ width: '100%', maxWidth: 400 }}>
-      <UnstableHeatmap
+      <Heatmap
         xAxis={[{ data: [1, 2, 3, 4] }]}
         yAxis={[{ data: ['A', 'B', 'C', 'D', 'E'] }]}
         series={[{ data }]}

docs/data/charts/heatmap/BasicHeatmap.tsx.preview

@@ -1,4 +1,4 @@
-<UnstableHeatmap
+<Heatmap
   xAxis={[{ data: [1, 2, 3, 4] }]}
   yAxis={[{ data: ['A', 'B', 'C', 'D', 'E'] }]}
   series={[{ data }]}

docs/data/charts/heatmap/ColorConfig.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { interpolateBlues } from 'd3-scale-chromatic';
 import '@mui/x-charts-pro/typeOverloads';
-import { UnstableHeatmap } from '@mui/x-charts-pro/Heatmap';
+import { Heatmap } from '@mui/x-charts-pro/Heatmap';
 
 const dataset = [
   {
@@ -102,7 +102,7 @@ const yData = dataset.flatMap(({ month }) => month);
 
 export default function ColorConfig() {
   return (
-    <UnstableHeatmap
+    <Heatmap
       height={400}
       width={600}
       xAxis={[{ data: xData }]}

docs/data/charts/heatmap/ColorConfig.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { interpolateBlues } from 'd3-scale-chromatic';
 import '@mui/x-charts-pro/typeOverloads';
-import { UnstableHeatmap } from '@mui/x-charts-pro/Heatmap';
+import { Heatmap } from '@mui/x-charts-pro/Heatmap';
 import { HeatmapValueType } from '@mui/x-charts-pro/models';
 
 const dataset = [
@@ -105,7 +105,7 @@ const yData = dataset.flatMap(({ month }) => month);
 
 export default function ColorConfig() {
   return (
-    <UnstableHeatmap
+    <Heatmap
       height={400}
       width={600}
       xAxis={[{ data: xData }]}

docs/data/charts/heatmap/CustomItem.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
 import '@mui/x-charts-pro/typeOverloads';
-import { UnstableHeatmap } from '@mui/x-charts-pro/Heatmap';
+import { Heatmap } from '@mui/x-charts-pro/Heatmap';
 import { data } from './dumbData';
 
 function CustomCell(props) {
@@ -33,7 +33,7 @@ function CustomCell(props) {
 export default function CustomItem() {
   return (
     <Box sx={{ width: '100%', maxWidth: 400 }}>
-      <UnstableHeatmap
+      <Heatmap
         slots={{ cell: CustomCell }}
         xAxis={[{ data: [1, 2, 3, 4] }]}
         yAxis={[{ data: ['A', 'B', 'C', 'D', 'E'] }]}

docs/data/charts/heatmap/CustomItem.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
 import '@mui/x-charts-pro/typeOverloads';
-import { UnstableHeatmap } from '@mui/x-charts-pro/Heatmap';
+import { Heatmap } from '@mui/x-charts-pro/Heatmap';
 import { data } from './dumbData';
 
 function CustomCell(props: any) {
@@ -33,7 +33,7 @@ function CustomCell(props: any) {
 export default function CustomItem() {
   return (
     <Box sx={{ width: '100%', maxWidth: 400 }}>
-      <UnstableHeatmap
+      <Heatmap
         slots={{ cell: CustomCell }}
         xAxis={[{ data: [1, 2, 3, 4] }]}
         yAxis={[{ data: ['A', 'B', 'C', 'D', 'E'] }]}

docs/data/charts/heatmap/CustomItem.tsx.preview

@@ -1,4 +1,4 @@
-<UnstableHeatmap
+<Heatmap
   slots={{ cell: CustomCell }}
   xAxis={[{ data: [1, 2, 3, 4] }]}
   yAxis={[{ data: ['A', 'B', 'C', 'D', 'E'] }]}

docs/data/charts/heatmap/HighlightClasses.js

@@ -1,13 +1,13 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
 import '@mui/x-charts-pro/typeOverloads';
-import { UnstableHeatmap, heatmapClasses } from '@mui/x-charts-pro/Heatmap';
+import { Heatmap, heatmapClasses } from '@mui/x-charts-pro/Heatmap';
 import { data } from './dumbData';
 
 export default function HighlightClasses() {
   return (
     <Box sx={{ width: '100%', maxWidth: 400 }}>
-      <UnstableHeatmap
+      <Heatmap
         sx={{
           [`.${heatmapClasses.cell}`]: {
             [`&.${heatmapClasses.highlighted}`]: {

docs/data/charts/heatmap/HighlightClasses.tsx

@@ -1,13 +1,13 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
 import '@mui/x-charts-pro/typeOverloads';
-import { UnstableHeatmap, heatmapClasses } from '@mui/x-charts-pro/Heatmap';
+import { Heatmap, heatmapClasses } from '@mui/x-charts-pro/Heatmap';
 import { data } from './dumbData';
 
 export default function HighlightClasses() {
   return (
     <Box sx={{ width: '100%', maxWidth: 400 }}>
-      <UnstableHeatmap
+      <Heatmap
         sx={{
           [`.${heatmapClasses.cell}`]: {
             [`&.${heatmapClasses.highlighted}`]: {

docs/data/charts/heatmap/HighlightHeatmap.js

@@ -1,13 +1,13 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
 import '@mui/x-charts-pro/typeOverloads';
-import { UnstableHeatmap } from '@mui/x-charts-pro/Heatmap';
+import { Heatmap } from '@mui/x-charts-pro/Heatmap';
 import { data } from './dumbData';
 
 export default function HighlightHeatmap() {
   return (
     <Box sx={{ width: '100%', maxWidth: 400 }}>
-      <UnstableHeatmap
+      <Heatmap
         xAxis={[{ data: [1, 2, 3, 4] }]}
         yAxis={[{ data: ['A', 'B', 'C', 'D', 'E'] }]}
         series={[{ data, highlightScope: { highlight: 'item', fade: 'global' } }]}

docs/data/charts/heatmap/HighlightHeatmap.tsx

@@ -1,13 +1,13 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
 import '@mui/x-charts-pro/typeOverloads';
-import { UnstableHeatmap } from '@mui/x-charts-pro/Heatmap';
+import { Heatmap } from '@mui/x-charts-pro/Heatmap';
 import { data } from './dumbData';
 
 export default function HighlightHeatmap() {
   return (
     <Box sx={{ width: '100%', maxWidth: 400 }}>
-      <UnstableHeatmap
+      <Heatmap
         xAxis={[{ data: [1, 2, 3, 4] }]}
         yAxis={[{ data: ['A', 'B', 'C', 'D', 'E'] }]}
         series={[{ data, highlightScope: { highlight: 'item', fade: 'global' } }]}

docs/data/charts/heatmap/HighlightHeatmap.tsx.preview

@@ -1,4 +1,4 @@
-<UnstableHeatmap
+<Heatmap
   xAxis={[{ data: [1, 2, 3, 4] }]}
   yAxis={[{ data: ['A', 'B', 'C', 'D', 'E'] }]}
   series={[{ data, highlightScope: { highlight: 'item', fade: 'global' } }]}

docs/data/charts/heatmap/heatmap.md

@@ -1,6 +1,7 @@
 ---
 title: React Heatmap chart
 productId: x-charts
+components: Heatmap, HeatmapPlot, HeatmapItem, DefaultHeatmapTooltip
 ---
 
 # Charts - Heatmap [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')🚧

docs/data/charts/lines/lines.md

@@ -1,7 +1,7 @@
 ---
 title: React Line chart
 productId: x-charts
-components: LineChart, LineElement, LineHighlightElement, LineHighlightPlot, LinePlot, MarkElement, MarkPlot, AreaElement, AreaPlot, AnimatedLine, AnimatedArea, ChartsOnAxisClickHandler, ChartsGrid
+components: LineChart, LineChartPro, LineElement, LineHighlightElement, LineHighlightPlot, LinePlot, MarkElement, MarkPlot, AreaElement, AreaPlot, AnimatedLine, AnimatedArea, ChartsOnAxisClickHandler, ChartsGrid
 ---
 
 # Charts - Lines

docs/data/charts/scatter/scatter.md

@@ -1,7 +1,7 @@
 ---
 title: React Scatter chart
 productId: x-charts
-components: Scatter, ScatterChart, ScatterPlot, ChartsVoronoiHandler, ChartsGrid
+components: ScatterChart, ScatterChartPro, ScatterPlot, ChartsVoronoiHandler, ChartsGrid
 ---
 
 # Charts - Scatter

docs/data/charts/zoom-and-pan/zoom-and-pan.md

@@ -1,6 +1,7 @@
 ---
 title: Zoom & Pan
 productId: x-charts
+components: ScatterChartPro, BarChartPro, LineChartPro
 ---
 
 # Zoom & Pan [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan') 🚧

docs/pages/x/api/charts/animated-area.json

@@ -3,7 +3,8 @@
   "name": "AnimatedArea",
   "imports": [
     "import { AnimatedArea } from '@mui/x-charts/LineChart';",
-    "import { AnimatedArea } from '@mui/x-charts';"
+    "import { AnimatedArea } from '@mui/x-charts';",
+    "import { AnimatedArea } from '@mui/x-charts-pro';"
   ],
   "classes": [],
   "muiName": "MuiAnimatedArea",

docs/pages/x/api/charts/animated-line.json

@@ -3,7 +3,8 @@
   "name": "AnimatedLine",
   "imports": [
     "import { AnimatedLine } from '@mui/x-charts/LineChart';",
-    "import { AnimatedLine } from '@mui/x-charts';"
+    "import { AnimatedLine } from '@mui/x-charts';",
+    "import { AnimatedLine } from '@mui/x-charts-pro';"
   ],
   "classes": [],
   "muiName": "MuiAnimatedLine",

docs/pages/x/api/charts/area-element.json

@@ -11,7 +11,8 @@
   "name": "AreaElement",
   "imports": [
     "import { AreaElement } from '@mui/x-charts/LineChart';",
-    "import { AreaElement } from '@mui/x-charts';"
+    "import { AreaElement } from '@mui/x-charts';",
+    "import { AreaElement } from '@mui/x-charts-pro';"
   ],
   "slots": [
     {

docs/pages/x/api/charts/area-plot.json

@@ -18,7 +18,8 @@
   "name": "AreaPlot",
   "imports": [
     "import { AreaPlot } from '@mui/x-charts/LineChart';",
-    "import { AreaPlot } from '@mui/x-charts';"
+    "import { AreaPlot } from '@mui/x-charts';",
+    "import { AreaPlot } from '@mui/x-charts-pro';"
   ],
   "slots": [
     {

docs/pages/x/api/charts/bar-chart-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 './bar-chart-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/bar-chart-pro',
+    false,
+    /\.\/bar-chart-pro.*.json$/,
+  );
+  const descriptions = mapApiPageTranslations(req);
+
+  return {
+    descriptions,
+    pageContent: jsonPageContent,
+  };
+};