@mui/x-charts-pro 7.0.0-alpha.0

package/Heatmap/Heatmap.js

@@ -0,0 +1,387 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { interpolateRgbBasis } from '@mui/x-charts-vendor/d3-interpolate';
+import useId from '@mui/utils/useId';
+import { ChartsAxis } from '@mui/x-charts/ChartsAxis';
+import { ChartsTooltip } from '@mui/x-charts/ChartsTooltip';
+import { ChartsClipPath } from '@mui/x-charts/ChartsClipPath';
+import { ChartsOnAxisClickHandler } from '@mui/x-charts/ChartsOnAxisClickHandler';
+import { ChartsOverlay } from '@mui/x-charts/ChartsOverlay';
+import { ResponsiveChartContainerPro } from '../ResponsiveChartContainerPro';
+import { HeatmapPlot } from './HeatmapPlot';
+import { plugin as heatmapPlugin } from './plugin';
+import { DefaultHeatmapTooltip } from './DefaultHeatmapTooltip';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// The GnBu: https://github.com/d3/d3-scale-chromatic/blob/main/src/sequential-multi/GnBu.js
+const defaultColorMap = interpolateRgbBasis(['#f7fcf0', '#e0f3db', '#ccebc5', '#a8ddb5', '#7bccc4', '#4eb3d3', '#2b8cbe', '#0868ac', '#084081']);
+const Heatmap = /*#__PURE__*/React.forwardRef(function Heatmap(props, ref) {
+  const {
+    xAxis,
+    yAxis,
+    zAxis,
+    series,
+    width,
+    height,
+    margin,
+    colors,
+    dataset,
+    sx,
+    tooltip,
+    topAxis,
+    leftAxis,
+    rightAxis,
+    bottomAxis,
+    onAxisClick,
+    children,
+    slots,
+    slotProps,
+    loading,
+    highlightedItem,
+    onHighlightChange
+  } = props;
+  const id = useId();
+  const clipPathId = `${id}-clip-path`;
+  const defaultizedXAxis = React.useMemo(() => xAxis.map(axis => _extends({
+    scaleType: 'band',
+    categoryGapRatio: 0
+  }, axis)), [xAxis]);
+  const defaultizedYAxis = React.useMemo(() => yAxis.map(axis => _extends({
+    scaleType: 'band',
+    categoryGapRatio: 0
+  }, axis)), [yAxis]);
+  const defaultizedZAxis = React.useMemo(() => zAxis ?? [{
+    colorMap: {
+      type: 'continuous',
+      min: 0,
+      max: 100,
+      color: defaultColorMap
+    }
+  }], [zAxis]);
+  return /*#__PURE__*/_jsxs(ResponsiveChartContainerPro, {
+    ref: ref,
+    plugins: [heatmapPlugin],
+    series: series.map(s => _extends({
+      type: 'heatmap'
+    }, s)),
+    width: width,
+    height: height,
+    margin: margin,
+    xAxis: defaultizedXAxis,
+    yAxis: defaultizedYAxis,
+    zAxis: defaultizedZAxis,
+    colors: colors,
+    dataset: dataset,
+    sx: sx,
+    disableAxisListener: true,
+    highlightedItem: highlightedItem,
+    onHighlightChange: onHighlightChange,
+    children: [onAxisClick && /*#__PURE__*/_jsx(ChartsOnAxisClickHandler, {
+      onAxisClick: onAxisClick
+    }), /*#__PURE__*/_jsxs("g", {
+      clipPath: `url(#${clipPathId})`,
+      children: [/*#__PURE__*/_jsx(HeatmapPlot, {
+        slots: slots,
+        slotProps: slotProps
+      }), /*#__PURE__*/_jsx(ChartsOverlay, {
+        loading: loading,
+        slots: slots,
+        slotProps: slotProps
+      })]
+    }), /*#__PURE__*/_jsx(ChartsAxis, {
+      topAxis: topAxis,
+      leftAxis: leftAxis,
+      rightAxis: rightAxis,
+      bottomAxis: bottomAxis,
+      slots: slots,
+      slotProps: slotProps
+    }), !loading && /*#__PURE__*/_jsx(ChartsTooltip, _extends({
+      trigger: "item"
+    }, tooltip, {
+      slots: _extends({
+        itemContent: DefaultHeatmapTooltip
+      }, slots),
+      slotProps: slotProps
+    })), /*#__PURE__*/_jsx(ChartsClipPath, {
+      id: clipPathId
+    }), children]
+  });
+});
+process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * Indicate which axis to display the bottom of the charts.
+   * Can be a string (the id of the axis) or an object `ChartsXAxisProps`.
+   * @default xAxisIds[0] The id of the first provided axis
+   */
+  bottomAxis: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
+  children: PropTypes.node,
+  className: PropTypes.string,
+  /**
+   * Color palette used to colorize multiple series.
+   * @default blueberryTwilightPalette
+   */
+  colors: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.func]),
+  /**
+   * An array of objects that can be used to populate series and axes data using their `dataKey` property.
+   */
+  dataset: PropTypes.arrayOf(PropTypes.object),
+  desc: PropTypes.string,
+  /**
+   * If `true`, the charts will not listen to the mouse move event.
+   * It might break interactive features, but will improve performance.
+   * @default false
+   */
+  disableAxisListener: PropTypes.bool,
+  /**
+   * The height of the chart in px. If not defined, it takes the height of the parent element.
+   */
+  height: PropTypes.number,
+  /**
+   * The item currently highlighted. Turns highlighting into a controlled prop.
+   */
+  highlightedItem: PropTypes.shape({
+    dataIndex: PropTypes.number,
+    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
+  }),
+  /**
+   * Indicate which axis to display the left of the charts.
+   * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
+   * @default yAxisIds[0] The id of the first provided axis
+   */
+  leftAxis: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
+  /**
+   * If `true`, a loading overlay is displayed.
+   * @default false
+   */
+  loading: PropTypes.bool,
+  /**
+   * The margin between the SVG and the drawing area.
+   * It'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: `top`, `bottom`, `left`, and `right`.
+   * @default object Depends on the charts type.
+   */
+  margin: PropTypes.shape({
+    bottom: PropTypes.number,
+    left: PropTypes.number,
+    right: PropTypes.number,
+    top: PropTypes.number
+  }),
+  /**
+   * The function called for onClick events.
+   * The second argument contains information about all line/bar elements at the current mouse position.
+   * @param {MouseEvent} event The mouse event recorded on the `<svg/>` element.
+   * @param {null | AxisData} data The data about the clicked axis and items associated with it.
+   */
+  onAxisClick: PropTypes.func,
+  /**
+   * The callback fired when the highlighted item changes.
+   *
+   * @param {HighlightItemData | null} highlightedItem  The newly highlighted item.
+   */
+  onHighlightChange: PropTypes.func,
+  /**
+   * Indicate which axis to display the right of the charts.
+   * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
+   * @default null
+   */
+  rightAxis: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
+  /**
+   * The series to display in the bar chart.
+   * An array of [[HeatmapSeriesType]] objects.
+   */
+  series: PropTypes.arrayOf(PropTypes.object).isRequired,
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: PropTypes.object,
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: PropTypes.object,
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  title: PropTypes.string,
+  /**
+   * The configuration of the tooltip.
+   * @see See {@link https://mui.com/x/react-charts/tooltip/ tooltip docs} for more details.
+   */
+  tooltip: PropTypes.shape({
+    axisContent: PropTypes.elementType,
+    classes: PropTypes.object,
+    itemContent: PropTypes.elementType,
+    slotProps: PropTypes.object,
+    slots: PropTypes.object,
+    trigger: PropTypes.oneOf(['axis', 'item', 'none'])
+  }),
+  /**
+   * Indicate which axis to display the top of the charts.
+   * Can be a string (the id of the axis) or an object `ChartsXAxisProps`.
+   * @default null
+   */
+  topAxis: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
+  viewBox: PropTypes.shape({
+    height: PropTypes.number,
+    width: PropTypes.number,
+    x: PropTypes.number,
+    y: PropTypes.number
+  }),
+  /**
+   * The width of the chart in px. If not defined, it takes the width of the parent element.
+   */
+  width: PropTypes.number,
+  /**
+   * The configuration of the x-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  xAxis: PropTypes.arrayOf(PropTypes.shape({
+    barGapRatio: PropTypes.number,
+    categoryGapRatio: PropTypes.number,
+    classes: PropTypes.object,
+    colorMap: PropTypes.oneOfType([PropTypes.shape({
+      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
+      type: PropTypes.oneOf(['ordinal']).isRequired,
+      unknownColor: PropTypes.string,
+      values: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]).isRequired)
+    }), PropTypes.shape({
+      color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
+      max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+      min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+      type: PropTypes.oneOf(['continuous']).isRequired
+    }), PropTypes.shape({
+      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
+      thresholds: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired).isRequired,
+      type: PropTypes.oneOf(['piecewise']).isRequired
+    })]),
+    data: PropTypes.array,
+    dataKey: PropTypes.string,
+    disableLine: PropTypes.bool,
+    disableTicks: PropTypes.bool,
+    fill: PropTypes.string,
+    hideTooltip: PropTypes.bool,
+    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    label: PropTypes.string,
+    labelFontSize: PropTypes.number,
+    labelStyle: PropTypes.object,
+    max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+    min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+    position: PropTypes.oneOf(['bottom', 'top']),
+    reverse: PropTypes.bool,
+    scaleType: PropTypes.oneOf(['band']),
+    slotProps: PropTypes.object,
+    slots: PropTypes.object,
+    stroke: PropTypes.string,
+    tickFontSize: PropTypes.number,
+    tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
+    tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),
+    tickLabelStyle: PropTypes.object,
+    tickMaxStep: PropTypes.number,
+    tickMinStep: PropTypes.number,
+    tickNumber: PropTypes.number,
+    tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
+    tickSize: PropTypes.number,
+    valueFormatter: PropTypes.func,
+    zoom: PropTypes.oneOfType([PropTypes.shape({
+      maxEnd: PropTypes.number,
+      maxSpan: PropTypes.number,
+      minSpan: PropTypes.number,
+      minStart: PropTypes.number,
+      panning: PropTypes.bool,
+      step: PropTypes.number
+    }), PropTypes.bool])
+  })).isRequired,
+  /**
+   * The configuration of the y-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  yAxis: PropTypes.arrayOf(PropTypes.shape({
+    barGapRatio: PropTypes.number,
+    categoryGapRatio: PropTypes.number,
+    classes: PropTypes.object,
+    colorMap: PropTypes.oneOfType([PropTypes.shape({
+      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
+      type: PropTypes.oneOf(['ordinal']).isRequired,
+      unknownColor: PropTypes.string,
+      values: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]).isRequired)
+    }), PropTypes.shape({
+      color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
+      max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+      min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+      type: PropTypes.oneOf(['continuous']).isRequired
+    }), PropTypes.shape({
+      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
+      thresholds: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired).isRequired,
+      type: PropTypes.oneOf(['piecewise']).isRequired
+    })]),
+    data: PropTypes.array,
+    dataKey: PropTypes.string,
+    disableLine: PropTypes.bool,
+    disableTicks: PropTypes.bool,
+    fill: PropTypes.string,
+    hideTooltip: PropTypes.bool,
+    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    label: PropTypes.string,
+    labelFontSize: PropTypes.number,
+    labelStyle: PropTypes.object,
+    max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+    min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+    position: PropTypes.oneOf(['left', 'right']),
+    reverse: PropTypes.bool,
+    scaleType: PropTypes.oneOf(['band']),
+    slotProps: PropTypes.object,
+    slots: PropTypes.object,
+    stroke: PropTypes.string,
+    tickFontSize: PropTypes.number,
+    tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
+    tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+    tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),
+    tickLabelStyle: PropTypes.object,
+    tickMaxStep: PropTypes.number,
+    tickMinStep: PropTypes.number,
+    tickNumber: PropTypes.number,
+    tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
+    tickSize: PropTypes.number,
+    valueFormatter: PropTypes.func,
+    zoom: PropTypes.oneOfType([PropTypes.shape({
+      maxEnd: PropTypes.number,
+      maxSpan: PropTypes.number,
+      minSpan: PropTypes.number,
+      minStart: PropTypes.number,
+      panning: PropTypes.bool,
+      step: PropTypes.number
+    }), PropTypes.bool])
+  })).isRequired,
+  /**
+   * The configuration of the z-axes.
+   */
+  zAxis: PropTypes.arrayOf(PropTypes.shape({
+    colorMap: PropTypes.oneOfType([PropTypes.shape({
+      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
+      type: PropTypes.oneOf(['ordinal']).isRequired,
+      unknownColor: PropTypes.string,
+      values: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]).isRequired)
+    }), PropTypes.shape({
+      color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
+      max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+      min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+      type: PropTypes.oneOf(['continuous']).isRequired
+    }), PropTypes.shape({
+      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
+      thresholds: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired).isRequired,
+      type: PropTypes.oneOf(['piecewise']).isRequired
+    })]),
+    data: PropTypes.array,
+    dataKey: PropTypes.string,
+    id: PropTypes.string,
+    max: PropTypes.number,
+    min: PropTypes.number
+  }))
+} : void 0;
+export { Heatmap };

