@mui/x-charts 7.16.0 → 7.17.0

package/node/LineChart/CircleMarkElement.js

@@ -0,0 +1,113 @@
+"use strict";
+'use client';
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CircleMarkElement = CircleMarkElement;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styles = require("@mui/material/styles");
+var _warning = require("@mui/x-internals/warning");
+var _web = require("@react-spring/web");
+var _InteractionProvider = require("../context/InteractionProvider");
+var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
+var _context = require("../context");
+var _markElementClasses = require("./markElementClasses");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["x", "y", "id", "classes", "color", "dataIndex", "onClick", "skipAnimation", "shape"];
+/**
+ * The line mark element that only render circle for performance improvement.
+ *
+ * Demos:
+ *
+ * - [Lines](https://mui.com/x/react-charts/lines/)
+ * - [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+ *
+ * API:
+ *
+ * - [CircleMarkElement API](https://mui.com/x/api/charts/circle-mark-element/)
+ */
+function CircleMarkElement(props) {
+  const {
+      x,
+      y,
+      id,
+      classes: innerClasses,
+      color,
+      dataIndex,
+      onClick,
+      skipAnimation,
+      shape
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  if (shape !== 'circle') {
+    (0, _warning.warnOnce)([`MUI X: The mark element of your line chart have shape "${shape}" which is not supported when using \`experimentalRendering=true\`.`, 'Only "circle" are supported with `experimentalRendering`.'].join('\n'), 'error');
+  }
+  const theme = (0, _styles.useTheme)();
+  const getInteractionItemProps = (0, _useInteractionItemProps.useInteractionItemProps)();
+  const {
+    isFaded,
+    isHighlighted
+  } = (0, _context.useItemHighlighted)({
+    seriesId: id
+  });
+  const {
+    axis
+  } = React.useContext(_InteractionProvider.InteractionContext);
+  const position = (0, _web.useSpring)({
+    to: {
+      x,
+      y
+    },
+    immediate: skipAnimation
+  });
+  const ownerState = {
+    id,
+    classes: innerClasses,
+    isHighlighted: axis.x?.index === dataIndex || isHighlighted,
+    isFaded,
+    color
+  };
+  const classes = (0, _markElementClasses.useUtilityClasses)(ownerState);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_web.animated.circle, (0, _extends2.default)({}, other, {
+    cx: position.x,
+    cy: position.y,
+    r: 5,
+    fill: (theme.vars || theme).palette.background.paper,
+    stroke: color,
+    strokeWidth: 2,
+    className: classes.root,
+    onClick: onClick,
+    cursor: onClick ? 'pointer' : 'unset'
+  }, getInteractionItemProps({
+    type: 'line',
+    seriesId: id,
+    dataIndex
+  })));
+}
+process.env.NODE_ENV !== "production" ? CircleMarkElement.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  classes: _propTypes.default.object,
+  /**
+   * The index to the element in the series' data array.
+   */
+  dataIndex: _propTypes.default.number.isRequired,
+  id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
+  /**
+   * The shape of the marker.
+   */
+  shape: _propTypes.default.oneOf(['circle', 'cross', 'diamond', 'square', 'star', 'triangle', 'wye']).isRequired,
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation: _propTypes.default.bool
+} : void 0;

package/node/LineChart/LineChart.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
@@ -110,6 +111,10 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
    * If `true`, render the line highlight item.
    */
   disableLineItemHighlight: _propTypes.default.bool,
+  /**
+   * If `true` marks will render `<circle />` instead of `<path />` and drop theme override for faster rendering.
+   */
+  experimentalMarkRendering: _propTypes.default.bool,
   /**
    * Option to display a cartesian grid in the background.
    */
@@ -146,6 +151,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     itemMarkWidth: _propTypes.default.number,
     labelStyle: _propTypes.default.object,
     markGap: _propTypes.default.number,
