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

package/modern/ChartsGrid/ChartsVerticalGrid.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { AxisDefaultized, ChartsXAxisProps, ScaleName } from "../models/axis.js";
+import { ChartsGridClasses } from "./chartsGridClasses.js";
+interface ChartsGridVerticalProps {
+  axis: AxisDefaultized<ScaleName, any, ChartsXAxisProps>;
+  start: number;
+  end: number;
+  classes: Partial<ChartsGridClasses>;
+}
+/**
+ * @ignore - internal component.
+ */
+export declare function ChartsGridVertical(props: ChartsGridVerticalProps): React.JSX.Element;
+export {};

package/modern/ChartsGrid/chartsGridClasses.d.ts

@@ -0,0 +1,13 @@
+export interface ChartsGridClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to every line element. */
+  line: string;
+  /** Styles applied to x-axes. */
+  horizontalLine: string;
+  /** Styles applied to y-axes. */
+  verticalLine: string;
+}
+export type ChartsGridClassKey = keyof ChartsGridClasses;
+export declare function getChartsGridUtilityClass(slot: string): string;
+export declare const chartsGridClasses: ChartsGridClasses;

package/modern/ChartsGrid/index.d.ts

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

package/modern/ChartsGrid/styledComponents.d.ts

@@ -0,0 +1,2 @@
+export declare const GridRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, Pick<import("react").SVGProps<SVGGElement>, keyof import("react").SVGProps<SVGGElement>>, {}>;
+export declare const GridLine: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, Pick<import("react").SVGLineElementAttributes<SVGLineElement>, keyof import("react").SVGLineElementAttributes<SVGLineElement>>, {}>;

package/modern/ChartsLabel/ChartsLabel.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { SxProps, Theme } from '@mui/material/styles';
+import { ChartsLabelClasses } from "./labelClasses.js";
+export interface ChartsLabelProps {
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<ChartsLabelClasses>;
+  children?: React.ReactNode;
+  className?: string;
+  sx?: SxProps<Theme>;
+}
+/**
+ * Generates the label mark for the tooltip and legend.
+ * @ignore - internal component.
+ */
+declare const ChartsLabel: React.ForwardRefExoticComponent<ChartsLabelProps & React.RefAttributes<{}>>;
+export { ChartsLabel };

package/modern/ChartsLabel/ChartsLabelGradient.d.ts

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { SxProps, Theme } from '@mui/material/styles';
+import { ChartsLabelGradientClasses } from "./labelGradientClasses.js";
+export interface ChartsLabelGradientProps {
+  /**
+   * A unique identifier for the gradient.
+   * The `gradientId` will be used as `fill="url(#gradientId)"`.
+   */
+  gradientId: string;
+  /**
+   * The direction of the gradient.
+   * @default 'horizontal'
+   */
+  direction?: 'vertical' | 'horizontal';
+  /**
+   * If `true`, the gradient will be reversed.
+   */
+  reverse?: boolean;
+  /**
+   * If provided, the gradient will be rotated by 90deg.
+   * Useful for linear gradients that are not in the correct orientation.
+   */
+  rotate?: boolean;
+  /**
+   * The thickness of the gradient
+   * @default 12
+   */
+  thickness?: number;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<ChartsLabelGradientClasses>;
+  className?: string;
+  sx?: SxProps<Theme>;
+}
+/**
+ * Generates the label Gradient for the tooltip and legend.
+ * @ignore - internal component.
+ */
+declare const ChartsLabelGradient: React.ForwardRefExoticComponent<ChartsLabelGradientProps & React.RefAttributes<{}>>;
+export { ChartsLabelGradient };

