@mui/x-charts 8.9.2 → 8.10.1

package/ChartsXAxis/useAxisProps.js

@@ -0,0 +1,105 @@
+"use strict";
+'use client';
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useAxisProps = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _useSlotProps = _interopRequireDefault(require("@mui/utils/useSlotProps"));
+var _styles = require("@mui/material/styles");
+var _RtlProvider = require("@mui/system/RtlProvider");
+var _ChartsText = require("../ChartsText");
+var _useAxis = require("../hooks/useAxis");
+var _defaultTextPlacement = require("../ChartsText/defaultTextPlacement");
+var _invertTextAnchor = require("../internals/invertTextAnchor");
+var _utilities = require("./utilities");
+var _isBandScale = require("../internals/isBandScale");
+var _isInfinity = require("../internals/isInfinity");
+const _excluded = ["scale", "tickNumber", "reverse"];
+const useAxisProps = inProps => {
+  const {
+    xAxis,
+    xAxisIds
+  } = (0, _useAxis.useXAxes)();
+  const _xAxis = xAxis[inProps.axisId ?? xAxisIds[0]],
+    {
+      scale: xScale,
+      tickNumber,
+      reverse
+    } = _xAxis,
+    settings = (0, _objectWithoutPropertiesLoose2.default)(_xAxis, _excluded);
+
+  // eslint-disable-next-line material-ui/mui-name-matches-component-name
+  const themedProps = (0, _styles.useThemeProps)({
+    props: (0, _extends2.default)({}, settings, inProps),
+    name: 'MuiChartsXAxis'
+  });
+  const defaultizedProps = (0, _extends2.default)({}, _utilities.defaultProps, themedProps);
+  const {
+    position,
+    tickLabelStyle,
+    labelStyle,
+    slots,
+    slotProps
+  } = defaultizedProps;
+  const theme = (0, _styles.useTheme)();
+  const isRtl = (0, _RtlProvider.useRtl)();
+  const classes = (0, _utilities.useUtilityClasses)(defaultizedProps);
+  const positionSign = position === 'bottom' ? 1 : -1;
+  const Line = slots?.axisLine ?? 'line';
+  const Tick = slots?.axisTick ?? 'line';
+  const TickLabel = slots?.axisTickLabel ?? _ChartsText.ChartsText;
+  const Label = slots?.axisLabel ?? _ChartsText.ChartsText;
+  const defaultTextAnchor = (0, _defaultTextPlacement.getDefaultTextAnchor)((position === 'bottom' ? 0 : 180) - (tickLabelStyle?.angle ?? 0));
+  const defaultDominantBaseline = (0, _defaultTextPlacement.getDefaultBaseline)((position === 'bottom' ? 0 : 180) - (tickLabelStyle?.angle ?? 0));
+  const axisTickLabelProps = (0, _useSlotProps.default)({
+    elementType: TickLabel,
+    externalSlotProps: slotProps?.axisTickLabel,
+    additionalProps: {
+      style: (0, _extends2.default)({}, theme.typography.caption, {
+        fontSize: 12,
+        lineHeight: 1.25,
+        textAnchor: isRtl ? (0, _invertTextAnchor.invertTextAnchor)(defaultTextAnchor) : defaultTextAnchor,
+        dominantBaseline: defaultDominantBaseline
+      }, tickLabelStyle)
+    },
+    className: classes.tickLabel,
+    ownerState: {}
+  });
+  const axisLabelProps = (0, _useSlotProps.default)({
+    elementType: Label,
+    externalSlotProps: slotProps?.axisLabel,
+    additionalProps: {
+      style: (0, _extends2.default)({}, theme.typography.body1, {
+        lineHeight: 1,
+        fontSize: 14,
+        textAnchor: 'middle',
+        dominantBaseline: position === 'bottom' ? 'text-after-edge' : 'text-before-edge'
+      }, labelStyle)
+    },
+    ownerState: {}
+  });
+  const domain = xScale.domain();
+  const isScaleBand = (0, _isBandScale.isBandScale)(xScale);
+  const skipAxisRendering = isScaleBand && domain.length === 0 || !isScaleBand && domain.some(_isInfinity.isInfinity) || position === 'none';
+  return {
+    xScale,
+    defaultizedProps,
+    tickNumber,
+    positionSign,
+    skipAxisRendering,
+    classes,
+    Line,
+    Tick,
+    TickLabel,
+    Label,
+    axisTickLabelProps,
+    axisLabelProps,
+    reverse,
+    isRtl
+  };
+};
+exports.useAxisProps = useAxisProps;

