@mui/x-charts
Version:
The community edition of MUI X Charts components.
87 lines (86 loc) • 2.33 kB
JavaScript
import * as React from 'react';
import { styled } from '@mui/material/styles';
import { shouldForwardProp } from '@mui/system/createStyled';
import { useChartRootRef } from "../../../hooks/useChartRootRef.js";
import { useStore } from "../../store/useStore.js";
import { useSelector } from "../../store/useSelector.js";
import { selectorChartPropsSize } from "../../plugins/corePlugins/useChartDimensions/index.js";
import { jsx as _jsx } from "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 = styled('div', {
name: 'MuiChartsWrapper',
slot: 'Root',
shouldForwardProp: prop => shouldForwardProp(prop) && prop !== 'extendVertically'
})(({
ownerState
}) => ({
display: 'flex',
flexDirection: getDirection(ownerState.legendDirection, ownerState.legendPosition),
flex: 1,
justifyContent: 'center',
alignItems: getAlign(ownerState.legendDirection, ownerState.legendPosition),
variants: [{
props: {
extendVertically: true
},
style: {
height: '100%'
}
}]
}));
/**
* @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,
extendVertically
} = props;
const chartRootRef = useChartRootRef();
const store = useStore();
const {
height: propsHeight
} = useSelector(store, selectorChartPropsSize);
return /*#__PURE__*/_jsx(Root, {
ref: chartRootRef,
ownerState: props,
sx: sx,
extendVertically: extendVertically ?? propsHeight === undefined,
children: children
});
}
export { ChartsWrapper };