inegicomponentes-grafica/src/Componentes/GraficaHighchart.js

Componentes de visualizacion 2023 - Graficas

/**==============================================
 *                   Componente del grafico en Highcharts
 *   Fecha 04-01-2024
 *   Modificado 22-01-0000
 *   Descripcion:  
 *
 *=============================================**/

import React, {useCallback, Suspense, useState, useEffect, useRef} from "react";
import {useStoreGlobal} from "../Stores/Global";
import HighchartsReact from 'highcharts-react-official';
import Highcharts from 'highcharts';
import { useShallow } from "zustand/react/shallow";
import {generaJsonGrafica} from '../Utilidades/Configuracion';
import Helper from '../Utilidades/Helper'

const GraficaHighchart = ({configuracion, dataset}) => { 
    // referencia del elemento de la grafica highcharts
    const chartRef = useRef(null);
    let  aChartOptions = null;
    // objeto de configuracion para highcharts
    // Leer el Contexto global para obtner la configuracion
    // const _configuracion = useStoreGlobal(useShallow((state) => state._configuracion));
    const _opcgrafica = useStoreGlobal((state) => state._opcgrafica);    
    const _updateOpcionesGrafica = useStoreGlobal((state) => state._updateOpcionesGrafica);
    const _setGrafica = useStoreGlobal((state) => state._setGrafica);
    const [showGrafica, setShowGrafica] = useState(false)
    // aChartOptions = Object.keys(_opcgrafica).length === 0 ? aChartOptions : _opcgrafica;    
    
    useEffect(() => {
        
        // Guardamos la instancia y las opciones finales del grafico            
        _setGrafica(chartRef.current)
        aChartOptions = generaJsonGrafica(configuracion, dataset); 
        // if(chartRef.current !== null){

        _updateOpcionesGrafica(aChartOptions)
        setShowGrafica(true);

        return () => {
            _updateOpcionesGrafica({})
            _setGrafica(null)
            setShowGrafica(false);
        }

    },[showGrafica])

    return (
        (!showGrafica)? <Suspense>Cargando!!!</Suspense> : (
            Helper.objetoVacio(_opcgrafica)? <div role="alert" className="p-1 fs-7 alert alert-danger">El tipo de gráfica <strong>{configuracion.tipo}</strong> no existe.</div> :
                <HighchartsReact 
                    key={"cig-hc-"+configuracion.id}
                    highcharts={Highcharts}
                    options={_opcgrafica}
                    constructor={"Chart"}
                    ref={chartRef}
                    // callback={callbackChart}
                />
        )
    )
}
export default React.memo(GraficaHighchart);