@mui/x-charts 7.7.1 → 7.9.0

package/esm/context/ZAxisContextProvider.js

@@ -37,7 +37,10 @@ function ZAxisContextProvider(props) {
       completedZAxis[axis.id] = _extends({}, axis, {
         colorScale: axis.colorMap && (axis.colorMap.type === 'ordinal' && axis.data ? getOrdinalColorScale(_extends({
           values: axis.data
-        }, axis.colorMap)) : getColorScale(axis.colorMap))
+        }, axis.colorMap)) : getColorScale(axis.colorMap.type === 'continuous' ? _extends({
+          min: axis.min,
+          max: axis.max
+        }, axis.colorMap) : axis.colorMap))
       });
     });
     return {
@@ -83,7 +86,9 @@ process.env.NODE_ENV !== "production" ? ZAxisContextProvider.propTypes = {
     })]),
     data: PropTypes.array,
     dataKey: PropTypes.string,
-    id: PropTypes.string
+    id: PropTypes.string,
+    max: PropTypes.number,
+    min: PropTypes.number
   }))
 } : void 0;
 export { ZAxisContextProvider };

package/esm/hooks/index.js

@@ -1,6 +1,7 @@
 export * from './useDrawingArea';
 export * from './useChartId';
 export * from './useScale';
+export * from './useAxis';
 export * from './useColorScale';
 export * from './useSvgRef';
 export { useSeries as unstable_useSeries, usePieSeries as unstable_usePieSeries, useLineSeries as unstable_useLineSeries, useBarSeries as unstable_useBarSeries, useScatterSeries as unstable_useScatterSeries } from './useSeries';

package/esm/hooks/useAxis.js

@@ -0,0 +1,17 @@
+import { useCartesianContext } from '../context/CartesianProvider';
+export function useXAxis(identifier) {
+  const {
+    xAxis,
+    xAxisIds
+  } = useCartesianContext();
+  const id = typeof identifier === 'string' ? identifier : xAxisIds[identifier ?? 0];
+  return xAxis[id];
+}
+export function useYAxis(identifier) {
+  const {
+    yAxis,
+    yAxisIds
+  } = useCartesianContext();
+  const id = typeof identifier === 'string' ? identifier : yAxisIds[identifier ?? 0];
+  return yAxis[id];
+}

package/esm/hooks/useAxisEvents.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { InteractionContext } from '../context/InteractionProvider';
 import { useCartesianContext } from '../context/CartesianProvider';
 import { isBandScale } from '../internals/isBandScale';
