@mui/x-charts 7.14.0 → 7.16.0

package/esm/LineChart/MarkElement.js

@@ -1,128 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["x", "y", "id", "classes", "color", "shape", "dataIndex", "onClick", "skipAnimation"];
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import composeClasses from '@mui/utils/composeClasses';
-import generateUtilityClass from '@mui/utils/generateUtilityClass';
-import { styled } from '@mui/material/styles';
-import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
-import { symbol as d3Symbol, symbolsFill as d3SymbolsFill } from '@mui/x-charts-vendor/d3-shape';
-import { animated, to, useSpring } from '@react-spring/web';
-import { getSymbol } from '../internals/getSymbol';
-import { InteractionContext } from '../context/InteractionProvider';
-import { useInteractionItemProps } from '../hooks/useInteractionItemProps';
-import { useItemHighlighted } from '../context';
-import { jsx as _jsx } from "react/jsx-runtime";
-export function getMarkElementUtilityClass(slot) {
-  return generateUtilityClass('MuiMarkElement', slot);
-}
-export const markElementClasses = generateUtilityClasses('MuiMarkElement', ['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, getMarkElementUtilityClass, classes);
-};
-const MarkElementPath = styled(animated.path, {
-  name: 'MuiMarkElement',
-  slot: 'Root',
-  overridesResolver: (_, styles) => styles.root
-})(({
-  ownerState,
-  theme
-}) => ({
-  fill: (theme.vars || theme).palette.background.paper,
-  stroke: ownerState.color,
-  strokeWidth: 2
-}));
-/**
- * Demos:
- *
- * - [Lines](https://mui.com/x/react-charts/lines/)
- * - [Line demonstration](https://mui.com/x/react-charts/line-demo/)
- *
- * API:
- *
- * - [MarkElement API](https://mui.com/x/api/charts/mark-element/)
- */
-function MarkElement(props) {
-  const {
-      x,
-      y,
-      id,
-      classes: innerClasses,
-      color,
-      shape,
-      dataIndex,
-      onClick,
-      skipAnimation
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const getInteractionItemProps = useInteractionItemProps();
-  const {
-    isFaded,
-    isHighlighted
-  } = useItemHighlighted({
-    seriesId: id
-  });
-  const {
-    axis
-  } = React.useContext(InteractionContext);
-  const position = useSpring({
-    x,
-    y,
-    immediate: skipAnimation
-  });
-  const ownerState = {
-    id,
-    classes: innerClasses,
-    isHighlighted: axis.x?.index === dataIndex || isHighlighted,
-    isFaded,
-    color
-  };
-  const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx(MarkElementPath, _extends({}, other, {
-    style: {
-      transform: to([position.x, position.y], (pX, pY) => `translate(${pX}px, ${pY}px)`),
-      transformOrigin: to([position.x, position.y], (pX, pY) => `${pX}px ${pY}px`)
-    },
-    ownerState: ownerState,
-    className: classes.root,
-    d: d3Symbol(d3SymbolsFill[getSymbol(shape)])(),
-    onClick: onClick,
-    cursor: onClick ? 'pointer' : 'unset'
-  }, getInteractionItemProps({
-    type: 'line',
-    seriesId: id,
-    dataIndex
-  })));
-}
-process.env.NODE_ENV !== "production" ? MarkElement.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,
-  /**
-   * The index to the element in the series' data array.
-   */
-  dataIndex: PropTypes.number.isRequired,
-  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-  /**
-   * The shape of the marker.
-   */
-  shape: PropTypes.oneOf(['circle', 'cross', 'diamond', 'square', 'star', 'triangle', 'wye']).isRequired,
-  /**
-   * If `true`, animations are skipped.
-   * @default false
-   */
-  skipAnimation: PropTypes.bool
-} : void 0;
-export { MarkElement };

package/esm/LineChart/index.js

@@ -1,11 +0,0 @@
-export * from './LineChart';
-export * from './LinePlot';
-export * from './AreaPlot';
-export * from './MarkPlot';
-export * from './LineHighlightPlot';
-export * from './AreaElement';
-export * from './AnimatedArea';
-export * from './LineElement';
-export * from './AnimatedLine';
-export * from './MarkElement';
-export * from './LineHighlightElement';

package/esm/LineChart/plugin.js

@@ -1,10 +0,0 @@
-import { getExtremumX, getExtremumY } from './extremums';
-import formatter from './formatter';
-import getColor from './getColor';
-export const plugin = {
-  seriesType: 'line',
-  colorProcessor: getColor,
-  seriesFormatter: formatter,
-  xExtremumGetter: getExtremumX,
-  yExtremumGetter: getExtremumY
-};

package/esm/PieChart/PieArc.js

@@ -1,107 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["classes", "color", "cornerRadius", "dataIndex", "endAngle", "id", "innerRadius", "isFaded", "isHighlighted", "onClick", "outerRadius", "paddingAngle", "startAngle", "highlightScope"];
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { arc as d3Arc } from '@mui/x-charts-vendor/d3-shape';
-import { animated, to } from '@react-spring/web';
-import composeClasses from '@mui/utils/composeClasses';
-import generateUtilityClass from '@mui/utils/generateUtilityClass';
-import { styled } from '@mui/material/styles';
-import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
-import { useInteractionItemProps } from '../hooks/useInteractionItemProps';
-import { jsx as _jsx } from "react/jsx-runtime";
-export function getPieArcUtilityClass(slot) {
-  return generateUtilityClass('MuiPieArc', slot);
-}
-export const pieArcClasses = generateUtilityClasses('MuiPieArc', ['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, getPieArcUtilityClass, classes);
-};
-const PieArcRoot = styled(animated.path, {
-  name: 'MuiPieArc',
-  slot: 'Root',
-  overridesResolver: (_, styles) => styles.arc
-})(({
-  theme
-}) => ({
-  stroke: (theme.vars || theme).palette.background.paper,
-  strokeWidth: 1,
-  strokeLinejoin: 'round'
-}));
-function PieArc(props) {
-  const {
-      classes: innerClasses,
-      color,
-      cornerRadius,
-      dataIndex,
-      endAngle,
-      id,
-      innerRadius,
-      isFaded,
-      isHighlighted,
-      onClick,
-      outerRadius,
-      paddingAngle,
-      startAngle
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = {
-    id,
-    dataIndex,
-    classes: innerClasses,
-    color,
-    isFaded,
-    isHighlighted
-  };
-  const classes = useUtilityClasses(ownerState);
-  const getInteractionItemProps = useInteractionItemProps();
-  return /*#__PURE__*/_jsx(PieArcRoot, _extends({
-    d: to([startAngle, endAngle, paddingAngle, innerRadius, outerRadius, cornerRadius], (sA, eA, pA, iR, oR, cR) => d3Arc().cornerRadius(cR)({
-      padAngle: pA,
-      startAngle: sA,
-      endAngle: eA,
-      innerRadius: iR,
-      outerRadius: oR
-    })),
-    visibility: to([startAngle, endAngle], (sA, eA) => sA === eA ? 'hidden' : 'visible'),
-    onClick: onClick,
-    cursor: onClick ? 'pointer' : 'unset',
-    ownerState: ownerState,
-    className: classes.root
-  }, other, getInteractionItemProps({
-    type: 'pie',
-    seriesId: id,
-    dataIndex
-  })));
-}
-process.env.NODE_ENV !== "production" ? PieArc.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,
-  dataIndex: PropTypes.number.isRequired,
-  /**
-   * @deprecated Use the `isFaded` or `isHighlighted` props instead.
-   */
-  highlightScope: PropTypes.shape({
-    fade: PropTypes.oneOf(['global', 'none', 'series']),
-    faded: PropTypes.oneOf(['global', 'none', 'series']),
-    highlight: PropTypes.oneOf(['item', 'none', 'series']),
-    highlighted: PropTypes.oneOf(['item', 'none', 'series'])
-  }),
-  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-  isFaded: PropTypes.bool.isRequired,
-  isHighlighted: PropTypes.bool.isRequired
-} : void 0;
-export { PieArc };

package/esm/PieChart/PieArcLabel.js

@@ -1,107 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["id", "classes", "color", "startAngle", "endAngle", "paddingAngle", "arcLabelRadius", "innerRadius", "outerRadius", "cornerRadius", "formattedArcLabel", "isHighlighted", "isFaded", "style"];
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { animated, to } from '@react-spring/web';
-import { arc as d3Arc } from '@mui/x-charts-vendor/d3-shape';
-import composeClasses from '@mui/utils/composeClasses';
-import generateUtilityClass from '@mui/utils/generateUtilityClass';
-import { styled } from '@mui/material/styles';
-import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
-import { jsx as _jsx } from "react/jsx-runtime";
-export function getPieArcLabelUtilityClass(slot) {
-  return generateUtilityClass('MuiPieArcLabel', slot);
-}
-export const pieArcLabelClasses = generateUtilityClasses('MuiPieArcLabel', ['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, getPieArcLabelUtilityClass, classes);
-};
-const PieArcLabelRoot = styled(animated.text, {
-  name: 'MuiPieArcLabel',
-  slot: 'Root',
-  overridesResolver: (_, styles) => styles.root
-})(({
-  theme
-}) => ({
-  fill: (theme.vars || theme).palette.text.primary,
-  textAnchor: 'middle',
-  dominantBaseline: 'middle',
-  pointerEvents: 'none'
-}));
-/**
- * Helper to compute label position.
- * It's not an inline function because we need it in interpolation.
- */
-const getLabelPosition = (formattedArcLabel, variable) => (startAngle, endAngle, padAngle, arcLabelRadius, cornerRadius) => {
-  if (!formattedArcLabel) {
-    return 0;
-  }
-  const [x, y] = d3Arc().cornerRadius(cornerRadius).centroid({
-    padAngle,
-    startAngle,
-    endAngle,
-    innerRadius: arcLabelRadius,
-    outerRadius: arcLabelRadius
-  });
-  if (variable === 'x') {
-    return x;
-  }
-  return y;
-};
-function PieArcLabel(props) {
-  const {
-      id,
-      classes: innerClasses,
-      color,
-      startAngle,
-      endAngle,
-      paddingAngle,
-      arcLabelRadius,
-      cornerRadius,
-      formattedArcLabel,
-      isHighlighted,
-      isFaded,
-      style
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = {
-    id,
-    classes: innerClasses,
-    color,
-    isFaded,
-    isHighlighted
-  };
-  const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx(PieArcLabelRoot, _extends({
-    className: classes.root
-  }, other, {
-    style: _extends({
-      x: to([startAngle, endAngle, paddingAngle, arcLabelRadius, cornerRadius], getLabelPosition(formattedArcLabel, 'x')),
-      y: to([startAngle, endAngle, paddingAngle, arcLabelRadius, cornerRadius], getLabelPosition(formattedArcLabel, 'y'))
-    }, style),
-    children: formattedArcLabel
-  }));
-}
-process.env.NODE_ENV !== "production" ? PieArcLabel.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,
-  formattedArcLabel: PropTypes.string,
-  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-  isFaded: PropTypes.bool.isRequired,
-  isHighlighted: PropTypes.bool.isRequired
-} : void 0;
-export { PieArcLabel };

package/esm/PieChart/PieArcLabelPlot.js

@@ -1,194 +0,0 @@
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["arcLabel", "arcLabelMinAngle", "arcLabelRadius", "cornerRadius", "data", "faded", "highlighted", "id", "innerRadius", "outerRadius", "paddingAngle", "skipAnimation", "slotProps", "slots"],
-  _excluded2 = ["startAngle", "endAngle", "paddingAngle", "innerRadius", "outerRadius", "arcLabelRadius", "cornerRadius"];
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { useTransition } from '@react-spring/web';
-import { defaultLabelTransitionConfig } from './dataTransform/transition';
-import { useTransformData } from './dataTransform/useTransformData';
-import { PieArcLabel } from './PieArcLabel';
-import { getLabel } from '../internals/getLabel';
-import { jsx as _jsx } from "react/jsx-runtime";
-const RATIO = 180 / Math.PI;
-function getItemLabel(arcLabel, arcLabelMinAngle, item) {
-  if (!arcLabel) {
-    return null;
-  }
-  const angle = (item.endAngle - item.startAngle) * RATIO;
-  if (angle < arcLabelMinAngle) {
-    return null;
-  }
-  switch (arcLabel) {
-    case 'label':
-      return getLabel(item.label, 'arc');
-    case 'value':
-      return item.value?.toString();
-    case 'formattedValue':
-      return item.formattedValue;
-    default:
-      return arcLabel(_extends({}, item, {
-        label: getLabel(item.label, 'arc')
-      }));
-  }
-}
-function PieArcLabelPlot(props) {
-  const {
-      arcLabel,
-      arcLabelMinAngle = 0,
-      arcLabelRadius,
-      cornerRadius = 0,
-      data,
-      faded = {
-        additionalRadius: -5
-      },
-      highlighted,
-      id,
-      innerRadius,
-      outerRadius,
-      paddingAngle = 0,
-      skipAnimation,
-      slotProps,
-      slots
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const transformedData = useTransformData({
-    innerRadius,
-    outerRadius,
-    arcLabelRadius,
-    cornerRadius,
-    paddingAngle,
-    id,
-    highlighted,
-    faded,
-    data
-  });
-  const transition = useTransition(transformedData, _extends({}, defaultLabelTransitionConfig, {
-    immediate: skipAnimation
-  }));
-  if (data.length === 0) {
-    return null;
-  }
-  const ArcLabel = slots?.pieArcLabel ?? PieArcLabel;
-  return /*#__PURE__*/_jsx("g", _extends({}, other, {
-    children: transition((_ref, item) => {
-      let {
-          startAngle,
-          endAngle,
-          paddingAngle: pA,
-          innerRadius: iR,
-          outerRadius: oR,
-          arcLabelRadius: aLR,
-          cornerRadius: cR
-        } = _ref,
-        style = _objectWithoutPropertiesLoose(_ref, _excluded2);
-      return /*#__PURE__*/_jsx(ArcLabel, _extends({
-        startAngle: startAngle,
-        endAngle: endAngle,
-        paddingAngle: pA,
-        innerRadius: iR,
-        outerRadius: oR,
-        arcLabelRadius: aLR,
-        cornerRadius: cR,
-        style: style,
-        id: id,
-        color: item.color,
-        isFaded: item.isFaded,
-        isHighlighted: item.isHighlighted,
-        formattedArcLabel: getItemLabel(arcLabel, arcLabelMinAngle, item)
-      }, slotProps?.pieArcLabel));
-    })
-  }));
-}
-process.env.NODE_ENV !== "production" ? PieArcLabelPlot.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
-  // ----------------------------------------------------------------------
-  /**
-   * The label displayed into the arc.
-   */
-  arcLabel: PropTypes.oneOfType([PropTypes.oneOf(['formattedValue', 'label', 'value']), PropTypes.func]),
-  /**
-   * The minimal angle required to display the arc label.
-   * @default 0
-   */
-  arcLabelMinAngle: PropTypes.number,
-  /**
-   * The radius between circle center and the arc label in px.
-   * @default (innerRadius - outerRadius) / 2
-   */
-  arcLabelRadius: PropTypes.number,
-  /**
-   * The radius applied to arc corners (similar to border radius).
-   * @default 0
-   */
-  cornerRadius: PropTypes.number,
-  data: PropTypes.arrayOf(PropTypes.shape({
-    color: PropTypes.string.isRequired,
-    endAngle: PropTypes.number.isRequired,
-    formattedValue: PropTypes.string.isRequired,
-    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-    index: PropTypes.number.isRequired,
-    label: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-    padAngle: PropTypes.number.isRequired,
-    startAngle: PropTypes.number.isRequired,
-    value: PropTypes.number.isRequired
-  })).isRequired,
-  /**
-   * Override the arc attributes when it is faded.
-   * @default { additionalRadius: -5 }
-   */
-  faded: PropTypes.shape({
-    additionalRadius: PropTypes.number,
-    arcLabelRadius: PropTypes.number,
-    color: PropTypes.string,
-    cornerRadius: PropTypes.number,
-    innerRadius: PropTypes.number,
-    outerRadius: PropTypes.number,
-    paddingAngle: PropTypes.number
-  }),
-  /**
-   * Override the arc attributes when it is highlighted.
-   */
-  highlighted: PropTypes.shape({
-    additionalRadius: PropTypes.number,
-    arcLabelRadius: PropTypes.number,
-    color: PropTypes.string,
-    cornerRadius: PropTypes.number,
-    innerRadius: PropTypes.number,
-    outerRadius: PropTypes.number,
-    paddingAngle: PropTypes.number
-  }),
-  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-  /**
-   * The radius between circle center and the beginning of the arc.
-   * @default 0
-   */
-  innerRadius: PropTypes.number,
-  /**
-   * The radius between circle center and the end of the arc.
-   */
-  outerRadius: PropTypes.number.isRequired,
-  /**
-   * The padding angle (deg) between two arcs.
-   * @default 0
-   */
-  paddingAngle: PropTypes.number,
-  /**
-   * 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 { PieArcLabelPlot };