@adaptabletools/adaptable/src/View/Charting/useExternalChartState.js

Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements

import React from 'react';
import { useAdaptable } from '../AdaptableContext';
const buttonChangeSubscribers = [];
export const useExternalChartState = (chartDefinition) => {
    const adaptable = useAdaptable();
    const [isOpen, setIsOpen] = React.useState(() => {
        return (chartDefinition &&
            adaptable.api.chartingApi.internalApi.isExternalChartOpened(chartDefinition));
    });
    const liveChartState = adaptable.api.chartingApi.internalApi.isExternalChartOpened(chartDefinition);
    if (liveChartState !== isOpen) {
        setIsOpen(liveChartState);
    }
    const updateIsOpen = React.useCallback(() => {
        setIsOpen(chartDefinition &&
            adaptable.api.chartingApi.internalApi.isExternalChartOpened(chartDefinition));
    }, [chartDefinition]);
    React.useEffect(() => {
        const subscriber = () => {
            updateIsOpen();
        };
        buttonChangeSubscribers.push(subscriber);
        return () => {
            const index = buttonChangeSubscribers.indexOf(subscriber);
            if (index > -1) {
                buttonChangeSubscribers.splice(index, 1);
            }
        };
    }, [updateIsOpen]);
    return {
        showChart: (container) => {
            adaptable.api.chartingApi.internalApi.onShowExternalChart(chartDefinition, container);
            requestAnimationFrame(() => {
                buttonChangeSubscribers.forEach((subscriber) => subscriber());
            });
        },
        hideChart: () => {
            adaptable.api.chartingApi.internalApi.onHideExternalChart(chartDefinition);
            requestAnimationFrame(() => {
                buttonChangeSubscribers.forEach((subscriber) => subscriber());
            });
        },
        isOpen,
    };
};