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

package/modern/ChartsLegend/ChartsLegend.d.ts

@@ -1,27 +0,0 @@
-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/ChartsLegend.js

@@ -1,138 +0,0 @@
-'use client';
-
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["direction", "onItemClick", "className", "classes"];
-import * as React from 'react';
-import { styled } from '@mui/material/styles';
-import PropTypes from 'prop-types';
-import clsx from 'clsx';
-import { useLegend } from "../hooks/useLegend.js";
-import { ChartsLabelMark } from "../ChartsLabel/ChartsLabelMark.js";
-import { seriesContextBuilder } from "./onClickContextBuilder.js";
-import { legendClasses, useUtilityClasses } from "./chartsLegendClasses.js";
-import { consumeSlots } from "../internals/consumeSlots.js";
-import { ChartsLabel } from "../ChartsLabel/ChartsLabel.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const RootElement = styled('ul', {
-  name: 'MuiChartsLegend',
-  slot: 'Root',
-  overridesResolver: (props, styles) => styles.root
-})(({
-  ownerState,
-  theme
-}) => _extends({}, theme.typography.caption, {
-  color: (theme.vars || theme).palette.text.primary,
-  lineHeight: '100%',
-  display: 'flex',
-  flexDirection: ownerState.direction === 'vertical' ? 'column' : 'row',
-  alignItems: ownerState.direction === 'vertical' ? undefined : 'center',
-  flexShrink: 0,
-  gap: theme.spacing(2),
-  listStyleType: 'none',
-  paddingInlineStart: 0,
-  marginBlock: theme.spacing(1),
-  marginInline: theme.spacing(1),
-  flexWrap: 'wrap',
-  li: {
-    display: ownerState.direction === 'horizontal' ? 'inline-flex' : undefined
-  },
-  [`button.${legendClasses.series}`]: {
-    // Reset button styles
-    background: 'none',
-    border: 'none',
-    padding: 0,
-    fontFamily: 'inherit',
-    fontWeight: 'inherit',
-    fontSize: 'inherit',
-    letterSpacing: 'inherit',
-    color: 'inherit'
-  },
-  [`& .${legendClasses.series}`]: {
-    display: ownerState.direction === 'vertical' ? 'flex' : 'inline-flex',
-    alignItems: 'center',
-    gap: theme.spacing(1)
-  }
-}));
-const ChartsLegend = consumeSlots('MuiChartsLegend', 'legend', {
-  defaultProps: {
-    direction: 'horizontal'
-  },
-  // @ts-expect-error position is used only in the slots, but it is passed to the SVG wrapper.
-  // We omit it here to avoid passing to slots.
-  omitProps: ['position'],
-  classesResolver: useUtilityClasses
-}, /*#__PURE__*/React.forwardRef(function ChartsLegend(props, ref) {
-  const data = useLegend();
-  const {
-      onItemClick,
-      className,
-      classes
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  if (data.items.length === 0) {
-    return null;
-  }
-  const Element = onItemClick ? 'button' : 'div';
-  return /*#__PURE__*/_jsx(RootElement, _extends({
-    className: clsx(classes?.root, className),
-    ref: ref
-  }, other, {
-    ownerState: props,
-    children: data.items.map((item, i) => {
-      return /*#__PURE__*/_jsx("li", {
-        children: /*#__PURE__*/_jsxs(Element, {
-          className: classes?.series,
-          role: onItemClick ? 'button' : undefined,
-          type: onItemClick ? 'button' : undefined,
-          onClick: onItemClick ?
-          // @ts-ignore onClick is only attached to a button
-          event => onItemClick(event, seriesContextBuilder(item), i) : undefined,
-          children: [/*#__PURE__*/_jsx(ChartsLabelMark, {
-            className: classes?.mark,
-            color: item.color,
-            type: item.markType
-          }), /*#__PURE__*/_jsx(ChartsLabel, {
-            className: classes?.label,
-            children: item.label
-          })]
-        })
-      }, item.id);
-    })
-  }));
-}));
-process.env.NODE_ENV !== "production" ? ChartsLegend.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,
-  className: PropTypes.string,
-  /**
-   * The direction of the legend layout.
-   * The default depends on the chart.
-   */
-  direction: PropTypes.oneOf(['horizontal', 'vertical']),
-  /**
-   * 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: PropTypes.func,
-  /**
-   * The props used for each component slot.
-   * @default {}
-   */
-  slotProps: PropTypes.object,
-  /**
-   * Overridable component slots.
-   * @default {}
-   */
-  slots: PropTypes.object,
-  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
-} : void 0;
-export { ChartsLegend };

package/modern/ChartsLegend/ContinuousColorLegend.d.ts

