inegicomponentes-tabulador/README.md

Componentes de visualizacion 2023 - Tabuladores

# INEGIComponentes.Indicadores.Tabulador

Componentes de visualizacion 2023 - Tabuladores

## Índice de contenidos
* [Tecnologias](#item1)
* [Instalación y configuración del proyecto](#item2)
* [Comandos](#item3)
* [Configuracion Webpack 5.x](#item4)
* [Uso de componentes](#item5)


<a name="item1"></a>
### Tecnologias

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

<a name="item2"></a>
## Instalación y configuración del proyecto

Inicializar proyecto

```shell
$ npm init -y
```

Instalar react y react-dom

```shell
$ npm i -D react react-dom path
```

Instalar webpack combo

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

Instalar babel combo

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

Crear archivo de configuracion .babelrc

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

        ]
}
```

Instalar procesadores de css

```shell
$ npm i -D style-loader css-loader
```

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

```shell
$ npm i -D bootstrap
$ npm i -D react-bootstrap
```

## Instalar y configurar Storybook

Instalación (cualquiera de las 2 opciones)
```shell
$ npx storybook init
$ npx storybook init --type react
```
Ejecutar storybook
```shell
$ npm run storybook
```

### __Historias y estructura storybook__
 
 ... pendiente

<a name="item3"></a>
## Comandos para la aplicación
Los siguientes comandos los tenemos configurados en el apartado *scripts* del archivo __package.json__

```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

```shell
$ npm start
```

Build - empaquetado o distribución final

__Para incluir en el html con script__
```shell
$ npm run build-commonjs
```
__Para instalar el paquete desde npm__
```shell
$ 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 '...' ``` |

<a name="item4"></a>
## Para configurar Webpack.config.js

```javascript
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];
```

<a name="item5"></a>
### Uso de componentes

#### > Llamado y ejecucion de componentes en Javascript y HTML

Listado de componentes de Tabulador:
- ```INEGIComponentes.Tabuladores.Basico("idElementoDom",parametros)```
  
```html
 <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={...}>```

```javascript
 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} /> 
        )
 }
```