[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/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,
+  };
+};

docs/pages/x/api/charts/bar-chart-pro.json

@@ -0,0 +1,123 @@
+{
+  "props": {
+    "series": {
+      "type": { "name": "arrayOf", "description": "Array<object>" },
+      "required": true
+    },
+    "axisHighlight": {
+      "type": {
+        "name": "shape",
+        "description": "{ x?: 'band'<br>&#124;&nbsp;'line'<br>&#124;&nbsp;'none', y?: 'band'<br>&#124;&nbsp;'line'<br>&#124;&nbsp;'none' }"
+      },
+      "seeMoreLink": {
+        "url": "https://mui.com/x/react-charts/tooltip/#highlights",
+        "text": "highlight docs"
+      }
+    },
+    "barLabel": { "type": { "name": "union", "description": "'value'<br>&#124;&nbsp;func" } },
+    "borderRadius": { "type": { "name": "number" } },
+    "bottomAxis": {
+      "type": { "name": "union", "description": "object<br>&#124;&nbsp;string" },
+      "default": "xAxisIds[0] The id of the first provided axis"
+    },
+    "colors": {
+      "type": { "name": "union", "description": "Array&lt;string&gt;<br>&#124;&nbsp;func" },
+      "default": "blueberryTwilightPalette"
+    },
+    "dataset": { "type": { "name": "arrayOf", "description": "Array&lt;object&gt;" } },
+    "disableAxisListener": { "type": { "name": "bool" }, "default": "false" },
+    "grid": {
+      "type": { "name": "shape", "description": "{ horizontal?: bool, vertical?: bool }" }
+    },
+    "height": { "type": { "name": "number" } },
+    "highlightedItem": {
+      "type": {
+        "name": "shape",
+        "description": "{ dataIndex?: number, seriesId?: number<br>&#124;&nbsp;string }"
+      }
+    },
+    "layout": {
+      "type": { "name": "enum", "description": "'horizontal'<br>&#124;&nbsp;'vertical'" },
+      "default": "'vertical'"
+    },
+    "leftAxis": {
+      "type": { "name": "union", "description": "object<br>&#124;&nbsp;string" },
+      "default": "yAxisIds[0] The id of the first provided axis"
+    },
+    "loading": { "type": { "name": "bool" }, "default": "false" },
+    "margin": {
+      "type": {
+        "name": "shape",
+        "description": "{ bottom?: number, left?: number, right?: number, top?: number }"
+      },
+      "default": "object Depends on the charts type."
+    },
+    "onAxisClick": {
+      "type": { "name": "func" },
+      "signature": {
+        "type": "function(event: MouseEvent, data: null | AxisData) => void",
+        "describedArgs": ["event", "data"]
+      }
+    },
+    "onHighlightChange": {
+      "type": { "name": "func" },
+      "signature": {
+        "type": "function(highlightedItem: HighlightItemData | null) => void",
+        "describedArgs": ["highlightedItem"]
+      }
+    },
+    "onItemClick": {
+      "type": { "name": "func" },
+      "signature": {
+        "type": "function(event: React.MouseEvent<SVGElement, MouseEvent>, barItemIdentifier: BarItemIdentifier) => void",
+        "describedArgs": ["event", "barItemIdentifier"]
+      }
+    },
+    "rightAxis": {
+      "type": { "name": "union", "description": "object<br>&#124;&nbsp;string" },
+      "default": "null"
+    },
+    "skipAnimation": { "type": { "name": "bool" }, "default": "false" },
+    "slotProps": { "type": { "name": "object" }, "default": "{}" },
+    "slots": {
+      "type": { "name": "object" },
+      "default": "{}",
+      "additionalInfo": { "slotsApi": true }
+    },
+    "tooltip": {
+      "type": {
+        "name": "shape",
+        "description": "{ axisContent?: elementType, classes?: object, itemContent?: elementType, slotProps?: object, slots?: object, trigger?: 'axis'<br>&#124;&nbsp;'item'<br>&#124;&nbsp;'none' }"
+      },
+      "seeMoreLink": { "url": "https://mui.com/x/react-charts/tooltip/", "text": "tooltip docs" }
+    },
+    "topAxis": {
+      "type": { "name": "union", "description": "object<br>&#124;&nbsp;string" },
+      "default": "null"
+    },
+    "width": { "type": { "name": "number" } },
+    "xAxis": {
+      "type": {
+        "name": "arrayOf",
+        "description": "Array&lt;{ axisId?: number<br>&#124;&nbsp;string, 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, fill?: string, hideTooltip?: bool, id?: number<br>&#124;&nbsp;string, label?: string, labelFontSize?: number, 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, tickFontSize?: number, 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?: { maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, step?: number }<br>&#124;&nbsp;bool }&gt;"
+      }
+    },
+    "yAxis": {
+      "type": {
+        "name": "arrayOf",
+        "description": "Array&lt;{ axisId?: number<br>&#124;&nbsp;string, 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, fill?: string, hideTooltip?: bool, id?: number<br>&#124;&nbsp;string, label?: string, labelFontSize?: number, 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, tickFontSize?: number, 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?: { maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, step?: number }<br>&#124;&nbsp;bool }&gt;"
+      }
+    }
+  },
+  "name": "BarChartPro",
+  "imports": [
+    "import { BarChartPro } from '@mui/x-charts-pro/BarChartPro';",
+    "import { BarChartPro } from '@mui/x-charts-pro';"
+  ],
+  "classes": [],
+  "muiName": "MuiBarChartPro",
+  "filename": "/packages/x-charts-pro/src/BarChartPro/BarChartPro.tsx",
+  "inheritance": null,
+  "demos": "<ul><li><a href=\"/x/react-charts/bars/\">Charts - Bars</a></li>\n<li><a href=\"/x/react-charts/zoom-and-pan/\">Zoom &amp; Pan <a href=\"/x/introduction/licensing/#pro-plan\" title=\"Pro plan\"><span class=\"plan-pro\"></span></a> 🚧</a></li></ul>",
+  "cssComponent": false
+}

docs/pages/x/api/charts/bar-chart.json

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

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

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

docs/pages/x/api/charts/bar-label.json

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

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

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

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