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

package/esm/LineChart/AnimatedArea.js

@@ -0,0 +1,103 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["d", "skipAnimation", "ownerState"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+import { color as d3Color } from 'd3-color';
+import { animated, useSpring } from '@react-spring/web';
+import { useAnimatedPath } from '../internals/useAnimatedPath';
+import { DrawingContext } from '../context/DrawingProvider';
+import { cleanId } from '../internals/utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export const AreaElementPath = styled(animated.path, {
+  name: 'MuiAreaElement',
+  slot: 'Root',
+  overridesResolver: (_, styles) => styles.root
+})(({
+  ownerState
+}) => ({
+  stroke: 'none',
+  fill: ownerState.isHighlighted ? d3Color(ownerState.color).brighter(1).formatHex() : d3Color(ownerState.color).brighter(0.5).formatHex(),
+  transition: 'opacity 0.2s ease-in, fill 0.2s ease-in',
+  opacity: ownerState.isFaded ? 0.3 : 1
+}));
+/**
+ * Demos:
+ *
+ * - [Lines](https://mui.com/x/react-charts/lines/)
+ * - [Areas demonstration](https://mui.com/x/react-charts/areas-demo/)
+ *
+ * API:
+ *
+ * - [AreaElement API](https://mui.com/x/api/charts/animated-area/)
+ */
+function AnimatedArea(props) {
+  const {
+      d,
+      skipAnimation,
+      ownerState
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const {
+    left,
+    top,
+    right,
+    bottom,
+    width,
+    height,
+    chartId
+  } = React.useContext(DrawingContext);
+  const path = useAnimatedPath(d, skipAnimation);
+  const {
+    animatedWidth
+  } = useSpring({
+    from: {
+      animatedWidth: left
+    },
+    to: {
+      animatedWidth: width + left + right
+    },
+    reset: false,
+    immediate: skipAnimation
+  });
+  const clipId = cleanId(`${chartId}-${ownerState.id}-area-clip`);
+  return /*#__PURE__*/_jsxs(React.Fragment, {
+    children: [/*#__PURE__*/_jsx("clipPath", {
+      id: clipId,
+      children: /*#__PURE__*/_jsx(animated.rect, {
+        x: 0,
+        y: 0,
+        width: animatedWidth,
+        height: top + height + bottom
+      })
+    }), /*#__PURE__*/_jsx("g", {
+      clipPath: `url(#${clipId})`,
+      children: /*#__PURE__*/_jsx(AreaElementPath, _extends({}, other, {
+        ownerState: ownerState,
+        d: path
+      }))
+    })]
+  });
+}
+process.env.NODE_ENV !== "production" ? AnimatedArea.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  d: PropTypes.string.isRequired,
+  ownerState: PropTypes.shape({
+    classes: PropTypes.object,
+    color: PropTypes.string.isRequired,
+    id: PropTypes.string.isRequired,
+    isFaded: PropTypes.bool.isRequired,
+    isHighlighted: PropTypes.bool.isRequired
+  }).isRequired,
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation: PropTypes.bool
+} : void 0;
+export { AnimatedArea };

package/esm/LineChart/AnimatedLine.js