package/ChartsXAxis/utilities.d.ts

@@ -0,0 +1,11 @@
+import { AxisConfig, ChartsXAxisProps } from "../models/axis.js";
+export declare const useUtilityClasses: (ownerState: AxisConfig<any, any, ChartsXAxisProps>) => Record<"line" | "root" | "label" | "tickContainer" | "tick" | "tickLabel", string>;
+export declare const TICK_LABEL_GAP = 3;
+export declare const AXIS_LABEL_TICK_LABEL_GAP = 4;
+export declare const XAxisRoot: import("@emotion/styled").StyledComponent<Pick<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & Pick<import("react").SVGProps<SVGGElement>, keyof import("react").SVGProps<SVGGElement>>, keyof import("react").SVGProps<SVGGElement> | keyof import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const defaultProps: {
+  readonly disableLine: false;
+  readonly disableTicks: false;
+  readonly tickSize: 6;
+  readonly tickLabelMinGap: 4;
+};

package/ChartsXAxis/utilities.js

@@ -0,0 +1,43 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useUtilityClasses = exports.defaultProps = exports.XAxisRoot = exports.TICK_LABEL_GAP = exports.AXIS_LABEL_TICK_LABEL_GAP = void 0;
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _styles = require("@mui/material/styles");
+var _axisClasses = require("../ChartsAxis/axisClasses");
+var _AxisSharedComponents = require("../internals/components/AxisSharedComponents");
+const useUtilityClasses = ownerState => {
+  const {
+    classes,
+    position,
+    id
+  } = ownerState;
+  const slots = {
+    root: ['root', 'directionX', position, `id-${id}`],
+    line: ['line'],
+    tickContainer: ['tickContainer'],
+    tick: ['tick'],
+    tickLabel: ['tickLabel'],
+    label: ['label']
+  };
+  return (0, _composeClasses.default)(slots, _axisClasses.getAxisUtilityClass, classes);
+};
+
+/* Gap between a tick and its label. */
+exports.useUtilityClasses = useUtilityClasses;
+const TICK_LABEL_GAP = exports.TICK_LABEL_GAP = 3;
+/* Gap between the axis label and tick labels. */
+const AXIS_LABEL_TICK_LABEL_GAP = exports.AXIS_LABEL_TICK_LABEL_GAP = 4;
+const XAxisRoot = exports.XAxisRoot = (0, _styles.styled)(_AxisSharedComponents.AxisRoot, {
+  name: 'MuiChartsXAxis',
+  slot: 'Root'
+})({});
+const defaultProps = exports.defaultProps = {
+  disableLine: false,
+  disableTicks: false,
+  tickSize: 6,
+  tickLabelMinGap: 4
+};

package/ChartsYAxis/ChartsGroupedYAxis.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { ChartsYAxisProps } from "../models/axis.js";
+/**
+ * @ignore - internal component.
+ */
+declare function ChartsGroupedYAxis(inProps: ChartsYAxisProps): React.JSX.Element | null;
+export { ChartsGroupedYAxis };

package/ChartsYAxis/ChartsGroupedYAxis.js

