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

package/modern/ChartsSurface/ChartsSurface.js

@@ -1,100 +0,0 @@
-'use client';
-
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["children", "className", "title", "desc"];
-import { styled, useThemeProps } from '@mui/material/styles';
-import PropTypes from 'prop-types';
-import * as React from 'react';
-import useForkRef from '@mui/utils/useForkRef';
-import { ChartsAxesGradients } from "../internals/components/ChartsAxesGradients/index.js";
-import { useSvgRef } from "../hooks/useSvgRef.js";
-import { useSelector } from "../internals/store/useSelector.js";
-import { useStore } from "../internals/store/useStore.js";
-import { selectorChartContainerSize, selectorChartPropsSize } from "../internals/plugins/corePlugins/useChartDimensions/useChartDimensions.selectors.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const ChartsSurfaceStyles = styled('svg', {
-  name: 'MuiChartsSurface',
-  slot: 'Root'
-})(({
-  ownerState
-}) => ({
-  width: ownerState.width ?? '100%',
-  height: ownerState.height ?? '100%',
-  display: 'flex',
-  position: 'relative',
-  flexDirection: 'column',
-  alignItems: 'center',
-  justifyContent: 'center',
-  overflow: 'hidden',
-  // This prevents default touch actions when using the svg on mobile devices.
-  // For example, prevent page scroll & zoom.
-  touchAction: 'none'
-}));
-
-/**
- * It provides the drawing area for the chart elements.
- * It is the root `<svg>` of all the chart elements.
- *
- * It also provides the `title` and `desc` elements for the chart.
- *
- * Demos:
- *
- * - [Composition](https://mui.com/x/api/charts/composition/)
- *
- * API:
- *
- * - [ChartsSurface API](https://mui.com/x/api/charts/charts-surface/)
- */
-const ChartsSurface = /*#__PURE__*/React.forwardRef(function ChartsSurface(inProps, ref) {
-  const store = useStore();
-  const {
-    width: svgWidth,
-    height: svgHeight
-  } = useSelector(store, selectorChartContainerSize);
-  const {
-    width: propsWidth,
-    height: propsHeight
-  } = useSelector(store, selectorChartPropsSize);
-  const svgRef = useSvgRef();
-  const handleRef = useForkRef(svgRef, ref);
-  const themeProps = useThemeProps({
-    props: inProps,
-    name: 'MuiChartsSurface'
-  });
-  const {
-      children,
-      className,
-      title,
-      desc
-    } = themeProps,
-    other = _objectWithoutPropertiesLoose(themeProps, _excluded);
-  const hasIntrinsicSize = svgHeight > 0 && svgWidth > 0;
-  return /*#__PURE__*/_jsxs(ChartsSurfaceStyles, _extends({
-    ownerState: {
-      width: propsWidth,
-      height: propsHeight
-    },
-    viewBox: `${0} ${0} ${svgWidth} ${svgHeight}`,
-    className: className
-  }, other, {
-    ref: handleRef,
-    children: [title && /*#__PURE__*/_jsx("title", {
-      children: title
-    }), desc && /*#__PURE__*/_jsx("desc", {
-      children: desc
-    }), /*#__PURE__*/_jsx(ChartsAxesGradients, {}), hasIntrinsicSize && children]
-  }));
-});
-process.env.NODE_ENV !== "production" ? ChartsSurface.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
-  // ----------------------------------------------------------------------
-  children: PropTypes.node,
-  className: PropTypes.string,
-  desc: PropTypes.string,
-  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
-  title: PropTypes.string
-} : void 0;
-export { ChartsSurface };

package/modern/ChartsSurface/index.d.ts

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

package/modern/ChartsSurface/index.js

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

package/modern/ChartsText/ChartsText.d.ts

@@ -1,17 +0,0 @@
-import * as React from 'react';
-import { GetWordsByLinesParams } from "../internals/getWordsByLines.js";
-export interface ChartsTextProps extends Omit<React.SVGTextElementAttributes<SVGTextElement>, 'width' | 'ref' | 'style' | 'dominantBaseline'>, GetWordsByLinesParams {
-  /**
-   * Height of a text line (in `em`).
-   */
-  lineHeight?: number;
-  ownerState?: any;
-}
-/**
- * Helper component to manage multiline text in SVG
- */
-declare function ChartsText(props: ChartsTextProps): React.JSX.Element;
-declare namespace ChartsText {
-  var propTypes: any;
-}
-export { ChartsText };

