@mui/x-charts 8.0.0-alpha.5 → 8.0.0-alpha.7

package/ChartsLegend/ChartsLegend.d.ts

@@ -1,31 +1,27 @@
 import * as React from 'react';
-import { LegendRendererProps } from './DefaultChartsLegend';
-import { LegendPlacement } from './legend.types';
-export type ChartsLegendPropsBase = Omit<LegendRendererProps, keyof LegendPlacement | 'series' | 'seriesToDisplay' | 'drawingArea'> & LegendPlacement;
-export interface ChartsLegendSlots {
+import { SxProps, Theme } from '@mui/material/styles';
+import type { Direction } from './direction';
+import { SeriesLegendItemContext } from './legendContext.types';
+import { type ChartsLegendClasses } from './chartsLegendClasses';
+export interface ChartsLegendProps {
     /**
-     * Custom rendering of the legend.
-     * @default DefaultChartsLegend
+     * 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.
      */
-    legend?: React.JSXElementConstructor<LegendRendererProps>;
-}
-export interface ChartsLegendSlotProps {
-    legend?: Partial<LegendRendererProps>;
-}
-export interface ChartsLegendProps extends ChartsLegendPropsBase {
+    onItemClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, legendItem: SeriesLegendItemContext, index: number) => void;
     /**
-     * Overridable component slots.
-     * @default {}
+     * The direction of the legend layout.
+     * The default depends on the chart.
      */
-    slots?: ChartsLegendSlots;
+    direction?: Direction;
     /**
-     * The props used for each component slot.
-     * @default {}
+     * Override or extend the styles applied to the component.
      */
-    slotProps?: ChartsLegendSlotProps;
-}
-declare function ChartsLegend(inProps: ChartsLegendProps): React.JSX.Element;
-declare namespace ChartsLegend {
-    var propTypes: any;
+    classes?: Partial<ChartsLegendClasses>;
+    className?: string;
+    sx?: SxProps<Theme>;
 }
+declare const ChartsLegend: React.ForwardRefExoticComponent<ChartsLegendProps & import("./chartsLegend.types").ChartsLegendSlotExtension & React.RefAttributes<{}>>;
 export { ChartsLegend };

package/ChartsLegend/ChartsLegend.js

@@ -2,68 +2,105 @@
 
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["slots", "slotProps"];
+const _excluded = ["direction", "onItemClick", "className", "classes"];
 import * as React from 'react';
+import { styled } from '@mui/material/styles';
 import PropTypes from 'prop-types';
-import useSlotProps from '@mui/utils/useSlotProps';
-import composeClasses from '@mui/utils/composeClasses';
-import { useThemeProps, useTheme } from '@mui/material/styles';
-import { getSeriesToDisplay } from "./utils.js";
-import { getLegendUtilityClass } from "./chartsLegendClasses.js";
-import { DefaultChartsLegend } from "./DefaultChartsLegend.js";
-import { useSeries } from "../hooks/useSeries.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-const useUtilityClasses = ownerState => {
+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
+}, function ChartsLegend(props, ref) {
+  const data = useLegend();
   const {
-    classes,
-    direction
-  } = ownerState;
-  const slots = {
-    root: ['root', direction],
-    mark: ['mark'],
-    label: ['label'],
-    series: ['series'],
-    itemBackground: ['itemBackground']
-  };
-  return composeClasses(slots, getLegendUtilityClass, classes);
-};
-function ChartsLegend(inProps) {
-  const props = useThemeProps({
-    props: inProps,
-    name: 'MuiChartsLegend'
-  });
-  const defaultizedProps = _extends({
-    direction: 'row'
-  }, props, {
-    position: _extends({
-      horizontal: 'middle',
-      vertical: 'top'
-    }, props.position)
-  });
-  const {
-      slots,
-      slotProps
-    } = defaultizedProps,
-    other = _objectWithoutPropertiesLoose(defaultizedProps, _excluded);
-  const theme = useTheme();
-  const classes = useUtilityClasses(_extends({}, defaultizedProps, {
-    theme
+      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);
+    })
   }));
-  const series = useSeries();
-  const seriesToDisplay = getSeriesToDisplay(series);
-  const ChartLegendRender = slots?.legend ?? DefaultChartsLegend;
-  const chartLegendRenderProps = useSlotProps({
-    elementType: ChartLegendRender,
-    externalSlotProps: slotProps?.legend,
-    additionalProps: _extends({}, other, {
-      classes,
-      series,
-      seriesToDisplay
-    }),
-    ownerState: {}
-  });
-  return /*#__PURE__*/_jsx(ChartLegendRender, _extends({}, chartLegendRenderProps));
-}
+});
 process.env.NODE_ENV !== "production" ? ChartsLegend.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
