@mui/x-charts 8.0.0-alpha.0 → 8.0.0-alpha.10

package/modern/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/modern/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/modern/ChartsLegend/colorLegend.types.js

@@ -0,0 +1 @@
+export {};

package/modern/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/modern/ChartsLegend/direction.js

@@ -0,0 +1 @@
+export {};

package/modern/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";

package/modern/ChartsLegend/legendContext.types.js

@@ -0,0 +1 @@
+export {};

package/modern/ChartsLegend/onClickContextBuilder.js

@@ -0,0 +1,7 @@
+export const seriesContextBuilder = context => ({
+  type: 'series',
+  color: context.color,
+  label: context.label,
+  seriesId: context.seriesId,
+  itemId: context.itemId
+});

package/modern/ChartsLegend/piecewiseColorDefaultLabelFormatter.js

@@ -0,0 +1,9 @@
+export function piecewiseColorDefaultLabelFormatter(params) {
+  if (params.min === null) {
+    return `<${params.formattedMax}`;
+  }
+  if (params.max === null) {
+    return `>${params.formattedMin}`;
+  }
+  return `${params.formattedMin}-${params.formattedMax}`;
+}

package/modern/ChartsLegend/piecewiseColorLegend.types.js

@@ -0,0 +1 @@
+export {};

package/modern/ChartsLegend/piecewiseColorLegendClasses.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('MuiPiecewiseColorLegendClasses', slot);
+}
+export const useUtilityClasses = props => {
+  const {
+    classes,
+    direction,
+    labelPosition
+  } = props;
+  const slots = {
+    root: ['root', direction, labelPosition],
+    minLabel: ['minLabel'],
+    maxLabel: ['maxLabel'],
+    item: ['item'],
+    mark: ['mark'],
+    label: ['label']
+  };
+  return composeClasses(slots, getLegendUtilityClass, classes);
+};
+export const piecewiseColorLegendClasses = generateUtilityClasses('MuiPiecewiseColorLegendClasses', ['root', 'minLabel', 'maxLabel', 'item', 'vertical', 'horizontal', 'start', 'end', 'extremes', 'mark', 'label']);

package/modern/ChartsLegend/useAxis.js

@@ -1,8 +1,7 @@
 'use client';
 
-import * as React from 'react';
-import { ZAxisContext } from "../context/ZAxisContextProvider.js";
-import { useCartesianContext } from "../context/CartesianProvider/useCartesianContext.js";
+import { useZAxes } from "../hooks/useZAxis.js";
+import { useXAxes, useYAxes } from "../hooks/useAxis.js";
 /**
  * Helper to select an axis definition according to its direction and id.
  */
@@ -12,14 +11,16 @@ export function useAxis({
 }) {
   const {
     xAxis,
-    xAxisIds,
+    xAxisIds
+  } = useXAxes();
+  const {
     yAxis,
     yAxisIds
-  } = useCartesianContext();
+  } = useYAxes();
   const {
     zAxis,
     zAxisIds
-  } = React.useContext(ZAxisContext);
+  } = useZAxes();
   switch (axisDirection) {
     case 'x':
       {

package/modern/ChartsOnAxisClickHandler/ChartsOnAxisClickHandler.js

@@ -2,10 +2,9 @@
 
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { InteractionContext } from "../context/InteractionProvider.js";
 import { useSeries } from "../hooks/useSeries.js";
-import { useSvgRef } from "../hooks/index.js";
-import { useCartesianContext } from "../context/CartesianProvider/index.js";
+import { useSvgRef, useXAxes, useYAxes } from "../hooks/index.js";
+import { useStore } from "../internals/store/useStore.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function ChartsOnAxisClickHandler(props) {
   const {
@@ -13,15 +12,15 @@ function ChartsOnAxisClickHandler(props) {
   } = props;
   const svgRef = useSvgRef();
   const series = useSeries();
+  const store = useStore();
   const {
-    axis
-  } = React.useContext(InteractionContext);
-  const {
-    xAxisIds,
     xAxis,
-    yAxisIds,
-    yAxis
-  } = useCartesianContext();
+    xAxisIds
+  } = useXAxes();
+  const {
+    yAxis,
+    yAxisIds
+  } = useYAxes();
   React.useEffect(() => {
     const element = svgRef.current;
     if (element === null || !onAxisClick) {
@@ -29,9 +28,13 @@ function ChartsOnAxisClickHandler(props) {
     }
     const handleMouseClick = event => {
       event.preventDefault();
-      const isXaxis = axis.x && axis.x.index !== -1;
+      const {
+        x: axisX,
+        y: axisY
+      } = store.value.interaction.axis;
+      const isXaxis = axisX && axisX.index !== -1;
       const USED_AXIS_ID = isXaxis ? xAxisIds[0] : yAxisIds[0];
-      const dataIndex = isXaxis ? axis.x && axis.x.index : axis.y && axis.y.index;
+      const dataIndex = isXaxis ? axisX && axisX.index : axisY && axisY.index;
       if (dataIndex == null) {
         return;
       }
@@ -58,7 +61,7 @@ function ChartsOnAxisClickHandler(props) {
     return () => {
       element.removeEventListener('click', handleMouseClick);
     };
-  }, [axis.x, axis.y, onAxisClick, series, svgRef, xAxis, xAxisIds, yAxis, yAxisIds]);
+  }, [onAxisClick, series, store, svgRef, xAxis, xAxisIds, yAxis, yAxisIds]);
 
   // eslint-disable-next-line react/jsx-no-useless-fragment
   return /*#__PURE__*/_jsx(React.Fragment, {});