@mui/x-charts 7.14.0 → 7.16.0

package/node/LineChart/AnimatedArea.js

@@ -0,0 +1,128 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AnimatedArea = AnimatedArea;
+exports.AreaElementPath = 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 _styles = require("@mui/material/styles");
+var _web = require("@react-spring/web");
+var _d3Color = require("@mui/x-charts-vendor/d3-color");
+var _cleanId = require("../internals/cleanId");
+var _hooks = require("../hooks");
+var _useStringInterpolator = require("../internals/useStringInterpolator");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["d", "skipAnimation", "ownerState"];
+const AreaElementPath = exports.AreaElementPath = (0, _styles.styled)(_web.animated.path, {
+  name: 'MuiAreaElement',
+  slot: 'Root',
+  overridesResolver: (_, styles) => styles.root
+})(({
+  ownerState
+}) => ({
+  stroke: 'none',
+  fill: ownerState.gradientId && `url(#${ownerState.gradientId})` || ownerState.isHighlighted && (0, _d3Color.color)(ownerState.color).brighter(1).formatHex() || (0, _d3Color.color)(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 = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const {
+    left,
+    top,
+    right,
+    bottom,
+    width,
+    height
+  } = (0, _hooks.useDrawingArea)();
+  const chartId = (0, _hooks.useChartId)();
+  const stringInterpolator = (0, _useStringInterpolator.useStringInterpolator)(d);
+  const transitionAppear = (0, _web.useTransition)([1], {
+    from: {
+      animatedWidth: left
+    },
+    to: {
+      animatedWidth: width + left + right
+    },
+    enter: {
+      animatedWidth: width + left + right
+    },
+    leave: {
+      animatedWidth: left
+    },
+    reset: false,
+    immediate: skipAnimation
+  });
+  const transitionChange = (0, _web.useTransition)([stringInterpolator], {
+    from: {
+      value: 0
+    },
+    to: {
+      value: 1
+    },
+    enter: {
+      value: 1
+    },
+    reset: false,
+    immediate: skipAnimation
+  });
+  const clipId = (0, _cleanId.cleanId)(`${chartId}-${ownerState.id}-area-clip`);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("clipPath", {
+      id: clipId,
+      children: transitionAppear(style => /*#__PURE__*/(0, _jsxRuntime.jsx)(_web.animated.rect, {
+        x: 0,
+        y: 0,
+        width: style.animatedWidth,
+        height: top + height + bottom
+      }))
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
+      clipPath: `url(#${clipId})`,
+      children: transitionChange((style, interpolator) => /*#__PURE__*/(0, _jsxRuntime.jsx)(AreaElementPath, (0, _extends2.default)({}, other, {
+        ownerState: ownerState,
+        d: style.value.to(interpolator)
+      })))
+    })]
+  });
+}
+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 "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  d: _propTypes.default.string.isRequired,
+  ownerState: _propTypes.default.shape({
+    classes: _propTypes.default.object,
+    color: _propTypes.default.string.isRequired,
+    gradientId: _propTypes.default.string,
+    id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
+    isFaded: _propTypes.default.bool.isRequired,
+    isHighlighted: _propTypes.default.bool.isRequired
+  }).isRequired,
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation: _propTypes.default.bool
+} : void 0;

package/node/LineChart/AnimatedLine.js

