@mui/x-charts 7.13.0 → 7.15.0

package/esm/ChartsReferenceLine/ChartsXReferenceLine.js

@@ -1,100 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
-import composeClasses from '@mui/utils/composeClasses';
-import { useDrawingArea, useXScale } from '../hooks';
-import { ReferenceLineRoot } from './common';
-import { ChartsText } from '../ChartsText';
-import { getReferenceLineUtilityClass } from './chartsReferenceLineClasses';
-import { warnOnce } from '../internals/warning';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const getTextParams = ({
-  top,
-  height,
-  spacingY,
-  labelAlign = 'middle'
-}) => {
-  switch (labelAlign) {
-    case 'start':
-      return {
-        y: top + spacingY,
-        style: {
-          dominantBaseline: 'hanging',
-          textAnchor: 'start'
-        }
-      };
-    case 'end':
-      return {
-        y: top + height - spacingY,
-        style: {
-          dominantBaseline: 'auto',
-          textAnchor: 'start'
-        }
-      };
-    default:
-      return {
-        y: top + height / 2,
-        style: {
-          dominantBaseline: 'central',
-          textAnchor: 'start'
-        }
-      };
-  }
-};
-export function getXReferenceLineClasses(classes) {
-  return composeClasses({
-    root: ['root', 'vertical'],
-    line: ['line'],
-    label: ['label']
-  }, getReferenceLineUtilityClass, classes);
-}
-function ChartsXReferenceLine(props) {
-  const {
-    x,
-    label = '',
-    spacing = 5,
-    classes: inClasses,
-    labelAlign,
-    lineStyle,
-    labelStyle,
-    axisId
-  } = props;
-  const {
-    top,
-    height
-  } = useDrawingArea();
-  const xAxisScale = useXScale(axisId);
-  const xPosition = xAxisScale(x);
-  if (xPosition === undefined) {
-    if (process.env.NODE_ENV !== 'production') {
-      warnOnce(`MUI X: the value ${x} does not exist in the data of x axis with id ${axisId}.`, 'error');
-    }
-    return null;
-  }
-  const d = `M ${xPosition} ${top} l 0 ${height}`;
-  const classes = getXReferenceLineClasses(inClasses);
-  const spacingX = typeof spacing === 'object' ? spacing.x ?? 0 : spacing;
-  const spacingY = typeof spacing === 'object' ? spacing.y ?? 0 : spacing;
-  const textParams = _extends({
-    x: xPosition + spacingX,
-    text: label,
-    fontSize: 12
-  }, getTextParams({
-    top,
-    height,
-    spacingY,
-    labelAlign
-  }), {
-    className: classes.label
-  });
-  return /*#__PURE__*/_jsxs(ReferenceLineRoot, {
-    className: classes.root,
-    children: [/*#__PURE__*/_jsx("path", {
-      d: d,
-      className: classes.line,
-      style: lineStyle
-    }), /*#__PURE__*/_jsx(ChartsText, _extends({}, textParams, {
-      style: _extends({}, textParams.style, labelStyle)
-    }))]
-  });
-}
-export { ChartsXReferenceLine };

package/esm/ChartsReferenceLine/ChartsYReferenceLine.js

