@adaptabletools/adaptable-cjs
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
75 lines (74 loc) • 3.28 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.useAgChartState = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const react_redux_1 = require("react-redux");
const AdaptableContext_1 = require("../AdaptableContext");
const InternalRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/InternalRedux"));
const useAgChartState = (chartDefinition) => {
const [chartRef, setChartRef] = React.useState(null);
const adaptable = (0, AdaptableContext_1.useAdaptable)();
const currentChartModels = (0, react_redux_1.useSelector)((state) => InternalRedux.ChartingCurrentChartModelsSelector(state.Internal));
React.useEffect(() => {
if (!chartDefinition) {
setChartRef(null);
return;
}
const currentChartRef = adaptable.api.chartingApi.getChartRef(chartDefinition?.Model?.chartId) ?? null;
setChartRef(currentChartRef);
}, [currentChartModels, chartDefinition]);
const closeAlreadyOpenedChartsInContainer = (element) => {
const chartModelAlreadyInChartContainer = currentChartModels.find((chartModel) => {
const chartRef = adaptable.api.chartingApi.getChartRef(chartModel?.chartId);
return chartRef && element.contains(chartRef.chartElement);
});
if (chartModelAlreadyInChartContainer) {
const chartRef = adaptable.api.chartingApi.getChartRef(chartModelAlreadyInChartContainer.chartId);
if (chartRef) {
chartRef.destroyChart();
}
}
};
const showChart = React.useCallback((chartContainer) => {
if (!adaptable || !chartDefinition) {
return;
}
const element = typeof chartContainer?.element === 'string'
? document.querySelector(chartContainer.element)
: chartContainer?.element;
if (!element && typeof chartContainer?.element === 'string') {
adaptable.logger.consoleLogByMessageType(`Chart container element not found: ${chartContainer.element}`, 'Error');
return;
}
const chartRef = adaptable.api.chartingApi.getChartRef(chartDefinition.Model.chartId);
if (chartRef) {
// chart alredy opened
return;
}
/**
* When using a custom container, make sure multiple charts are not opened in the same container.
* If multple charts are opened in the same contianer, it infinitly adds the charts to the container.
*/
if (chartContainer && element) {
if (chartContainer.chartsDisplay !== 'multiple') {
closeAlreadyOpenedChartsInContainer(element);
}
adaptable.api.chartingApi.showChartDefinitionOnce(chartDefinition, element);
}
else {
adaptable.api.chartingApi.showChartDefinitionOnce(chartDefinition);
}
}, [chartDefinition, currentChartModels]);
const closeChart = React.useCallback(() => {
if (chartRef) {
chartRef.destroyChart();
}
}, [chartRef]);
return {
isOpen: Boolean(chartRef),
showChart,
closeChart,
};
};
exports.useAgChartState = useAgChartState;