@mui/x-charts 7.14.0 → 7.16.0

package/esm/ChartsGrid/ChartsGrid.js

@@ -1,133 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["vertical", "horizontal"];
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import composeClasses from '@mui/utils/composeClasses';
-import { styled, useThemeProps } from '@mui/material/styles';
-import { useCartesianContext } from '../context/CartesianProvider';
-import { useTicks } from '../hooks/useTicks';
-import { getChartsGridUtilityClass, chartsGridClasses } from './chartsGridClasses';
-import { useDrawingArea } from '../hooks/useDrawingArea';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const GridRoot = styled('g', {
-  name: 'MuiChartsGrid',
-  slot: 'Root',
-  overridesResolver: (props, styles) => [{
-    [`&.${chartsGridClasses.verticalLine}`]: styles.verticalLine
-  }, {
-    [`&.${chartsGridClasses.horizontalLine}`]: styles.horizontalLine
-  }, styles.root]
-})({});
-const GridLine = styled('line', {
-  name: 'MuiChartsGrid',
-  slot: 'Line',
-  overridesResolver: (props, styles) => styles.line
-})(({
-  theme
-}) => ({
-  stroke: (theme.vars || theme).palette.divider,
-  shapeRendering: 'crispEdges',
-  strokeWidth: 1
-}));
-const useUtilityClasses = ({
-  classes
-}) => {
-  const slots = {
-    root: ['root'],
-    verticalLine: ['line', 'verticalLine'],
-    horizontalLine: ['line', 'horizontalLine']
-  };
-  return composeClasses(slots, getChartsGridUtilityClass, classes);
-};
-/**
- * Demos:
- *
- * - [Axis](https://mui.com/x/react-charts/axis/)
- *
- * API:
- *
- * - [ChartsGrid API](https://mui.com/x/api/charts/charts-axis/)
- */
-function ChartsGrid(props) {
-  const themeProps = useThemeProps({
-    props,
-    name: 'MuiChartsGrid'
-  });
-  const drawingArea = useDrawingArea();
-  const {
-      vertical,
-      horizontal
-    } = themeProps,
-    other = _objectWithoutPropertiesLoose(themeProps, _excluded);
-  const {
-    xAxis,
-    xAxisIds,
-    yAxis,
-    yAxisIds
-  } = useCartesianContext();
-  const classes = useUtilityClasses(themeProps);
-  const horizontalAxisId = yAxisIds[0];
-  const verticalAxisId = xAxisIds[0];
-  const {
-    scale: xScale,
-    tickNumber: xTickNumber,
-    tickInterval: xTickInterval
-  } = xAxis[verticalAxisId];
-  const {
-    scale: yScale,
-    tickNumber: yTickNumber,
-    tickInterval: yTickInterval
-  } = yAxis[horizontalAxisId];
-  const xTicks = useTicks({
-    scale: xScale,
-    tickNumber: xTickNumber,
-    tickInterval: xTickInterval
-  });
-  const yTicks = useTicks({
-    scale: yScale,
-    tickNumber: yTickNumber,
-    tickInterval: yTickInterval
-  });
-  return /*#__PURE__*/_jsxs(GridRoot, _extends({}, other, {
-    className: classes.root,
-    children: [vertical && xTicks.map(({
-      formattedValue,
-      offset
-    }) => /*#__PURE__*/_jsx(GridLine, {
-      y1: drawingArea.top,
-      y2: drawingArea.top + drawingArea.height,
-      x1: offset,
-      x2: offset,
-      className: classes.verticalLine
-    }, `vertical-${formattedValue}`)), horizontal && yTicks.map(({
-      formattedValue,
-      offset
-    }) => /*#__PURE__*/_jsx(GridLine, {
-      y1: offset,
-      y2: offset,
-      x1: drawingArea.left,
-      x2: drawingArea.left + drawingArea.width,
-      className: classes.horizontalLine
-    }, `horizontal-${formattedValue}`))]
-  }));
-}
-process.env.NODE_ENV !== "production" ? ChartsGrid.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
-  // ----------------------------------------------------------------------
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes: PropTypes.object,
-  /**
-   * Displays horizontal grid.
-   */
-  horizontal: PropTypes.bool,
-  /**
-   * Displays vertical grid.
-   */
-  vertical: PropTypes.bool
-} : void 0;
-export { ChartsGrid };

package/esm/ChartsGrid/chartsGridClasses.js

@@ -1,6 +0,0 @@
-import generateUtilityClass from '@mui/utils/generateUtilityClass';
-import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
-export function getChartsGridUtilityClass(slot) {
-  return generateUtilityClass('MuiChartsGrid', slot);
-}
-export const chartsGridClasses = generateUtilityClasses('MuiChartsGrid', ['root', 'line', 'horizontalLine', 'verticalLine']);

