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

package/legacy/LineChart/AnimatedArea.js

@@ -1,102 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _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 var AreaElementPath = styled(animated.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
-  };
-});
-/**
- * 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) {
-  var d = props.d,
-    skipAnimation = props.skipAnimation,
-    ownerState = props.ownerState,
-    other = _objectWithoutProperties(props, _excluded);
-  var _React$useContext = React.useContext(DrawingContext),
-    left = _React$useContext.left,
-    top = _React$useContext.top,
-    right = _React$useContext.right,
-    bottom = _React$useContext.bottom,
-    width = _React$useContext.width,
-    height = _React$useContext.height,
-    chartId = _React$useContext.chartId;
-  var path = useAnimatedPath(d, skipAnimation);
-  var _useSpring = useSpring({
-      from: {
-        animatedWidth: left
-      },
-      to: {
-        animatedWidth: width + left + right
-      },
-      reset: false,
-      immediate: skipAnimation
-    }),
-    animatedWidth = _useSpring.animatedWidth;
-  var clipId = cleanId("".concat(chartId, "-").concat(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(#".concat(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.oneOfType([PropTypes.number, 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/legacy/LineChart/AnimatedLine.js

@@ -1,104 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _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 var LineElementPath = styled(animated.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
-  };
-});
-/**
- * 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) {
-  var d = props.d,
-    skipAnimation = props.skipAnimation,
-    ownerState = props.ownerState,
-    other = _objectWithoutProperties(props, _excluded);
-  var _React$useContext = React.useContext(DrawingContext),
-    left = _React$useContext.left,
-    top = _React$useContext.top,
-    bottom = _React$useContext.bottom,
-    width = _React$useContext.width,
-    height = _React$useContext.height,
-    right = _React$useContext.right,
-    chartId = _React$useContext.chartId;
-  var path = useAnimatedPath(d, skipAnimation);
-  var _useSpring = useSpring({
-      from: {
-        animatedWidth: left
-      },
-      to: {
-        animatedWidth: width + left + right
-      },
-      reset: false,
-      immediate: skipAnimation
-    }),
-    animatedWidth = _useSpring.animatedWidth;
-  var clipId = cleanId("".concat(chartId, "-").concat(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(#".concat(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.oneOfType([PropTypes.number, 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/legacy/LineChart/AreaElement.js

@@ -1,112 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-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 generateUtilityClasses from '@mui/utils/generateUtilityClasses';
-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);
-}
-export var areaElementClasses = generateUtilityClasses('MuiAreaElement', ['root', 'highlighted', 'faded']);
-var useUtilityClasses = function useUtilityClasses(ownerState) {
-  var classes = ownerState.classes,
-    id = ownerState.id,
-    isFaded = ownerState.isFaded,
-    isHighlighted = ownerState.isHighlighted;
-  var slots = {
-    root: ['root', "series-".concat(id), isHighlighted && 'highlighted', isFaded && 'faded']
-  };
-  return composeClasses(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) {
-  var _slots$area;
-  var id = props.id,
-    innerClasses = props.classes,
-    color = props.color,
-    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),
-    item = _React$useContext.item;
-  var isHighlighted = getIsHighlighted(item, {
-    type: 'line',
-    seriesId: id
-  }, highlightScope);
-  var isFaded = !isHighlighted && getIsFaded(item, {
-    type: 'line',
-    seriesId: id
-  }, highlightScope);
-  var ownerState = {
-    id: id,
-    classes: innerClasses,
-    color: color,
-    isFaded: isFaded,
-    isHighlighted: isHighlighted
-  };
-  var classes = useUtilityClasses(ownerState);
-  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,
-    additionalProps: _extends({}, other, getInteractionItemProps({
-      type: 'line',
-      seriesId: id
-    }), {
-      className: classes.root,
-      onClick: onClick,
-      cursor: onClick ? 'pointer' : 'unset'
-    }),
-    ownerState: ownerState
-  });
-  return /*#__PURE__*/_jsx(Area, _extends({}, 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 "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.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-  /**
-   * If `true`, animations are skipped.
-   * @default false
-   */
-  skipAnimation: PropTypes.bool,
-  /**
-   * The props used for each component slot.
-   * @default {}
-   */
-  slotProps: PropTypes.object,
-  /**
-   * Overridable component slots.
-   * @default {}
-   */
-  slots: PropTypes.object
-} : void 0;
-export { AreaElement };

package/legacy/LineChart/AreaPlot.js

@@ -1,149 +0,0 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-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';
-import { SeriesContext } from '../context/SeriesContextProvider';
-import { CartesianContext } from '../context/CartesianContextProvider';
-import { AreaElement } from './AreaElement';
-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:
- *
- * - [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) {
-  var slots = props.slots,
-    slotProps = props.slotProps,
-    onItemClick = props.onItemClick,
-    skipAnimation = props.skipAnimation,
-    other = _objectWithoutProperties(props, _excluded);
-  var completedData = useAggregatedData();
-  return /*#__PURE__*/_jsx("g", _extends({}, other, {
-    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);
-    })
-  }));
-}
-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 "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 {}
-   */
-  slotProps: PropTypes.object,
-  /**
-   * Overridable component slots.
-   * @default {}
-   */
-  slots: PropTypes.object
-} : void 0;
-export { AreaPlot };