@mui/x-charts 7.9.0 → 7.11.0

package/modern/ChartsLegend/ContinuousColorLegend.js

@@ -0,0 +1,390 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { useTheme } from '@mui/material/styles';
+import ChartsContinuousGradient from '../internals/components/ChartsAxesGradients/ChartsContinuousGradient';
+import { useChartId, useDrawingArea } from '../hooks';
+import { getScale } from '../internals/getScale';
+import { getPercentageValue } from '../internals/getPercentageValue';
+import { ChartsText } from '../ChartsText';
+import { getStringSize } from '../internals/domUtils';
+import { useAxis } from './useAxis';
+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;
+  }
+  return {
+    offsetX,
+    offsetY
+  };
+}
+
+/**
+ * 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
+        };
+    }
+  } 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
+        };
+    }
+  }
+}
+const defaultLabelFormatter = ({
+  formattedValue
+}) => formattedValue;
+function ContinuousColorLegend(props) {
+  const theme = useTheme();
+  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}`;
+  const isRTL = theme.direction === 'rtl';
+  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, {
+    location: 'legend'
+  }) ?? minValue.toLocaleString();
+  const formattedMax = axisItem.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
+  });
+  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)
+    })]
+  });
+}
+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'
+   */
+  axisDirection: PropTypes.oneOf(['x', 'y', 'z']),
+  /**
+   * The id of the axis item with the color configuration to represent.
+   * @default The first axis item.
+   */
+  axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  /**
+   * The direction of the legend layout.
+   * The default depends on the chart.
+   */
+  direction: PropTypes.oneOf(['column', 'row']),
+  /**
+   * A unique identifier for the gradient.
+   * @default auto-generated id
+   */
+  id: PropTypes.string,
+  /**
+   * The style applied to labels.
+   * @default theme.typography.subtitle1
+   */
+  labelStyle: PropTypes.object,
+  /**
+   * 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%'
+   */
+  length: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  /**
+   * 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
+   */
+  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
+   */
+  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'
+   */
+  scaleType: PropTypes.oneOf(['linear', 'log', 'pow', 'sqrt', 'time', 'utc']),
+  /**
+   * The space between the gradient bar and the labels.
+   * @default 4
+   */
+  spacing: PropTypes.number,
+  /**
+   * The thickness of the gradient bar.
+   * @default 5
+   */
+  thickness: PropTypes.number
+} : void 0;
+export { ContinuousColorLegend };

package/modern/ChartsLegend/DefaultChartsLegend.js