@@ -1,100 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
-import composeClasses from '@mui/utils/composeClasses';
-import { useDrawingArea, useYScale } from '../hooks';
-import { ReferenceLineRoot } from './common';
-import { ChartsText } from '../ChartsText';
-import { getReferenceLineUtilityClass } from './chartsReferenceLineClasses';
-import { warnOnce } from '../internals/warning';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const getTextParams = ({
-  left,
-  width,
-  spacingX,
-  labelAlign = 'middle'
-}) => {
-  switch (labelAlign) {
-    case 'start':
-      return {
-        x: left + spacingX,
-        style: {
-          dominantBaseline: 'auto',
-          textAnchor: 'start'
-        }
-      };
-    case 'end':
-      return {
-        x: left + width - spacingX,
-        style: {
-          dominantBaseline: 'auto',
-          textAnchor: 'end'
-        }
-      };
-    default:
-      return {
-        x: left + width / 2,
-        style: {
-          dominantBaseline: 'auto',
-          textAnchor: 'middle'
-        }
-      };
-  }
-};
-export function getYReferenceLineClasses(classes) {
-  return composeClasses({
-    root: ['root', 'horizontal'],
-    line: ['line'],
-    label: ['label']
-  }, getReferenceLineUtilityClass, classes);
-}
-function ChartsYReferenceLine(props) {
-  const {
-    y,
-    label = '',
-    spacing = 5,
-    classes: inClasses,
-    labelAlign,
-    lineStyle,
-    labelStyle,
-    axisId
-  } = props;
-  const {
-    left,
-    width
-  } = useDrawingArea();
-  const yAxisScale = useYScale(axisId);
-  const yPosition = yAxisScale(y);
-  if (yPosition === undefined) {
-    if (process.env.NODE_ENV !== 'production') {
-      warnOnce(`MUI X: the value ${y} does not exist in the data of y axis with id ${axisId}.`, 'error');
-    }
-    return null;
-  }
-  const d = `M ${left} ${yPosition} l ${width} 0`;
-  const classes = getYReferenceLineClasses(inClasses);
-  const spacingX = typeof spacing === 'object' ? spacing.x ?? 0 : spacing;
-  const spacingY = typeof spacing === 'object' ? spacing.y ?? 0 : spacing;
-  const textParams = _extends({
-    y: yPosition - spacingY,
-    text: label,
-    fontSize: 12
-  }, getTextParams({
-    left,
-    width,
-    spacingX,
-    labelAlign
-  }), {
-    className: classes.label
-  });
-  return /*#__PURE__*/_jsxs(ReferenceLineRoot, {
-    className: classes.root,
-    children: [/*#__PURE__*/_jsx("path", {
-      d: d,
-      className: classes.line,
-      style: lineStyle
-    }), /*#__PURE__*/_jsx(ChartsText, _extends({}, textParams, {
-      style: _extends({}, textParams.style, labelStyle)
-    }))]
-  });
-}
-export { ChartsYReferenceLine };

package/esm/ChartsReferenceLine/chartsReferenceLineClasses.js

@@ -1,6 +0,0 @@
-import generateUtilityClass from '@mui/utils/generateUtilityClass';
-import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
-export function getReferenceLineUtilityClass(slot) {
-  return generateUtilityClass('MuiChartsReferenceLine', slot);
-}
-export const referenceLineClasses = generateUtilityClasses('MuiChartsReferenceLine', ['root', 'vertical', 'horizontal', 'line', 'label']);

package/esm/ChartsReferenceLine/common.js

@@ -1,20 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import { styled } from '@mui/material/styles';
-import { referenceLineClasses } from './chartsReferenceLineClasses';
-export const ReferenceLineRoot = styled('g')(({
-  theme
-}) => ({
-  [`& .${referenceLineClasses.line}`]: {
-    fill: 'none',
-    stroke: (theme.vars || theme).palette.text.primary,
-    shapeRendering: 'crispEdges',
-    strokeWidth: 1,
-    pointerEvents: 'none'
-  },
-  [`& .${referenceLineClasses.label}`]: _extends({
-    fill: (theme.vars || theme).palette.text.primary,
-    stroke: 'none',
-    pointerEvents: 'none',
-    fontSize: 12
-  }, theme.typography.body1)
-}));

package/esm/ChartsReferenceLine/index.js

@@ -1,2 +0,0 @@
-export * from './ChartsReferenceLine';
-export * from './chartsReferenceLineClasses';

package/esm/ChartsText/index.js

@@ -1 +0,0 @@
-export { ChartsText } from './ChartsText';

package/esm/ChartsTooltip/ChartsAxisTooltipContent.js

