Shimoku | Prueba de concepto

En la actualidad la forma en que se presentan los datos y con la rapidez que se requiere hace necesario la creación de librerías shimoku, permite hacer este salto. Es decir, con el dataframe (los datos) se pueden expresar en gráfica de todo tipo, de barras, pastel, histogramas y demás.

Preparación del ambiente

Para poder agilizar las cosas, es de cierta manera necesario hacer uso de panda una librería escrita para la extracción y análisis de datos. O al menos para esta prueba de concepto se utilizo, también hay que instalar la librería shimoku, desde una terminal ejecutando los siguientes comandos:

sudo apt install python-pip
pip install pandas
pip install shimoku-api-python

Nota: es importante que la versión de python sea superior a la tres. Preferentemente la 3.9.x

La línea sudo apt install python-pip permite instalar las herramientas para hacer más fácil la instalación de librerías de python.

La línea pip install pandas, es la librería para la extracción y análisis de datos.

la línea pip install shimoku-api-python, permite instalar la biblioteca, de shimoku.

Importando las librerías

Las siguientes líneas de código en python permiten la importación de las librerías necesarias, se puede observar que se utiliza shimoku_api_python y se le asigna un alias Shimoku. Lo mismo para pandas con su alias pd, numpy con el alias np. Cabe aclarar que numpy se instala por defecto con la instalación de pandas.

from os import getenv
from typing import Dict, List
import shimoku_api_python as Shimoku
import pandas as pd
import numpy as np

Cargando Datos

En las siguientes líneas de código se puede observar que se hace uso de la función de lectura de un archivo de panda este fichero contiene los datos para la prueba, se calcula los valores mínimos y máximos, se convierten a string para posteriormente mostrarlo como indicadores.

df = pd.DataFrame = pd.read_csv('datos.csv') #cargando datos del archivo
print('cargando datos df') #avisando en la terminal
valorMaximo=df.max() #calculando el máximo
valorMinimo=df.min() #calculando el mínimo
imax= str(valorMaximo[1]) #convirtiendo a string los valores máximos y mínimos de las 
rmax= str(valorMaximo[2]) #columnas instalado y registrado.
imin= str(valorMinimo[1])
rmin= str(valorMinimo[2])

Variables de ambiente para shimoku

html=(
      "<p style='background-color: '#daf4f0';>"
      "<b>Descripcion</b>: Esta grafico permite mostrar los picos de "
      "instalaciones y registros, realizados durante un dia de trabajo.</p>"
     )
env='prod'
menu_path="PruebaConcepto/Reporte"
acces_token  = getenv(env,'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx')
universe_id: str = getenv(env,'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx')
business_id: str = getenv(env,'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx')

En las líneas anteriores se encuentran las variables que se requiere para que se autentique y se envíen los datos a la API de shimoku.

Configuración

Se observa en las siguientes líneas se muestra la configuración de la comunicación del cliente con shimoku. También se nota el uso de un par de las variables configuradas anteriormente.

shimoku = Shimoku.Client(
    config={'access_token': acces_token},
    universe_id = universe_id,
    environment='production',
)

Creando una gráfica

shimoku.plt.set_business(business_id)
report: Dict = shimoku.plt.bar(
    df,x='hora', y=['instalado','registrados'],
    menu_path=menu_path,
    order=0,
    title='Instalaciones y Registros',
)

Se observa que con las líneas anteriores se genera una gráfica de barra, los datos se obtiene de la variable df, que se cargo con el dataframe, del archivo que se leyó con panda. Se debe de notar que en el eje de las equis, se colocara las horas y en el eje de la (y) los valores mínimos y máximos que se tengan de los servicios instalados o registrados. El menu_path, se refiere a la ubicación donde se encontrará la gráfica o el reporte en cuestión; esta variable fue declarada mas arriba. El valor de order, depende de la posición que se vayan a colocar los elementos (gráficas, indicadores, mas gráficas, html, entre otros.) En el title, va a colocarse el título de la gráfica.

Cargando el html

Para esta prueba de concepto, se quiere hacer uso del html, esto es de la variable que html, donde con el siguiente código se le envía o carga a shimoku. Se debe de observar que, se colocará en el mismo menu_path, lo diferente aquí es que el order, ya esta en la posición 1, que indica que se colocará después de la gráfica. rows_size, indica en que posición de las filas comenzará, lo mismo para cols_size, solo que esté indica las columnas.