@@ -0,0 +1,131 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AnimatedLine = AnimatedLine;
+exports.LineElementPath = 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 _web = require("@react-spring/web");
+var _d3Color = require("@mui/x-charts-vendor/d3-color");
+var _styles = require("@mui/material/styles");
+var _cleanId = require("../internals/cleanId");
+var _useChartId = require("../hooks/useChartId");
+var _useDrawingArea = require("../hooks/useDrawingArea");
+var _useStringInterpolator = require("../internals/useStringInterpolator");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["d", "skipAnimation", "ownerState"];
+const LineElementPath = exports.LineElementPath = (0, _styles.styled)(_web.animated.path, {
+  name: 'MuiLineElement',
+  slot: 'Root',
+  overridesResolver: (_, styles) => styles.root
+})(({
+  ownerState
+}) => ({
+  strokeWidth: 2,
+  strokeLinejoin: 'round',
+  fill: 'none',
+  stroke: ownerState.gradientId && `url(#${ownerState.gradientId})` || ownerState.isHighlighted && (0, _d3Color.color)(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 = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const {
+    left,
+    top,
+    bottom,
+    width,
+    height,
+    right
+  } = (0, _useDrawingArea.useDrawingArea)();
+  const chartId = (0, _useChartId.useChartId)();
+  const stringInterpolator = (0, _useStringInterpolator.useStringInterpolator)(d);
+  const transitionAppear = (0, _web.useTransition)([1], {
+    from: {
+      animatedWidth: left
+    },
+    to: {
+      animatedWidth: width + left + right
+    },
+    enter: {
+      animatedWidth: width + left + right
+    },
+    leave: {
+      animatedWidth: left
+    },
+    reset: false,
+    immediate: skipAnimation
+  });
+  const transitionChange = (0, _web.useTransition)([stringInterpolator], {
+    from: {
+      value: 0
+    },
+    to: {
+      value: 1
+    },
+    enter: {
+      value: 1
+    },
+    reset: false,
+    immediate: skipAnimation
+  });
+  const clipId = (0, _cleanId.cleanId)(`${chartId}-${ownerState.id}-line-clip`);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("clipPath", {
+      id: clipId,
+      children: transitionAppear(style => /*#__PURE__*/(0, _jsxRuntime.jsx)(_web.animated.rect, {
+        x: 0,
+        y: 0,
+        width: style.animatedWidth,
+        height: top + height + bottom
+      }))
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
+      clipPath: `url(#${clipId})`,
+      children: transitionChange((style, interpolator) => /*#__PURE__*/(0, _jsxRuntime.jsx)(LineElementPath, (0, _extends2.default)({}, other, {
+        ownerState: ownerState,
+        d: style.value.to(interpolator)
+      })))
+    })]
+  });
+}
+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 "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  d: _propTypes.default.string.isRequired,
+  ownerState: _propTypes.default.shape({
+    classes: _propTypes.default.object,
+    color: _propTypes.default.string.isRequired,
+    gradientId: _propTypes.default.string,
+    id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
+    isFaded: _propTypes.default.bool.isRequired,
+    isHighlighted: _propTypes.default.bool.isRequired
+  }).isRequired,
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation: _propTypes.default.bool
+} : void 0;

package/node/LineChart/AreaElement.js

