@mui/x-charts
Version:
The community edition of the Charts components (MUI X).
151 lines (149 loc) • 6.37 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.ChartsLegendRoot = void 0;
exports.LegendPerItem = LegendPerItem;
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var React = _interopRequireWildcard(require("react"));
var _NoSsr = _interopRequireDefault(require("@mui/material/NoSsr"));
var _styles = require("@mui/material/styles");
var _ChartsText = require("../ChartsText");
var _getWordsByLines = require("../internals/getWordsByLines");
var _legendItemsPlacement = require("./legendItemsPlacement");
var _useDrawingArea = require("../hooks/useDrawingArea");
var _jsxRuntime = require("react/jsx-runtime");
const _excluded = ["rotate", "dominantBaseline"];
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 && {}.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 ChartsLegendRoot = exports.ChartsLegendRoot = (0, _styles.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 (0, _extends2.default)({
left: 0,
right: 0,
top: 0,
bottom: 0
}, padding);
};
/**
* Internal component to display an array of items as a legend.
* Used for series legend, and threshold color legend.
* @ignore - Do not document
*/
function LegendPerItem(props) {
const {
hidden,
position,
direction,
itemsToDisplay,
classes,
itemMarkWidth = 20,
itemMarkHeight = 20,
markGap = 5,
itemGap = 10,
padding: paddingProps = 10,
labelStyle: inLabelStyle
} = props;
const theme = (0, _styles.useTheme)();
const isRTL = theme.direction === 'rtl';
const drawingArea = (0, _useDrawingArea.useDrawingArea)();
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 [itemsWithPosition, legendWidth, legendHeight] = React.useMemo(() => (0, _legendItemsPlacement.legendItemPlacements)(itemsToDisplay, getItemSpace, labelStyle, direction, availableWidth, availableHeight, itemGap), [itemsToDisplay, 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__*/(0, _jsxRuntime.jsx)(_NoSsr.default, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ChartsLegendRoot, {
className: classes?.root,
children: itemsWithPosition.map(({
id,
label,
color,
positionX,
positionY
}) => /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
className: classes?.series,
transform: `translate(${gapX + (isRTL ? legendWidth - positionX : positionX)} ${gapY + positionY})`,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
className: classes?.mark,
x: isRTL ? -itemMarkWidth : 0,
y: -itemMarkHeight / 2,
width: itemMarkWidth,
height: itemMarkHeight,
fill: color
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsText.ChartsText, {
style: labelStyle,
text: label,
x: (isRTL ? -1 : 1) * (itemMarkWidth + markGap),
y: 0
})]
}, id))
})
});
}