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

Componentes de visualizacion 2023 - Tabuladores

/**==============================================
 * !                  COMPONENTE LINEA 
 *   Fecha 19-01-2023
 *   Modificado 00-00-0000
 *   Descripcion: Grafica de lineas en D3 
 *
 *=============================================**/
import React, { useEffect, useRef } from "react";
import * as echarts from 'echarts';
import { SVGRenderer } from 'echarts/renderers';
echarts.use([SVGRenderer]);
const aColors = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']

/* const hookDrawChart = (hGefChartContainer, config, datos) => {
    console.log("-> hookDrawChart");
    console.log(config);
    let domChart =  echarts.init(hGefChartContainer.current, null, {renderer:'svg'});
    const tmpConfig = {
        xAxis: {
          type: 'category',
          data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']
        },
        yAxis: {},
        series: [
          {
            type: 'bar',
            name: '2015',
            data: [89.3, 92.1, 94.4, 85.4]
          },
          {
            type: 'bar',
            name: '2016',
            data: [95.8, 89.4, 91.2, 76.9]
          },
          {
            type: 'bar',
            name: '2017',
            data: [97.7, 83.1, 92.5, 78.1]
          }
        ]
      };
    domChart.setOption(tmpConfig);
    // return domChart

    window.addEventListener("resize", () => {
        domChart.resize();
    })

    // return {}
} */

const Linea = ({parametros, config, datos}) => {
    const refChartContainer = useRef(null);
    console.log(config)
    const idComponente = "grafica_"+ config.type +"_"+parametros.id 
    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);    
    let tmpConfig = {
      legend: {bottom:"0%"},
      tooltip: {
        trigger: 'axis',
        showContent: true
      },
      dataset: {
        source: nDatos
      },
      color:aColors[config.color],
      xAxis: { name: config.nombre_ejex, type: 'category'},
      yAxis: { name: config.nombre_ejey },
      series: [{ type: 'line' }]
    };

    useEffect(() => {
        let domChart =  echarts.init(refChartContainer.current, null, {renderer:'svg'});
        // hookDrawChart(refChartContainer, config, datos);
        
        domChart.setOption(tmpConfig);
        window.addEventListener("resize", (e) => {
            console.log(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>
        </>
    )
}
/**=======================
 * !      Parametros por default
 *  parametros = {}
 * config = {}
 * datos = []
 *  
 *========================**/
Linea.defaultProps = {
    parametros:{},
    config:{},
    datos:[]
}



export default Linea;