inegicomponentes-grafica/src/Stores/_Configuracion.js

Componentes de visualizacion 2023 - Graficas

/**==============================================
 * !     CONTEXTO DEL ESTADO GLOBAL
 *   
 *  @descripcion: config, dataset y columnas del componente  
 *
 * columnas: [
 *  {
 *      nombre:"string",
 *      alinear:"c|i|d" // c= centrar, d=derecha, i=izquierda
 *      resaltar:true // texto en negritas
 *  }
 * ]
 * 
 * 
 * 
 *=============================================**/
import React, {useReducer, useContext, useState} from 'react';
import {Contexto} from './_Contexto';
import Highcharts from 'highcharts';
import HC_exporting from 'highcharts/modules/exporting';

let oGlobalOptionsHighcharts = {    
    lang:{
        contextButtonTitle:"Opciones",
        decimalPoint:".",
        downloadCSV:"Descarga CSV",
        downloadJPEG:"Descarga JPEG",
        downloadPDF:"Descarga PDF",
        downloadPNG:"Descarga PNG", 
        downloadSVG:"Descarga SVG",
        downloadXLS:"Descarga XLS",
        exitFullscreen:"Salir de pantalla completa",
        exportInProgress:"Exportando...",
        hideData:"Ocultar tabla de datos",
        loading:"Cargando...",
        months:["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"],
        noData:"No hay datos para mostrar",
        numericSymbolMagnitude:1000,
        numericSymbols:["k", "M", "G", "T", "P", "E"],
        playAsSound:"Escuchar sonido",
        printChart:"Imprimir gráfica",
        resetZoom:"Reiniciar Zoom",
        resetZoomTitle:"Zoom 1:1",
        shortMonths:["Ene", "Feb", "Mar", "Abr", "May", "Jun", "Jul", "Ago", "Sep", "Oct", "Nov", "Dic"],
        shortWeekdays:undefined,
        thousandsSep:"\u0020",
        viewData:"Ver tabla de datos",
        viewFullscreen:"Ver pantalla completa",
        weekdays:["Domingo", "Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sabado"]
    }
}

let aDatasetDefault = [];

let oConfigDefault = {
    id:"",
    _chartRef:null, // guarda la referencia del obj DOM donde se genera el svg de highcharts
    _chartOptions:{}, // objeto de configuracion para generar la gráfica de Highcharts
    exe:true,
    tipo:"linea",
    titulo:"", 
    mostrar:true,
    herramientas:{
        id:"",
        mostrar:true,
        exportarCsv:true,
        exportarXls:true
    },
    color:"Tema.Azul",
    margen_derecho:10,
    margen_izquierdo:10,
    margen_superior:10,
    margen_inferior:10,                  
    // alto:400,
    grid:{
        x:true,
        y:true
    },                        
    ejeY:{
        mostrar:true,
        texto:"",
        posicion:"l",
    },  
    ejeX:{
        mostrar:true,
        texto:"",
        posicion:"b"
    },                                     
    leyenda: {
        mostrar:true,
        alto:150,

    },    
    series:{
        mostrar:true,
        // curva:true,
        // puntos:true,
        // linea_guia_x:true,
        // linea_guia_y:true,
        // punto_guia:true,
        // etiquetas:{
        //}
    },
    tooltip:{
        mostrar:true, 
        // seguir_puntero:false, // seguimiento del cursor                         
        // formato:function(){}
    }
};

// Creacion del contexto CONFIGURACION
// let CONFIGURACION = React.createContext();
// Provider de configuracion
const ConfiguracionProvider = ({children, initialConfig, initialDataset}) => {    
    const [configOriginal,, setConfigOriginal] = useState({...oConfigDefault, ...initialConfig})
    const [config, setConfigDinamica] = useState({...oConfigDefault, ...initialConfig})
    const [dataset, setDataset] = useState(initialDataset)
    // console.log(initial);

    // set global options Highcharts
    HC_exporting(Highcharts);
    Highcharts.setOptions(oGlobalOptionsHighcharts)

    const updateConfiguracion = (c, dataset) => {        
        setConfigDinamica({...config,...c});
    }
  
    const exports = {
        configOriginal,
        config, 
        dataset,
        updateConfiguracion
    }

    return (
            <Contexto.Provider value={{...exports}}>
                {children}
            </Contexto.Provider>
    )
}

export default ConfiguracionProvider; // provider de parametros