@mui/x-charts 7.14.0 → 7.16.0

package/node/context/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  ZAxisContextProvider: true
+};
+Object.defineProperty(exports, "ZAxisContextProvider", {
+  enumerable: true,
+  get: function () {
+    return _ZAxisContextProvider.ZAxisContextProvider;
+  }
+});
+var _HighlightedProvider = require("./HighlightedProvider");
+Object.keys(_HighlightedProvider).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _HighlightedProvider[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _HighlightedProvider[key];
+    }
+  });
+});
+var _ZAxisContextProvider = require("./ZAxisContextProvider");

package/node/hooks/index.js

@@ -0,0 +1,115 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  unstable_useSeries: true,
+  unstable_usePieSeries: true,
+  unstable_useLineSeries: true,
+  unstable_useBarSeries: true,
+  unstable_useScatterSeries: true
+};
+Object.defineProperty(exports, "unstable_useBarSeries", {
+  enumerable: true,
+  get: function () {
+    return _useSeries.useBarSeries;
+  }
+});
+Object.defineProperty(exports, "unstable_useLineSeries", {
+  enumerable: true,
+  get: function () {
+    return _useSeries.useLineSeries;
+  }
+});
+Object.defineProperty(exports, "unstable_usePieSeries", {
+  enumerable: true,
+  get: function () {
+    return _useSeries.usePieSeries;
+  }
+});
+Object.defineProperty(exports, "unstable_useScatterSeries", {
+  enumerable: true,
+  get: function () {
+    return _useSeries.useScatterSeries;
+  }
+});
+Object.defineProperty(exports, "unstable_useSeries", {
+  enumerable: true,
+  get: function () {
+    return _useSeries.useSeries;
+  }
+});
+var _useDrawingArea = require("./useDrawingArea");
+Object.keys(_useDrawingArea).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _useDrawingArea[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useDrawingArea[key];
+    }
+  });
+});
+var _useChartId = require("./useChartId");
+Object.keys(_useChartId).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _useChartId[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useChartId[key];
+    }
+  });
+});
+var _useScale = require("./useScale");
+Object.keys(_useScale).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _useScale[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useScale[key];
+    }
+  });
+});
+var _useAxis = require("./useAxis");
+Object.keys(_useAxis).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _useAxis[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useAxis[key];
+    }
+  });
+});
+var _useColorScale = require("./useColorScale");
+Object.keys(_useColorScale).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _useColorScale[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useColorScale[key];
+    }
+  });
+});
+var _useSvgRef = require("./useSvgRef");
+Object.keys(_useSvgRef).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _useSvgRef[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useSvgRef[key];
+    }
+  });
+});
+var _useSeries = require("./useSeries");

package/node/hooks/useAxis.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useXAxis = useXAxis;
+exports.useYAxis = useYAxis;
+var _CartesianProvider = require("../context/CartesianProvider");
+function useXAxis(identifier) {
+  const {
+    xAxis,
+    xAxisIds
+  } = (0, _CartesianProvider.useCartesianContext)();
+  const id = typeof identifier === 'string' ? identifier : xAxisIds[identifier ?? 0];
+  return xAxis[id];
+}
+function useYAxis(identifier) {
+  const {
+    yAxis,
+    yAxisIds
+  } = (0, _CartesianProvider.useCartesianContext)();
+  const id = typeof identifier === 'string' ? identifier : yAxisIds[identifier ?? 0];
+  return yAxis[id];
+}

package/{esm → node}/hooks/useAxisEvents.js

@@ -1,25 +1,32 @@
-import * as React from 'react';
-import { InteractionContext } from '../context/InteractionProvider';
-import { useCartesianContext } from '../context/CartesianProvider';
-import { isBandScale } from '../internals/isBandScale';
-import { getSVGPoint } from '../internals/getSVGPoint';
-import { useSvgRef } from './useSvgRef';
-import { useDrawingArea } from './useDrawingArea';
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useAxisEvents = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _InteractionProvider = require("../context/InteractionProvider");
+var _CartesianProvider = require("../context/CartesianProvider");
+var _isBandScale = require("../internals/isBandScale");
+var _getSVGPoint = require("../internals/getSVGPoint");
+var _useSvgRef = require("./useSvgRef");
+var _useDrawingArea = require("./useDrawingArea");
 function getAsANumber(value) {
   return value instanceof Date ? value.getTime() : value;
 }
