@mui/x-charts 7.0.0-alpha.3 → 7.0.0-alpha.5

package/modern/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?.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;
             }
           }
@@ -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/modern/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/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v7.0.0-alpha.3
+ * @mui/x-charts v7.0.0-alpha.5
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -15,9 +15,11 @@ export * from './ChartsReferenceLine';
 export * from './ChartsAxis';
 export * from './ChartsXAxis';
 export * from './ChartsYAxis';
+export * from './ChartsText';
 export * from './ChartsTooltip';
 export * from './ChartsLegend';
 export * from './ChartsAxisHighlight';
+export * from './ChartsVoronoiHandler';
 export * from './BarChart';
 export * from './LineChart';
 export * from './PieChart';

package/modern/internals/getWordsByLines.js

@@ -0,0 +1,14 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { getStringSize } from './domUtils';
+export function getWordsByLines({
+  style,
+  needsComputation,
+  text
+}) {
+  return text.split('\n').map(subText => _extends({
+    text: subText
+  }, needsComputation ? getStringSize(subText, style) : {
+    width: 0,
+    height: 0
+  }));
+}

package/modern/internals/utils.js

@@ -2,4 +2,44 @@
 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());
+}
+
+/**
+ * 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 function getPercentageValue(value, refValue) {
+  if (typeof value === 'number') {
+    return value;
+  }
+  if (value === '100%') {
+    // Avoid potential rounding issues
+    return refValue;
+  }
+  if (value.endsWith('%')) {
+    const percentage = Number.parseFloat(value.slice(0, value.length - 1));
+    if (!Number.isNaN(percentage)) {
+      return percentage * refValue / 100;
+    }
+  }
+  if (value.endsWith('px')) {
+    const val = Number.parseFloat(value.slice(0, value.length - 2));
+    if (!Number.isNaN(val)) {
+      return val;
+    }
+  }
+  throw Error(`MUI-Charts: Received an unknown value "${value}". It should be a number, or a string with a percentage value.`);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-charts",
-  "version": "7.0.0-alpha.3",
+  "version": "7.0.0-alpha.5",
   "description": "The community edition of the charts components (MUI X).",
   "author": "MUI Team",
   "main": "./index.js",
@@ -28,13 +28,15 @@
     "directory": "packages/x-charts"
   },
   "dependencies": {
-    "@babel/runtime": "^7.23.4",
-    "@mui/base": "^5.0.0-beta.24",
-    "@mui/system": "^5.14.18",
+    "@babel/runtime": "^7.23.5",
+    "@mui/base": "^5.0.0-beta.27",
+    "@mui/system": "^5.15.0",
+    "@mui/utils": "^5.15.0",
     "@react-spring/rafz": "^9.7.3",
     "@react-spring/web": "^9.7.3",
     "clsx": "^2.0.0",
     "d3-color": "^3.1.0",
+    "d3-delaunay": "^6.0.4",
     "d3-scale": "^4.0.2",
     "d3-shape": "^3.2.0",
     "prop-types": "^15.8.1"