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

package/legacy/LineChart/AreaElement.js

@@ -1,16 +1,15 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["id", "classes", "color", "highlightScope", "slots", "slotProps"];
+var _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);
@@ -26,36 +25,6 @@ var useUtilityClasses = function useUtilityClasses(ownerState) {
   };
   return composeClasses(slots, getAreaElementUtilityClass, classes);
 };
-export var AreaElementPath = styled('path', {
-  name: 'MuiAreaElement',
-  slot: 'Root',
-  overridesResolver: function overridesResolver(_, styles) {
-    return styles.root;
-  }
-})(function (_ref) {
-  var ownerState = _ref.ownerState;
-  return {
-    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:
  *
@@ -74,6 +43,7 @@ function AreaElement(props) {
     highlightScope = props.highlightScope,
     slots = props.slots,
     slotProps = props.slotProps,
+    onClick = props.onClick,
     other = _objectWithoutProperties(props, _excluded);
   var getInteractionItemProps = useInteractionItemProps(highlightScope);
   var _React$useContext = React.useContext(InteractionContext),
@@ -94,7 +64,7 @@ function AreaElement(props) {
     isHighlighted: isHighlighted
   };
   var classes = useUtilityClasses(ownerState);
-  var Area = (_slots$area = slots == null ? void 0 : slots.area) != null ? _slots$area : AreaElementPath;
+  var Area = (_slots$area = slots == null ? void 0 : slots.area) != null ? _slots$area : AnimatedArea;
   var areaProps = useSlotProps({
     elementType: Area,
     externalSlotProps: slotProps == null ? void 0 : slotProps.area,
@@ -102,7 +72,9 @@ function AreaElement(props) {
       type: 'line',
       seriesId: id
     }), {
-      className: classes.root
+      className: classes.root,
+      onClick: onClick,
+      cursor: onClick ? 'pointer' : 'unset'
     }),
     ownerState: ownerState
   });
@@ -114,10 +86,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/legacy/LineChart/AreaPlot.js

@@ -1,6 +1,6 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["slots", "slotProps"];
+import _extends from "@babel/runtime/helpers/esm/extends";
+var _excluded = ["slots", "slotProps", "onItemClick", "skipAnimation"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { area as d3Area } from 'd3-shape';
@@ -11,6 +11,71 @@ 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";
+var useAggregatedData = function useAggregatedData() {
+  var seriesData = React.useContext(SeriesContext).line;
+  var axisData = React.useContext(CartesianContext);
+  if (seriesData === undefined) {
+    return [];
+  }
+  var series = seriesData.series,
+    stackingGroups = seriesData.stackingGroups;
+  var xAxis = axisData.xAxis,
+    yAxis = axisData.yAxis,
+    xAxisIds = axisData.xAxisIds,
+    yAxisIds = axisData.yAxisIds;
+  var defaultXAxisId = xAxisIds[0];
+  var defaultYAxisId = yAxisIds[0];
+  return stackingGroups.flatMap(function (_ref) {
+    var groupIds = _ref.ids;
+    return groupIds.flatMap(function (seriesId) {
+      var _xData$map;
+      var _series$seriesId = series[seriesId],
+        _series$seriesId$xAxi = _series$seriesId.xAxisKey,
+        xAxisKey = _series$seriesId$xAxi === void 0 ? defaultXAxisId : _series$seriesId$xAxi,
+        _series$seriesId$yAxi = _series$seriesId.yAxisKey,
+        yAxisKey = _series$seriesId$yAxi === void 0 ? defaultYAxisId : _series$seriesId$yAxi,
+        stackedData = _series$seriesId.stackedData,
+        data = _series$seriesId.data,
+        connectNulls = _series$seriesId.connectNulls;
+      var xScale = getValueToPositionMapper(xAxis[xAxisKey].scale);
+      var yScale = yAxis[yAxisKey].scale;
+      var xData = xAxis[xAxisKey].data;
+      if (process.env.NODE_ENV !== 'production') {
+        if (xData === undefined) {
+          throw new Error("MUI X Charts: ".concat(xAxisKey === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : "The x-axis with id \"".concat(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 (".concat(xData.length, " items) is lower than the length of series (").concat(stackedData.length, " items)."));
+        }
+      }
+      var areaPath = d3Area().x(function (d) {
+        return xScale(d.x);
+      }).defined(function (_, i) {
+        return connectNulls || data[i] != null;
+      }).y0(function (d) {
+        return d.y && yScale(d.y[0]);
+      }).y1(function (d) {
+        return d.y && yScale(d.y[1]);
+      });
+      var curve = getCurveFactory(series[seriesId].curve);
+      var formattedData = (_xData$map = xData == null ? void 0 : xData.map(function (x, index) {
+        return {
+          x: x,
+          y: stackedData[index]
+        };
+      })) != null ? _xData$map : [];
+      var d3Data = connectNulls ? formattedData.filter(function (_, i) {
+        return data[i] != null;
+      }) : formattedData;
+      var d = areaPath.curve(curve)(d3Data) || '';
+      return _extends({}, series[seriesId], {
+        d: d,
+        seriesId: seriesId
+      });
+    });
+  });
+};
+
 /**
  * Demos:
  *
@@ -25,72 +90,32 @@ import { jsx as _jsx } from "react/jsx-runtime";
 function AreaPlot(props) {
   var slots = props.slots,
     slotProps = props.slotProps,
+    onItemClick = props.onItemClick,
+    skipAnimation = props.skipAnimation,
     other = _objectWithoutProperties(props, _excluded);
-  var seriesData = React.useContext(SeriesContext).line;
-  var axisData = React.useContext(CartesianContext);
-  if (seriesData === undefined) {
-    return null;
-  }
-  var series = seriesData.series,
-    stackingGroups = seriesData.stackingGroups;
-  var xAxis = axisData.xAxis,
-    yAxis = axisData.yAxis,
-    xAxisIds = axisData.xAxisIds,
-    yAxisIds = axisData.yAxisIds;
-  var defaultXAxisId = xAxisIds[0];
-  var defaultYAxisId = yAxisIds[0];
+  var completedData = useAggregatedData();
   return /*#__PURE__*/_jsx("g", _extends({}, other, {
-    children: stackingGroups.flatMap(function (_ref) {
-      var groupIds = _ref.ids;
-      return groupIds.flatMap(function (seriesId) {
-        var _xData$map;
-        var _series$seriesId = series[seriesId],
-          _series$seriesId$xAxi = _series$seriesId.xAxisKey,
-          xAxisKey = _series$seriesId$xAxi === void 0 ? defaultXAxisId : _series$seriesId$xAxi,
-          _series$seriesId$yAxi = _series$seriesId.yAxisKey,
-          yAxisKey = _series$seriesId$yAxi === void 0 ? defaultYAxisId : _series$seriesId$yAxi,
-          stackedData = _series$seriesId.stackedData,
-          data = _series$seriesId.data,
-          connectNulls = _series$seriesId.connectNulls;
-        var xScale = getValueToPositionMapper(xAxis[xAxisKey].scale);
-        var yScale = yAxis[yAxisKey].scale;
-        var xData = xAxis[xAxisKey].data;
-        if (process.env.NODE_ENV !== 'production') {
-          if (xData === undefined) {
-            throw new Error("MUI X Charts: ".concat(xAxisKey === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : "The x-axis with id \"".concat(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 (".concat(xData.length, " items) is lower than the length of series (").concat(stackedData.length, " items)."));
-          }
-        }
-        var areaPath = d3Area().x(function (d) {
-          return xScale(d.x);
-        }).defined(function (_, i) {
-          return connectNulls || data[i] != null;
-        }).y0(function (d) {
-          return d.y && yScale(d.y[0]);
-        }).y1(function (d) {
-          return d.y && yScale(d.y[1]);
-        });
-        var curve = getCurveFactory(series[seriesId].curve);
-        var formattedData = (_xData$map = xData == null ? void 0 : xData.map(function (x, index) {
-          return {
-            x: x,
-            y: stackedData[index]
-          };
-        })) != null ? _xData$map : [];
-        var d3Data = connectNulls ? formattedData.filter(function (_, i) {
-          return 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);
-      });
+    children: completedData.reverse().map(function (_ref2) {
+      var d = _ref2.d,
+        seriesId = _ref2.seriesId,
+        color = _ref2.color,
+        highlightScope = _ref2.highlightScope,
+        area = _ref2.area;
+      return !!area && /*#__PURE__*/_jsx(AreaElement, {
+        id: seriesId,
+        d: d,
+        color: color,
+        highlightScope: highlightScope,
+        slots: slots,
+        slotProps: slotProps,
+        onClick: onItemClick && function (event) {
+          return onItemClick(event, {
+            type: 'line',
+            seriesId: seriesId
+          });
+        },
+        skipAnimation: skipAnimation
+      }, seriesId);
     })
   }));
 }
@@ -99,6 +124,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/legacy/LineChart/LineChart.js

@@ -14,6 +14,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 @@ var LineChart = /*#__PURE__*/React.forwardRef(function LineChart(props, ref) {
     dataset = props.dataset,
     sx = props.sx,
     tooltip = props.tooltip,
+    onAxisClick = props.onAxisClick,
+    onAreaClick = props.onAreaClick,
+    onLineClick = props.onLineClick,
+    onMarkClick = props.onMarkClick,
     _props$axisHighlight = props.axisHighlight,
     axisHighlight = _props$axisHighlight === void 0 ? {
       x: 'line'
@@ -49,7 +54,8 @@ var LineChart = /*#__PURE__*/React.forwardRef(function LineChart(props, ref) {
     bottomAxis = props.bottomAxis,
     children = props.children,
     slots = props.slots,
-    slotProps = props.slotProps;
+    slotProps = props.slotProps,
+    skipAnimation = props.skipAnimation;
   var id = useId();
   var clipPathId = "".concat(id, "-clip-path");
   return /*#__PURE__*/_jsxs(ResponsiveChartContainer, {
@@ -79,15 +85,21 @@ var 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(#".concat(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,
@@ -98,7 +110,9 @@ var 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
@@ -237,6 +251,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`.
@@ -265,6 +289,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 {}

package/legacy/LineChart/LineElement.js

@@ -1,16 +1,15 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["id", "classes", "color", "highlightScope", "slots", "slotProps"];
+var _excluded = ["id", "classes", "color", "highlightScope", "slots", "slotProps", "onClick"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { color as d3Color } from 'd3-color';
 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 { InteractionContext } from '../context/InteractionProvider';
 import { getIsFaded, getIsHighlighted, useInteractionItemProps } from '../hooks/useInteractionItemProps';
+import { AnimatedLine } from './AnimatedLine';
 import { jsx as _jsx } from "react/jsx-runtime";
 export function getLineElementUtilityClass(slot) {
   return generateUtilityClass('MuiLineElement', slot);
@@ -26,38 +25,6 @@ var useUtilityClasses = function useUtilityClasses(ownerState) {
   };
   return composeClasses(slots, getLineElementUtilityClass, classes);
 };
-export var LineElementPath = styled('path', {
-  name: 'MuiLineElement',
-  slot: 'Root',
-  overridesResolver: function overridesResolver(_, styles) {
-    return styles.root;
-  }
-})(function (_ref) {
-  var ownerState = _ref.ownerState;
-  return {
-    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
-  };
-});
-LineElementPath.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:
  *
@@ -76,6 +43,7 @@ function LineElement(props) {
     highlightScope = props.highlightScope,
     slots = props.slots,
     slotProps = props.slotProps,
+    onClick = props.onClick,
     other = _objectWithoutProperties(props, _excluded);
   var getInteractionItemProps = useInteractionItemProps(highlightScope);
   var _React$useContext = React.useContext(InteractionContext),
@@ -96,7 +64,7 @@ function LineElement(props) {
     isHighlighted: isHighlighted
   };
   var classes = useUtilityClasses(ownerState);
-  var Line = (_slots$line = slots == null ? void 0 : slots.line) != null ? _slots$line : LineElementPath;
+  var Line = (_slots$line = slots == null ? void 0 : slots.line) != null ? _slots$line : AnimatedLine;
   var lineProps = useSlotProps({
     elementType: Line,
     externalSlotProps: slotProps == null ? void 0 : slotProps.line,
@@ -104,7 +72,9 @@ function LineElement(props) {
       type: 'line',
       seriesId: id
     }), {
-      className: classes.root
+      className: classes.root,
+      onClick: onClick,
+      cursor: onClick ? 'pointer' : 'unset'
     }),
     ownerState: ownerState
   });
@@ -116,10 +86,18 @@ process.env.NODE_ENV !== "production" ? LineElement.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/legacy/LineChart/LineHighlightElement.js

@@ -59,13 +59,14 @@ function LineHighlightElement(props) {
     y: y
   };
   var classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx(HighlightElement, _extends({}, other, {
+  return /*#__PURE__*/_jsx(HighlightElement, _extends({
+    pointerEvents: "none",
     ownerState: ownerState,
     className: classes.root,
     cx: 0,
     cy: 0,
     r: other.r === undefined ? 5 : other.r
-  }));
+  }, other));
 }
 process.env.NODE_ENV !== "production" ? LineHighlightElement.propTypes = {
   // ----------------------------- Warning --------------------------------