-export const useAxisEvents = disableAxisListener => {
-  const svgRef = useSvgRef();
-  const drawingArea = useDrawingArea();
+const useAxisEvents = disableAxisListener => {
+  const svgRef = (0, _useSvgRef.useSvgRef)();
+  const drawingArea = (0, _useDrawingArea.useDrawingArea)();
   const {
     xAxis,
     yAxis,
     xAxisIds,
     yAxisIds
-  } = useCartesianContext();
+  } = (0, _CartesianProvider.useCartesianContext)();
   const {
     dispatch
-  } = React.useContext(InteractionContext);
+  } = React.useContext(_InteractionProvider.InteractionContext);
   const usedXAxis = xAxisIds[0];
   const usedYAxis = yAxisIds[0];
 
@@ -40,11 +47,12 @@ export const useAxisEvents = disableAxisListener => {
         data: axisData,
         reverse
       } = axisConfig;
-      if (!isBandScale(scale)) {
+      if (!(0, _isBandScale.isBandScale)(scale)) {
         const value = scale.invert(mouseValue);
         if (axisData === undefined) {
           return {
-            value
+            value,
+            index: -1
           };
         }
         const valueAsNumber = getAsANumber(value);
@@ -95,7 +103,7 @@ export const useAxisEvents = disableAxisListener => {
     };
     const handleMove = event => {
       const target = 'targetTouches' in event ? event.targetTouches[0] : event;
-      const svgPoint = getSVGPoint(element, target);
+      const svgPoint = (0, _getSVGPoint.getSVGPoint)(element, target);
       mousePosition.current.x = svgPoint.x;
       mousePosition.current.y = svgPoint.y;
       if (!drawingArea.isPointInside(svgPoint, {
@@ -142,4 +150,5 @@ export const useAxisEvents = disableAxisListener => {
       element.removeEventListener('pointerleave', handleOut);
     };
   }, [svgRef, dispatch, usedYAxis, yAxis, usedXAxis, xAxis, disableAxisListener, drawingArea]);
-};
+};
+exports.useAxisEvents = useAxisEvents;

package/node/hooks/useChartDimensions.js

@@ -0,0 +1,24 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _constants = require("../constants");
+const useChartDimensions = (width, height, margin) => {
+  const defaultizedMargin = (0, _extends2.default)({}, _constants.DEFAULT_MARGINS, margin);
+  const drawingArea = React.useMemo(() => ({
+    left: defaultizedMargin.left,
+    top: defaultizedMargin.top,
+    right: defaultizedMargin.right,
+    bottom: defaultizedMargin.bottom,
+    width: Math.max(0, width - defaultizedMargin.left - defaultizedMargin.right),
+    height: Math.max(0, height - defaultizedMargin.top - defaultizedMargin.bottom)
+  }), [width, height, defaultizedMargin.top, defaultizedMargin.bottom, defaultizedMargin.left, defaultizedMargin.right]);
+  return drawingArea;
+};
+var _default = exports.default = useChartDimensions;

package/node/hooks/useChartId.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useChartId = useChartId;
+var React = _interopRequireWildcard(require("react"));
+var _DrawingProvider = require("../context/DrawingProvider");
+function useChartId() {
+  const {
+    chartId
+  } = React.useContext(_DrawingProvider.DrawingContext);
+  return React.useMemo(() => chartId, [chartId]);
+}

package/node/hooks/useColorScale.js

@@ -0,0 +1,36 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useXColorScale = useXColorScale;
+exports.useYColorScale = useYColorScale;
+exports.useZColorScale = useZColorScale;
+var React = _interopRequireWildcard(require("react"));
+var _CartesianProvider = require("../context/CartesianProvider");
+var _ZAxisContextProvider = require("../context/ZAxisContextProvider");
+function useXColorScale(identifier) {
+  const {
+    xAxis,
+    xAxisIds
+  } = (0, _CartesianProvider.useCartesianContext)();
+  const id = typeof identifier === 'string' ? identifier : xAxisIds[identifier ?? 0];
+  return xAxis[id].colorScale;
+}
+function useYColorScale(identifier) {
+  const {
+    yAxis,
+    yAxisIds
+  } = (0, _CartesianProvider.useCartesianContext)();
+  const id = typeof identifier === 'string' ? identifier : yAxisIds[identifier ?? 0];
+  return yAxis[id].colorScale;
+}
+function useZColorScale(identifier) {
+  const {
+    zAxis,
+    zAxisIds
+  } = React.useContext(_ZAxisContextProvider.ZAxisContext);
+  const id = typeof identifier === 'string' ? identifier : zAxisIds[identifier ?? 0];
+  return zAxis[id]?.colorScale;
+}

package/node/hooks/useDrawingArea.js

@@ -0,0 +1,29 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDrawingArea = useDrawingArea;
+var React = _interopRequireWildcard(require("react"));
+var _DrawingProvider = require("../context/DrawingProvider");
+function useDrawingArea() {
+  const {
+    left,
+    top,
+    width,
+    height,
+    bottom,
+    right,
+    isPointInside
+  } = React.useContext(_DrawingProvider.DrawingContext);
+  return React.useMemo(() => ({
+    left,
+    top,
+    width,
+    height,
+    bottom,
+    right,
+    isPointInside
+  }), [height, left, top, width, bottom, right, isPointInside]);
+}

package/{esm → node}/hooks/useInteractionItemProps.js

@@ -1,14 +1,21 @@
-import * as React from 'react';
-import { InteractionContext } from '../context/InteractionProvider';
-import { useHighlighted } from '../context';
-export const useInteractionItemProps = skip => {
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useInteractionItemProps = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _InteractionProvider = require("../context/InteractionProvider");
+var _context = require("../context");
+const useInteractionItemProps = skip => {
   const {
     dispatch: dispatchInteraction
-  } = React.useContext(InteractionContext);
+  } = React.useContext(_InteractionProvider.InteractionContext);
   const {
     setHighlighted,
     clearHighlighted
-  } = useHighlighted();
+  } = (0, _context.useHighlighted)();
   if (skip) {
     return () => ({});
   }
@@ -43,4 +50,5 @@ export const useInteractionItemProps = skip => {
     };
   };
   return getInteractionItemProps;
-};
+};
+exports.useInteractionItemProps = useInteractionItemProps;

