@mui/x-charts 7.0.0-beta.0 → 7.0.0-beta.2

package/modern/LineChart/LinePlot.js

@@ -1,6 +1,6 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["slots", "slotProps"];
+import _extends from "@babel/runtime/helpers/esm/extends";
+const _excluded = ["slots", "slotProps", "skipAnimation", "onItemClick"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { line as d3Line } from 'd3-shape';
@@ -11,26 +11,11 @@ import { getValueToPositionMapper } from '../hooks/useScale';
 import getCurveFactory from '../internals/getCurve';
 import { DEFAULT_X_AXIS_KEY } from '../constants';
 import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * Demos:
- *
- * - [Lines](https://mui.com/x/react-charts/lines/)
- * - [Line demonstration](https://mui.com/x/react-charts/line-demo/)
- *
- * API:
- *
- * - [LinePlot API](https://mui.com/x/api/charts/line-plot/)
- */
-function LinePlot(props) {
-  const {
-      slots,
-      slotProps
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+const useAggregatedData = () => {
   const seriesData = React.useContext(SeriesContext).line;
   const axisData = React.useContext(CartesianContext);
   if (seriesData === undefined) {
-    return null;
+    return [];
   }
   const {
     series,
@@ -44,45 +29,82 @@ function LinePlot(props) {
   } = axisData;
   const defaultXAxisId = xAxisIds[0];
   const defaultYAxisId = yAxisIds[0];
-  return /*#__PURE__*/_jsx("g", _extends({}, other, {
-    children: stackingGroups.flatMap(({
-      ids: groupIds
-    }) => {
-      return groupIds.flatMap(seriesId => {
-        const {
-          xAxisKey = defaultXAxisId,
-          yAxisKey = defaultYAxisId,
-          stackedData,
-          data,
-          connectNulls
-        } = series[seriesId];
-        const xScale = getValueToPositionMapper(xAxis[xAxisKey].scale);
-        const yScale = yAxis[yAxisKey].scale;
-        const xData = xAxis[xAxisKey].data;
-        if (process.env.NODE_ENV !== 'production') {
-          if (xData === undefined) {
-            throw new Error(`MUI X Charts: ${xAxisKey === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisKey}"`} should have data property to be able to display a line plot.`);
-          }
-          if (xData.length < stackedData.length) {
-            throw new Error(`MUI X Charts: The data length of the x axis (${xData.length} items) is lower than the length of series (${stackedData.length} items).`);
-          }
+  return stackingGroups.flatMap(({
+    ids: groupIds
+  }) => {
+    return groupIds.flatMap(seriesId => {
+      const {
+        xAxisKey = defaultXAxisId,
+        yAxisKey = defaultYAxisId,
+        stackedData,
+        data,
+        connectNulls
+      } = series[seriesId];
+      const xScale = getValueToPositionMapper(xAxis[xAxisKey].scale);
+      const yScale = yAxis[yAxisKey].scale;
+      const xData = xAxis[xAxisKey].data;
+      if (process.env.NODE_ENV !== 'production') {
+        if (xData === undefined) {
+          throw new Error(`MUI X Charts: ${xAxisKey === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisKey}"`} should have data property to be able to display a line plot.`);
         }
-        const linePath = d3Line().x(d => xScale(d.x)).defined((_, i) => connectNulls || data[i] != null).y(d => yScale(d.y[1]));
-        const curve = getCurveFactory(series[seriesId].curve);
-        const formattedData = xData?.map((x, index) => ({
-          x,
-          y: stackedData[index]
-        })) ?? [];
-        const d3Data = connectNulls ? formattedData.filter((_, i) => data[i] != null) : formattedData;
-        return /*#__PURE__*/_jsx(LineElement, {
-          id: seriesId,
-          d: linePath.curve(curve)(d3Data) || undefined,
-          color: series[seriesId].color,
-          highlightScope: series[seriesId].highlightScope,
-          slots: slots,
-          slotProps: slotProps
-        }, seriesId);
+        if (xData.length < stackedData.length) {
+          throw new Error(`MUI X Charts: The data length of the x axis (${xData.length} items) is lower than the length of series (${stackedData.length} items).`);
+        }
+      }
+      const linePath = d3Line().x(d => xScale(d.x)).defined((_, i) => connectNulls || data[i] != null).y(d => yScale(d.y[1]));
+      const formattedData = xData?.map((x, index) => ({
+        x,
+        y: stackedData[index]
+      })) ?? [];
+      const d3Data = connectNulls ? formattedData.filter((_, i) => data[i] != null) : formattedData;
+      const d = linePath.curve(getCurveFactory(series[seriesId].curve))(d3Data) || '';
+      return _extends({}, series[seriesId], {
+        d,
+        seriesId
       });
+    });
+  });
+};
+
+/**
+ * Demos:
+ *
+ * - [Lines](https://mui.com/x/react-charts/lines/)
+ * - [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+ *
+ * API:
+ *
+ * - [LinePlot API](https://mui.com/x/api/charts/line-plot/)
+ */
+function LinePlot(props) {
+  const {
+      slots,
+      slotProps,
+      skipAnimation,
+      onItemClick
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const completedData = useAggregatedData();
+  return /*#__PURE__*/_jsx("g", _extends({}, other, {
+    children: completedData.map(({
+      d,
+      seriesId,
+      color,
+      highlightScope
+    }) => {
+      return /*#__PURE__*/_jsx(LineElement, {
+        id: seriesId,
+        d: d,
+        color: color,
+        highlightScope: highlightScope,
+        skipAnimation: skipAnimation,
+        slots: slots,
+        slotProps: slotProps,
+        onClick: onItemClick && (event => onItemClick(event, {
+          type: 'line',
+          seriesId
+        }))
+      }, seriesId);
     })
   }));
 }
@@ -91,6 +113,17 @@ process.env.NODE_ENV !== "production" ? LinePlot.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
+  /**
+   * Callback fired when a line item is clicked.
+   * @param {React.MouseEvent<SVGPathElement, MouseEvent>} event The event source of the callback.
+   * @param {LineItemIdentifier} lineItemIdentifier The line item identifier.
+   */
+  onItemClick: PropTypes.func,
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation: PropTypes.bool,
   /**
    * The props used for each component slot.
    * @default {}

package/modern/LineChart/MarkElement.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["x", "y", "id", "classes", "color", "shape", "dataIndex", "highlightScope"];
+const _excluded = ["x", "y", "id", "classes", "color", "shape", "dataIndex", "highlightScope", "onClick", "skipAnimation"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
@@ -8,6 +8,7 @@ import generateUtilityClass from '@mui/utils/generateUtilityClass';
 import { styled } from '@mui/material/styles';
 import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 import { symbol as d3Symbol, symbolsFill as d3SymbolsFill } from 'd3-shape';
+import { animated, to, useSpring } from '@react-spring/web';
 import { getSymbol } from '../internals/utils';
 import { InteractionContext } from '../context/InteractionProvider';
 import { getIsFaded, getIsHighlighted, useInteractionItemProps } from '../hooks/useInteractionItemProps';
@@ -28,7 +29,7 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getMarkElementUtilityClass, classes);
 };
-const MarkElementPath = styled('path', {
+const MarkElementPath = styled(animated.path, {
   name: 'MuiMarkElement',
   slot: 'Root',
   overridesResolver: (_, styles) => styles.root
@@ -36,8 +37,6 @@ const MarkElementPath = styled('path', {
   ownerState,
   theme
 }) => ({
-  transform: `translate(${ownerState.x}px, ${ownerState.y}px)`,
-  transformOrigin: `${ownerState.x}px ${ownerState.y}px`,
   fill: (theme.vars || theme).palette.background.paper,
   stroke: ownerState.color,
   strokeWidth: 2
@@ -53,9 +52,7 @@ MarkElementPath.propTypes = {
     color: PropTypes.string.isRequired,
     id: PropTypes.string.isRequired,
     isFaded: PropTypes.bool.isRequired,
-    isHighlighted: PropTypes.bool.isRequired,
-    x: PropTypes.number.isRequired,
-    y: PropTypes.number.isRequired
+    isHighlighted: PropTypes.bool.isRequired
   }).isRequired,
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
 };
@@ -78,7 +75,9 @@ function MarkElement(props) {
       color,
       shape,
       dataIndex,
-      highlightScope
+      highlightScope,
+      onClick,
+      skipAnimation
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const getInteractionItemProps = useInteractionItemProps(highlightScope);
@@ -94,20 +93,29 @@ function MarkElement(props) {
     type: 'line',
     seriesId: id
   }, highlightScope);
+  const position = useSpring({
+    x,
+    y,
+    immediate: skipAnimation
+  });
   const ownerState = {
     id,
     classes: innerClasses,
     isHighlighted,
     isFaded,
-    color,
-    x,
-    y
+    color
   };
   const classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/_jsx(MarkElementPath, _extends({}, other, {
+    style: {
+      transform: to([position.x, position.y], (pX, pY) => `translate(${pX}px, ${pY}px)`),
+      transformOrigin: to([position.x, position.y], (pX, pY) => `${pX}px ${pY}px`)
+    },
     ownerState: ownerState,
     className: classes.root,
-    d: d3Symbol(d3SymbolsFill[getSymbol(shape)])()
+    d: d3Symbol(d3SymbolsFill[getSymbol(shape)])(),
+    onClick: onClick,
+    cursor: onClick ? 'pointer' : 'unset'
   }, getInteractionItemProps({
     type: 'line',
     seriesId: id,
@@ -128,9 +136,15 @@ process.env.NODE_ENV !== "production" ? MarkElement.propTypes = {
     faded: PropTypes.oneOf(['global', 'none', 'series']),
     highlighted: PropTypes.oneOf(['item', 'none', 'series'])
   }),
+  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
   /**
    * The shape of the marker.
    */
-  shape: PropTypes.oneOf(['circle', 'cross', 'diamond', 'square', 'star', 'triangle', 'wye']).isRequired
+  shape: PropTypes.oneOf(['circle', 'cross', 'diamond', 'square', 'star', 'triangle', 'wye']).isRequired,
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation: PropTypes.bool
 } : void 0;
 export { MarkElement };

package/modern/LineChart/MarkPlot.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["slots", "slotProps"];
+const _excluded = ["slots", "slotProps", "skipAnimation", "onItemClick"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { SeriesContext } from '../context/SeriesContextProvider';
@@ -8,6 +8,8 @@ import { CartesianContext } from '../context/CartesianContextProvider';
 import { MarkElement } from './MarkElement';
 import { getValueToPositionMapper } from '../hooks/useScale';
 import { DEFAULT_X_AXIS_KEY } from '../constants';
+import { DrawingContext } from '../context/DrawingProvider';
+import { cleanId } from '../internals/utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Demos:
@@ -22,11 +24,16 @@ import { jsx as _jsx } from "react/jsx-runtime";
 function MarkPlot(props) {
   const {
       slots,
-      slotProps
+      slotProps,
+      skipAnimation,
+      onItemClick
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const seriesData = React.useContext(SeriesContext).line;
   const axisData = React.useContext(CartesianContext);
+  const {
+    chartId
+  } = React.useContext(DrawingContext);
   const Mark = slots?.mark ?? MarkElement;
   if (seriesData === undefined) {
     return null;
@@ -47,7 +54,7 @@ function MarkPlot(props) {
     children: stackingGroups.flatMap(({
       ids: groupIds
     }) => {
-      return groupIds.flatMap(seriesId => {
+      return groupIds.map(seriesId => {
         const {
           xAxisKey = defaultXAxisId,
           yAxisKey = defaultYAxisId,
@@ -78,59 +85,70 @@ function MarkPlot(props) {
         if (xData === undefined) {
           throw new Error(`MUI X Charts: ${xAxisKey === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisKey}"`} should have data property to be able to display a line plot.`);
         }
-        return xData?.map((x, index) => {
-          const value = data[index] == null ? null : stackedData[index][1];
-          return {
-            x: xScale(x),
-            y: value === null ? null : yScale(value),
-            position: x,
-            value,
-            index
-          };
-        }).filter(({
-          x,
-          y,
-          index,
-          position,
-          value
-        }) => {
-          if (value === null || y === null) {
-            // Remove missing data point
-            return false;
-          }
-          if (!isInRange({
-            x,
-            y
-          })) {
-            // Remove out of range
-            return false;
-          }
-          if (showMark === true) {
-            return true;
-          }
-          return showMark({
+        const clipId = cleanId(`${chartId}-${seriesId}-line-clip`); // We assume that if displaying line mark, the line will also be rendered
+
+        return /*#__PURE__*/_jsx("g", {
+          clipPath: `url(#${clipId})`,
+          children: xData?.map((x, index) => {
+            const value = data[index] == null ? null : stackedData[index][1];
+            return {
+              x: xScale(x),
+              y: value === null ? null : yScale(value),
+              position: x,
+              value,
+              index
+            };
+          }).filter(({
             x,
             y,
             index,
             position,
             value
-          });
-        }).map(({
-          x,
-          y,
-          index
-        }) => {
-          return /*#__PURE__*/_jsx(Mark, _extends({
-            id: seriesId,
-            dataIndex: index,
-            shape: "circle",
-            color: series[seriesId].color,
-            x: x,
-            y: y // Don't knwo why TS don't get from the filter that y can't be null
-            ,
-            highlightScope: series[seriesId].highlightScope
-          }, slotProps?.mark), `${seriesId}-${index}`);
-        });
+          }) => {
+            if (value === null || y === null) {
+              // Remove missing data point
+              return false;
+            }
+            if (!isInRange({
+              x,
+              y
+            })) {
+              // Remove out of range
+              return false;
+            }
+            if (showMark === true) {
+              return true;
+            }
+            return showMark({
+              x,
+              y,
+              index,
+              position,
+              value
+            });
+          }).map(({
+            x,
+            y,
+            index
+          }) => {
+            return /*#__PURE__*/_jsx(Mark, _extends({
+              id: seriesId,
+              dataIndex: index,
+              shape: "circle",
+              color: series[seriesId].color,
+              x: x,
+              y: y // Don't know why TS doesn't get from the filter that y can't be null
+              ,
+              highlightScope: series[seriesId].highlightScope,
+              skipAnimation: skipAnimation,
+              onClick: onItemClick && (event => onItemClick(event, {
+                type: 'line',
+                seriesId,
+                dataIndex: index
+              }))
+            }, slotProps?.mark), `${seriesId}-${index}`);
+          })
+        }, seriesId);
       });
     })
   }));
@@ -140,6 +158,17 @@ 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 "yarn proptypes"  |
   // ----------------------------------------------------------------------
+  /**
+   * Callback fired when a line mark item is clicked.
+   * @param {React.MouseEvent<SVGPathElement, MouseEvent>} event The event source of the callback.
+   * @param {LineItemIdentifier} lineItemIdentifier The line mark item identifier.
+   */
+  onItemClick: PropTypes.func,
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation: PropTypes.bool,
   /**
    * The props used for each component slot.
    * @default {}

package/modern/LineChart/formatter.js

@@ -69,7 +69,7 @@ const formatter = (params, dataset) => {
   return {
     seriesOrder,
     stackingGroups,
-    series: defaultizeValueFormatter(completedSeries, v => v === null ? '' : v.toLocaleString())
+    series: defaultizeValueFormatter(completedSeries, v => v == null ? '' : v.toLocaleString())
   };
 };
 export default formatter;

package/modern/LineChart/index.js

@@ -4,6 +4,8 @@ export * from './AreaPlot';
 export * from './MarkPlot';
 export * from './LineHighlightPlot';
 export * from './AreaElement';
+export * from './AnimatedArea';
 export * from './LineElement';
+export * from './AnimatedLine';
 export * from './MarkElement';
 export * from './LineHighlightElement';

package/modern/PieChart/PieArc.js

@@ -95,6 +95,7 @@ process.env.NODE_ENV !== "production" ? PieArc.propTypes = {
     faded: PropTypes.oneOf(['global', 'none', 'series']),
     highlighted: PropTypes.oneOf(['item', 'none', 'series'])
   }),
+  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
   isFaded: PropTypes.bool.isRequired,
   isHighlighted: PropTypes.bool.isRequired
 } : void 0;

package/modern/PieChart/PieArcLabel.js

@@ -98,6 +98,7 @@ process.env.NODE_ENV !== "production" ? PieArcLabel.propTypes = {
   // ----------------------------------------------------------------------
   classes: PropTypes.object,
   formattedArcLabel: PropTypes.string,
+  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
   isFaded: PropTypes.bool.isRequired,
   isHighlighted: PropTypes.bool.isRequired
 } : void 0;

package/modern/PieChart/PieArcLabelPlot.js

@@ -157,7 +157,7 @@ process.env.NODE_ENV !== "production" ? PieArcLabelPlot.propTypes = {
     faded: PropTypes.oneOf(['global', 'none', 'series']),
     highlighted: PropTypes.oneOf(['item', 'none', 'series'])
   }),
-  id: PropTypes.string.isRequired,
+  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
   /**
    * The radius between circle center and the begining of the arc.
    * @default 0
@@ -173,7 +173,7 @@ process.env.NODE_ENV !== "production" ? PieArcLabelPlot.propTypes = {
    */
   paddingAngle: PropTypes.number,
   /**
-   * If `true`, animations are skiped.
+   * If `true`, animations are skipped.
    * @default false
    */
   skipAnimation: PropTypes.bool,

package/modern/PieChart/PieArcPlot.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["slots", "slotProps", "innerRadius", "outerRadius", "cornerRadius", "paddingAngle", "id", "highlightScope", "highlighted", "faded", "data", "onClick", "skipAnimation"],
+const _excluded = ["slots", "slotProps", "innerRadius", "outerRadius", "cornerRadius", "paddingAngle", "id", "highlightScope", "highlighted", "faded", "data", "onItemClick", "skipAnimation"],
   _excluded2 = ["startAngle", "endAngle", "paddingAngle", "innerRadius", "arcLabelRadius", "outerRadius", "cornerRadius"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -24,7 +24,7 @@ function PieArcPlot(props) {
         additionalRadius: -5
       },
       data,
-      onClick,
+      onItemClick,
       skipAnimation
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
@@ -71,8 +71,8 @@ function PieArcPlot(props) {
         highlightScope: highlightScope,
         isFaded: item.isFaded,
         isHighlighted: item.isHighlighted,
-        onClick: onClick && (event => {
-          onClick(event, {
+        onClick: onItemClick && (event => {
+          onItemClick(event, {
             type: 'pie',
             seriesId: id,
             dataIndex: index
@@ -137,7 +137,7 @@ process.env.NODE_ENV !== "production" ? PieArcPlot.propTypes = {
     faded: PropTypes.oneOf(['global', 'none', 'series']),
     highlighted: PropTypes.oneOf(['item', 'none', 'series'])
   }),
-  id: PropTypes.string.isRequired,
+  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
   /**
    * The radius between circle center and the begining of the arc.
    * @default 0
@@ -149,7 +149,7 @@ process.env.NODE_ENV !== "production" ? PieArcPlot.propTypes = {
    * @param {PieItemIdentifier} pieItemIdentifier The pie item identifier.
    * @param {DefaultizedPieValueType} item The pie item.
    */
-  onClick: PropTypes.func,
+  onItemClick: PropTypes.func,
   /**
    * The radius between circle center and the end of the arc.
    */
@@ -160,7 +160,7 @@ process.env.NODE_ENV !== "production" ? PieArcPlot.propTypes = {
    */
   paddingAngle: PropTypes.number,
   /**
-   * If `true`, animations are skiped.
+   * If `true`, animations are skipped.
    * @default false
    */
   skipAnimation: PropTypes.bool,