inegicomponentes-tabulador/src/componentes/graficas/barra/index.js

Componentes de visualizacion 2023 - Tabuladores

/**==============================================
 * !                  COMPONENTE BARRAS 
 *   Fecha 19-01-2023
 *   Modificado 00-00-0000
 *   Descripcion: Grafica de barras en D3 
 *
 *=============================================**/
import React, { useEffect, useRef } from "react";
import * as echarts from 'echarts';
import { SVGRenderer } from 'echarts/renderers';
import {UColor, UData} from "../../../utilidades/index";

echarts.use([SVGRenderer]);
let oConfiguracionGrafica = {};

const Barra = ({parametros, config, datos}) => {
    const refChartContainer = useRef(null);
    const idComponente = "grafica_"+ config.type +"_"+parametros.id 
    // console.log(config)
    // console.log(datos);
    let nDatos = datos.map((d) => {
        return [d.periodo, d.valor];
    });
    nDatos.unshift([config.dimension.x.nombre, config.dimension.y.nombre])
    // console.log(nDatos); 

    //setea los parametros de configuracion
    useEffect(() => {
        setConfiguracion(parametros, config, datos);
    },[config]);
       
    useEffect(() => {
        let domChart =  echarts.init(refChartContainer.current, null, {renderer:'svg'});
        // hookDrawChart(refChartContainer, config, datos);
        
        domChart.setOption(oConfiguracionGrafica);
        window.addEventListener("resize", (e) => {
            domChart.resize();
        })
        return () => {
            if(domChart.isDisposed){
                domChart.dispose()
                domChart = null;
            }
        }

    },[config, datos])

    return (
        <>
            {(parametros.title != undefined)? <h4>{parametros.title}</h4> : ""}           
            <div id={idComponente} ref={refChartContainer} style={{width:"100%",height:(config)? config.alto+"px" : "400px"}}></div>
        </>
    )
}
/**==============================================
 * !                  CONFIGURACION DE PROPIEDADES DEL GRAFICO 
 *   Fecha 19-01-2023
 *   Modificado 00-00-0000
 *   Descripcion: Set de propiedades de configuracion del grafico de barras
 *
 *=============================================**/
const setConfiguracion = (parametros, config, datos) => {
    let series = []
    series = [{ type: 'bar', colorBy:"series"}]

    // Tooltip
    let tooltip = {
        show:true, // true / false
        position:"top", // inside, top, bottom, left, right,
        formatter: (params, ticket, callback) => {
            let dataIndex = params.dataIndex;
            let data = params.data;
            let dimensionsName = params.dimensionsName;
            let name = params.name;
            let seriesName = params.seriesName;
            let value = params.value;
            let $vars = params.$vars;
            let markerColor = params.marker;
            let color = params.color;

            console.log(params)
            let tpl = '<section><div>'+ seriesName +'</div><div>'+ markerColor +' '+name+': <b style="text-align:right">'+  UData.formatoMiles(value[1]) +'</b> '+'</div></section>';
            // let tpl = '<section><div>'+ seriesName +'</div><div>'+ markerColor +' '+name+': <b style="text-align:right">'+  value[1] +'</b> '+'</div></section>';
            return tpl
        }
    };
    if(config.tooltip.show != undefined){
        tooltip.show = config.tooltip.mostrar;
    }
    if(config.tooltip.posicion != undefined){
        tooltip.position = config.tooltip.posicion;
    }
    // Leyenda
    let legend = {bottom:"0%"}
    // Colores
    let color = []   
        color = UColor.generaColor(config.color);

    // Axis
    let yAxis = {};
        yAxis.name = config.nombre_ejey || "";

    let xAxis = {type:"category"};
        xAxis.name = config.nombre_ejex || "";

    // dataset
    let dataset = {source:[]};
    let nDatos = datos.map((d) => {
        return [d.periodo, d.valor];
    });
    nDatos.unshift([config.dimension.x.nombre, config.dimension.y.nombre])
    dataset.source = nDatos;


    //build object 
    oConfiguracionGrafica = {
        tooltip,
        legend,
        yAxis,
        xAxis,
        series, 
        dataset,
        color
    }
}
/**=======================
 * !      Parametros por default
 *  parametros = {}
 * config = {}
 * datos = []
 *  
 *========================**/
Barra.defaultProps = {
    parametros:{},
    config:{},
    datos:[]
}



export default Barra;