@mui/x-charts 8.0.0-alpha.11 → 8.0.0-alpha.13

package/modern/ChartsOverlay/ChartsLoadingOverlay.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import type { CommonOverlayProps } from './ChartsOverlay';
+export declare function ChartsLoadingOverlay(props: CommonOverlayProps): React.JSX.Element;

package/modern/ChartsOverlay/ChartsNoDataOverlay.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import type { CommonOverlayProps } from './ChartsOverlay';
+export declare function ChartsNoDataOverlay(props: CommonOverlayProps): React.JSX.Element;

package/modern/ChartsOverlay/ChartsOverlay.d.ts

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { SxProps, Theme } from '@mui/material/styles';
+import { SlotComponentPropsFromProps } from '@mui/x-internals/types';
+export declare function useNoData(): boolean;
+export type CommonOverlayProps = React.SVGAttributes<SVGTextElement> & {
+  /**
+   * The message displayed by the overlay.
+   */
+  message?: string;
+  sx?: SxProps<Theme>;
+};
+export interface ChartsOverlaySlots {
+  /**
+   * Overlay component rendered when the chart is in a loading state.
+   * @default ChartsLoadingOverlay
+   */
+  loadingOverlay?: React.ElementType<CommonOverlayProps>;
+  /**
+   * Overlay component rendered when the chart has no data to display.
+   * @default ChartsNoDataOverlay
+   */
+  noDataOverlay?: React.ElementType<CommonOverlayProps>;
+}
+export interface ChartsOverlaySlotProps {
+  loadingOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+  noDataOverlay?: SlotComponentPropsFromProps<CommonOverlayProps, {}, {}>;
+}
+export interface ChartsOverlayProps {
+  /**
+   * If `true`, a loading overlay is displayed.
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: ChartsOverlaySlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: ChartsOverlaySlotProps;
+}
+export declare function ChartsOverlay(props: ChartsOverlayProps): React.JSX.Element | null;

package/modern/ChartsOverlay/index.d.ts

@@ -0,0 +1,4 @@
+export { ChartsOverlay } from "./ChartsOverlay.js";
+export type { ChartsOverlayProps, ChartsOverlaySlotProps, ChartsOverlaySlots } from './ChartsOverlay';
+export { ChartsLoadingOverlay } from "./ChartsLoadingOverlay.js";
+export { ChartsNoDataOverlay } from "./ChartsNoDataOverlay.js";

package/modern/ChartsReferenceLine/ChartsReferenceLine.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { ChartsXReferenceLineProps } from "./ChartsXReferenceLine.js";
+import { ChartsYReferenceLineProps } from "./ChartsYReferenceLine.js";
+import { XOR } from "../internals/ts-generic.js";
+type ChartsReferenceLineProps<TValue extends string | number | Date = string | number | Date> = XOR<ChartsXReferenceLineProps<TValue>, ChartsYReferenceLineProps<TValue>>;
+declare function ChartsReferenceLine(props: ChartsReferenceLineProps): React.JSX.Element;
+declare namespace ChartsReferenceLine {
+  var propTypes: any;
+}
+export { ChartsReferenceLine };

package/modern/ChartsReferenceLine/ChartsXReferenceLine.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { CommonChartsReferenceLineProps } from "./common.js";
+import { ChartsReferenceLineClasses } from "./chartsReferenceLineClasses.js";
+export type ChartsXReferenceLineProps<TValue extends string | number | Date = string | number | Date> = CommonChartsReferenceLineProps & {
+  /**
+   * The x value associated with the reference line.
+   * If defined the reference line will be vertical.
+   */
+  x: TValue;
+};
+export declare function getXReferenceLineClasses(classes?: Partial<ChartsReferenceLineClasses>): Record<"root" | "line" | "label", string>;
+declare function ChartsXReferenceLine(props: ChartsXReferenceLineProps): React.JSX.Element | null;
+export { ChartsXReferenceLine };

package/modern/ChartsReferenceLine/ChartsYReferenceLine.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { CommonChartsReferenceLineProps } from "./common.js";
+import { ChartsReferenceLineClasses } from "./chartsReferenceLineClasses.js";
+export type ChartsYReferenceLineProps<TValue extends string | number | Date = string | number | Date> = CommonChartsReferenceLineProps & {
+  /**
+   * The y value associated with the reference line.
+   * If defined the reference line will be horizontal.
+   */
+  y: TValue;
+};
+export declare function getYReferenceLineClasses(classes?: Partial<ChartsReferenceLineClasses>): Record<"root" | "line" | "label", string>;
+declare function ChartsYReferenceLine(props: ChartsYReferenceLineProps): React.JSX.Element | null;
+export { ChartsYReferenceLine };

