@mui/x-charts-pro 8.3.1 → 8.5.0

package/esm/Heatmap/Heatmap.js

@@ -7,14 +7,17 @@ import { useThemeProps } from '@mui/material/styles';
 import useId from '@mui/utils/useId';
 import { interpolateRgbBasis } from '@mui/x-charts-vendor/d3-interpolate';
 import { ChartsAxis } from '@mui/x-charts/ChartsAxis';
+import { ChartsSurface } from '@mui/x-charts/ChartsSurface';
+import { ChartsWrapper } from '@mui/x-charts/internals';
 import { ChartsClipPath } from '@mui/x-charts/ChartsClipPath';
 import { ChartsOverlay } from '@mui/x-charts/ChartsOverlay';
 import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '@mui/x-charts/constants';
-import { ChartContainerPro } from "../ChartContainerPro/index.js";
+import { ChartsLegend, ContinuousColorLegend } from '@mui/x-charts/ChartsLegend';
 import { HeatmapPlot } from "./HeatmapPlot.js";
 import { seriesConfig as heatmapSeriesConfig } from "./seriesConfig/index.js";
-import { HeatmapTooltip } from "./HeatmapTooltip/HeatmapTooltip.js";
+import { HeatmapTooltip } from "./HeatmapTooltip/index.js";
 import { HEATMAP_PLUGINS } from "./Heatmap.plugins.js";
+import { ChartDataProviderPro } from "../ChartDataProviderPro/index.js";
 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']);
@@ -37,6 +40,7 @@ const Heatmap = /*#__PURE__*/React.forwardRef(function Heatmap(inProps, ref) {
     name: 'MuiHeatmap'
   });
   const {
+    apiRef,
     xAxis,
     yAxis,
     zAxis,
@@ -53,7 +57,8 @@ const Heatmap = /*#__PURE__*/React.forwardRef(function Heatmap(inProps, ref) {
     slotProps,
     loading,
     highlightedItem,
-    onHighlightChange
+    onHighlightChange,
+    hideLegend = true
   } = props;
   const id = useId();
   const clipPathId = `${id}-clip-path`;
@@ -81,9 +86,14 @@ const Heatmap = /*#__PURE__*/React.forwardRef(function Heatmap(inProps, ref) {
       color: defaultColorMap
     }
   }], [zAxis]);