package/esm/ChartsGrid/index.js

@@ -1,2 +0,0 @@
-export * from './ChartsGrid';
-export * from './chartsGridClasses';

package/esm/ChartsLegend/ChartsLegend.js

@@ -1,106 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import useSlotProps from '@mui/utils/useSlotProps';
-import composeClasses from '@mui/utils/composeClasses';
-import { useThemeProps, useTheme } from '@mui/material/styles';
-import { getSeriesToDisplay } from './utils';
-import { getLegendUtilityClass } from './chartsLegendClasses';
-import { DefaultChartsLegend } from './DefaultChartsLegend';
-import { useDrawingArea } from '../hooks';
-import { useSeries } from '../hooks/useSeries';
-import { jsx as _jsx } from "react/jsx-runtime";
-const useUtilityClasses = ownerState => {
-  const {
-    classes,
-    direction
-  } = ownerState;
-  const slots = {
-    root: ['root', direction],
-    mark: ['mark'],
-    label: ['label'],
-    series: ['series']
-  };
-  return composeClasses(slots, getLegendUtilityClass, classes);
-};
-const defaultProps = {
-  position: {
-    horizontal: 'middle',
-    vertical: 'top'
-  },
-  direction: 'row'
-};
-function ChartsLegend(inProps) {
-  const props = useThemeProps({
-    props: _extends({}, defaultProps, inProps),
-    name: 'MuiChartsLegend'
-  });
-  const {
-    position,
-    direction,
-    hidden,
-    slots,
-    slotProps
-  } = props;
-  const theme = useTheme();
-  const classes = useUtilityClasses(_extends({}, props, {
-    theme
-  }));
-  const drawingArea = useDrawingArea();
-  const series = useSeries();
-  const seriesToDisplay = getSeriesToDisplay(series);
-  const ChartLegendRender = slots?.legend ?? DefaultChartsLegend;
-  const chartLegendRenderProps = useSlotProps({
-    elementType: ChartLegendRender,
-    externalSlotProps: slotProps?.legend,
-    additionalProps: {
-      position,
-      direction,
-      classes,
-      drawingArea,
-      series,
-      hidden,
-      seriesToDisplay
-    },
-    ownerState: {}
-  });
-  return /*#__PURE__*/_jsx(ChartLegendRender, _extends({}, chartLegendRenderProps));
-}
-process.env.NODE_ENV !== "production" ? ChartsLegend.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
-  // ----------------------------------------------------------------------
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes: PropTypes.object,
-  /**
-   * The direction of the legend layout.
-   * The default depends on the chart.
-   */
-  direction: PropTypes.oneOf(['column', 'row']),
-  /**
-   * Set to true to hide the legend.
-   * @default false
-   */
-  hidden: PropTypes.bool,
-  /**
-   * The position of the legend.
-   */
-  position: PropTypes.shape({
-    horizontal: PropTypes.oneOf(['left', 'middle', 'right']).isRequired,
-    vertical: PropTypes.oneOf(['bottom', 'middle', 'top']).isRequired
-  }),
-  /**
-   * The props used for each component slot.
-   * @default {}
-   */
-  slotProps: PropTypes.object,
-  /**
-   * Overridable component slots.
-   * @default {}
-   */
-  slots: PropTypes.object
-} : void 0;
-export { ChartsLegend };

package/esm/ChartsLegend/DefaultChartsLegend.js

