@mui/x-charts 7.14.0 → 7.16.0

package/esm/Gauge/GaugeValueText.js

@@ -1,69 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["text", "className"];
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { useGaugeState } from './GaugeProvider';
-import { ChartsText } from '../ChartsText';
-import { jsx as _jsx } from "react/jsx-runtime";
-function defaultFormatter({
-  value
-}) {
-  return value === null ? null : value.toLocaleString();
-}
-function GaugeValueText(props) {
-  const {
-      text = defaultFormatter,
-      className
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const {
-    value,
-    valueMin,
-    valueMax,
-    cx,
-    cy
-  } = useGaugeState();
-  const formattedText = typeof text === 'function' ? text({
-    value,
-    valueMin,
-    valueMax
-  }) : text;
-  if (formattedText === null) {
-    return null;
-  }
-  return /*#__PURE__*/_jsx("g", {
-    className: className,
-    children: /*#__PURE__*/_jsx(ChartsText, _extends({
-      x: cx,
-      y: cy,
-      text: formattedText,
-      style: {
-        textAnchor: 'middle',
-        dominantBaseline: 'central'
-      }
-    }, other))
-  });
-}
-process.env.NODE_ENV !== "production" ? GaugeValueText.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
-  // ----------------------------------------------------------------------
-  /**
-   * Height of a text line (in `em`).
-   */
-  lineHeight: PropTypes.number,
-  /**
-   * If `true`, the line width is computed.
-   * @default false
-   */
-  needsComputation: PropTypes.bool,
-  ownerState: PropTypes.any,
-  /**
-   * Style applied to text elements.
-   */
-  style: PropTypes.object,
-  text: PropTypes.oneOfType([PropTypes.func, PropTypes.string])
-} : void 0;
-export { GaugeValueText };

package/esm/Gauge/gaugeClasses.js

@@ -1,7 +0,0 @@
-import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
-import generateUtilityClass from '@mui/utils/generateUtilityClass';
-export function getGaugeUtilityClass(slot) {
-  return generateUtilityClass('MuiGauge', slot);
-}
-export const gaugeClasses = generateUtilityClasses('MuiGauge', ['root', 'valueArc', 'referenceArc', 'valueText']);
-export default gaugeClasses;

package/esm/Gauge/index.js

@@ -1,7 +0,0 @@
-export * from './Gauge';
-export * from './GaugeContainer';
-export * from './GaugeValueText';
-export * from './GaugeValueArc';
-export * from './GaugeReferenceArc';
-export * from './gaugeClasses';
-export { useGaugeState } from './GaugeProvider';

package/esm/LineChart/AnimatedArea.js

