@mui/x-charts
Version:
The community edition of the Charts components (MUI X).
74 lines (72 loc) • 1.93 kB
JavaScript
;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.ChartsWrapper = ChartsWrapper;
var React = _interopRequireWildcard(require("react"));
var _styles = require("@mui/material/styles");
var _useChartRootRef = require("../../../hooks/useChartRootRef");
var _jsxRuntime = require("react/jsx-runtime");
const getDirection = (direction, position) => {
if (direction === 'vertical') {
if (position?.horizontal === 'start') {
return 'row';
}
return 'row-reverse';
}
if (position?.vertical === 'bottom') {
return 'column-reverse';
}
return 'column';
};
const getAlign = (direction, position) => {
if (direction === 'vertical') {
if (position?.vertical === 'top') {
return 'flex-start';
}
if (position?.vertical === 'bottom') {
return 'flex-end';
}
}
if (direction === 'horizontal') {
if (position?.horizontal === 'start') {
return 'flex-start';
}
if (position?.horizontal === 'end') {
return 'flex-end';
}
}
return 'center';
};
const Root = (0, _styles.styled)('div', {
name: 'MuiChartsWrapper',
slot: 'Root'
})(({
ownerState
}) => ({
display: 'flex',
flexDirection: getDirection(ownerState.legendDirection, ownerState.legendPosition),
flex: 1,
justifyContent: 'center',
alignItems: getAlign(ownerState.legendDirection, ownerState.legendPosition)
}));
/**
* @ignore - internal component.
*
* Wrapper for the charts components.
* Its main purpose is to position the HTML legend in the correct place.
*/
function ChartsWrapper(props) {
const {
children,
sx
} = props;
const chartRootRef = (0, _useChartRootRef.useChartRootRef)();
return /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
ref: chartRootRef,
ownerState: props,
sx: sx,
children: children
});
}