@@ -1,80 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
-import useSlotProps from '@mui/utils/useSlotProps';
-import { useCartesianContext } from '../context/CartesianProvider';
-import { DefaultChartsAxisTooltipContent } from './DefaultChartsAxisTooltipContent';
-import { ZAxisContext } from '../context/ZAxisContextProvider';
-import { useColorProcessor } from '../context/PluginProvider/useColorProcessor';
-import { isCartesianSeriesType } from '../internals/isCartesian';
-import { useSeries } from '../hooks/useSeries';
-import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * @ignore - internal component.
- */
-function ChartsAxisTooltipContent(props) {
-  const {
-    content,
-    contentProps,
-    axisData,
-    sx,
-    classes
-  } = props;
-  const isXaxis = (axisData.x && axisData.x.index) !== undefined;
-  const dataIndex = isXaxis ? axisData.x && axisData.x.index : axisData.y && axisData.y.index;
-  const axisValue = isXaxis ? axisData.x && axisData.x.value : axisData.y && axisData.y.value;
-  const {
-    xAxisIds,
-    xAxis,
-    yAxisIds,
-    yAxis
-  } = useCartesianContext();
-  const {
-    zAxisIds,
-    zAxis
-  } = React.useContext(ZAxisContext);
-  const series = useSeries();
-  const colorProcessors = useColorProcessor();
-  const USED_AXIS_ID = isXaxis ? xAxisIds[0] : yAxisIds[0];
-  const relevantSeries = React.useMemo(() => {
-    const rep = [];
-    Object.keys(series).filter(isCartesianSeriesType).forEach(seriesType => {
-      series[seriesType].seriesOrder.forEach(seriesId => {
-        const item = series[seriesType].series[seriesId];
-        const providedXAxisId = item.xAxisId ?? item.xAxisKey;
-        const providedYAxisId = item.yAxisId ?? item.yAxisKey;
-        const axisKey = isXaxis ? providedXAxisId : providedYAxisId;
-        if (axisKey === undefined || axisKey === USED_AXIS_ID) {
-          const seriesToAdd = series[seriesType].series[seriesId];
-          const xAxisId = providedXAxisId ?? xAxisIds[0];
-          const yAxisId = providedYAxisId ?? yAxisIds[0];
-          const zAxisId = seriesToAdd.zAxisId ?? seriesToAdd.zAxisKey ?? zAxisIds[0];
-          const getColor = colorProcessors[seriesType]?.(seriesToAdd, xAxis[xAxisId], yAxis[yAxisId], zAxisId && zAxis[zAxisId]) ?? (() => '');
-          rep.push(_extends({}, seriesToAdd, {
-            getColor
-          }));
-        }
-      });
-    });
-    return rep;
-  }, [USED_AXIS_ID, colorProcessors, isXaxis, series, xAxis, xAxisIds, yAxis, yAxisIds, zAxis, zAxisIds]);
-  const relevantAxis = React.useMemo(() => {
-    return isXaxis ? xAxis[USED_AXIS_ID] : yAxis[USED_AXIS_ID];
-  }, [USED_AXIS_ID, isXaxis, xAxis, yAxis]);
-  const Content = content ?? DefaultChartsAxisTooltipContent;
-  const chartTooltipContentProps = useSlotProps({
-    elementType: Content,
-    externalSlotProps: contentProps,
-    additionalProps: {
-      axisData,
-      series: relevantSeries,
-      axis: relevantAxis,
-      dataIndex,
-      axisValue,
-      sx,
-      classes
-    },
-    ownerState: {}
-  });
-  return /*#__PURE__*/_jsx(Content, _extends({}, chartTooltipContentProps));
-}
-export { ChartsAxisTooltipContent };

package/esm/ChartsTooltip/ChartsItemTooltipContent.js

@@ -1,52 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
-import useSlotProps from '@mui/utils/useSlotProps';
-import { DefaultChartsItemTooltipContent } from './DefaultChartsItemTooltipContent';
-import { useCartesianContext } from '../context/CartesianProvider';
-import { ZAxisContext } from '../context/ZAxisContextProvider';
-import { useColorProcessor } from '../context/PluginProvider/useColorProcessor';
-import { useSeries } from '../hooks/useSeries';
-import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * @ignore - internal component.
- */
-function ChartsItemTooltipContent(props) {
-  const {
-    content,
-    itemData,
-    sx,
-    classes,
-    contentProps
-  } = props;
-  const series = useSeries()[itemData.type].series[itemData.seriesId];
-  const {
-    xAxis,
-    yAxis,
-    xAxisIds,
-    yAxisIds
-  } = useCartesianContext();
-  const {
-    zAxis,
-    zAxisIds
-  } = React.useContext(ZAxisContext);
-  const colorProcessors = useColorProcessor();
-  const xAxisId = series.xAxisId ?? series.xAxisKey ?? xAxisIds[0];
-  const yAxisId = series.yAxisId ?? series.yAxisKey ?? yAxisIds[0];
-  const zAxisId = series.zAxisId ?? series.zAxisKey ?? zAxisIds[0];
-  const getColor = colorProcessors[series.type]?.(series, xAxisId && xAxis[xAxisId], yAxisId && yAxis[yAxisId], zAxisId && zAxis[zAxisId]) ?? (() => '');
-  const Content = content ?? DefaultChartsItemTooltipContent;
-  const chartTooltipContentProps = useSlotProps({
-    elementType: Content,
-    externalSlotProps: contentProps,
-    additionalProps: {
-      itemData,
-      series,
-      sx,
-      classes,
-      getColor
-    },
-    ownerState: {}
-  });
-  return /*#__PURE__*/_jsx(Content, _extends({}, chartTooltipContentProps));
-}
-export { ChartsItemTooltipContent };

package/esm/ChartsTooltip/ChartsTooltip.js

