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

package/BarChart/BarChart.js

@@ -87,7 +87,7 @@ process.env.NODE_ENV !== "production" ? BarChart.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.default.oneOfType([_propTypes.default.shape({
@@ -114,7 +114,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
   height: _propTypes.default.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.default.oneOfType([_propTypes.default.shape({
@@ -154,7 +154,7 @@ process.env.NODE_ENV !== "production" ? BarChart.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.default.oneOfType([_propTypes.default.shape({
@@ -197,7 +197,7 @@ process.env.NODE_ENV !== "production" ? BarChart.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.default.oneOfType([_propTypes.default.shape({

package/CHANGELOG.md

@@ -3,6 +3,70 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 6.10.2
+
+_Jul 27, 2023_
+
+We'd like to offer a big thanks to the 13 contributors who made this release possible. Here are some highlights ✨:
+
+- 🚀 Improve scatter charts performance
+- 📚 Redesigned component API documentation and side navigation
+- 🐞 Bugfixes
+
+### Data Grid
+
+#### `@mui/x-data-grid@v6.10.2`
+
+- [DataGrid] Fix quick filter & aggregation error (#9729) @romgrk
+- [DataGrid] Fix row click propagation causing error in nested grid (#9741) @cherniavskii
+- [DataGrid] Keep focused cell in the DOM (#7357) @yaredtsy
+- [l10n] Improve Finnish (fi-FI) locale (#9746) @sambbaahh
+
+#### `@mui/x-data-grid-pro@v6.10.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link)
+
+Same changes as in `@mui/x-data-grid@v6.10.2`.
+
+#### `@mui/x-data-grid-premium@v6.10.2` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link)
+
+Same changes as in `@mui/x-data-grid-pro@v6.10.2`, plus:
+
+- [DataGridPremium] Allow to customize grouping cell offset (#9417) @cherniavskii
+
+### Date Pickers
+
+#### `@mui/x-date-pickers@v6.10.2`
+
+- [pickers] Remove the `endOfDate` from `DigitalClock` timeOptions (#9800) @noraleonte
+
+#### `@mui/x-date-pickers-pro@v6.10.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link)
+
+Same changes as in `@mui/x-date-pickers@v6.10.2`.
+
+### Charts / `@mui/x-charts@v6.0.0-alpha.5`
+
+- [charts] Improve JSDoc for axis-related props (#9779) @flaviendelangle
+- [charts] Improve performances of Scatter component (#9527) @flaviendelangle
+
+### Docs
+
+- [docs] Add `pnpm` in more places @oliviertassinari
+- [docs] Add `pnpm` installation instructions for MUI X (#9707) @richbustos
+- [docs] Align pickers "uncontrolled vs controlled" sections (#9772) @LukasTy
+- [docs] Apply style guide to the data grid Layout page (#9673) @richbustos
+- [docs] Differentiate between packages in `slotProps` docs (#9668) @cherniavskii
+- [docs] Fix charts width in axis pages (#9801) @alexfauquette
+- [docs] Fix wrong prop name in the Editing page (#9753) @m4theushw
+- [docs] New component API page and side nav design (#9187) @alexfauquette
+- [docs] Update overview page with up to date information about the plans (#9512) @joserodolfofreitas
+
+### Core
+
+- [core] Use PR charts version in preview (#9787) @alexfauquette
+- [license] Allow overriding the license on specific parts of the page (#9717) @Janpot
+- [license] Throw in dev mode after 30 days (#9701) @oliviertassinari
+- [license] Only throw in dev mode (#9803) @oliviertassinari
+- [test] Fail the CI when new unexpected files are created (#9728) @oliviertassinari
+
 ## 6.10.1
 
 _Jul 20, 2023_

package/ChartsAxis/ChartsAxis.d.ts

@@ -3,25 +3,25 @@ import { ChartsXAxisProps, ChartsYAxisProps } from '../models/axis';
 export interface ChartsAxisProps {
     /**
      * 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?: null | string | ChartsXAxisProps;
     /**
      * 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?: null | string | ChartsXAxisProps;
     /**
      * 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?: null | string | ChartsYAxisProps;
     /**
      * 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?: null | string | ChartsYAxisProps;

package/ChartsAxis/ChartsAxis.js

@@ -79,7 +79,7 @@ process.env.NODE_ENV !== "production" ? ChartsAxis.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.default.oneOfType([_propTypes.default.shape({
@@ -97,7 +97,7 @@ process.env.NODE_ENV !== "production" ? ChartsAxis.propTypes = {
   }), _propTypes.default.string]),
   /**
    * 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.default.oneOfType([_propTypes.default.shape({
@@ -115,7 +115,7 @@ process.env.NODE_ENV !== "production" ? ChartsAxis.propTypes = {
   }), _propTypes.default.string]),
   /**
    * 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.default.oneOfType([_propTypes.default.shape({
@@ -133,7 +133,7 @@ process.env.NODE_ENV !== "production" ? ChartsAxis.propTypes = {
   }), _propTypes.default.string]),
   /**
    * 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.default.oneOfType([_propTypes.default.shape({

package/LineChart/LineChart.js

@@ -89,7 +89,7 @@ process.env.NODE_ENV !== "production" ? LineChart.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.default.oneOfType([_propTypes.default.shape({
@@ -116,7 +116,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
   height: _propTypes.default.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.default.oneOfType([_propTypes.default.shape({
@@ -156,7 +156,7 @@ process.env.NODE_ENV !== "production" ? LineChart.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.default.oneOfType([_propTypes.default.shape({
@@ -201,7 +201,7 @@ process.env.NODE_ENV !== "production" ? LineChart.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.default.oneOfType([_propTypes.default.shape({

package/PieChart/PieChart.js

@@ -90,7 +90,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.default.oneOfType([_propTypes.default.shape({
@@ -117,7 +117,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
   height: _propTypes.default.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.default.oneOfType([_propTypes.default.shape({
@@ -157,7 +157,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.default.oneOfType([_propTypes.default.shape({
@@ -222,7 +222,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.default.oneOfType([_propTypes.default.shape({

package/ScatterChart/Scatter.js

@@ -25,62 +25,48 @@ function Scatter(props) {
   const {
     item
   } = React.useContext(_InteractionProvider.InteractionContext);
-  const getXPosition = (0, _useScale.getValueToPositionMapper)(xScale);
-  const getYPosition = (0, _useScale.getValueToPositionMapper)(yScale);
   const getInteractionItemProps = (0, _useInteractionItemProps.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__*/(0, _jsxRuntime.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 = (0, _useInteractionItemProps.getIsHighlighted)(item, {
-        type: 'scatter',
-        seriesId: series.id,
-        dataIndex
-      }, series.highlightScope);
-      const isFaded = !isHighlighted && (0, _useInteractionItemProps.getIsFaded)(item, {
+  const cleanData = React.useMemo(() => {
+    const getXPosition = (0, _useScale.getValueToPositionMapper)(xScale);
+    const getYPosition = (0, _useScale.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__*/(0, _jsxRuntime.jsx)("circle", (0, _extends2.default)({
-        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: !(0, _useInteractionItemProps.getIsHighlighted)(item, pointCtx, series.highlightScope) && (0, _useInteractionItemProps.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__*/(0, _jsxRuntime.jsx)("g", {
+    children: cleanData.map(dataPoint => /*#__PURE__*/(0, _jsxRuntime.jsx)("circle", (0, _extends2.default)({
+      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/ScatterChart/ScatterChart.js

@@ -73,7 +73,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.default.oneOfType([_propTypes.default.shape({
@@ -100,7 +100,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
   height: _propTypes.default.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.default.oneOfType([_propTypes.default.shape({
@@ -140,7 +140,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.default.oneOfType([_propTypes.default.shape({
@@ -185,7 +185,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.default.oneOfType([_propTypes.default.shape({

package/context/DrawingProvider.d.ts

@@ -5,7 +5,7 @@ export interface DrawingProviderProps extends LayoutConfig {
     svgRef: React.RefObject<SVGSVGElement>;
 }
 /**
- * Defines the area in which it is possible to draw the charts
+ * Defines the area in which it is possible to draw the charts.
  */
 export type DrawingArea = {
     left: number;

package/context/DrawingProvider.js

@@ -14,7 +14,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 /**
- * Defines the area in which it is possible to draw the charts
+ * Defines the area in which it is possible to draw the charts.
  */
 
 const DrawingContext = /*#__PURE__*/React.createContext({

package/esm/BarChart/BarChart.js

@@ -78,7 +78,7 @@ process.env.NODE_ENV !== "production" ? BarChart.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({
@@ -105,7 +105,7 @@ process.env.NODE_ENV !== "production" ? BarChart.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({
@@ -145,7 +145,7 @@ process.env.NODE_ENV !== "production" ? BarChart.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({
@@ -188,7 +188,7 @@ process.env.NODE_ENV !== "production" ? BarChart.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/esm/ChartsAxis/ChartsAxis.js

@@ -71,7 +71,7 @@ process.env.NODE_ENV !== "production" ? ChartsAxis.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({
@@ -89,7 +89,7 @@ process.env.NODE_ENV !== "production" ? ChartsAxis.propTypes = {
   }), PropTypes.string]),
   /**
    * 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({
@@ -107,7 +107,7 @@ process.env.NODE_ENV !== "production" ? ChartsAxis.propTypes = {
   }), PropTypes.string]),
   /**
    * 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({
@@ -125,7 +125,7 @@ process.env.NODE_ENV !== "production" ? ChartsAxis.propTypes = {
   }), PropTypes.string]),
   /**
    * 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/esm/LineChart/LineChart.js

@@ -80,7 +80,7 @@ process.env.NODE_ENV !== "production" ? LineChart.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({
@@ -107,7 +107,7 @@ process.env.NODE_ENV !== "production" ? LineChart.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({
@@ -147,7 +147,7 @@ process.env.NODE_ENV !== "production" ? LineChart.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({
@@ -192,7 +192,7 @@ process.env.NODE_ENV !== "production" ? LineChart.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/esm/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/esm/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 = {