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

package/modern/ChartsLegend/ContinuousColorLegend.js

@@ -1,327 +1,210 @@
 '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 { useTheme } from '@mui/material/styles';
-import { useRtl } from '@mui/system/RtlProvider';
-import ChartsContinuousGradient from "../internals/components/ChartsAxesGradients/ChartsContinuousGradient.js";
-import { useChartId, useDrawingArea } from "../hooks/index.js";
-import { getScale } from "../internals/getScale.js";
-import { getPercentageValue } from "../internals/getPercentageValue.js";
-import { ChartsText } from "../ChartsText/index.js";
-import { getStringSize } from "../internals/domUtils.js";
+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";
-function getPositionOffset(position, legendBox, svgBox) {
-  let offsetX = 0;
-  let offsetY = 0;
-  switch (position.horizontal) {
-    case 'left':
-      offsetX = 0;
-      break;
-    case 'middle':
-      offsetX = (svgBox.width - legendBox.width) / 2;
-      break;
-    case 'right':
-    default:
-      offsetX = svgBox.width - legendBox.width;
-      break;
-  }
-  switch (position.vertical) {
-    case 'top':
-      offsetY = 0;
-      break;
-    case 'middle':
-      offsetY = (svgBox.height - legendBox.height) / 2;
-      break;
-    case 'bottom':
-    default:
-      offsetY = svgBox.height - legendBox.height;
-      break;
-  }
+const templateAreas = reverse => {
+  const startLabel = reverse ? 'max-label' : 'min-label';
+  const endLabel = reverse ? 'min-label' : 'max-label';
   return {
-    offsetX,
-    offsetY
+    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}'
+    `
+    }
   };
-}
-
-/**
- * Takes placement parameters and element bounding boxes.
- * Returns the x, y coordinates of the elements. And the textAnchor, dominantBaseline for texts.
- */
-function getElementPositions(text1Box, barBox, text2Box, params) {
-  if (params.direction === 'column') {
-    const text1 = {
-      y: text1Box.height,
-      dominantBaseline: 'auto'
-    };
-    const text2 = {
-      y: text1Box.height + 2 * params.spacing + barBox.height,
-      dominantBaseline: 'hanging'
-    };
-    const bar = {
-      y: text1Box.height + params.spacing
-    };
-    const totalWidth = Math.max(text1Box.width, barBox.width, text2Box.width);
-    const totalHeight = text1Box.height + barBox.height + text2Box.height + 2 * params.spacing;
-    const boundingBox = {
-      width: totalWidth,
-      height: totalHeight
-    };
-    switch (params.align) {
-      case 'start':
-        return {
-          text1: _extends({}, text1, {
-            textAnchor: 'start',
-            x: 0
-          }),
-          text2: _extends({}, text2, {
-            textAnchor: 'start',
-            x: 0
-          }),
-          bar: _extends({}, bar, {
-            x: 0
-          }),
-          boundingBox
-        };
-      case 'end':
-        return {
-          text1: _extends({}, text1, {
-            textAnchor: 'end',
-            x: totalWidth
-          }),
-          text2: _extends({}, text2, {
-            textAnchor: 'end',
-            x: totalWidth
-          }),
-          bar: _extends({}, bar, {
-            x: totalWidth - barBox.width
-          }),
-          boundingBox
-        };
-      case 'middle':
-      default:
-        return {
-          text1: _extends({}, text1, {
-            textAnchor: 'middle',
-            x: totalWidth / 2
-          }),
-          text2: _extends({}, text2, {
-            textAnchor: 'middle',
-            x: totalWidth / 2
-          }),
-          bar: _extends({}, bar, {
-            x: totalWidth / 2 - barBox.width / 2
-          }),
-          boundingBox
-        };
+};
+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'
     }
-  } else {
-    const text1 = {
-      x: text1Box.width,
-      textAnchor: 'end'
-    };
-    const text2 = {
-      x: text1Box.width + 2 * params.spacing + barBox.width,
-      textAnchor: 'start'
-    };
-    const bar = {
-      x: text1Box.width + params.spacing
-    };
-    const totalHeight = Math.max(text1Box.height, barBox.height, text2Box.height);
-    const totalWidth = text1Box.width + barBox.width + text2Box.width + 2 * params.spacing;
-    const boundingBox = {
-      width: totalWidth,
-      height: totalHeight
-    };
-    switch (params.align) {
-      case 'start':
-        return {
-          text1: _extends({}, text1, {
-            dominantBaseline: 'hanging',
-            y: 0
-          }),
-          text2: _extends({}, text2, {
-            dominantBaseline: 'hanging',
-            y: 0
-          }),
-          bar: _extends({}, bar, {
-            y: 0
-          }),
-          boundingBox
-        };
-      case 'end':
-        return {
-          text1: _extends({}, text1, {
-            dominantBaseline: 'auto',
-            y: totalHeight
-          }),
-          text2: _extends({}, text2, {
-            dominantBaseline: 'auto',
-            y: totalHeight
-          }),
-          bar: _extends({}, bar, {
-            y: totalHeight - barBox.height
-          }),
-          boundingBox
-        };
-      case 'middle':
-      default:
-        return {
-          text1: _extends({}, text1, {
-            dominantBaseline: 'central',
-            y: totalHeight / 2
-          }),
-          text2: _extends({}, text2, {
-            dominantBaseline: 'central',
-            y: totalHeight / 2
-          }),
-          bar: _extends({}, bar, {
-            y: totalHeight / 2 - barBox.height / 2
-          }),
-          boundingBox
-        };
+  },
+  [`&.${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;
   }
-}
-const defaultLabelFormatter = ({
-  formattedValue
-}) => formattedValue;
-function ContinuousColorLegend(props) {
-  const theme = useTheme();
-  const isRtl = useRtl();
+  return label?.({
+    value,
+    formattedValue
+  }) ?? formattedValue;
+};
+const ContinuousColorLegend = consumeThemeProps('MuiContinuousColorLegend', {
+  defaultProps: {
+    direction: 'horizontal',
+    labelPosition: 'end',
+    axisDirection: 'z'
+  },
+  classesResolver: useUtilityClasses
+}, function ContinuousColorLegend(props, ref) {
   const {
-    id: idProp,
-    minLabel = defaultLabelFormatter,
-    maxLabel = defaultLabelFormatter,
-    scaleType = 'linear',
-    direction,
-    length = '50%',
-    thickness = 5,
-    spacing = 4,
-    align = 'middle',
-    labelStyle = theme.typography.subtitle1,
-    position,
-    axisDirection,
-    axisId
-  } = props;
-  const chartId = useChartId();
-  const id = idProp ?? `gradient-legend-${chartId}`;
+      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 {
-    width,
-    height,
-    left,
-    right,
-    top,
-    bottom
-  } = useDrawingArea();
-  const refLength = direction === 'column' ? height + top + bottom : width + left + right;
-  const size = getPercentageValue(length, refLength);
-  const isReversed = direction === 'column';
   const colorMap = axisItem?.colorMap;
   if (!colorMap || !colorMap.type || colorMap.type !== 'continuous') {
     return null;
   }
-
-  // Define the coordinate to color mapping
-
-  const colorScale = axisItem.colorScale;
   const minValue = colorMap.min ?? 0;
   const maxValue = colorMap.max ?? 100;
-  const scale = getScale(scaleType, [minValue, maxValue], isReversed ? [size, 0] : [0, size]);
 
   // Get texts to display
 
-  const formattedMin = axisItem.valueFormatter?.(minValue, {
+  const valueFormatter = axisItem?.valueFormatter;
+  const formattedMin = valueFormatter ? valueFormatter(minValue, {
     location: 'legend'
-  }) ?? minValue.toLocaleString();
-  const formattedMax = axisItem.valueFormatter?.(maxValue, {
+  }) : minValue.toLocaleString();
+  const formattedMax = valueFormatter ? valueFormatter(maxValue, {
     location: 'legend'
-  }) ?? maxValue.toLocaleString();
-  const minText = typeof minLabel === 'string' ? minLabel : minLabel({
-    value: minValue ?? 0,
-    formattedValue: formattedMin
-  });
-  const maxText = typeof maxLabel === 'string' ? maxLabel : maxLabel({
-    value: maxValue ?? 0,
-    formattedValue: formattedMax
-  });
-  const text1 = isReversed ? maxText : minText;
-  const text2 = isReversed ? minText : maxText;
-  const text1Box = getStringSize(text1, _extends({}, labelStyle));
-  const text2Box = getStringSize(text2, _extends({}, labelStyle));
-
-  // Place bar and texts
-
-  const barBox = direction === 'column' || isRtl && direction === 'row' ? {
-    width: thickness,
-    height: size
-  } : {
-    width: size,
-    height: thickness
-  };
-  const legendPositions = getElementPositions(text1Box, barBox, text2Box, {
-    spacing,
-    align,
-    direction
+  }) : 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 svgBoundingBox = {
-    width: width + left + right,
-    height: height + top + bottom
-  };
-  const positionOffset = getPositionOffset(_extends({
-    horizontal: 'middle',
-    vertical: 'top'
-  }, position), legendPositions.boundingBox, svgBoundingBox);
-  return /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [/*#__PURE__*/_jsx(ChartsContinuousGradient, {
-      isReversed: isReversed,
-      gradientId: id,
-      size: size,
-      direction: direction === 'row' ? 'x' : 'y',
-      scale: scale,
-      colorScale: colorScale,
-      colorMap: colorMap,
-      gradientUnits: "objectBoundingBox"
-    }), /*#__PURE__*/_jsx(ChartsText, {
-      text: text1,
-      x: positionOffset.offsetX + legendPositions.text1.x,
-      y: positionOffset.offsetY + legendPositions.text1.y,
-      style: _extends({
-        dominantBaseline: legendPositions.text1.dominantBaseline,
-        textAnchor: legendPositions.text1.textAnchor
-      }, labelStyle)
-    }), /*#__PURE__*/_jsx("rect", _extends({
-      x: positionOffset.offsetX + legendPositions.bar.x,
-      y: positionOffset.offsetY + legendPositions.bar.y
-    }, barBox, {
-      fill: `url(#${id})`
-    })), /*#__PURE__*/_jsx(ChartsText, {
-      text: text2,
-      x: positionOffset.offsetX + legendPositions.text2.x,
-      y: positionOffset.offsetY + legendPositions.text2.y,
-      style: _extends({
-        dominantBaseline: legendPositions.text2.dominantBaseline,
-        textAnchor: legendPositions.text2.textAnchor
-      }, labelStyle)
-    })]
+  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 alignment of the texts with the gradient bar.
-   * @default 'middle'
-   */
-  align: PropTypes.oneOf(['end', 'middle', 'start']),
   /**
    * The axis direction containing the color configuration to represent.
    * @default 'z'
@@ -333,61 +216,55 @@ process.env.NODE_ENV !== "production" ? ContinuousColorLegend.propTypes = {
    */
   axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   /**
-   * The direction of the legend layout.
-   * The default depends on the chart.
+   * Override or extend the styles applied to the component.
    */
-  direction: PropTypes.oneOf(['column', 'row']),
+  classes: PropTypes.object,
+  className: PropTypes.string,
   /**
-   * A unique identifier for the gradient.
-   * @default auto-generated id
+   * The direction of the legend layout.
+   * @default 'horizontal'
    */
-  id: PropTypes.string,
+  direction: PropTypes.oneOf(['horizontal', 'vertical']),
   /**
-   * The style applied to labels.
-   * @default theme.typography.subtitle1
+   * 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
    */
-  labelStyle: PropTypes.object,
+  gradientId: PropTypes.string,
   /**
-   * 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%'
+   * Where to position the labels relative to the gradient.
+   * @default 'end'
    */
-  length: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  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 }) => formattedValue
+   * @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 }) => formattedValue
+   * @default formattedValue
    */
   minLabel: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
   /**
-   * The position of the legend.
-   */
-  position: PropTypes.shape({
-    horizontal: PropTypes.oneOf(['left', 'middle', 'right']).isRequired,
-    vertical: PropTypes.oneOf(['bottom', 'middle', 'top']).isRequired
-  }),
-  /**
-   * The scale used to display gradient colors.
-   * @default 'linear'
+   * If `true`, the gradient and labels will be reversed.
+   * @default false
    */
-  scaleType: PropTypes.oneOf(['linear', 'log', 'pow', 'sqrt', 'time', 'utc']),
+  reverse: PropTypes.bool,
   /**
-   * The space between the gradient bar and the labels.
-   * @default 4
+   * If provided, the gradient will be rotated by 90deg.
+   * Useful for linear gradients that are not in the correct orientation.
    */
-  spacing: PropTypes.number,
+  rotateGradient: PropTypes.bool,
   /**
-   * The thickness of the gradient bar.
-   * @default 5
+   * The thickness of the gradient
+   * @default 12
    */
-  thickness: PropTypes.number
+  thickness: PropTypes.number,
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
 } : void 0;
 export { ContinuousColorLegend };