package/modern/ChartsText/ChartsText.js

@@ -1,89 +0,0 @@
-'use client';
-
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["x", "y", "style", "text", "ownerState"],
-  _excluded2 = ["angle", "textAnchor", "dominantBaseline"];
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { getWordsByLines } from "../internals/getWordsByLines.js";
-import { useIsHydrated } from "../hooks/useIsHydrated.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * Helper component to manage multiline text in SVG
- */
-function ChartsText(props) {
-  const {
-      x,
-      y,
-      style: styleProps,
-      text
-    } = props,
-    textProps = _objectWithoutPropertiesLoose(props, _excluded);
-  const _ref = styleProps ?? {},
-    {
-      angle,
-      textAnchor,
-      dominantBaseline
-    } = _ref,
-    style = _objectWithoutPropertiesLoose(_ref, _excluded2);
-  const isHydrated = useIsHydrated();
-  const wordsByLines = React.useMemo(() => getWordsByLines({
-    style,
-    needsComputation: isHydrated && text.includes('\n'),
-    text
-  }), [style, text, isHydrated]);
-  let startDy;
-  switch (dominantBaseline) {
-    case 'hanging':
-    case 'text-before-edge':
-      startDy = 0;
-      break;
-    case 'central':
-      startDy = (wordsByLines.length - 1) / 2 * -wordsByLines[0].height;
-      break;
-    default:
-      startDy = (wordsByLines.length - 1) * -wordsByLines[0].height;
-      break;
-  }
-  return /*#__PURE__*/_jsx("text", _extends({}, textProps, {
-    transform: angle ? `rotate(${angle}, ${x}, ${y})` : undefined,
-    x: x,
-    y: y,
-    textAnchor: textAnchor,
-    dominantBaseline: dominantBaseline,
-    style: style,
-    children: wordsByLines.map((line, index) => /*#__PURE__*/_jsx("tspan", {
-      x: x,
-      dy: `${index === 0 ? startDy : wordsByLines[0].height}px`,
-      dominantBaseline: dominantBaseline // Propagated to fix Safari issue: https://github.com/mui/mui-x/issues/10808
-      ,
-      children: line.text
-    }, index))
-  }));
-}
-process.env.NODE_ENV !== "production" ? ChartsText.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
-  // ----------------------------------------------------------------------
-  /**
-   * Height of a text line (in `em`).
-   */
-  lineHeight: PropTypes.number,
-  /**
-   * If `true`, the line width is computed.
-   * @default false
-   */
-  needsComputation: PropTypes.bool,
-  ownerState: PropTypes.any,
-  /**
-   * Style applied to text elements.
-   */
-  style: PropTypes.object,
-  /**
-   * Text displayed.
-   */
-  text: PropTypes.string.isRequired
-} : void 0;
-export { ChartsText };

package/modern/ChartsText/defaultTextPlacement.d.ts

@@ -1,9 +0,0 @@
-import { ChartsTextStyle } from "../internals/getWordsByLines.js";
-/**
- * Provide the text-anchor based on the angle between the text and the associated element.
- * - 0 means the element is on top of the text, 180 bellow, and 90 on the right of the text.
- * @param {number} angle The angle between the text and the element.
- * @returns
- */
-export declare function getDefaultTextAnchor(angle: number): ChartsTextStyle['textAnchor'];
-export declare function getDefaultBaseline(angle: number): ChartsTextStyle['dominantBaseline'];

package/modern/ChartsText/defaultTextPlacement.js

@@ -1,34 +0,0 @@
-import { clampAngle } from "../internals/clampAngle.js";
-/**
- * Provide the text-anchor based on the angle between the text and the associated element.
- * - 0 means the element is on top of the text, 180 bellow, and 90 on the right of the text.
- * @param {number} angle The angle between the text and the element.
- * @returns
- */
-export function getDefaultTextAnchor(angle) {
-  const adjustedAngle = clampAngle(angle);
-  if (adjustedAngle <= 30 || adjustedAngle >= 330) {
-    // +/-30° around 0°
-    return 'middle';
-  }
-  if (adjustedAngle <= 210 && adjustedAngle >= 150) {
-    // +/-30° around 180°
-    return 'middle';
-  }
-  if (adjustedAngle <= 180) {
-    return 'end';
-  }
-  return 'start';
-}
-export function getDefaultBaseline(angle) {
-  const adjustedAngle = clampAngle(angle);
-  if (adjustedAngle <= 30 || adjustedAngle >= 330) {
-    // +/-60° around 0°
-    return 'hanging';
-  }
-  if (adjustedAngle <= 210 && adjustedAngle >= 150) {
-    // +/-60° around 180°
-    return 'auto';
-  }
-  return 'central';
-}

