@mui/x-charts 6.0.0-alpha.8 → 6.18.0

package/modern/ChartsLegend/ChartsLegend.js

@@ -1,12 +1,17 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
+const _excluded = ["rotate", "dominantBaseline"],
+  _excluded2 = ["label"];
 import * as React from 'react';
 import { useSlotProps } from '@mui/base/utils';
+import { NoSsr } from '@mui/base/NoSsr';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
 import { useThemeProps, useTheme, styled } from '@mui/material/styles';
 import { DrawingContext } from '../context/DrawingProvider';
 import { getSeriesToDisplay } from './utils';
 import { SeriesContext } from '../context/SeriesContextProvider';
 import { getChartsLegendUtilityClass } from './chartsLegendClasses';
+import { ChartsText, getWordsByLines } from '../internals/components/ChartsText';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
@@ -22,167 +27,210 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getChartsLegendUtilityClass, classes);
 };
-function getTranslePosition({
-  position,
-  drawingArea
-}) {
-  let xValue;
-  switch (position.horizontal) {
-    case 'left':
-      xValue = `calc(var(--ChartsLegend-rootOffsetX, 0px) + ${drawingArea.left}px - var(--ChartsLegend-rootWidth))`;
-      break;
-    case 'middle':
-      xValue = `calc(var(--ChartsLegend-rootOffsetX, 0px) + ${drawingArea.left + drawingArea.width / 2}px - 0.5 * var(--ChartsLegend-rootWidth))`;
-      break;
-    default:
-      xValue = `calc(var(--ChartsLegend-rootOffsetX, 0px) + ${drawingArea.left + drawingArea.width}px)`;
-      break;
-  }
-  let yValue;
-  switch (position.vertical) {
-    case 'top':
-      yValue = `calc(var(--ChartsLegend-rootOffsetY, 0px) + ${drawingArea.top}px - var(--ChartsLegend-rootHeight))`;
-      break;
-    case 'middle':
-      yValue = `calc(var(--ChartsLegend-rootOffsetY, 0px) + ${drawingArea.top + drawingArea.height / 2}px - 0.5 * var(--ChartsLegend-rootHeight))`;
-      break;
-    default:
-      yValue = `calc(var(--ChartsLegend-rootOffsetY, 0px) + ${drawingArea.top + drawingArea.height}px)`;
-      break;
-  }
-  return {
-    transform: `translate(${xValue}, ${yValue})`
-  };
-}
 export const ChartsLegendRoot = styled('g', {
   name: 'MuiChartsLegend',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root
-})(({
-  ownerState
-}) => {
-  const {
-    direction,
-    drawingArea,
-    offsetX,
-    offsetY,
-    seriesNumber,
-    position
-  } = ownerState;
-  return _extends({
-    '--ChartsLegend-rootOffsetX': typeof offsetX === 'number' ? `${offsetX}px` : undefined,
-    '--ChartsLegend-rootOffsetY': typeof offsetY === 'number' ? `${offsetY}px` : undefined,
-    '--ChartsLegend-rootWidth': direction === 'row' ? `calc(var(--ChartsLegend-itemWidth) * ${seriesNumber} + var(--ChartsLegend-rootSpacing) * ${seriesNumber - 1} )` : 'var(--ChartsLegend-itemWidth)',
-    '--ChartsLegend-rootHeight': direction === 'row' ? 'var(--ChartsLegend-itemMarkSize)' : `calc(var(--ChartsLegend-itemMarkSize) * ${seriesNumber} + var(--ChartsLegend-rootSpacing) * ${seriesNumber - 1} )`
-  }, getTranslePosition({
-    position,
-    drawingArea,
-    offsetX,
-    offsetY
-  }));
-});
-export const ChartsSeriesLegendGroup = styled('g', {
-  name: 'MuiChartsLegend',
-  slot: 'ChartsSeriesLegendGroup',
-  overridesResolver: (props, styles) => styles.series
-})(({
-  ownerState
-}) => {
-  const {
-    direction,
-    seriesIndex
-  } = ownerState;
-  if (direction === 'row') {
-    return {
-      transform: `translate(calc(${seriesIndex} * (var(--ChartsLegend-itemWidth) + var(--ChartsLegend-rootSpacing))), 0)`
-    };
-  }
-  return {
-    transform: `translate(0, calc(${seriesIndex} * (var(--ChartsLegend-itemMarkSize) + var(--ChartsLegend-rootSpacing))))`
-  };
-});
-export const ChartsLegendMark = styled('rect', {
-  name: 'MuiChartsLegend',
-  slot: 'Mark',
-  overridesResolver: (props, styles) => styles.mark
-})(({
-  ownerState
-}) => ({
-  x: 0,
-  y: 0,
-  width: 'var(--ChartsLegend-itemMarkSize)',
-  height: 'var(--ChartsLegend-itemMarkSize)',
-  fill: ownerState.color
-}));
-export const ChartsLegendLabel = styled('text', {
-  name: 'MuiChartsLegend',
-  slot: 'Label',
-  overridesResolver: (props, styles) => styles.label
-})(({
-  theme
-}) => _extends({}, theme.typography.body1, {
-  color: 'inherit',
-  transform: `translate(
-      calc(var(--ChartsLegend-itemMarkSize) + var(--ChartsLegend-labelSpacing)),
-      calc(0.5 * var(--ChartsLegend-itemMarkSize))
-      )`,
-  fill: theme.palette.text.primary,
-  dominantBaseline: 'central'
-}));
+})({});
 const defaultProps = {
   position: {
     horizontal: 'middle',
     vertical: 'top'
   },
-  direction: 'row',
-  markSize: 20,
-  itemWidth: 100,
-  spacing: 2
+  direction: 'row'
+};
+/**
+ * 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);
 };
 function DefaultChartsLegend(props) {
   const {
     hidden,
     position,
     direction,
-    offset,
-    series,
     seriesToDisplay,
     drawingArea,
-    classes
+    classes,
+    itemMarkWidth = 20,
+    itemMarkHeight = 20,
+    markGap = 5,
+    itemGap = 10,
+    padding: paddingProps = 10,
+    labelStyle: inLabelStyle
   } = props;
+  const theme = useTheme();
+  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 = 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;
+    });
+
+    // Move the legend according to padding and position
+    let gapX = 0;
+    let gapY = 0;
+    switch (position.horizontal) {
+      case 'left':
+        gapX = padding.left;
+        break;
+      case 'right':
+        gapX = totalWidth - padding.right - totalWidthUsed;
+        break;
+      default:
+        gapX = (totalWidth - totalWidthUsed) / 2;
+        break;
+    }
+    switch (position.vertical) {
+      case 'top':
+        gapY = padding.top;
+        break;
+      case 'bottom':
+        gapY = totalHeight - padding.bottom - totalHeightUsed;
+        break;
+      default:
+        gapY = (totalHeight - totalHeightUsed) / 2;
+        break;
+    }
+    return seriesWithRawPosition.map(item => _extends({}, item, {
+      // Add the gap due to the position
+      positionX: item.positionX + gapX,
+      // Add the gap due to the position
+      positionY: item.positionY + gapY + (direction === 'row' ? rowMaxHeight[item.rowIndex] / 2 // Get the center of the entire row
+      : item.outerHeight / 2) // Get the center of the item
+    }));
+  }, [seriesToDisplay, position.horizontal, position.vertical, getItemSpace, labelStyle, direction, availableWidth, availableHeight, itemGap, padding.left, padding.right, padding.top, padding.bottom, totalWidth, totalHeight]);
   if (hidden) {
     return null;
   }
-  return /*#__PURE__*/_jsx(ChartsLegendRoot, {
-    ownerState: {
-      direction,
-      offsetX: offset?.x,
-      offsetY: offset?.y,
-      seriesNumber: seriesToDisplay.length,
-      position,
-      drawingArea
-    },
-    className: classes.root,
-    children: seriesToDisplay.map(({
-      id,
-      label,
-      color
-    }, seriesIndex) => /*#__PURE__*/_jsxs(ChartsSeriesLegendGroup, {
-      ownerState: _extends({
-        direction,
-        seriesIndex
-      }, series),
-      className: classes.series,
-      children: [/*#__PURE__*/_jsx(ChartsLegendMark, {
-        ownerState: {
-          color
-        },
-        className: classes.mark
-      }), /*#__PURE__*/_jsx(ChartsLegendLabel, {
-        className: classes.label,
-        children: label
-      })]
-    }, id))
+  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(${positionX} ${positionY})`,
+        children: [/*#__PURE__*/_jsx("rect", {
+          className: classes.mark,
+          y: -itemMarkHeight / 2,
+          width: itemMarkWidth,
+          height: itemMarkHeight,
+          fill: color
+        }), /*#__PURE__*/_jsx(ChartsText, {
+          style: labelStyle,
+          text: label,
+          x: itemMarkWidth + markGap,
+          y: 0
+        })]
+      }, id))
+    })
   });
 }
 export function ChartsLegend(inProps) {
@@ -193,7 +241,6 @@ export function ChartsLegend(inProps) {
   const {
     position,
     direction,
-    offset,
     hidden,
     slots,
     slotProps
@@ -212,7 +259,6 @@ export function ChartsLegend(inProps) {
     additionalProps: {
       position,
       direction,
-      offset,
       classes,
       drawingArea,
       series,

package/modern/ChartsSurface.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["children", "width", "height", "viewBox", "disableAxisListener", "className", "sx"];
-import { styled } from '@mui/system';
+const _excluded = ["children", "width", "height", "viewBox", "disableAxisListener", "className"];
+import { styled } from '@mui/material/styles';
 import * as React from 'react';
 import { useAxisEvents } from './hooks/useAxisEvents';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -16,8 +16,7 @@ export const ChartsSurface = /*#__PURE__*/React.forwardRef(function ChartsSurfac
       width,
       height,
       viewBox,
-      disableAxisListener = false,
-      sx
+      disableAxisListener = false
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const svgView = _extends({
@@ -31,14 +30,7 @@ export const ChartsSurface = /*#__PURE__*/React.forwardRef(function ChartsSurfac
     width: width,
     height: height,
     viewBox: `${svgView.x} ${svgView.y} ${svgView.width} ${svgView.height}`,
-    ref: ref,
-    sx: [{
-      '--ChartsLegend-itemWidth': '100px',
-      '--ChartsLegend-itemMarkSize': '20px',
-      '--ChartsLegend-rootSpacing': '5px',
-      '--ChartsLegend-labelSpacing': '5px',
-      '--ChartsLegend-rootOffsetY': '-20px'
-    }, ...(Array.isArray(sx) ? sx : [sx])]
+    ref: ref
   }, other, {
     children: [/*#__PURE__*/_jsx("title", {
       children: props.title

package/modern/ChartsTooltip/ChartsAxisTooltipContent.js

@@ -1,5 +1,7 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import Typography from '@mui/material/Typography';
+import { useSlotProps } from '@mui/base/utils';
 import { SeriesContext } from '../context/SeriesContextProvider';
 import { CartesianContext } from '../context/CartesianContextProvider';
 import { ChartsTooltipCell, ChartsTooltipPaper, ChartsTooltipTable, ChartsTooltipMark, ChartsTooltipRow } from './ChartsTooltipTable';
@@ -20,7 +22,6 @@ export function DefaultChartsAxisContent(props) {
   const axisFormatter = axis.valueFormatter ?? (v => v.toLocaleString());
   return /*#__PURE__*/_jsx(ChartsTooltipPaper, {
     sx: sx,
-    variant: "outlined",
     className: classes.root,
     children: /*#__PURE__*/_jsxs(ChartsTooltipTable, {
       children: [axisValue != null && !axis.hideTooltip && /*#__PURE__*/_jsx("thead", {
@@ -39,27 +40,33 @@ export function DefaultChartsAxisContent(props) {
           label,
           valueFormatter,
           data
-        }) => /*#__PURE__*/_jsxs(ChartsTooltipRow, {
-          children: [/*#__PURE__*/_jsx(ChartsTooltipCell, {
-            className: classes.markCell,
-            children: /*#__PURE__*/_jsx(ChartsTooltipMark, {
-              ownerState: {
-                color
-              },
-              boxShadow: 1
-            })
-          }), /*#__PURE__*/_jsx(ChartsTooltipCell, {
-            className: classes.labelCell,
-            children: label ? /*#__PURE__*/_jsx(Typography, {
-              children: label
-            }) : null
-          }), /*#__PURE__*/_jsx(ChartsTooltipCell, {
-            className: classes.valueCell,
-            children: /*#__PURE__*/_jsx(Typography, {
-              children: valueFormatter(data[dataIndex])
-            })
-          })]
-        }, id))
+        }) => {
+          const formattedValue = valueFormatter(data[dataIndex]);
+          if (formattedValue == null) {
+            return null;
+          }
+          return /*#__PURE__*/_jsxs(ChartsTooltipRow, {
+            children: [/*#__PURE__*/_jsx(ChartsTooltipCell, {
+              className: classes.markCell,
+              children: /*#__PURE__*/_jsx(ChartsTooltipMark, {
+                ownerState: {
+                  color
+                },
+                boxShadow: 1
+              })
+            }), /*#__PURE__*/_jsx(ChartsTooltipCell, {
+              className: classes.labelCell,
+              children: label ? /*#__PURE__*/_jsx(Typography, {
+                children: label
+              }) : null
+            }), /*#__PURE__*/_jsx(ChartsTooltipCell, {
+              className: classes.valueCell,
+              children: /*#__PURE__*/_jsx(Typography, {
+                children: formattedValue
+              })
+            })]
+          }, id);
+        })
       })]
     })
   });
@@ -67,6 +74,7 @@ export function DefaultChartsAxisContent(props) {
 export function ChartsAxisTooltipContent(props) {
   const {
     content,
+    contentProps,
     axisData,
     sx,
     classes
@@ -99,13 +107,19 @@ export function ChartsAxisTooltipContent(props) {
     return isXaxis ? xAxis[USED_AXIS_ID] : yAxis[USED_AXIS_ID];
   }, [USED_AXIS_ID, isXaxis, xAxis, yAxis]);
   const Content = content ?? DefaultChartsAxisContent;
-  return /*#__PURE__*/_jsx(Content, {
-    axisData: axisData,
-    series: relevantSeries,
-    axis: relevantAxis,
-    dataIndex: dataIndex,
-    axisValue: axisValue,
-    sx: sx,
-    classes: classes
+  const chartTooltipContentProps = useSlotProps({
+    elementType: Content,
+    externalSlotProps: contentProps,
+    additionalProps: {
+      axisData,
+      series: relevantSeries,
+      axis: relevantAxis,
+      dataIndex,
+      axisValue,
+      sx,
+      classes
+    },
+    ownerState: {}
   });
+  return /*#__PURE__*/_jsx(Content, _extends({}, chartTooltipContentProps));
 }

package/modern/ChartsTooltip/ChartsItemTooltipContent.js

@@ -1,4 +1,6 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import { useSlotProps } from '@mui/base/utils';
 import { SeriesContext } from '../context/SeriesContextProvider';
 import { ChartsTooltipTable, ChartsTooltipCell, ChartsTooltipMark, ChartsTooltipPaper, ChartsTooltipRow } from './ChartsTooltipTable';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -29,7 +31,6 @@ export function DefaultChartsItemContent(props) {
   const formattedValue = series.valueFormatter(series.data[itemData.dataIndex]);
   return /*#__PURE__*/_jsx(ChartsTooltipPaper, {
     sx: sx,
-    variant: "outlined",
     className: classes.root,
     children: /*#__PURE__*/_jsx(ChartsTooltipTable, {
       children: /*#__PURE__*/_jsx("tbody", {
@@ -58,14 +59,21 @@ export function ChartsItemTooltipContent(props) {
     content,
     itemData,
     sx,
-    classes
+    classes,
+    contentProps
   } = props;
   const series = React.useContext(SeriesContext)[itemData.type].series[itemData.seriesId];
   const Content = content ?? DefaultChartsItemContent;
-  return /*#__PURE__*/_jsx(Content, {
-    itemData: itemData,
-    series: series,
-    sx: sx,
-    classes: classes
+  const chartTooltipContentProps = useSlotProps({
+    elementType: Content,
+    externalSlotProps: contentProps,
+    additionalProps: {
+      itemData,
+      series,
+      sx,
+      classes
+    },
+    ownerState: {}
   });
+  return /*#__PURE__*/_jsx(Content, _extends({}, chartTooltipContentProps));
 }