package/modern/ChartsReferenceLine/chartsReferenceLineClasses.d.ts

@@ -0,0 +1,15 @@
+export interface ChartsReferenceLineClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the root element if the reference line is vertical. */
+  vertical: string;
+  /** Styles applied to the root element if the reference line is horizontal. */
+  horizontal: string;
+  /** Styles applied to the reference line. */
+  line: string;
+  /** Styles applied to the reference label. */
+  label: string;
+}
+export type ChartsReferenceLineClassKey = keyof ChartsReferenceLineClasses;
+export declare function getReferenceLineUtilityClass(slot: string): string;
+export declare const referenceLineClasses: ChartsReferenceLineClasses;

package/modern/ChartsReferenceLine/common.d.ts

@@ -0,0 +1,41 @@
+import { ChartsReferenceLineClasses } from "./chartsReferenceLineClasses.js";
+import { ChartsTextStyle } from "../ChartsText/index.js";
+import { AxisId } from "../models/axis.js";
+export type CommonChartsReferenceLineProps = {
+  /**
+   * The alignment if the label is in the chart drawing area.
+   * @default 'middle'
+   */
+  labelAlign?: 'start' | 'middle' | 'end';
+  /**
+   * The label to display along the reference line.
+   */
+  label?: string;
+  /**
+   * 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?: number | {
+    x?: number;
+    y?: number;
+  };
+  /**
+   * The id of the axis used for the reference value.
+   * @default The `id` of the first defined axis.
+   */
+  axisId?: AxisId;
+  /**
+   * The style applied to the label.
+   */
+  labelStyle?: ChartsTextStyle;
+  /**
+   * The style applied to the line.
+   */
+  lineStyle?: React.CSSProperties;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<ChartsReferenceLineClasses>;
+};
+export declare const ReferenceLineRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").SVGProps<SVGGElement>, {}>;

package/modern/ChartsReferenceLine/index.d.ts

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

package/modern/ChartsSurface/ChartsSurface.d.ts

@@ -0,0 +1,25 @@
+import { SxProps, Theme } from '@mui/material/styles';
+import * as React from 'react';
+export interface ChartsSurfaceProps {
+  className?: string;
+  title?: string;
+  desc?: string;
+  sx?: SxProps<Theme>;
+  children?: React.ReactNode;
+}
+/**
+ * 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/)
+ */
+declare const ChartsSurface: React.ForwardRefExoticComponent<ChartsSurfaceProps & React.RefAttributes<SVGSVGElement>>;
+export { ChartsSurface };

package/modern/ChartsSurface/index.d.ts

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

package/modern/ChartsText/ChartsText.d.ts

@@ -0,0 +1,17 @@
+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/index.d.ts

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

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

@@ -0,0 +1,15 @@
+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/ChartsAxisTooltipContent.d.ts

@@ -0,0 +1,15 @@
+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/ChartsItemTooltipContent.d.ts

@@ -0,0 +1,15 @@
+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/ChartsTooltip.d.ts

@@ -0,0 +1,17 @@
+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 };

package/modern/ChartsTooltip/ChartsTooltipContainer.d.ts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { PopperProps } from '@mui/material/Popper';
+import { TriggerOptions } from "./utils.js";
+import { ChartsTooltipClasses } from "./chartsTooltipClasses.js";
+export interface ChartsTooltipContainerProps extends Partial<PopperProps> {
+  /**
+   * 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 'axis'
+   */
+  trigger?: TriggerOptions;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<ChartsTooltipClasses>;
+  children?: React.ReactNode;
+}
+/**
+ * Demos:
+ *
+ * - [ChartsTooltip](https://mui.com/x/react-charts/tooltip/)
+ *
+ * API:
+ *
+ * - [ChartsTooltip API](https://mui.com/x/api/charts/charts-tool-tip/)
+ */
+declare function ChartsTooltipContainer(inProps: ChartsTooltipContainerProps): React.JSX.Element | null;
+declare namespace ChartsTooltipContainer {
+  var propTypes: any;
+}
+export { ChartsTooltipContainer };

package/modern/ChartsTooltip/ChartsTooltipContainer.js

@@ -81,6 +81,34 @@ function ChartsTooltipContainer(inProps) {
       element.removeEventListener('pointermove', handleMove);
     };
   }, [svgRef, positionRef]);
