@mui/x-charts 8.0.0-beta.2 → 8.0.0

package/modern/ChartsXAxis/ChartsXAxis.js

@@ -1,457 +0,0 @@
-'use client';
-
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["scale", "tickNumber", "reverse"];
-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, styled } from '@mui/material/styles';
-import { useRtl } from '@mui/system/RtlProvider';
-import { clampAngle } from "../internals/clampAngle.js";
-import { useIsHydrated } from "../hooks/useIsHydrated.js";
-import { doesTextFitInRect, ellipsize } from "../internals/ellipsize.js";
-import { getStringSize } from "../internals/domUtils.js";
-import { useTicks } from "../hooks/useTicks.js";
-import { getAxisUtilityClass } from "../ChartsAxis/axisClasses.js";
-import { AxisRoot } from "../internals/components/AxisSharedComponents.js";
-import { ChartsText } from "../ChartsText/index.js";
-import { getMinXTranslation } from "../internals/geometry.js";
-import { useMounted } from "../hooks/useMounted.js";
-import { useDrawingArea } from "../hooks/useDrawingArea.js";
-import { getWordsByLines } from "../internals/getWordsByLines.js";
-import { isInfinity } from "../internals/isInfinity.js";
-import { isBandScale } from "../internals/isBandScale.js";
-import { useChartContext } from "../context/ChartProvider/useChartContext.js";
-import { useXAxes } from "../hooks/useAxis.js";
-import { getDefaultBaseline, getDefaultTextAnchor } from "../ChartsText/defaultTextPlacement.js";
-import { invertTextAnchor } from "../internals/invertTextAnchor.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useUtilityClasses = ownerState => {
-  const {
-    classes,
-    position
-  } = ownerState;
-  const slots = {
-    root: ['root', 'directionX', position],
-    line: ['line'],
-    tickContainer: ['tickContainer'],
-    tick: ['tick'],
-    tickLabel: ['tickLabel'],
-    label: ['label']
-  };
-  return composeClasses(slots, getAxisUtilityClass, classes);
-};
-
-/* Gap between a tick and its label. */
-const TICK_LABEL_GAP = 3;
-/* Gap between the axis label and tick labels. */
-const AXIS_LABEL_TICK_LABEL_GAP = 4;
-
-/* Returns a set of indices of the tick labels that should be visible.  */
-function getVisibleLabels(xTicks, {
-  tickLabelStyle: style,
-  tickLabelInterval,
-  tickLabelMinGap,
-  reverse,
-  isMounted,
-  isPointInside
-}) {
-  const getTickLabelSize = tick => {
-    if (!isMounted || tick.formattedValue === undefined) {
-      return {
-        width: 0,
-        height: 0
-      };
-    }
-    const tickSizes = getWordsByLines({
-      style,
-      needsComputation: true,
-      text: tick.formattedValue
-    });
-    return {
-      width: Math.max(...tickSizes.map(size => size.width)),
-      height: Math.max(tickSizes.length * tickSizes[0].height)
-    };
-  };
-  if (typeof tickLabelInterval === 'function') {
-    return new Set(xTicks.filter((item, index) => tickLabelInterval(item.value, index)));
-  }
-
-  // Filter label to avoid overlap
-  let previousTextLimit = 0;
-  const direction = reverse ? -1 : 1;
-  return new Set(xTicks.filter((item, labelIndex) => {
-    const {
-      offset,
-      labelOffset
-    } = item;
-    const textPosition = offset + labelOffset;
-    if (labelIndex > 0 && direction * textPosition < direction * (previousTextLimit + tickLabelMinGap)) {
-      return false;
-    }
-    if (!isPointInside(textPosition)) {
-      return false;
-    }
-
-    /* Measuring text width is expensive, so we need to delay it as much as possible to improve performance. */
-    const {
-      width,
-      height
-    } = getTickLabelSize(item);
-    const distance = getMinXTranslation(width, height, style?.angle);
-    const currentTextLimit = textPosition - direction * distance / 2;
-    if (labelIndex > 0 && direction * currentTextLimit < direction * (previousTextLimit + tickLabelMinGap)) {
-      // Except for the first label, we skip all label that overlap with the last accepted.
-      // Notice that the early return prevents `previousTextLimit` from being updated.
-      return false;
-    }
-    previousTextLimit = textPosition + direction * distance / 2;
-    return true;
-  }));
-}
-function shortenLabels(visibleLabels, drawingArea, maxHeight, tickLabelStyle) {
-  const shortenedLabels = new Map();
-  const angle = clampAngle(tickLabelStyle?.angle ?? 0);
-
-  // Multiplying the space available to the left of the text position by leftBoundFactor returns the max width of the text.
-  // Same for rightBoundFactor
-  let leftBoundFactor = 1;
-  let rightBoundFactor = 1;
-  if (tickLabelStyle?.textAnchor === 'start') {
-    leftBoundFactor = Infinity;
-    rightBoundFactor = 1;
-  } else if (tickLabelStyle?.textAnchor === 'end') {
-    leftBoundFactor = 1;
-    rightBoundFactor = Infinity;
-  } else {
-    leftBoundFactor = 2;
-    rightBoundFactor = 2;
-  }
-  if (angle > 90 && angle < 270) {
-    [leftBoundFactor, rightBoundFactor] = [rightBoundFactor, leftBoundFactor];
-  }
-  for (const item of visibleLabels) {
-    if (item.formattedValue) {
-      // That maximum width of the tick depends on its proximity to the axis bounds.
-      const width = Math.min((item.offset + item.labelOffset) * leftBoundFactor, (drawingArea.left + drawingArea.width + drawingArea.right - item.offset - item.labelOffset) * rightBoundFactor);
-      const doesTextFit = text => doesTextFitInRect(text, {
-        width,
-        height: maxHeight,
-        angle,
-        measureText: string => getStringSize(string, tickLabelStyle)
-      });
-      shortenedLabels.set(item, ellipsize(item.formattedValue.toString(), doesTextFit));
-    }
-  }
-  return shortenedLabels;
-}
-const XAxisRoot = styled(AxisRoot, {
-  name: 'MuiChartsXAxis',
-  slot: 'Root',
-  overridesResolver: (props, styles) => styles.root
-})({});
-const defaultProps = {
-  disableLine: false,
-  disableTicks: false,
-  tickSize: 6,
-  tickLabelMinGap: 4
-};
-
-/**
- * Demos:
- *
- * - [Axis](https://mui.com/x/react-charts/axis/)
- *
- * API:
- *
- * - [ChartsXAxis API](https://mui.com/x/api/charts/charts-x-axis/)
- */
-function ChartsXAxis(inProps) {
-  const {
-    xAxis,
-    xAxisIds
-  } = useXAxes();
-  const _xAxis = xAxis[inProps.axisId ?? xAxisIds[0]],
-    {
-      scale: xScale,
-      tickNumber,
-      reverse
-    } = _xAxis,
-    settings = _objectWithoutPropertiesLoose(_xAxis, _excluded);
-  const isMounted = useMounted();
-  const themedProps = useThemeProps({
-    props: _extends({}, settings, inProps),
-    name: 'MuiChartsXAxis'
-  });
-  const defaultizedProps = _extends({}, defaultProps, themedProps);
-  const {
-    position,
-    disableLine,
-    disableTicks,
-    tickLabelStyle,
-    label,
-    labelStyle,
-    tickSize: tickSizeProp,
-    valueFormatter,
-    slots,
-    slotProps,
-    tickInterval,
-    tickLabelInterval,
-    tickPlacement,
-    tickLabelPlacement,
-    tickLabelMinGap,
-    sx,
-    offset,
-    height: axisHeight
-  } = defaultizedProps;
-  const theme = useTheme();
-  const isRtl = useRtl();
-  const classes = useUtilityClasses(defaultizedProps);
-  const drawingArea = useDrawingArea();
-  const {
-    left,
-    top,
-    width,
-    height
-  } = drawingArea;
-  const {
-    instance
-  } = useChartContext();
-  const isHydrated = useIsHydrated();
-  const tickSize = disableTicks ? 4 : tickSizeProp;
-  const positionSign = position === 'bottom' ? 1 : -1;
-  const Line = slots?.axisLine ?? 'line';
-  const Tick = slots?.axisTick ?? 'line';
-  const TickLabel = slots?.axisTickLabel ?? ChartsText;
-  const Label = slots?.axisLabel ?? ChartsText;
-  const defaultTextAnchor = getDefaultTextAnchor((position === 'bottom' ? 0 : 180) - (tickLabelStyle?.angle ?? 0));
-  const defaultDominantBaseline = getDefaultBaseline((position === 'bottom' ? 0 : 180) - (tickLabelStyle?.angle ?? 0));
-  const axisTickLabelProps = useSlotProps({
-    elementType: TickLabel,
-    externalSlotProps: slotProps?.axisTickLabel,
-    additionalProps: {
-      style: _extends({}, theme.typography.caption, {
-        fontSize: 12,
-        lineHeight: 1.25,
-        textAnchor: isRtl ? invertTextAnchor(defaultTextAnchor) : defaultTextAnchor,
-        dominantBaseline: defaultDominantBaseline
-      }, tickLabelStyle)
-    },
-    className: classes.tickLabel,
-    ownerState: {}
-  });
-  const xTicks = useTicks({
-    scale: xScale,
-    tickNumber,
-    valueFormatter,
-    tickInterval,
-    tickPlacement,
-    tickLabelPlacement
-  });
-  const visibleLabels = getVisibleLabels(xTicks, {
-    tickLabelStyle: axisTickLabelProps.style,
-    tickLabelInterval,
-    tickLabelMinGap,
-    reverse,
-    isMounted,
-    isPointInside: x => instance.isPointInside({
-      x,
-      y: -1
-    }, {
-      direction: 'x'
-    })
-  });
-  const axisLabelProps = useSlotProps({
-    elementType: Label,
-    externalSlotProps: slotProps?.axisLabel,
-    additionalProps: {
-      style: _extends({}, 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 ordinalAxis = isBandScale(xScale);
-  // 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 (ordinalAxis && domain.length === 0 || !ordinalAxis && domain.some(isInfinity) || position === 'none') {
-    return null;
-  }
-  const labelHeight = label ? getStringSize(label, axisLabelProps.style).height : 0;
-  const labelRefPoint = {
-    x: left + width / 2,
-    y: positionSign * axisHeight
-  };
-
-  /* If there's an axis title, the tick labels have less space to render  */
-  const tickLabelsMaxHeight = Math.max(0, axisHeight - (label ? labelHeight + AXIS_LABEL_TICK_LABEL_GAP : 0) - tickSize - TICK_LABEL_GAP);
-  const tickLabels = isHydrated ? shortenLabels(visibleLabels, drawingArea, tickLabelsMaxHeight, axisTickLabelProps.style) : new Map(Array.from(visibleLabels).map(item => [item, item.formattedValue]));
-  return /*#__PURE__*/_jsxs(XAxisRoot, {
-    transform: `translate(0, ${position === 'bottom' ? top + height + offset : top - offset})`,
-    className: classes.root,
-    sx: sx,
-    children: [!disableLine && /*#__PURE__*/_jsx(Line, _extends({
-      x1: left,
-      x2: left + width,
-      className: classes.line
-    }, slotProps?.axisLine)), xTicks.map((item, index) => {
-      const {
-        offset: tickOffset,
-        labelOffset
-      } = item;
-      const xTickLabel = labelOffset ?? 0;
-      const yTickLabel = positionSign * (tickSize + TICK_LABEL_GAP);
-      const showTick = instance.isPointInside({
-        x: tickOffset,
-        y: -1
-      }, {
-        direction: 'x'
-      });
-      const tickLabel = tickLabels.get(item);
-      const showTickLabel = visibleLabels.has(item);
-      return /*#__PURE__*/_jsxs("g", {
-        transform: `translate(${tickOffset}, 0)`,
-        className: classes.tickContainer,
-        children: [!disableTicks && showTick && /*#__PURE__*/_jsx(Tick, _extends({
-          y2: positionSign * tickSize,
-          className: classes.tick
-        }, slotProps?.axisTick)), tickLabel !== undefined && showTickLabel && /*#__PURE__*/_jsx(TickLabel, _extends({
-          x: xTickLabel,
-          y: yTickLabel
-        }, axisTickLabelProps, {
-          text: tickLabel
-        }))]
-      }, index);
-    }), label && /*#__PURE__*/_jsx("g", {
-      className: classes.label,
-      children: /*#__PURE__*/_jsx(Label, _extends({}, labelRefPoint, axisLabelProps, {
-        text: label
-      }))
-    })]
-  });
-}
-process.env.NODE_ENV !== "production" ? ChartsXAxis.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
-  // ----------------------------------------------------------------------
-  axis: PropTypes.oneOf(['x']),
-  /**
-   * The id of the axis to render.
-   * If undefined, it will be the first defined axis.
-   */
-  axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes: PropTypes.object,
-  /**
-   * If true, the axis line is disabled.
-   * @default false
-   */
-  disableLine: PropTypes.bool,
-  /**
-   * If true, the ticks are disabled.
-   * @default false
-   */
-  disableTicks: PropTypes.bool,
-  /**
-   * The fill color of the axis text.
-   * @default 'currentColor'
-   */
-  fill: PropTypes.string,
-  /**
-   * The label of the axis.
-   */
-  label: PropTypes.string,
-  /**
-   * The style applied to the axis label.
-   */
-  labelStyle: PropTypes.object,
-  /**
-   * The props used for each component slot.
-   * @default {}
-   */
-  slotProps: PropTypes.object,
-  /**
-   * Overridable component slots.
-   * @default {}
-   */
-  slots: PropTypes.object,
-  /**
-   * The stroke color of the axis line.
-   * @default 'currentColor'
-   */
-  stroke: PropTypes.string,
-  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
-  /**
-   * Defines which ticks are displayed.
-   * Its value can be:
-   * - 'auto' In such case the ticks are computed based on axis scale and other parameters.
-   * - a filtering function of the form `(value, index) => boolean` which is available only if the axis has "point" scale.
-   * - an array containing the values where ticks should be displayed.
-   * @see See {@link https://mui.com/x/react-charts/axis/#fixed-tick-positions}
-   * @default 'auto'
-   */
-  tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
-  /**
-   * Defines which ticks get its label displayed. Its value can be:
-   * - 'auto' In such case, labels are displayed if they do not overlap with the previous one.
-   * - a filtering function of the form (value, index) => boolean. Warning: the index is tick index, not data ones.
-   * @default 'auto'
-   */
-  tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
-  /**
-   * The minimum gap in pixels between two tick labels.
-   * If two tick labels are closer than this minimum gap, one of them will be hidden.
-   * @default 4
-   */
-  tickLabelMinGap: PropTypes.number,
-  /**
-   * The placement of ticks label. Can be the middle of the band, or the tick position.
-   * Only used if scale is 'band'.
-   * @default 'middle'
-   */
-  tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),
-  /**
-   * The style applied to ticks text.
-   */
-  tickLabelStyle: PropTypes.object,
-  /**
-   * Maximal step between two ticks.
-   * When using time data, the value is assumed to be in ms.
-   * Not supported by categorical axis (band, points).
-   */
-  tickMaxStep: PropTypes.number,
-  /**
-   * Minimal step between two ticks.
-   * When using time data, the value is assumed to be in ms.
-   * Not supported by categorical axis (band, points).
-   */
-  tickMinStep: PropTypes.number,
-  /**
-   * The number of ticks. This number is not guaranteed.
-   * Not supported by categorical axis (band, points).
-   */
-  tickNumber: PropTypes.number,
-  /**
-   * The placement of ticks in regard to the band interval.
-   * Only used if scale is 'band'.
-   * @default 'extremities'
-   */
-  tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
-  /**
-   * The size of the ticks.
-   * @default 6
-   */
-  tickSize: PropTypes.number
-} : void 0;
-export { ChartsXAxis };

package/modern/ChartsXAxis/index.d.ts

@@ -1 +0,0 @@
-export * from "./ChartsXAxis.js";

package/modern/ChartsXAxis/index.js

@@ -1 +0,0 @@
-export * from "./ChartsXAxis.js";

package/modern/ChartsYAxis/ChartsYAxis.d.ts

@@ -1,16 +0,0 @@
-import * as React from 'react';
-import { ChartsYAxisProps } from "../models/axis.js";
-/**
- * Demos:
- *
- * - [Axis](https://mui.com/x/react-charts/axis/)
- *
- * API:
- *
- * - [ChartsYAxis API](https://mui.com/x/api/charts/charts-y-axis/)
- */
-declare function ChartsYAxis(inProps: ChartsYAxisProps): React.JSX.Element | null;
-declare namespace ChartsYAxis {
-  var propTypes: any;
-}
-export { ChartsYAxis };