@mui/x-charts 7.14.0 → 7.15.0

package/esm/LineChart/LineHighlightElement.js

@@ -1,80 +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"];
-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 { jsx as _jsx } from "react/jsx-runtime";
-export function getHighlightElementUtilityClass(slot) {
-  return generateUtilityClass('MuiHighlightElement', slot);
-}
-export const lineHighlightElementClasses = generateUtilityClasses('MuiHighlightElement', ['root']);
-const useUtilityClasses = ownerState => {
-  const {
-    classes,
-    id
-  } = ownerState;
-  const slots = {
-    root: ['root', `series-${id}`]
-  };
-  return composeClasses(slots, getHighlightElementUtilityClass, classes);
-};
-const HighlightElement = styled('circle', {
-  name: 'MuiHighlightElement',
-  slot: 'Root',
-  overridesResolver: (_, styles) => styles.root
-})(({
-  ownerState
-}) => ({
-  transform: `translate(${ownerState.x}px, ${ownerState.y}px)`,
-  transformOrigin: `${ownerState.x}px ${ownerState.y}px`,
-  fill: ownerState.color
-}));
-/**
- * Demos:
- *
- * - [Lines](https://mui.com/x/react-charts/lines/)
- * - [Line demonstration](https://mui.com/x/react-charts/line-demo/)
- *
- * API:
- *
- * - [LineHighlightElement API](https://mui.com/x/api/charts/line-highlight-element/)
- */
-function LineHighlightElement(props) {
-  const {
-      x,
-      y,
-      id,
-      classes: innerClasses,
-      color
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = {
-    id,
-    classes: innerClasses,
-    color,
-    x,
-    y
-  };
-  const classes = useUtilityClasses(ownerState);
-  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 --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
-  // ----------------------------------------------------------------------
-  classes: PropTypes.object,
-  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired
-} : void 0;
-export { LineHighlightElement };

package/esm/LineChart/LineHighlightPlot.js

@@ -1,118 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["slots", "slotProps"];
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { useCartesianContext } from '../context/CartesianProvider';
-import { LineHighlightElement } from './LineHighlightElement';
-import { getValueToPositionMapper } from '../hooks/useScale';
-import { InteractionContext } from '../context/InteractionProvider';
-import { DEFAULT_X_AXIS_KEY } from '../constants';
-import getColor from './getColor';
-import { useLineSeries } from '../hooks/useSeries';
-import { useDrawingArea } from '../hooks/useDrawingArea';
-import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * Demos:
- *
- * - [Lines](https://mui.com/x/react-charts/lines/)
- * - [Line demonstration](https://mui.com/x/react-charts/line-demo/)
- *
- * API:
- *
- * - [LineHighlightPlot API](https://mui.com/x/api/charts/line-highlight-plot/)
- */
-function LineHighlightPlot(props) {
-  const {
-      slots,
-      slotProps
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const seriesData = useLineSeries();
-  const axisData = useCartesianContext();
-  const drawingArea = useDrawingArea();
-  const {
-    axis
-  } = React.useContext(InteractionContext);
-  const highlightedIndex = axis.x?.index;
-  if (highlightedIndex === undefined) {
-    return null;
-  }
-  if (seriesData === undefined) {
-    return null;
-  }
-  const {
-    series,
-    stackingGroups
-  } = seriesData;
-  const {
-    xAxis,
-    yAxis,
-    xAxisIds,
-    yAxisIds
-  } = axisData;
-  const defaultXAxisId = xAxisIds[0];
-  const defaultYAxisId = yAxisIds[0];
-  const Element = slots?.lineHighlight ?? LineHighlightElement;
-  return /*#__PURE__*/_jsx("g", _extends({}, other, {
-    children: stackingGroups.flatMap(({
-      ids: groupIds
-    }) => {
-      return groupIds.flatMap(seriesId => {
-        const {
-          xAxisId: xAxisIdProp,
-          yAxisId: yAxisIdProp,
-          xAxisKey = defaultXAxisId,
-          yAxisKey = defaultYAxisId,
-          stackedData,
-          data,
-          disableHighlight
-        } = series[seriesId];
-        const xAxisId = xAxisIdProp ?? xAxisKey;
-        const yAxisId = yAxisIdProp ?? yAxisKey;
-        if (disableHighlight || data[highlightedIndex] == null) {
-          return null;
-        }
-        const xScale = getValueToPositionMapper(xAxis[xAxisId].scale);
-        const yScale = yAxis[yAxisId].scale;
-        const xData = xAxis[xAxisId].data;
-        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.`);
-        }
-        const x = xScale(xData[highlightedIndex]);
-        const y = yScale(stackedData[highlightedIndex][1]); // This should not be undefined since y should not be a band scale
-
-        if (!drawingArea.isPointInside({
-          x,
-          y
-        })) {
-          return null;
-        }
-        const colorGetter = getColor(series[seriesId], xAxis[xAxisId], yAxis[yAxisId]);
-        return /*#__PURE__*/_jsx(Element, _extends({
-          id: seriesId,
-          color: colorGetter(highlightedIndex),
-          x: x,
-          y: y
-        }, slotProps?.lineHighlight), `${seriesId}`);
-      });
-    })
-  }));
-}
-process.env.NODE_ENV !== "production" ? LineHighlightPlot.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
-  // ----------------------------------------------------------------------
-  /**
-   * The props used for each component slot.
-   * @default {}
-   */
-  slotProps: PropTypes.object,
-  /**
-   * Overridable component slots.
-   * @default {}
-   */
-  slots: PropTypes.object
-} : void 0;
-export { LineHighlightPlot };

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 };