+    onItemClick: _propTypes.default.func,
     padding: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.shape({
       bottom: _propTypes.default.number,
       left: _propTypes.default.number,

package/node/LineChart/LineElement.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

package/node/LineChart/LineHighlightElement.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

package/node/LineChart/LineHighlightPlot.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

package/node/LineChart/LinePlot.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

package/node/LineChart/MarkElement.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
@@ -6,40 +7,20 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.MarkElement = MarkElement;
-exports.getMarkElementUtilityClass = getMarkElementUtilityClass;
-exports.markElementClasses = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
-var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
 var _styles = require("@mui/material/styles");
-var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
 var _d3Shape = require("@mui/x-charts-vendor/d3-shape");
 var _web = require("@react-spring/web");
 var _getSymbol = require("../internals/getSymbol");
 var _InteractionProvider = require("../context/InteractionProvider");
 var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
 var _context = require("../context");
+var _markElementClasses = require("./markElementClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["x", "y", "id", "classes", "color", "shape", "dataIndex", "onClick", "skipAnimation"];
-function getMarkElementUtilityClass(slot) {
-  return (0, _generateUtilityClass.default)('MuiMarkElement', slot);
-}
-const markElementClasses = exports.markElementClasses = (0, _generateUtilityClasses.default)('MuiMarkElement', ['root', 'highlighted', 'faded']);
-const useUtilityClasses = ownerState => {
-  const {
-    classes,
-    id,
-    isFaded,
-    isHighlighted
-  } = ownerState;
-  const slots = {
-    root: ['root', `series-${id}`, isHighlighted && 'highlighted', isFaded && 'faded']
-  };
-  return (0, _composeClasses.default)(slots, getMarkElementUtilityClass, classes);
-};
 const MarkElementPath = (0, _styles.styled)(_web.animated.path, {
   name: 'MuiMarkElement',
   slot: 'Root',
@@ -99,7 +80,7 @@ function MarkElement(props) {
     isFaded,
     color
   };
-  const classes = useUtilityClasses(ownerState);
+  const classes = (0, _markElementClasses.useUtilityClasses)(ownerState);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(MarkElementPath, (0, _extends2.default)({}, other, {
     style: {
       transform: (0, _web.to)([position.x, position.y], (pX, pY) => `translate(${pX}px, ${pY}px)`),

package/node/LineChart/MarkPlot.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
@@ -19,8 +20,9 @@ var _cleanId = require("../internals/cleanId");
 var _getColor = _interopRequireDefault(require("./getColor"));
 var _useSeries = require("../hooks/useSeries");
 var _useDrawingArea = require("../hooks/useDrawingArea");
+var _CircleMarkElement = require("./CircleMarkElement");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["slots", "slotProps", "skipAnimation", "onItemClick"];
+const _excluded = ["slots", "slotProps", "skipAnimation", "onItemClick", "experimentalRendering"];
 /**
  * Demos:
  *
@@ -36,14 +38,15 @@ function MarkPlot(props) {
       slots,
       slotProps,
       skipAnimation,
-      onItemClick
+      onItemClick,
+      experimentalRendering
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const seriesData = (0, _useSeries.useLineSeries)();
   const axisData = (0, _CartesianProvider.useCartesianContext)();
   const chartId = (0, _useChartId.useChartId)();
   const drawingArea = (0, _useDrawingArea.useDrawingArea)();
-  const Mark = slots?.mark ?? _MarkElement.MarkElement;
+  const Mark = slots?.mark ?? (experimentalRendering ? _CircleMarkElement.CircleMarkElement : _MarkElement.MarkElement);
   if (seriesData === undefined) {
     return null;
   }
@@ -157,6 +160,12 @@ process.env.NODE_ENV !== "production" ? MarkPlot.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
+  /**
+   * If `true` the mark element will only be able to render circle.
+   * Giving fewer customization options, but saving around 40ms per 1.000 marks.
+   * @default false
+   */
+  experimentalRendering: _propTypes.default.bool,
   /**
    * Callback fired when a line mark item is clicked.
    * @param {React.MouseEvent<SVGPathElement, MouseEvent>} event The event source of the callback.

package/node/LineChart/index.js

@@ -3,9 +3,26 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _exportNames = {
+  getMarkElementUtilityClass: true,
+  markElementClasses: true
+};
+Object.defineProperty(exports, "getMarkElementUtilityClass", {
+  enumerable: true,
+  get: function () {
+    return _markElementClasses.getMarkElementUtilityClass;
+  }
+});
+Object.defineProperty(exports, "markElementClasses", {
+  enumerable: true,
+  get: function () {
+    return _markElementClasses.markElementClasses;
+  }
+});
 var _LineChart = require("./LineChart");
 Object.keys(_LineChart).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _LineChart[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -17,6 +34,7 @@ Object.keys(_LineChart).forEach(function (key) {
 var _LinePlot = require("./LinePlot");
 Object.keys(_LinePlot).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _LinePlot[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -28,6 +46,7 @@ Object.keys(_LinePlot).forEach(function (key) {
 var _AreaPlot = require("./AreaPlot");
 Object.keys(_AreaPlot).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _AreaPlot[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -39,6 +58,7 @@ Object.keys(_AreaPlot).forEach(function (key) {
 var _MarkPlot = require("./MarkPlot");
 Object.keys(_MarkPlot).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _MarkPlot[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -50,6 +70,7 @@ Object.keys(_MarkPlot).forEach(function (key) {
 var _LineHighlightPlot = require("./LineHighlightPlot");
 Object.keys(_LineHighlightPlot).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _LineHighlightPlot[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -61,6 +82,7 @@ Object.keys(_LineHighlightPlot).forEach(function (key) {
 var _AreaElement = require("./AreaElement");
 Object.keys(_AreaElement).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _AreaElement[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -72,6 +94,7 @@ Object.keys(_AreaElement).forEach(function (key) {
 var _AnimatedArea = require("./AnimatedArea");
 Object.keys(_AnimatedArea).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _AnimatedArea[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -83,6 +106,7 @@ Object.keys(_AnimatedArea).forEach(function (key) {
 var _LineElement = require("./LineElement");
 Object.keys(_LineElement).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _LineElement[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -94,6 +118,7 @@ Object.keys(_LineElement).forEach(function (key) {
 var _AnimatedLine = require("./AnimatedLine");
 Object.keys(_AnimatedLine).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _AnimatedLine[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -105,6 +130,7 @@ Object.keys(_AnimatedLine).forEach(function (key) {
 var _MarkElement = require("./MarkElement");
 Object.keys(_MarkElement).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _MarkElement[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -116,6 +142,7 @@ Object.keys(_MarkElement).forEach(function (key) {
 var _LineHighlightElement = require("./LineHighlightElement");
 Object.keys(_LineHighlightElement).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _LineHighlightElement[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -123,4 +150,5 @@ Object.keys(_LineHighlightElement).forEach(function (key) {
       return _LineHighlightElement[key];
     }
   });
-});
+});
+var _markElementClasses = require("./markElementClasses");

package/node/LineChart/legend.js

@@ -16,9 +16,10 @@ const legendGetter = params => {
       return acc;
     }
     acc.push({
+      id: seriesId,
+      seriesId,
       color: series[seriesId].color,
-      label: formattedLabel,
-      id: seriesId
+      label: formattedLabel
     });
     return acc;
   }, []);

package/node/LineChart/markElementClasses.js

@@ -0,0 +1,28 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getMarkElementUtilityClass = getMarkElementUtilityClass;
+exports.useUtilityClasses = exports.markElementClasses = void 0;
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
+var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
+function getMarkElementUtilityClass(slot) {
+  return (0, _generateUtilityClass.default)('MuiMarkElement', slot);
+}
+const markElementClasses = exports.markElementClasses = (0, _generateUtilityClasses.default)('MuiMarkElement', ['root', 'highlighted', 'faded']);
+const useUtilityClasses = ownerState => {
+  const {
+    classes,
+    id,
+    isFaded,
+    isHighlighted
+  } = ownerState;
+  const slots = {
+    root: ['root', `series-${id}`, isHighlighted && 'highlighted', isFaded && 'faded']
+  };
+  return (0, _composeClasses.default)(slots, getMarkElementUtilityClass, classes);
+};
+exports.useUtilityClasses = useUtilityClasses;

package/node/LineChart/useLineChartProps.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
@@ -9,7 +10,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _constants = require("../constants");
-const _excluded = ["xAxis", "yAxis", "series", "width", "height", "margin", "colors", "dataset", "sx", "tooltip", "onAxisClick", "onAreaClick", "onLineClick", "onMarkClick", "axisHighlight", "disableLineItemHighlight", "legend", "grid", "topAxis", "leftAxis", "rightAxis", "bottomAxis", "children", "slots", "slotProps", "skipAnimation", "loading", "highlightedItem", "onHighlightChange", "className"];
+const _excluded = ["xAxis", "yAxis", "series", "width", "height", "margin", "colors", "dataset", "sx", "tooltip", "onAxisClick", "onAreaClick", "onLineClick", "onMarkClick", "axisHighlight", "disableLineItemHighlight", "legend", "grid", "topAxis", "leftAxis", "rightAxis", "bottomAxis", "children", "slots", "slotProps", "skipAnimation", "loading", "highlightedItem", "onHighlightChange", "className", "experimentalMarkRendering"];
 /**
  * A helper function that extracts LineChartProps from the input props
  * and returns an object with props for the children components of LineChart.
@@ -48,7 +49,8 @@ const useLineChartProps = props => {
       loading,
       highlightedItem,
       onHighlightChange,
-      className
+      className,
+      experimentalMarkRendering
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const id = (0, _useId.default)();
@@ -106,7 +108,8 @@ const useLineChartProps = props => {
     slots,
     slotProps,
     onItemClick: onMarkClick,
-    skipAnimation
+    skipAnimation,
+    experimentalRendering: experimentalMarkRendering
   };
   const overlayProps = {
     slots,

package/node/PieChart/PieArc.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

package/node/PieChart/PieArcLabel.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

package/node/PieChart/PieArcLabelPlot.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

package/node/PieChart/PieArcPlot.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

package/node/PieChart/PieChart.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
@@ -205,6 +206,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     itemMarkWidth: _propTypes.default.number,
     labelStyle: _propTypes.default.object,
     markGap: _propTypes.default.number,
+    onItemClick: _propTypes.default.func,
     padding: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.shape({
       bottom: _propTypes.default.number,
       left: _propTypes.default.number,

package/node/PieChart/PiePlot.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

package/node/PieChart/dataTransform/useTransformData.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;

package/node/PieChart/legend.js

@@ -17,9 +17,11 @@ const legendGetter = params => {
         return;
       }
       acc.push({
+        id: item.id,
+        seriesId,
         color: item.color,
         label: formattedLabel,
-        id: item.id
+        itemId: item.id
       });
     });
     return acc;

package/node/ResponsiveChartContainer/ResponsiveChartContainer.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;

package/node/ResponsiveChartContainer/useChartContainerDimensions.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
@@ -53,7 +54,7 @@ const useChartContainerDimensions = (inWidth, inHeight) => {
     }
     return () => {
       if (animationFrame) {
-        window.cancelAnimationFrame(animationFrame);
+        cancelAnimationFrame(animationFrame);
       }
       if (elementToObserve) {
         observer.unobserve(elementToObserve);

package/node/ResponsiveChartContainer/useResponsiveChartContainerProps.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {

package/node/ScatterChart/Scatter.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;

package/node/ScatterChart/ScatterChart.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
@@ -140,6 +141,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     itemMarkWidth: _propTypes.default.number,
     labelStyle: _propTypes.default.object,
     markGap: _propTypes.default.number,
+    onItemClick: _propTypes.default.func,
     padding: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.shape({
       bottom: _propTypes.default.number,
       left: _propTypes.default.number,

package/node/ScatterChart/ScatterPlot.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;

package/node/ScatterChart/legend.js

@@ -16,9 +16,10 @@ const legendGetter = params => {
       return acc;
     }
     acc.push({
+      id: seriesId,
+      seriesId,
       color: series[seriesId].color,
-      label: formattedLabel,
-      id: seriesId
+      label: formattedLabel
     });
     return acc;
   }, []);

package/node/ScatterChart/useScatterChartProps.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {

package/node/SparkLineChart/SparkLineChart.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

package/node/context/CartesianProvider/CartesianProvider.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {

package/node/context/CartesianProvider/useCartesianContext.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {

package/node/context/DrawingProvider.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;

package/node/context/HighlightedProvider/HighlightedProvider.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;