@mui/x-charts
Version:
The community edition of the charts components (MUI X).
416 lines (413 loc) • 15.5 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.ChartsLegend = ChartsLegend;
exports.ChartsLegendRoot = 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 _utils = require("@mui/base/utils");
var _NoSsr = require("@mui/base/NoSsr");
var _utils2 = require("@mui/utils");
var _styles = require("@mui/material/styles");
var _DrawingProvider = require("../context/DrawingProvider");
var _utils3 = require("./utils");
var _SeriesContextProvider = require("../context/SeriesContextProvider");
var _chartsLegendClasses = require("./chartsLegendClasses");
var _ChartsText = require("../ChartsText");
var _getWordsByLines = require("../internals/getWordsByLines");
var _jsxRuntime = require("react/jsx-runtime");
const _excluded = ["rotate", "dominantBaseline"],
_excluded2 = ["label"];
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
const useUtilityClasses = ownerState => {
const {
classes,
direction
} = ownerState;
const slots = {
root: ['root', direction],
mark: ['mark'],
label: ['label'],
series: ['series']
};
return (0, _utils2.unstable_composeClasses)(slots, _chartsLegendClasses.getLegendUtilityClass, classes);
};
const ChartsLegendRoot = exports.ChartsLegendRoot = (0, _styles.styled)('g', {
name: 'MuiChartsLegend',
slot: 'Root',
overridesResolver: (props, styles) => styles.root
})({});
const defaultProps = {
position: {
horizontal: 'middle',
vertical: 'top'
},
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 (0, _extends2.default)({
left: 0,
right: 0,
top: 0,
bottom: 0
}, padding);
};
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 = (0, _styles.useTheme)();
const labelStyle = React.useMemo(() => (0, _extends2.default)({}, 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 = (0, _objectWithoutPropertiesLoose2.default)(inStyle, _excluded);
const linesSize = (0, _getWordsByLines.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 (0, _extends2.default)({}, 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 = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded2);
const itemSpace = getItemSpace(label, labelStyle);
const rep = (0, _extends2.default)({}, 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 => (0, _extends2.default)({}, 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__*/(0, _jsxRuntime.jsx)(_NoSsr.NoSsr, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ChartsLegendRoot, {
className: classes.root,
children: seriesWithPosition.map(({
id,
label,
color,
positionX,
positionY
}) => /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
className: classes.series,
transform: `translate(${positionX} ${positionY})`,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
className: classes.mark,
y: -itemMarkHeight / 2,
width: itemMarkWidth,
height: itemMarkHeight,
fill: color
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsText.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.default.object.isRequired,
/**
* The direction of the legend layout.
* The default depends on the chart.
*/
direction: _propTypes.default.oneOf(['column', 'row']).isRequired,
drawingArea: _propTypes.default.shape({
bottom: _propTypes.default.number.isRequired,
height: _propTypes.default.number.isRequired,
left: _propTypes.default.number.isRequired,
right: _propTypes.default.number.isRequired,
top: _propTypes.default.number.isRequired,
width: _propTypes.default.number.isRequired
}).isRequired,
/**
* Set to true to hide the legend.
*/
hidden: _propTypes.default.bool,
/**
* Space between two legend items (in px).
* @default 10
*/
itemGap: _propTypes.default.number,
/**
* Height of the item mark (in px).
* @default 20
*/
itemMarkHeight: _propTypes.default.number,
/**
* Width of the item mark (in px).
* @default 20
*/
itemMarkWidth: _propTypes.default.number,
/**
* Style applied to legend labels.
* @default theme.typography.subtitle1
*/
labelStyle: _propTypes.default.object,
/**
* Space between the mark and the label (in px).
* @default 5
*/
markGap: _propTypes.default.number,
/**
* Legend padding (in px).
* Can either be a single number, or an object with top, left, bottom, right properties.
* @default 0
*/
padding: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.shape({
bottom: _propTypes.default.number,
left: _propTypes.default.number,
right: _propTypes.default.number,
top: _propTypes.default.number
})]),
position: _propTypes.default.shape({
horizontal: _propTypes.default.oneOf(['left', 'middle', 'right']).isRequired,
vertical: _propTypes.default.oneOf(['bottom', 'middle', 'top']).isRequired
}).isRequired,
series: _propTypes.default.shape({
bar: _propTypes.default.shape({
series: _propTypes.default.object.isRequired,
seriesOrder: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
stackingGroups: _propTypes.default.arrayOf(_propTypes.default.shape({
ids: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
stackingOffset: _propTypes.default.func.isRequired,
stackingOrder: _propTypes.default.func.isRequired
})).isRequired
}),
line: _propTypes.default.shape({
series: _propTypes.default.object.isRequired,
seriesOrder: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
stackingGroups: _propTypes.default.arrayOf(_propTypes.default.shape({
ids: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
stackingOffset: _propTypes.default.func.isRequired,
stackingOrder: _propTypes.default.func.isRequired
})).isRequired
}),
pie: _propTypes.default.shape({
series: _propTypes.default.object.isRequired,
seriesOrder: _propTypes.default.arrayOf(_propTypes.default.string).isRequired
}),
scatter: _propTypes.default.shape({
series: _propTypes.default.object.isRequired,
seriesOrder: _propTypes.default.arrayOf(_propTypes.default.string).isRequired
})
}).isRequired,
seriesToDisplay: _propTypes.default.arrayOf(_propTypes.default.shape({
color: _propTypes.default.string.isRequired,
id: _propTypes.default.string.isRequired,
label: _propTypes.default.string.isRequired
})).isRequired
} : void 0;
function ChartsLegend(inProps) {
const props = (0, _styles.useThemeProps)({
props: (0, _extends2.default)({}, defaultProps, inProps),
name: 'MuiChartsLegend'
});
const {
position,
direction,
hidden,
slots,
slotProps
} = props;
const theme = (0, _styles.useTheme)();
const classes = useUtilityClasses((0, _extends2.default)({}, props, {
theme
}));
const drawingArea = React.useContext(_DrawingProvider.DrawingContext);
const series = React.useContext(_SeriesContextProvider.SeriesContext);
const seriesToDisplay = (0, _utils3.getSeriesToDisplay)(series);
const ChartLegendRender = slots?.legend ?? DefaultChartsLegend;
const chartLegendRenderProps = (0, _utils.useSlotProps)({
elementType: ChartLegendRender,
externalSlotProps: slotProps?.legend,
additionalProps: {
position,
direction,
classes,
drawingArea,
series,
hidden,
seriesToDisplay
},
ownerState: {}
});
return /*#__PURE__*/(0, _jsxRuntime.jsx)(ChartLegendRender, (0, _extends2.default)({}, 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.default.object,
/**
* The direction of the legend layout.
* The default depends on the chart.
*/
direction: _propTypes.default.oneOf(['column', 'row']),
/**
* Set to true to hide the legend.
* @default false
*/
hidden: _propTypes.default.bool,
position: _propTypes.default.shape({
horizontal: _propTypes.default.oneOf(['left', 'middle', 'right']).isRequired,
vertical: _propTypes.default.oneOf(['bottom', 'middle', 'top']).isRequired
}),
/**
* The props used for each component slot.
* @default {}
*/
slotProps: _propTypes.default.object,
/**
* Overridable component slots.
* @default {}
*/
slots: _propTypes.default.object
} : void 0;