package/modern/ChartsText/index.d.ts

@@ -1,3 +0,0 @@
-export { ChartsText } from "./ChartsText.js";
-export type { ChartsTextProps } from './ChartsText';
-export type { ChartsTextStyle } from '../internals/getWordsByLines';

package/modern/ChartsText/index.js

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

package/modern/ChartsTooltip/ChartTooltip.types.d.ts

@@ -1,15 +0,0 @@
-import { ChartsTooltipProps } from "./ChartsTooltip.js";
-export interface ChartsTooltipSlots {
-  /**
-   * Custom component for the tooltip popper.
-   * @default ChartsTooltipRoot
-   */
-  tooltip?: React.ElementType<ChartsTooltipProps>;
-}
-export interface ChartsTooltipSlotProps {
-  /**
-   * Custom component for the tooltip popper.
-   * @default ChartsTooltipRoot
-   */
-  tooltip?: Partial<ChartsTooltipProps>;
-}

package/modern/ChartsTooltip/ChartTooltip.types.js

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

package/modern/ChartsTooltip/ChartsAxisTooltipContent.d.ts

@@ -1,15 +0,0 @@
-import * as React from 'react';
-import { SxProps, Theme } from '@mui/material/styles';
-import { ChartsTooltipClasses } from "./chartsTooltipClasses.js";
-export interface ChartsAxisTooltipContentProps {
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes?: Partial<ChartsTooltipClasses>;
-  sx?: SxProps<Theme>;
-}
-declare function ChartsAxisTooltipContent(props: ChartsAxisTooltipContentProps): React.JSX.Element | null;
-declare namespace ChartsAxisTooltipContent {
-  var propTypes: any;
-}
-export { ChartsAxisTooltipContent };

package/modern/ChartsTooltip/ChartsAxisTooltipContent.js

@@ -1,88 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import Typography from '@mui/material/Typography';
-import clsx from 'clsx';
-import { useUtilityClasses } from "./chartsTooltipClasses.js";
-import { ChartsTooltipCell, ChartsTooltipPaper, ChartsTooltipRow, ChartsTooltipTable } from "./ChartsTooltipTable.js";
-import { useAxesTooltip } from "./useAxesTooltip.js";
-import { useXAxis, useYAxis } from "../hooks/index.js";
-import { ChartsLabelMark } from "../ChartsLabel/ChartsLabelMark.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function ChartsAxisTooltipContent(props) {
-  const {
-    classes: propClasses,
-    sx
-  } = props;
-  const tooltipData = useAxesTooltip();
-  const xAxis = useXAxis();
-  const yAxis = useYAxis();
-  const classes = useUtilityClasses(propClasses);
-  if (tooltipData === null) {
-    return null;
-  }
-  return /*#__PURE__*/_jsx(ChartsTooltipPaper, {
-    sx: sx,
-    className: classes.paper,
-    children: tooltipData.map(({
-      axisId,
-      axisDirection,
-      axisValue,
-      axisFormattedValue,
-      seriesItems
-    }) => {
-      const axis = axisDirection === 'x' ? xAxis : yAxis;
-      return /*#__PURE__*/_jsxs(ChartsTooltipTable, {
-        className: classes.table,
-        children: [axisValue != null && !axis.hideTooltip && /*#__PURE__*/_jsx(Typography, {
-          component: "caption",
-          children: axisFormattedValue
-        }), /*#__PURE__*/_jsx("tbody", {
-          children: seriesItems.map(({
-            seriesId,
-            color,
-            formattedValue,
-            formattedLabel,
-            markType
-          }) => {
-            if (formattedValue == null) {
-              return null;
-            }
-            return /*#__PURE__*/_jsxs(ChartsTooltipRow, {
-              className: classes.row,
-              children: [/*#__PURE__*/_jsxs(ChartsTooltipCell, {
-                className: clsx(classes.labelCell, classes.cell),
-                component: "th",
-                children: [/*#__PURE__*/_jsx("div", {
-                  className: classes.markContainer,
-                  children: /*#__PURE__*/_jsx(ChartsLabelMark, {
-                    type: markType,
-                    color: color,
-                    className: classes.mark
-                  })
-                }), formattedLabel || null]
-              }), /*#__PURE__*/_jsx(ChartsTooltipCell, {
-                className: clsx(classes.valueCell, classes.cell),
-                component: "td",
-                children: formattedValue
-              })]
-            }, seriesId);
-          })
-        })]
-      }, axisId);
-    })
-  });
-}
-process.env.NODE_ENV !== "production" ? ChartsAxisTooltipContent.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,
-  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
-} : void 0;
-export { ChartsAxisTooltipContent };

