inegicomponentes-grafica/src/Componentes/Toolbar.js

Componentes de visualizacion 2023 - Graficas

import React, { useEffect, useState } from 'react';
import * as bootstrap from 'bootstrap'
import {useStoreGlobal} from '../Stores/Global';
import { useShallow } from 'zustand/react/shallow'

const Toolbar = () => {
    const {id, herramientas} = useStoreGlobal(useShallow((state) => state._configuracion));
    const _grafica = useStoreGlobal(useShallow((state) => state._grafica));
    const _opcgrafica = useStoreGlobal((state) => state._opcgrafica);
    const _updateConfiguracion = useStoreGlobal((state) => state._updateConfiguracion);
    const _updateOpcionesGrafica = useStoreGlobal((state) => state._updateOpcionesGrafica);
    const [showToolbar, setEnableToolbar] = useState(false);        

    
    const ver = () => {
        console.log(_grafica.chart)
        console.log(_opcgrafica)
        // console.log(config.chartInstancia.target)
    }
    const cambiarTitulo = () => {
        const nt = {titulo:"Nuevo titulo "+ Math.round(Math.random()*100,2)};        
        _updateConfiguracion(nt);
    }
    const actualizaDatosGrafica = (e) => {
        let opciones = _opcgrafica;        
        const nCategorias = ["Chihuahua","Aguascalientes","CDMX", "Durango"]
        const data = [(Math.random()*300), Math.round(Math.random()*500,2), Math.round(Math.random()*500,2), Math.round(Math.random()*500,2)];
        const data2 = [Math.random()*600, Math.round(Math.random()*500,2), Math.round(Math.random()*500,2), Math.round(Math.random()*500,2)];
        opciones.xAxis = {categories:nCategorias}
        opciones.series = [{data:data},{data:data2}]
        opciones.modified = Math.round(Math.random()*100,1)
        opciones.exporting = {enabled:false}
        _updateOpcionesGrafica(opciones);
    }
    const actualizaGrafica = () => {
        let opciones = _opcgrafica;
        let chart = opciones.chart;
        chart.type = "column";
        opciones.chart = chart;

        _updateOpcionesGrafica(opciones)
    }
    // console.log("### Toolbar");

    useEffect(() => {
        // if(herramientas !== undefined){
            // console.log("### Toolbar render");
            if(herramientas.mostrar && Object.keys(_opcgrafica).length > 0){            
                setEnableToolbar(herramientas.mostrar);
            }
        // }
    }, [showToolbar, _opcgrafica])

    return (
        (showToolbar)?             
            <div className="row-fluid" id={"cit-toolbar-"+id}>
                <div className='col'>
                    <nav className="navbar navbar-expand-md bg-light">
                        <div className="container-fluid justify-content-end">
                            <button className="navbar-toggler btn-sm" type="button" data-bs-toggle="collapse" data-bs-target={"#navbarSupportedContent"+id} aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                                <span className="fs-6">Opciones</span>
                            </button>
                            <div className="collapse navbar-collapse justify-content-end" id={"navbarSupportedContent"+id}>                          
                                <div className="float-end">
                                    <a className="btn" onClick={ver}>
                                        Ver datos
                                    </a>
                                    <a className="btn" onClick={actualizaDatosGrafica}>
                                        Update datos
                                    </a>
                                    <a className="btn" onClick={cambiarTitulo}>
                                        Titulo
                                    </a>
                                    <a className="btn" onClick={actualizaGrafica}>
                                        <label>Grafica Bar</label>
                                    </a>
                                    <div className="btn-group">
                                        <button className="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                            Opciones
                                        </button>
                                        <ul className="dropdown-menu dropdown-menu-end">
                                            <li><a className="dropdown-item" >Menu item</a></li>
                                            <li><a className="dropdown-item" >Menu item</a></li>
                                            <li><a className="dropdown-item" >Menu item</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>                        
                        </div>
                    </nav>
                </div>
            </div>
        : null
    )
}
export default Toolbar;