@@ -1,97 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["drawingArea", "seriesToDisplay"];
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { LegendPerItem } from './LegendPerItem';
-import { jsx as _jsx } from "react/jsx-runtime";
-function DefaultChartsLegend(props) {
-  const {
-      seriesToDisplay
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  return /*#__PURE__*/_jsx(LegendPerItem, _extends({}, other, {
-    itemsToDisplay: seriesToDisplay
-  }));
-}
-process.env.NODE_ENV !== "production" ? DefaultChartsLegend.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
-  // ----------------------------------------------------------------------
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes: PropTypes.object,
-  /**
-   * The direction of the legend layout.
-   * The default depends on the chart.
-   */
-  direction: PropTypes.oneOf(['column', 'row']).isRequired,
-  /**
-   * @deprecated Use the `useDrawingArea` hook instead.
-   */
-  drawingArea: PropTypes.shape({
-    bottom: PropTypes.number.isRequired,
-    height: PropTypes.number.isRequired,
-    left: PropTypes.number.isRequired,
-    right: PropTypes.number.isRequired,
-    top: PropTypes.number.isRequired,
-    width: PropTypes.number.isRequired
-  }).isRequired,
-  /**
-   * Set to true to hide the legend.
-   * @default false
-   */
-  hidden: PropTypes.bool,
-  /**
-   * Space between two legend items (in px).
-   * @default 10
-   */
-  itemGap: PropTypes.number,
-  /**
-   * Height of the item mark (in px).
-   * @default 20
-   */
-  itemMarkHeight: PropTypes.number,
-  /**
-   * Width of the item mark (in px).
-   * @default 20
-   */
-  itemMarkWidth: PropTypes.number,
-  /**
-   * Style applied to legend labels.
-   * @default theme.typography.subtitle1
-   */
-  labelStyle: PropTypes.object,
-  /**
-   * Space between the mark and the label (in px).
-   * @default 5
-   */
-  markGap: PropTypes.number,
-  /**
-   * Legend padding (in px).
-   * Can either be a single number, or an object with top, left, bottom, right properties.
-   * @default 10
-   */
-  padding: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
-    bottom: PropTypes.number,
-    left: PropTypes.number,
-    right: PropTypes.number,
-    top: PropTypes.number
-  })]),
-  /**
-   * The position of the legend.
-   */
-  position: PropTypes.shape({
-    horizontal: PropTypes.oneOf(['left', 'middle', 'right']).isRequired,
-    vertical: PropTypes.oneOf(['bottom', 'middle', 'top']).isRequired
-  }).isRequired,
-  series: PropTypes.object.isRequired,
-  seriesToDisplay: PropTypes.arrayOf(PropTypes.shape({
-    color: PropTypes.string.isRequired,
-    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-    label: PropTypes.string.isRequired
-  })).isRequired
-} : void 0;
-export { DefaultChartsLegend };

package/esm/ChartsLegend/chartsLegend.types.js

@@ -1 +0,0 @@
-export {};

package/esm/ChartsLegend/chartsLegendClasses.js

