@mui/x-data-grid-premium 8.11.3 → 8.12.0

package/components/chartsPanel/data/GridChartsPanelDataBody.js

@@ -0,0 +1,380 @@
+"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 _system = require("@mui/system");
+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, _system.styled)('div', {
+  name: 'MuiDataGrid',
+  slot: 'ChartsPanelDataBody'
+})({
+  flex: 1,
+  display: 'flex',
+  flexDirection: 'column',
+  overflow: 'hidden'
+});
+const GridChartsPanelDataAvailableFields = (0, _system.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, _system.styled)(_resizablePanel.ResizablePanel, {
+  name: 'MuiDataGrid',
+  slot: 'ChartsPanelDataSections'
+})({
+  position: 'relative',
+  minHeight: 158,
+  overflow: 'hidden',
+  display: 'flex',
+  flexDirection: 'column'
+});
+const GridChartsPanelDataScrollArea = (0, _system.styled)(_xDataGridPro.GridShadowScrollArea, {
+  name: 'MuiDataGrid',
+  slot: 'ChartsPanelDataScrollArea'
+})({
+  height: '100%'
+});
+const GridChartsPanelDataSection = (0, _system.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, _system.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, _system.styled)('div', {
+  name: 'MuiDataGrid',
+  slot: 'ChartsPanelDataFieldList'
+})({
+  flex: 1,
+  display: 'flex',
+  flexDirection: 'column',
+  padding: _internals.vars.spacing(0.5, 0)
+});
+const GridChartsPanelDataPlaceholder = (0, _system.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))
+            })]
+          })]
+        })]
+      })]
+    })]
+  });
+}

package/components/chartsPanel/data/GridChartsPanelDataField.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import type { FieldTransferObject } from "./GridChartsPanelDataBody.js";
+import type { GridChartsIntegrationSection } from "../../../hooks/features/chartsIntegration/gridChartsIntegrationInterfaces.js";
+type GridChartsPanelDataFieldProps = {
+  children: React.ReactNode;
+  field: string;
+  section: GridChartsIntegrationSection;
+  blockedSections?: string[];
+  dimensionsLabel: string;
+  valuesLabel: string;
+  disabled?: boolean;
+  selected?: boolean;
+  onChange?: (field: string, section: GridChartsIntegrationSection) => void;
+  onDragStart: (field: string, section: GridChartsIntegrationSection) => void;
+  onDragEnd: () => void;
+};
+export declare function AggregationSelect({
+  aggFunc,
+  field
+}: {
+  aggFunc: string;
+  field: FieldTransferObject['field'];
+}): React.JSX.Element | null;
+declare function GridChartsPanelDataField(props: GridChartsPanelDataFieldProps): React.JSX.Element;
+export { GridChartsPanelDataField };