@mui/x-charts 7.16.0 → 7.17.0

package/LineChart/legend.js

@@ -10,9 +10,10 @@ const legendGetter = params => {
       return acc;
     }
     acc.push({
+      id: seriesId,
+      seriesId,
       color: series[seriesId].color,
-      label: formattedLabel,
-      id: seriesId
+      label: formattedLabel
     });
     return acc;
   }, []);

package/LineChart/markElementClasses.d.ts

@@ -0,0 +1,20 @@
+import { SeriesId } from '../models/seriesType/common';
+export interface MarkElementClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element when highlighted. */
+    highlighted: string;
+    /** Styles applied to the root element when faded. */
+    faded: string;
+}
+export type MarkElementClassKey = keyof MarkElementClasses;
+export interface MarkElementOwnerState {
+    id: SeriesId;
+    color: string;
+    isFaded: boolean;
+    isHighlighted: boolean;
+    classes?: Partial<MarkElementClasses>;
+}
+export declare function getMarkElementUtilityClass(slot: string): string;
+export declare const markElementClasses: MarkElementClasses;
+export declare const useUtilityClasses: (ownerState: MarkElementOwnerState) => Record<"root", string>;

package/LineChart/markElementClasses.js

@@ -0,0 +1,19 @@
+import composeClasses from '@mui/utils/composeClasses';
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+export function getMarkElementUtilityClass(slot) {
+  return generateUtilityClass('MuiMarkElement', slot);
+}
+export const markElementClasses = generateUtilityClasses('MuiMarkElement', ['root', 'highlighted', 'faded']);
+export const useUtilityClasses = ownerState => {
+  const {
+    classes,
+    id,
+    isFaded,
+    isHighlighted
+  } = ownerState;
+  const slots = {
+    root: ['root', `series-${id}`, isHighlighted && 'highlighted', isFaded && 'faded']
+  };
+  return composeClasses(slots, getMarkElementUtilityClass, classes);
+};

package/LineChart/useLineChartProps.js

