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

package/ChartsLegend/PiecewiseColorLegend.js

@@ -1,40 +1,130 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["axisDirection", "axisId", "hideFirst", "hideLast", "labelFormatter", "onItemClick"];
+import _extends from "@babel/runtime/helpers/esm/extends";
+const _excluded = ["direction", "classes", "className", "markType", "labelPosition", "axisDirection", "axisId", "labelFormatter", "onItemClick"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+import clsx from 'clsx';
+import { ChartsLabel } from "../ChartsLabel/ChartsLabel.js";
+import { ChartsLabelMark } from "../ChartsLabel/ChartsLabelMark.js";
+import { consumeThemeProps } from "../internals/consumeThemeProps.js";
+import { piecewiseColorLegendClasses, useUtilityClasses } from "./piecewiseColorLegendClasses.js";
 import { useAxis } from "./useAxis.js";
-import { LegendPerItem } from "./LegendPerItem.js";
-import { notNull } from "../internals/notNull.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-function defaultLabelFormatter(params) {
-  if (params.min === null) {
-    return `<${params.formattedMax}`;
-  }
-  if (params.max === null) {
-    return `>${params.formattedMin}`;
-  }
-  return `${params.formattedMin}-${params.formattedMax}`;
-}
-const piecewiseColorContextBuilder = context => ({
-  type: 'piecewiseColor',
-  color: context.color,
-  label: context.label,
-  maxValue: context.maxValue,
-  minValue: context.minValue
+import { piecewiseColorDefaultLabelFormatter } from "./piecewiseColorDefaultLabelFormatter.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const RootElement = styled('ul', {
+  name: 'MuiPiecewiseColorLegend',
+  slot: 'Root',
+  overridesResolver: (props, styles) => styles.root
+})(({
+  theme,
+  ownerState
+}) => {
+  return _extends({}, theme.typography.caption, {
+    color: (theme.vars || theme).palette.text.primary,
+    lineHeight: '100%',
+    display: 'flex',
+    flexDirection: ownerState.direction === 'vertical' ? 'column' : 'row',
+    flexShrink: 0,
+    gap: theme.spacing(0.5),
+    listStyleType: 'none',
+    paddingInlineStart: 0,
+    marginBlock: theme.spacing(1),
+    marginInline: theme.spacing(1),
+    width: 'max-content',
+    [`button.${piecewiseColorLegendClasses.item}`]: {
+      // Reset button styles
+      background: 'none',
+      border: 'none',
+      padding: 0,
+      cursor: ownerState.onItemClick ? 'pointer' : 'unset',
+      fontFamily: 'inherit',
+      fontWeight: 'inherit',
+      fontSize: 'inherit',
+      letterSpacing: 'inherit',
+      color: 'inherit'
+    },
+    [`.${piecewiseColorLegendClasses.item}`]: {
+      display: 'flex',
+      gap: theme.spacing(0.5)
+    },
+    [`li :not(.${piecewiseColorLegendClasses.minLabel}, .${piecewiseColorLegendClasses.maxLabel}) .${piecewiseColorLegendClasses?.mark}`]: {
+      alignSelf: 'center'
+    },
+    [`&.${piecewiseColorLegendClasses.start}`]: {
+      alignItems: 'end'
+    },
+    [`&.${piecewiseColorLegendClasses.end}`]: {
+      alignItems: 'start'
+    },
+    [`&.${piecewiseColorLegendClasses.horizontal}`]: {
+      alignItems: 'center',
+      [`.${piecewiseColorLegendClasses.item}`]: {
+        flexDirection: 'column'
+      },
+      [`&.${piecewiseColorLegendClasses.start}`]: {
+        alignItems: 'end'
+      },
+      [`&.${piecewiseColorLegendClasses.end}`]: {
+        alignItems: 'start'
+      },
+      [`.${piecewiseColorLegendClasses.minLabel}`]: {
+        alignItems: 'end'
+      },
+      [`&.${piecewiseColorLegendClasses.extremes}`]: {
+        [`.${piecewiseColorLegendClasses.minLabel}, .${piecewiseColorLegendClasses.maxLabel}`]: {
+          alignItems: 'center',
+          display: 'flex',
+          flexDirection: 'row'
+        }
+      }
+    },
+    [`&.${piecewiseColorLegendClasses.vertical}`]: {
+      [`.${piecewiseColorLegendClasses.item}`]: {
+        flexDirection: 'row',
+        alignItems: 'center'
+      },
+      [`&.${piecewiseColorLegendClasses.start}`]: {
+        alignItems: 'end'
+      },
+      [`&.${piecewiseColorLegendClasses.end}`]: {
+        alignItems: 'start'
+      },
+      [`&.${piecewiseColorLegendClasses.extremes}`]: {
+        alignItems: 'center',
+        [`.${piecewiseColorLegendClasses.minLabel}, .${piecewiseColorLegendClasses.maxLabel}`]: {
+          alignItems: 'center',
+          display: 'flex',
+          flexDirection: 'column'
+        }
+      }
+    }
+  });
 });