+  const anchorEl = React.useMemo(() => ({
+    getBoundingClientRect: () => ({
+      x: positionRef.current.x,
+      y: positionRef.current.y,
+      top: positionRef.current.y,
+      left: positionRef.current.x,
+      right: positionRef.current.x,
+      bottom: positionRef.current.y,
+      width: 0,
+      height: 0,
+      toJSON: () => ''
+    })
+  }), [positionRef]);
+  const modifiers = React.useMemo(() => [{
+    name: 'offset',
+    options: {
+      offset: ({
+        placement
+      }) => {
+        if (pointerType?.pointerType !== 'touch') {
+          return [0, 0];
+        }
+        const isBottom = placement.startsWith('bottom');
+        const placementOffset = isBottom ? 32 : 8;
+        return [0, pointerType.height + placementOffset];
+      }
+    }
+  }], [pointerType]);
   if (trigger === 'none') {
     return null;
   }
@@ -90,25 +118,8 @@ function ChartsTooltipContainer(inProps) {
       open: popperOpen,
       placement: pointerType?.pointerType === 'mouse' ? 'right-start' : 'top',
       popperRef: popperRef,
-      anchorEl: {
-        getBoundingClientRect: () => ({
-          x: positionRef.current.x,
-          y: positionRef.current.y,
-          top: positionRef.current.y,
-          left: positionRef.current.x,
-          right: positionRef.current.x,
-          bottom: positionRef.current.y,
-          width: 0,
-          height: 0,
-          toJSON: () => ''
-        })
-      },
-      modifiers: [{
-        name: 'offset',
-        options: {
-          offset: [0, pointerType?.pointerType === 'touch' ? 40 - pointerType.height : 0]
-        }
-      }]
+      anchorEl: anchorEl,
+      modifiers: modifiers
     }, other, {
       children: children
     }))

package/modern/ChartsTooltip/ChartsTooltipTable.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @ignore - internal component.
+ */
+export declare const ChartsTooltipPaper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("react").ClassAttributes<HTMLDivElement> | keyof import("react").HTMLAttributes<HTMLDivElement>>, {}>;
+/**
+ * @ignore - internal component.
+ */
+export declare const ChartsTooltipTable: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, Pick<import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, keyof import("react").ClassAttributes<HTMLTableElement> | keyof import("react").TableHTMLAttributes<HTMLTableElement>>, {}>;
+/**
+ * @ignore - internal component.
+ */
+export declare const ChartsTooltipRow: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, keyof import("react").ClassAttributes<HTMLTableRowElement> | keyof import("react").HTMLAttributes<HTMLTableRowElement>>, {}>;
+/**
+ * @ignore - internal component.
+ */
+export declare const ChartsTooltipCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, Pick<import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, keyof import("react").ClassAttributes<HTMLTableDataCellElement> | keyof import("react").TdHTMLAttributes<HTMLTableDataCellElement>>, {}>;

package/modern/ChartsTooltip/ChartsTooltipTable.js

@@ -13,7 +13,7 @@ export const ChartsTooltipPaper = styled('div', {
 }) => ({
   backgroundColor: (theme.vars || theme).palette.background.paper,
   color: (theme.vars || theme).palette.text.primary,
-  borderRadius: theme.shape.borderRadius,
+  borderRadius: (theme.vars || theme).shape?.borderRadius,
   border: `solid ${(theme.vars || theme).palette.divider} 1px`
 }));
 

package/modern/ChartsTooltip/chartsTooltipClasses.d.ts

@@ -0,0 +1,26 @@
+export interface ChartsTooltipClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the paper element. */
+  paper: string;
+  /** Styles applied to the table element. */
+  table: string;
+  /** Styles applied to the row element. */
+  row: string;
+  /** Styles applied to the cell element. */
+  cell: string;
+  /** Styles applied to the mark element. */
+  mark: string;
+  /** Styles applied to the markCell element. */
+  markCell: string;
+  /** Styles applied to the labelCell element. */
+  labelCell: string;
+  /** Styles applied to the valueCell element. */
+  valueCell: string;
+  /** Styles applied to the axisValueCell element. Only available for axis tooltip. */
+  axisValueCell: string;
+}
+export type ChartsTooltipClassKey = keyof Omit<ChartsTooltipClasses, 'markCell' | 'labelCell' | 'valueCell'>;
+export declare function getChartsTooltipUtilityClass(slot: string): string;
+export declare const chartsTooltipClasses: ChartsTooltipClasses;
+export declare const useUtilityClasses: (classes?: Partial<ChartsTooltipClasses>) => Record<"root" | "mark" | "table" | "cell" | "row" | "markCell" | "labelCell" | "valueCell" | "paper" | "axisValueCell", string>;