package/node/hooks/useMounted.js

@@ -0,0 +1,24 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useMounted = useMounted;
+var React = _interopRequireWildcard(require("react"));
+var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
+function useMounted(defer = false) {
+  const [mountedState, setMountedState] = React.useState(false);
+  (0, _useEnhancedEffect.default)(() => {
+    if (!defer) {
+      setMountedState(true);
+    }
+  }, [defer]);
+  React.useEffect(() => {
+    if (defer) {
+      setMountedState(true);
+    }
+  }, [defer]);
+  return mountedState;
+}

package/node/hooks/useReducedMotion.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useReducedMotion = void 0;
+var _web = require("@react-spring/web");
+const handleMediaChange = e => {
+  _web.Globals.assign({
+    // Modification such the react-spring implementation such that this hook can remove animation but never activate animation.
+    skipAnimation: e.matches || undefined
+  });
+};
+
+/**
+ * Returns `boolean` or `null`, used to automatically
+ * set skipAnimations to the value of the user's
+ * `prefers-reduced-motion` query.
+ *
+ * The return value, post-effect, is the value of their preferred setting
+ */
+const useReducedMotion = () => {
+  // Taken from: https://github.com/pmndrs/react-spring/blob/fd65b605b85c3a24143c4ce9dd322fdfca9c66be/packages/shared/src/hooks/useReducedMotion.ts
+
+  (0, _web.useIsomorphicLayoutEffect)(() => {
+    // Skip animation test/jsdom
+    const shouldSkipAnimation = !window?.matchMedia;
+    if (shouldSkipAnimation) {
+      handleMediaChange({
+        matches: true
+      });
+      return undefined;
+    }
+    const mql = window.matchMedia('(prefers-reduced-motion)');
+    handleMediaChange(mql);
+
+    // 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);
+    };
+  }, []);
+};
+exports.useReducedMotion = useReducedMotion;

package/node/hooks/useScale.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getValueToPositionMapper = getValueToPositionMapper;
+exports.useXScale = useXScale;
+exports.useYScale = useYScale;
+var _isBandScale = require("../internals/isBandScale");
+var _useAxis = require("./useAxis");
+/**
+ * For a given scale return a function that map value to their position.
+ * Useful when dealing with specific scale such as band.
+ * @param scale The scale to use
+ * @returns (value: any) => number
+ */
+function getValueToPositionMapper(scale) {
+  if ((0, _isBandScale.isBandScale)(scale)) {
+    return value => (scale(value) ?? 0) + scale.bandwidth() / 2;
+  }
+  return value => scale(value);
+}
+function useXScale(identifier) {
+  const axis = (0, _useAxis.useXAxis)(identifier);
+  return axis.scale;
+}
+function useYScale(identifier) {
+  const axis = (0, _useAxis.useYAxis)(identifier);
+  return axis.scale;
+}

package/{esm → node}/hooks/useSeries.js

