inegicomponentes-grafica/src/Stores/Global.js

Componentes de visualizacion 2023 - Graficas

/**==============================================
 * !     CONTEXTO DEL ESTADO GLOBAL
 *   
 *  @descripcion: Declaracion y configuracion del estado global donde se guardan los store 
 * 
 *=============================================**/
import React, {createContext, useRef, useContext} from 'react';
import Highcharts from 'highcharts';
import HC_exporting from 'highcharts/modules/exporting'
import HC_data from 'highcharts/modules/data'
import HC_accessibility from 'highcharts/modules/accessibility'
import { createStore, useStore } from 'zustand';
import { OpcionesHighcharts, ParametrosUsuario, OpcionesGrafica } from '../Utilidades/Configuracion';


// Merge de objeto configuración
const mergeObject = (store, c) => {   
    return {...store,...c};
}

export const StoreContexto = createContext();

// Contexto del Store global
const useStoreGlobal = (selector) => {
    const store = useContext(StoreContexto)
    if (!store) {
      throw new Error('Missing StoreProvider')
    }
    return useStore(store, selector)
  }

// Provider
const StoreProvider = ({children}) => {
    let store = useRef()
    if(!store.current){
        store.current = createStore((set, get) => ({ 
            _configuracion:{}, // store parámetros de configuracion de entrada
            _opcgrafica:{}, // store opciones del grafico
            _grafica:null, // store instancia grafica
            _dataset:{},// store datos de entrada
            _inicializa:(c, d) => {
                
                // Carga de modulos exportacion, data, accesibilidad y opciones globales de Highcharts
                HC_exporting(Highcharts);
                HC_data(Highcharts);
                HC_accessibility(Highcharts);
                Highcharts.setOptions(OpcionesHighcharts)                
                
                // seteamos los objetos a los estados
                set((state) =>({_dataset:d}))
                set((state) =>({_configuracion:c}))
            },
            // Actualiza parametros de configuracion
            _updateConfiguracion:(p) => {
                let oConfig = get()._configuracion;  
                let oMerged = mergeObject(oConfig,p);
                set((state) =>({_configuracion:oMerged}))
            },
            // Actualiza de las opciones de la gráfica
            _updateOpcionesGrafica:(p) => {
                let oOpciones = get()._opcgrafica;                               
                let aMerged = mergeObject(oOpciones,p);
                set((state) =>({_opcgrafica:aMerged}))
            },
            //
            _setGrafica: (chart) => {
                set((state) => ({_grafica:chart}));
            }
        }))
    }
    return (
        <StoreContexto.Provider value={store.current}>
            {children}
        </StoreContexto.Provider>  
    )
} 

export {
    useStoreGlobal,
    StoreProvider
}