@@ -0,0 +1,144 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChartsGroupedYAxis = ChartsGroupedYAxis;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _useDrawingArea = require("../hooks/useDrawingArea");
+var _isBandScale = require("../internals/isBandScale");
+var _useChartContext = require("../context/ChartProvider/useChartContext");
+var _utilities = require("./utilities");
+var _useTicksGrouped = require("../hooks/useTicksGrouped");
+var _useAxisProps = require("./useAxisProps");
+var _jsxRuntime = require("react/jsx-runtime");
+const DEFAULT_GROUPING_CONFIG = {
+  tickSize: 6
+};
+const getGroupingConfig = (groups, groupIndex, tickSize) => {
+  const config = groups[groupIndex] ?? {};
+  const defaultTickSize = tickSize ?? DEFAULT_GROUPING_CONFIG.tickSize;
+  const calculatedTickSize = defaultTickSize * groupIndex * 2 + defaultTickSize;
+  return (0, _extends2.default)({}, DEFAULT_GROUPING_CONFIG, config, {
+    tickSize: config.tickSize ?? calculatedTickSize
+  });
+};
+
+/**
+ * @ignore - internal component.
+ */
+function ChartsGroupedYAxis(inProps) {
+  const {
+    yScale,
+    defaultizedProps,
+    tickNumber,
+    positionSign,
+    skipAxisRendering,
+    classes,
+    Line,
+    Tick,
+    TickLabel,
+    Label,
+    axisTickLabelProps,
+    axisLabelProps,
+    lineProps
+  } = (0, _useAxisProps.useAxisProps)(inProps);
+  if (!(0, _isBandScale.isBandScale)(yScale)) {
+    throw new Error('MUI X Charts: ChartsGroupedYAxis only supports the `band` and `point` scale types.');
+  }
+  const {
+    position,
+    disableLine,
+    disableTicks,
+    label,
+    tickSize,
+    valueFormatter,
+    slotProps,
+    tickInterval,
+    tickPlacement,
+    tickLabelPlacement,
+    sx,
+    offset,
+    width: axisWidth
+  } = defaultizedProps;
+  const groups = defaultizedProps.groups;
+  const drawingArea = (0, _useDrawingArea.useDrawingArea)();
+  const {
+    left,
+    top,
+    width,
+    height
+  } = drawingArea;
+  const {
+    instance
+  } = (0, _useChartContext.useChartContext)();
+  const labelRefPoint = {
+    x: positionSign * axisWidth,
+    y: top + height / 2
+  };
+  const yTicks = (0, _useTicksGrouped.useTicksGrouped)({
+    scale: yScale,
+    tickNumber,
+    valueFormatter,
+    tickInterval,
+    tickPlacement,
+    tickLabelPlacement,
+    direction: 'y',
+    groups
+  });
+
+  // Skip axis rendering if no data is available
+  // - The domain is an empty array for band/point scales.
+  // - The domains contains Infinity for continuous scales.
+  // - The position is set to 'none'.
+  if (skipAxisRendering) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_utilities.YAxisRoot, {
+    transform: `translate(${position === 'right' ? left + width + offset : left - offset}, 0)`,
+    className: classes.root,
+    sx: sx,
+    children: [!disableLine && /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, (0, _extends2.default)({
+      y1: top,
+      y2: top + height,
+      className: classes.line
+    }, lineProps)), yTicks.map((item, index) => {
+      const {
+        offset: tickOffset,
+        labelOffset
+      } = item;
+      const yTickLabel = labelOffset ?? 0;
+      const showTick = instance.isYInside(tickOffset);
+      const tickLabel = item.formattedValue;
+      const ignoreTick = item.ignoreTick ?? false;
+      const groupIndex = item.groupIndex ?? 0;
+      const groupConfig = getGroupingConfig(groups, groupIndex, tickSize);
+      const tickXSize = positionSign * groupConfig.tickSize;
+      const labelPositionX = positionSign * (groupConfig.tickSize + _utilities.TICK_LABEL_GAP);
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
+        transform: `translate(0, ${tickOffset})`,
+        className: classes.tickContainer,
+        "data-group-index": groupIndex,
+        children: [!disableTicks && !ignoreTick && showTick && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tick, (0, _extends2.default)({
+          x2: tickXSize,
+          className: classes.tick
+        }, slotProps?.axisTick)), tickLabel !== undefined && /*#__PURE__*/(0, _jsxRuntime.jsx)(TickLabel, (0, _extends2.default)({
+          x: labelPositionX,
+          y: yTickLabel
+        }, axisTickLabelProps, {
+          style: (0, _extends2.default)({}, axisTickLabelProps.style, groupConfig.tickLabelStyle),
+          text: tickLabel
+        }))]
+      }, index);
+    }), label && /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
+      className: classes.label,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Label, (0, _extends2.default)({}, labelRefPoint, axisLabelProps, {
+        text: label
+      }))
+    })]
+  });
+}

package/ChartsYAxis/ChartsSingleYAxis.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { ChartsYAxisProps } from "../models/axis.js";
+/**
+ * @ignore - internal component.
+ */
+declare function ChartsSingleYAxis(inProps: ChartsYAxisProps): React.JSX.Element | null;
+export { ChartsSingleYAxis };

package/ChartsYAxis/ChartsSingleYAxis.js

