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

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

"use strict";
'use client';

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.GridChartsPanelDataBody = GridChartsPanelDataBody;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var React = _interopRequireWildcard(require("react"));
var _styles = require("@mui/material/styles");
var _internals = require("@mui/x-data-grid-pro/internals");
var _xDataGridPro = require("@mui/x-data-grid-pro");
var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
var _collapsible = require("../../collapsible");
var _resizablePanel = require("../../resizablePanel");
var _GridChartsPanelDataField = require("./GridChartsPanelDataField");
var _gridChartsIntegrationSelectors = require("../../../hooks/features/chartsIntegration/gridChartsIntegrationSelectors");
var _useGridPrivateApiContext = require("../../../hooks/utils/useGridPrivateApiContext");
var _useGridChartIntegration = require("../../../hooks/utils/useGridChartIntegration");
var _utils = require("../../../hooks/features/chartsIntegration/utils");
var _gridRowGroupingSelector = require("../../../hooks/features/rowGrouping/gridRowGroupingSelector");
var _gridPivotingSelectors = require("../../../hooks/features/pivoting/gridPivotingSelectors");
var _jsxRuntime = require("react/jsx-runtime");
const useUtilityClasses = ownerState => {
  const {
    classes
  } = ownerState;
  const slots = {
    root: ['chartsPanelDataBody'],
    availableFields: ['chartsPanelDataAvailableFields'],
    sections: ['chartsPanelDataSections'],
    scrollArea: ['chartsPanelDataScrollArea'],
    section: ['chartsPanelDataSection'],
    sectionTitle: ['chartsPanelDataSectionTitle'],
    fieldList: ['chartsPanelDataFieldList'],
    placeholder: ['chartsPanelDataPlaceholder']
  };
  return (0, _composeClasses.default)(slots, _xDataGridPro.getDataGridUtilityClass, classes);
};
const GridChartsPanelDataBodyRoot = (0, _styles.styled)('div', {
  name: 'MuiDataGrid',
  slot: 'ChartsPanelDataBody'
})({
  flex: 1,
  display: 'flex',
  flexDirection: 'column',
  overflow: 'hidden'
});
const GridChartsPanelDataAvailableFields = (0, _styles.styled)(_xDataGridPro.GridShadowScrollArea, {
  name: 'MuiDataGrid',
  slot: 'ChartsPanelDataAvailableFields'
})({
  flex: 1,
  minHeight: 84,
  transition: _internals.vars.transition(['background-color'], {
    duration: _internals.vars.transitions.duration.short,
    easing: _internals.vars.transitions.easing.easeInOut
  }),
  '&[data-drag-over="true"]': {
    backgroundColor: _internals.vars.colors.interactive.hover
  }
});
const GridChartsPanelDataSections = (0, _styles.styled)(_resizablePanel.ResizablePanel, {
  name: 'MuiDataGrid',
  slot: 'ChartsPanelDataSections'
})({
  position: 'relative',
  minHeight: 158,
  overflow: 'hidden',
  display: 'flex',
  flexDirection: 'column'
});
const GridChartsPanelDataScrollArea = (0, _styles.styled)(_xDataGridPro.GridShadowScrollArea, {
  name: 'MuiDataGrid',
  slot: 'ChartsPanelDataScrollArea'
})({
  height: '100%'
});
const GridChartsPanelDataSection = (0, _styles.styled)(_collapsible.Collapsible, {
  name: 'MuiDataGrid',
  slot: 'ChartsPanelDataSection',
  shouldForwardProp: prop => prop !== 'disabled'
})(({
  disabled
}) => ({
  opacity: disabled ? 0.5 : 1,
  margin: _internals.vars.spacing(0.5, 1),
  transition: _internals.vars.transition(['border-color', 'background-color'], {
    duration: _internals.vars.transitions.duration.short,
    easing: _internals.vars.transitions.easing.easeInOut
  }),
  '&[data-drag-over="true"]': {
    backgroundColor: _internals.vars.colors.interactive.hover,
    outline: `2px solid ${_internals.vars.colors.interactive.selected}`
  }
}));
const GridChartsPanelDataSectionTitle = (0, _styles.styled)('div', {
  name: 'MuiDataGrid',
  slot: 'ChartsPanelDataSectionTitle'
})({
  flex: 1,
  marginRight: _internals.vars.spacing(1.75),
  display: 'flex',
  justifyContent: 'space-between',
  alignItems: 'center',
  gap: _internals.vars.spacing(1),
  font: _internals.vars.typography.font.body,
  fontWeight: _internals.vars.typography.fontWeight.medium
});
const GridChartsPanelDataFieldList = (0, _styles.styled)('div', {
  name: 'MuiDataGrid',
  slot: 'ChartsPanelDataFieldList'
})({
  flex: 1,
  display: 'flex',
  flexDirection: 'column',
  padding: _internals.vars.spacing(0.5, 0)
});
const GridChartsPanelDataPlaceholder = (0, _styles.styled)('div', {
  name: 'MuiDataGrid',
  slot: 'ChartsPanelDataPlaceholder'
})({
  flex: 1,
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  textWrap: 'balance',
  textAlign: 'center',
  minHeight: 38,
  height: '100%',
  padding: _internals.vars.spacing(0, 1),
  color: _internals.vars.colors.foreground.muted,
  font: _internals.vars.typography.font.body
});
const INITIAL_DRAG_STATE = {
  active: false,
  field: null,
  dropSection: null,
  initialSection: null
};
// dimensions and values
const SECTION_COUNT = 2;
function GridChartsPanelDataBody(props) {
  const {
    searchValue
  } = props;
  const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
  const rootProps = (0, _useGridRootProps.useGridRootProps)();
  const rowGroupingModel = (0, _xDataGridPro.useGridSelector)(apiRef, _gridRowGroupingSelector.gridRowGroupingSanitizedModelSelector);
  const pivotActive = (0, _xDataGridPro.useGridSelector)(apiRef, _internals.gridPivotActiveSelector);
  const pivotModel = (0, _xDataGridPro.useGridSelector)(apiRef, _gridPivotingSelectors.gridPivotModelSelector);
  const activeChartId = (0, _xDataGridPro.useGridSelector)(apiRef, _gridChartsIntegrationSelectors.gridChartsIntegrationActiveChartIdSelector);
  const {
    chartStateLookup
  } = (0, _useGridChartIntegration.useGridChartsIntegrationContext)();
  const dimensions = (0, _xDataGridPro.useGridSelector)(apiRef, _gridChartsIntegrationSelectors.gridChartsDimensionsSelector, activeChartId);
  const values = (0, _xDataGridPro.useGridSelector)(apiRef, _gridChartsIntegrationSelectors.gridChartsValuesSelector, activeChartId);
  const classes = useUtilityClasses(rootProps);
  const chartableColumns = (0, _xDataGridPro.useGridSelector)(apiRef, _gridChartsIntegrationSelectors.gridChartableColumnsSelector);
  const dimensionsLabel = React.useMemo(() => chartStateLookup[activeChartId]?.dimensionsLabel || apiRef.current.getLocaleText('chartsCategories'), [chartStateLookup, activeChartId, apiRef]);
  const valuesLabel = React.useMemo(() => chartStateLookup[activeChartId]?.valuesLabel || apiRef.current.getLocaleText('chartsSeries'), [chartStateLookup, activeChartId, apiRef]);
  const fullSections = React.useMemo(() => {
    const sections = [];
    if (chartStateLookup[activeChartId]?.maxDimensions && dimensions.length >= chartStateLookup[activeChartId]?.maxDimensions) {
      sections.push('dimensions');
    }
    if (chartStateLookup[activeChartId]?.maxValues && values.length >= chartStateLookup[activeChartId]?.maxValues) {
      sections.push('values');
    }
    return sections;
  }, [dimensions, values, chartStateLookup, activeChartId]);
  const blockedSectionsLookup = React.useMemo(() => new Map(Object.values(chartableColumns).map(column => [column.field, Array.from(new Set([...(0, _utils.getBlockedSections)(column, rowGroupingModel, pivotActive ? pivotModel : undefined), ...fullSections]))])), [rowGroupingModel, chartableColumns, pivotActive, pivotModel, fullSections]);
  const availableFields = React.useMemo(() => {
    const notUsedFields = Object.keys(chartableColumns).filter(field => !dimensions.some(dimension => dimension.field === field) && !values.some(value => value.field === field));
    if (searchValue) {
      return notUsedFields.filter(field => {
        const fieldName = apiRef.current.chartsIntegration.getColumnName(field);
        return fieldName.toLowerCase().includes(searchValue.toLowerCase());
      });
    }

    // Fields with all sections blocked should be at the end
    return notUsedFields.sort((a, b) => {
      const aBlockedSections = blockedSectionsLookup.get(a).length;
      const bBlockedSections = blockedSectionsLookup.get(b).length;
      return (aBlockedSections >= SECTION_COUNT ? 1 : 0) - (bBlockedSections >= SECTION_COUNT ? 1 : 0);
    });
  }, [apiRef, searchValue, chartableColumns, dimensions, values, blockedSectionsLookup]);
  const [drag, setDrag] = React.useState(INITIAL_DRAG_STATE);
  const disabledSections = React.useMemo(() => {
    if (!drag.field) {
      return new Set();
    }
    return new Set(blockedSectionsLookup.get(drag.field));
  }, [blockedSectionsLookup, drag.field]);
  const handleDragStart = (field, section) => {
    setDrag({
      active: true,
      field,
      initialSection: section,
      dropSection: null
    });
  };
  const handleDragEnd = () => {
    setDrag(INITIAL_DRAG_STATE);
  };
  const handleDrop = event => {
    setDrag(INITIAL_DRAG_STATE);

    // The drop event was already handled by a child
    if (event.defaultPrevented) {
      return;
    }
    event.preventDefault();
    const {
      field,
      section: originSection
    } = JSON.parse(event.dataTransfer.getData('text/plain'));
    const targetSection = event.currentTarget.getAttribute('data-section');
    if (originSection === targetSection) {
      return;
    }
    apiRef.current.chartsIntegration.updateDataReference(field, originSection, targetSection);
  };
  const handleDragOver = React.useCallback(event => {
    event.preventDefault();
    event.dataTransfer.dropEffect = 'move';
  }, []);
  const handleDragEnter = React.useCallback(event => {
    if (!event.currentTarget.contains(event.relatedTarget)) {
      const dropSection = event.currentTarget.getAttribute('data-section');
      setDrag(v => (0, _extends2.default)({}, v, {
        active: true,
        dropSection
      }));
    }
  }, []);
  const handleDragLeave = React.useCallback(event => {
    if (!event.currentTarget.contains(event.relatedTarget)) {
      setDrag(v => (0, _extends2.default)({}, v, {
        active: true,
        dropSection: v.initialSection
      }));
    }
  }, []);
  const handleChange = React.useCallback((field, section) => {
    const apiMethod = section === 'dimensions' ? apiRef.current.updateChartDimensionsData : apiRef.current.updateChartValuesData;
    apiMethod(activeChartId, currentItems => currentItems.map(item => item.field === field ? (0, _extends2.default)({}, item, {
      hidden: item.hidden !== true
    }) : item));
  }, [apiRef, activeChartId]);
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(GridChartsPanelDataBodyRoot, {
    ownerState: rootProps,
    className: classes.root,
    "data-dragging": drag.active,
    onDragLeave: handleDragLeave,
    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(GridChartsPanelDataAvailableFields, {
      ownerState: rootProps,
      className: classes.availableFields,
      onDrop: handleDrop,
      onDragEnter: handleDragEnter,
      onDragOver: handleDragOver,
      "data-section": null,
      "data-drag-over": drag.active && drag.dropSection === null,
      children: [availableFields.length === 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(GridChartsPanelDataPlaceholder, {
        ownerState: rootProps,
        className: classes.placeholder,
        children: apiRef.current.getLocaleText('chartsNoFields')
      }), availableFields.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(GridChartsPanelDataFieldList, {
        ownerState: rootProps,
        className: classes.fieldList,
        children: availableFields.map(field => /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridChartsPanelDataField.GridChartsPanelDataField, {
          field: field,
          section: null,
          disabled: blockedSectionsLookup.get(field).length >= SECTION_COUNT,
          blockedSections: blockedSectionsLookup.get(field),
          dimensionsLabel: dimensionsLabel,
          valuesLabel: valuesLabel,
          onDragStart: handleDragStart,
          onDragEnd: handleDragEnd,
          children: apiRef.current.chartsIntegration.getColumnName(field)
        }, field))
      })]
    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(GridChartsPanelDataSections, {
      ownerState: rootProps,
      className: classes.sections,
      direction: "vertical",
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_resizablePanel.ResizablePanelHandle, {}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(GridChartsPanelDataScrollArea, {
        ownerState: rootProps,
        className: classes.scrollArea,
        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(GridChartsPanelDataSection, {
          ownerState: rootProps,
          className: classes.section,
          onDrop: handleDrop,
          onDragEnter: handleDragEnter,
          onDragOver: handleDragOver,
          disabled: disabledSections.has('dimensions'),
          "data-section": "dimensions",
          "data-drag-over": !disabledSections.has('dimensions') && drag.dropSection === 'dimensions',
          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_collapsible.CollapsibleTrigger, {
            "aria-label": dimensionsLabel,
            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(GridChartsPanelDataSectionTitle, {
              ownerState: rootProps,
              className: classes.sectionTitle,
              children: [dimensionsLabel, (chartStateLookup[activeChartId]?.maxDimensions || dimensions.length > 0) && /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseBadge, {
                badgeContent: chartStateLookup[activeChartId]?.maxDimensions ? `${dimensions.length}/${chartStateLookup[activeChartId]?.maxDimensions}` : dimensions.length
              })]
            })
          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_collapsible.CollapsiblePanel, {
            children: [dimensions.length === 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(GridChartsPanelDataPlaceholder, {
              ownerState: rootProps,
              className: classes.placeholder,
              children: apiRef.current.getLocaleText('chartsDragToDimensions')(dimensionsLabel)
            }), dimensions.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(GridChartsPanelDataFieldList, {
              ownerState: rootProps,
              className: classes.fieldList,
              children: dimensions.map(dimension => /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridChartsPanelDataField.GridChartsPanelDataField, {
                field: dimension.field,
                selected: dimension.hidden !== true,
                onChange: handleChange,
                section: "dimensions",
                blockedSections: blockedSectionsLookup.get(dimension.field),
                dimensionsLabel: dimensionsLabel,
                valuesLabel: valuesLabel,
                disabled: disabledSections.has('dimensions'),
                onDragStart: handleDragStart,
                onDragEnd: handleDragEnd,
                children: apiRef.current.chartsIntegration.getColumnName(dimension.field)
              }, dimension.field))
            })]
          })]
        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(GridChartsPanelDataSection, {
          ownerState: rootProps,
          className: classes.section,
          onDrop: handleDrop,
          onDragEnter: handleDragEnter,
          onDragOver: handleDragOver,
          disabled: disabledSections.has('values'),
          "data-section": "values",
          "data-drag-over": !disabledSections.has('values') && drag.dropSection === 'values',
          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_collapsible.CollapsibleTrigger, {
            "aria-label": valuesLabel,
            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(GridChartsPanelDataSectionTitle, {
              ownerState: rootProps,
              className: classes.sectionTitle,
              children: [valuesLabel, (chartStateLookup[activeChartId]?.maxValues || values.length > 0) && /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseBadge, {
                badgeContent: chartStateLookup[activeChartId]?.maxValues ? `${values.length}/${chartStateLookup[activeChartId]?.maxValues}` : values.length
              })]
            })
          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_collapsible.CollapsiblePanel, {
            children: [values.length === 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(GridChartsPanelDataPlaceholder, {
              ownerState: rootProps,
              className: classes.placeholder,
              children: apiRef.current.getLocaleText('chartsDragToValues')(valuesLabel)
            }), values.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(GridChartsPanelDataFieldList, {
              ownerState: rootProps,
              className: classes.fieldList,
              children: values.map(value => /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridChartsPanelDataField.GridChartsPanelDataField, {
                field: value.field,
                selected: value.hidden !== true,
                onChange: handleChange,
                section: "values",
                blockedSections: blockedSectionsLookup.get(value.field),
                dimensionsLabel: dimensionsLabel,
                valuesLabel: valuesLabel,
                disabled: disabledSections.has('values'),
                onDragStart: handleDragStart,
                onDragEnd: handleDragEnd,
                children: apiRef.current.chartsIntegration.getColumnName(value.field)
              }, value.field))
            })]
          })]
        })]
      })]
    })]
  });
}