@mui/x-data-grid-premium
Version:
The Premium plan edition of the MUI X Data Grid Components.
243 lines (242 loc) • 11.3 kB
JavaScript
"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.GridChartsPanel = GridChartsPanel;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var React = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _styles = require("@mui/material/styles");
var _useId = _interopRequireDefault(require("@mui/utils/useId"));
var _internals = require("@mui/x-data-grid-pro/internals");
var _xDataGridPro = require("@mui/x-data-grid-pro");
var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
var _GridChartsPanelChart = require("./chart/GridChartsPanelChart");
var _GridChartsPanelCustomize = require("./customize/GridChartsPanelCustomize");
var _gridChartsIntegrationSelectors = require("../../hooks/features/chartsIntegration/gridChartsIntegrationSelectors");
var _useGridChartIntegration = require("../../hooks/utils/useGridChartIntegration");
var _GridChartsPanelData = require("./data/GridChartsPanelData");
var _jsxRuntime = require("react/jsx-runtime");
const GridChartsPanelHeader = (0, _styles.styled)('div', {
name: 'MuiDataGrid',
slot: 'ChartsPanelHeader'
})({
display: 'flex',
alignItems: 'center',
gap: _internals.vars.spacing(0.25),
padding: _internals.vars.spacing(1, 0.5, 0, 0.75),
boxSizing: 'border-box'
});
const GridChartsPanelTitle = (0, _styles.styled)('div', {
name: 'MuiDataGrid',
slot: 'ChartsPanelTitle'
})({
font: _internals.vars.typography.font.large,
fontWeight: _internals.vars.typography.fontWeight.medium,
marginLeft: _internals.vars.spacing(0.5),
marginRight: 'auto'
});
const GridChartsPanelChartSelection = (0, _styles.styled)('button', {
name: 'MuiDataGrid',
slot: 'ChartsPanelChartSelection'
})({
display: 'flex',
alignItems: 'center',
gap: _internals.vars.spacing(0.25),
padding: _internals.vars.spacing(0.75, 0.5),
borderRadius: _internals.vars.radius.base,
font: _internals.vars.typography.font.large,
fontWeight: _internals.vars.typography.fontWeight.medium,
cursor: 'pointer',
border: 'none',
background: 'none',
outline: 'none',
marginRight: 'auto',
'&:hover, &:focus-visible': {
backgroundColor: _internals.vars.colors.interactive.hover
}
});
function GridChartsPanelChartSelector(props) {
const apiRef = (0, _useGridApiContext.useGridApiContext)();
const rootProps = (0, _useGridRootProps.useGridRootProps)();
const {
activeChartId,
chartEntries
} = props;
const triggerRef = React.useRef(null);
const [open, setOpen] = React.useState(false);
const menuId = (0, _useId.default)();
const triggerId = (0, _useId.default)();
const activeChart = chartEntries.find(([chartId]) => chartId === activeChartId);
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(GridChartsPanelChartSelection, {
id: triggerId,
"aria-haspopup": "true",
"aria-controls": open ? menuId : undefined,
"aria-expanded": open ? 'true' : undefined,
ownerState: rootProps,
onClick: () => setOpen(!open),
ref: triggerRef,
children: [activeChart?.[1]?.label, /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.promptChangesToggleIcon, {
fontSize: "small"
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_xDataGridPro.GridMenu, {
open: open,
target: triggerRef.current,
onClose: () => setOpen(false),
position: "bottom-start",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseMenuList, (0, _extends2.default)({
id: menuId,
"aria-labelledby": triggerId,
autoFocusItem: true
}, rootProps.slotProps?.baseMenuList, {
children: chartEntries.map(([chartId, chartState]) => /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseMenuItem, (0, _extends2.default)({
value: chartId,
onClick: () => {
apiRef.current.setActiveChartId(chartId);
setOpen(false);
},
selected: chartId === activeChartId
}, rootProps.slotProps?.baseMenuItem, {
children: chartState.label || chartId
}), chartId))
}))
})]
});
}
process.env.NODE_ENV !== "production" ? GridChartsPanelChartSelector.propTypes = {
// ----------------------------- Warning --------------------------------
// | These PropTypes are generated from the TypeScript type definitions |
// | To update them edit the TypeScript types and run "pnpm proptypes" |
// ----------------------------------------------------------------------
activeChartId: _propTypes.default.string.isRequired,
chartEntries: _propTypes.default.arrayOf(_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.shape({
configuration: _propTypes.default.object.isRequired,
dimensions: _propTypes.default.arrayOf(_propTypes.default.shape({
data: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])).isRequired,
id: _propTypes.default.string.isRequired,
label: _propTypes.default.string.isRequired
})).isRequired,
dimensionsLabel: _propTypes.default.string,
label: _propTypes.default.string,
maxDimensions: _propTypes.default.number,
maxValues: _propTypes.default.number,
synced: _propTypes.default.bool.isRequired,
type: _propTypes.default.string.isRequired,
values: _propTypes.default.arrayOf(_propTypes.default.shape({
data: _propTypes.default.arrayOf(_propTypes.default.number).isRequired,
id: _propTypes.default.string.isRequired,
label: _propTypes.default.string.isRequired
})).isRequired,
valuesLabel: _propTypes.default.string
}), _propTypes.default.string]).isRequired)).isRequired
} : void 0;
function GridChartsPanel(props) {
const apiRef = (0, _useGridApiContext.useGridApiContext)();
const rootProps = (0, _useGridRootProps.useGridRootProps)();
const {
schema = {}
} = props;
const activeChartId = (0, _internals.useGridSelector)(apiRef, _gridChartsIntegrationSelectors.gridChartsIntegrationActiveChartIdSelector);
const {
chartStateLookup
} = (0, _useGridChartIntegration.useGridChartsIntegrationContext)();
const [activeTab, setActiveTab] = React.useState('chart');
const chartEntries = React.useMemo(() => Object.entries(chartStateLookup), [chartStateLookup]);
const activeChartType = React.useMemo(() => chartStateLookup[activeChartId]?.type || '', [chartStateLookup, activeChartId]);
const currentChartConfiguration = React.useMemo(() => {
return schema[activeChartType] || {};
}, [schema, activeChartType]);
const handleChartSyncChange = React.useCallback(newSyncState => {
apiRef.current.setChartSynchronizationState(activeChartId, newSyncState);
}, [apiRef, activeChartId]);
const handleChartTypeChange = React.useCallback(type => {
apiRef.current.setChartType(activeChartId, type);
}, [apiRef, activeChartId]);
const tabItems = React.useMemo(() => [{
value: 'chart',
label: apiRef.current.getLocaleText('chartsTabChart'),
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridChartsPanelChart.GridChartsPanelChart, {
schema: schema,
selectedChartType: chartStateLookup[activeChartId]?.type,
onChartTypeChange: handleChartTypeChange
})
}, {
value: 'data',
label: apiRef.current.getLocaleText('chartsTabFields'),
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridChartsPanelData.GridChartsPanelData, {})
}, {
value: 'customize',
label: apiRef.current.getLocaleText('chartsTabCustomize'),
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridChartsPanelCustomize.GridChartsPanelCustomize, {
activeChartId: activeChartId,
sections: currentChartConfiguration.customization || []
})
}], [apiRef, activeChartId, chartStateLookup, handleChartTypeChange, schema, currentChartConfiguration]);
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(GridChartsPanelHeader, {
ownerState: rootProps,
children: [chartEntries.length > 1 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(GridChartsPanelChartSelector, {
activeChartId: activeChartId,
chartEntries: chartEntries
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(GridChartsPanelTitle, {
ownerState: rootProps,
children: "Charts"
}), chartEntries.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTooltip, {
title: rootProps.localeText.chartsSyncButtonLabel,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseToggleButton, {
value: "sync",
"aria-label": rootProps.localeText.chartsSyncButtonLabel,
selected: chartStateLookup[activeChartId]?.synced,
onClick: () => {
handleChartSyncChange(!chartStateLookup[activeChartId]?.synced);
},
children: chartStateLookup[activeChartId]?.synced ? /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.chartsSyncIcon, {
fontSize: "small"
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.chartsSyncDisabledIcon, {
fontSize: "small"
})
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseIconButton, (0, _extends2.default)({
onClick: () => {
apiRef.current.setChartsPanelOpen(false);
},
"aria-label": apiRef.current.getLocaleText('chartsCloseButton')
}, rootProps.slotProps?.baseIconButton, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.sidebarCloseIcon, {
fontSize: "small"
})
}))]
}), chartEntries.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTabs, (0, _extends2.default)({
items: tabItems,
value: activeTab,
onChange: (_event, value) => {
setActiveTab(value);
}
}, rootProps.slotProps?.baseTabs)) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_xDataGridPro.GridOverlay, {
children: apiRef.current.getLocaleText('chartsNoCharts')
})]
});
}
process.env.NODE_ENV !== "production" ? GridChartsPanel.propTypes = {
// ----------------------------- Warning --------------------------------
// | These PropTypes are generated from the TypeScript type definitions |
// | To update them edit the TypeScript types and run "pnpm proptypes" |
// ----------------------------------------------------------------------
/**
* Override the default column name generation logic. Use field in combination with the grid state to determine the name of the column that will be shown to the user.
* @param {string} field The field name
* @returns {string | undefined} The name of the column or undefined if the column name should be determined by the grid
*/
getColumnName: _propTypes.default.func,
/**
* The schema of the charts configuration.
* @type {GridChartsConfigurationOptions}
* @default {}
*/
schema: _propTypes.default.object
} : void 0;