@@ -1,6 +1,8 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["xAxis", "yAxis", "series", "width", "height", "margin", "colors", "dataset", "sx", "tooltip", "onAxisClick", "onAreaClick", "onLineClick", "onMarkClick", "axisHighlight", "disableLineItemHighlight", "legend", "grid", "topAxis", "leftAxis", "rightAxis", "bottomAxis", "children", "slots", "slotProps", "skipAnimation", "loading", "highlightedItem", "onHighlightChange", "className"];
+const _excluded = ["xAxis", "yAxis", "series", "width", "height", "margin", "colors", "dataset", "sx", "tooltip", "onAxisClick", "onAreaClick", "onLineClick", "onMarkClick", "axisHighlight", "disableLineItemHighlight", "legend", "grid", "topAxis", "leftAxis", "rightAxis", "bottomAxis", "children", "slots", "slotProps", "skipAnimation", "loading", "highlightedItem", "onHighlightChange", "className", "experimentalMarkRendering"];
 import useId from '@mui/utils/useId';
 import { DEFAULT_X_AXIS_KEY } from "../constants/index.js";
 /**
@@ -41,7 +43,8 @@ export const useLineChartProps = props => {
       loading,
       highlightedItem,
       onHighlightChange,
-      className
+      className,
+      experimentalMarkRendering
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const id = useId();
@@ -99,7 +102,8 @@ export const useLineChartProps = props => {
     slots,
     slotProps,
     onItemClick: onMarkClick,
-    skipAnimation
+    skipAnimation,
+    experimentalRendering: experimentalMarkRendering
   };
   const overlayProps = {
     slots,

package/PieChart/PieArc.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["classes", "color", "cornerRadius", "dataIndex", "endAngle", "id", "innerRadius", "isFaded", "isHighlighted", "onClick", "outerRadius", "paddingAngle", "startAngle", "highlightScope"];

package/PieChart/PieArcLabel.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["id", "classes", "color", "startAngle", "endAngle", "paddingAngle", "arcLabelRadius", "innerRadius", "outerRadius", "cornerRadius", "formattedArcLabel", "isHighlighted", "isFaded", "style"];

package/PieChart/PieArcLabelPlot.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["arcLabel", "arcLabelMinAngle", "arcLabelRadius", "cornerRadius", "data", "faded", "highlighted", "id", "innerRadius", "outerRadius", "paddingAngle", "skipAnimation", "slotProps", "slots"],

package/PieChart/PieArcPlot.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["slots", "slotProps", "innerRadius", "outerRadius", "cornerRadius", "paddingAngle", "id", "highlighted", "faded", "data", "onItemClick", "skipAnimation"],

package/PieChart/PieChart.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["xAxis", "yAxis", "series", "width", "height", "margin", "colors", "sx", "tooltip", "axisHighlight", "skipAnimation", "legend", "topAxis", "leftAxis", "rightAxis", "bottomAxis", "children", "slots", "slotProps", "onItemClick", "loading", "highlightedItem", "onHighlightChange", "className"];
@@ -197,6 +199,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     itemMarkWidth: PropTypes.number,
     labelStyle: PropTypes.object,
     markGap: PropTypes.number,
+    onItemClick: PropTypes.func,
     padding: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
       bottom: PropTypes.number,
       left: PropTypes.number,

package/PieChart/PiePlot.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { DrawingContext } from "../context/DrawingProvider.js";

package/PieChart/dataTransform/useTransformData.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useHighlighted } from "../../context/index.js";

package/PieChart/legend.js

@@ -11,9 +11,11 @@ const legendGetter = params => {
         return;
       }
       acc.push({
+        id: item.id,
+        seriesId,
         color: item.color,
         label: formattedLabel,
-        id: item.id
+        itemId: item.id
       });
     });
     return acc;

package/ResponsiveChartContainer/ResponsiveChartContainer.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';

package/ResponsiveChartContainer/useChartContainerDimensions.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import ownerWindow from '@mui/utils/ownerWindow';
@@ -45,7 +47,7 @@ export const useChartContainerDimensions = (inWidth, inHeight) => {
     }
     return () => {
       if (animationFrame) {
-        window.cancelAnimationFrame(animationFrame);
+        cancelAnimationFrame(animationFrame);
       }
       if (elementToObserve) {
         observer.unobserve(elementToObserve);

package/ResponsiveChartContainer/useResponsiveChartContainerProps.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["width", "height", "margin", "children", "series", "colors", "dataset", "desc", "disableAxisListener", "highlightedItem", "onHighlightChange", "plugins", "sx", "title", "viewBox", "xAxis", "yAxis", "zAxis"];

package/ScatterChart/Scatter.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';

package/ScatterChart/ScatterChart.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -132,6 +134,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     itemMarkWidth: PropTypes.number,
     labelStyle: PropTypes.object,
     markGap: PropTypes.number,
+    onItemClick: PropTypes.func,
     padding: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
       bottom: PropTypes.number,
       left: PropTypes.number,

package/ScatterChart/ScatterPlot.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';

package/ScatterChart/legend.js

@@ -10,9 +10,10 @@ const legendGetter = params => {
       return acc;
     }
     acc.push({
+      id: seriesId,
+      seriesId,
       color: series[seriesId].color,
-      label: formattedLabel,
-      id: seriesId
+      label: formattedLabel
     });
     return acc;
   }, []);

package/ScatterChart/useScatterChartProps.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["xAxis", "yAxis", "zAxis", "series", "tooltip", "axisHighlight", "voronoiMaxRadius", "disableVoronoi", "legend", "width", "height", "margin", "colors", "sx", "grid", "topAxis", "leftAxis", "rightAxis", "bottomAxis", "onItemClick", "children", "slots", "slotProps", "loading", "highlightedItem", "onHighlightChange", "className"];

package/SparkLineChart/SparkLineChart.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["xAxis", "yAxis", "width", "height", "margin", "colors", "sx", "showTooltip", "tooltip", "showHighlight", "axisHighlight", "children", "slots", "slotProps", "data", "plotType", "valueFormatter", "area", "curve", "className"];

package/context/CartesianProvider/CartesianProvider.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { useDrawingArea } from "../../hooks/useDrawingArea.js";
 import { useSeries } from "../../hooks/useSeries.js";

package/context/CartesianProvider/useCartesianContext.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { CartesianContext } from "./CartesianContext.js";
 export const useCartesianContext = () => {

package/context/DrawingProvider.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useId from '@mui/utils/useId';

package/context/HighlightedProvider/HighlightedProvider.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["highlighted", "faded"];

package/context/HighlightedProvider/useHighlighted.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { HighlightedContext } from "./HighlightedContext.js";
 

package/context/HighlightedProvider/useItemHighlighted.js

@@ -1,3 +1,5 @@
+'use client';
+
 import { useHighlighted } from "./useHighlighted.js";
 /**
  * A hook to check the highlighted state of the item.

package/context/InteractionProvider.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";

package/context/PluginProvider/PluginProvider.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { PluginContext } from "./PluginContext.js";
 import { mergePlugins } from "./mergePlugins.js";

package/context/PluginProvider/useColorProcessor.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { PluginContext } from "./PluginContext.js";
 export function useColorProcessor(seriesType) {

package/context/PluginProvider/useSeriesFormatter.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { PluginContext } from "./PluginContext.js";
 export function useSeriesFormatter(seriesType) {

package/context/SeriesProvider/SeriesProvider.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { useTheme } from '@mui/material/styles';
 import { blueberryTwilightPalette } from "../../colorPalettes/index.js";

package/context/ZAxisContextProvider.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';

package/hooks/useAxis.js

@@ -1,3 +1,5 @@
+'use client';
+
 import { useCartesianContext } from "../context/CartesianProvider/index.js";
 export function useXAxis(identifier) {
   const {

package/hooks/useAxisEvents.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { InteractionContext } from "../context/InteractionProvider.js";
 import { useCartesianContext } from "../context/CartesianProvider/index.js";

package/hooks/useChartDimensions.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { DEFAULT_MARGINS } from "../constants/index.js";

package/hooks/useChartId.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { DrawingContext } from "../context/DrawingProvider.js";
 export function useChartId() {

package/hooks/useColorScale.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { useCartesianContext } from "../context/CartesianProvider/index.js";
 import { ZAxisContext } from "../context/ZAxisContextProvider.js";

package/hooks/useDrawingArea.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { DrawingContext } from "../context/DrawingProvider.js";
 export function useDrawingArea() {

package/hooks/useInteractionItemProps.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { InteractionContext } from "../context/InteractionProvider.js";
 import { useHighlighted } from "../context/index.js";

package/hooks/useMounted.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 export function useMounted(defer = false) {

package/hooks/useReducedMotion.js

@@ -1,3 +1,5 @@
+'use client';
+
 import { useIsomorphicLayoutEffect, Globals } from '@react-spring/web';
 const handleMediaChange = e => {
   Globals.assign({

package/hooks/useScale.js

@@ -1,3 +1,5 @@
+'use client';
+
 import { isBandScale } from "../internals/isBandScale.js";
 import { useXAxis, useYAxis } from "./useAxis.js";
 

package/hooks/useSeries.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { SeriesContext } from "../context/SeriesProvider/index.js";
 

package/hooks/useSvgRef.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { SvgContext } from "../context/DrawingProvider.js";
 export function useSvgRef() {

package/hooks/useTicks.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { isBandScale } from "../internals/isBandScale.js";
 import { isInfinity } from "../internals/isInfinity.js";

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v7.16.0
+ * @mui/x-charts v7.17.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/BarChart/BarChart.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -144,6 +146,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     itemMarkWidth: PropTypes.number,
     labelStyle: PropTypes.object,
     markGap: PropTypes.number,
+    onItemClick: PropTypes.func,
     padding: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
       bottom: PropTypes.number,
       left: PropTypes.number,

package/modern/BarChart/BarElement.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["id", "dataIndex", "classes", "color", "slots", "slotProps", "style", "onClick"];

package/modern/BarChart/BarLabel/BarLabel.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["seriesId", "dataIndex", "color", "isFaded", "isHighlighted", "classes"];

package/modern/BarChart/BarPlot.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["skipAnimation", "onItemClick", "borderRadius", "barLabel"];

package/modern/BarChart/legend.js

@@ -10,9 +10,10 @@ const legendGetter = params => {
       return acc;
     }
     acc.push({
+      id: seriesId,
+      seriesId,
       color: series[seriesId].color,
-      label: formattedLabel,
-      id: seriesId
+      label: formattedLabel
     });
     return acc;
   }, []);

package/modern/BarChart/useBarChartProps.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["xAxis", "yAxis", "series", "width", "height", "margin", "colors", "dataset", "sx", "tooltip", "onAxisClick", "axisHighlight", "legend", "grid", "topAxis", "leftAxis", "rightAxis", "bottomAxis", "children", "slots", "slotProps", "skipAnimation", "loading", "layout", "onItemClick", "highlightedItem", "onHighlightChange", "borderRadius", "barLabel", "className"];

package/modern/ChartContainer/ChartContainer.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';

package/modern/ChartContainer/useChartContainerProps.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["width", "height", "series", "margin", "xAxis", "yAxis", "zAxis", "colors", "dataset", "sx", "title", "desc", "disableAxisListener", "highlightedItem", "onHighlightChange", "plugins", "children"];

package/modern/ChartContainer/useDefaultizeAxis.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from "../constants/index.js";

package/modern/ChartsAxis/ChartsAxis.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';

package/modern/ChartsAxisHighlight/ChartsAxisHighlight.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';

package/modern/ChartsClipPath/ChartsClipPath.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';

package/modern/ChartsGrid/ChartsGrid.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["vertical", "horizontal"];

package/modern/ChartsLegend/ChartsLegend.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["slots", "slotProps"];
@@ -21,7 +23,8 @@ const useUtilityClasses = ownerState => {
     root: ['root', direction],
     mark: ['mark'],
     label: ['label'],
-    series: ['series']
+    series: ['series'],
+    itemBackground: ['itemBackground']
   };
   return composeClasses(slots, getLegendUtilityClass, classes);
 };
@@ -108,6 +111,13 @@ process.env.NODE_ENV !== "production" ? ChartsLegend.propTypes = {
    * @default 5
    */
   markGap: PropTypes.number,
+  /**
+   * Callback fired when a legend item is clicked.
+   * @param {React.MouseEvent<SVGRectElement, MouseEvent>} event The click event.
+   * @param {SeriesLegendItemContext} legendItem The legend item data.
+   * @param {number} index The index of the clicked legend item.
+   */
+  onItemClick: PropTypes.func,
   /**
    * Legend padding (in px).
    * Can either be a single number, or an object with top, left, bottom, right properties.