-import { getSVGPoint } from '../internals/utils';
+import { getSVGPoint } from '../internals/getSVGPoint';
 import { useSvgRef } from './useSvgRef';
 import { useDrawingArea } from './useDrawingArea';
 function getAsANumber(value) {
@@ -38,10 +38,7 @@ export const useAxisEvents = disableAxisListener => {
     if (element === null || disableAxisListener) {
       return () => {};
     }
-    const getUpdate = (axisConfig, mouseValue) => {
-      if (usedXAxis === null) {
-        return null;
-      }
+    function getNewAxisState(axisConfig, mouseValue) {
       const {
         scale,
         data: axisData,
@@ -89,7 +86,7 @@ export const useAxisEvents = disableAxisListener => {
         index: dataIndex,
         value: axisData[dataIndex]
       };
-    };
+    }
     const handleOut = () => {
       mousePosition.current = {
         x: -1,
@@ -101,7 +98,7 @@ export const useAxisEvents = disableAxisListener => {
     };
     const handleMove = event => {
       const target = 'targetTouches' in event ? event.targetTouches[0] : event;
-      const svgPoint = getSVGPoint(svgRef.current, target);
+      const svgPoint = getSVGPoint(element, target);
       mousePosition.current = {
         x: svgPoint.x,
         y: svgPoint.y
@@ -114,8 +111,8 @@ export const useAxisEvents = disableAxisListener => {
         });
         return;
       }
-      const newStateX = getUpdate(xAxis[usedXAxis], svgPoint.x);
-      const newStateY = getUpdate(yAxis[usedYAxis], svgPoint.y);
+      const newStateX = getNewAxisState(xAxis[usedXAxis], svgPoint.x);
+      const newStateY = getNewAxisState(yAxis[usedYAxis], svgPoint.y);
       dispatch({
         type: 'updateAxis',
         data: {
@@ -124,15 +121,26 @@ export const useAxisEvents = disableAxisListener => {
         }
       });
     };
-    element.addEventListener('mouseout', handleOut);
-    element.addEventListener('mousemove', handleMove);
-    element.addEventListener('touchend', handleOut);
-    element.addEventListener('touchmove', handleMove);
+    const handleDown = event => {
+      const target = event.currentTarget;
+      if (!target) {
+        return;
+      }
+      if (target.hasPointerCapture(event.pointerId)) {
+        target.releasePointerCapture(event.pointerId);
+      }
+    };
+    element.addEventListener('pointerdown', handleDown);
+    element.addEventListener('pointermove', handleMove);
+    element.addEventListener('pointerout', handleOut);
+    element.addEventListener('pointercancel', handleOut);
+    element.addEventListener('pointerleave', handleOut);
     return () => {
-      element.removeEventListener('mouseout', handleOut);
-      element.removeEventListener('mousemove', handleMove);
-      element.removeEventListener('touchend', handleOut);
-      element.removeEventListener('touchmove', handleMove);
+      element.removeEventListener('pointerdown', handleDown);
+      element.removeEventListener('pointermove', handleMove);
+      element.removeEventListener('pointerout', handleOut);
+      element.removeEventListener('pointercancel', handleOut);
+      element.removeEventListener('pointerleave', handleOut);
     };
   }, [svgRef, dispatch, left, width, top, height, usedYAxis, yAxis, usedXAxis, xAxis, disableAxisListener]);
 };

package/esm/hooks/useInteractionItemProps.js

@@ -13,7 +13,12 @@ export const useInteractionItemProps = skip => {
     return () => ({});
   }
   const getInteractionItemProps = data => {
-    const onMouseEnter = () => {
+    const onPointerDown = event => {
+      if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+        event.currentTarget.releasePointerCapture(event.pointerId);
+      }
+    };
+    const onPointerEnter = () => {
       dispatchInteraction({
         type: 'enterItem',
         data
@@ -23,7 +28,8 @@ export const useInteractionItemProps = skip => {
         dataIndex: data.dataIndex
       });
     };
-    const onMouseLeave = () => {
+    const onPointerLeave = event => {
+      event.currentTarget.releasePointerCapture(event.pointerId);
       dispatchInteraction({
         type: 'leaveItem',
         data
@@ -31,8 +37,9 @@ export const useInteractionItemProps = skip => {
       clearHighlighted();
     };
     return {
-      onMouseEnter,
-      onMouseLeave
+      onPointerEnter,
+      onPointerLeave,
+      onPointerDown
     };
   };
   return getInteractionItemProps;

package/esm/hooks/useScale.js

@@ -1,5 +1,6 @@
-import { useCartesianContext } from '../context/CartesianProvider';
 import { isBandScale } from '../internals/isBandScale';
+import { useXAxis, useYAxis } from './useAxis';
+
 /**
  * For a given scale return a function that map value to their position.
  * Useful when dealing with specific scale such as band.
@@ -8,23 +9,15 @@ import { isBandScale } from '../internals/isBandScale';
  */
 export function getValueToPositionMapper(scale) {
   if (isBandScale(scale)) {
-    return value => scale(value) + scale.bandwidth() / 2;
+    return value => (scale(value) ?? 0) + scale.bandwidth() / 2;
   }
   return value => scale(value);
 }
 export function useXScale(identifier) {
-  const {
-    xAxis,
-    xAxisIds
-  } = useCartesianContext();
-  const id = typeof identifier === 'string' ? identifier : xAxisIds[identifier ?? 0];
-  return xAxis[id].scale;
+  const axis = useXAxis(identifier);
+  return axis.scale;
 }
 export function useYScale(identifier) {
-  const {
-    yAxis,
-    yAxisIds
-  } = useCartesianContext();
-  const id = typeof identifier === 'string' ? identifier : yAxisIds[identifier ?? 0];
-  return yAxis[id].scale;
+  const axis = useYAxis(identifier);
+  return axis.scale;
 }

package/esm/hooks/useTicks.js

@@ -34,7 +34,8 @@ export function useTicks(options) {
       const domain = scale.domain();
       if (scale.bandwidth() > 0) {
         // scale type = 'band'
-        return [...domain.map(value => ({
+        const filteredDomain = typeof tickInterval === 'function' && domain.filter(tickInterval) || typeof tickInterval === 'object' && tickInterval || domain;
+        return [...filteredDomain.map(value => ({
           value,
           formattedValue: valueFormatter?.(value, {
             location: 'tick'

package/esm/internals/getSVGPoint.js

@@ -0,0 +1,11 @@
+/**
+ * Transform mouse event position to coordinates inside the SVG.
+ * @param svg The SVG element
+ * @param event The mouseEvent to transform
+ */
+export function getSVGPoint(svg, event) {
+  const pt = svg.createSVGPoint();
+  pt.x = event.clientX;
+  pt.y = event.clientY;
+  return pt.matrixTransform(svg.getScreenCTM().inverse());
+}

package/esm/internals/index.js

@@ -6,6 +6,8 @@ export * from '../ResponsiveChartContainer/ResizableContainer';
 // hooks
 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';
@@ -14,6 +16,8 @@ export { useBarChartProps } from '../BarChart/useBarChartProps';
 // utils
 export * from './defaultizeValueFormatter';
 export * from './configInit';
+export * from './getLabel';
+export * from './getSVGPoint';
 
 // contexts
 

package/esm/internals/utils.js

@@ -3,18 +3,6 @@ export function getSymbol(shape) {
   const symbolNames = 'circle cross diamond square star triangle wye'.split(/ /);
   return symbolNames.indexOf(shape) || 0;
 }
-/**
- * Transform mouse event position to coordinates inside the SVG.
- * @param svg The SVG element
- * @param event The mouseEvent to transform
- */
-export function getSVGPoint(svg, event) {
-  const pt = svg.createSVGPoint();
-  pt.x = event.clientX;
-  pt.y = event.clientY;
-  return pt.matrixTransform(svg.getScreenCTM().inverse());
-}
-
 /**
  * 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'.

package/hooks/index.d.ts

@@ -1,6 +1,7 @@
 export * from './useDrawingArea';
 export * from './useChartId';
 export * from './useScale';
+export * from './useAxis';
 export * from './useColorScale';
 export * from './useSvgRef';
 export { useSeries as unstable_useSeries, usePieSeries as unstable_usePieSeries, useLineSeries as unstable_useLineSeries, useBarSeries as unstable_useBarSeries, useScatterSeries as unstable_useScatterSeries, } from './useSeries';

package/hooks/index.js

@@ -76,6 +76,18 @@ Object.keys(_useScale).forEach(function (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;

package/hooks/useAxis.d.ts

@@ -0,0 +1,2 @@
+export declare function useXAxis(identifier?: number | string): import("../internals").AxisDefaultized<keyof import("../internals").AxisScaleConfig, any, import("..").ChartsXAxisProps>;
+export declare function useYAxis(identifier?: number | string): import("../internals").AxisDefaultized<keyof import("../internals").AxisScaleConfig, any, import("..").ChartsYAxisProps>;

package/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/hooks/useAxisEvents.js

@@ -8,7 +8,7 @@ var React = _interopRequireWildcard(require("react"));
 var _InteractionProvider = require("../context/InteractionProvider");
 var _CartesianProvider = require("../context/CartesianProvider");
 var _isBandScale = require("../internals/isBandScale");
-var _utils = require("../internals/utils");
+var _getSVGPoint = require("../internals/getSVGPoint");
 var _useSvgRef = require("./useSvgRef");
 var _useDrawingArea = require("./useDrawingArea");
 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); }
@@ -46,10 +46,7 @@ const useAxisEvents = disableAxisListener => {
     if (element === null || disableAxisListener) {
       return () => {};
     }
-    const getUpdate = (axisConfig, mouseValue) => {
-      if (usedXAxis === null) {
-        return null;
-      }
+    function getNewAxisState(axisConfig, mouseValue) {
       const {
         scale,
         data: axisData,
@@ -97,7 +94,7 @@ const useAxisEvents = disableAxisListener => {
         index: dataIndex,
         value: axisData[dataIndex]
       };
-    };
+    }
     const handleOut = () => {
       mousePosition.current = {
         x: -1,
@@ -109,7 +106,7 @@ const useAxisEvents = disableAxisListener => {
     };
     const handleMove = event => {
       const target = 'targetTouches' in event ? event.targetTouches[0] : event;
-      const svgPoint = (0, _utils.getSVGPoint)(svgRef.current, target);
+      const svgPoint = (0, _getSVGPoint.getSVGPoint)(element, target);
       mousePosition.current = {
         x: svgPoint.x,
         y: svgPoint.y
@@ -122,8 +119,8 @@ const useAxisEvents = disableAxisListener => {
         });
         return;
       }
-      const newStateX = getUpdate(xAxis[usedXAxis], svgPoint.x);
-      const newStateY = getUpdate(yAxis[usedYAxis], svgPoint.y);
+      const newStateX = getNewAxisState(xAxis[usedXAxis], svgPoint.x);
+      const newStateY = getNewAxisState(yAxis[usedYAxis], svgPoint.y);
       dispatch({
         type: 'updateAxis',
         data: {
@@ -132,15 +129,26 @@ const useAxisEvents = disableAxisListener => {
         }
       });
     };
-    element.addEventListener('mouseout', handleOut);
-    element.addEventListener('mousemove', handleMove);
-    element.addEventListener('touchend', handleOut);
-    element.addEventListener('touchmove', handleMove);
+    const handleDown = event => {
+      const target = event.currentTarget;
+      if (!target) {
+        return;
+      }
+      if (target.hasPointerCapture(event.pointerId)) {
+        target.releasePointerCapture(event.pointerId);
+      }
+    };
+    element.addEventListener('pointerdown', handleDown);
+    element.addEventListener('pointermove', handleMove);
+    element.addEventListener('pointerout', handleOut);
+    element.addEventListener('pointercancel', handleOut);
+    element.addEventListener('pointerleave', handleOut);
     return () => {
-      element.removeEventListener('mouseout', handleOut);
-      element.removeEventListener('mousemove', handleMove);
-      element.removeEventListener('touchend', handleOut);
-      element.removeEventListener('touchmove', handleMove);
+      element.removeEventListener('pointerdown', handleDown);
+      element.removeEventListener('pointermove', handleMove);
+      element.removeEventListener('pointerout', handleOut);
+      element.removeEventListener('pointercancel', handleOut);
+      element.removeEventListener('pointerleave', handleOut);
     };
   }, [svgRef, dispatch, left, width, top, height, usedYAxis, yAxis, usedXAxis, xAxis, disableAxisListener]);
 };

package/hooks/useChartDimensions.d.ts

@@ -1,5 +1,5 @@
 import { LayoutConfig } from '../models/layout';
-declare const useChartDimensions: (width: number, height: number, margin: LayoutConfig['margin']) => {
+declare const useChartDimensions: (width: number, height: number, margin: LayoutConfig["margin"]) => {
     left: number;
     top: number;
     right: number;

package/hooks/useColor.d.ts

@@ -1,4 +1,4 @@
-import { ChartSeriesType } from '../internals';
+import { ChartSeriesType } from '../models/seriesType/config';
 import { ColorProcessorsConfig } from '../models/plugin';
 export declare function useColorProcessor<T extends ChartSeriesType>(seriesType: T): ColorProcessorsConfig<ChartSeriesType>;
 export declare function useColorProcessor(): ColorProcessorsConfig<ChartSeriesType>;

package/hooks/useInteractionItemProps.d.ts

@@ -1,5 +1,7 @@
+import * as React from 'react';
 import { SeriesItemIdentifier } from '../models';
 export declare const useInteractionItemProps: (skip?: boolean) => (() => {}) | ((data: SeriesItemIdentifier) => {
-    onMouseEnter: () => void;
-    onMouseLeave: () => void;
+    onPointerEnter: () => void;
+    onPointerLeave: (event: React.PointerEvent) => void;
+    onPointerDown: (event: React.PointerEvent) => void;
 });

package/hooks/useInteractionItemProps.js

@@ -21,7 +21,12 @@ const useInteractionItemProps = skip => {
     return () => ({});
   }
   const getInteractionItemProps = data => {
-    const onMouseEnter = () => {
+    const onPointerDown = event => {
+      if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+        event.currentTarget.releasePointerCapture(event.pointerId);
+      }
+    };
+    const onPointerEnter = () => {
       dispatchInteraction({
         type: 'enterItem',
         data
@@ -31,7 +36,8 @@ const useInteractionItemProps = skip => {
         dataIndex: data.dataIndex
       });
     };
-    const onMouseLeave = () => {
+    const onPointerLeave = event => {
+      event.currentTarget.releasePointerCapture(event.pointerId);
       dispatchInteraction({
         type: 'leaveItem',
         data
@@ -39,8 +45,9 @@ const useInteractionItemProps = skip => {
       clearHighlighted();
     };
     return {
-      onMouseEnter,
-      onMouseLeave
+      onPointerEnter,
+      onPointerLeave,
+      onPointerDown
     };
   };
   return getInteractionItemProps;

package/hooks/useScale.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.getValueToPositionMapper = getValueToPositionMapper;
 exports.useXScale = useXScale;
 exports.useYScale = useYScale;
-var _CartesianProvider = require("../context/CartesianProvider");
 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.
@@ -16,23 +16,15 @@ var _isBandScale = require("../internals/isBandScale");
  */
 function getValueToPositionMapper(scale) {
   if ((0, _isBandScale.isBandScale)(scale)) {
-    return value => scale(value) + scale.bandwidth() / 2;
+    return value => (scale(value) ?? 0) + scale.bandwidth() / 2;
   }
   return value => scale(value);
 }
 function useXScale(identifier) {
-  const {
-    xAxis,
-    xAxisIds
-  } = (0, _CartesianProvider.useCartesianContext)();
-  const id = typeof identifier === 'string' ? identifier : xAxisIds[identifier ?? 0];
-  return xAxis[id].scale;
+  const axis = (0, _useAxis.useXAxis)(identifier);
+  return axis.scale;
 }
 function useYScale(identifier) {
-  const {
-    yAxis,
-    yAxisIds
-  } = (0, _CartesianProvider.useCartesianContext)();
-  const id = typeof identifier === 'string' ? identifier : yAxisIds[identifier ?? 0];
-  return yAxis[id].scale;
+  const axis = (0, _useAxis.useYAxis)(identifier);
+  return axis.scale;
 }

package/hooks/useTicks.js

@@ -43,7 +43,8 @@ function useTicks(options) {
       const domain = scale.domain();
       if (scale.bandwidth() > 0) {
         // scale type = 'band'
-        return [...domain.map(value => ({
+        const filteredDomain = typeof tickInterval === 'function' && domain.filter(tickInterval) || typeof tickInterval === 'object' && tickInterval || domain;
+        return [...filteredDomain.map(value => ({
           value,
           formattedValue: valueFormatter?.(value, {
             location: 'tick'

package/index.js

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

package/internals/components/AxisSharedComponents.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const AxisRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<import("react").SVGProps<SVGGElement>, keyof import("react").SVGProps<SVGGElement>>, {}>;

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

@@ -1,4 +1,4 @@
 import * as React from 'react';
 import { AxisId } from '../../../models/axis';
-export declare function useChartGradient(): (axisId: AxisId, direction: 'x' | 'y') => string;
+export declare function useChartGradient(): (axisId: AxisId, direction: "x" | "y") => string;
 export declare function ChartsAxesGradients(): React.JSX.Element;