package/Heatmap/HeatmapItem.d.ts

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { SeriesId } from '@mui/x-charts/internals';
+import { HeatmapClasses } from './heatmapClasses';
+export interface HeatmapItemSlots {
+    /**
+     * The component that renders the heatmap cell.
+     * @default HeatmapCell
+     */
+    cell?: React.ElementType;
+}
+export interface HeatmapItemSlotProps {
+    cell?: Partial<React.ComponentPropsWithRef<'rect'>>;
+}
+export interface HeatmapItemProps {
+    dataIndex: number;
+    seriesId: SeriesId;
+    value: number;
+    width: number;
+    height: number;
+    x: number;
+    y: number;
+    color: string;
+    /**
+     * The props used for each component slot.
+     * @default {}
+     */
+    slotProps?: HeatmapItemSlotProps;
+    /**
+     * Overridable component slots.
+     * @default {}
+     */
+    slots?: HeatmapItemSlots;
+}
+export interface HeatmapItemOwnerState {
+    seriesId: SeriesId;
+    dataIndex: number;
+    color: string;
+    isFaded: boolean;
+    isHighlighted: boolean;
+    classes?: Partial<HeatmapClasses>;
+}
+/**
+ * @ignore - internal component.
+ */
+declare function HeatmapItem(props: HeatmapItemProps): React.JSX.Element;
+declare namespace HeatmapItem {
+    var propTypes: any;
+}
+export { HeatmapItem };

