@adaptabletools/adaptable-cjs
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
105 lines (104 loc) • 6.01 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.useChartingElements = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const react_redux_1 = require("react-redux");
const Select_1 = require("../../components/Select");
const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
const ChartingState_1 = require("../../AdaptableState/ChartingState");
const ChartingRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/ChartingRedux"));
const AdaptableHelper_1 = tslib_1.__importDefault(require("../../Utilities/Helpers/AdaptableHelper"));
const AdaptableContext_1 = require("../AdaptableContext");
const DeleteChartButton_1 = require("./DeleteChartButton");
const EditChartButton_1 = require("./EditChartButton");
const useAgChartState_1 = require("./useAgChartState");
const useExternalChartState_1 = require("./useExternalChartState");
const useChartingElements = ({ elementType, accessLevel, size = 'normal', }) => {
const adaptable = (0, AdaptableContext_1.useAdaptable)();
const chartDefinitions = (0, react_redux_1.useSelector)(ChartingRedux.ChartingGetChartModels);
const extenralChartDefinitions = (0, react_redux_1.useSelector)(ChartingRedux.ChartingGetExternalChartDefinitions);
const allChartDefinitions = [...chartDefinitions, ...extenralChartDefinitions];
const chartingOptions = adaptable.adaptableOptions?.chartingOptions;
const chartContainers = chartingOptions?.chartContainers;
const [selectedChartId, setSelectedChartId] = React.useState(() => {
// ID is kept in state becaus that does not change, the definition might change
return allChartDefinitions.length > 0 ? allChartDefinitions[0].Uuid : null;
});
const selectedChart = allChartDefinitions.find((chart) => chart.Uuid === selectedChartId);
const isAgChart = (0, ChartingState_1.isAgChartDefinition)(selectedChart);
const chartAccessLevel = AdaptableHelper_1.default.getAccessLevelForObject(selectedChart, accessLevel);
const [selectedContainer, setSelectedContainer] = React.useState(null);
// Need to always call as they the rule for hooks
const { isOpen: isAgChartOpen, showChart: showAgChart, closeChart: hideAgChart, } = (0, useAgChartState_1.useAgChartState)(isAgChart ? selectedChart : undefined);
// Need to always call as they the rule for hooks
const { isOpen: isExternalChartOpened, showChart: showExternalChart, hideChart: hideExternalChart, } = (0, useExternalChartState_1.useExternalChartState)(!isAgChart ? selectedChart : undefined);
const isOpen = isAgChart ? isAgChartOpen : isExternalChartOpened;
const showChart = isAgChart ? showAgChart : showExternalChart;
const hideChart = isAgChart ? hideAgChart : hideExternalChart;
const options = allChartDefinitions.map((chartDefinition) => ({
label: chartDefinition.Name,
value: chartDefinition.Uuid,
onClick: () => {
setSelectedChartId(chartDefinition.Uuid);
},
}));
const hasCharts = options.length > 0;
const isSelectedChart = hasCharts && selectedChart != null;
let selectedChartValue = '';
if (hasCharts && selectedChart) {
selectedChartValue = selectedChart.Name;
}
else if (hasCharts) {
selectedChartValue = 'Select Chart';
}
else {
selectedChartValue = 'No Charts';
}
React.useEffect(() => {
// select first
if (!selectedChart && chartDefinitions.length > 0) {
setSelectedChartId(chartDefinitions[0].Uuid);
}
}, [chartDefinitions]);
let containerOptions = chartContainers
? chartContainers?.map((contianerDef) => ({
label: contianerDef.name,
value: contianerDef.name,
}))
: [];
if ((0, ChartingState_1.isAgChartDefinition)(selectedChart)) {
containerOptions.unshift({
label: chartingOptions.agGridContainerName,
value: chartingOptions.agGridContainerName,
});
}
const style = {};
let iconSize;
if (size === 'small') {
style.padding = 2;
style.fontSize = 'small';
iconSize = 15;
}
const chartSelector = (React.createElement(Select_1.Select, { className: `ab-${elementType}__Chart__select`, size: size, value: selectedChartId, options: options, placeholder: 'Select Chart', disabled: !hasCharts, onChange: (chartUuid) => setSelectedChartId(chartUuid) }));
const containerSelector = Boolean(chartContainers?.length) && (React.createElement(Select_1.Select, { value: selectedContainer === null ? chartingOptions.agGridContainerName : selectedContainer?.name, size: size, onChange: (containerName) => {
if (containerName === chartingOptions.agGridContainerName) {
setSelectedContainer(null);
}
else {
setSelectedContainer(chartContainers.find((containerOption) => containerOption.name === containerName));
}
}, options: containerOptions, placeholder: "Select Container" }));
const chartButton = (React.createElement(SimpleButton_1.default, { style: style, mr: 1, onClick: () => (isOpen ? hideChart() : showChart(selectedContainer)), disabled: !Boolean(selectedChart), variant: 'text', tone: 'neutral', icon: isOpen ? 'visibility-off' : 'visibility-on', tooltip: isOpen ? 'Hide Chart' : 'Show Chart' }));
const deleteButton = (React.createElement(DeleteChartButton_1.DeleteChartButton, { iconSize: iconSize, chart: selectedChart, accessLevel: chartAccessLevel }));
const editButton = (React.createElement(EditChartButton_1.EditChartButton, { iconSize: iconSize, chart: selectedChart, accessLevel: chartAccessLevel, isOpen: isOpen }));
return {
chartSelector,
containerSelector,
chartButton,
deleteButton,
editButton,
selectedChart,
};
};
exports.useChartingElements = useChartingElements;