@@ -73,66 +110,19 @@ process.env.NODE_ENV !== "production" ? ChartsLegend.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(['column', 'row']),
-  /**
-   * Set to true to hide the legend.
-   * @default false
-   */
-  hidden: PropTypes.bool,
-  /**
-   * Space between two legend items (in px).
-   * @default 10
-   */
-  itemGap: PropTypes.number,
-  /**
-   * Height of the item mark (in px).
-   * @default 20
-   */
-  itemMarkHeight: PropTypes.number,
-  /**
-   * Width of the item mark (in px).
-   * @default 20
-   */
-  itemMarkWidth: PropTypes.number,
-  /**
-   * Style applied to legend labels.
-   * @default theme.typography.subtitle1
-   */
-  labelStyle: PropTypes.object,
-  /**
-   * Space between the mark and the label (in px).
-   * @default 5
-   */
-  markGap: PropTypes.number,
+  direction: PropTypes.oneOf(['horizontal', 'vertical']),
   /**
    * Callback fired when a legend item is clicked.
-   * @param {React.MouseEvent<SVGRectElement, MouseEvent>} event The click event.
+   * @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,
-  /**
-   * Legend padding (in px).
-   * Can either be a single number, or an object with top, left, bottom, right properties.
-   * @default 10
-   */
-  padding: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
-    bottom: PropTypes.number,
-    left: PropTypes.number,
-    right: PropTypes.number,
-    top: PropTypes.number
-  })]),
-  /**
-   * The position of the legend.
-   */
-  position: PropTypes.shape({
-    horizontal: PropTypes.oneOf(['left', 'middle', 'right']).isRequired,
-    vertical: PropTypes.oneOf(['bottom', 'middle', 'top']).isRequired
-  }),
   /**
    * The props used for each component slot.
    * @default {}
@@ -142,6 +132,7 @@ process.env.NODE_ENV !== "production" ? ChartsLegend.propTypes = {
    * Overridable component slots.
    * @default {}
    */
-  slots: PropTypes.object
+  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/ChartsLegend/ContinuousColorLegend.d.ts

@@ -1,65 +1,56 @@
 import * as React from 'react';
-import { ContinuousScaleName } from '../models/axis';
-import { ChartsTextProps } from '../ChartsText';
-import { ColorLegendSelector, LegendPlacement } from './legend.types';
+import { SxProps, Theme } from '@mui/material/styles';
+import { AppendKeys } from '@mui/x-internals/types';
+import { ColorLegendSelector } from './colorLegend.types';
+import { ChartsLabelGradientProps } from '../ChartsLabel/ChartsLabelGradient';
+import { Direction } from './direction';
+import { ContinuousColorLegendClasses } from './continuousColorLegendClasses';
 type LabelFormatter = (params: {
     value: number | Date;
     formattedValue: string;
 }) => string;
-export interface ContinuousColorLegendProps extends LegendPlacement, ColorLegendSelector {
+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 }) => formattedValue
+     * @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 }) => formattedValue
+     * @default formattedValue
      */
     maxLabel?: string | LabelFormatter;
     /**
-     * A unique identifier for the gradient.
+     * 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
      */
-    id?: string;
+    gradientId?: string;
     /**
-     * The scale used to display gradient colors.
-     * @default 'linear'
+     * Where to position the labels relative to the gradient.
+     * @default 'end'
      */
-    scaleType?: ContinuousScaleName;
+    labelPosition?: 'start' | 'end' | 'extremes';
     /**
-     * The length of the gradient bar.
-     * Can be a number (in px) or a string with a percentage such as '50%'.
-     * The '100%' is the length of the svg.
-     * @default '50%'
+     * If `true`, the gradient and labels will be reversed.
+     * @default false
      */
-    length?: number | string;
+    reverse?: boolean;
     /**
-     * The thickness of the gradient bar.
-     * @default 5
+     * Override or extend the styles applied to the component.
      */
-    thickness?: number;
-    /**
-     * The alignment of the texts with the gradient bar.
-     * @default 'middle'
-     */
-    align?: 'start' | 'middle' | 'end';
-    /**
-     * The space between the gradient bar and the labels.
-     * @default 4
-     */
-    spacing?: number;
-    /**
-     * The style applied to labels.
-     * @default theme.typography.subtitle1
-     */
-    labelStyle?: ChartsTextProps['style'];
-}
-declare function ContinuousColorLegend(props: ContinuousColorLegendProps): React.JSX.Element | null;
-declare namespace ContinuousColorLegend {
-    var propTypes: any;
+    classes?: Partial<ContinuousColorLegendClasses>;
+    className?: string;
+    sx?: SxProps<Theme>;
 }
+declare const ContinuousColorLegend: React.ForwardRefExoticComponent<ContinuousColorLegendProps & import("./chartsLegend.types").ChartsLegendSlotExtension & React.RefAttributes<{}>>;
 export { ContinuousColorLegend };