@@ -0,0 +1,105 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["d", "skipAnimation", "ownerState"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { animated, useSpring } from '@react-spring/web';
+import { color as d3Color } from 'd3-color';
+import { styled } from '@mui/material/styles';
+import { useAnimatedPath } from '../internals/useAnimatedPath';
+import { DrawingContext } from '../context/DrawingProvider';
+import { cleanId } from '../internals/utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export const LineElementPath = styled(animated.path, {
+  name: 'MuiLineElement',
+  slot: 'Root',
+  overridesResolver: (_, styles) => styles.root
+})(({
+  ownerState
+}) => ({
+  strokeWidth: 2,
+  strokeLinejoin: 'round',
+  fill: 'none',
+  stroke: ownerState.isHighlighted ? d3Color(ownerState.color).brighter(0.5).formatHex() : ownerState.color,
+  transition: 'opacity 0.2s ease-in, stroke 0.2s ease-in',
+  opacity: ownerState.isFaded ? 0.3 : 1
+}));
+/**
+ * Demos:
+ *
+ * - [Lines](https://mui.com/x/react-charts/lines/)
+ * - [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+ *
+ * API:
+ *
+ * - [AnimatedLine API](https://mui.com/x/api/charts/animated-line/)
+ */
+function AnimatedLine(props) {
+  const {
+      d,
+      skipAnimation,
+      ownerState
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const {
+    left,
+    top,
+    bottom,
+    width,
+    height,
+    right,
+    chartId
+  } = React.useContext(DrawingContext);
+  const path = useAnimatedPath(d, skipAnimation);
+  const {
+    animatedWidth
+  } = useSpring({
+    from: {
+      animatedWidth: left
+    },
+    to: {
+      animatedWidth: width + left + right
+    },
+    reset: false,
+    immediate: skipAnimation
+  });
+  const clipId = cleanId(`${chartId}-${ownerState.id}-line-clip`);
+  return /*#__PURE__*/_jsxs(React.Fragment, {
+    children: [/*#__PURE__*/_jsx("clipPath", {
+      id: clipId,
+      children: /*#__PURE__*/_jsx(animated.rect, {
+        x: 0,
+        y: 0,
+        width: animatedWidth,
+        height: top + height + bottom
+      })
+    }), /*#__PURE__*/_jsx("g", {
+      clipPath: `url(#${clipId})`,
+      children: /*#__PURE__*/_jsx(LineElementPath, _extends({}, other, {
+        ownerState: ownerState,
+        d: path
+      }))
+    })]
+  });
+}
+process.env.NODE_ENV !== "production" ? AnimatedLine.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  d: PropTypes.string.isRequired,
+  ownerState: PropTypes.shape({
+    classes: PropTypes.object,
+    color: PropTypes.string.isRequired,
+    id: PropTypes.string.isRequired,
+    isFaded: PropTypes.bool.isRequired,
+    isHighlighted: PropTypes.bool.isRequired
+  }).isRequired,
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation: PropTypes.bool
+} : void 0;
+export { AnimatedLine };

package/esm/LineChart/AreaElement.js

@@ -1,16 +1,15 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["id", "classes", "color", "highlightScope", "slots", "slotProps"];
+const _excluded = ["id", "classes", "color", "highlightScope", "slots", "slotProps", "onClick"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
 import { useSlotProps } from '@mui/base/utils';
 import generateUtilityClass from '@mui/utils/generateUtilityClass';
-import { styled } from '@mui/material/styles';
 import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
-import { color as d3Color } from 'd3-color';
 import { getIsFaded, getIsHighlighted, useInteractionItemProps } from '../hooks/useInteractionItemProps';
 import { InteractionContext } from '../context/InteractionProvider';
+import { AnimatedArea } from './AnimatedArea';
 import { jsx as _jsx } from "react/jsx-runtime";
 export function getAreaElementUtilityClass(slot) {
   return generateUtilityClass('MuiAreaElement', slot);
@@ -28,33 +27,6 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getAreaElementUtilityClass, classes);
 };
