inegicomponentes-grafica/src/Layouts/GraficaLayout.js

Componentes de visualizacion 2023 - Graficas

import React, {useCallback, memo, useEffect, Suspense, useState, useRef} from 'react';
import Titulo from '../Componentes/Titulo';
import Toolbar from '../Componentes/Toolbar';
import GraficaHighchart from '../Componentes/GraficaHighchart';
import {useStoreGlobal} from '../Stores/Global';
import { useShallow } from 'zustand/react/shallow';

const GraficaLayout = ({initConfig, initDataset}) => {
    const refContainer = useRef(null);    
    const _configuracion = useStoreGlobal(useShallow((state) => state._configuracion));
    const _dataset = useStoreGlobal(useShallow((state) => state._dataset));
    const _inicializa = useStoreGlobal((state) => state._inicializa);
    const [showChart, setShowChart] = useState(false);
    initConfig.refContainer = refContainer;

    // console.log("###### GraficaLayout")
    
    useEffect(() => {
        if(Object.keys(_configuracion).length === 0){
            setTimeout(() => {
                // console.log("###### GraficaLayout render")
                // console.log("### GraficaLayout render")        
                _inicializa(initConfig, initDataset);
                setShowChart(true);

            },1000)
        }

        return () => {
            _inicializa({}, []);
            setShowChart(false);
        }
       
    // },[initConfig, initDataset])
    },[initConfig])

    return ( 
        (!showChart)? <Suspense>Construyendo!!!</Suspense> :         
        <section id={_configuracion.contenedorId} className="border" ref={refContainer}> 
            <Titulo titulo={_configuracion?.titulo} id={_configuracion.id}/>
            <Toolbar configuracion={_configuracion} /> 
            <GraficaHighchart configuracion={_configuracion} dataset={_dataset}/>              
        </section>
    )
}
export default memo(GraficaLayout);