@mui/x-charts 7.9.0 → 7.11.0

package/esm/SparkLineChart/SparkLineChart.js

@@ -1,4 +1,6 @@
 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"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { BarPlot } from '../BarChart';
@@ -26,33 +28,35 @@ const SPARKLINE_DEFAULT_MARGIN = {
  */
 const SparkLineChart = /*#__PURE__*/React.forwardRef(function SparkLineChart(props, ref) {
   const {
-    xAxis,
-    yAxis,
-    width,
-    height,
-    margin = SPARKLINE_DEFAULT_MARGIN,
-    colors,
-    sx,
-    showTooltip,
-    tooltip,
-    showHighlight,
-    axisHighlight: inAxisHighlight,
-    children,
-    slots,
-    slotProps,
-    data,
-    plotType = 'line',
-    valueFormatter = value => value === null ? '' : value.toString(),
-    area,
-    curve = 'linear'
-  } = props;
+      xAxis,
+      yAxis,
+      width,
+      height,
+      margin = SPARKLINE_DEFAULT_MARGIN,
+      colors,
+      sx,
+      showTooltip,
+      tooltip,
+      showHighlight,
+      axisHighlight: inAxisHighlight,
+      children,
+      slots,
+      slotProps,
+      data,
+      plotType = 'line',
+      valueFormatter = value => value === null ? '' : value.toString(),
+      area,
+      curve = 'linear',
+      className
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
   const defaultXHighlight = showHighlight && plotType === 'bar' ? {
     x: 'band'
   } : {
     x: 'none'
   };
   const axisHighlight = _extends({}, defaultXHighlight, inAxisHighlight);
-  return /*#__PURE__*/_jsxs(ResponsiveChartContainer, {
+  return /*#__PURE__*/_jsxs(ResponsiveChartContainer, _extends({}, other, {
     ref: ref,
     series: [_extends({
       type: plotType,
@@ -66,6 +70,7 @@ const SparkLineChart = /*#__PURE__*/React.forwardRef(function SparkLineChart(pro
     width: width,
     height: height,
     margin: margin,
+    className: className,
     xAxis: [_extends({
       id: DEFAULT_X_AXIS_KEY,
       scaleType: plotType === 'bar' ? 'band' : 'point',
@@ -104,7 +109,7 @@ const SparkLineChart = /*#__PURE__*/React.forwardRef(function SparkLineChart(pro
       slotProps: slotProps,
       slots: slots
     })), children]
-  });
+  }));
 });
 process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
   // ----------------------------- Warning --------------------------------

package/esm/context/CartesianProvider/CartesianProvider.js

@@ -2,13 +2,12 @@ import * as React from 'react';
 import { useDrawingArea } from '../../hooks/useDrawingArea';
 import { useSeries } from '../../hooks/useSeries';
 import { CartesianContext } from './CartesianContext';
-import { normalizeAxis } from './normalizeAxis';
 import { computeValue } from './computeValue';
 import { jsx as _jsx } from "react/jsx-runtime";
 function CartesianContextProvider(props) {
   const {
-    xAxis: inXAxis,
-    yAxis: inYAxis,
+    xAxis,
+    yAxis,
     dataset,
     xExtremumGetters,
     yExtremumGetters,
@@ -16,10 +15,22 @@ function CartesianContextProvider(props) {
   } = props;
   const formattedSeries = useSeries();
   const drawingArea = useDrawingArea();
-  const xAxis = React.useMemo(() => normalizeAxis(inXAxis, dataset, 'x'), [inXAxis, dataset]);
-  const yAxis = React.useMemo(() => normalizeAxis(inYAxis, dataset, 'y'), [inYAxis, dataset]);
-  const xValues = React.useMemo(() => computeValue(drawingArea, formattedSeries, xAxis, xExtremumGetters, 'x'), [drawingArea, formattedSeries, xAxis, xExtremumGetters]);
-  const yValues = React.useMemo(() => computeValue(drawingArea, formattedSeries, yAxis, yExtremumGetters, 'y'), [drawingArea, formattedSeries, yAxis, yExtremumGetters]);
+  const xValues = React.useMemo(() => computeValue({
+    drawingArea,
+    formattedSeries,
+    axis: xAxis,
+    extremumGetters: xExtremumGetters,
+    dataset,
+    axisDirection: 'x'
+  }), [drawingArea, formattedSeries, xAxis, xExtremumGetters, dataset]);
+  const yValues = React.useMemo(() => computeValue({
+    drawingArea,
+    formattedSeries,
+    axis: yAxis,
+    extremumGetters: yExtremumGetters,
+    dataset,
+    axisDirection: 'y'
+  }), [drawingArea, formattedSeries, yAxis, yExtremumGetters, dataset]);
   const value = React.useMemo(() => ({
     isInitialized: true,
     data: {

package/esm/context/CartesianProvider/computeValue.js

@@ -1,13 +1,13 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { scaleBand, scalePoint, scaleTime } from 'd3-scale';
-import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '../../constants';
 import { isBandScaleConfig, isPointScaleConfig } from '../../models/axis';
 import { getColorScale, getOrdinalColorScale } from '../../internals/colorScale';
 import { getTickNumber } from '../../hooks/useTicks';
 import { getScale } from '../../internals/getScale';
 import { getAxisExtremum } from './getAxisExtremum';
-const getRange = (drawingArea, axisName, isReverse) => {
-  const range = axisName === 'x' ? [drawingArea.left, drawingArea.left + drawingArea.width] : [drawingArea.top + drawingArea.height, drawingArea.top];
+import { normalizeAxis } from './normalizeAxis';
+const getRange = (drawingArea, axisDirection, isReverse) => {
+  const range = axisDirection === 'x' ? [drawingArea.left, drawingArea.left + drawingArea.width] : [drawingArea.top + drawingArea.height, drawingArea.top];
   return isReverse ? range.reverse() : range;
 };
 const zoomedScaleRange = (scaleRange, zoomRange) => {
@@ -29,26 +29,30 @@ function createDateFormatter(axis, range) {
 }
 const DEFAULT_CATEGORY_GAP_RATIO = 0.2;
 const DEFAULT_BAR_GAP_RATIO = 0.1;
-export function computeValue(drawingArea, formattedSeries, inAxis, extremumGetters, axisName, zoomRange = [0, 100]) {
-  const DEFAULT_AXIS_KEY = axisName === 'x' ? DEFAULT_X_AXIS_KEY : DEFAULT_Y_AXIS_KEY;
-  const allAxis = [...(inAxis?.map((axis, index) => _extends({
-    id: `defaultized-${axisName}-axis-${index}`
-  }, axis)) ?? []), ...(inAxis === undefined || inAxis.findIndex(({
-    id
-  }) => id === DEFAULT_AXIS_KEY) === -1 ? [{
-    id: DEFAULT_AXIS_KEY,
-    scaleType: 'linear'
-  }] : [])];
+export function computeValue({
+  drawingArea,
+  formattedSeries,
+  axis: inAxis,
+  extremumGetters,
+  dataset,
+  axisDirection,
+  zoomData
+}) {
+  const allAxis = normalizeAxis(inAxis, dataset, axisDirection);
   const completeAxis = {};
   allAxis.forEach((axis, axisIndex) => {
     const isDefaultAxis = axisIndex === 0;
     const [minData, maxData] = getAxisExtremum(axis, extremumGetters, isDefaultAxis, formattedSeries);
-    const range = getRange(drawingArea, axisName, axis.reverse);
+    const zoom = zoomData?.find(({
+      axisId
+    }) => axisId === axis.id);
+    const zoomRange = zoom ? [zoom.start, zoom.end] : [0, 100];
+    const range = getRange(drawingArea, axisDirection, axis.reverse);
     if (isBandScaleConfig(axis)) {
       const categoryGapRatio = axis.categoryGapRatio ?? DEFAULT_CATEGORY_GAP_RATIO;
       const barGapRatio = axis.barGapRatio ?? DEFAULT_BAR_GAP_RATIO;
       // Reverse range because ordinal scales are presented from top to bottom on y-axis
-      const scaleRange = axisName === 'x' ? range : [range[1], range[0]];
+      const scaleRange = axisDirection === 'x' ? range : [range[1], range[0]];
       const zoomedRange = zoomedScaleRange(scaleRange, zoomRange);
       completeAxis[axis.id] = _extends({
         categoryGapRatio,
@@ -66,7 +70,7 @@ export function computeValue(drawingArea, formattedSeries, inAxis, extremumGette
       }
     }
     if (isPointScaleConfig(axis)) {
-      const scaleRange = axisName === 'x' ? range : [...range].reverse();
+      const scaleRange = axisDirection === 'x' ? range : [...range].reverse();
       const zoomedRange = zoomedScaleRange(scaleRange, zoomRange);
       completeAxis[axis.id] = _extends({}, axis, {
         scale: scalePoint(axis.data, zoomedRange),

package/esm/context/CartesianProvider/defaultizeAxis.js

@@ -0,0 +1,13 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '../../constants';
+export const defaultizeAxis = (inAxis, axisName) => {
+  const DEFAULT_AXIS_KEY = axisName === 'x' ? DEFAULT_X_AXIS_KEY : DEFAULT_Y_AXIS_KEY;
+  return [...(inAxis?.map((axis, index) => _extends({
+    id: `defaultized-${axisName}-axis-${index}`
+  }, axis)) ?? []), ...(inAxis === undefined || inAxis.findIndex(({
+    id
+  }) => id === DEFAULT_AXIS_KEY) === -1 ? [{
+    id: DEFAULT_AXIS_KEY,
+    scaleType: 'linear'
+  }] : [])];
+};

package/esm/context/CartesianProvider/index.js

@@ -1,10 +1,8 @@
 import { computeValue } from './computeValue';
-import { normalizeAxis } from './normalizeAxis';
 export * from './CartesianProvider';
 export * from './CartesianContext';
 export * from './useCartesianContext';
 const cartesianProviderUtils = {
-  computeValue,
-  normalizeAxis
+  computeValue
 };
 export { cartesianProviderUtils };

package/esm/context/CartesianProvider/normalizeAxis.js

@@ -11,5 +11,5 @@ export const normalizeAxis = (axis, dataset, axisName) => {
     return _extends({}, axisConfig, {
       data: dataset.map(d => d[dataKey])
     });
-  });
+  }) ?? [];
 };

package/esm/context/DrawingProvider.js

@@ -14,7 +14,8 @@ export const DrawingContext = /*#__PURE__*/React.createContext({
   right: 0,
   height: 300,
   width: 400,
-  chartId: ''
+  chartId: '',
+  isPointInside: () => false
 });
 if (process.env.NODE_ENV !== 'production') {
   DrawingContext.displayName = 'DrawingContext';
@@ -38,9 +39,15 @@ export function DrawingProvider(props) {
   } = props;
   const drawingArea = useChartDimensions(width, height, margin);
   const chartId = useId();
+  const isPointInside = React.useCallback(({
+    x,
+    y
+  }) => x >= drawingArea.left && x <= drawingArea.left + drawingArea.width && y >= drawingArea.top && y <= drawingArea.top + drawingArea.height, [drawingArea]);
   const value = React.useMemo(() => _extends({
     chartId: chartId ?? ''
-  }, drawingArea), [chartId, drawingArea]);
+  }, drawingArea, {
+    isPointInside
+  }), [chartId, drawingArea, isPointInside]);
   const refValue = React.useMemo(() => ({
     isInitialized: true,
     data: svgRef

package/esm/context/HighlightedProvider/HighlightedProvider.js

@@ -15,11 +15,11 @@ const mergeDeprecatedOptions = options => {
       highlighted,
       faded
     } = _ref,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+    other = _objectWithoutPropertiesLoose(_ref, _excluded);
   return _extends({
     highlight: highlighted,
     fade: faded
-  }, rest);
+  }, other);
 };
 function HighlightedProvider({
   children,

package/esm/hooks/useAxisEvents.js

@@ -10,12 +10,7 @@ function getAsANumber(value) {
 }
 export const useAxisEvents = disableAxisListener => {
   const svgRef = useSvgRef();
-  const {
-    left,
-    top,
-    width,
-    height
-  } = useDrawingArea();
+  const drawingArea = useDrawingArea();
   const {
     xAxis,
     yAxis,
@@ -103,9 +98,7 @@ export const useAxisEvents = disableAxisListener => {
         x: svgPoint.x,
         y: svgPoint.y
       };
-      const outsideX = svgPoint.x < left || svgPoint.x > left + width;
-      const outsideY = svgPoint.y < top || svgPoint.y > top + height;
-      if (outsideX || outsideY) {
+      if (!drawingArea.isPointInside(svgPoint)) {
         dispatch({
           type: 'exitChart'
         });
@@ -142,5 +135,5 @@ export const useAxisEvents = disableAxisListener => {
       element.removeEventListener('pointercancel', handleOut);
       element.removeEventListener('pointerleave', handleOut);
     };
-  }, [svgRef, dispatch, left, width, top, height, usedYAxis, yAxis, usedXAxis, xAxis, disableAxisListener]);
+  }, [svgRef, dispatch, usedYAxis, yAxis, usedXAxis, xAxis, disableAxisListener, drawingArea]);
 };

package/esm/hooks/useDrawingArea.js

@@ -7,7 +7,8 @@ export function useDrawingArea() {
     width,
     height,
     bottom,
-    right
+    right,
+    isPointInside
   } = React.useContext(DrawingContext);
   return React.useMemo(() => ({
     left,
@@ -15,6 +16,7 @@ export function useDrawingArea() {
     width,
     height,
     bottom,
-    right
-  }), [height, left, top, width, bottom, right]);
+    right,
+    isPointInside
+  }), [height, left, top, width, bottom, right, isPointInside]);
 }

package/esm/hooks/useReducedMotion.js

@@ -26,9 +26,11 @@ export const useReducedMotion = () => {
       });
     };
     handleMediaChange(mql);
-    mql.addEventListener('change', handleMediaChange);
+
+    // MatchMedia is not fully supported in all environments, so we need to check if it exists before calling addEventListener
+    mql.addEventListener?.('change', handleMediaChange);
     return () => {
-      mql.removeEventListener('change', handleMediaChange);
+      mql.removeEventListener?.('change', handleMediaChange);
     };
   }, []);
 };

package/esm/internals/cleanId.js

@@ -0,0 +1,6 @@
+/**
+ * Remove spaces to have viable ids
+ */
+export function cleanId(id) {
+  return id.replace(' ', '_');
+}

package/esm/internals/components/ChartsAxesGradients/ChartsContinuousGradient.js

@@ -4,6 +4,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const PX_PRECISION = 10;
 export default function ChartsContinuousGradient(props) {
   const {
+    gradientUnits,
     isReversed,
     gradientId,
     size,
@@ -26,8 +27,8 @@ export default function ChartsContinuousGradient(props) {
     x2: "0",
     y1: "0",
     y2: "0",
-    [`${direction}${isReversed ? 1 : 2}`]: `${size}px`,
-    gradientUnits: "userSpaceOnUse" // Use the SVG coordinate instead of the component ones.
+    [`${direction}${isReversed ? 1 : 2}`]: gradientUnits === 'objectBoundingBox' ? 1 : `${size}px`,
+    gradientUnits: gradientUnits ?? 'userSpaceOnUse' // Use the SVG coordinate instead of the component ones.
     ,
     children: Array.from({
       length: numberOfPoints + 1

package/esm/internals/{utils.js → getPercentageValue.js}

@@ -1,8 +1,3 @@
-// Returns the index of a defined shape
-export function getSymbol(shape) {
-  const symbolNames = 'circle cross diamond square star triangle wye'.split(/ /);
-  return symbolNames.indexOf(shape) || 0;
-}
 /**
  * Helper that converts values and percentages into values.
  * @param value The value provided by the developer. Can either be a number or a string with '%' or 'px'.
@@ -29,12 +24,5 @@ export function getPercentageValue(value, refValue) {
       return val;
     }
   }
-  throw Error(`MUI-Charts: Received an unknown value "${value}". It should be a number, or a string with a percentage value.`);
-}
-
-/**
- * Remove spaces to have viable ids
- */
-export function cleanId(id) {
-  return id.replace(' ', '_');
+  throw Error(`MUI X Charts: Received an unknown value "${value}". It should be a number, or a string with a percentage value.`);
 }

package/esm/internals/getSymbol.js

@@ -0,0 +1,5 @@
+// Returns the index of a defined shape
+export function getSymbol(shape) {
+  const symbolNames = 'circle cross diamond square star triangle wye'.split(/ /);
+  return symbolNames.indexOf(shape) || 0;
+}

package/esm/internals/index.js

@@ -8,16 +8,18 @@ export { useReducedMotion } from '../hooks/useReducedMotion';
 export { useSeries } from '../hooks/useSeries';
 export { useInteractionItemProps } from '../hooks/useInteractionItemProps';
 export { useDrawingArea } from '../hooks/useDrawingArea';
-export { useChartContainerHooks } from '../ChartContainer/useChartContainerHooks';
 export { useScatterChartProps } from '../ScatterChart/useScatterChartProps';
 export { useLineChartProps } from '../LineChart/useLineChartProps';
 export { useBarChartProps } from '../BarChart/useBarChartProps';
+export { useResponsiveChartContainerProps } from '../ResponsiveChartContainer/useResponsiveChartContainerProps';
+export { useChartContainerProps } from '../ChartContainer/useChartContainerProps';
 
 // utils
 export * from './defaultizeValueFormatter';
 export * from './configInit';
 export * from './getLabel';
 export * from './getSVGPoint';
+export * from './isDefined';
 
 // contexts
 

package/esm/internals/isDefined.js

@@ -0,0 +1,3 @@
+export function isDefined(value) {
+  return value !== null && value !== undefined;
+}

package/esm/internals/notNull.js

@@ -0,0 +1,3 @@
+export function notNull(value) {
+  return value !== null;
+}

package/esm/internals/ts-generic.js

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

package/hooks/useAxisEvents.js

@@ -18,12 +18,7 @@ function getAsANumber(value) {
 }
 const useAxisEvents = disableAxisListener => {
   const svgRef = (0, _useSvgRef.useSvgRef)();
-  const {
-    left,
-    top,
-    width,
-    height
-  } = (0, _useDrawingArea.useDrawingArea)();
+  const drawingArea = (0, _useDrawingArea.useDrawingArea)();
   const {
     xAxis,
     yAxis,
@@ -111,9 +106,7 @@ const useAxisEvents = disableAxisListener => {
         x: svgPoint.x,
         y: svgPoint.y
       };
-      const outsideX = svgPoint.x < left || svgPoint.x > left + width;
-      const outsideY = svgPoint.y < top || svgPoint.y > top + height;
-      if (outsideX || outsideY) {
+      if (!drawingArea.isPointInside(svgPoint)) {
         dispatch({
           type: 'exitChart'
         });
@@ -150,6 +143,6 @@ const useAxisEvents = disableAxisListener => {
       element.removeEventListener('pointercancel', handleOut);
       element.removeEventListener('pointerleave', handleOut);
     };
-  }, [svgRef, dispatch, left, width, top, height, usedYAxis, yAxis, usedXAxis, xAxis, disableAxisListener]);
+  }, [svgRef, dispatch, usedYAxis, yAxis, usedXAxis, xAxis, disableAxisListener, drawingArea]);
 };
 exports.useAxisEvents = useAxisEvents;

package/hooks/useDrawingArea.js

@@ -15,7 +15,8 @@ function useDrawingArea() {
     width,
     height,
     bottom,
-    right
+    right,
+    isPointInside
   } = React.useContext(_DrawingProvider.DrawingContext);
   return React.useMemo(() => ({
     left,
@@ -23,6 +24,7 @@ function useDrawingArea() {
     width,
     height,
     bottom,
-    right
-  }), [height, left, top, width, bottom, right]);
+    right,
+    isPointInside
+  }), [height, left, top, width, bottom, right, isPointInside]);
 }

package/hooks/useReducedMotion.js

@@ -31,9 +31,11 @@ const useReducedMotion = () => {
       });
     };
     handleMediaChange(mql);
-    mql.addEventListener('change', handleMediaChange);
+
+    // MatchMedia is not fully supported in all environments, so we need to check if it exists before calling addEventListener
+    mql.addEventListener?.('change', handleMediaChange);
     return () => {
-      mql.removeEventListener('change', handleMediaChange);
+      mql.removeEventListener?.('change', handleMediaChange);
     };
   }, []);
 };

package/index.js

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

package/internals/cleanId.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Remove spaces to have viable ids
+ */
+export declare function cleanId(id: string): string;

package/internals/cleanId.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.cleanId = cleanId;
+/**
+ * Remove spaces to have viable ids
+ */
+function cleanId(id) {
+  return id.replace(' ', '_');
+}

package/internals/components/ChartsAxesGradients/ChartsContinuousGradient.d.ts

@@ -8,6 +8,12 @@ type ChartsContinuousGradientProps = {
     scale: (value: any) => number | undefined;
     colorMap: ContinuousColorConfig;
     colorScale: (value: any) => string | null;
+    /**
+     * Defines the coordinate base to use:
+     * - 'userSpaceOnUse': uses the coordinate of the SVG (values in px).
+     * - 'objectBoundingBox': uses the coordinate ot the object on which gradient is applied (values from 0 to 1).
+     */
+    gradientUnits?: 'objectBoundingBox' | 'userSpaceOnUse';
 };
 export default function ChartsContinuousGradient(props: ChartsContinuousGradientProps): React.JSX.Element | null;
 export {};

package/internals/components/ChartsAxesGradients/ChartsContinuousGradient.js

@@ -12,6 +12,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 const PX_PRECISION = 10;
 function ChartsContinuousGradient(props) {
   const {
+    gradientUnits,
     isReversed,
     gradientId,
     size,
@@ -34,8 +35,8 @@ function ChartsContinuousGradient(props) {
     x2: "0",
     y1: "0",
     y2: "0",
-    [`${direction}${isReversed ? 1 : 2}`]: `${size}px`,
-    gradientUnits: "userSpaceOnUse" // Use the SVG coordinate instead of the component ones.
+    [`${direction}${isReversed ? 1 : 2}`]: gradientUnits === 'objectBoundingBox' ? 1 : `${size}px`,
+    gradientUnits: gradientUnits ?? 'userSpaceOnUse' // Use the SVG coordinate instead of the component ones.
     ,
     children: Array.from({
       length: numberOfPoints + 1

package/internals/getPercentageValue.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Helper that converts values and percentages into values.
+ * @param value The value provided by the developer. Can either be a number or a string with '%' or 'px'.
+ * @param refValue The numerical value associated to 100%.
+ * @returns The numerical value associated to the provided value.
+ */
+export declare function getPercentageValue(value: number | string, refValue: number): number;

package/internals/{utils.js → getPercentageValue.js}

@@ -3,14 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.cleanId = cleanId;
 exports.getPercentageValue = getPercentageValue;
-exports.getSymbol = getSymbol;
-// Returns the index of a defined shape
-function getSymbol(shape) {
-  const symbolNames = 'circle cross diamond square star triangle wye'.split(/ /);
-  return symbolNames.indexOf(shape) || 0;
-}
 /**
  * Helper that converts values and percentages into values.
  * @param value The value provided by the developer. Can either be a number or a string with '%' or 'px'.
@@ -37,12 +30,5 @@ function getPercentageValue(value, refValue) {
       return val;
     }
   }
-  throw Error(`MUI-Charts: Received an unknown value "${value}". It should be a number, or a string with a percentage value.`);
-}
-
-/**
- * Remove spaces to have viable ids
- */
-function cleanId(id) {
-  return id.replace(' ', '_');
+  throw Error(`MUI X Charts: Received an unknown value "${value}". It should be a number, or a string with a percentage value.`);
 }

package/internals/getSymbol.d.ts

@@ -0,0 +1,2 @@
+export type SymbolsTypes = 'circle' | 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye';
+export declare function getSymbol(shape: SymbolsTypes): number;

package/internals/getSymbol.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getSymbol = getSymbol;
+// Returns the index of a defined shape
+function getSymbol(shape) {
+  const symbolNames = 'circle cross diamond square star triangle wye'.split(/ /);
+  return symbolNames.indexOf(shape) || 0;
+}

package/internals/index.d.ts

@@ -5,14 +5,16 @@ export { useReducedMotion } from '../hooks/useReducedMotion';
 export { useSeries } from '../hooks/useSeries';
 export { useInteractionItemProps } from '../hooks/useInteractionItemProps';
 export { useDrawingArea } from '../hooks/useDrawingArea';
-export { useChartContainerHooks } from '../ChartContainer/useChartContainerHooks';
 export { useScatterChartProps } from '../ScatterChart/useScatterChartProps';
 export { useLineChartProps } from '../LineChart/useLineChartProps';
 export { useBarChartProps } from '../BarChart/useBarChartProps';
+export { useResponsiveChartContainerProps } from '../ResponsiveChartContainer/useResponsiveChartContainerProps';
+export { useChartContainerProps } from '../ChartContainer/useChartContainerProps';
 export * from './defaultizeValueFormatter';
 export * from './configInit';
 export * from './getLabel';
 export * from './getSVGPoint';
+export * from './isDefined';
 export * from '../context/CartesianProvider';
 export * from '../context/DrawingProvider';
 export * from '../context/ColorProvider';