[charts] Add Heatmap

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

@@ -45,10 +45,6 @@ const apiPages: MuiPage[] = [
     pathname: '/x/api/charts/charts-axis-highlight',
     title: 'ChartsAxisHighlight',
   },
-  {
-    pathname: '/x/api/charts/charts-axis-tooltip-content',
-    title: 'ChartsAxisTooltipContent',
-  },
   {
     pathname: '/x/api/charts/charts-clip-path',
     title: 'ChartsClipPath',
@@ -57,10 +53,6 @@ const apiPages: MuiPage[] = [
     pathname: '/x/api/charts/charts-grid',
     title: 'ChartsGrid',
   },
-  {
-    pathname: '/x/api/charts/charts-item-tooltip-content',
-    title: 'ChartsItemTooltipContent',
-  },
   {
     pathname: '/x/api/charts/charts-legend',
     title: 'ChartsLegend',

docs/data/charts/heatmap/BasicHeatmap.js

@@ -0,0 +1,19 @@
+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 { data } from './dumbData';
+
+export default function BasicHeatmap() {
+  return (
+    <Box sx={{ width: '100%', maxWidth: 400 }}>
+      <UnstableHeatmap
+        xAxis={[{ data: [1, 2, 3, 4] }]}
+        yAxis={[{ data: ['A', 'B', 'C', 'D', 'E'] }]}
+        series={[{ data }]}
+        margin={{ top: 5, right: 5, left: 20 }}
+        height={300}
+      />
+    </Box>
+  );
+}

docs/data/charts/heatmap/BasicHeatmap.tsx

@@ -0,0 +1,19 @@
+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 { data } from './dumbData';
+
+export default function BasicHeatmap() {
+  return (
+    <Box sx={{ width: '100%', maxWidth: 400 }}>
+      <UnstableHeatmap
+        xAxis={[{ data: [1, 2, 3, 4] }]}
+        yAxis={[{ data: ['A', 'B', 'C', 'D', 'E'] }]}
+        series={[{ data }]}
+        margin={{ top: 5, right: 5, left: 20 }}
+        height={300}
+      />
+    </Box>
+  );
+}

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

@@ -0,0 +1,7 @@
+<UnstableHeatmap
+  xAxis={[{ data: [1, 2, 3, 4] }]}
+  yAxis={[{ data: ['A', 'B', 'C', 'D', 'E'] }]}
+  series={[{ data }]}
+  margin={{ top: 5, right: 5, left: 20 }}
+  height={300}
+/>

docs/data/charts/heatmap/ColorConfig.js

@@ -0,0 +1,123 @@
+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';
+
+const dataset = [
+  {
+    london: 59,
+    paris: 57,
+    newYork: 86,
+    seoul: 21,
+    month: 'January',
+  },
+  {
+    london: 50,
+    paris: 52,
+    newYork: 78,
+    seoul: 28,
+    month: 'February',
+  },
+  {
+    london: 47,
+    paris: 53,
+    newYork: 106,
+    seoul: 41,
+    month: 'March',
+  },
+  {
+    london: 54,
+    paris: 56,
+    newYork: 92,
+    seoul: 73,
+    month: 'April',
+  },
+  {
+    london: 57,
+    paris: 69,
+    newYork: 92,
+    seoul: 99,
+    month: 'May',
+  },
+  {
+    london: 60,
+    paris: 63,
+    newYork: 103,
+    seoul: 144,
+    month: 'June',
+  },
+  {
+    london: 59,
+    paris: 60,
+    newYork: 105,
+    seoul: 319,
+    month: 'July',
+  },
+  {
+    london: 65,
+    paris: 60,
+    newYork: 106,
+    seoul: 249,
+    month: 'August',
+  },
+  {
+    london: 51,
+    paris: 51,
+    newYork: 95,
+    seoul: 131,
+    month: 'September',
+  },
+  {
+    london: 60,
+    paris: 65,
+    newYork: 97,
+    seoul: 55,
+    month: 'October',
+  },
+  {
+    london: 67,
+    paris: 64,
+    newYork: 76,
+    seoul: 48,
+    month: 'November',
+  },
+  {
+    london: 61,
+    paris: 70,
+    newYork: 103,
+    seoul: 25,
+    month: 'December',
+  },
+];
+
+const data = dataset.flatMap(({ london, paris, newYork, seoul }, monthIndex) => [
+  [0, monthIndex, london],
+  [1, monthIndex, paris],
+  [2, monthIndex, newYork],
+  [3, monthIndex, seoul],
+]);
+
+const xData = ['London', 'Paris', 'NewYork', 'Seoul'];
+const yData = dataset.flatMap(({ month }) => month);
+
+export default function ColorConfig() {
+  return (
+    <UnstableHeatmap
+      height={400}
+      width={600}
+      xAxis={[{ data: xData }]}
+      yAxis={[{ data: yData }]}
+      series={[{ data }]}
+      zAxis={[
+        {
+          min: 20,
+          max: 300,
+          colorMap: {
+            type: 'continuous',
+            color: interpolateBlues,
+          },
+        },
+      ]}
+    />
+  );
+}

docs/data/charts/heatmap/ColorConfig.tsx

@@ -0,0 +1,126 @@
+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 { HeatmapValueType } from '@mui/x-charts-pro/models';
+
+const dataset = [
+  {
+    london: 59,
+    paris: 57,
+    newYork: 86,
+    seoul: 21,
+    month: 'January',
+  },
+  {
+    london: 50,
+    paris: 52,
+    newYork: 78,
+    seoul: 28,
+    month: 'February',
+  },
+  {
+    london: 47,
+    paris: 53,
+    newYork: 106,
+    seoul: 41,
+    month: 'March',
+  },
+  {
+    london: 54,
+    paris: 56,
+    newYork: 92,
+    seoul: 73,
+    month: 'April',
+  },
+  {
+    london: 57,
+    paris: 69,
+    newYork: 92,
+    seoul: 99,
+    month: 'May',
+  },
+  {
+    london: 60,
+    paris: 63,
+    newYork: 103,
+    seoul: 144,
+    month: 'June',
+  },
+  {
+    london: 59,
+    paris: 60,
+    newYork: 105,
+    seoul: 319,
+    month: 'July',
+  },
+  {
+    london: 65,
+    paris: 60,
+    newYork: 106,
+    seoul: 249,
+    month: 'August',
+  },
+  {
+    london: 51,
+    paris: 51,
+    newYork: 95,
+    seoul: 131,
+    month: 'September',
+  },
+  {
+    london: 60,
+    paris: 65,
+    newYork: 97,
+    seoul: 55,
+    month: 'October',
+  },
+  {
+    london: 67,
+    paris: 64,
+    newYork: 76,
+    seoul: 48,
+    month: 'November',
+  },
+  {
+    london: 61,
+    paris: 70,
+    newYork: 103,
+    seoul: 25,
+    month: 'December',
+  },
+];
+
+const data = dataset.flatMap(
+  ({ london, paris, newYork, seoul }, monthIndex): HeatmapValueType[] => [
+    [0, monthIndex, london],
+    [1, monthIndex, paris],
+    [2, monthIndex, newYork],
+    [3, monthIndex, seoul],
+  ],
+);
+
+const xData = ['London', 'Paris', 'NewYork', 'Seoul'];
+const yData = dataset.flatMap(({ month }) => month);
+
+export default function ColorConfig() {
+  return (
+    <UnstableHeatmap
+      height={400}
+      width={600}
+      xAxis={[{ data: xData }]}
+      yAxis={[{ data: yData }]}
+      series={[{ data }]}
+      zAxis={[
+        {
+          min: 20,
+          max: 300,
+          colorMap: {
+            type: 'continuous',
+            color: interpolateBlues,
+          },
+        },
+      ]}
+    />
+  );
+}

docs/data/charts/heatmap/CustomItem.js

@@ -0,0 +1,46 @@
+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 { data } from './dumbData';
+
+function CustomCell(props) {
+  const { x, y, width, height, ownerState, ...other } = props;
+
+  return (
+    <React.Fragment>
+      <rect
+        {...other}
+        x={x + 4}
+        y={y + 4}
+        width={width - 2 * 4}
+        height={height - 2 * 4}
+        fill={ownerState.color}
+        clipPath={ownerState.isHighlighted ? undefined : 'inset(0px round 10px)'}
+      />
+      <text
+        x={x + width / 2}
+        y={y + height / 2}
+        textAnchor="middle"
+        dominantBaseline="middle"
+        pointerEvents="none"
+      >
+        {ownerState.value}
+      </text>
+    </React.Fragment>
+  );
+}
+export default function CustomItem() {
+  return (
+    <Box sx={{ width: '100%', maxWidth: 400 }}>
+      <UnstableHeatmap
+        slots={{ cell: CustomCell }}
+        xAxis={[{ data: [1, 2, 3, 4] }]}
+        yAxis={[{ data: ['A', 'B', 'C', 'D', 'E'] }]}
+        series={[{ data, highlightScope: { highlight: 'item' } }]}
+        margin={{ top: 5, right: 5, left: 20 }}
+        height={300}
+      />
+    </Box>
+  );
+}