@@ -0,0 +1,118 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AreaElement = AreaElement;
+exports.areaElementClasses = void 0;
+exports.getAreaElementUtilityClass = getAreaElementUtilityClass;
+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 _useSlotProps = _interopRequireDefault(require("@mui/utils/useSlotProps"));
+var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
+var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
+var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
+var _AnimatedArea = require("./AnimatedArea");
+var _context = require("../context");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["id", "classes", "color", "gradientId", "slots", "slotProps", "onClick"];
+function getAreaElementUtilityClass(slot) {
+  return (0, _generateUtilityClass.default)('MuiAreaElement', slot);
+}
+const areaElementClasses = exports.areaElementClasses = (0, _generateUtilityClasses.default)('MuiAreaElement', ['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, getAreaElementUtilityClass, classes);
+};
+/**
+ * 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/area-element/)
+ */
+function AreaElement(props) {
+  const {
+      id,
+      classes: innerClasses,
+      color,
+      gradientId,
+      slots,
+      slotProps,
+      onClick
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const getInteractionItemProps = (0, _useInteractionItemProps.useInteractionItemProps)();
+  const {
+    isFaded,
+    isHighlighted
+  } = (0, _context.useItemHighlighted)({
+    seriesId: id
+  });
+  const ownerState = {
+    id,
+    classes: innerClasses,
+    color,
+    gradientId,
+    isFaded,
+    isHighlighted
+  };
+  const classes = useUtilityClasses(ownerState);
+  const Area = slots?.area ?? _AnimatedArea.AnimatedArea;
+  const areaProps = (0, _useSlotProps.default)({
+    elementType: Area,
+    externalSlotProps: slotProps?.area,
+    additionalProps: (0, _extends2.default)({}, getInteractionItemProps({
+      type: 'line',
+      seriesId: id
+    }), {
+      onClick,
+      cursor: onClick ? 'pointer' : 'unset'
+    }),
+    className: classes.root,
+    ownerState
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Area, (0, _extends2.default)({}, other, areaProps));
+}
+process.env.NODE_ENV !== "production" ? AreaElement.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,
+  color: _propTypes.default.string.isRequired,
+  d: _propTypes.default.string.isRequired,
+  gradientId: _propTypes.default.string,
+  id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation: _propTypes.default.bool,
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: _propTypes.default.object,
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: _propTypes.default.object
+} : void 0;

package/node/LineChart/AreaPlot.js

@@ -0,0 +1,176 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AreaPlot = AreaPlot;
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _d3Shape = require("@mui/x-charts-vendor/d3-shape");
+var _CartesianProvider = require("../context/CartesianProvider");
+var _AreaElement = require("./AreaElement");
+var _useScale = require("../hooks/useScale");
+var _getCurve = _interopRequireDefault(require("../internals/getCurve"));
+var _constants = require("../constants");
+var _ChartsAxesGradients = require("../internals/components/ChartsAxesGradients");
+var _useSeries = require("../hooks/useSeries");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["slots", "slotProps", "onItemClick", "skipAnimation"];
+const useAggregatedData = () => {
+  const seriesData = (0, _useSeries.useLineSeries)();
+  const axisData = (0, _CartesianProvider.useCartesianContext)();
+
+  // This memo prevents odd line chart behavior when hydrating.
+  const allData = React.useMemo(() => {
+    if (seriesData === undefined) {
+      return [];
+    }
+    const {
+      series,
+      stackingGroups
+    } = seriesData;
+    const {
+      xAxis,
+      yAxis,
+      xAxisIds,
+      yAxisIds
+    } = axisData;
+    const defaultXAxisId = xAxisIds[0];
+    const defaultYAxisId = yAxisIds[0];
+    return stackingGroups.flatMap(({
+      ids: groupIds
+    }) => {
+      return [...groupIds].reverse() // Revert stacked area for a more pleasant animation
+      .map(seriesId => {
+        const {
+          xAxisId: xAxisIdProp,
+          yAxisId: yAxisIdProp,
+          xAxisKey = defaultXAxisId,
+          yAxisKey = defaultYAxisId,
+          stackedData,
+          data,
+          connectNulls,
+          baseline
+        } = series[seriesId];
+        const xAxisId = xAxisIdProp ?? xAxisKey;
+        const yAxisId = yAxisIdProp ?? yAxisKey;
+        const xScale = (0, _useScale.getValueToPositionMapper)(xAxis[xAxisId].scale);
+        const yScale = yAxis[yAxisId].scale;
+        const xData = xAxis[xAxisId].data;
+        const gradientUsed = yAxis[yAxisId].colorScale && [yAxisId, 'y'] || xAxis[xAxisId].colorScale && [xAxisId, 'x'] || undefined;
+        if (process.env.NODE_ENV !== 'production') {
+          if (xData === undefined) {
+            throw new Error(`MUI X: ${xAxisId === _constants.DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisId}"`} should have data property to be able to display a line plot.`);
+          }
+          if (xData.length < stackedData.length) {
+            throw new Error(`MUI X: The data length of the x axis (${xData.length} items) is lower than the length of series (${stackedData.length} items).`);
+          }
+        }
+        const areaPath = (0, _d3Shape.area)().x(d => xScale(d.x)).defined((_, i) => connectNulls || data[i] != null).y0(d => {
+          if (typeof baseline === 'number') {
+            return yScale(baseline);
+          }
+          if (baseline === 'max') {
+            return yScale.range()[1];
+          }
+          if (baseline === 'min') {
+            return yScale.range()[0];
+          }
+          const value = d.y && yScale(d.y[0]);
+          if (Number.isNaN(value)) {
+            return yScale.range()[0];
+          }
+          return value;
+        }).y1(d => d.y && yScale(d.y[1]));
+        const curve = (0, _getCurve.default)(series[seriesId].curve);
+        const formattedData = xData?.map((x, index) => ({
+          x,
+          y: stackedData[index]
+        })) ?? [];
+        const d3Data = connectNulls ? formattedData.filter((_, i) => data[i] != null) : formattedData;
+        const d = areaPath.curve(curve)(d3Data) || '';
+        return (0, _extends2.default)({}, series[seriesId], {
+          gradientUsed,
+          d,
+          seriesId
+        });
+      });
+    });
+  }, [seriesData, axisData]);
+  return allData;
+};
+
+/**
+ * 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 = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const getGradientId = (0, _ChartsAxesGradients.useChartGradient)();
+  const completedData = useAggregatedData();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", (0, _extends2.default)({}, other, {
+    children: completedData.map(({
+      d,
+      seriesId,
+      color,
+      area,
+      gradientUsed
+    }) => !!area && /*#__PURE__*/(0, _jsxRuntime.jsx)(_AreaElement.AreaElement, {
+      id: seriesId,
+      d: d,
+      color: color,
+      gradientId: gradientUsed && getGradientId(...gradientUsed),
+      slots: slots,
+      slotProps: slotProps,
+      onClick: onItemClick && (event => onItemClick(event, {
+        type: 'line',
+        seriesId
+      })),
+      skipAnimation: skipAnimation
+    }, seriesId))
+  }));
+}
+process.env.NODE_ENV !== "production" ? AreaPlot.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm 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.default.func,
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation: _propTypes.default.bool,
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: _propTypes.default.object,
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: _propTypes.default.object
+} : void 0;