@@ -0,0 +1,133 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChartsSingleYAxis = ChartsSingleYAxis;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _useIsHydrated = require("../hooks/useIsHydrated");
+var _domUtils = require("../internals/domUtils");
+var _useTicks = require("../hooks/useTicks");
+var _useDrawingArea = require("../hooks/useDrawingArea");
+var _ChartProvider = require("../context/ChartProvider");
+var _shortenLabels = require("./shortenLabels");
+var _utilities = require("./utilities");
+var _useAxisProps = require("./useAxisProps");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * @ignore - internal component.
+ */function ChartsSingleYAxis(inProps) {
+  const {
+    yScale,
+    defaultizedProps,
+    tickNumber,
+    positionSign,
+    skipAxisRendering,
+    classes,
+    Line,
+    Tick,
+    TickLabel,
+    Label,
+    axisTickLabelProps,
+    axisLabelProps,
+    lineProps,
+    isRtl
+  } = (0, _useAxisProps.useAxisProps)(inProps);
+  const {
+    position,
+    disableLine,
+    disableTicks,
+    label,
+    tickSize: tickSizeProp,
+    valueFormatter,
+    slotProps,
+    tickPlacement,
+    tickLabelPlacement,
+    tickInterval,
+    tickLabelInterval,
+    sx,
+    offset,
+    width: axisWidth
+  } = defaultizedProps;
+  const drawingArea = (0, _useDrawingArea.useDrawingArea)();
+  const {
+    left,
+    top,
+    width,
+    height
+  } = drawingArea;
+  const {
+    instance
+  } = (0, _ChartProvider.useChartContext)();
+  const isHydrated = (0, _useIsHydrated.useIsHydrated)();
+  const tickSize = disableTicks ? 4 : tickSizeProp;
+  const yTicks = (0, _useTicks.useTicks)({
+    scale: yScale,
+    tickNumber,
+    valueFormatter,
+    tickPlacement,
+    tickLabelPlacement,
+    tickInterval,
+    direction: 'y'
+  });
+
+  // Skip axis rendering if no data is available
+  // - The domain is an empty array for band/point scales.
+  // - The domains contains Infinity for continuous scales.
+  // - The position is set to 'none'.
+  if (skipAxisRendering) {
+    return null;
+  }
+  const labelRefPoint = {
+    x: positionSign * axisWidth,
+    y: top + height / 2
+  };
+  /* If there's an axis title, the tick labels have less space to render  */
+  const tickLabelsMaxWidth = Math.max(0, axisWidth - (label ? (0, _domUtils.getStringSize)(label, axisLabelProps.style).height + _utilities.AXIS_LABEL_TICK_LABEL_GAP : 0) - tickSize - _utilities.TICK_LABEL_GAP);
+  const tickLabels = isHydrated ? (0, _shortenLabels.shortenLabels)(yTicks, drawingArea, tickLabelsMaxWidth, isRtl, axisTickLabelProps.style) : new Map(Array.from(yTicks).map(item => [item, item.formattedValue]));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_utilities.YAxisRoot, {
+    transform: `translate(${position === 'right' ? left + width + offset : left - offset}, 0)`,
+    className: classes.root,
+    sx: sx,
+    children: [!disableLine && /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, (0, _extends2.default)({
+      y1: top,
+      y2: top + height,
+      className: classes.line
+    }, lineProps)), yTicks.map((item, index) => {
+      const {
+        offset: tickOffset,
+        labelOffset,
+        value
+      } = item;
+      const xTickLabel = positionSign * (tickSize + _utilities.TICK_LABEL_GAP);
+      const yTickLabel = labelOffset;
+      const skipLabel = typeof tickLabelInterval === 'function' && !tickLabelInterval?.(value, index);
+      const showLabel = instance.isYInside(tickOffset);
+      const tickLabel = tickLabels.get(item);
+      if (!showLabel) {
+        return null;
+      }
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
+        transform: `translate(0, ${tickOffset})`,
+        className: classes.tickContainer,
+        children: [!disableTicks && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tick, (0, _extends2.default)({
+          x2: positionSign * tickSize,
+          className: classes.tick
+        }, slotProps?.axisTick)), tickLabel !== undefined && !skipLabel && /*#__PURE__*/(0, _jsxRuntime.jsx)(TickLabel, (0, _extends2.default)({
+          x: xTickLabel,
+          y: yTickLabel,
+          text: tickLabel
+        }, axisTickLabelProps))]
+      }, index);
+    }), label && isHydrated && /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
+      className: classes.label,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Label, (0, _extends2.default)({}, labelRefPoint, axisLabelProps, {
+        text: label
+      }))
+    })]
+  });
+}

package/ChartsYAxis/ChartsYAxis.d.ts

@@ -9,7 +9,7 @@ import { ChartsYAxisProps } from "../models/axis.js";
  *
  * - [ChartsYAxis API](https://mui.com/x/api/charts/charts-y-axis/)
  */
-declare function ChartsYAxis(inProps: ChartsYAxisProps): React.JSX.Element | null;
+declare function ChartsYAxis(inProps: ChartsYAxisProps): React.JSX.Element;
 declare namespace ChartsYAxis {
   var propTypes: any;
 }