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

package/node/Heatmap/Heatmap.js

@@ -0,0 +1,395 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Heatmap = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _d3Interpolate = require("@mui/x-charts-vendor/d3-interpolate");
+var _useId = _interopRequireDefault(require("@mui/utils/useId"));
+var _ChartsAxis = require("@mui/x-charts/ChartsAxis");
+var _ChartsTooltip = require("@mui/x-charts/ChartsTooltip");
+var _ChartsClipPath = require("@mui/x-charts/ChartsClipPath");
+var _ChartsOnAxisClickHandler = require("@mui/x-charts/ChartsOnAxisClickHandler");
+var _ChartsOverlay = require("@mui/x-charts/ChartsOverlay");
+var _ResponsiveChartContainerPro = require("../ResponsiveChartContainerPro");
+var _HeatmapPlot = require("./HeatmapPlot");
+var _plugin = require("./plugin");
+var _DefaultHeatmapTooltip = require("./DefaultHeatmapTooltip");
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+// The GnBu: https://github.com/d3/d3-scale-chromatic/blob/main/src/sequential-multi/GnBu.js
+const defaultColorMap = (0, _d3Interpolate.interpolateRgbBasis)(['#f7fcf0', '#e0f3db', '#ccebc5', '#a8ddb5', '#7bccc4', '#4eb3d3', '#2b8cbe', '#0868ac', '#084081']);
+const Heatmap = exports.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 = (0, _useId.default)();
+  const clipPathId = `${id}-clip-path`;
+  const defaultizedXAxis = React.useMemo(() => xAxis.map(axis => (0, _extends2.default)({
+    scaleType: 'band',
+    categoryGapRatio: 0
+  }, axis)), [xAxis]);
+  const defaultizedYAxis = React.useMemo(() => yAxis.map(axis => (0, _extends2.default)({
+    scaleType: 'band',
+    categoryGapRatio: 0
+  }, axis)), [yAxis]);
+  const defaultizedZAxis = React.useMemo(() => zAxis ?? [{
+    colorMap: {
+      type: 'continuous',
+      min: 0,
+      max: 100,
+      color: defaultColorMap
+    }
+  }], [zAxis]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ResponsiveChartContainerPro.ResponsiveChartContainerPro, {
+    ref: ref,
+    plugins: [_plugin.plugin],
+    series: series.map(s => (0, _extends2.default)({
+      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__*/(0, _jsxRuntime.jsx)(_ChartsOnAxisClickHandler.ChartsOnAxisClickHandler, {
+      onAxisClick: onAxisClick
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
+      clipPath: `url(#${clipPathId})`,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_HeatmapPlot.HeatmapPlot, {
+        slots: slots,
+        slotProps: slotProps
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, {
+        loading: loading,
+        slots: slots,
+        slotProps: slotProps
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, {
+      topAxis: topAxis,
+      leftAxis: leftAxis,
+      rightAxis: rightAxis,
+      bottomAxis: bottomAxis,
+      slots: slots,
+      slotProps: slotProps
+    }), !loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltip, (0, _extends2.default)({
+      trigger: "item"
+    }, tooltip, {
+      slots: (0, _extends2.default)({
+        itemContent: _DefaultHeatmapTooltip.DefaultHeatmapTooltip
+      }, slots),
+      slotProps: slotProps
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsClipPath.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.default.oneOfType([_propTypes.default.object, _propTypes.default.string]),
+  children: _propTypes.default.node,
+  className: _propTypes.default.string,
+  /**
+   * Color palette used to colorize multiple series.
+   * @default blueberryTwilightPalette
+   */
+  colors: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string), _propTypes.default.func]),
+  /**
+   * An array of objects that can be used to populate series and axes data using their `dataKey` property.
+   */
+  dataset: _propTypes.default.arrayOf(_propTypes.default.object),
+  desc: _propTypes.default.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.default.bool,
+  /**
+   * The height of the chart in px. If not defined, it takes the height of the parent element.
+   */
+  height: _propTypes.default.number,
+  /**
+   * The item currently highlighted. Turns highlighting into a controlled prop.
+   */
+  highlightedItem: _propTypes.default.shape({
+    dataIndex: _propTypes.default.number,
+    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.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.default.oneOfType([_propTypes.default.object, _propTypes.default.string]),
+  /**
+   * If `true`, a loading overlay is displayed.
+   * @default false
+   */
+  loading: _propTypes.default.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.default.shape({
+    bottom: _propTypes.default.number,
+    left: _propTypes.default.number,
+    right: _propTypes.default.number,
+    top: _propTypes.default.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.default.func,
+  /**
+   * The callback fired when the highlighted item changes.
+   *
+   * @param {HighlightItemData | null} highlightedItem  The newly highlighted item.
+   */
+  onHighlightChange: _propTypes.default.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.default.oneOfType([_propTypes.default.object, _propTypes.default.string]),
+  /**
+   * The series to display in the bar chart.
+   * An array of [[HeatmapSeriesType]] objects.
+   */
+  series: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: _propTypes.default.object,
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: _propTypes.default.object,
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
+  title: _propTypes.default.string,
+  /**
+   * The configuration of the tooltip.
+   * @see See {@link https://mui.com/x/react-charts/tooltip/ tooltip docs} for more details.
+   */
+  tooltip: _propTypes.default.shape({
+    axisContent: _propTypes.default.elementType,
+    classes: _propTypes.default.object,
+    itemContent: _propTypes.default.elementType,
+    slotProps: _propTypes.default.object,
+    slots: _propTypes.default.object,
+    trigger: _propTypes.default.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.default.oneOfType([_propTypes.default.object, _propTypes.default.string]),
+  viewBox: _propTypes.default.shape({
+    height: _propTypes.default.number,
+    width: _propTypes.default.number,
+    x: _propTypes.default.number,
+    y: _propTypes.default.number
+  }),
+  /**
+   * The width of the chart in px. If not defined, it takes the width of the parent element.
+   */
+  width: _propTypes.default.number,
+  /**
+   * The configuration of the x-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  xAxis: _propTypes.default.arrayOf(_propTypes.default.shape({
+    barGapRatio: _propTypes.default.number,
+    categoryGapRatio: _propTypes.default.number,
+    classes: _propTypes.default.object,
+    colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
+      colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
+      type: _propTypes.default.oneOf(['ordinal']).isRequired,
+      unknownColor: _propTypes.default.string,
+      values: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number, _propTypes.default.string]).isRequired)
+    }), _propTypes.default.shape({
+      color: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string.isRequired), _propTypes.default.func]).isRequired,
+      max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+      min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+      type: _propTypes.default.oneOf(['continuous']).isRequired
+    }), _propTypes.default.shape({
+      colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
+      thresholds: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]).isRequired).isRequired,
+      type: _propTypes.default.oneOf(['piecewise']).isRequired
+    })]),
+    data: _propTypes.default.array,
+    dataKey: _propTypes.default.string,
+    disableLine: _propTypes.default.bool,
+    disableTicks: _propTypes.default.bool,
+    fill: _propTypes.default.string,
+    hideTooltip: _propTypes.default.bool,
+    id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+    label: _propTypes.default.string,
+    labelFontSize: _propTypes.default.number,
+    labelStyle: _propTypes.default.object,
+    max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+    min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+    position: _propTypes.default.oneOf(['bottom', 'top']),
+    reverse: _propTypes.default.bool,
+    scaleType: _propTypes.default.oneOf(['band']),
+    slotProps: _propTypes.default.object,
+    slots: _propTypes.default.object,
+    stroke: _propTypes.default.string,
+    tickFontSize: _propTypes.default.number,
+    tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
+    tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
+    tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),
+    tickLabelStyle: _propTypes.default.object,
+    tickMaxStep: _propTypes.default.number,
+    tickMinStep: _propTypes.default.number,
+    tickNumber: _propTypes.default.number,
+    tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
+    tickSize: _propTypes.default.number,
+    valueFormatter: _propTypes.default.func,
+    zoom: _propTypes.default.oneOfType([_propTypes.default.shape({
+      maxEnd: _propTypes.default.number,
+      maxSpan: _propTypes.default.number,
+      minSpan: _propTypes.default.number,
+      minStart: _propTypes.default.number,
+      panning: _propTypes.default.bool,
+      step: _propTypes.default.number
+    }), _propTypes.default.bool])
+  })).isRequired,
+  /**
+   * The configuration of the y-axes.
+   * If not provided, a default axis config is used.
+   * An array of [[AxisConfig]] objects.
+   */
+  yAxis: _propTypes.default.arrayOf(_propTypes.default.shape({
+    barGapRatio: _propTypes.default.number,
+    categoryGapRatio: _propTypes.default.number,
+    classes: _propTypes.default.object,
+    colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
+      colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
+      type: _propTypes.default.oneOf(['ordinal']).isRequired,
+      unknownColor: _propTypes.default.string,
+      values: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number, _propTypes.default.string]).isRequired)
+    }), _propTypes.default.shape({
+      color: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string.isRequired), _propTypes.default.func]).isRequired,
+      max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+      min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+      type: _propTypes.default.oneOf(['continuous']).isRequired
+    }), _propTypes.default.shape({
+      colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
+      thresholds: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]).isRequired).isRequired,
+      type: _propTypes.default.oneOf(['piecewise']).isRequired
+    })]),
+    data: _propTypes.default.array,
+    dataKey: _propTypes.default.string,
+    disableLine: _propTypes.default.bool,
+    disableTicks: _propTypes.default.bool,
+    fill: _propTypes.default.string,
+    hideTooltip: _propTypes.default.bool,
+    id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+    label: _propTypes.default.string,
+    labelFontSize: _propTypes.default.number,
+    labelStyle: _propTypes.default.object,
+    max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+    min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+    position: _propTypes.default.oneOf(['left', 'right']),
+    reverse: _propTypes.default.bool,
+    scaleType: _propTypes.default.oneOf(['band']),
+    slotProps: _propTypes.default.object,
+    slots: _propTypes.default.object,
+    stroke: _propTypes.default.string,
+    tickFontSize: _propTypes.default.number,
+    tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
+    tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
+    tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),
+    tickLabelStyle: _propTypes.default.object,
+    tickMaxStep: _propTypes.default.number,
+    tickMinStep: _propTypes.default.number,
+    tickNumber: _propTypes.default.number,
+    tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
+    tickSize: _propTypes.default.number,
+    valueFormatter: _propTypes.default.func,
+    zoom: _propTypes.default.oneOfType([_propTypes.default.shape({
+      maxEnd: _propTypes.default.number,
+      maxSpan: _propTypes.default.number,
+      minSpan: _propTypes.default.number,
+      minStart: _propTypes.default.number,
+      panning: _propTypes.default.bool,
+      step: _propTypes.default.number
+    }), _propTypes.default.bool])
+  })).isRequired,
+  /**
+   * The configuration of the z-axes.
+   */
+  zAxis: _propTypes.default.arrayOf(_propTypes.default.shape({
+    colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
+      colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
+      type: _propTypes.default.oneOf(['ordinal']).isRequired,
+      unknownColor: _propTypes.default.string,
+      values: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number, _propTypes.default.string]).isRequired)
+    }), _propTypes.default.shape({
+      color: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string.isRequired), _propTypes.default.func]).isRequired,
+      max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+      min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+      type: _propTypes.default.oneOf(['continuous']).isRequired
+    }), _propTypes.default.shape({
+      colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
+      thresholds: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]).isRequired).isRequired,
+      type: _propTypes.default.oneOf(['piecewise']).isRequired
+    })]),
+    data: _propTypes.default.array,
+    dataKey: _propTypes.default.string,
+    id: _propTypes.default.string,
+    max: _propTypes.default.number,
+    min: _propTypes.default.number
+  }))
+} : void 0;

