INEGIComponentes.Indicadores.Tabulador

Componentes de visualizacion 2023 - Tabuladores

Índice de contenidos

• Tecnologias
• Instalación y configuración del proyecto
• Comandos
• Configuracion Webpack 5.x
• Uso de componentes

Tecnologias

React +18 Webpack +5 Babel Bootstrap +5 HTML 5 Libreria para generacion de tabuladores *

Instalación y configuración del proyecto

Inicializar proyecto

$ npm init -y

Instalar react y react-dom

$ npm i -D react react-dom path

Instalar webpack combo

$ npm i -D webpack webpack-cli webpack-dev-server html-webpack-plugin json-minimizer-webpack-plugin

Instalar babel combo

$ npm i -D @babel/core @babel/preset-env @babel/preset-react babel-loader

Crear archivo de configuracion .babelrc

{
        "presets": [
                "@babel/preset-env", //para codigo js  compatible             
                "@babel/preset-react" // para codigo react               
        ],
        "plugins":[

        ]
}

Instalar procesadores de css

$ npm i -D style-loader css-loader

Instalación de bootstrap o react-boostrap (5.2.x)

$ npm i -D bootstrap
$ npm i -D react-bootstrap

Instalar y configurar Storybook

Instalación (cualquiera de las 2 opciones)

$ npx storybook init
$ npx storybook init --type react

Ejecutar storybook

$ npm run storybook

Historias y estructura storybook

... pendiente

Comandos para la aplicación

Los siguientes comandos los tenemos configurados en el apartado scripts del archivo package.json

    "start": "webpack serve --config-name commonjs", // ejecuta el componente commonjs local usando script tag
    "build-commonjs": "webpack --config-name commonjs", // genera el bundle del componente para incluirlo en el navegador (script common js)
    "build-modulejs": "webpack --config-name modulejs", // genera el bundle del componente para instalacion desde npm (node module js)
    "storybook": "start-storybook -p 6006", // levanta storybook
    "build-storybook": "build-storybook", // general el bundle de storybook para produccion
    "report": "webpack --profile --json > stats.json" // genera un reporte para visualizar el tamaño de los archivos incluidos en el bundle

Run - ejecutar la app / componente en el navegador

$ npm start

Build - empaquetado o distribución final

Para incluir en el html con script

$ npm run build-commonjs

Para instalar el paquete desde npm

$ npm run build-modulejs

Generacion de archivos en /dist

Estos son los archivos generados despues de hacer un build-commonjs y build-modulejs

| Archivo | Descripcion | | ------- | ----------- | | index.html | html para probar en local el componente o aplicación se usa con el archivo inegicomponentes.tabulador.js | | inegicomponentes.tabulador.js | Archivo para incluir en el html usando <script src="..."></script> | | inegicomponentes.tabulador.mod.js | Arhivo para instalar desde npm e incluir como import <paquete_nombre> from '...' |

Para configurar Webpack.config.js

const path = require('path');
const HtmlPlugin = require('html-webpack-plugin');
const JsonMinimizerPlugin = require("json-minimizer-webpack-plugin");

const configCommonjs = {
        // mode:'production',
        // cache:true,
        name:"commonjs",
        mode:'development',
        entry: {
                index:'./src/puente.js',
        },
        output: {
                path:path.join(__dirname, '/dist/'),
                filename:'inegicomponentes.tabulador.js',                
        },          
        resolve:{
                extensions:['.js','.jsx']
        },
        module:{
                rules:[
                        {
                                test: /\.(js|jsx)$/,
                                use:['babel-loader'],
                                exclude:path.join(__dirname, "/node_modules/")
                        },
                        {
                                test: /\.css$/,
                                use: [
                                        'style-loader', 
                                        'css-loader'                               
                                ]
                        },
                        {
                                test: /\.json$/i,
                                type: "json",
                        },
                ]
        },      
        optimization: {
                minimize: true,
                minimizer: [
                        new JsonMinimizerPlugin(),
                ]
        },       
        plugins:[
                new HtmlPlugin({
                        template:'./src/index.html'
                }),                
                // new BundleAnalyzerPlugin({}),               
        ],        
        devServer:{
                port:9999,
                liveReload:true,
                // open:false
                host:'127.0.0.1',               
                compress:false,
        }
}

// configuración para Modulo node js 
const configModulejs = {
        // mode:'production',
        // cache:true,
        name:"modulejs",
        mode:'development',
        entry: {
                index:'./src/puente.mod.js',
        },
        output: {
                path:path.join(__dirname, '/dist/'),
                filename:'inegicomponentes.tabulador.mod.js',                
                libraryTarget:"module"
        },       
         experiments: {
                outputModule: true,
        },      
        resolve:{
                extensions:['.js','.jsx']
        },
        module:{
                rules:[
                        {
                                test: /\.(js|jsx)$/,
                                use:['babel-loader'],
                                exclude:path.join(__dirname, "/node_modules/")
                        },
                        {
                                test: /\.css$/,
                                use: [
                                        'style-loader', 
                                        'css-loader'                               
                                ]
                        },
                        {
                                test: /\.json$/i,
                                type: "json",
                        },
                ]
        },      
        optimization: {
                minimize: true,
                minimizer: [
                        new JsonMinimizerPlugin(),
                ]
        }
}
module.exports = [configCommonjs, configModulejs];

Uso de componentes

> Llamado y ejecucion de componentes en Javascript y HTML

Listado de componentes de Tabulador:

• INEGIComponentes.Tabuladores.Basico("idElementoDom",parametros)

 <script src=".../inegicomponentes.tabulador.js"></script>
 <div id="micomponente"></div>
 <script>
        var parametros = {                    
                title:"Población Total",
                columnas:[
                        {nombre:"Año"},
                        {nombre:"Población"},
                ],
                datos:[
                        [{value:"2000"},{value:"97,483,412", decimales:0}],
                        [{value:"2005"},{value:"103,263,388", decimales:0}],
                        [{value:"2010"},{value:"112,336,538", decimales:0}],
                        [{value:"2015"},{value:"119,938,473", decimales:0}],
                        [{value:"2020"},{value:"126,014,024", decimales:0}]                        
                ]
        }
         INEGIComponentes.Tabuladores.Basico("micomponente",parametros)
</script>

Llamado y ejecucion de componentes de proyecto de Nodejs

Listado de componentes de Tabulador:

• <Basico parametros={...}>
• <TablaLayout parametros={...}>
• <Columnas parametros={...}>
• <Filas parametros={...}>

 import {Basico} from 'inegicomponente.tabulador';

 const App = () => {
        var config = {                    
                title:"Población Total",
                columnas:[
                        {nombre:"Año"},
                        {nombre:"Población"},
                ],
                datos:[
                        [{value:"2000"},{value:"97,483,412", decimales:0}],
                        [{value:"2005"},{value:"103,263,388", decimales:0}],
                        [{value:"2010"},{value:"112,336,538", decimales:0}],
                        [{value:"2015"},{value:"119,938,473", decimales:0}],
                        [{value:"2020"},{value:"126,014,024", decimales:0}]                        
                ]
        }
        
        return (
               <Basico parametros={config} /> 
        )
 }