inegicomponentes-tabulador/src/stories/Cuadros.stories.jsx

Componentes de visualizacion 2023 - Tabuladores

import Simple from '../componentes/cuadros/simple';
import TablaLayout from '../componentes/cuadros/tabla_layout'

export default {
    title:"Componentes/Cuadros",
    component: Simple
}

export const CuadroSinDatos = (args) => <Simple parametros={args} ></Simple>;

CuadroSinDatos.args = {     
    id:"el",
    tipo:"Simple",               
    exe:true,                                        
    title:"Población Total",
    columnas:[
        {nombre:"Periodo",id:"col1_root3"},
        {nombre:"Población total",id:"col2_root3"}                        
    ],
    datos:[]
};

// caso 2
export const CuadroSimple = (args) => <Simple parametros={args} ></Simple>;

CuadroSimple.args = {
    id:"el2",   
    // exe:false,                                        
    title:"Población Total",
    columnas:[
        {nombre:"Año",id:"col1_root2"},
        {nombre:"Población",id:"col2_root2"},
    ],
    datos:[
        [{value:"2000"},{value:"97,483,412"}],
        [{value:"2005"},{value:"103,263,388"}],
        [{value:"2010"},{value:"112,336,538"}],
        [{value:"2015"},{value:"119,938,473"}],
        [{value:"2020"},{value:"126,014,024"}]                        
    ]
}


// caso 3

export const CuadroColumnasAgrupadas = (args) => <Simple parametros={args} ></Simple>;

CuadroColumnasAgrupadas.args = {
    id:"",                    
    title:"Tasa de desocupación",
    // exe:true,
    columnas:[
        {nombre:"Denominación",id:"col1_root", rowspan:2},
        {nombre:"2021",id:"col2_root", subcolumnas:[
            {nombre:"Ene",id:"col4_root"},
            {nombre:"Feb",id:"col5_root"},
            {nombre:"Mar",id:"col6_root"},
            {nombre:"Abr",id:"col7_root"},
            {nombre:"May",id:"col8_root"},
            {nombre:"Jun",id:"col9_root"},
            {nombre:"Jul",id:"col10_root"},
            {nombre:"Ago",id:"col11_root"},
            {nombre:"Sep",id:"col12_root"},
            {nombre:"Oct",id:"col13_root"},
            {nombre:"Nov",id:"col14_root"},
            {nombre:"Dic",id:"col15_root"},
            ]},
        {nombre:"2022",id:"col3_root", subcolumnas:[
            {nombre:"Ene",id:"col16_root"},
            {nombre:"Feb",id:"col17_root"},
            {nombre:"Mar",id:"col18_root"},
            {nombre:"Abr",id:"col19_root"},
            {nombre:"May",id:"col20_root"},
            {nombre:"Jun",id:"col21_root"},
            {nombre:"Jul",id:"col22_root"},
            {nombre:"Ago",id:"col23_root"},
            {nombre:"Sep",id:"col24_root"},
            {nombre:"Oct",id:"col25_root"},
            {nombre:"Nov",id:"col26_root"},
            {nombre:"Dic",id:"col27_root"},
            ]},
        ],
    datos:[
        [{value:"Serie desestacionalizada"},{value:"4.5"},{value:"4.4"},{value:"4.4"},{value:"4.7"},{value:"4.1"},{value:"4.0"},{value:"4.1"},{value:"4.0"},{value:"3.9"},{value:"3.8"},{value:"3.9"},{value:"3.8"},{value:"3.6"},{value:"3.7"},{value:"3.4"},{value:"3.1"},{value:"3.4"},{value:"3.3"},{value:"3.2"},{value:"3.3"},{value:"3.1"},{value:"3.2"},{value:"3.0"},{value:"3.0"}],
        [{value:"Tendecia ciclo"},
            {value:"4.5"},
            {value:"4.3"},
            {value:"4.4"},
            {value:"4.3"},
            {value:"4.2"},
            {value:"4.5"},
            {value:"4.5"},
            {value:"4.5"},
            {value:"4.5"},
            {value:"4.5"},
            {value:"4.5"},
            {value:"4.7"},
            {value:"4.5"},
            {value:"4.1"},
            {value:"4.2"},
            {value:"3.8"},
            {value:"4.5"},
            {value:"4.5"},
            {value:"3.4"},
            {value:"3.3"},
            {value:"3.2"},
            {value:"3.2"},
            {value:"3.1"},
            {value:"3.1"}
            ]
        ]
}