package/node/Heatmap/HeatmapItem.js

@@ -0,0 +1,114 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.HeatmapItem = HeatmapItem;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styles = require("@mui/material/styles");
+var _useSlotProps = _interopRequireDefault(require("@mui/utils/useSlotProps"));
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _context = require("@mui/x-charts/context");
+var _internals = require("@mui/x-charts/internals");
+var _heatmapClasses = require("./heatmapClasses");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["seriesId", "dataIndex", "color", "value", "slotProps", "slots"];
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const HeatmapCell = (0, _styles.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 (0, _composeClasses.default)(slots, _heatmapClasses.getHeatmapUtilityClass, classes);
+};
+
+/**
+ * @ignore - internal component.
+ */
+function HeatmapItem(props) {
+  const {
+      seriesId,
+      dataIndex,
+      color,
+      value,
+      slotProps = {},
+      slots = {}
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const getInteractionItemProps = (0, _internals.useInteractionItemProps)();
+  const {
+    isFaded,
+    isHighlighted
+  } = (0, _context.useItemHighlighted)({
+    seriesId,
+    dataIndex
+  });
+  const ownerState = {
+    seriesId,
+    dataIndex,
+    color,
+    value,
+    isFaded,
+    isHighlighted
+  };
+  const classes = useUtilityClasses(ownerState);
+  const Cell = slots?.cell ?? HeatmapCell;
+  const cellProps = (0, _useSlotProps.default)({
+    elementType: Cell,
+    additionalProps: (0, _extends2.default)({}, getInteractionItemProps({
+      type: 'heatmap',
+      seriesId,
+      dataIndex
+    })),
+    externalForwardedProps: (0, _extends2.default)({}, other),
+    externalSlotProps: slotProps.cell,
+    ownerState,
+    className: classes.cell
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Cell, (0, _extends2.default)({}, 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.default.string.isRequired,
+  dataIndex: _propTypes.default.number.isRequired,
+  height: _propTypes.default.number.isRequired,
+  seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: _propTypes.default.object,
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: _propTypes.default.object,
+  value: _propTypes.default.number.isRequired,
+  width: _propTypes.default.number.isRequired,
+  x: _propTypes.default.number.isRequired,
+  y: _propTypes.default.number.isRequired
+} : void 0;

package/node/Heatmap/HeatmapPlot.js

@@ -0,0 +1,65 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.HeatmapPlot = HeatmapPlot;
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _hooks = require("@mui/x-charts/hooks");
+var _useSeries = require("../hooks/useSeries");
+var _HeatmapItem = require("./HeatmapItem");
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function HeatmapPlot(props) {
+  const xScale = (0, _hooks.useXScale)();
+  const yScale = (0, _hooks.useYScale)();
+  const colorScale = (0, _hooks.useZColorScale)();
+  const series = (0, _useSeries.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__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)(_HeatmapItem.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.default.object,
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: _propTypes.default.object
+} : void 0;

package/node/Heatmap/extremums.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getBaseExtremum = void 0;
+const getBaseExtremum = params => {
+  const {
+    axis
+  } = params;
+  const minX = Math.min(...(axis.data ?? []));
+  const maxX = Math.max(...(axis.data ?? []));
+  return [minX, maxX];
+};
+exports.getBaseExtremum = getBaseExtremum;

package/node/Heatmap/formatter.js

@@ -0,0 +1,27 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+const formatter = params => {
+  const {
+    series,
+    seriesOrder
+  } = params;
+  const defaultizedSeries = {};
+  Object.keys(series).forEach(seriesId => {
+    defaultizedSeries[seriesId] = (0, _extends2.default)({
+      // Defaultize the data and the value formatter.
+      valueFormatter: v => v[2].toString(),
+      data: []
+    }, series[seriesId]);
+  });
+  return {
+    series: defaultizedSeries,
+    seriesOrder
+  };
+};
+var _default = exports.default = formatter;

package/node/Heatmap/getColor.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+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 () => '';
+};
+var _default = exports.default = getColor;

package/node/Heatmap/heatmapClasses.js

@@ -0,0 +1,21 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getHeatmapUtilityClass = getHeatmapUtilityClass;
+exports.heatmapClasses = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _utils = require("@mui/utils");
+function getHeatmapUtilityClass(slot) {
+  // Those should be common to all charts
+  if (['highlighted', 'faded'].includes(slot)) {
+    return (0, _utils.unstable_generateUtilityClass)('Charts', slot);
+  }
+  return (0, _utils.unstable_generateUtilityClass)('MuiHeatmap', slot);
+}
+const heatmapClasses = exports.heatmapClasses = (0, _extends2.default)({}, (0, _utils.unstable_generateUtilityClasses)('MuiHeatmap', ['cell']), {
+  highlighted: 'Charts-highlighted',
+  faded: 'Charts-faded'
+});