@mui/x-charts 7.0.0-alpha.9 → 7.0.0-beta.1

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,
@@ -131,6 +139,11 @@ process.env.NODE_ENV !== "production" ? MarkElement.propTypes = {
   /**
    * 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/PieArcLabelPlot.js

@@ -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
@@ -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,

package/modern/PieChart/PieChart.js

@@ -59,7 +59,7 @@ function PieChart(props) {
     children,
     slots,
     slotProps,
-    onClick
+    onItemClick
   } = props;
   const margin = _extends({}, defaultMargin, marginProps);
   return /*#__PURE__*/_jsxs(ResponsiveChartContainer, {
@@ -88,7 +88,7 @@ function PieChart(props) {
     }), /*#__PURE__*/_jsx(PiePlot, {
       slots: slots,
       slotProps: slotProps,
-      onClick: onClick,
+      onItemClick: onItemClick,
       skipAnimation: skipAnimation
     }), /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legend, {
       slots: slots,
@@ -208,7 +208,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     right: PropTypes.number,
     top: PropTypes.number
   }),
-  onClick: PropTypes.func,
+  onItemClick: PropTypes.func,
   /**
    * Indicate which axis to display the right of the charts.
    * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
@@ -236,54 +236,9 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     tickNumber: PropTypes.number,
     tickSize: PropTypes.number
   }), PropTypes.string]),
-  series: PropTypes.arrayOf(PropTypes.shape({
-    arcLabel: PropTypes.oneOfType([PropTypes.oneOf(['formattedValue', 'label', 'value']), PropTypes.func]),
-    arcLabelMinAngle: PropTypes.number,
-    arcLabelRadius: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    color: PropTypes.string,
-    cornerRadius: PropTypes.number,
-    cx: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    cy: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    data: PropTypes.arrayOf(PropTypes.shape({
-      color: PropTypes.string,
-      id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-      label: PropTypes.string,
-      value: PropTypes.number.isRequired
-    })).isRequired,
-    endAngle: PropTypes.number,
-    faded: PropTypes.shape({
-      additionalRadius: PropTypes.number,
-      arcLabelRadius: PropTypes.number,
-      color: PropTypes.string,
-      cornerRadius: PropTypes.number,
-      innerRadius: PropTypes.number,
-      outerRadius: PropTypes.number,
-      paddingAngle: PropTypes.number
-    }),
-    highlighted: PropTypes.shape({
-      additionalRadius: PropTypes.number,
-      arcLabelRadius: PropTypes.number,
-      color: PropTypes.string,
-      cornerRadius: PropTypes.number,
-      innerRadius: PropTypes.number,
-      outerRadius: PropTypes.number,
-      paddingAngle: PropTypes.number
-    }),
-    highlightScope: PropTypes.shape({
-      faded: PropTypes.oneOf(['global', 'none', 'series']),
-      highlighted: PropTypes.oneOf(['item', 'none', 'series'])
-    }),
-    id: PropTypes.string,
-    innerRadius: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    outerRadius: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    paddingAngle: PropTypes.number,
-    sortingValues: PropTypes.oneOfType([PropTypes.oneOf(['asc', 'desc', 'none']), PropTypes.func]),
-    startAngle: PropTypes.number,
-    type: PropTypes.oneOf(['pie']),
-    valueFormatter: PropTypes.func
-  })).isRequired,
+  series: PropTypes.arrayOf(PropTypes.object).isRequired,
   /**
-   * If `true`, animations are skiped.
+   * If `true`, animations are skipped.
    * @default false
    */
   skipAnimation: PropTypes.bool,

package/modern/PieChart/PiePlot.js

@@ -22,7 +22,7 @@ function PiePlot(props) {
     skipAnimation,
     slots,
     slotProps,
-    onClick
+    onItemClick
   } = props;
   const seriesData = React.useContext(SeriesContext).pie;
   const {
@@ -70,7 +70,7 @@ function PiePlot(props) {
           highlightScope: highlightScope,
           highlighted: highlighted,
           faded: faded,
-          onClick: onClick,
+          onItemClick: onItemClick,
           slots: slots,
           slotProps: slotProps
         })
@@ -124,9 +124,9 @@ process.env.NODE_ENV !== "production" ? PiePlot.propTypes = {
    * @param {PieItemIdentifier} pieItemIdentifier The pie item identifier.
    * @param {DefaultizedPieValueType} item The pie item.
    */
-  onClick: PropTypes.func,
+  onItemClick: PropTypes.func,
   /**
-   * If `true`, animations are skiped.
+   * If `true`, animations are skipped.
    * @default false
    */
   skipAnimation: PropTypes.bool,