package/modern/ChartsTooltip/ChartsItemTooltipContent.d.ts

@@ -1,15 +0,0 @@
-import * as React from 'react';
-import { SxProps, Theme } from '@mui/material/styles';
-import { ChartsTooltipClasses } from "./chartsTooltipClasses.js";
-export interface ChartsItemTooltipContentProps {
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes?: Partial<ChartsTooltipClasses>;
-  sx?: SxProps<Theme>;
-}
-declare function ChartsItemTooltipContent(props: ChartsItemTooltipContentProps): React.JSX.Element | null;
-declare namespace ChartsItemTooltipContent {
-  var propTypes: any;
-}
-export { ChartsItemTooltipContent };

package/modern/ChartsTooltip/ChartsItemTooltipContent.js

@@ -1,67 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import clsx from 'clsx';
-import { useUtilityClasses } from "./chartsTooltipClasses.js";
-import { useItemTooltip } from "./useItemTooltip.js";
-import { ChartsTooltipCell, ChartsTooltipPaper, ChartsTooltipRow, ChartsTooltipTable } from "./ChartsTooltipTable.js";
-import { ChartsLabelMark } from "../ChartsLabel/ChartsLabelMark.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function ChartsItemTooltipContent(props) {
-  const {
-    classes: propClasses,
-    sx
-  } = props;
-  const tooltipData = useItemTooltip();
-  const classes = useUtilityClasses(propClasses);
-  if (!tooltipData) {
-    return null;
-  }
-  const {
-    color,
-    label,
-    formattedValue,
-    markType
-  } = tooltipData;
-  return /*#__PURE__*/_jsx(ChartsTooltipPaper, {
-    sx: sx,
-    className: classes.paper,
-    children: /*#__PURE__*/_jsx(ChartsTooltipTable, {
-      className: classes.table,
-      children: /*#__PURE__*/_jsx("tbody", {
-        children: /*#__PURE__*/_jsxs(ChartsTooltipRow, {
-          className: classes.row,
-          children: [/*#__PURE__*/_jsxs(ChartsTooltipCell, {
-            className: clsx(classes.labelCell, classes.cell),
-            component: "th",
-            children: [/*#__PURE__*/_jsx("div", {
-              className: classes.markContainer,
-              children: /*#__PURE__*/_jsx(ChartsLabelMark, {
-                type: markType,
-                color: color,
-                className: classes.mark
-              })
-            }), label]
-          }), /*#__PURE__*/_jsx(ChartsTooltipCell, {
-            className: clsx(classes.valueCell, classes.cell),
-            component: "td",
-            children: formattedValue
-          })]
-        })
-      })
-    })
-  });
-}
-process.env.NODE_ENV !== "production" ? ChartsItemTooltipContent.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,
-  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
-} : void 0;
-export { ChartsItemTooltipContent };

package/modern/ChartsTooltip/ChartsTooltip.d.ts

@@ -1,17 +0,0 @@
-import * as React from 'react';
-import { ChartsTooltipContainerProps } from "./ChartsTooltipContainer.js";
-export interface ChartsTooltipProps extends Omit<ChartsTooltipContainerProps, 'children'> {}
-/**
- * Demos:
- *
- * - [ChartsTooltip](https://mui.com/x/react-charts/tooltip/)
- *
- * API:
- *
- * - [ChartsTooltip API](https://mui.com/x/api/charts/charts-tool-tip/)
- */
-declare function ChartsTooltip(props: ChartsTooltipProps): React.JSX.Element;
-declare namespace ChartsTooltip {
-  var propTypes: any;
-}
-export { ChartsTooltip };