@mui/x-charts 8.0.0-alpha.6 → 8.0.0-alpha.8

package/node/ChartsLegend/ContinuousColorLegend.js

@@ -1,334 +1,217 @@
 "use strict";
 'use client';
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ContinuousColorLegend = ContinuousColorLegend;
+exports.ContinuousColorLegend = void 0;
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styles = require("@mui/material/styles");
-var _RtlProvider = require("@mui/system/RtlProvider");
-var _ChartsContinuousGradient = _interopRequireDefault(require("../internals/components/ChartsAxesGradients/ChartsContinuousGradient"));
-var _hooks = require("../hooks");
-var _getScale = require("../internals/getScale");
-var _getPercentageValue = require("../internals/getPercentageValue");
-var _ChartsText = require("../ChartsText");
-var _domUtils = require("../internals/domUtils");
+var _clsx = _interopRequireDefault(require("clsx"));
 var _useAxis = require("./useAxis");
+var _ChartsLabel = require("../ChartsLabel/ChartsLabel");
+var _ChartsLabelGradient = require("../ChartsLabel/ChartsLabelGradient");
+var _consumeThemeProps = require("../internals/consumeThemeProps");
+var _continuousColorLegendClasses = require("./continuousColorLegendClasses");
+var _useChartGradientId = require("../hooks/useChartGradientId");
 var _jsxRuntime = require("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 _excluded = ["minLabel", "maxLabel", "direction", "axisDirection", "axisId", "rotateGradient", "reverse", "classes", "className", "gradientId", "labelPosition", "thickness"];
+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: (0, _extends2.default)({}, text1, {
-            textAnchor: 'start',
-            x: 0
-          }),
-          text2: (0, _extends2.default)({}, text2, {
-            textAnchor: 'start',
-            x: 0
-          }),
-          bar: (0, _extends2.default)({}, bar, {
-            x: 0
-          }),
-          boundingBox
-        };
-      case 'end':
-        return {
-          text1: (0, _extends2.default)({}, text1, {
-            textAnchor: 'end',
-            x: totalWidth
-          }),
-          text2: (0, _extends2.default)({}, text2, {
-            textAnchor: 'end',
-            x: totalWidth
-          }),
-          bar: (0, _extends2.default)({}, bar, {
-            x: totalWidth - barBox.width
-          }),
-          boundingBox
-        };
-      case 'middle':
-      default:
-        return {
-          text1: (0, _extends2.default)({}, text1, {
-            textAnchor: 'middle',
-            x: totalWidth / 2
-          }),
-          text2: (0, _extends2.default)({}, text2, {
-            textAnchor: 'middle',
-            x: totalWidth / 2
-          }),
-          bar: (0, _extends2.default)({}, bar, {
-            x: totalWidth / 2 - barBox.width / 2
-          }),
-          boundingBox
-        };
+};
+const RootElement = (0, _styles.styled)('ul', {
+  name: 'MuiContinuousColorLegend',
+  slot: 'Root',
+  overridesResolver: (props, styles) => styles.root
+})(({
+  theme,
+  ownerState
+}) => (0, _extends2.default)({}, 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.continuousColorLegendClasses.horizontal}`]: {
+    gridTemplateRows: 'min-content min-content',
+    gridTemplateColumns: 'min-content auto min-content',
+    [`&.${_continuousColorLegendClasses.continuousColorLegendClasses.start}`]: {
+      gridTemplateAreas: templateAreas(ownerState.reverse).row.start
+    },
+    [`&.${_continuousColorLegendClasses.continuousColorLegendClasses.end}`]: {
+      gridTemplateAreas: templateAreas(ownerState.reverse).row.end
+    },
+    [`&.${_continuousColorLegendClasses.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: (0, _extends2.default)({}, text1, {
-            dominantBaseline: 'hanging',
-            y: 0
-          }),
-          text2: (0, _extends2.default)({}, text2, {
-            dominantBaseline: 'hanging',
-            y: 0
-          }),
-          bar: (0, _extends2.default)({}, bar, {
-            y: 0
-          }),
-          boundingBox
-        };
-      case 'end':
-        return {
-          text1: (0, _extends2.default)({}, text1, {
-            dominantBaseline: 'auto',
-            y: totalHeight
-          }),
-          text2: (0, _extends2.default)({}, text2, {
-            dominantBaseline: 'auto',
-            y: totalHeight
-          }),
-          bar: (0, _extends2.default)({}, bar, {
-            y: totalHeight - barBox.height
-          }),
-          boundingBox
-        };
-      case 'middle':
-      default:
-        return {
-          text1: (0, _extends2.default)({}, text1, {
-            dominantBaseline: 'central',
-            y: totalHeight / 2
-          }),
-          text2: (0, _extends2.default)({}, text2, {
-            dominantBaseline: 'central',
-            y: totalHeight / 2
-          }),
-          bar: (0, _extends2.default)({}, bar, {
-            y: totalHeight / 2 - barBox.height / 2
-          }),
-          boundingBox
-        };
+  },
+  [`&.${_continuousColorLegendClasses.continuousColorLegendClasses.vertical}`]: {
+    gridTemplateRows: 'min-content auto min-content',
+    gridTemplateColumns: 'min-content min-content',
+    [`&.${_continuousColorLegendClasses.continuousColorLegendClasses.start}`]: {
+      gridTemplateAreas: templateAreas(ownerState.reverse).column.start,
+      [`.${_continuousColorLegendClasses.continuousColorLegendClasses.maxLabel}, .${_continuousColorLegendClasses.continuousColorLegendClasses.minLabel}`]: {
+        justifySelf: 'end'
+      }
+    },
+    [`&.${_continuousColorLegendClasses.continuousColorLegendClasses.end}`]: {
+      gridTemplateAreas: templateAreas(ownerState.reverse).column.end,
+      [`.${_continuousColorLegendClasses.continuousColorLegendClasses.maxLabel}, .${_continuousColorLegendClasses.continuousColorLegendClasses.minLabel}`]: {
+        justifySelf: 'start'
+      }
+    },
+    [`&.${_continuousColorLegendClasses.continuousColorLegendClasses.extremes}`]: {
+      gridTemplateAreas: templateAreas(ownerState.reverse).column.extremes,
+      gridTemplateColumns: 'min-content',
+      [`.${_continuousColorLegendClasses.continuousColorLegendClasses.maxLabel}, .${_continuousColorLegendClasses.continuousColorLegendClasses.minLabel}`]: {
+        justifySelf: 'center'
+      }
     }
+  },
+  [`.${_continuousColorLegendClasses.continuousColorLegendClasses.gradient}`]: {
+    gridArea: 'gradient'
+  },
+  [`.${_continuousColorLegendClasses.continuousColorLegendClasses.maxLabel}`]: {
+    gridArea: 'max-label'
+  },
+  [`.${_continuousColorLegendClasses.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 = (0, _styles.useTheme)();
-  const isRtl = (0, _RtlProvider.useRtl)();
+  return label?.({
+    value,
+    formattedValue
+  }) ?? formattedValue;
+};
+const ContinuousColorLegend = exports.ContinuousColorLegend = (0, _consumeThemeProps.consumeThemeProps)('MuiContinuousColorLegend', {
+  defaultProps: {
+    direction: 'horizontal',
+    labelPosition: 'end',
+    axisDirection: 'z'
+  },
+  classesResolver: _continuousColorLegendClasses.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 = (0, _hooks.useChartId)();
-  const id = idProp ?? `gradient-legend-${chartId}`;
+      minLabel,
+      maxLabel,
+      direction,
+      axisDirection,
+      axisId,
+      rotateGradient,
+      reverse,
+      classes,
+      className,
+      gradientId,
+      thickness
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const generateGradientId = (0, _useChartGradientId.useChartGradientIdObjectBoundBuilder)();
   const axisItem = (0, _useAxis.useAxis)({
     axisDirection,
     axisId
   });
-  const {
-    width,
-    height,
-    left,
-    right,
-    top,
-    bottom
-  } = (0, _hooks.useDrawingArea)();
-  const refLength = direction === 'column' ? height + top + bottom : width + left + right;
-  const size = (0, _getPercentageValue.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 = (0, _getScale.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
+  }) : maxValue.toLocaleString();
+  const minText = getText(minLabel, minValue, formattedMin);
+  const maxText = getText(maxLabel, maxValue, formattedMax);
+  const minComponent = /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+    className: classes?.minLabel,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLabel.ChartsLabel, {
+      className: classes?.label,
+      children: minText
+    })
   });
-  const maxText = typeof maxLabel === 'string' ? maxLabel : maxLabel({
-    value: maxValue ?? 0,
-    formattedValue: formattedMax
+  const maxComponent = /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+    className: classes?.maxLabel,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLabel.ChartsLabel, {
+      className: classes?.label,
+      children: maxText
+    })
   });
-  const text1 = isReversed ? maxText : minText;
-  const text2 = isReversed ? minText : maxText;
-  const text1Box = (0, _domUtils.getStringSize)(text1, (0, _extends2.default)({}, labelStyle));
-  const text2Box = (0, _domUtils.getStringSize)(text2, (0, _extends2.default)({}, 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
-  });
-  const svgBoundingBox = {
-    width: width + left + right,
-    height: height + top + bottom
-  };
-  const positionOffset = getPositionOffset((0, _extends2.default)({
-    horizontal: 'middle',
-    vertical: 'top'
-  }, position), legendPositions.boundingBox, svgBoundingBox);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsContinuousGradient.default, {
-      isReversed: isReversed,
-      gradientId: id,
-      size: size,
-      direction: direction === 'row' ? 'x' : 'y',
-      scale: scale,
-      colorScale: colorScale,
-      colorMap: colorMap,
-      gradientUnits: "objectBoundingBox"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsText.ChartsText, {
-      text: text1,
-      x: positionOffset.offsetX + legendPositions.text1.x,
-      y: positionOffset.offsetY + legendPositions.text1.y,
-      style: (0, _extends2.default)({
-        dominantBaseline: legendPositions.text1.dominantBaseline,
-        textAnchor: legendPositions.text1.textAnchor
-      }, labelStyle)
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("rect", (0, _extends2.default)({
-      x: positionOffset.offsetX + legendPositions.bar.x,
-      y: positionOffset.offsetY + legendPositions.bar.y
-    }, barBox, {
-      fill: `url(#${id})`
-    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsText.ChartsText, {
-      text: text2,
-      x: positionOffset.offsetX + legendPositions.text2.x,
-      y: positionOffset.offsetY + legendPositions.text2.y,
-      style: (0, _extends2.default)({
-        dominantBaseline: legendPositions.text2.dominantBaseline,
-        textAnchor: legendPositions.text2.textAnchor
-      }, labelStyle)
-    })]
-  });
-}
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(RootElement, (0, _extends2.default)({
+    className: (0, _clsx.default)(classes?.root, className),
+    ref: ref
+  }, other, {
+    ownerState: props,
+    children: [reverse ? maxComponent : minComponent, /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+      className: classes?.gradient,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLabelGradient.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.default.oneOf(['end', 'middle', 'start']),
   /**
    * The axis direction containing the color configuration to represent.
    * @default 'z'
@@ -340,60 +223,54 @@ process.env.NODE_ENV !== "production" ? ContinuousColorLegend.propTypes = {
    */
   axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
   /**
-   * The direction of the legend layout.
-   * The default depends on the chart.
+   * Override or extend the styles applied to the component.
    */
-  direction: _propTypes.default.oneOf(['column', 'row']),
+  classes: _propTypes.default.object,
+  className: _propTypes.default.string,
   /**
-   * A unique identifier for the gradient.
-   * @default auto-generated id
+   * The direction of the legend layout.
+   * @default 'horizontal'
    */
-  id: _propTypes.default.string,
+  direction: _propTypes.default.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.default.object,
+  gradientId: _propTypes.default.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.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+  labelPosition: _propTypes.default.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.default.oneOfType([_propTypes.default.func, _propTypes.default.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.default.oneOfType([_propTypes.default.func, _propTypes.default.string]),
   /**
-   * The position of the legend.
-   */
-  position: _propTypes.default.shape({
-    horizontal: _propTypes.default.oneOf(['left', 'middle', 'right']).isRequired,
-    vertical: _propTypes.default.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.default.oneOf(['linear', 'log', 'pow', 'sqrt', 'time', 'utc']),
+  reverse: _propTypes.default.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.default.number,
+  rotateGradient: _propTypes.default.bool,
   /**
-   * The thickness of the gradient bar.
-   * @default 5
+   * The thickness of the gradient
+   * @default 12
    */
-  thickness: _propTypes.default.number
+  thickness: _propTypes.default.number,
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object])
 } : void 0;