@@ -1,103 +0,0 @@
-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 { animated, useSpring } from '@react-spring/web';
-import { color as d3Color } from '@mui/x-charts-vendor/d3-color';
-import { useAnimatedPath } from '../internals/useAnimatedPath';
-import { cleanId } from '../internals/cleanId';
-import { useChartId, useDrawingArea } from '../hooks';
-import { jsx as _jsx, 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.gradientId && `url(#${ownerState.gradientId})` || 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
-  } = useDrawingArea();
-  const chartId = useChartId();
-  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 "pnpm proptypes"  |
-  // ----------------------------------------------------------------------
-  d: PropTypes.string.isRequired,
-  ownerState: PropTypes.shape({
-    classes: PropTypes.object,
-    color: PropTypes.string.isRequired,
-    gradientId: PropTypes.string,
-    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/esm/LineChart/AnimatedLine.js

@@ -1,106 +0,0 @@
-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 '@mui/x-charts-vendor/d3-color';
-import { styled } from '@mui/material/styles';
-import { useAnimatedPath } from '../internals/useAnimatedPath';
-import { cleanId } from '../internals/cleanId';
-import { useChartId } from '../hooks/useChartId';
-import { useDrawingArea } from '../hooks/useDrawingArea';
-import { jsx as _jsx, 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.gradientId && `url(#${ownerState.gradientId})` || 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
-  } = useDrawingArea();
-  const chartId = useChartId();
-  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 "pnpm proptypes"  |
-  // ----------------------------------------------------------------------
-  d: PropTypes.string.isRequired,
-  ownerState: PropTypes.shape({
-    classes: PropTypes.object,
-    color: PropTypes.string.isRequired,
-    gradientId: PropTypes.string,
-    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/esm/LineChart/AreaElement.js

@@ -1,109 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["id", "classes", "color", "gradientId", "slots", "slotProps", "onClick"];
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import composeClasses from '@mui/utils/composeClasses';
-import useSlotProps from '@mui/utils/useSlotProps';
-import generateUtilityClass from '@mui/utils/generateUtilityClass';
-import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
-import { useInteractionItemProps } from '../hooks/useInteractionItemProps';
-import { AnimatedArea } from './AnimatedArea';
-import { useItemHighlighted } from '../context';
-import { jsx as _jsx } from "react/jsx-runtime";
-export function getAreaElementUtilityClass(slot) {
-  return generateUtilityClass('MuiAreaElement', slot);
-}
-export const areaElementClasses = generateUtilityClasses('MuiAreaElement', ['root', 'highlighted', 'faded']);
-const useUtilityClasses = ownerState => {
-  const {
-    classes,
-    id,
-    isFaded,
-    isHighlighted
-  } = ownerState;
-  const slots = {
-    root: ['root', `series-${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) {
-  const {
-      id,
-      classes: innerClasses,
-      color,
-      gradientId,
-      slots,
-      slotProps,
-      onClick
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const getInteractionItemProps = useInteractionItemProps();
-  const {
-    isFaded,
-    isHighlighted
-  } = useItemHighlighted({
-    seriesId: id
-  });
-  const ownerState = {
-    id,
-    classes: innerClasses,
-    color,
-    gradientId,
-    isFaded,
-    isHighlighted
-  };
-  const classes = useUtilityClasses(ownerState);
-  const Area = slots?.area ?? AnimatedArea;
-  const areaProps = useSlotProps({
-    elementType: Area,
-    externalSlotProps: slotProps?.area,
-    additionalProps: _extends({}, getInteractionItemProps({
-      type: 'line',
-      seriesId: id
-    }), {
-      onClick,
-      cursor: onClick ? 'pointer' : 'unset'
-    }),
-    className: classes.root,
-    ownerState
-  });
-  return /*#__PURE__*/_jsx(Area, _extends({}, 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.object,
-  color: PropTypes.string.isRequired,
-  d: PropTypes.string.isRequired,
-  gradientId: PropTypes.string,
-  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/esm/LineChart/AreaPlot.js

@@ -1,164 +0,0 @@
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-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 '@mui/x-charts-vendor/d3-shape';
-import { useCartesianContext } from '../context/CartesianProvider';
-import { AreaElement } from './AreaElement';
-import { getValueToPositionMapper } from '../hooks/useScale';
-import getCurveFactory from '../internals/getCurve';
-import { DEFAULT_X_AXIS_KEY } from '../constants';
-import { useChartGradient } from '../internals/components/ChartsAxesGradients';
-import { useLineSeries } from '../hooks/useSeries';
-import { jsx as _jsx } from "react/jsx-runtime";
-const useAggregatedData = () => {
-  const seriesData = useLineSeries();
-  const axisData = useCartesianContext();
-  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 = 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 === 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 = d3Area().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 = getCurveFactory(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 _extends({}, series[seriesId], {
-        gradientUsed,
-        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 getGradientId = useChartGradient();
-  const completedData = useAggregatedData();
-  return /*#__PURE__*/_jsx("g", _extends({}, other, {
-    children: completedData.map(({
-      d,
-      seriesId,
-      color,
-      area,
-      gradientUsed
-    }) => !!area && /*#__PURE__*/_jsx(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.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 };