@@ -1,5 +0,0 @@
-import { unstable_generateUtilityClass as generateUtilityClass, unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
-export function getLegendUtilityClass(slot) {
-  return generateUtilityClass('MuiChartsLegend', slot);
-}
-export const legendClasses = generateUtilityClasses('MuiChartsLegend', ['root', 'series', 'mark', 'label', 'column', 'row']);

package/esm/ChartsLegend/index.js

@@ -1,6 +0,0 @@
-export * from './ChartsLegend';
-export * from './DefaultChartsLegend';
-export * from './ContinuousColorLegend';
-export * from './PiecewiseColorLegend';
-export * from './chartsLegendClasses';
-export * from './utils';

package/esm/ChartsLegend/legend.types.js

@@ -1 +0,0 @@
-export {};

package/esm/ChartsLegend/utils.js

@@ -1,16 +0,0 @@
-import getBarLegend from '../BarChart/legend';
-import getScatterLegend from '../ScatterChart/legend';
-import getLineLegend from '../LineChart/legend';
-import getPieLegend from '../PieChart/legend';
-const legendGetter = {
-  bar: getBarLegend,
-  scatter: getScatterLegend,
-  line: getLineLegend,
-  pie: getPieLegend
-};
-export function getSeriesToDisplay(series) {
-  return Object.keys(series).flatMap(seriesType => {
-    const getter = legendGetter[seriesType];
-    return getter === undefined ? [] : getter(series[seriesType]);
-  });
-}

package/esm/ChartsOnAxisClickHandler/index.js

@@ -1 +0,0 @@
-export * from './ChartsOnAxisClickHandler';

package/esm/ChartsOverlay/ChartsLoadingOverlay.js

@@ -1,34 +0,0 @@
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["message"];
-import * as React from 'react';
-import { styled } from '@mui/material/styles';
-import { useDrawingArea } from '../hooks/useDrawingArea';
-import { jsx as _jsx } from "react/jsx-runtime";
-const StyledText = styled('text')(({
-  theme
-}) => _extends({}, theme.typography.body2, {
-  stroke: 'none',
-  fill: theme.palette.text.primary,
-  shapeRendering: 'crispEdges',
-  textAnchor: 'middle',
-  dominantBaseline: 'middle'
-}));
-export function ChartsLoadingOverlay(props) {
-  const {
-      message
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const {
-    top,
-    left,
-    height,
-    width
-  } = useDrawingArea();
-  return /*#__PURE__*/_jsx(StyledText, _extends({
-    x: left + width / 2,
-    y: top + height / 2
-  }, other, {
-    children: message ?? 'Loading data…'
-  }));
-}

package/esm/ChartsOverlay/ChartsNoDataOverlay.js

@@ -1,34 +0,0 @@
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["message"];
-import * as React from 'react';
-import { styled } from '@mui/material/styles';
-import { useDrawingArea } from '../hooks/useDrawingArea';
-import { jsx as _jsx } from "react/jsx-runtime";
-const StyledText = styled('text')(({
-  theme
-}) => _extends({}, theme.typography.body2, {
-  stroke: 'none',
-  fill: theme.palette.text.primary,
-  shapeRendering: 'crispEdges',
-  textAnchor: 'middle',
-  dominantBaseline: 'middle'
-}));
-export function ChartsNoDataOverlay(props) {
-  const {
-      message
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const {
-    top,
-    left,
-    height,
-    width
-  } = useDrawingArea();
-  return /*#__PURE__*/_jsx(StyledText, _extends({
-    x: left + width / 2,
-    y: top + height / 2
-  }, other, {
-    children: message ?? 'No data to display'
-  }));
-}

package/esm/ChartsOverlay/ChartsOverlay.js

@@ -1,31 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
-import { ChartsLoadingOverlay } from './ChartsLoadingOverlay';
-import { useSeries } from '../hooks/useSeries';
-import { ChartsNoDataOverlay } from './ChartsNoDataOverlay';
-import { jsx as _jsx } from "react/jsx-runtime";
-export function useNoData() {
-  const seriesPerType = useSeries();
-  return Object.values(seriesPerType).every(seriesOfGivenType => {
-    if (!seriesOfGivenType) {
-      return true;
-    }
-    const {
-      series,
-      seriesOrder
-    } = seriesOfGivenType;
-    return seriesOrder.every(seriesId => series[seriesId].data.length === 0);
-  });
-}
-export function ChartsOverlay(props) {
-  const noData = useNoData();
-  if (props.loading) {
-    const LoadingOverlay = props.slots?.loadingOverlay ?? ChartsLoadingOverlay;
-    return /*#__PURE__*/_jsx(LoadingOverlay, _extends({}, props.slotProps?.loadingOverlay));
-  }
-  if (noData) {
-    const NoDataOverlay = props.slots?.noDataOverlay ?? ChartsNoDataOverlay;
-    return /*#__PURE__*/_jsx(NoDataOverlay, _extends({}, props.slotProps?.noDataOverlay));
-  }
-  return null;
-}

package/esm/ChartsOverlay/index.js

@@ -1,3 +0,0 @@
-export { ChartsOverlay } from './ChartsOverlay';
-export { ChartsLoadingOverlay } from './ChartsLoadingOverlay';
-export { ChartsNoDataOverlay } from './ChartsNoDataOverlay';

package/esm/ChartsReferenceLine/ChartsReferenceLine.js

@@ -1,74 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { ChartsXReferenceLine } from './ChartsXReferenceLine';
-import { ChartsYReferenceLine } from './ChartsYReferenceLine';
-import { jsx as _jsx } from "react/jsx-runtime";
-function ChartsReferenceLine(props) {
-  const {
-    x,
-    y
-  } = props;
-  if (x !== undefined && y !== undefined) {
-    throw new Error('MUI X: The ChartsReferenceLine cannot have both `x` and `y` props set.');
-  }
-  if (x === undefined && y === undefined) {
-    throw new Error('MUI X: The ChartsReferenceLine should have a value in `x` or `y` prop.');
-  }
-  if (x !== undefined) {
-    return /*#__PURE__*/_jsx(ChartsXReferenceLine, _extends({}, props));
-  }
-  return /*#__PURE__*/_jsx(ChartsYReferenceLine, _extends({}, props));
-}
-process.env.NODE_ENV !== "production" ? ChartsReferenceLine.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
-  // ----------------------------------------------------------------------
-  /**
-   * The id of the axis used for the reference value.
-   * @default The `id` of the first defined axis.
-   */
-  axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes: PropTypes.object,
-  /**
-   * The label to display along the reference line.
-   */
-  label: PropTypes.string,
-  /**
-   * The alignment if the label is in the chart drawing area.
-   * @default 'middle'
-   */
-  labelAlign: PropTypes.oneOf(['end', 'middle', 'start']),
-  /**
-   * The style applied to the label.
-   */
-  labelStyle: PropTypes.object,
-  /**
-   * The style applied to the line.
-   */
-  lineStyle: PropTypes.object,
-  /**
-   * Additional space around the label in px.
-   * Can be a number or an object `{ x, y }` to distinguish space with the reference line and space with axes.
-   * @default 5
-   */
-  spacing: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
-    x: PropTypes.number,
-    y: PropTypes.number
-  })]),
-  /**
-   * The x value associated with the reference line.
-   * If defined the reference line will be vertical.
-   */
-  x: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]),
-  /**
-   * The y value associated with the reference line.
-   * If defined the reference line will be horizontal.
-   */
-  y: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string])
-} : void 0;
-export { ChartsReferenceLine };

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