@@ -1,205 +1,18 @@
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["rotate", "dominantBaseline"],
-  _excluded2 = ["label"];
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["drawingArea", "seriesToDisplay"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { NoSsr } from '@mui/base/NoSsr';
-import { useTheme, styled } from '@mui/material/styles';
-import { ChartsText } from '../ChartsText';
-import { getWordsByLines } from '../internals/getWordsByLines';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const ChartsLegendRoot = styled('g', {
-  name: 'MuiChartsLegend',
-  slot: 'Root',
-  overridesResolver: (props, styles) => styles.root
-})({});
-/**
- * Transforms number or partial padding object to a defaultized padding object.
- */
-const getStandardizedPadding = padding => {
-  if (typeof padding === 'number') {
-    return {
-      left: padding,
-      right: padding,
-      top: padding,
-      bottom: padding
-    };
-  }
-  return _extends({
-    left: 0,
-    right: 0,
-    top: 0,
-    bottom: 0
-  }, padding);
-};
+import { LegendPerItem } from './LegendPerItem';
+import { jsx as _jsx } from "react/jsx-runtime";
 function DefaultChartsLegend(props) {
   const {
-    hidden,
-    position,
-    direction,
-    seriesToDisplay,
-    drawingArea,
-    classes,
-    itemMarkWidth = 20,
-    itemMarkHeight = 20,
-    markGap = 5,
-    itemGap = 10,
-    padding: paddingProps = 10,
-    labelStyle: inLabelStyle
-  } = props;
-  const theme = useTheme();
-  const isRTL = theme.direction === 'rtl';
-  const labelStyle = React.useMemo(() => _extends({}, theme.typography.subtitle1, {
-    color: 'inherit',
-    dominantBaseline: 'central',
-    textAnchor: 'start',
-    fill: (theme.vars || theme).palette.text.primary,
-    lineHeight: 1
-  }, inLabelStyle),
-  // To say to TS that the dominantBaseline and textAnchor are correct
-  [inLabelStyle, theme]);
-  const padding = React.useMemo(() => getStandardizedPadding(paddingProps), [paddingProps]);
-  const getItemSpace = React.useCallback((label, inStyle = {}) => {
-    const style = _objectWithoutPropertiesLoose(inStyle, _excluded);
-    const linesSize = getWordsByLines({
-      style,
-      needsComputation: true,
-      text: label
-    });
-    const innerSize = {
-      innerWidth: itemMarkWidth + markGap + Math.max(...linesSize.map(size => size.width)),
-      innerHeight: Math.max(itemMarkHeight, linesSize.length * linesSize[0].height)
-    };
-    return _extends({}, innerSize, {
-      outerWidth: innerSize.innerWidth + itemGap,
-      outerHeight: innerSize.innerHeight + itemGap
-    });
-  }, [itemGap, itemMarkHeight, itemMarkWidth, markGap]);
-  const totalWidth = drawingArea.left + drawingArea.width + drawingArea.right;
-  const totalHeight = drawingArea.top + drawingArea.height + drawingArea.bottom;
-  const availableWidth = totalWidth - padding.left - padding.right;
-  const availableHeight = totalHeight - padding.top - padding.bottom;
-  const [seriesWithPosition, legendWidth, legendHeight] = React.useMemo(() => {
-    // Start at 0, 0. Will be modified later by padding and position.
-    let x = 0;
-    let y = 0;
-
-    // total values used to align legend later.
-    let totalWidthUsed = 0;
-    let totalHeightUsed = 0;
-    let rowIndex = 0;
-    const rowMaxHeight = [0];
-    const seriesWithRawPosition = seriesToDisplay.map(_ref => {
-      let {
-          label
-        } = _ref,
-        other = _objectWithoutPropertiesLoose(_ref, _excluded2);
-      const itemSpace = getItemSpace(label, labelStyle);
-      const rep = _extends({}, other, {
-        label,
-        positionX: x,
-        positionY: y,
-        innerHeight: itemSpace.innerHeight,
-        innerWidth: itemSpace.innerWidth,
-        outerHeight: itemSpace.outerHeight,
-        outerWidth: itemSpace.outerWidth,
-        rowIndex
-      });
-      if (direction === 'row') {
-        if (x + itemSpace.innerWidth > availableWidth) {
-          // This legend item would create overflow along the x-axis, so we start a new row.
-          x = 0;
-          y += rowMaxHeight[rowIndex];
-          rowIndex += 1;
-          if (rowMaxHeight.length <= rowIndex) {
-            rowMaxHeight.push(0);
-          }
-          rep.positionX = x;
-          rep.positionY = y;
-          rep.rowIndex = rowIndex;
-        }
-        totalWidthUsed = Math.max(totalWidthUsed, x + itemSpace.outerWidth);
-        totalHeightUsed = Math.max(totalHeightUsed, y + itemSpace.outerHeight);
-        rowMaxHeight[rowIndex] = Math.max(rowMaxHeight[rowIndex], itemSpace.outerHeight);
-        x += itemSpace.outerWidth;
-      }
-      if (direction === 'column') {
-        if (y + itemSpace.innerHeight > availableHeight) {
-          // This legend item would create overflow along the y-axis, so we start a new column.
-          x = totalWidthUsed + itemGap;
-          y = 0;
-          rowIndex = 0;
-          rep.positionX = x;
-          rep.positionY = y;
-          rep.rowIndex = rowIndex;
-        }
-        if (rowMaxHeight.length <= rowIndex) {
-          rowMaxHeight.push(0);
-        }
-        totalWidthUsed = Math.max(totalWidthUsed, x + itemSpace.outerWidth);
-        totalHeightUsed = Math.max(totalHeightUsed, y + itemSpace.outerHeight);
-        rowIndex += 1;
-        y += itemSpace.outerHeight;
-      }
-      return rep;
-    });
-    return [seriesWithRawPosition.map(item => _extends({}, item, {
-      positionY: item.positionY + (direction === 'row' ? rowMaxHeight[item.rowIndex] / 2 // Get the center of the entire row
-      : item.outerHeight / 2) // Get the center of the item
-    })), totalWidthUsed, totalHeightUsed];
-  }, [seriesToDisplay, getItemSpace, labelStyle, direction, availableWidth, availableHeight, itemGap]);
-  const gapX = React.useMemo(() => {
-    switch (position.horizontal) {
-      case 'left':
-        return padding.left;
-      case 'right':
-        return totalWidth - padding.right - legendWidth;
-      default:
-        return (totalWidth - legendWidth) / 2;
-    }
-  }, [position.horizontal, padding.left, padding.right, totalWidth, legendWidth]);
-  const gapY = React.useMemo(() => {
-    switch (position.vertical) {
-      case 'top':
-        return padding.top;
-      case 'bottom':
-        return totalHeight - padding.bottom - legendHeight;
-      default:
-        return (totalHeight - legendHeight) / 2;
-    }
-  }, [position.vertical, padding.top, padding.bottom, totalHeight, legendHeight]);
-  if (hidden) {
-    return null;
-  }
-  return /*#__PURE__*/_jsx(NoSsr, {
-    children: /*#__PURE__*/_jsx(ChartsLegendRoot, {
-      className: classes.root,
-      children: seriesWithPosition.map(({
-        id,
-        label,
-        color,
-        positionX,
-        positionY
-      }) => /*#__PURE__*/_jsxs("g", {
-        className: classes.series,
-        transform: `translate(${gapX + (isRTL ? legendWidth - positionX : positionX)} ${gapY + positionY})`,
-        children: [/*#__PURE__*/_jsx("rect", {
-          className: classes.mark,
-          x: isRTL ? -itemMarkWidth : 0,
-          y: -itemMarkHeight / 2,
-          width: itemMarkWidth,
-          height: itemMarkHeight,
-          fill: color
-        }), /*#__PURE__*/_jsx(ChartsText, {
-          style: labelStyle,
-          text: label,
-          x: (isRTL ? -1 : 1) * (itemMarkWidth + markGap),
-          y: 0
-        })]
-      }, id))
-    })
-  });
+      seriesToDisplay
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  return /*#__PURE__*/_jsx(LegendPerItem, _extends({}, other, {
+    itemsToDisplay: seriesToDisplay
+  }));
 }
 process.env.NODE_ENV !== "production" ? DefaultChartsLegend.propTypes = {
   // ----------------------------- Warning --------------------------------
@@ -209,12 +22,15 @@ process.env.NODE_ENV !== "production" ? DefaultChartsLegend.propTypes = {
   /**
    * Override or extend the styles applied to the component.
    */
-  classes: PropTypes.object.isRequired,
+  classes: PropTypes.object,
   /**
    * The direction of the legend layout.
    * The default depends on the chart.
    */
   direction: PropTypes.oneOf(['column', 'row']).isRequired,
+  /**
+   * @deprecated Use the `useDrawingArea` hook instead.
+   */
   drawingArea: PropTypes.shape({
     bottom: PropTypes.number.isRequired,
     height: PropTypes.number.isRequired,