-export const AreaElementPath = styled('path', {
-  name: 'MuiAreaElement',
-  slot: 'Root',
-  overridesResolver: (_, styles) => styles.root
-})(({
-  ownerState
-}) => ({
-  stroke: 'none',
-  fill: ownerState.isHighlighted ? d3Color(ownerState.color).brighter(1).formatHex() : d3Color(ownerState.color).brighter(0.5).formatHex(),
-  transition: 'opacity 0.2s ease-in, fill 0.2s ease-in',
-  opacity: ownerState.isFaded ? 0.3 : 1
-}));
-AreaElementPath.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
-  // ----------------------------------------------------------------------
-  as: PropTypes.elementType,
-  ownerState: PropTypes.shape({
-    classes: PropTypes.object,
-    color: PropTypes.string.isRequired,
-    id: PropTypes.string.isRequired,
-    isFaded: PropTypes.bool.isRequired,
-    isHighlighted: PropTypes.bool.isRequired
-  }).isRequired,
-  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
-};
 /**
  * Demos:
  *
@@ -73,7 +45,8 @@ function AreaElement(props) {
       color,
       highlightScope,
       slots,
-      slotProps
+      slotProps,
+      onClick
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const getInteractionItemProps = useInteractionItemProps(highlightScope);
@@ -96,7 +69,7 @@ function AreaElement(props) {
     isHighlighted
   };
   const classes = useUtilityClasses(ownerState);
-  const Area = (_slots$area = slots == null ? void 0 : slots.area) != null ? _slots$area : AreaElementPath;
+  const Area = (_slots$area = slots == null ? void 0 : slots.area) != null ? _slots$area : AnimatedArea;
   const areaProps = useSlotProps({
     elementType: Area,
     externalSlotProps: slotProps == null ? void 0 : slotProps.area,
@@ -104,7 +77,9 @@ function AreaElement(props) {
       type: 'line',
       seriesId: id
     }), {
-      className: classes.root
+      className: classes.root,
+      onClick,
+      cursor: onClick ? 'pointer' : 'unset'
     }),
     ownerState
   });
@@ -116,10 +91,18 @@ process.env.NODE_ENV !== "production" ? AreaElement.propTypes = {
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
   classes: PropTypes.object,
+  color: PropTypes.string.isRequired,
+  d: PropTypes.string.isRequired,
   highlightScope: PropTypes.shape({
     faded: PropTypes.oneOf(['global', 'none', 'series']),
     highlighted: PropTypes.oneOf(['item', 'none', 'series'])
   }),
+  id: PropTypes.string.isRequired,
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation: PropTypes.bool,
   /**
    * The props used for each component slot.
    * @default {}

package/esm/LineChart/AreaPlot.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", "onItemClick", "skipAnimation"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { area as d3Area } from 'd3-shape';
@@ -11,27 +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/)
- * - [Areas demonstration](https://mui.com/x/react-charts/areas-demo/)
- * - [Stacking](https://mui.com/x/react-charts/stacking/)
- *
- * API:
- *
- * - [AreaPlot API](https://mui.com/x/api/charts/area-plot/)
- */
-function AreaPlot(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,
@@ -45,47 +29,85 @@ function AreaPlot(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 => {
-        var _xData$map;
-        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 => {
+      var _xData$map;
+      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 areaPath = d3Area().x(d => xScale(d.x)).defined((_, i) => connectNulls || data[i] != null).y0(d => d.y && yScale(d.y[0])).y1(d => d.y && yScale(d.y[1]));
-        const curve = getCurveFactory(series[seriesId].curve);
-        const formattedData = (_xData$map = xData == null ? void 0 : xData.map((x, index) => ({
-          x,
-          y: stackedData[index]
-        }))) != null ? _xData$map : [];
-        const d3Data = connectNulls ? formattedData.filter((_, i) => data[i] != null) : formattedData;
-        return !!series[seriesId].area && /*#__PURE__*/_jsx(AreaElement, {
-          id: seriesId,
-          d: areaPath.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 areaPath = d3Area().x(d => xScale(d.x)).defined((_, i) => connectNulls || data[i] != null).y0(d => d.y && yScale(d.y[0])).y1(d => d.y && yScale(d.y[1]));
+      const curve = getCurveFactory(series[seriesId].curve);
+      const formattedData = (_xData$map = xData == null ? void 0 : xData.map((x, index) => ({
+        x,
+        y: stackedData[index]
+      }))) != null ? _xData$map : [];
+      const d3Data = connectNulls ? formattedData.filter((_, i) => data[i] != null) : formattedData;
+      const d = areaPath.curve(curve)(d3Data) || '';
+      return _extends({}, series[seriesId], {
+        d,
+        seriesId
       });
-    })
+    });
+  });
+};
+
+/**
+ * Demos:
+ *
+ * - [Lines](https://mui.com/x/react-charts/lines/)
+ * - [Areas demonstration](https://mui.com/x/react-charts/areas-demo/)
+ * - [Stacking](https://mui.com/x/react-charts/stacking/)
+ *
+ * API:
+ *
+ * - [AreaPlot API](https://mui.com/x/api/charts/area-plot/)
+ */
+function AreaPlot(props) {
+  const {
+      slots,
+      slotProps,
+      onItemClick,
+      skipAnimation
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const completedData = useAggregatedData();
+  return /*#__PURE__*/_jsx("g", _extends({}, other, {
+    children: completedData.reverse().map(({
+      d,
+      seriesId,
+      color,
+      highlightScope,
+      area
+    }) => !!area && /*#__PURE__*/_jsx(AreaElement, {
+      id: seriesId,
+      d: d,
+      color: color,
+      highlightScope: highlightScope,
+      slots: slots,
+      slotProps: slotProps,
+      onClick: onItemClick && (event => onItemClick(event, {
+        type: 'line',
+        seriesId
+      })),
+      skipAnimation: skipAnimation
+    }, seriesId))
   }));
 }
 process.env.NODE_ENV !== "production" ? AreaPlot.propTypes = {
@@ -93,6 +115,17 @@ process.env.NODE_ENV !== "production" ? AreaPlot.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 area 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/esm/LineChart/LineChart.js

@@ -13,6 +13,7 @@ import { ChartsLegend } from '../ChartsLegend';
 import { ChartsAxisHighlight } from '../ChartsAxisHighlight';
 import { ChartsClipPath } from '../ChartsClipPath';
 import { LineHighlightPlot } from './LineHighlightPlot';
+import { ChartsOnAxisClickHandler } from '../ChartsOnAxisClickHandler';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 /**
@@ -37,6 +38,10 @@ const LineChart = /*#__PURE__*/React.forwardRef(function LineChart(props, ref) {
     dataset,
     sx,
     tooltip,
+    onAxisClick,
+    onAreaClick,
+    onLineClick,
+    onMarkClick,
     axisHighlight = {
       x: 'line'
     },
@@ -48,7 +53,8 @@ const LineChart = /*#__PURE__*/React.forwardRef(function LineChart(props, ref) {
     bottomAxis,
     children,
     slots,
-    slotProps
+    slotProps,
+    skipAnimation
   } = props;
   const id = useId();
   const clipPathId = `${id}-clip-path`;
@@ -75,15 +81,21 @@ const LineChart = /*#__PURE__*/React.forwardRef(function LineChart(props, ref) {
     colors: colors,
     dataset: dataset,
     sx: sx,
-    disableAxisListener: (tooltip == null ? void 0 : tooltip.trigger) !== 'axis' && (axisHighlight == null ? void 0 : axisHighlight.x) === 'none' && (axisHighlight == null ? void 0 : axisHighlight.y) === 'none',
-    children: [/*#__PURE__*/_jsxs("g", {
+    disableAxisListener: (tooltip == null ? void 0 : tooltip.trigger) !== 'axis' && (axisHighlight == null ? void 0 : axisHighlight.x) === 'none' && (axisHighlight == null ? void 0 : axisHighlight.y) === 'none' && !onAxisClick,
+    children: [onAxisClick && /*#__PURE__*/_jsx(ChartsOnAxisClickHandler, {
+      onAxisClick: onAxisClick
+    }), /*#__PURE__*/_jsxs("g", {
       clipPath: `url(#${clipPathId})`,
       children: [/*#__PURE__*/_jsx(AreaPlot, {
         slots: slots,
-        slotProps: slotProps
+        slotProps: slotProps,
+        onItemClick: onAreaClick,
+        skipAnimation: skipAnimation
       }), /*#__PURE__*/_jsx(LinePlot, {
         slots: slots,
-        slotProps: slotProps
+        slotProps: slotProps,
+        onItemClick: onLineClick,
+        skipAnimation: skipAnimation
       })]
     }), /*#__PURE__*/_jsx(ChartsAxis, {
       topAxis: topAxis,
@@ -94,7 +106,9 @@ const LineChart = /*#__PURE__*/React.forwardRef(function LineChart(props, ref) {
       slotProps: slotProps
     }), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlight)), /*#__PURE__*/_jsx(MarkPlot, {
       slots: slots,
-      slotProps: slotProps
+      slotProps: slotProps,
+      onItemClick: onMarkClick,
+      skipAnimation: skipAnimation
     }), /*#__PURE__*/_jsx(LineHighlightPlot, {
       slots: slots,
       slotProps: slotProps
@@ -233,6 +247,16 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     right: PropTypes.number,
     top: PropTypes.number
   }),
+  onAreaClick: PropTypes.func,
+  /**
+   * The function called for onClick events.
+   * The second argument contains information about all line/bar elements at the current mouse position.
+   * @param {MouseEvent} event The mouse event recorded on the `<svg/>` element.
+   * @param {null | AxisData} data The data about the clicked axis and items associated with it.
+   */
+  onAxisClick: PropTypes.func,
+  onLineClick: PropTypes.func,
+  onMarkClick: 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`.
@@ -261,6 +285,11 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     tickSize: PropTypes.number
   }), PropTypes.string]),
   series: PropTypes.arrayOf(PropTypes.object).isRequired,
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation: PropTypes.bool,
   /**
    * The props used for each component slot.
    * @default {}