package/Heatmap/HeatmapItem.js

@@ -0,0 +1,106 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["seriesId", "dataIndex", "color", "value", "slotProps", "slots"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+import useSlotProps from '@mui/utils/useSlotProps';
+import composeClasses from '@mui/utils/composeClasses';
+import { useItemHighlighted } from '@mui/x-charts/context';
+import { useInteractionItemProps } from '@mui/x-charts/internals';
+import { getHeatmapUtilityClass } from './heatmapClasses';
+import { jsx as _jsx } from "react/jsx-runtime";
+const HeatmapCell = styled('rect', {
+  name: 'MuiHeatmap',
+  slot: 'Cell',
+  overridesResolver: (_, styles) => styles.arc
+})(({
+  ownerState
+}) => ({
+  filter: ownerState.isHighlighted && 'saturate(120%)' || ownerState.isFaded && 'saturate(80%)' || undefined,
+  fill: ownerState.color,
+  shapeRendering: 'crispEdges'
+}));
+const useUtilityClasses = ownerState => {
+  const {
+    classes,
+    seriesId,
+    isFaded,
+    isHighlighted
+  } = ownerState;
+  const slots = {
+    cell: ['cell', `series-${seriesId}`, isFaded && 'faded', isHighlighted && 'highlighted']
+  };
+  return composeClasses(slots, getHeatmapUtilityClass, classes);
+};
+
+/**
+ * @ignore - internal component.
+ */
+function HeatmapItem(props) {
+  const {
+      seriesId,
+      dataIndex,
+      color,
+      value,
+      slotProps = {},
+      slots = {}
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const getInteractionItemProps = useInteractionItemProps();
+  const {
+    isFaded,
+    isHighlighted
+  } = useItemHighlighted({
+    seriesId,
+    dataIndex
+  });
+  const ownerState = {
+    seriesId,
+    dataIndex,
+    color,
+    value,
+    isFaded,
+    isHighlighted
+  };
+  const classes = useUtilityClasses(ownerState);
+  const Cell = slots?.cell ?? HeatmapCell;
+  const cellProps = useSlotProps({
+    elementType: Cell,
+    additionalProps: _extends({}, getInteractionItemProps({
+      type: 'heatmap',
+      seriesId,
+      dataIndex
+    })),
+    externalForwardedProps: _extends({}, other),
+    externalSlotProps: slotProps.cell,
+    ownerState,
+    className: classes.cell
+  });
+  return /*#__PURE__*/_jsx(Cell, _extends({}, cellProps));
+}
+process.env.NODE_ENV !== "production" ? HeatmapItem.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  color: PropTypes.string.isRequired,
+  dataIndex: PropTypes.number.isRequired,
+  height: PropTypes.number.isRequired,
+  seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: PropTypes.object,
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: PropTypes.object,
+  value: PropTypes.number.isRequired,
+  width: PropTypes.number.isRequired,
+  x: PropTypes.number.isRequired,
+  y: PropTypes.number.isRequired
+} : void 0;
+export { HeatmapItem };

package/Heatmap/HeatmapPlot.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { HeatmapItemProps } from './HeatmapItem';
+export interface HeatmapPlotProps extends Pick<HeatmapItemProps, 'slots' | 'slotProps'> {
+}
+declare function HeatmapPlot(props: HeatmapPlotProps): React.JSX.Element | null;
+declare namespace HeatmapPlot {
+    var propTypes: any;
+}
+export { HeatmapPlot };

package/Heatmap/HeatmapPlot.js

@@ -0,0 +1,57 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { useXScale, useYScale, useZColorScale } from '@mui/x-charts/hooks';
+import { useHeatmapSeries } from '../hooks/useSeries';
+import { HeatmapItem } from './HeatmapItem';
+import { jsx as _jsx } from "react/jsx-runtime";
+function HeatmapPlot(props) {
+  const xScale = useXScale();
+  const yScale = useYScale();
+  const colorScale = useZColorScale();
+  const series = useHeatmapSeries();
+  const xDomain = xScale.domain();
+  const yDomain = yScale.domain();
+  if (!series || series.seriesOrder.length === 0) {
+    return null;
+  }
+  const seriesToDisplay = series.series[series.seriesOrder[0]];
+  return /*#__PURE__*/_jsx("g", {
+    children: seriesToDisplay.data.map(([xIndex, yIndex, value], dataIndex) => {
+      const x = xScale(xDomain[xIndex]);
+      const y = yScale(yDomain[yIndex]);
+      const color = colorScale?.(value);
+      if (x === undefined || y === undefined || !color) {
+        return null;
+      }
+      return /*#__PURE__*/_jsx(HeatmapItem, {
+        width: xScale.bandwidth(),
+        height: yScale.bandwidth(),
+        x: x,
+        y: y,
+        color: color,
+        dataIndex: dataIndex,
+        seriesId: series.seriesOrder[0],
+        value: value,
+        slots: props.slots,
+        slotProps: props.slotProps
+      }, `${xIndex}_${yIndex}`);
+    })
+  });
+}
+process.env.NODE_ENV !== "production" ? HeatmapPlot.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: PropTypes.object,
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: PropTypes.object
+} : void 0;
+export { HeatmapPlot };