@@ -1,154 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import composeClasses from '@mui/utils/composeClasses';
-import { styled, useThemeProps } from '@mui/material/styles';
-import Popper from '@mui/material/Popper';
-import NoSsr from '@mui/material/NoSsr';
-import useSlotProps from '@mui/utils/useSlotProps';
-import { InteractionContext } from '../context/InteractionProvider';
-import { generateVirtualElement, useMouseTracker, getTooltipHasData } from './utils';
-import { ChartsItemTooltipContent } from './ChartsItemTooltipContent';
-import { ChartsAxisTooltipContent } from './ChartsAxisTooltipContent';
-import { getChartsTooltipUtilityClass } from './chartsTooltipClasses';
-import { jsx as _jsx } from "react/jsx-runtime";
-const useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
-  const slots = {
-    root: ['root'],
-    table: ['table'],
-    row: ['row'],
-    cell: ['cell'],
-    mark: ['mark'],
-    markCell: ['markCell'],
-    labelCell: ['labelCell'],
-    valueCell: ['valueCell']
-  };
-  return composeClasses(slots, getChartsTooltipUtilityClass, classes);
-};
-const ChartsTooltipRoot = styled(Popper, {
-  name: 'MuiChartsTooltip',
-  slot: 'Root',
-  overridesResolver: (_, styles) => styles.root
-})(({
-  theme
-}) => ({
-  pointerEvents: 'none',
-  zIndex: theme.zIndex.modal
-}));
-
-/**
- * Demos:
- *
- * - [ChartsTooltip](https://mui.com/x/react-charts/tooltip/)
- *
- * API:
- *
- * - [ChartsTooltip API](https://mui.com/x/api/charts/charts-tool-tip/)
- */
-function ChartsTooltip(props) {
-  const themeProps = useThemeProps({
-    props,
-    name: 'MuiChartsTooltip'
-  });
-  const {
-    trigger = 'axis',
-    itemContent,
-    axisContent,
-    slots,
-    slotProps
-  } = themeProps;
-  const mousePosition = useMouseTracker();
-  const {
-    item,
-    axis
-  } = React.useContext(InteractionContext);
-  const displayedData = trigger === 'item' ? item : axis;
-  const tooltipHasData = getTooltipHasData(trigger, displayedData);
-  const popperOpen = mousePosition !== null && tooltipHasData;
-  const classes = useUtilityClasses({
-    classes: themeProps.classes
-  });
-  const PopperComponent = slots?.popper ?? ChartsTooltipRoot;
-  const popperProps = useSlotProps({
-    elementType: PopperComponent,
-    externalSlotProps: slotProps?.popper,
-    additionalProps: {
-      open: popperOpen,
-      placement: mousePosition?.pointerType === 'mouse' ? 'right-start' : 'top',
-      anchorEl: generateVirtualElement(mousePosition),
-      modifiers: [{
-        name: 'offset',
-        options: {
-          offset: [0, mousePosition?.pointerType === 'touch' ? 40 - mousePosition.height : 0]
-        }
-      }]
-    },
-    ownerState: {}
-  });
-  if (trigger === 'none') {
-    return null;
-  }
-  return /*#__PURE__*/_jsx(NoSsr, {
-    children: popperOpen && /*#__PURE__*/_jsx(PopperComponent, _extends({}, popperProps, {
-      children: trigger === 'item' ? /*#__PURE__*/_jsx(ChartsItemTooltipContent, {
-        itemData: displayedData,
-        content: slots?.itemContent ?? itemContent,
-        contentProps: slotProps?.itemContent,
-        sx: {
-          mx: 2
-        },
-        classes: classes
-      }) : /*#__PURE__*/_jsx(ChartsAxisTooltipContent, {
-        axisData: displayedData,
-        content: slots?.axisContent ?? axisContent,
-        contentProps: slotProps?.axisContent,
-        sx: {
-          mx: 2
-        },
-        classes: classes
-      })
-    }))
-  });
-}
-process.env.NODE_ENV !== "production" ? ChartsTooltip.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
-  // ----------------------------------------------------------------------
-  /**
-   * Component to override the tooltip content when trigger is set to 'axis'.
-   * @deprecated Use slots.axisContent instead
-   */
-  axisContent: PropTypes.elementType,
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes: PropTypes.object,
-  /**
-   * Component to override the tooltip content when trigger is set to 'item'.
-   * @deprecated Use slots.itemContent instead
-   */
-  itemContent: PropTypes.elementType,
-  /**
-   * The props used for each component slot.
-   * @default {}
-   */
-  slotProps: PropTypes.object,
-  /**
-   * Overridable component slots.
-   * @default {}
-   */
-  slots: PropTypes.object,
-  /**
-   * Select the kind of tooltip to display
-   * - 'item': Shows data about the item below the mouse.
-   * - 'axis': Shows values associated with the hovered x value
-   * - 'none': Does not display tooltip
-   * @default 'item'
-   */
-  trigger: PropTypes.oneOf(['axis', 'item', 'none'])
-} : void 0;
-export { ChartsTooltip };