@@ -1,56 +0,0 @@
-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

@@ -1,271 +0,0 @@
-'use client';
-
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["minLabel", "maxLabel", "direction", "axisDirection", "axisId", "rotateGradient", "reverse", "classes", "className", "gradientId", "labelPosition", "thickness"];
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { styled } from '@mui/material/styles';
-import clsx from 'clsx';
-import { useAxis } from "./useAxis.js";
-import { ChartsLabel } from "../ChartsLabel/ChartsLabel.js";
-import { ChartsLabelGradient } from "../ChartsLabel/ChartsLabelGradient.js";
-import { consumeThemeProps } from "../internals/consumeThemeProps.js";
-import { continuousColorLegendClasses, useUtilityClasses } from "./continuousColorLegendClasses.js";
-import { useChartGradientIdObjectBoundBuilder } from "../hooks/useChartGradientId.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const templateAreas = reverse => {
-  const startLabel = reverse ? 'max-label' : 'min-label';
-  const endLabel = reverse ? 'min-label' : 'max-label';
-  return {
-    row: {
-      start: `
-    '${startLabel} . ${endLabel}'
-    'gradient gradient gradient'
-  `,
-      end: `
-      'gradient gradient gradient'
-      '${startLabel} . ${endLabel}'
-    `,
-      extremes: `
-      '${startLabel} gradient ${endLabel}'
-    `
-    },
-    column: {
-      start: `
-      '${endLabel} gradient'
-      '. gradient'
-      '${startLabel} gradient'
-    `,
-      end: `
-      'gradient ${endLabel}'
-      'gradient .'
-      'gradient ${startLabel}'
-    `,
-      extremes: `
-      '${endLabel}'
-      'gradient'
-      '${startLabel}'
-    `
-    }
-  };
-};
-const RootElement = styled('ul', {
-  name: 'MuiContinuousColorLegend',
-  slot: 'Root',
-  overridesResolver: (props, styles) => styles.root
-})(({
-  theme,
-  ownerState
-}) => _extends({}, theme.typography.caption, {
-  color: (theme.vars || theme).palette.text.primary,
-  lineHeight: '100%',
-  display: 'grid',
-  flexShrink: 0,
-  gap: theme.spacing(0.5),
-  listStyleType: 'none',
-  paddingInlineStart: 0,
-  marginBlock: theme.spacing(1),
-  marginInline: theme.spacing(1),
-  [`&.${continuousColorLegendClasses.horizontal}`]: {
-    gridTemplateRows: 'min-content min-content',
-    gridTemplateColumns: 'min-content auto min-content',
-    [`&.${continuousColorLegendClasses.start}`]: {
-      gridTemplateAreas: templateAreas(ownerState.reverse).row.start
-    },
-    [`&.${continuousColorLegendClasses.end}`]: {
-      gridTemplateAreas: templateAreas(ownerState.reverse).row.end
-    },
-    [`&.${continuousColorLegendClasses.extremes}`]: {
-      gridTemplateAreas: templateAreas(ownerState.reverse).row.extremes,
-      gridTemplateRows: 'min-content',
-      alignItems: 'center'
-    }
-  },
-  [`&.${continuousColorLegendClasses.vertical}`]: {
-    gridTemplateRows: 'min-content auto min-content',
-    gridTemplateColumns: 'min-content min-content',
-    [`&.${continuousColorLegendClasses.start}`]: {
-      gridTemplateAreas: templateAreas(ownerState.reverse).column.start,
-      [`.${continuousColorLegendClasses.maxLabel}, .${continuousColorLegendClasses.minLabel}`]: {
-        justifySelf: 'end'
-      }
-    },
-    [`&.${continuousColorLegendClasses.end}`]: {
-      gridTemplateAreas: templateAreas(ownerState.reverse).column.end,
-      [`.${continuousColorLegendClasses.maxLabel}, .${continuousColorLegendClasses.minLabel}`]: {
-        justifySelf: 'start'
-      }
-    },
-    [`&.${continuousColorLegendClasses.extremes}`]: {
-      gridTemplateAreas: templateAreas(ownerState.reverse).column.extremes,
-      gridTemplateColumns: 'min-content',
-      [`.${continuousColorLegendClasses.maxLabel}, .${continuousColorLegendClasses.minLabel}`]: {
-        justifySelf: 'center'
-      }
-    }
-  },
-  [`.${continuousColorLegendClasses.gradient}`]: {
-    gridArea: 'gradient'
-  },
-  [`.${continuousColorLegendClasses.maxLabel}`]: {
-    gridArea: 'max-label'
-  },
-  [`.${continuousColorLegendClasses.minLabel}`]: {
-    gridArea: 'min-label'
-  }
-}));
-const getText = (label, value, formattedValue) => {
-  if (typeof label === 'string') {
-    return label;
-  }
-  return label?.({
-    value,
-    formattedValue
-  }) ?? formattedValue;
-};
-const isZAxis = axis => axis.scale === undefined;
-const ContinuousColorLegend = consumeThemeProps('MuiContinuousColorLegend', {
-  defaultProps: {
-    direction: 'horizontal',
-    labelPosition: 'end',
-    axisDirection: 'z'
-  },
-  classesResolver: useUtilityClasses
-}, function ContinuousColorLegend(props, ref) {
-  const {
-      minLabel,
-      maxLabel,
-      direction,
-      axisDirection,
-      axisId,
-      rotateGradient,
-      reverse,
-      classes,
-      className,
-      gradientId,
-      thickness
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const generateGradientId = useChartGradientIdObjectBoundBuilder();
-  const axisItem = useAxis({
-    axisDirection,
-    axisId
-  });
-  const colorMap = axisItem?.colorMap;
-  if (!colorMap || !colorMap.type || colorMap.type !== 'continuous') {
-    return null;
-  }
-  const minValue = colorMap.min ?? 0;
-  const maxValue = colorMap.max ?? 100;
-
-  // Get texts to display
-
-  const valueFormatter = isZAxis(axisItem) ? undefined : axisItem.valueFormatter;
-  const formattedMin = valueFormatter ? valueFormatter(minValue, {
-    location: 'legend'
-  }) : minValue.toLocaleString();
-  const formattedMax = valueFormatter ? valueFormatter(maxValue, {
-    location: 'legend'
-  }) : maxValue.toLocaleString();
-  const minText = getText(minLabel, minValue, formattedMin);
-  const maxText = getText(maxLabel, maxValue, formattedMax);
-  const minComponent = /*#__PURE__*/_jsx("li", {
-    className: classes?.minLabel,
-    children: /*#__PURE__*/_jsx(ChartsLabel, {
-      className: classes?.label,
-      children: minText
-    })
-  });
-  const maxComponent = /*#__PURE__*/_jsx("li", {
-    className: classes?.maxLabel,
-    children: /*#__PURE__*/_jsx(ChartsLabel, {
-      className: classes?.label,
-      children: maxText
-    })
-  });
-  return /*#__PURE__*/_jsxs(RootElement, _extends({
-    className: clsx(classes?.root, className),
-    ref: ref
-  }, other, {
-    ownerState: props,
-    children: [reverse ? maxComponent : minComponent, /*#__PURE__*/_jsx("li", {
-      className: classes?.gradient,
-      children: /*#__PURE__*/_jsx(ChartsLabelGradient, {
-        direction: direction,
-        rotate: rotateGradient,
-        reverse: reverse,
-        thickness: thickness,
-        gradientId: gradientId ?? generateGradientId(axisItem.id)
-      })
-    }), reverse ? minComponent : maxComponent]
-  }));
-});
-process.env.NODE_ENV !== "production" ? ContinuousColorLegend.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
-  // ----------------------------------------------------------------------
-  /**
-   * The axis direction containing the color configuration to represent.
-   * @default 'z'
-   */
-  axisDirection: PropTypes.oneOf(['x', 'y', 'z']),
-  /**
-   * The id of the axis item with the color configuration to represent.
-   * @default The first axis item.
-   */
-  axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes: PropTypes.object,
-  className: PropTypes.string,
-  /**
-   * The direction of the legend layout.
-   * @default 'horizontal'
-   */
-  direction: PropTypes.oneOf(['horizontal', 'vertical']),
-  /**
-   * 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: PropTypes.string,
-  /**
-   * Where to position the labels relative to the gradient.
-   * @default 'end'
-   */
-  labelPosition: PropTypes.oneOf(['start', 'end', 'extremes']),
-  /**
-   * 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: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-  /**
-   * The label to display at the minimum side of the gradient.
-   * Can either be a string, or a function.
-   * @default formattedValue
-   */
-  minLabel: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-  /**
-   * If `true`, the gradient and labels will be reversed.
-   * @default false
-   */
-  reverse: PropTypes.bool,
-  /**
-   * If provided, the gradient will be rotated by 90deg.
-   * Useful for linear gradients that are not in the correct orientation.
-   */
-  rotateGradient: PropTypes.bool,
-  /**
-   * The thickness of the gradient
-   * @default 12
-   */
-  thickness: PropTypes.number,
-  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
-} : void 0;
-export { ContinuousColorLegend };

package/modern/ChartsLegend/PiecewiseColorLegend.d.ts

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