-  const Tooltip = props.slots?.tooltip ?? HeatmapTooltip;
-  return /*#__PURE__*/_jsxs(ChartContainerPro, {
-    ref: ref,
+  const chartsWrapperProps = {
+    sx,
+    legendPosition: props.slotProps?.legend?.position,
+    legendDirection: props.slotProps?.legend?.direction
+  };
+  const Tooltip = slots?.tooltip ?? HeatmapTooltip;
+  return /*#__PURE__*/_jsx(ChartDataProviderPro, {
+    apiRef: apiRef,
     seriesConfig: seriesConfig,
     series: series.map(s => _extends({
       type: 'heatmap'
@@ -96,37 +106,60 @@ const Heatmap = /*#__PURE__*/React.forwardRef(function Heatmap(inProps, ref) {
     zAxis: zAxisWithDefault,
     colors: colors,
     dataset: dataset,
-    sx: sx,
     disableAxisListener: true,
     highlightedItem: highlightedItem,
     onHighlightChange: onHighlightChange,
     onAxisClick: onAxisClick,
     plugins: HEATMAP_PLUGINS,
-    children: [/*#__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, {
-      slots: slots,
-      slotProps: slotProps
-    }), !loading && /*#__PURE__*/_jsx(Tooltip, _extends({}, slotProps?.tooltip)), /*#__PURE__*/_jsx(ChartsClipPath, {
-      id: clipPathId
-    }), children]
+    children: /*#__PURE__*/_jsxs(ChartsWrapper, _extends({}, chartsWrapperProps, {
+      children: [!hideLegend && /*#__PURE__*/_jsx(ChartsLegend, {
+        slots: _extends({}, slots, {
+          legend: slots?.legend ?? ContinuousColorLegend
+        }),
+        slotProps: {
+          legend: _extends({
+            labelPosition: 'extremes'
+          }, slotProps?.legend)
+        },
+        sx: slotProps?.legend?.direction === 'vertical' ? {
+          height: 150
+        } : {
+          width: '50%'
+        }
+      }), /*#__PURE__*/_jsxs(ChartsSurface, {
+        ref: ref,
+        sx: sx,
+        children: [/*#__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, {
+          slots: slots,
+          slotProps: slotProps
+        }), /*#__PURE__*/_jsx(ChartsClipPath, {
+          id: clipPathId
+        }), children]
+      }), !loading && /*#__PURE__*/_jsx(Tooltip, _extends({}, slotProps?.tooltip))]
+    }))
   });
 });
+if (process.env.NODE_ENV !== "production") Heatmap.displayName = "Heatmap";
 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"  |
   // ----------------------------------------------------------------------
   apiRef: PropTypes.shape({
-    current: PropTypes.object
+    current: PropTypes.shape({
+      exportAsImage: PropTypes.func.isRequired,
+      exportAsPrint: PropTypes.func.isRequired
+    })
   }),
   className: PropTypes.string,
   /**
@@ -149,6 +182,11 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */
   height: PropTypes.number,
+  /**
+   * If `true`, the legend is not rendered.
+   * @default true
+   */
+  hideLegend: PropTypes.bool,
   /**
    * The highlighted item.
    * Used when the highlight is controlled.

package/esm/Heatmap/Heatmap.plugins.d.ts

@@ -1,3 +1,4 @@
 import { UseChartZAxisSignature, UseChartCartesianAxisSignature, UseChartInteractionSignature, UseChartHighlightSignature, ConvertSignaturesIntoPlugins } from '@mui/x-charts/internals';
-export type HeatmapPluginsSignatures = [UseChartZAxisSignature, UseChartCartesianAxisSignature<'heatmap'>, UseChartInteractionSignature, UseChartHighlightSignature];
+import { UseChartProExportSignature } from "../internals/plugins/useChartProExport/index.js";
+export type HeatmapPluginsSignatures = [UseChartZAxisSignature, UseChartCartesianAxisSignature<'heatmap'>, UseChartInteractionSignature, UseChartHighlightSignature, UseChartProExportSignature];
 export declare const HEATMAP_PLUGINS: ConvertSignaturesIntoPlugins<HeatmapPluginsSignatures>;

package/esm/Heatmap/Heatmap.plugins.js

@@ -1,2 +1,3 @@
 import { useChartZAxis, useChartCartesianAxis, useChartInteraction, useChartHighlight } from '@mui/x-charts/internals';
-export const HEATMAP_PLUGINS = [useChartZAxis, useChartCartesianAxis, useChartInteraction, useChartHighlight];
+import { useChartProExport } from "../internals/plugins/useChartProExport/index.js";
+export const HEATMAP_PLUGINS = [useChartZAxis, useChartCartesianAxis, useChartInteraction, useChartHighlight, useChartProExport];

package/esm/Heatmap/HeatmapTooltip/HeatmapTooltip.classes.d.ts

@@ -0,0 +1,2 @@
+import { HeatmapTooltipProps } from "./HeatmapTooltip.types.js";
+export declare const useUtilityClasses: (props: Pick<HeatmapTooltipProps, "classes">) => Record<"mark" | "table" | "cell" | "row" | "root" | "paper" | "markContainer" | "labelCell" | "valueCell", string>;

package/esm/Heatmap/HeatmapTooltip/HeatmapTooltip.classes.js

@@ -0,0 +1,19 @@
+import composeClasses from '@mui/utils/composeClasses';
+import { getChartsTooltipUtilityClass } from '@mui/x-charts/ChartsTooltip';
+export const useUtilityClasses = props => {
+  const {
+    classes
+  } = props;
+  const slots = {
+    root: ['root'],
+    paper: ['paper'],
+    table: ['table'],
+    row: ['row'],
+    cell: ['cell'],
+    mark: ['mark'],
+    markContainer: ['markContainer'],
+    labelCell: ['labelCell'],
+    valueCell: ['valueCell']
+  };
+  return composeClasses(slots, getChartsTooltipUtilityClass, classes);
+};

package/esm/Heatmap/HeatmapTooltip/HeatmapTooltip.d.ts

@@ -1,14 +1,5 @@
 import * as React from 'react';
-import { ChartsTooltipContainerProps } from '@mui/x-charts/ChartsTooltip';
-export interface HeatmapTooltipProps extends Omit<ChartsTooltipContainerProps, 'trigger' | 'children'> {
-  /**
-   * Select the kind of tooltip to display
-   * - 'item': Shows data about the item below the mouse.
-   * - 'none': Does not display tooltip
-   * @default 'item'
-   */
-  trigger?: 'item' | 'none';
-}
+import { HeatmapTooltipProps } from "./HeatmapTooltip.types.js";
 declare function HeatmapTooltip(props: HeatmapTooltipProps): React.JSX.Element;
 declare namespace HeatmapTooltip {
   var propTypes: any;

package/esm/Heatmap/HeatmapTooltip/HeatmapTooltip.js

@@ -3,109 +3,11 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import clsx from 'clsx';
 import HTMLElementType from '@mui/utils/HTMLElementType';
-import composeClasses from '@mui/utils/composeClasses';
-import { ChartsTooltipPaper, ChartsTooltipTable, ChartsTooltipRow, ChartsTooltipCell, useItemTooltip, getChartsTooltipUtilityClass, ChartsTooltipContainer } from '@mui/x-charts/ChartsTooltip';
-import { useXAxis, useYAxis } from '@mui/x-charts/hooks';
-import { getLabel, ChartsLabelMark } from '@mui/x-charts/internals';
-import { useHeatmapSeriesContext } from "../../hooks/useHeatmapSeries.js";
-import { HeatmapTooltipAxesValue } from "./HeatmapTooltipAxesValue.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useUtilityClasses = props => {
-  const {
-    classes
-  } = props;
-  const slots = {
-    root: ['root'],
-    paper: ['paper'],
-    table: ['table'],
-    row: ['row'],
-    cell: ['cell'],
-    mark: ['mark'],
-    markContainer: ['markContainer'],
-    labelCell: ['labelCell'],
-    valueCell: ['valueCell']
-  };
-  return composeClasses(slots, getChartsTooltipUtilityClass, classes);
-};
-function DefaultHeatmapTooltipContent(props) {
-  const classes = useUtilityClasses(props);
-  const xAxis = useXAxis();
-  const yAxis = useYAxis();
-  const heatmapSeries = useHeatmapSeriesContext();
-  const tooltipData = useItemTooltip();
-  if (!tooltipData || !heatmapSeries || heatmapSeries.seriesOrder.length === 0) {
-    return null;
-  }
-  const {
-    series,
-    seriesOrder
-  } = heatmapSeries;
-  const seriesId = seriesOrder[0];
-  const {
-    color,
-    value,
-    identifier,
-    markType
-  } = tooltipData;
-  const [xIndex, yIndex] = value;
-  const formattedX = xAxis.valueFormatter?.(xAxis.data[xIndex], {
-    location: 'tooltip',
-    scale: xAxis.scale
-  }) ?? xAxis.data[xIndex].toLocaleString();
-  const formattedY = yAxis.valueFormatter?.(yAxis.data[yIndex], {
-    location: 'tooltip',
-    scale: yAxis.scale
-  }) ?? yAxis.data[yIndex].toLocaleString();
-  const formattedValue = series[seriesId].valueFormatter(value, {
-    dataIndex: identifier.dataIndex
-  });
-  const seriesLabel = getLabel(series[seriesId].label, 'tooltip');
-  return /*#__PURE__*/_jsx(ChartsTooltipPaper, {
-    className: classes.paper,
-    children: /*#__PURE__*/_jsxs(ChartsTooltipTable, {
-      className: classes.table,
-      children: [/*#__PURE__*/_jsxs(HeatmapTooltipAxesValue, {
-        children: [/*#__PURE__*/_jsx("span", {
-          children: formattedX
-        }), /*#__PURE__*/_jsx("span", {
-          children: formattedY
-        })]
-      }), /*#__PURE__*/_jsx("tbody", {
-        children: /*#__PURE__*/_jsxs(ChartsTooltipRow, {
-          className: classes.row,
-          children: [/*#__PURE__*/_jsxs(ChartsTooltipCell, {
-            className: clsx(classes.labelCell, classes.cell),
-            component: "th",
-            children: [/*#__PURE__*/_jsx("div", {
-              className: classes.markContainer,
-              children: /*#__PURE__*/_jsx(ChartsLabelMark, {
-                type: markType,
-                color: color,
-                className: classes.mark
-              })
-            }), seriesLabel]
-          }), /*#__PURE__*/_jsx(ChartsTooltipCell, {
-            className: clsx(classes.valueCell, classes.cell),
-            component: "td",
-            children: formattedValue
-          })]
-        })
-      })]
-    })
-  });
-}
-process.env.NODE_ENV !== "production" ? DefaultHeatmapTooltipContent.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
-  // ----------------------------------------------------------------------
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes: PropTypes.object
-} : void 0;
+import { ChartsTooltipContainer } from '@mui/x-charts/ChartsTooltip';
+import { HeatmapTooltipContent } from "./HeatmapTooltipContent.js";
+import { useUtilityClasses } from "./HeatmapTooltip.classes.js";
+import { jsx as _jsx } from "react/jsx-runtime";
 function HeatmapTooltip(props) {
   const classes = useUtilityClasses({
     classes: props.classes
@@ -114,7 +16,7 @@ function HeatmapTooltip(props) {
     trigger: "item"
   }, props, {
     classes: classes,
-    children: /*#__PURE__*/_jsx(DefaultHeatmapTooltipContent, {
+    children: /*#__PURE__*/_jsx(HeatmapTooltipContent, {
       classes: classes
     })
   }));

package/esm/Heatmap/HeatmapTooltip/HeatmapTooltip.types.d.ts

@@ -0,0 +1,10 @@
+import { ChartsTooltipContainerProps } from '@mui/x-charts/ChartsTooltip';
+export interface HeatmapTooltipProps extends Omit<ChartsTooltipContainerProps, 'trigger' | 'children'> {
+  /**
+   * Select the kind of tooltip to display
+   * - 'item': Shows data about the item below the mouse.
+   * - 'none': Does not display tooltip
+   * @default 'item'
+   */
+  trigger?: 'item' | 'none';
+}

package/esm/Heatmap/HeatmapTooltip/HeatmapTooltip.types.js

@@ -0,0 +1 @@
+export {};

package/esm/Heatmap/HeatmapTooltip/HeatmapTooltipContent.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { HeatmapTooltipProps } from "./HeatmapTooltip.types.js";
+export interface HeatmapTooltipContentProps extends Pick<HeatmapTooltipProps, 'classes'> {}
+export declare function HeatmapTooltipContent(props: HeatmapTooltipContentProps): React.JSX.Element | null;
+export declare namespace HeatmapTooltipContent {
+  var propTypes: any;
+}

package/esm/Heatmap/HeatmapTooltip/HeatmapTooltipContent.js

@@ -0,0 +1,89 @@
+'use client';
+
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { ChartsTooltipPaper, ChartsTooltipTable, ChartsTooltipRow, ChartsTooltipCell, useItemTooltip } from '@mui/x-charts/ChartsTooltip';
+import { useXAxis, useYAxis } from '@mui/x-charts/hooks';
+import { getLabel, ChartsLabelMark } from '@mui/x-charts/internals';
+import { useHeatmapSeriesContext } from "../../hooks/useHeatmapSeries.js";
+import { HeatmapTooltipAxesValue } from "./HeatmapTooltipAxesValue.js";
+import { useUtilityClasses } from "./HeatmapTooltip.classes.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function HeatmapTooltipContent(props) {
+  const classes = useUtilityClasses(props);
+  const xAxis = useXAxis();
+  const yAxis = useYAxis();
+  const heatmapSeries = useHeatmapSeriesContext();
+  const tooltipData = useItemTooltip();
+  if (!tooltipData || !heatmapSeries || heatmapSeries.seriesOrder.length === 0) {
+    return null;
+  }
+  const {
+    series,
+    seriesOrder
+  } = heatmapSeries;
+  const seriesId = seriesOrder[0];
+  const {
+    color,
+    value,
+    identifier,
+    markType
+  } = tooltipData;
+  const [xIndex, yIndex] = value;
+  const formattedX = xAxis.valueFormatter?.(xAxis.data[xIndex], {
+    location: 'tooltip',
+    scale: xAxis.scale
+  }) ?? xAxis.data[xIndex].toLocaleString();
+  const formattedY = yAxis.valueFormatter?.(yAxis.data[yIndex], {
+    location: 'tooltip',
+    scale: yAxis.scale
+  }) ?? yAxis.data[yIndex].toLocaleString();
+  const formattedValue = series[seriesId].valueFormatter(value, {
+    dataIndex: identifier.dataIndex
+  });
+  const seriesLabel = getLabel(series[seriesId].label, 'tooltip');
+  return /*#__PURE__*/_jsx(ChartsTooltipPaper, {
+    className: classes.paper,
+    children: /*#__PURE__*/_jsxs(ChartsTooltipTable, {
+      className: classes.table,
+      children: [/*#__PURE__*/_jsxs(HeatmapTooltipAxesValue, {
+        children: [/*#__PURE__*/_jsx("span", {
+          children: formattedX
+        }), /*#__PURE__*/_jsx("span", {
+          children: formattedY
+        })]
+      }), /*#__PURE__*/_jsx("tbody", {
+        children: /*#__PURE__*/_jsxs(ChartsTooltipRow, {
+          className: classes.row,
+          children: [/*#__PURE__*/_jsxs(ChartsTooltipCell, {
+            className: clsx(classes.labelCell, classes.cell),
+            component: "th",
+            children: [/*#__PURE__*/_jsx("div", {
+              className: classes.markContainer,
+              children: /*#__PURE__*/_jsx(ChartsLabelMark, {
+                type: markType,
+                color: color,
+                className: classes.mark
+              })
+            }), seriesLabel]
+          }), /*#__PURE__*/_jsx(ChartsTooltipCell, {
+            className: clsx(classes.valueCell, classes.cell),
+            component: "td",
+            children: formattedValue
+          })]
+        })
+      })]
+    })
+  });
+}
+process.env.NODE_ENV !== "production" ? HeatmapTooltipContent.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object
+} : void 0;

package/esm/Heatmap/HeatmapTooltip/index.d.ts

@@ -1 +1,3 @@
-export * from "./HeatmapTooltip.js";
+export * from "./HeatmapTooltip.js";
+export * from "./HeatmapTooltipContent.js";
+export type { HeatmapTooltipProps } from "./HeatmapTooltip.types.js";

package/esm/Heatmap/HeatmapTooltip/index.js

@@ -1 +1,3 @@
-export * from "./HeatmapTooltip.js";
+export * from "./HeatmapTooltip.js";
+export * from "./HeatmapTooltipContent.js";
+export {};

package/esm/LineChartPro/LineChartPro.d.ts

@@ -1,13 +1,21 @@
 import * as React from 'react';
-import { LineChartProps } from '@mui/x-charts/LineChart';
+import { LineChartProps, LineChartSlots, LineChartSlotProps } from '@mui/x-charts/LineChart';
+import { ChartsSlotPropsPro, ChartsSlotsPro } from "../internals/material/index.js";
 import { ChartContainerProProps } from "../ChartContainerPro/index.js";
 import { LineChartProPluginsSignatures } from "./LineChartPro.plugins.js";
-export interface LineChartProProps extends Omit<LineChartProps, 'apiRef'>, Omit<ChartContainerProProps<'line', LineChartProPluginsSignatures>, 'series' | 'plugins' | 'seriesConfig'> {
+export interface LineChartProSlots extends LineChartSlots, Partial<ChartsSlotsPro> {}
+export interface LineChartProSlotProps extends LineChartSlotProps, Partial<ChartsSlotPropsPro> {}
+export interface LineChartProProps extends Omit<LineChartProps, 'apiRef' | 'slots' | 'slotProps'>, Omit<ChartContainerProProps<'line', LineChartProPluginsSignatures>, 'series' | 'plugins' | 'seriesConfig' | 'slots' | 'slotProps'> {
   /**
-   * If true, shows the default chart toolbar.
-   * @default false
+   * Overridable component slots.
+   * @default {}
    */
-  showToolbar?: boolean;
+  slots?: LineChartProSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: LineChartProSlotProps;
 }
 /**
  * Demos: