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

package/modern/PieChart/PieChart.js

@@ -82,7 +82,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
   }),
   /**
    * Indicate which axis to display the bottom of the charts.
-   * Can be a string (the id of the axis) or an object `ChartsXAxisProps`
+   * Can be a string (the id of the axis) or an object `ChartsXAxisProps`.
    * @default xAxisIds[0] The id of the first provided axis
    */
   bottomAxis: PropTypes.oneOfType([PropTypes.shape({
@@ -109,7 +109,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
   height: PropTypes.number,
   /**
    * Indicate which axis to display the left of the charts.
-   * Can be a string (the id of the axis) or an object `ChartsYAxisProps`
+   * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
    * @default yAxisIds[0] The id of the first provided axis
    */
   leftAxis: PropTypes.oneOfType([PropTypes.shape({
@@ -149,7 +149,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
   }),
   /**
    * Indicate which axis to display the right of the charts.
-   * Can be a string (the id of the axis) or an object `ChartsYAxisProps`
+   * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
    * @default null
    */
   rightAxis: PropTypes.oneOfType([PropTypes.shape({
@@ -214,7 +214,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
   }),
   /**
    * Indicate which axis to display the top of the charts.
-   * Can be a string (the id of the axis) or an object `ChartsXAxisProps`
+   * Can be a string (the id of the axis) or an object `ChartsXAxisProps`.
    * @default null
    */
   topAxis: PropTypes.oneOfType([PropTypes.shape({

package/modern/ResponsiveChartContainer/index.js

@@ -21,8 +21,8 @@ const useChartDimensions = (inWidth, inHeight) => {
     }
     const win = ownerWindow(mainEl);
     const computedStyle = win.getComputedStyle(mainEl);
-    const newHeight = parseFloat(computedStyle.height) || 0;
-    const newWidth = parseFloat(computedStyle.width) || 0;
+    const newHeight = Math.floor(parseFloat(computedStyle.height)) || 0;
+    const newWidth = Math.floor(parseFloat(computedStyle.width)) || 0;
     setWidth(newWidth);
     setHeight(newHeight);
   }, []);

package/modern/ScatterChart/Scatter.js

@@ -16,62 +16,48 @@ function Scatter(props) {
   const {
     item
   } = React.useContext(InteractionContext);
-  const getXPosition = getValueToPositionMapper(xScale);
-  const getYPosition = getValueToPositionMapper(yScale);
   const getInteractionItemProps = useInteractionItemProps(series.highlightScope);
-  const xRange = xScale.range();
-  const yRange = yScale.range();
-  const isInRange = ({
-    x,
-    y
-  }) => {
-    if (x < Math.min(...xRange) || x > Math.max(...xRange)) {
-      return false;
-    }
-    if (y < Math.min(...yRange) || y > Math.max(...yRange)) {
-      return false;
-    }
-    return true;
-  };
-  return /*#__PURE__*/_jsx("g", {
-    children: series.data.map(({
-      x,
-      y,
-      id
-    }, index) => ({
-      x: getXPosition(x),
-      y: getYPosition(y),
-      id,
-      dataIndex: index
-    })).filter(isInRange).map(({
-      x,
-      y,
-      id,
-      dataIndex
-    }) => {
-      const isHighlighted = getIsHighlighted(item, {
-        type: 'scatter',
-        seriesId: series.id,
-        dataIndex
-      }, series.highlightScope);
-      const isFaded = !isHighlighted && getIsFaded(item, {
+  const cleanData = React.useMemo(() => {
+    const getXPosition = getValueToPositionMapper(xScale);
+    const getYPosition = getValueToPositionMapper(yScale);
+    const xRange = xScale.range();
+    const yRange = yScale.range();
+    const minXRange = Math.min(...xRange);
+    const maxXRange = Math.max(...xRange);
+    const minYRange = Math.min(...yRange);
+    const maxYRange = Math.max(...yRange);
+    const temp = [];
+    for (let i = 0; i < series.data.length; i += 1) {
+      const scatterPoint = series.data[i];
+      const x = getXPosition(scatterPoint.x);
+      const y = getYPosition(scatterPoint.y);
+      const isInRange = x >= minXRange && x <= maxXRange && y >= minYRange && y <= maxYRange;
+      const pointCtx = {
         type: 'scatter',
         seriesId: series.id,
-        dataIndex
-      }, series.highlightScope);
-      return /*#__PURE__*/_jsx("circle", _extends({
-        cx: 0,
-        cy: 0,
-        r: markerSize,
-        transform: `translate(${x}, ${y})`,
-        fill: color,
-        opacity: isFaded && 0.3 || 1
-      }, getInteractionItemProps({
-        type: 'scatter',
-        seriesId: series.id,
-        dataIndex
-      })), id);
-    })
+        dataIndex: i
+      };
+      if (isInRange) {
+        temp.push({
+          x,
+          y,
+          isFaded: !getIsHighlighted(item, pointCtx, series.highlightScope) && getIsFaded(item, pointCtx, series.highlightScope),
+          interactionProps: getInteractionItemProps(pointCtx),
+          id: scatterPoint.id
+        });
+      }
+    }
+    return temp;
+  }, [yScale, xScale, getInteractionItemProps, item, series.data, series.highlightScope, series.id]);
+  return /*#__PURE__*/_jsx("g", {
+    children: cleanData.map(dataPoint => /*#__PURE__*/_jsx("circle", _extends({
+      cx: 0,
+      cy: 0,
+      r: markerSize,
+      transform: `translate(${dataPoint.x}, ${dataPoint.y})`,
+      fill: color,
+      opacity: dataPoint.isFaded && 0.3 || 1
+    }, dataPoint.interactionProps), dataPoint.id))
   });
 }
 process.env.NODE_ENV !== "production" ? Scatter.propTypes = {

package/modern/ScatterChart/ScatterChart.js

@@ -64,7 +64,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
   }),
   /**
    * Indicate which axis to display the bottom of the charts.
-   * Can be a string (the id of the axis) or an object `ChartsXAxisProps`
+   * Can be a string (the id of the axis) or an object `ChartsXAxisProps`.
    * @default xAxisIds[0] The id of the first provided axis
    */
   bottomAxis: PropTypes.oneOfType([PropTypes.shape({
@@ -91,7 +91,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
   height: PropTypes.number,
   /**
    * Indicate which axis to display the left of the charts.
-   * Can be a string (the id of the axis) or an object `ChartsYAxisProps`
+   * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
    * @default yAxisIds[0] The id of the first provided axis
    */
   leftAxis: PropTypes.oneOfType([PropTypes.shape({
@@ -131,7 +131,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
   }),
   /**
    * Indicate which axis to display the right of the charts.
-   * Can be a string (the id of the axis) or an object `ChartsYAxisProps`
+   * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
    * @default null
    */
   rightAxis: PropTypes.oneOfType([PropTypes.shape({
@@ -176,7 +176,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
   }),
   /**
    * Indicate which axis to display the top of the charts.
-   * Can be a string (the id of the axis) or an object `ChartsXAxisProps`
+   * Can be a string (the id of the axis) or an object `ChartsXAxisProps`.
    * @default null
    */
   topAxis: PropTypes.oneOfType([PropTypes.shape({

package/modern/context/DrawingProvider.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import useChartDimensions from '../hooks/useChartDimensions';
 
 /**
- * Defines the area in which it is possible to draw the charts
+ * Defines the area in which it is possible to draw the charts.
  */
 import { jsx as _jsx } from "react/jsx-runtime";
 export const DrawingContext = /*#__PURE__*/React.createContext({

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v6.0.0-alpha.3
+ * @mui/x-charts v6.0.0-alpha.5
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-charts",
-  "version": "6.0.0-alpha.3",
+  "version": "6.0.0-alpha.5",
   "description": "The community edition of the charts components (MUI X).",
   "author": "MUI Team",
   "main": "./index.js",
@@ -27,10 +27,7 @@
     "directory": "packages/x-charts"
   },
   "dependencies": {
-    "@babel/runtime": "^7.22.5",
-    "@types/d3-color": "^3.1.0",
-    "@types/d3-scale": "^4.0.3",
-    "@types/d3-shape": "^3.1.1",
+    "@babel/runtime": "^7.22.6",
     "clsx": "^1.2.1",
     "d3-color": "^3.1.0",
     "d3-scale": "^4.0.2",
@@ -38,11 +35,31 @@
     "prop-types": "^15.8.1"
   },
   "peerDependencies": {
+    "@emotion/react": "^11.9.0",
+    "@emotion/styled": "^11.8.1",
     "@mui/material": "^5.4.1",
     "@mui/system": "^5.4.1",
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0"
   },
+  "peerDependenciesMeta": {
+    "@emotion/react": {
+      "optional": true
+    },
+    "@emotion/styled": {
+      "optional": true
+    }
+  },
+  "exports": {
+    ".": {
+      "require": "./index.js",
+      "import": "./esm/index.js"
+    },
+    "./*": {
+      "require": "./*",
+      "import": "./esm/*"
+    }
+  },
   "setupFiles": [
     "<rootDir>/src/setupTests.js"
   ],