package/modern/ChartsLabel/ChartsLabelMark.d.ts

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { SxProps, Theme } from '@mui/material/styles';
+import { ChartsLabelMarkClasses } from "./labelMarkClasses.js";
+export interface ChartsLabelCustomMarkProps {
+  className?: string;
+  /** Color of the series this mark refers to. */
+  color?: string;
+}
+export interface ChartsLabelMarkProps {
+  /**
+   * The type of the mark.
+   * @default 'square'
+   */
+  type?: 'square' | 'circle' | 'line' | React.ComponentType<ChartsLabelCustomMarkProps>;
+  /**
+   * The color of the mark.
+   */
+  color?: string;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<ChartsLabelMarkClasses>;
+  className?: string;
+  sx?: SxProps<Theme>;
+}
+/**
+ * Generates the label mark for the tooltip and legend.
+ * @ignore - internal component.
+ */
+declare const ChartsLabelMark: React.ForwardRefExoticComponent<ChartsLabelMarkProps & React.RefAttributes<{}>>;
+export { ChartsLabelMark };

package/modern/ChartsLabel/ChartsLabelMark.js

@@ -20,8 +20,11 @@ const Root = styled('div', {
     alignItems: 'center',
     justifyContent: 'center',
     flexShrink: 0,
+    width: 14,
+    height: 14,
     [`&.${labelMarkClasses.line}`]: {
       width: 16,
+      height: 'unset',
       display: 'flex',
       alignItems: 'center',
       [`.${labelMarkClasses.mask}`]: {
@@ -44,7 +47,13 @@ const Root = styled('div', {
       overflow: 'hidden'
     },
     svg: {
-      display: 'block',
+      display: 'block'
+    },
+    [`& .${labelMarkClasses.mask} > *`]: {
+      height: '100%',
+      width: '100%'
+    },
+    [`& .${labelMarkClasses.mask}`]: {
       height: '100%',
       width: '100%'
     }
@@ -68,6 +77,7 @@ const ChartsLabelMark = consumeThemeProps('MuiChartsLabelMark', {
       classes
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
+  const Component = type;
   return /*#__PURE__*/_jsx(Root, _extends({
     className: clsx(classes?.root, className),
     ownerState: props,
@@ -76,7 +86,10 @@ const ChartsLabelMark = consumeThemeProps('MuiChartsLabelMark', {
   }, other, {
     children: /*#__PURE__*/_jsx("div", {
       className: classes?.mask,
-      children: /*#__PURE__*/_jsx("svg", {
+      children: typeof Component === 'function' ? /*#__PURE__*/_jsx(Component, {
+        className: classes?.fill,
+        color: color
+      }) : /*#__PURE__*/_jsx("svg", {
         viewBox: "0 0 24 24",
         preserveAspectRatio: type === 'line' ? 'none' : undefined,
         children: /*#__PURE__*/_jsx("rect", {

package/modern/ChartsLabel/index.d.ts

@@ -0,0 +1,7 @@
+export type { ChartsLabelMarkProps, ChartsLabelCustomMarkProps } from './ChartsLabelMark';
+export { labelClasses } from "./labelClasses.js";
+export type { ChartsLabelClasses } from './labelClasses';
+export { labelMarkClasses } from "./labelMarkClasses.js";
+export type { ChartsLabelMarkClasses } from './labelMarkClasses';
+export { labelGradientClasses } from "./labelGradientClasses.js";
+export type { ChartsLabelGradientClasses } from './labelGradientClasses';

package/modern/ChartsLabel/index.js

@@ -1,6 +1,3 @@
-// export * from './ChartsLabel';
-
-// export * from './ChartsLabelGradient';
 export { labelClasses } from "./labelClasses.js";
 export { labelMarkClasses } from "./labelMarkClasses.js";
 export { labelGradientClasses } from "./labelGradientClasses.js";

package/modern/ChartsLabel/labelClasses.d.ts

@@ -0,0 +1,8 @@
+import type { ChartsLabelProps } from './ChartsLabel';
+export interface ChartsLabelClasses {
+  /** Styles applied to the root element. */
+  root: string;
+}
+export declare function getLabelUtilityClass(slot: string): string;
+export declare const labelClasses: ChartsLabelClasses;
+export declare const useUtilityClasses: (props: ChartsLabelProps) => Record<"root", string>;

package/modern/ChartsLabel/labelGradientClasses.d.ts

@@ -0,0 +1,16 @@
+import type { ChartsLabelGradientProps } from './ChartsLabelGradient';
+export interface ChartsLabelGradientClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the "mask" that gives shape to the gradient. */
+  mask: string;
+  /** Styles applied when direction is "column". */
+  vertical: string;
+  /** Styles applied when direction is "row". */
+  horizontal: string;
+  /** Styles applied to the element filled by the gradient */
+  fill: string;
+}
+export declare function getLabelGradientUtilityClass(slot: string): string;
+export declare const labelGradientClasses: ChartsLabelGradientClasses;
+export declare const useUtilityClasses: (props: ChartsLabelGradientProps) => Record<"root" | "mask" | "fill", string>;

package/modern/ChartsLabel/labelMarkClasses.d.ts

@@ -0,0 +1,18 @@
+import type { ChartsLabelMarkProps } from './ChartsLabelMark';
+export interface ChartsLabelMarkClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the "mask" that gives shape to the marks. */
+  mask: string;
+  /** Styles applied to the mark type "line". */
+  line: string;
+  /** Styles applied to the mark type "square". */
+  square: string;
+  /** Styles applied to the mark type "circle". */
+  circle: string;
+  /** Styles applied to the element with fill={color} attribute. */
+  fill: string;
+}
+export declare function getLabelMarkUtilityClass(slot: string): string;
+export declare const labelMarkClasses: ChartsLabelMarkClasses;
+export declare const useUtilityClasses: (props: ChartsLabelMarkProps) => Record<"root" | "mask" | "fill", string>;

package/modern/ChartsLabel/labelMarkClasses.js

@@ -10,7 +10,7 @@ export const useUtilityClasses = props => {
     type
   } = props;
   const slots = {
-    root: ['root', type],
+    root: typeof type === 'function' ? ['root'] : ['root', type],
     mask: ['mask'],
     fill: ['fill']
   };

package/modern/ChartsLegend/ChartsLegend.d.ts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { SxProps, Theme } from '@mui/material/styles';
+import type { Direction } from './direction';
+import { SeriesLegendItemContext } from "./legendContext.types.js";
+import { type ChartsLegendClasses } from "./chartsLegendClasses.js";
+export interface ChartsLegendProps {
+  /**
+   * Callback fired when a legend item is clicked.
+   * @param {React.MouseEvent<HTMLButtonElement, MouseEvent>} event The click event.
+   * @param {SeriesLegendItemContext} legendItem The legend item data.
+   * @param {number} index The index of the clicked legend item.
+   */
+  onItemClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, legendItem: SeriesLegendItemContext, index: number) => void;
+  /**
+   * The direction of the legend layout.
+   * The default depends on the chart.
+   */
+  direction?: Direction;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<ChartsLegendClasses>;
+  className?: string;
+  sx?: SxProps<Theme>;
+}
+declare const ChartsLegend: React.ForwardRefExoticComponent<ChartsLegendProps & import("./chartsLegend.types").ChartsLegendSlotExtension & React.RefAttributes<{}>>;
+export { ChartsLegend };

package/modern/ChartsLegend/ContinuousColorLegend.d.ts

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import { SxProps, Theme } from '@mui/material/styles';
+import { AppendKeys } from '@mui/x-internals/types';
+import { ColorLegendSelector } from "./colorLegend.types.js";
+import { ChartsLabelGradientProps } from "../ChartsLabel/ChartsLabelGradient.js";
+import { Direction } from "./direction.js";
+import { ContinuousColorLegendClasses } from "./continuousColorLegendClasses.js";
+type LabelFormatter = (params: {
+  value: number | Date;
+  formattedValue: string;
+}) => string;
+export interface ContinuousColorLegendProps extends ColorLegendSelector, AppendKeys<Pick<ChartsLabelGradientProps, 'rotate'>, 'gradient'>, Pick<ChartsLabelGradientProps, 'thickness'> {
+  /**
+   * The direction of the legend layout.
+   * @default 'horizontal'
+   */
+  direction?: Direction;
+  /**
+   * The label to display at the minimum side of the gradient.
+   * Can either be a string, or a function.
+   * @default formattedValue
+   */
+  minLabel?: string | LabelFormatter;
+  /**
+   * The label to display at the maximum side of the gradient.
+   * Can either be a string, or a function.
+   * If not defined, the formatted maximal value is display.
+   * @default formattedValue
+   */
+  maxLabel?: string | LabelFormatter;
+  /**
+   * The id for the gradient to use.
+   * If not provided, it will use the generated gradient from the axis configuration.
+   * The `gradientId` will be used as `fill="url(#gradientId)"`.
+   * @default auto-generated id
+   */
+  gradientId?: string;
+  /**
+   * Where to position the labels relative to the gradient.
+   * @default 'end'
+   */
+  labelPosition?: 'start' | 'end' | 'extremes';
+  /**
+   * If `true`, the gradient and labels will be reversed.
+   * @default false
+   */
+  reverse?: boolean;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<ContinuousColorLegendClasses>;
+  className?: string;
+  sx?: SxProps<Theme>;
+}
+declare const ContinuousColorLegend: React.ForwardRefExoticComponent<ContinuousColorLegendProps & import("./chartsLegend.types").ChartsLegendSlotExtension & React.RefAttributes<{}>>;
+export { ContinuousColorLegend };

package/modern/ChartsLegend/ContinuousColorLegend.js

@@ -124,6 +124,7 @@ const getText = (label, value, formattedValue) => {
     formattedValue
   }) ?? formattedValue;
 };
+const isZAxis = axis => axis.scale === undefined;
 const ContinuousColorLegend = consumeThemeProps('MuiContinuousColorLegend', {
   defaultProps: {
     direction: 'horizontal',
@@ -160,7 +161,7 @@ const ContinuousColorLegend = consumeThemeProps('MuiContinuousColorLegend', {
 
   // Get texts to display
 
-  const valueFormatter = axisItem?.valueFormatter;
+  const valueFormatter = isZAxis(axisItem) ? undefined : axisItem.valueFormatter;
   const formattedMin = valueFormatter ? valueFormatter(minValue, {
     location: 'legend'
   }) : minValue.toLocaleString();

package/modern/ChartsLegend/PiecewiseColorLegend.d.ts

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { SxProps, Theme } from '@mui/material/styles';
+import { PrependKeys } from '@mui/x-internals/types';
+import { ChartsLabelMarkProps } from "../ChartsLabel/ChartsLabelMark.js";
+import { Direction } from "./direction.js";
+import { PiecewiseColorLegendClasses } from "./piecewiseColorLegendClasses.js";
+import { ColorLegendSelector } from "./colorLegend.types.js";
+import { PiecewiseLabelFormatterParams } from "./piecewiseColorLegend.types.js";
+import { PiecewiseColorLegendItemContext } from "./legendContext.types.js";
+export interface PiecewiseColorLegendProps extends ColorLegendSelector, PrependKeys<Pick<ChartsLabelMarkProps, 'type'>, 'mark'> {
+  /**
+   * The direction of the legend layout.
+   * @default 'horizontal'
+   */
+  direction?: Direction;
+  /**
+   * Format the legend labels.
+   * @param {PiecewiseLabelFormatterParams} params The bound of the piece to format.
+   * @returns {string|null} The displayed label, `''` to skip the label but show the color mark, or `null` to skip it entirely.
+   */
+  labelFormatter?: (params: PiecewiseLabelFormatterParams) => string | null;
+  /**
+   * Where to position the labels relative to the gradient.
+   * @default 'extremes'
+   */
+  labelPosition?: 'start' | 'end' | 'extremes';
+  /**
+   * Callback fired when a legend item is clicked.
+   * @param {React.MouseEvent<HTMLButtonElement, MouseEvent>} event The click event.
+   * @param {PiecewiseColorLegendItemContext} legendItem The legend item data.
+   * @param {number} index The index of the clicked legend item.
+   */
+  onItemClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, legendItem: PiecewiseColorLegendItemContext, index: number) => void;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<PiecewiseColorLegendClasses>;
+  className?: string;
+  sx?: SxProps<Theme>;
+}
+declare const PiecewiseColorLegend: React.ForwardRefExoticComponent<PiecewiseColorLegendProps & import("./chartsLegend.types").ChartsLegendSlotExtension & React.RefAttributes<{}>>;
+export { PiecewiseColorLegend };

package/modern/ChartsLegend/chartsLegend.types.d.ts

@@ -0,0 +1,26 @@
+import type { ChartsLegendProps } from './ChartsLegend';
+import { ContinuousColorLegendProps } from "./ContinuousColorLegend.js";
+import { ChartsLegendPosition } from "./legend.types.js";
+import { PiecewiseColorLegendProps } from "./PiecewiseColorLegend.js";
+export interface ChartsLegendSlots {
+  /**
+   * Custom rendering of the legend.
+   * @default ChartsLegend
+   */
+  legend?: React.JSXElementConstructor<ChartsLegendProps> | React.JSXElementConstructor<ContinuousColorLegendProps> | React.JSXElementConstructor<PiecewiseColorLegendProps>;
+}
+export interface ChartsLegendSlotProps {
+  legend?: Partial<ChartsLegendProps | ContinuousColorLegendProps | PiecewiseColorLegendProps> & ChartsLegendPosition;
+}
+export interface ChartsLegendSlotExtension {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: ChartsLegendSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: ChartsLegendSlotProps;
+}

package/modern/ChartsLegend/chartsLegendClasses.d.ts

@@ -0,0 +1,18 @@
+import type { ChartsLegendProps } from './ChartsLegend';
+import type { ChartsLegendSlotExtension } from './chartsLegend.types';
+export interface ChartsLegendClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to a series element. */
+  series: string;
+  /** Styles applied to series mark element. */
+  mark: string;
+  /** Styles applied to the series label. */
+  label: string;
+  /** Styles applied to the legend in column layout. */
+  vertical: string;
+  /** Styles applied to the legend in row layout. */
+  horizontal: string;
+}
+export declare const useUtilityClasses: (props: ChartsLegendProps & ChartsLegendSlotExtension) => Record<"root" | "label" | "mark" | "series", string>;
+export declare const legendClasses: ChartsLegendClasses;

package/modern/ChartsLegend/colorLegend.types.d.ts

@@ -0,0 +1,13 @@
+import { AxisId } from "../models/axis.js";
+export interface ColorLegendSelector {
+  /**
+   * The axis direction containing the color configuration to represent.
+   * @default 'z'
+   */
+  axisDirection?: 'x' | 'y' | 'z';
+  /**
+   * The id of the axis item with the color configuration to represent.
+   * @default The first axis item.
+   */
+  axisId?: AxisId;
+}

package/modern/ChartsLegend/continuousColorLegendClasses.d.ts

@@ -0,0 +1,26 @@
+import type { ContinuousColorLegendProps } from './ContinuousColorLegend';
+import type { ChartsLegendSlotExtension } from './chartsLegend.types';
+export interface ContinuousColorLegendClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the list item that renders the `minLabel`. */
+  minLabel: string;
+  /** Styles applied to the list item that renders the `maxLabel`. */
+  maxLabel: string;
+  /** Styles applied to the list item with the gradient. */
+  gradient: string;
+  /** Styles applied to the legend in column layout. */
+  vertical: string;
+  /** Styles applied to the legend in row layout. */
+  horizontal: string;
+  /** Styles applied to the legend with the labels before the gradient. */
+  start: string;
+  /** Styles applied to the legend with the labels after the gradient. */
+  end: string;
+  /** Styles applied to the legend with the labels on the extremes of the gradient. */
+  extremes: string;
+  /** Styles applied to the series label. */
+  label: string;
+}
+export declare const useUtilityClasses: (props: ContinuousColorLegendProps & ChartsLegendSlotExtension) => Record<"root" | "label" | "mark" | "minLabel" | "maxLabel" | "gradient", string>;
+export declare const continuousColorLegendClasses: ContinuousColorLegendClasses;

package/modern/ChartsLegend/direction.d.ts

@@ -0,0 +1 @@
+export type Direction = 'vertical' | 'horizontal';

package/modern/ChartsLegend/index.d.ts

@@ -0,0 +1,16 @@
+export * from "./ChartsLegend.js";
+export * from "./chartsLegend.types.js";
+export * from "./direction.js";
+export * from "./legendContext.types.js";
+export { legendClasses } from "./chartsLegendClasses.js";
+export type { ChartsLegendClasses } from './chartsLegendClasses';
+export * from "./ContinuousColorLegend.js";
+export * from "./colorLegend.types.js";
+export { continuousColorLegendClasses } from "./continuousColorLegendClasses.js";
+export type { ContinuousColorLegendClasses } from './continuousColorLegendClasses';
+export * from "./PiecewiseColorLegend.js";
+export { piecewiseColorLegendClasses } from "./piecewiseColorLegendClasses.js";
+export type { PiecewiseColorLegendClasses } from './piecewiseColorLegendClasses';
+export { piecewiseColorDefaultLabelFormatter } from "./piecewiseColorDefaultLabelFormatter.js";
+export type { PiecewiseLabelFormatterParams } from './piecewiseColorLegend.types';
+export * from "./legend.types.js";

package/modern/ChartsLegend/legend.types.d.ts

@@ -0,0 +1,9 @@
+import { Position } from "../models/position.js";
+export type ChartsLegendPosition = {
+  /**
+   * The position of the legend in relation to the chart.
+   * This property is only passed to the Chart components, e.g. `ScatterChart`, and not the slots themselves.
+   * If customization is needed, simply use the composition pattern.
+   */
+  position?: Position;
+};

package/modern/ChartsLegend/legendContext.types.d.ts

@@ -0,0 +1,55 @@
+import { ChartsLabelMarkProps } from "../ChartsLabel/ChartsLabelMark.js";
+import { PieItemId } from "../models/index.js";
+import { SeriesId } from "../models/seriesType/common.js";
+interface LegendItemContextBase {
+  /**
+   * The color used in the legend
+   */
+  color: string;
+  /**
+   * The label displayed in the legend
+   */
+  label: string;
+}
+export interface LegendItemParams extends Partial<Omit<SeriesLegendItemContext, 'type' | keyof LegendItemContextBase>>, Partial<Omit<PiecewiseColorLegendItemContext, 'type' | keyof LegendItemContextBase>>, LegendItemContextBase {
+  /**
+   * The identifier of the legend element.
+   * Used for internal purpose such as `key` props
+   */
+  id: number | string;
+  markType: ChartsLabelMarkProps['type'];
+}
+export interface SeriesLegendItemContext extends LegendItemContextBase {
+  /**
+   * The type of the legend item
+   * - `series` is used for series legend item
+   * - `piecewiseColor` is used for piecewise color legend item
+   */
+  type: 'series';
+  /**
+   * The identifier of the series
+   */
+  seriesId: SeriesId;
+  /**
+   * The identifier of the pie item
+   */
+  itemId?: PieItemId;
+}
+export interface PiecewiseColorLegendItemContext extends LegendItemContextBase {
+  /**
+   * The type of the legend item
+   * - `series` is used for series legend item
+   * - `piecewiseColor` is used for piecewise color legend item
+   */
+  type: 'piecewiseColor';
+  /**
+   * The minimum value of the category
+   */
+  minValue: number | Date | null;
+  /**
+   * The maximum value of the category
+   */
+  maxValue: number | Date | null;
+}
+export type LegendItemContext = SeriesLegendItemContext | PiecewiseColorLegendItemContext;
+export {};

package/modern/ChartsLegend/onClickContextBuilder.d.ts

@@ -0,0 +1,2 @@
+import { LegendItemParams, SeriesLegendItemContext } from "./legendContext.types.js";
+export declare const seriesContextBuilder: (context: LegendItemParams) => SeriesLegendItemContext;

package/modern/ChartsLegend/piecewiseColorDefaultLabelFormatter.d.ts

@@ -0,0 +1,2 @@
+import { PiecewiseLabelFormatterParams } from "./piecewiseColorLegend.types.js";
+export declare function piecewiseColorDefaultLabelFormatter(params: PiecewiseLabelFormatterParams): string;

package/modern/ChartsLegend/piecewiseColorLegend.types.d.ts

@@ -0,0 +1,26 @@
+export type PiecewiseLabelFormatterParams = {
+  /**
+   * The index of the entry.
+   */
+  index: number;
+  /**
+   * The length of the entries array.
+   */
+  length: number;
+  /**
+   * The min value of the piece. `null` is infinite.
+   */
+  min: number | Date | null;
+  /**
+   * The max value of the piece. `null` is infinite.
+   */
+  max: number | Date | null;
+  /**
+   * The formatted min value of the piece. `null` is infinite.
+   */
+  formattedMin: string | null;
+  /**
+   * The formatted max value of the piece. `null` is infinite.
+   */
+  formattedMax: string | null;
+};

package/modern/ChartsLegend/piecewiseColorLegendClasses.d.ts

@@ -0,0 +1,28 @@
+import type { PiecewiseColorLegendProps } from './PiecewiseColorLegend';
+import type { ChartsLegendSlotExtension } from './chartsLegend.types';
+export interface PiecewiseColorLegendClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the list item that renders the `minLabel`. */
+  minLabel: string;
+  /** Styles applied to the list item that renders the `maxLabel`. */
+  maxLabel: string;
+  /** Styles applied to the list items. */
+  item: string;
+  /** Styles applied to the legend in column layout. */
+  vertical: string;
+  /** Styles applied to the legend in row layout. */
+  horizontal: string;
+  /** Styles applied to the legend with the labels before the color marks. */
+  start: string;
+  /** Styles applied to the legend with the labels after the color marks. */
+  end: string;
+  /** Styles applied to the legend with the labels on the extremes of the color marks. */
+  extremes: string;
+  /** Styles applied to the marks. */
+  mark: string;
+  /** Styles applied to the series label. */
+  label: string;
+}
+export declare const useUtilityClasses: (props: PiecewiseColorLegendProps & ChartsLegendSlotExtension) => Record<"root" | "label" | "mark" | "item" | "minLabel" | "maxLabel", string>;
+export declare const piecewiseColorLegendClasses: PiecewiseColorLegendClasses;

package/modern/ChartsLegend/useAxis.d.ts

@@ -0,0 +1,10 @@
+import { AxisDefaultized } from "../models/axis.js";
+import { ZAxisDefaultized } from "../models/z-axis.js";
+import { ColorLegendSelector } from "./colorLegend.types.js";
+/**
+ * Helper to select an axis definition according to its direction and id.
+ */
+export declare function useAxis({
+  axisDirection,
+  axisId
+}: ColorLegendSelector): ZAxisDefaultized | AxisDefaultized;