-function PiecewiseColorLegend(props) {
+const PiecewiseColorLegend = consumeThemeProps('MuiPiecewiseColorLegend', {
+  defaultProps: {
+    direction: 'horizontal',
+    labelPosition: 'extremes',
+    labelFormatter: piecewiseColorDefaultLabelFormatter
+  },
+  classesResolver: useUtilityClasses
+}, function PiecewiseColorLegend(props, ref) {
   const {
+      direction,
+      classes,
+      className,
+      markType,
+      labelPosition,
       axisDirection,
       axisId,
-      hideFirst,
-      hideLast,
-      labelFormatter = defaultLabelFormatter,
+      labelFormatter,
       onItemClick
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
+  const isVertical = direction === 'vertical';
+  const isReverse = isVertical;
   const axisItem = useAxis({
     axisDirection,
     axisId
@@ -47,42 +137,83 @@ function PiecewiseColorLegend(props) {
     location: 'legend'
   }) ?? v.toLocaleString();
   const formattedLabels = colorMap.thresholds.map(valueFormatter);
-  const itemsToDisplay = colorMap.colors.map((color, index) => {
-    const isFirst = index === 0;
-    const isLast = index === colorMap.colors.length - 1;
-    if (hideFirst && isFirst || hideLast && isLast) {
-      return null;
-    }
-    const data = _extends({}, isFirst ? {
-      min: null,
-      formattedMin: null
-    } : {
-      min: colorMap.thresholds[index - 1],
-      formattedMin: formattedLabels[index - 1]
-    }, isLast ? {
-      max: null,
-      formattedMax: null
-    } : {
-      max: colorMap.thresholds[index],
-      formattedMax: formattedLabels[index]
-    });
-    const label = labelFormatter(data);
-    if (label === null) {
-      return null;
-    }
-    return {
-      id: label,
+  const startClass = isReverse ? classes?.maxLabel : classes?.minLabel;
+  const endClass = isReverse ? classes?.minLabel : classes?.maxLabel;
+  const colors = colorMap.colors.map((color, colorIndex) => ({
+    color,
+    colorIndex
+  }));
+  const orderedColors = isReverse ? colors.reverse() : colors;
+  const isStart = labelPosition === 'start';
+  const isEnd = labelPosition === 'end';
+  const isExtremes = labelPosition === 'extremes';
+  return /*#__PURE__*/_jsx(RootElement, _extends({
+    className: clsx(classes?.root, className),
+    ref: ref
+  }, other, {
+    ownerState: props,
+    children: orderedColors.map(({
       color,
-      label,
-      minValue: data.min,
-      maxValue: data.max
-    };
-  }).filter(notNull);
-  return /*#__PURE__*/_jsx(LegendPerItem, _extends({}, other, {
-    itemsToDisplay: itemsToDisplay,
-    onItemClick: onItemClick ? (event, i) => onItemClick(event, piecewiseColorContextBuilder(itemsToDisplay[i]), i) : undefined
+      colorIndex
+    }, index) => {
+      const isFirst = index === 0;
+      const isLast = index === colorMap.colors.length - 1;
+      const isFirstColor = colorIndex === 0;
+      const isLastColor = colorIndex === colorMap.colors.length - 1;
+      const data = _extends({
+        index: colorIndex,
+        length: formattedLabels.length
+      }, isFirstColor ? {
+        min: null,
+        formattedMin: null
+      } : {
+        min: colorMap.thresholds[colorIndex - 1],
+        formattedMin: formattedLabels[colorIndex - 1]
+      }, isLastColor ? {
+        max: null,
+        formattedMax: null
+      } : {
+        max: colorMap.thresholds[colorIndex],
+        formattedMax: formattedLabels[colorIndex]
+      });
+      const label = labelFormatter?.(data);
+      if (label === null || label === undefined) {
+        return null;
+      }
+      const isTextBefore = isStart || isExtremes && isFirst;
+      const isTextAfter = isEnd || isExtremes && isLast;
+      const clickObject = {
+        type: 'piecewiseColor',
+        color,
+        label,
+        minValue: data.min,
+        maxValue: data.max
+      };
+      const Element = onItemClick ? 'button' : 'div';
+      return /*#__PURE__*/_jsx("li", {
+        children: /*#__PURE__*/_jsxs(Element, {
+          role: onItemClick ? 'button' : undefined,
+          type: onItemClick ? 'button' : undefined,
+          onClick:
+          // @ts-ignore onClick is only attached to a button
+          onItemClick ? event => onItemClick(event, clickObject, index) : undefined,
+          className: clsx(classes?.item, index === 0 && `${startClass}`, index === orderedColors.length - 1 && `${endClass}`),
+          children: [isTextBefore && /*#__PURE__*/_jsx(ChartsLabel, {
+            className: classes?.label,
+            children: label
+          }), /*#__PURE__*/_jsx(ChartsLabelMark, {
+            className: classes?.mark,
+            type: markType,
+            color: color
+          }), isTextAfter && /*#__PURE__*/_jsx(ChartsLabel, {
+            className: classes?.label,
+            children: label
+          })]
+        })
+      }, colorIndex);
+    })
   }));
-}
+});
 process.env.NODE_ENV !== "production" ? PiecewiseColorLegend.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
@@ -102,76 +233,35 @@ process.env.NODE_ENV !== "production" ? PiecewiseColorLegend.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']).isRequired,
-  /**
-   * Hide the first item of the legend, corresponding to the [-infinity, min] piece.
-   * @default false
+   * @default 'horizontal'
    */
-  hideFirst: PropTypes.bool,
-  /**
-   * Hide the last item of the legend, corresponding to the [max, +infinity] piece.
-   * @default false
-   */
-  hideLast: 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,
+  direction: PropTypes.oneOf(['horizontal', 'vertical']),
   /**
    * Format the legend labels.
    * @param {PiecewiseLabelFormatterParams} params The bound of the piece to format.
-   * @returns {string|null} The displayed label, or `null` to skip the item.
+   * @returns {string|null} The displayed label, `''` to skip the label but show the color mark, or `null` to skip it entirely.
    */
   labelFormatter: PropTypes.func,
   /**
-   * Style applied to legend labels.
-   * @default theme.typography.subtitle1
+   * Where to position the labels relative to the gradient.
+   * @default 'extremes'
    */
-  labelStyle: PropTypes.object,
+  labelPosition: PropTypes.oneOf(['start', 'end', 'extremes']),
   /**
-   * Space between the mark and the label (in px).
-   * @default 5
+   * The type of the mark.
+   * @default 'square'
    */
-  markGap: PropTypes.number,
+  markType: PropTypes.oneOf(['square', 'circle', 'line']),
   /**
    * 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 {PiecewiseColorLegendItemContext} 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
-  }).isRequired
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
 } : void 0;
 export { PiecewiseColorLegend };

package/ChartsLegend/chartsLegend.types.d.ts

@@ -1,69 +1,26 @@
-import { ChartsTextStyle } from '../ChartsText';
-import { PieItemId } from '../models';
-import { SeriesId } from '../models/seriesType/common';
-interface LegendItemContextBase {
+import type { ChartsLegendProps } from './ChartsLegend';
+import { ContinuousColorLegendProps } from './ContinuousColorLegend';
+import { ChartsLegendPosition } from './legend.types';
+import { PiecewiseColorLegendProps } from './PiecewiseColorLegend';
+export interface ChartsLegendSlots {
     /**
-     * The color used in the legend
+     * Custom rendering of the legend.
+     * @default ChartsLegend
      */
-    color: string;
-    /**
-     * The label displayed in the legend
-     */
-    label: string;
+    legend?: React.JSXElementConstructor<ChartsLegendProps> | React.JSXElementConstructor<ContinuousColorLegendProps> | React.JSXElementConstructor<PiecewiseColorLegendProps>;
 }
-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;
-}
-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 ChartsLegendSlotProps {
+    legend?: Partial<ChartsLegendProps | ContinuousColorLegendProps | PiecewiseColorLegendProps> & ChartsLegendPosition;
 }
-export interface PiecewiseColorLegendItemContext extends LegendItemContextBase {
+export interface ChartsLegendSlotExtension {
     /**
-     * The type of the legend item
-     * - `series` is used for series legend item
-     * - `piecewiseColor` is used for piecewise color legend item
+     * Overridable component slots.
+     * @default {}
      */
-    type: 'piecewiseColor';
+    slots?: ChartsLegendSlots;
     /**
-     * The minimum value of the category
+     * The props used for each component slot.
+     * @default {}
      */
-    minValue: number | Date | null;
-    /**
-     * The maximum value of the category
-     */
-    maxValue: number | Date | null;
-}
-export type LegendItemContext = SeriesLegendItemContext | PiecewiseColorLegendItemContext;
-export interface LegendItemWithPosition extends LegendItemParams {
-    positionX: number;
-    positionY: number;
-    innerHeight: number;
-    innerWidth: number;
-    outerHeight: number;
-    outerWidth: number;
-    rowIndex: number;
+    slotProps?: ChartsLegendSlotProps;
 }
-export type GetItemSpaceType = (label: string, inStyle?: ChartsTextStyle) => {
-    innerWidth: number;
-    innerHeight: number;
-    outerWidth: number;
-    outerHeight: number;
-};
-export {};

package/ChartsLegend/chartsLegendClasses.d.ts

@@ -1,19 +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 the item background. */
-    itemBackground: string;
     /** Styles applied to series mark element. */
     mark: string;
     /** Styles applied to the series label. */
     label: string;
-    /** Styles applied to the legend with column layout. */
-    column: string;
-    /** Styles applied to the legend with row layout. */
-    row: string;
+    /** Styles applied to the legend in column layout. */
+    vertical: string;
+    /** Styles applied to the legend in row layout. */
+    horizontal: string;
 }
-export type ChartsLegendClassKey = keyof ChartsLegendClasses;
-export declare function getLegendUtilityClass(slot: string): string;
+export declare const useUtilityClasses: (props: ChartsLegendProps & ChartsLegendSlotExtension) => Record<"label" | "mark" | "root" | "series", string>;
 export declare const legendClasses: ChartsLegendClasses;

package/ChartsLegend/chartsLegendClasses.js

@@ -1,5 +1,20 @@
-import { unstable_generateUtilityClass as generateUtilityClass, unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
-export function getLegendUtilityClass(slot) {
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+import composeClasses from '@mui/utils/composeClasses';
+function getLegendUtilityClass(slot) {
   return generateUtilityClass('MuiChartsLegend', slot);
 }
-export const legendClasses = generateUtilityClasses('MuiChartsLegend', ['root', 'series', 'itemBackground', 'mark', 'label', 'column', 'row']);
+export const useUtilityClasses = props => {
+  const {
+    classes,
+    direction
+  } = props;
+  const slots = {
+    root: ['root', direction],
+    mark: ['mark'],
+    label: ['label'],
+    series: ['series']
+  };
+  return composeClasses(slots, getLegendUtilityClass, classes);
+};
+export const legendClasses = generateUtilityClasses('MuiChartsLegend', ['root', 'series', 'mark', 'label', 'vertical', 'horizontal']);

package/ChartsLegend/colorLegend.types.d.ts

@@ -0,0 +1,13 @@
+import { AxisId } from '../models/axis';
+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/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<"label" | "mark" | "root" | "minLabel" | "maxLabel" | "gradient", string>;
+export declare const continuousColorLegendClasses: ContinuousColorLegendClasses;

package/ChartsLegend/continuousColorLegendClasses.js

@@ -0,0 +1,23 @@
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+import composeClasses from '@mui/utils/composeClasses';
+function getLegendUtilityClass(slot) {
+  return generateUtilityClass('MuiContinuousColorLegend', slot);
+}
+export const useUtilityClasses = props => {
+  const {
+    classes,
+    direction,
+    labelPosition
+  } = props;
+  const slots = {
+    root: ['root', direction, labelPosition],
+    minLabel: ['minLabel'],
+    maxLabel: ['maxLabel'],
+    gradient: ['gradient'],
+    mark: ['mark'],
+    label: ['label']
+  };
+  return composeClasses(slots, getLegendUtilityClass, classes);
+};
+export const continuousColorLegendClasses = generateUtilityClasses('MuiContinuousColorLegend', ['root', 'minLabel', 'maxLabel', 'gradient', 'vertical', 'horizontal', 'start', 'end', 'extremes', 'label']);

package/ChartsLegend/direction.d.ts

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

package/ChartsLegend/index.d.ts

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

package/ChartsLegend/index.js

@@ -1,6 +1,12 @@
 export * from "./ChartsLegend.js";
-export * from "./DefaultChartsLegend.js";
+export * from "./chartsLegend.types.js";
+export * from "./direction.js";
+export * from "./legendContext.types.js";
+export { legendClasses } from "./chartsLegendClasses.js";
 export * from "./ContinuousColorLegend.js";
+export * from "./colorLegend.types.js";
+export { continuousColorLegendClasses } from "./continuousColorLegendClasses.js";
 export * from "./PiecewiseColorLegend.js";
-export * from "./chartsLegendClasses.js";
-export * from "./utils.js";
+export { piecewiseColorLegendClasses } from "./piecewiseColorLegendClasses.js";
+export { piecewiseColorDefaultLabelFormatter } from "./piecewiseColorDefaultLabelFormatter.js";
+export * from "./legend.types.js";