@adaptabletools/adaptable
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
70 lines (69 loc) • 3 kB
JavaScript
import * as React from 'react';
import { useSelector } from 'react-redux';
import { useAdaptable } from '../AdaptableContext';
import * as InternalRedux from '../../Redux/ActionsReducers/InternalRedux';
export const useAgChartState = (chartDefinition) => {
const [chartRef, setChartRef] = React.useState(null);
const adaptable = useAdaptable();
const currentChartModels = 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,
};
};