mui · alexfauquette · Aug 5, 2024 · Jul 16, 2024 · Jul 16, 2024 · Jul 16, 2024
diff --git a/docs/data/charts-component-api-pages.ts b/docs/data/charts-component-api-pages.ts
@@ -133,11 +133,6 @@ const apiPages: MuiPage[] = [
     title: 'Heatmap',
     plan: 'pro',
   },
-  {
-    pathname: '/x/api/charts/heatmap-item',
-    title: 'HeatmapItem',
-    plan: 'pro',
-  },
   {
     pathname: '/x/api/charts/heatmap-plot',
     title: 'HeatmapPlot',

diff --git a/docs/data/charts/getting-started/getting-started.md b/docs/data/charts/getting-started/getting-started.md
@@ -10,24 +10,11 @@ packageName: '@mui/x-charts'
 
 ## Installation
 
-Run one of the following commands to add the MUI X Charts to your project:
+Using your favorite package manager, install `@mui/x-charts-pro` for the commercial version, or `@mui/x-charts` for the free community version.
 
 <!-- #default-branch-switch -->
 
-<codeblock storageKey="package-manager">
-```bash npm
-npm install @mui/x-charts
-```
-
-```bash pnpm
-pnpm add @mui/x-charts
-```
-
-```bash yarn
-yarn add @mui/x-charts
-```
-
-</codeblock>
+{{"component": "modules/components/ChartsInstallationInstructions.js"}}
 
 The Charts package has a peer dependency on `@mui/material`.
 If you are not already using it in your project, you can install it with:

diff --git a/docs/data/charts/heatmap/BasicHeatmap.js b/docs/data/charts/heatmap/BasicHeatmap.js
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
-import '@mui/x-charts-pro/typeOverloads';
 import { Heatmap } from '@mui/x-charts-pro/Heatmap';
 import { data } from './dumbData';
 

diff --git a/docs/data/charts/heatmap/BasicHeatmap.tsx b/docs/data/charts/heatmap/BasicHeatmap.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
-import '@mui/x-charts-pro/typeOverloads';
 import { Heatmap } from '@mui/x-charts-pro/Heatmap';
 import { data } from './dumbData';
 

diff --git a/docs/data/charts/heatmap/ColorConfig.js b/docs/data/charts/heatmap/ColorConfig.js
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { interpolateBlues } from 'd3-scale-chromatic';
-import '@mui/x-charts-pro/typeOverloads';
 import { Heatmap } from '@mui/x-charts-pro/Heatmap';
 
 const dataset = [

diff --git a/docs/data/charts/heatmap/ColorConfig.tsx b/docs/data/charts/heatmap/ColorConfig.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { interpolateBlues } from 'd3-scale-chromatic';
-import '@mui/x-charts-pro/typeOverloads';
 import { Heatmap } from '@mui/x-charts-pro/Heatmap';
 import { HeatmapValueType } from '@mui/x-charts-pro/models';
 

diff --git a/docs/data/charts/heatmap/CustomItem.js b/docs/data/charts/heatmap/CustomItem.js
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
-import '@mui/x-charts-pro/typeOverloads';
 import { Heatmap } from '@mui/x-charts-pro/Heatmap';
 import { data } from './dumbData';
 

diff --git a/docs/data/charts/heatmap/CustomItem.tsx b/docs/data/charts/heatmap/CustomItem.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
-import '@mui/x-charts-pro/typeOverloads';
 import { Heatmap } from '@mui/x-charts-pro/Heatmap';
 import { data } from './dumbData';
 

diff --git a/docs/data/charts/heatmap/HighlightClasses.js b/docs/data/charts/heatmap/HighlightClasses.js
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
-import '@mui/x-charts-pro/typeOverloads';
 import { Heatmap, heatmapClasses } from '@mui/x-charts-pro/Heatmap';
 import { data } from './dumbData';
 

diff --git a/docs/data/charts/heatmap/HighlightClasses.tsx b/docs/data/charts/heatmap/HighlightClasses.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
-import '@mui/x-charts-pro/typeOverloads';
 import { Heatmap, heatmapClasses } from '@mui/x-charts-pro/Heatmap';
 import { data } from './dumbData';
 

diff --git a/docs/data/charts/heatmap/HighlightHeatmap.js b/docs/data/charts/heatmap/HighlightHeatmap.js
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
-import '@mui/x-charts-pro/typeOverloads';
 import { Heatmap } from '@mui/x-charts-pro/Heatmap';
 import { data } from './dumbData';
 

diff --git a/docs/data/charts/heatmap/HighlightHeatmap.tsx b/docs/data/charts/heatmap/HighlightHeatmap.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
-import '@mui/x-charts-pro/typeOverloads';
 import { Heatmap } from '@mui/x-charts-pro/Heatmap';
 import { data } from './dumbData';
 

diff --git a/docs/data/charts/heatmap/heatmap.md b/docs/data/charts/heatmap/heatmap.md
@@ -1,20 +1,13 @@
 ---
 title: React Heatmap chart
 productId: x-charts
-components: Heatmap, HeatmapPlot, HeatmapItem, DefaultHeatmapTooltip
+components: Heatmap, HeatmapPlot, DefaultHeatmapTooltip
 ---
 
-# Charts - Heatmap [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan') 🚧
+# Charts - Heatmap [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')
 
 <p class="description">Heatmap charts visually represents data with color variations to highlight patterns and trends across two dimensions.</p>
 
-:::warning
-The Heatmap Chart component is part of the pro package which is **not yet** released.
-
-You can test demos.
-Don't hesitate to open issues to give feedback.
-:::
-
 ## Basics
 
 The Heatmap requires two axes with `data` properties.

diff --git a/docs/data/charts/zoom-and-pan/zoom-and-pan.md b/docs/data/charts/zoom-and-pan/zoom-and-pan.md
@@ -4,17 +4,10 @@ productId: x-charts
 components: ScatterChartPro, BarChartPro, LineChartPro
 ---
 
-# Zoom & Pan [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan') 🚧
+# Zoom & Pan [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')
 
 <p class="description">Enables zooming and panning on specific charts or axis.</p>
 
-:::warning
-The zoom feature is part of the pro package which is **not yet** released.
-
-You can test demos.
-Don't hesitate to open issues to give feedback.
-:::
-
 Zooming is possible on the **Pro**[<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan') versions of the charts: `<LineChartPro />`, `<BarChartPro />`, `<ScatterChartPro />`.
 
 ## Basic usage

diff --git a/docs/data/introduction/licensing/licensing.md b/docs/data/introduction/licensing/licensing.md
@@ -44,6 +44,7 @@ These are the Pro npm packages:
 - [`@mui/x-data-grid-pro`](https://www.npmjs.com/package/@mui/x-data-grid-pro)
 - [`@mui/x-date-pickers-pro`](https://www.npmjs.com/package/@mui/x-date-pickers-pro)
 - [`@mui/x-tree-view-pro`](https://www.npmjs.com/package/@mui/x-tree-view-pro)
+- [`@mui/x-charts-pro`](https://www.npmjs.com/package/@mui/x-charts-pro)
 
 ### Premium plan <span class="plan-premium"></span>
 

diff --git a/docs/data/pages.ts b/docs/data/pages.ts
@@ -428,7 +428,7 @@ const pages: MuiPage[] = [
             pathname: '/x/react-charts/heatmap',
             title: 'Heatmap',
             plan: 'pro',
-            planned: true,
+            unstable: true,
           },
           {
             pathname: '/x/react-charts/common-features',
@@ -446,7 +446,7 @@ const pages: MuiPage[] = [
                 pathname: '/x/react-charts/zoom-and-pan',
                 title: 'Zoom & Pan',
                 plan: 'pro',
-                planned: true,
+                unstable: true,
               },
             ],
           },

diff --git a/docs/pages/x/api/charts/bar-chart-pro.json b/docs/pages/x/api/charts/bar-chart-pro.json
@@ -118,6 +118,6 @@
   "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>",
+  "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
 }
diff --git a/docs/pages/x/api/charts/default-heatmap-tooltip.json b/docs/pages/x/api/charts/default-heatmap-tooltip.json
@@ -81,6 +81,6 @@
   "muiName": "MuiDefaultHeatmapTooltip",
   "filename": "/packages/x-charts-pro/src/Heatmap/DefaultHeatmapTooltip.tsx",
   "inheritance": null,
-  "demos": "<ul><li><a href=\"/x/react-charts/heatmap/\">Charts - Heatmap <a href=\"/x/introduction/licensing/#pro-plan\" title=\"Pro plan\"><span class=\"plan-pro\"></span></a> 🚧</a></li></ul>",
+  "demos": "<ul><li><a href=\"/x/react-charts/heatmap/\">Charts - Heatmap <a href=\"/x/introduction/licensing/#pro-plan\" title=\"Pro plan\"><span class=\"plan-pro\"></span></a></a></li></ul>",
   "cssComponent": false
 }
diff --git a/docs/pages/x/api/charts/heatmap-item.js b/docs/pages/x/api/charts/heatmap-item.js
diff --git a/docs/pages/x/api/charts/heatmap-item.json b/docs/pages/x/api/charts/heatmap-item.json
diff --git a/docs/pages/x/api/charts/heatmap-plot.json b/docs/pages/x/api/charts/heatmap-plot.json
@@ -16,6 +16,6 @@
   "muiName": "MuiHeatmapPlot",
   "filename": "/packages/x-charts-pro/src/Heatmap/HeatmapPlot.tsx",
   "inheritance": null,
-  "demos": "<ul><li><a href=\"/x/react-charts/heatmap/\">Charts - Heatmap <a href=\"/x/introduction/licensing/#pro-plan\" title=\"Pro plan\"><span class=\"plan-pro\"></span></a> 🚧</a></li></ul>",
+  "demos": "<ul><li><a href=\"/x/react-charts/heatmap/\">Charts - Heatmap <a href=\"/x/introduction/licensing/#pro-plan\" title=\"Pro plan\"><span class=\"plan-pro\"></span></a></a></li></ul>",
   "cssComponent": false
 }
diff --git a/docs/pages/x/api/charts/heatmap.json b/docs/pages/x/api/charts/heatmap.json
@@ -95,63 +95,13 @@
     "import { Heatmap } from '@mui/x-charts-pro/Heatmap';",
     "import { Heatmap } from '@mui/x-charts-pro';"
   ],
-  "slots": [
-    {
-      "name": "axisLabel",
-      "description": "Custom component for axis label.",
-      "default": "ChartsText",
-      "class": null
-    },
-    {
-      "name": "axisLine",
-      "description": "Custom component for the axis main line.",
-      "default": "'line'",
-      "class": null
-    },
-    {
-      "name": "axisTick",
-      "description": "Custom component for the axis tick.",
-      "default": "'line'",
-      "class": null
-    },
-    {
-      "name": "axisTickLabel",
-      "description": "Custom component for tick label.",
-      "default": "ChartsText",
-      "class": null
-    },
-    {
-      "name": "cell",
-      "description": "The component that renders the heatmap cell.",
-      "default": "HeatmapCell",
-      "class": "MuiHeatmap-cell"
-    },
-    {
-      "name": "itemContent",
-      "description": "Custom component for displaying tooltip content when triggered by item event.",
-      "default": "DefaultChartsItemTooltipContent",
-      "class": null
-    },
-    {
-      "name": "loadingOverlay",
-      "description": "Overlay component rendered when the chart is in a loading state.",
-      "default": "ChartsLoadingOverlay",
-      "class": null
-    },
+  "classes": [
     {
-      "name": "noDataOverlay",
-      "description": "Overlay component rendered when the chart has no data to display.",
-      "default": "ChartsNoDataOverlay",
-      "class": null
+      "key": "cell",
+      "className": "MuiHeatmap-cell",
+      "description": "Styles applied to the heatmap cells.",
+      "isGlobal": false
     },
-    {
-      "name": "popper",
-      "description": "Custom component for the tooltip popper.",
-      "default": "ChartsTooltipRoot",
-      "class": null
-    }
-  ],
-  "classes": [
     {
       "key": "faded",
       "className": "MuiHeatmap-faded",
@@ -168,6 +118,6 @@
   "muiName": "MuiHeatmap",
   "filename": "/packages/x-charts-pro/src/Heatmap/Heatmap.tsx",
   "inheritance": null,
-  "demos": "<ul><li><a href=\"/x/react-charts/heatmap/\">Charts - Heatmap <a href=\"/x/introduction/licensing/#pro-plan\" title=\"Pro plan\"><span class=\"plan-pro\"></span></a> 🚧</a></li></ul>",
+  "demos": "<ul><li><a href=\"/x/react-charts/heatmap/\">Charts - Heatmap <a href=\"/x/introduction/licensing/#pro-plan\" title=\"Pro plan\"><span class=\"plan-pro\"></span></a></a></li></ul>",
   "cssComponent": false
 }
diff --git a/docs/pages/x/api/charts/line-chart-pro.json b/docs/pages/x/api/charts/line-chart-pro.json
@@ -111,6 +111,6 @@
   "muiName": "MuiLineChartPro",
   "filename": "/packages/x-charts-pro/src/LineChartPro/LineChartPro.tsx",
   "inheritance": null,
-  "demos": "<ul><li><a href=\"/x/react-charts/lines/\">Charts - Lines</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>",
+  "demos": "<ul><li><a href=\"/x/react-charts/lines/\">Charts - Lines</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
 }
diff --git a/docs/pages/x/api/charts/scatter-chart-pro.json b/docs/pages/x/api/charts/scatter-chart-pro.json
@@ -127,6 +127,6 @@
   "muiName": "MuiScatterChartPro",
   "filename": "/packages/x-charts-pro/src/ScatterChartPro/ScatterChartPro.tsx",
   "inheritance": null,
-  "demos": "<ul><li><a href=\"/x/react-charts/scatter/\">Charts - Scatter</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>",
+  "demos": "<ul><li><a href=\"/x/react-charts/scatter/\">Charts - Scatter</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
 }
diff --git a/docs/pages/x/react-charts/heatmap.js b/docs/pages/x/react-charts/heatmap.js
@@ -3,5 +3,5 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import * as pageProps from 'docsx/data/charts/heatmap/heatmap.md?muiMarkdown';
 
 export default function Page() {
-  return <MarkdownDocs {...pageProps} />;
+  return <MarkdownDocs {...pageProps} disableAd />;
 }
diff --git a/docs/pages/x/react-charts/zoom-and-pan.js b/docs/pages/x/react-charts/zoom-and-pan.js
@@ -3,5 +3,5 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import * as pageProps from 'docsx/data/charts/zoom-and-pan/zoom-and-pan.md?muiMarkdown';
 
 export default function Page() {
-  return <MarkdownDocs {...pageProps} />;
+  return <MarkdownDocs {...pageProps} disableAd />;
 }
diff --git a/docs/src/modules/components/ChartComponentsGrid.js b/docs/src/modules/components/ChartComponentsGrid.js
@@ -65,7 +65,6 @@ function getComponents() {
       srcLight: '/static/x/component-illustrations/heatmap-light.png',
       srcDark: '/static/x/component-illustrations/heatmap-dark.png',
       href: '/x/react-charts/heatmap/',
-      planned: true,
       pro: true,
     },
     {

diff --git a/docs/src/modules/components/ChartsInstallationInstructions.js b/docs/src/modules/components/ChartsInstallationInstructions.js
@@ -0,0 +1,13 @@
+import * as React from 'react';
+import InstallationInstructions from './InstallationInstructions';
+
+// #default-branch-switch
+
+const packages = {
+  Community: '@mui/x-charts',
+  Pro: '@mui/x-charts-pro',
+};
+
+export default function DataGridInstallationInstructions() {
+  return <InstallationInstructions packages={packages} />;
+}
diff --git a/docs/translations/api-docs/charts/heatmap-item/heatmap-item.json b/docs/translations/api-docs/charts/heatmap-item/heatmap-item.json