Cree un tablero de datos utilizando HTML, CSS y JavaScript

El tablero para sus clientes, clientes o compañeros de trabajo se está convirtiendo en una parte esencial del conjunto de habilidades requerido por desarrolladores de software, científicos de datos, profesionales de ML e ingenieros de datos. Incluso si trabaja principalmente en el procesamiento de back-end, los datos que está procesando generalmente deben ser “superficiales” a los usuarios en algún momento. Si tiene suerte, su organización puede tener un equipo frontal dedicado para encargarse de eso, pero a menudo dependerá de usted.

Ser un desarrollador directo de Python sin experiencia en HTML, JavaScript, etc., ya no es una excusa, ya que muchas bibliotecas de Python, como Streamlit y Gradio, han surgido en los últimos años.

Sin embargo, este artículo no se trata de ellos, porque soy uno de esos desarrolladores de Python directos, y ya he hecho lo simplico y el Gradio. Entonces era hora de arremanerme y ver si podía aprender nuevas habilidades y crear un tablero con esos viejos incondicionales de desarrollo front-end: HTML, JavaScript y CSS.

Los datos para nuestro tablero vendrán de una base de datos SQLite local. Creé una tabla Sales_Data en SQLite que contiene datos de ventas ficticias. Aquí están los datos en forma tabular.

A continuación se muestra algún código que puede usar para seguir y crear su propia base de datos SQLite y tabla con los datos como se muestra.

En caso de que se pregunte por qué solo estoy insertando un puñado de registros en mi base de datos, no es porque no creo que el código pueda manejar grandes volúmenes de datos. Es solo que quería concentrarme en la funcionalidad del tablero en lugar de distraerme por los datos. No dude en usar el script que proporcione a continuación para agregar registros adicionales al conjunto de datos de entrada si lo desea.

Entonces, nos quedamos en el mundo de Python por un poco más de tiempo, ya que configuramos un DB SQLite programáticamente.

import sqlite3 # define el nombre de la base de datos database_name = “c: \\ users \\ thoma \\ proyectos \\ my-dashboard \\ sales_data.db” # conectar a sqlite database conn = sqlite3.connect (dataBase_name) # crear un objeto cursor de cursor = conn.cursor () # sql a la creación de sales ” ” ” ” ” ” ” ” ‘ Crear tabla si no existe las ventas (yder_id integer clave primaria, text orden_date, customer_id integer, customer_name text, producto_id integer, text_names text, categorías texto, cantidad de cantidad, precio real, total real); ” ‘ # Ejecute la consulta para crear la tabla cursor.execute (create_table_query) # Datos de muestra para insertar en la tabla’ Sales ‘sample_data = [
(1, “2022-08-01”, 245, “Customer_884”, 201, “Smartphone”, “Electronics”, 3, 90.02, 270.06),
(2, “2022-02-19”, 701, “Customer_1672”, 205, “Printer”, “Electronics”, 6, 12.74, 76.44),
(3, “2017-01-01”, 184, “Customer_21720”, 208, “Notebook”, “Stationery”, 8, 48.35, 386.80),
(4, “2013-03-09”, 275, “Customer_23770”, 200, “Laptop”, “Electronics”, 3, 74.85, 224.55),
(5, “2022-04-23”, 960, “Customer_23790”, 210, “Cabinet”, “Office”, 6, 53.77, 322.62),
(6, “2019-07-10”, 197, “Customer_25587”, 202, “Desk”, “Office”, 3, 47.17, 141.51),
(7, “2014-11-12”, 510, “Customer_6912”, 204, “Monitor”, “Electronics”, 5, 22.5, 112.5),
(8, “2016-07-12”, 150, “Customer_17761”, 200, “Laptop”, “Electronics”, 9, 49.33, 443.97)
]

# Sql para insertar datos en la tabla ‘ventas’ insers_data_query = ” ” insertar en ventas (orden_id, orden_date, customer_id, customer_name, product_id, producto_names, categorías, cantidad, precio, total) valores (?,?,?,?,?,?,?,?,?,?) ” ‘ # El cursor de datos de la muestra. # Conjunto de la transacción conn.commit () # cierre la conexión conn.close () print (f “base de datos ‘{database_name}’ se ha creado y poblado con éxito”).

Funcionalidad del tablero

Nuestro tablero tendrá la siguiente funcionalidad.

Métricas clave. Ingresos totales, pedidos totales, valor de pedido promedio, categoría superior diferentes tipos de gráficos. Ingresos a lo largo del tiempo (gráfico de línea), ingresos por categoría (gráfico de barras), productos principales por filtrado de ingresos (gráfico de barras horizontal). Tabla de datos por fecha y categoría. Muestre nuestros registros de datos en un formato de cuadrícula paginada y de búsqueda.

Configuración de nuestro entorno

A continuación, tenemos una serie de pasos a seguir para configurar nuestro entorno.

1/ Instalar node.js.

Node.js es un entorno de tiempo de ejecución que le permite ejecutar JavaScript fuera del navegador, lo que le permite usar JavaScript para crear aplicaciones rápidas y escalables del lado del servidor.

Por lo tanto, asegurar que Node.js esté instalado en su sistema para permitirle ejecutar un servidor local y administrar paquetes. Puede descargarlo desde el sitio web oficial de Node.js.

2/ Crear una carpeta de proyecto principal y subcarpetas

Abra su terminal de comandos y ejecute los siguientes comandos. Estoy usando Ubuntu en mi caja de Windows para esto, pero puede cambiarlo para adaptarse a su utilidad y sistema de línea de comandos preferidos.

$ mkdir my-dashboard $ cd my-dashboard $ mkdir cliente % mkdir servidor

3/ Inicializar un proyecto de nodo

$ npm init -y

Este comando crea automáticamente un archivo Packle.json predeterminado en el directorio de su proyecto sin requerir la entrada del usuario.

La bandera -y responde “sí” a todas las indicaciones, utilizando los valores predeterminados para campos como:

Nombre Versión Descripción Scripts principales Licencia de autor

Así es como se veía mi archivo de paquete.

{“name”: “my-dashboard”, “versión”: “1.0.0”, “principal”: “index.js”, “scripts”: {“test”: “echo \” error: sin prueba especificada \ “&& exit 1”}, “Palabras clave”: []”Autor”: “”, “Licencia”: “ISC”, “Descripción”: “”, “Dependencias”: {“Express”: “^4.21.2”, “Sqlite3”: “^5.1.7”}}

4/ Instalar Express y SQLite

SQLite es un motor de base de datos relacional ligero y basado en archivos que almacena todos sus datos en un solo archivo portátil, eliminando la necesidad de un servidor separado.

Express es un marco de aplicaciones web mínimas y flexibles para Node.js que simplifica la construcción de API y servidores web a través de enrutamiento y middleware.

Podemos instalar ambos usando el comando a continuación.

$ npm instalación express sqlite3

Ahora, podemos comenzar a desarrollar nuestro código. Para este proyecto, necesitaremos cuatro archivos de código: un archivo index.html, un archivo server.js, un archivo client.js y un archivo script.js.

Pasemos por cada uno de ellos paso a paso.

1) cliente/index.html

Panel de rendimiento de ventas