@mui/x-charts/internals/components/ChartsWrapper/ChartsWrapper.js

The community edition of MUI X Charts components.

"use strict";

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 _createStyled = require("@mui/system/createStyled");
var _useChartRootRef = require("../../../hooks/useChartRootRef");
var _useStore = require("../../store/useStore");
var _useSelector = require("../../store/useSelector");
var _useChartDimensions = require("../../plugins/corePlugins/useChartDimensions");
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',
  shouldForwardProp: prop => (0, _createStyled.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 = (0, _useChartRootRef.useChartRootRef)();
  const store = (0, _useStore.useStore)();
  const {
    height: propsHeight
  } = (0, _useSelector.useSelector)(store, _useChartDimensions.selectorChartPropsSize);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
    ref: chartRootRef,
    ownerState: props,
    sx: sx,
    extendVertically: extendVertically ?? propsHeight === undefined,
    children: children
  });
}