@mui/x-charts
Version:
The community edition of the charts components (MUI X).
421 lines (419 loc) • 14.9 kB
JavaScript
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _extends from "@babel/runtime/helpers/esm/extends";
var _excluded = ["rotate", "dominantBaseline"],
_excluded2 = ["label"];
import * as React from 'react';
import PropTypes from 'prop-types';
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 { getLegendUtilityClass } from './chartsLegendClasses';
import { ChartsText } from '../ChartsText';
import { getWordsByLines } from '../internals/getWordsByLines';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
var useUtilityClasses = function useUtilityClasses(ownerState) {
var classes = ownerState.classes,
direction = ownerState.direction;
var slots = {
root: ['root', direction],
mark: ['mark'],
label: ['label'],
series: ['series']
};
return composeClasses(slots, getLegendUtilityClass, classes);
};
export var ChartsLegendRoot = styled('g', {
name: 'MuiChartsLegend',
slot: 'Root',
overridesResolver: function overridesResolver(props, styles) {
return styles.root;
}
})({});
var defaultProps = {
position: {
horizontal: 'middle',
vertical: 'top'
},
direction: 'row'
};
/**
* Transforms number or partial padding object to a defaultized padding object.
*/
var getStandardizedPadding = function 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) {
var hidden = props.hidden,
position = props.position,
direction = props.direction,
seriesToDisplay = props.seriesToDisplay,
drawingArea = props.drawingArea,
classes = props.classes,
_props$itemMarkWidth = props.itemMarkWidth,
itemMarkWidth = _props$itemMarkWidth === void 0 ? 20 : _props$itemMarkWidth,
_props$itemMarkHeight = props.itemMarkHeight,
itemMarkHeight = _props$itemMarkHeight === void 0 ? 20 : _props$itemMarkHeight,
_props$markGap = props.markGap,
markGap = _props$markGap === void 0 ? 5 : _props$markGap,
_props$itemGap = props.itemGap,
itemGap = _props$itemGap === void 0 ? 10 : _props$itemGap,
_props$padding = props.padding,
paddingProps = _props$padding === void 0 ? 10 : _props$padding,
inLabelStyle = props.labelStyle;
var theme = useTheme();
var labelStyle = React.useMemo(function () {
return _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]);
var padding = React.useMemo(function () {
return getStandardizedPadding(paddingProps);
}, [paddingProps]);
var getItemSpace = React.useCallback(function (label) {
var inStyle = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
var rotate = inStyle.rotate,
dominantBaseline = inStyle.dominantBaseline,
style = _objectWithoutProperties(inStyle, _excluded);
var linesSize = getWordsByLines({
style: style,
needsComputation: true,
text: label
});
var innerSize = {
innerWidth: itemMarkWidth + markGap + Math.max.apply(Math, _toConsumableArray(linesSize.map(function (size) {
return 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]);
var totalWidth = drawingArea.left + drawingArea.width + drawingArea.right;
var totalHeight = drawingArea.top + drawingArea.height + drawingArea.bottom;
var availableWidth = totalWidth - padding.left - padding.right;
var availableHeight = totalHeight - padding.top - padding.bottom;
var seriesWithPosition = React.useMemo(function () {
// Start at 0, 0. Will be modified later by padding and position.
var x = 0;
var y = 0;
// total values used to align legend later.
var totalWidthUsed = 0;
var totalHeightUsed = 0;
var rowIndex = 0;
var rowMaxHeight = [0];
var seriesWithRawPosition = seriesToDisplay.map(function (_ref) {
var label = _ref.label,
other = _objectWithoutProperties(_ref, _excluded2);
var itemSpace = getItemSpace(label, labelStyle);
var rep = _extends({}, other, {
label: label,
positionX: x,
positionY: y,
innerHeight: itemSpace.innerHeight,
innerWidth: itemSpace.innerWidth,
outerHeight: itemSpace.outerHeight,
outerWidth: itemSpace.outerWidth,
rowIndex: 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
var gapX = 0;
var 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(function (item) {
return _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(NoSsr, {
children: /*#__PURE__*/_jsx(ChartsLegendRoot, {
className: classes.root,
children: seriesWithPosition.map(function (_ref2) {
var id = _ref2.id,
label = _ref2.label,
color = _ref2.color,
positionX = _ref2.positionX,
positionY = _ref2.positionY;
return /*#__PURE__*/_jsxs("g", {
className: classes.series,
transform: "translate(".concat(positionX, " ").concat(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);
})
})
});
}
process.env.NODE_ENV !== "production" ? DefaultChartsLegend.propTypes = {
// ----------------------------- Warning --------------------------------
// | These PropTypes are generated from the TypeScript type definitions |
// | To update them edit the TypeScript types and run "yarn proptypes" |
// ----------------------------------------------------------------------
/**
* Override or extend the styles applied to the component.
*/
classes: PropTypes.object.isRequired,
/**
* The direction of the legend layout.
* The default depends on the chart.
*/
direction: PropTypes.oneOf(['column', 'row']).isRequired,
drawingArea: PropTypes.shape({
bottom: PropTypes.number.isRequired,
height: PropTypes.number.isRequired,
left: PropTypes.number.isRequired,
right: PropTypes.number.isRequired,
top: PropTypes.number.isRequired,
width: PropTypes.number.isRequired
}).isRequired,
/**
* Set to true to hide the legend.
*/
hidden: 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,
/**
* Style applied to legend labels.
* @default theme.typography.subtitle1
*/
labelStyle: PropTypes.object,
/**
* Space between the mark and the label (in px).
* @default 5
*/
markGap: PropTypes.number,
/**
* Legend padding (in px).
* Can either be a single number, or an object with top, left, bottom, right properties.
* @default 0
*/
padding: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
bottom: PropTypes.number,
left: PropTypes.number,
right: PropTypes.number,
top: PropTypes.number
})]),
position: PropTypes.shape({
horizontal: PropTypes.oneOf(['left', 'middle', 'right']).isRequired,
vertical: PropTypes.oneOf(['bottom', 'middle', 'top']).isRequired
}).isRequired,
series: PropTypes.shape({
bar: PropTypes.shape({
series: PropTypes.object.isRequired,
seriesOrder: PropTypes.arrayOf(PropTypes.string).isRequired,
stackingGroups: PropTypes.arrayOf(PropTypes.shape({
ids: PropTypes.arrayOf(PropTypes.string).isRequired,
stackingOffset: PropTypes.func.isRequired,
stackingOrder: PropTypes.func.isRequired
})).isRequired
}),
line: PropTypes.shape({
series: PropTypes.object.isRequired,
seriesOrder: PropTypes.arrayOf(PropTypes.string).isRequired,
stackingGroups: PropTypes.arrayOf(PropTypes.shape({
ids: PropTypes.arrayOf(PropTypes.string).isRequired,
stackingOffset: PropTypes.func.isRequired,
stackingOrder: PropTypes.func.isRequired
})).isRequired
}),
pie: PropTypes.shape({
series: PropTypes.object.isRequired,
seriesOrder: PropTypes.arrayOf(PropTypes.string).isRequired
}),
scatter: PropTypes.shape({
series: PropTypes.object.isRequired,
seriesOrder: PropTypes.arrayOf(PropTypes.string).isRequired
})
}).isRequired,
seriesToDisplay: PropTypes.arrayOf(PropTypes.shape({
color: PropTypes.string.isRequired,
id: PropTypes.string.isRequired,
label: PropTypes.string.isRequired
})).isRequired
} : void 0;
function ChartsLegend(inProps) {
var _slots$legend;
var props = useThemeProps({
props: _extends({}, defaultProps, inProps),
name: 'MuiChartsLegend'
});
var position = props.position,
direction = props.direction,
hidden = props.hidden,
slots = props.slots,
slotProps = props.slotProps;
var theme = useTheme();
var classes = useUtilityClasses(_extends({}, props, {
theme: theme
}));
var drawingArea = React.useContext(DrawingContext);
var series = React.useContext(SeriesContext);
var seriesToDisplay = getSeriesToDisplay(series);
var ChartLegendRender = (_slots$legend = slots == null ? void 0 : slots.legend) != null ? _slots$legend : DefaultChartsLegend;
var chartLegendRenderProps = useSlotProps({
elementType: ChartLegendRender,
externalSlotProps: slotProps == null ? void 0 : slotProps.legend,
additionalProps: {
position: position,
direction: direction,
classes: classes,
drawingArea: drawingArea,
series: series,
hidden: hidden,
seriesToDisplay: seriesToDisplay
},
ownerState: {}
});
return /*#__PURE__*/_jsx(ChartLegendRender, _extends({}, chartLegendRenderProps));
}
process.env.NODE_ENV !== "production" ? ChartsLegend.propTypes = {
// ----------------------------- Warning --------------------------------
// | These PropTypes are generated from the TypeScript type definitions |
// | To update them edit the TypeScript types and run "yarn proptypes" |
// ----------------------------------------------------------------------
/**
* Override or extend the styles applied to the component.
*/
classes: PropTypes.object,
/**
* The direction of the legend layout.
* The default depends on the chart.
*/
direction: PropTypes.oneOf(['column', 'row']),
/**
* Set to true to hide the legend.
* @default false
*/
hidden: PropTypes.bool,
position: PropTypes.shape({
horizontal: PropTypes.oneOf(['left', 'middle', 'right']).isRequired,
vertical: PropTypes.oneOf(['bottom', 'middle', 'top']).isRequired
}),
/**
* The props used for each component slot.
* @default {}
*/
slotProps: PropTypes.object,
/**
* Overridable component slots.
* @default {}
*/
slots: PropTypes.object
} : void 0;
export { ChartsLegend };