shimoku.plt.html(
    html=html,
    menu_path=menu_path,
    order=1, rows_size=2, cols_size=12,
)

Creando indicadores

La siguientes líneas de código muestran la creación de cuatros indicadores, a los que corresponde los máximos y mínimos servicios instalados, así como los registrados. Para todos los casos se le asigno un color, un título, una alineación y un valor, el cual se calculo con la función min y max de panda.

data_=[
    {
       "description":"",
       "title":"Max.Instalado",
       "value":imax,
       "align":"center",
       "color":"red",
    },
   {
       "description":"",
       "title":"Max.Registrado",
       "value":rmax,
       "align":"center",
       "color":"success",
   },
   {
       "description":"",
       "title":"Min.Instalado",
       "value":imin,
       "align":"center",
       "color":"blue",
   },
   {
       "description":"",
       "title":"Min.Registrado",
       "value":rmin,
       "align":"center",
       "color":"orange",
   },
]

Cargando indicadores

En las posteriores líneas de código se muestra la manera en que se cargan o envían los datos de los indicadores a shimoku. Si todo sale bien se habrá creado un reporte en el que se incluye una gráfica de barras interactiva, una descripción de la gráfica en html y cuatro indicadores en diferentes colores.

shimoku.plt.indicator(
    data=data_,
    menu_path=menu_path,
    order=2,
    rows_size=2, cols_size=12,
    value='value',
    header="title",
    footer='description',
    align='align',
    color='color',
)

Finales

Este es el código completo donde se realiza un reporte sencillo, observe la imagen 1 es como se visualiza los datos. Es importante aclarar que las credenciales hay que solicitarla mediante la página shimoku.io. Los archivos originales se encuentran en el github se puede acceder desde aqui

from os import getenv
from typing import Dict, List
import shimoku_api_python as Shimoku
import pandas as pd
import numpy as np
df = pd.DataFrame = pd.read_csv('datos.csv')
print('cargando datos df')
valorMaximo=df.max()
valorMinimo=df.min()
imax= str(valorMaximo[1])
rmax= str(valorMaximo[2])
imin= str(valorMinimo[1])
rmin= str(valorMinimo[2])
# codigo shimoku
html=(
      "<p style='background-color: '#daf4f0';>"
      "<b>Descripcion</b>: Esta grafico permite mostrar los picos de "
      "instalaciones y registros, realizados durante un dia de trabajo.</p>"
     )
env='prod'
menu_path="PruebaConcepto/Reporte"
acces_token  = getenv(env,'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx')
universe_id: str = getenv(env,'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx')
business_id: str = getenv(env,'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx')
print('Entornos creados')
shimoku = Shimoku.Client(
    config={'access_token': acces_token},
    universe_id = universe_id,
    environment='production',
)
print('Cliente configurado')
shimoku.plt.set_business(business_id)
report: Dict = shimoku.plt.bar(
    df,x='hora', y=['instalado','registrados'],
    menu_path=menu_path,
    order=0,
    title='Instalaciones y Registros',
)
print ('Grafica generada')
shimoku.plt.html(
    html=html,
    menu_path=menu_path,
    order=1, rows_size=2, cols_size=12,
)
print ('Html generado')
data_=[
    {
       "description":"",
       "title":"Max.Instalado",
       "value":imax,
       "align":"center",
       "color":"red",
    },
   {
       "description":"",
       "title":"Max.Registrado",
       "value":rmax,
       "align":"center",
       "color":"success",
   },
   {
       "description":"",
       "title":"Min.Instalado",
       "value":imin,
       "align":"center",
       "color":"blue",
   },
   {
       "description":"",
       "title":"Min.Registrado",
       "value":rmin,
       "align":"center",
       "color":"orange",
   },
]
print ('cargando indicadores')
shimoku.plt.indicator(
    data=data_,
    menu_path=menu_path,
    order=2,
    rows_size=2, cols_size=12,
    value='value',
    header="title",
    footer='description',
    align='align',
    color='color',
)
print ('DataWebApp creada')

El código fue generado con el manual de shimoku, se puede acceder desde aquí