@mui/x-charts 7.0.0-alpha.2 → 7.0.0-alpha.4

package/esm/ScatterChart/ScatterChart.js

@@ -7,6 +7,7 @@ import { ChartsAxis } from '../ChartsAxis';
 import { ChartsTooltip } from '../ChartsTooltip';
 import { ChartsLegend } from '../ChartsLegend';
 import { ChartsAxisHighlight } from '../ChartsAxisHighlight';
+import { ChartsVoronoiHandler } from '../ChartsVoronoiHandler/ChartsVoronoiHandler';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 /**
@@ -26,6 +27,8 @@ const ScatterChart = /*#__PURE__*/React.forwardRef(function ScatterChart(props,
     series,
     tooltip,
     axisHighlight,
+    voronoiMaxRadius,
+    disableVoronoi,
     legend,
     width,
     height,
@@ -52,7 +55,9 @@ const ScatterChart = /*#__PURE__*/React.forwardRef(function ScatterChart(props,
     xAxis: xAxis,
     yAxis: yAxis,
     sx: sx,
-    children: [/*#__PURE__*/_jsx(ChartsAxis, {
+    children: [!disableVoronoi && /*#__PURE__*/_jsx(ChartsVoronoiHandler, {
+      voronoiMaxRadius: voronoiMaxRadius
+    }), /*#__PURE__*/_jsx(ChartsAxis, {
       topAxis: topAxis,
       leftAxis: leftAxis,
       rightAxis: rightAxis,
@@ -126,6 +131,11 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
    * @default false
    */
   disableAxisListener: PropTypes.bool,
+  /**
+   * If true, the interaction will not use the Voronoi cell and fall back to hover events.
+   * @default false
+   */
+  disableVoronoi: PropTypes.bool,
   /**
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    * @default undefined
@@ -218,6 +228,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
       x: PropTypes.number.isRequired,
       y: PropTypes.number.isRequired
     })).isRequired,
+    disableHover: PropTypes.bool,
     highlightScope: PropTypes.shape({
       faded: PropTypes.oneOf(['global', 'none', 'series']),
       highlighted: PropTypes.oneOf(['item', 'none', 'series'])
@@ -283,6 +294,12 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     x: PropTypes.number,
     y: PropTypes.number
   }),
+  /**
+   * Defines the maximal distance between a scatter point and the pointer that triggers the interaction.
+   * If `undefined`, the radius is assumed to be infinite.
+   * @default undefined
+   */
+  voronoiMaxRadius: PropTypes.number,
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.
    * @default undefined

package/esm/ScatterChart/index.js

@@ -1,3 +1,3 @@
-export * from './ScatterPlot';
 export * from './ScatterChart';
+export * from './ScatterPlot';
 export * from './Scatter';

package/esm/SparkLineChart/SparkLineChart.js

@@ -78,6 +78,7 @@ const SparkLineChart = /*#__PURE__*/React.forwardRef(function SparkLineChart(pro
     sx: sx,
     disableAxisListener: (!showTooltip || (tooltip == null ? void 0 : tooltip.trigger) !== 'axis') && (axisHighlight == null ? void 0 : axisHighlight.x) === 'none' && (axisHighlight == null ? void 0 : axisHighlight.y) === 'none',
     children: [plotType === 'bar' && /*#__PURE__*/_jsx(BarPlot, {
+      skipAnimation: true,
       slots: slots,
       slotProps: slotProps,
       sx: {

package/esm/context/InteractionProvider.js

@@ -7,6 +7,7 @@ export const InteractionContext = /*#__PURE__*/React.createContext({
     x: null,
     y: null
   },
+  useVoronoiInteraction: false,
   dispatch: () => null
 });
 const dataReducer = (prevState, action) => {
@@ -15,6 +16,21 @@ const dataReducer = (prevState, action) => {
       return _extends({}, prevState, {
         item: action.data
       });
+    case 'exitChart':
+      if (prevState.item === null && prevState.axis.x === null && prevState.axis.y === null) {
+        return prevState;
+      }
+      return _extends({}, prevState, {
+        axis: {
+          x: null,
+          y: null
+        },
+        item: null
+      });
+    case 'updateVoronoiUsage':
+      return _extends({}, prevState, {
+        useVoronoiInteraction: action.useVoronoiInteraction
+      });
     case 'leaveItem':
       if (prevState.item === null || Object.keys(action.data).some(key => action.data[key] !== prevState.item[key])) {
         // The item is already something else
@@ -24,6 +40,9 @@ const dataReducer = (prevState, action) => {
         item: null
       });
     case 'updateAxis':
+      if (action.data.x === prevState.axis.x && action.data.y === prevState.axis.y) {
+        return prevState;
+      }
       return _extends({}, prevState, {
         axis: action.data
       });
@@ -39,7 +58,8 @@ export function InteractionProvider({
     axis: {
       x: null,
       y: null
-    }
+    },
+    useVoronoiInteraction: false
   });
   const value = React.useMemo(() => _extends({}, data, {
     dispatch

package/esm/hooks/useAxisEvents.js

@@ -3,6 +3,10 @@ import { InteractionContext } from '../context/InteractionProvider';
 import { CartesianContext } from '../context/CartesianContextProvider';
 import { SVGContext, DrawingContext } from '../context/DrawingProvider';
 import { isBandScale } from '../internals/isBandScale';
+import { getSVGPoint } from '../internals/utils';
+function getAsANumber(value) {
+  return value instanceof Date ? value.getTime() : value;
+}
 export const useAxisEvents = disableAxisListener => {
   const svgRef = React.useContext(SVGContext);
   const {
@@ -48,17 +52,18 @@ export const useAxisEvents = disableAxisListener => {
             value
           };
         }
-        const closestIndex = axisData == null ? void 0 : axisData.findIndex((v, index) => {
-          if (v > value) {
-            // @ts-ignore
-            if (index === 0 || Math.abs(value - v) <= Math.abs(value - axisData[index - 1])) {
+        const valueAsNumber = getAsANumber(value);
+        const closestIndex = axisData == null ? void 0 : axisData.findIndex((pointValue, index) => {
+          const v = getAsANumber(pointValue);
+          if (v > valueAsNumber) {
+            if (index === 0 || Math.abs(valueAsNumber - v) <= Math.abs(valueAsNumber - getAsANumber(axisData[index - 1]))) {
               return true;
             }
           }
-          if (v <= value) {
+          if (v <= valueAsNumber) {
             if (index === axisData.length - 1 ||
             // @ts-ignore
-            Math.abs(value - v) < Math.abs(value - axisData[index + 1])) {
+            Math.abs(value - v) < Math.abs(value - getAsANumber(axisData[index + 1]))) {
               return true;
             }
           }
@@ -84,37 +89,25 @@ export const useAxisEvents = disableAxisListener => {
         y: -1
       };
       dispatch({
-        type: 'updateAxis',
-        data: {
-          x: null,
-          y: null
-        }
+        type: 'exitChart'
       });
     };
     const handleMouseMove = event => {
-      // Get mouse coordinate in global SVG space
-      const pt = svgRef.current.createSVGPoint();
-      pt.x = event.clientX;
-      pt.y = event.clientY;
-      const svgPt = pt.matrixTransform(svgRef.current.getScreenCTM().inverse());
+      const svgPoint = getSVGPoint(svgRef.current, event);
       mousePosition.current = {
-        x: svgPt.x,
-        y: svgPt.y
+        x: svgPoint.x,
+        y: svgPoint.y
       };
-      const outsideX = svgPt.x < left || svgPt.x > left + width;
-      const outsideY = svgPt.y < top || svgPt.y > top + height;
+      const outsideX = svgPoint.x < left || svgPoint.x > left + width;
+      const outsideY = svgPoint.y < top || svgPoint.y > top + height;
       if (outsideX || outsideY) {
         dispatch({
-          type: 'updateAxis',
-          data: {
-            x: null,
-            y: null
-          }
+          type: 'exitChart'
         });
         return;
       }
-      const newStateX = getUpdate(xAxis[usedXAxis], svgPt.x);
-      const newStateY = getUpdate(yAxis[usedYAxis], svgPt.y);
+      const newStateX = getUpdate(xAxis[usedXAxis], svgPoint.x);
+      const newStateY = getUpdate(yAxis[usedYAxis], svgPoint.y);
       dispatch({
         type: 'updateAxis',
         data: {

package/esm/hooks/useInteractionItemProps.js

@@ -1,13 +1,16 @@
 import * as React from 'react';
 import { InteractionContext } from '../context/InteractionProvider';
 import { HighlighContext } from '../context/HighlightProvider';
-export const useInteractionItemProps = scope => {
+export const useInteractionItemProps = (scope, skip) => {
   const {
     dispatch: dispatchInteraction
   } = React.useContext(InteractionContext);
   const {
     dispatch: dispatchHighlight
   } = React.useContext(HighlighContext);
+  if (skip) {
+    return () => ({});
+  }
   const getInteractionItemProps = data => {
     const onMouseEnter = () => {
       dispatchInteraction({

package/esm/index.js

@@ -11,6 +11,7 @@ export * from './ChartsYAxis';
 export * from './ChartsTooltip';
 export * from './ChartsLegend';
 export * from './ChartsAxisHighlight';
+export * from './ChartsVoronoiHandler';
 export * from './BarChart';
 export * from './LineChart';
 export * from './PieChart';

package/esm/internals/defaultizeValueFormatter.js

@@ -2,9 +2,10 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 function defaultizeValueFormatter(series, defaultValueFormatter) {
   const defaultizedSeries = {};
   Object.keys(series).forEach(seriesId => {
-    defaultizedSeries[seriesId] = _extends({
-      valueFormatter: defaultValueFormatter
-    }, series[seriesId]);
+    var _series$seriesId$valu;
+    defaultizedSeries[seriesId] = _extends({}, series[seriesId], {
+      valueFormatter: (_series$seriesId$valu = series[seriesId].valueFormatter) != null ? _series$seriesId$valu : defaultValueFormatter
+    });
   });
   return defaultizedSeries;
 }

package/esm/internals/utils.js

@@ -2,4 +2,15 @@
 export function getSymbol(shape) {
   const symbolNames = 'circle cross diamond square star triangle wye'.split(/ /);
   return symbolNames.indexOf(shape) || 0;
+}
+/**
+ * Transform mouse event position to corrdinates 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/hooks/useAxisEvents.js

@@ -9,8 +9,12 @@ var _InteractionProvider = require("../context/InteractionProvider");
 var _CartesianContextProvider = require("../context/CartesianContextProvider");
 var _DrawingProvider = require("../context/DrawingProvider");
 var _isBandScale = require("../internals/isBandScale");
+var _utils = require("../internals/utils");
 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); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function getAsANumber(value) {
+  return value instanceof Date ? value.getTime() : value;
+}
 const useAxisEvents = disableAxisListener => {
   const svgRef = React.useContext(_DrawingProvider.SVGContext);
   const {
@@ -56,17 +60,18 @@ const useAxisEvents = disableAxisListener => {
             value
           };
         }
-        const closestIndex = axisData?.findIndex((v, index) => {
-          if (v > value) {
-            // @ts-ignore
-            if (index === 0 || Math.abs(value - v) <= Math.abs(value - axisData[index - 1])) {
+        const valueAsNumber = getAsANumber(value);
+        const closestIndex = axisData?.findIndex((pointValue, index) => {
+          const v = getAsANumber(pointValue);
+          if (v > valueAsNumber) {
+            if (index === 0 || Math.abs(valueAsNumber - v) <= Math.abs(valueAsNumber - getAsANumber(axisData[index - 1]))) {
               return true;
             }
           }
-          if (v <= value) {
+          if (v <= valueAsNumber) {
             if (index === axisData.length - 1 ||
             // @ts-ignore
-            Math.abs(value - v) < Math.abs(value - axisData[index + 1])) {
+            Math.abs(value - v) < Math.abs(value - getAsANumber(axisData[index + 1]))) {
               return true;
             }
           }
@@ -92,37 +97,25 @@ const useAxisEvents = disableAxisListener => {
         y: -1
       };
       dispatch({
-        type: 'updateAxis',
-        data: {
-          x: null,
-          y: null
-        }
+        type: 'exitChart'
       });
     };
     const handleMouseMove = event => {
-      // Get mouse coordinate in global SVG space
-      const pt = svgRef.current.createSVGPoint();
-      pt.x = event.clientX;
-      pt.y = event.clientY;
-      const svgPt = pt.matrixTransform(svgRef.current.getScreenCTM().inverse());
+      const svgPoint = (0, _utils.getSVGPoint)(svgRef.current, event);
       mousePosition.current = {
-        x: svgPt.x,
-        y: svgPt.y
+        x: svgPoint.x,
+        y: svgPoint.y
       };
-      const outsideX = svgPt.x < left || svgPt.x > left + width;
-      const outsideY = svgPt.y < top || svgPt.y > top + height;
+      const outsideX = svgPoint.x < left || svgPoint.x > left + width;
+      const outsideY = svgPoint.y < top || svgPoint.y > top + height;
       if (outsideX || outsideY) {
         dispatch({
-          type: 'updateAxis',
-          data: {
-            x: null,
-            y: null
-          }
+          type: 'exitChart'
         });
         return;
       }
-      const newStateX = getUpdate(xAxis[usedXAxis], svgPt.x);
-      const newStateY = getUpdate(yAxis[usedYAxis], svgPt.y);
+      const newStateX = getUpdate(xAxis[usedXAxis], svgPoint.x);
+      const newStateY = getUpdate(yAxis[usedYAxis], svgPoint.y);
       dispatch({
         type: 'updateAxis',
         data: {

package/hooks/useInteractionItemProps.d.ts

@@ -1,8 +1,8 @@
 import { HighlightScope } from '../context/HighlightProvider';
 import { SeriesItemIdentifier } from '../models';
-export declare const useInteractionItemProps: (scope?: Partial<HighlightScope>) => (data: SeriesItemIdentifier) => {
+export declare const useInteractionItemProps: (scope?: Partial<HighlightScope>, skip?: boolean) => (() => {}) | ((data: SeriesItemIdentifier) => {
     onMouseEnter: () => void;
     onMouseLeave: () => void;
-};
+});
 export declare const getIsHighlighted: (selectedItem: SeriesItemIdentifier | null, currentItem: SeriesItemIdentifier, highlightScope?: Partial<HighlightScope>) => boolean;
 export declare const getIsFaded: (selectedItem: SeriesItemIdentifier | null, currentItem: SeriesItemIdentifier, highlightScope?: Partial<HighlightScope>) => boolean;

package/hooks/useInteractionItemProps.js

@@ -9,13 +9,16 @@ var _InteractionProvider = require("../context/InteractionProvider");
 var _HighlightProvider = require("../context/HighlightProvider");
 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); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const useInteractionItemProps = scope => {
+const useInteractionItemProps = (scope, skip) => {
   const {
     dispatch: dispatchInteraction
   } = React.useContext(_InteractionProvider.InteractionContext);
   const {
     dispatch: dispatchHighlight
   } = React.useContext(_HighlightProvider.HighlighContext);
+  if (skip) {
+    return () => ({});
+  }
   const getInteractionItemProps = data => {
     const onMouseEnter = () => {
       dispatchInteraction({

package/index.d.ts

@@ -11,6 +11,7 @@ export * from './ChartsYAxis';
 export * from './ChartsTooltip';
 export * from './ChartsLegend';
 export * from './ChartsAxisHighlight';
+export * from './ChartsVoronoiHandler';
 export * from './BarChart';
 export * from './LineChart';
 export * from './PieChart';

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v7.0.0-alpha.2
+ * @mui/x-charts v7.0.0-alpha.4
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -153,6 +153,17 @@ Object.keys(_ChartsAxisHighlight).forEach(function (key) {
     }
   });
 });
+var _ChartsVoronoiHandler = require("./ChartsVoronoiHandler");
+Object.keys(_ChartsVoronoiHandler).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ChartsVoronoiHandler[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ChartsVoronoiHandler[key];
+    }
+  });
+});
 var _BarChart = require("./BarChart");
 Object.keys(_BarChart).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/internals/defaultizeColor.d.ts

@@ -77,6 +77,7 @@ export declare function defaultizeColor(series: AllSeriesType, seriesIndex: numb
     data: import("../models/seriesType").ScatterValueType[];
     markerSize?: number | undefined;
     label?: string | undefined;
+    disableHover?: boolean | undefined;
     id?: string | undefined;
     color: string;
     valueFormatter?: ((value: import("../models/seriesType").ScatterValueType) => string) | undefined;

package/internals/defaultizeValueFormatter.d.ts

@@ -1,4 +1,6 @@
-declare function defaultizeValueFormatter<ISeries extends {}, IFormatter extends (v: any) => string>(series: {
+declare function defaultizeValueFormatter<ISeries extends {
+    valueFormatter?: IFormatter;
+}, IFormatter extends (v: any) => string>(series: {
     [id: string]: ISeries;
 }, defaultValueFormatter: IFormatter): {
     [id: string]: ISeries & {

package/internals/defaultizeValueFormatter.js

@@ -9,9 +9,9 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 function defaultizeValueFormatter(series, defaultValueFormatter) {
   const defaultizedSeries = {};
   Object.keys(series).forEach(seriesId => {
-    defaultizedSeries[seriesId] = (0, _extends2.default)({
-      valueFormatter: defaultValueFormatter
-    }, series[seriesId]);
+    defaultizedSeries[seriesId] = (0, _extends2.default)({}, series[seriesId], {
+      valueFormatter: series[seriesId].valueFormatter ?? defaultValueFormatter
+    });
   });
   return defaultizedSeries;
 }

package/internals/utils.d.ts

@@ -4,4 +4,10 @@ type Without<T, U> = {
     [P in Exclude<keyof T, keyof U>]?: never;
 };
 export type XOR<T, U> = T | U extends object ? (Without<T, U> & U) | (Without<U, T> & T) : T | U;
+/**
+ * Transform mouse event position to corrdinates inside the SVG.
+ * @param svg The SVG element
+ * @param event The mouseEvent to transform
+ */
+export declare function getSVGPoint(svg: SVGSVGElement, event: MouseEvent): DOMPoint;
 export {};

package/internals/utils.js

@@ -3,9 +3,21 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.getSVGPoint = getSVGPoint;
 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;
+}
+/**
+ * Transform mouse event position to corrdinates inside the SVG.
+ * @param svg The SVG element
+ * @param event The mouseEvent to transform
+ */
+function getSVGPoint(svg, event) {
+  const pt = svg.createSVGPoint();
+  pt.x = event.clientX;
+  pt.y = event.clientY;
+  return pt.matrixTransform(svg.getScreenCTM().inverse());
 }

package/legacy/BarChart/BarElement.js

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["id", "dataIndex", "classes", "color", "highlightScope", "slots", "slotProps", "style"];
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
 import { useSlotProps } from '@mui/base/utils';
 import generateUtilityClass from '@mui/utils/generateUtilityClass';
@@ -40,7 +41,7 @@ export var BarElementPath = styled(animated.rect, {
     opacity: ownerState.isFaded && 0.3 || 1
   };
 });
-export function BarElement(props) {
+function BarElement(props) {
   var _slots$bar;
   var id = props.id,
     dataIndex = props.dataIndex,
@@ -88,4 +89,27 @@ export function BarElement(props) {
     ownerState: ownerState
   });
   return /*#__PURE__*/_jsx(Bar, _extends({}, barProps));
-}
+}
+process.env.NODE_ENV !== "production" ? BarElement.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  classes: PropTypes.object,
+  dataIndex: PropTypes.number.isRequired,
+  highlightScope: PropTypes.shape({
+    faded: PropTypes.oneOf(['global', 'none', 'series']),
+    highlighted: PropTypes.oneOf(['item', 'none', 'series'])
+  }),
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: PropTypes.object,
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: PropTypes.object
+} : void 0;
+export { BarElement };

package/legacy/BarChart/index.js

@@ -1,2 +1,3 @@
+export * from './BarChart';
 export * from './BarPlot';
-export * from './BarChart';
+export * from './BarElement';

package/legacy/ChartsLegend/index.js

@@ -1,2 +1,3 @@
 export * from './ChartsLegend';
-export * from './chartsLegendClasses';
+export * from './chartsLegendClasses';
+export * from './utils';