@mui/x-data-grid-premium/components/chartsPanel/chart/GridChartsPanelChart.js

The Premium plan edition of the MUI X Data Grid Components.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.GridChartsPanelChart = GridChartsPanelChart;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _styles = require("@mui/material/styles");
var _xDataGridPro = require("@mui/x-data-grid-pro");
var _internals = require("@mui/x-data-grid-pro/internals");
var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
var _jsxRuntime = require("react/jsx-runtime");
const useUtilityClasses = ownerState => {
  const {
    classes
  } = ownerState;
  const slots = {
    root: ['chartsManagement'],
    chartTypeRoot: ['chartTypeRoot'],
    button: ['chartTypeSelectorButton']
  };
  return (0, _composeClasses.default)(slots, _xDataGridPro.getDataGridUtilityClass, classes);
};
const GridChartsManagementRoot = (0, _styles.styled)('div', {
  name: 'MuiDataGrid',
  slot: 'ChartsManagement'
})({
  display: 'flex',
  flexDirection: 'column',
  justifyContent: 'space-between',
  height: '100%'
});
const GridChartTypeRoot = (0, _styles.styled)('div', {
  name: 'MuiDataGrid',
  slot: 'ChartTypeRoot'
})({
  display: 'grid',
  gridTemplateColumns: '1fr 1fr 1fr',
  gap: _internals.vars.spacing(1),
  padding: _internals.vars.spacing(1)
});
const GridChartTypeButton = (0, _styles.styled)('button', {
  name: 'MuiDataGrid',
  slot: 'ChartTypeSelectorButton',
  shouldForwardProp: prop => prop !== 'isSelected'
})(({
  isSelected
}) => {
  return {
    backgroundColor: isSelected ? `color-mix(in srgb, ${_internals.vars.colors.interactive.selected} calc(${_internals.vars.colors.interactive.selectedOpacity} * 100%), ${_internals.vars.colors.background.base})` : _internals.vars.colors.background.base,
    color: isSelected ? _internals.vars.colors.interactive.selected : _internals.vars.colors.foreground.muted,
    cursor: 'pointer',
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
    gap: _internals.vars.spacing(0.5),
    padding: _internals.vars.spacing(1.5, 1, 1),
    border: `1px solid ${isSelected ? _internals.vars.colors.interactive.selected : _internals.vars.colors.border.base}`,
    font: _internals.vars.typography.font.small,
    fontWeight: _internals.vars.typography.fontWeight.medium,
    borderRadius: _internals.vars.radius.base,
    transition: _internals.vars.transition(['border-color', 'background-color', 'color'], {
      duration: _internals.vars.transitions.duration.short,
      easing: _internals.vars.transitions.easing.easeInOut
    }),
    '&:hover': {
      backgroundColor: isSelected ? `color-mix(in srgb, ${_internals.vars.colors.interactive.selected} calc(${_internals.vars.colors.interactive.selectedOpacity} * 100%), ${_internals.vars.colors.background.base})` : _internals.vars.colors.interactive.hover
    }
  };
});
function GridChartsPanelChart(props) {
  const {
    schema,
    selectedChartType,
    onChartTypeChange
  } = props;
  const rootProps = (0, _useGridRootProps.useGridRootProps)();
  const classes = useUtilityClasses(rootProps);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridChartsManagementRoot, {
    ownerState: rootProps,
    className: classes.root,
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(GridChartTypeRoot, {
      className: classes.chartTypeRoot,
      children: Object.entries(schema).map(([type, config]) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(GridChartTypeButton, (0, _extends2.default)({
        className: classes.button,
        isSelected: type === selectedChartType,
        onClick: () => onChartTypeChange(type)
      }, rootProps.slotProps?.baseButton, {
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(config.icon, {
          style: {
            width: 32,
            height: 32
          }
        }), config.label]
      }), type))
    })
  });
}
process.env.NODE_ENV !== "production" ? GridChartsPanelChart.propTypes = {
  // ----------------------------- Warning --------------------------------
  // | These PropTypes are generated from the TypeScript type definitions |
  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
  // ----------------------------------------------------------------------
  schema: _propTypes.default.object
} : void 0;