@@ -1,17 +1,27 @@
-import * as React from 'react';
-import { SeriesContext } from '../context/SeriesProvider';
+"use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useBarSeries = useBarSeries;
+exports.useLineSeries = useLineSeries;
+exports.usePieSeries = usePieSeries;
+exports.useScatterSeries = useScatterSeries;
+exports.useSeries = useSeries;
+var React = _interopRequireWildcard(require("react"));
+var _SeriesProvider = require("../context/SeriesProvider");
 /**
  * Get access to the internal state of series.
  * Structured by type of series:
  * { seriesType?: { series: { id1: precessedValue, ... }, seriesOrder: [id1, ...] } }
  * @returns FormattedSeries series
  */
-export function useSeries() {
+function useSeries() {
   const {
     isInitialized,
     data
-  } = React.useContext(SeriesContext);
+  } = React.useContext(_SeriesProvider.SeriesContext);
   if (!isInitialized) {
     throw new Error(['MUI X: Could not find the series ref context.', 'It looks like you rendered your component outside of a ChartsContainer parent component.'].join('\n'));
   }
@@ -25,7 +35,7 @@ export function useSeries() {
  * - seriesOrder: the array of series ids.
  * @returns { series: Record<SeriesId, DefaultizedPieSeriesType>; seriesOrder: SeriesId[]; } | undefined pieSeries
  */
-export function usePieSeries() {
+function usePieSeries() {
   const series = useSeries();
   return React.useMemo(() => series.pie, [series.pie]);
 }
@@ -37,7 +47,7 @@ export function usePieSeries() {
  * - seriesOrder: the array of series ids.
  * @returns { series: Record<SeriesId, DefaultizedLineSeriesType>; seriesOrder: SeriesId[]; } | undefined lineSeries
  */
-export function useLineSeries() {
+function useLineSeries() {
   const series = useSeries();
   return React.useMemo(() => series.line, [series.line]);
 }
@@ -49,7 +59,7 @@ export function useLineSeries() {
  * - seriesOrder: the array of series ids.
  * @returns { series: Record<SeriesId, DefaultizedBarSeriesType>; seriesOrder: SeriesId[]; } | undefined barSeries
  */
-export function useBarSeries() {
+function useBarSeries() {
   const series = useSeries();
   return React.useMemo(() => series.bar, [series.bar]);
 }
@@ -61,7 +71,7 @@ export function useBarSeries() {
  * - seriesOrder: the array of series ids.
  * @returns { series: Record<SeriesId, DefaultizedScatterSeriesType>; seriesOrder: SeriesId[]; } | undefined scatterSeries
  */
-export function useScatterSeries() {
+function useScatterSeries() {
   const series = useSeries();
   return React.useMemo(() => series.scatter, [series.scatter]);
 }

package/node/hooks/useSvgRef.js

@@ -0,0 +1,19 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSvgRef = useSvgRef;
+var React = _interopRequireWildcard(require("react"));
+var _DrawingProvider = require("../context/DrawingProvider");
+function useSvgRef() {
+  const {
+    isInitialized,
+    data
+  } = React.useContext(_DrawingProvider.SvgContext);
+  if (!isInitialized) {
+    throw new Error(['MUI X: Could not find the svg ref context.', 'It looks like you rendered your component outside of a ChartsContainer parent component.'].join('\n'));
+  }
+  return data;
+}

package/{esm → node}/hooks/useTicks.js

@@ -1,7 +1,15 @@
-import * as React from 'react';
-import { isBandScale } from '../internals/isBandScale';
-import { isInfinity } from '../internals/isInfinity';
-export function getTickNumber(params) {
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getTickNumber = getTickNumber;
+exports.useTicks = useTicks;
+var React = _interopRequireWildcard(require("react"));
+var _isBandScale = require("../internals/isBandScale");
+var _isInfinity = require("../internals/isInfinity");
+function getTickNumber(params) {
   const {
     tickMaxStep,
     tickMinStep,
@@ -20,7 +28,7 @@ const offsetRatio = {
   end: 1,
   middle: 0.5
 };
-export function useTicks(options) {
+function useTicks(options) {
   const {
     scale,
     tickNumber,
@@ -31,7 +39,7 @@ export function useTicks(options) {
   } = options;
   return React.useMemo(() => {
     // band scale
-    if (isBandScale(scale)) {
+    if ((0, _isBandScale.isBandScale)(scale)) {
       const domain = scale.domain();
       if (scale.bandwidth() > 0) {
         // scale type = 'band'
@@ -64,7 +72,7 @@ export function useTicks(options) {
     const domain = scale.domain();
     // Skip axis rendering if no data is available
     // - The domains contains Infinity for continuous scales.
-    if (domain.some(isInfinity)) {
+    if (domain.some(_isInfinity.isInfinity)) {
       return [];
     }
     const ticks = typeof tickInterval === 'object' ? tickInterval : scale.ticks(tickNumber);