package/esm/ChartsTooltip/DefaultChartsAxisTooltipContent.js

@@ -1,121 +0,0 @@
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import clsx from 'clsx';
-import Typography from '@mui/material/Typography';
-import { ChartsTooltipCell, ChartsTooltipPaper, ChartsTooltipTable, ChartsTooltipMark, ChartsTooltipRow } from './ChartsTooltipTable';
-import { utcFormatter } from './utils';
-import { getLabel } from '../internals/getLabel';
-import { isCartesianSeries } from '../internals/isCartesian';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function DefaultChartsAxisTooltipContent(props) {
-  const {
-    series,
-    axis,
-    dataIndex,
-    axisValue,
-    sx,
-    classes
-  } = props;
-  if (dataIndex == null) {
-    return null;
-  }
-  const axisFormatter = axis.valueFormatter ?? (v => axis.scaleType === 'utc' ? utcFormatter(v) : v.toLocaleString());
-  return /*#__PURE__*/_jsx(ChartsTooltipPaper, {
-    sx: sx,
-    className: classes.root,
-    children: /*#__PURE__*/_jsxs(ChartsTooltipTable, {
-      className: classes.table,
-      children: [axisValue != null && !axis.hideTooltip && /*#__PURE__*/_jsx("thead", {
-        children: /*#__PURE__*/_jsx(ChartsTooltipRow, {
-          children: /*#__PURE__*/_jsx(ChartsTooltipCell, {
-            colSpan: 3,
-            children: /*#__PURE__*/_jsx(Typography, {
-              children: axisFormatter(axisValue, {
-                location: 'tooltip'
-              })
-            })
-          })
-        })
-      }), /*#__PURE__*/_jsx("tbody", {
-        children: series.filter(isCartesianSeries).map(({
-          id,
-          label,
-          valueFormatter,
-          data,
-          getColor
-        }) => {
-          // @ts-ignore
-          const formattedValue = valueFormatter(data[dataIndex] ?? null, {
-            dataIndex
-          });
-          if (formattedValue == null) {
-            return null;
-          }
-          const formattedLabel = getLabel(label, 'tooltip');
-          const color = getColor(dataIndex);
-          return /*#__PURE__*/_jsxs(ChartsTooltipRow, {
-            className: classes.row,
-            children: [/*#__PURE__*/_jsx(ChartsTooltipCell, {
-              className: clsx(classes.markCell, classes.cell),
-              children: color && /*#__PURE__*/_jsx(ChartsTooltipMark, {
-                color: color,
-                className: classes.mark
-              })
-            }), /*#__PURE__*/_jsx(ChartsTooltipCell, {
-              className: clsx(classes.labelCell, classes.cell),
-              children: formattedLabel ? /*#__PURE__*/_jsx(Typography, {
-                children: formattedLabel
-              }) : null
-            }), /*#__PURE__*/_jsx(ChartsTooltipCell, {
-              className: clsx(classes.valueCell, classes.cell),
-              children: /*#__PURE__*/_jsx(Typography, {
-                children: formattedValue
-              })
-            })]
-          }, id);
-        })
-      })]
-    })
-  });
-}
-process.env.NODE_ENV !== "production" ? DefaultChartsAxisTooltipContent.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
-  // ----------------------------------------------------------------------
-  /**
-   * The properties of the triggered axis.
-   */
-  axis: PropTypes.object.isRequired,
-  /**
-   * Data identifying the triggered axis.
-   */
-  axisData: PropTypes.shape({
-    x: PropTypes.shape({
-      index: PropTypes.number,
-      value: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]).isRequired
-    }),
-    y: PropTypes.shape({
-      index: PropTypes.number,
-      value: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]).isRequired
-    })
-  }).isRequired,
-  /**
-   * The value associated to the current mouse position.
-   */
-  axisValue: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]),
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes: PropTypes.object.isRequired,
-  /**
-   * The index of the data item triggered.
-   */
-  dataIndex: PropTypes.number,
-  /**
-   * The series linked to the triggered axis.
-   */
-  series: PropTypes.arrayOf(PropTypes.object).isRequired,
-  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
-} : void 0;
-export { DefaultChartsAxisTooltipContent };