package/Heatmap/extremums.d.ts

@@ -0,0 +1,2 @@
+import { ExtremumGetter } from '@mui/x-charts/internals';
+export declare const getBaseExtremum: ExtremumGetter<'heatmap'>;

package/Heatmap/extremums.js

@@ -0,0 +1,8 @@
+export const getBaseExtremum = params => {
+  const {
+    axis
+  } = params;
+  const minX = Math.min(...(axis.data ?? []));
+  const maxX = Math.max(...(axis.data ?? []));
+  return [minX, maxX];
+};

package/Heatmap/formatter.d.ts

@@ -0,0 +1,3 @@
+import { SeriesFormatter } from '@mui/x-charts/internals';
+declare const formatter: SeriesFormatter<'heatmap'>;
+export default formatter;

package/Heatmap/formatter.js

@@ -0,0 +1,20 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+const formatter = params => {
+  const {
+    series,
+    seriesOrder
+  } = params;
+  const defaultizedSeries = {};
+  Object.keys(series).forEach(seriesId => {
+    defaultizedSeries[seriesId] = _extends({
+      // Defaultize the data and the value formatter.
+      valueFormatter: v => v[2].toString(),
+      data: []
+    }, series[seriesId]);
+  });
+  return {
+    series: defaultizedSeries,
+    seriesOrder
+  };
+};
+export default formatter;

package/Heatmap/getColor.d.ts

@@ -0,0 +1,3 @@
+import { ColorProcessor } from '@mui/x-charts/internals';
+declare const getColor: ColorProcessor<'heatmap'>;
+export default getColor;

package/Heatmap/getColor.js

@@ -0,0 +1,15 @@
+const getColor = (series, xAxis, yAxis, zAxis) => {
+  const zColorScale = zAxis?.colorScale;
+  if (zColorScale) {
+    return dataIndex => {
+      const value = series.data[dataIndex];
+      const color = zColorScale(value[2]);
+      if (color === null) {
+        return '';
+      }
+      return color;
+    };
+  }
+  return () => '';
+};
+export default getColor;

package/Heatmap/heatmapClasses.d.ts

@@ -0,0 +1,11 @@
+export interface HeatmapClasses {
+    /** Styles applied to the heatmap cells. */
+    cell: string;
+    /** Styles applied to the cell element if highlighted. */
+    highlighted: string;
+    /** Styles applied to the cell element if faded. */
+    faded: string;
+}
+export type HeatmapClassKey = keyof HeatmapClasses;
+export declare function getHeatmapUtilityClass(slot: string): string;
+export declare const heatmapClasses: HeatmapClasses;