package/modern/ChartsTooltip/index.d.ts

@@ -0,0 +1,11 @@
+export * from "./ChartsTooltip.js";
+export * from "./ChartsTooltipContainer.js";
+export type { ChartsTooltipClasses, ChartsTooltipClassKey } from './chartsTooltipClasses';
+export { getChartsTooltipUtilityClass, chartsTooltipClasses } from "./chartsTooltipClasses.js";
+export * from "./ChartsAxisTooltipContent.js";
+export * from "./ChartsItemTooltipContent.js";
+export * from "./ChartsTooltipTable.js";
+export * from "./useItemTooltip.js";
+export * from "./useAxisTooltip.js";
+export { useMouseTracker } from "./utils.js";
+export * from "./ChartTooltip.types.js";

package/modern/ChartsTooltip/useAxisTooltip.d.ts

@@ -0,0 +1,20 @@
+import { SeriesId } from "../models/seriesType/common.js";
+import { CartesianChartSeriesType, ChartsSeriesConfig } from "../models/seriesType/config.js";
+import { ChartsLabelMarkProps } from "../ChartsLabel/index.js";
+export interface UseAxisTooltipReturnValue<SeriesT extends CartesianChartSeriesType = CartesianChartSeriesType, AxisValueT extends string | number | Date = string | number | Date> {
+  axisDirection: 'x' | 'y';
+  dataIndex: number;
+  seriesItems: SeriesItem<SeriesT>[];
+  axisValue: AxisValueT;
+  axisFormattedValue: string;
+}
+interface SeriesItem<T extends CartesianChartSeriesType> {
+  seriesId: SeriesId;
+  color: string;
+  value: ChartsSeriesConfig[T]['valueType'];
+  formattedValue: string;
+  formattedLabel: string | null;
+  markType: ChartsLabelMarkProps['type'];
+}
+export declare function useAxisTooltip(): UseAxisTooltipReturnValue | null;
+export {};

package/modern/ChartsTooltip/useAxisTooltip.js

@@ -75,7 +75,8 @@ export function useAxisTooltip() {
   });
   const axisFormatter = usedAxis.valueFormatter ?? (v => usedAxis.scaleType === 'utc' ? utcFormatter(v) : v.toLocaleString());
   const axisFormattedValue = axisFormatter(axisValue, {
-    location: 'tooltip'
+    location: 'tooltip',
+    scale: usedAxis.scale
   });
   return {
     axisDirection: xAxisHasData ? 'x' : 'y',

package/modern/ChartsTooltip/useItemTooltip.d.ts

@@ -0,0 +1,12 @@
+import { ChartItemIdentifier, ChartSeriesType, ChartsSeriesConfig } from "../models/seriesType/config.js";
+import { ChartsLabelMarkProps } from "../ChartsLabel/index.js";
+export interface ItemTooltip<T extends ChartSeriesType> {
+  identifier: ChartItemIdentifier<T>;
+  color: string;
+  label: string | undefined;
+  value: ChartsSeriesConfig[T]['valueType'];
+  formattedValue: string | null;
+  markType: ChartsLabelMarkProps['type'];
+}
+export type UseItemTooltipReturnValue<T extends ChartSeriesType> = ItemTooltip<T>;
+export declare function useItemTooltip<T extends ChartSeriesType>(): UseItemTooltipReturnValue<T> | null;

package/modern/ChartsTooltip/utils.d.ts

@@ -0,0 +1,16 @@
+type MousePosition = {
+  x: number;
+  y: number;
+  pointerType: 'mouse' | 'touch' | 'pen';
+  height: number;
+};
+export type UseMouseTrackerReturnValue = null | MousePosition;
+/**
+ * @deprecated We recommend using vanilla JS to let popper track mouse position.
+ */
+export declare function useMouseTracker(): UseMouseTrackerReturnValue;
+type PointerType = Pick<MousePosition, 'height' | 'pointerType'>;
+export declare function usePointerType(): null | PointerType;
+export type TriggerOptions = 'item' | 'axis' | 'none';
+export declare function utcFormatter(v: string | number | Date): string;
+export {};

package/modern/ChartsXAxis/ChartsXAxis.d.ts

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