React

Dashboard con React y datos de PostgreSQL

Jéssica Silva Soares

• 15 min read
Dashboard con React y datos de PostgreSQL

¡Bienvenido(a) a este tutorial avanzado sobre cómo crear un panel interactivo con React y datos de la base de datos PostgreSQL!

En esta guía detallada, aprenderá cómo desarrollar una potente aplicación que mostrará información relevante en un gráfico de áreas utilizando datos almacenados en una base de datos PostgreSQL.

Con esta solución, podrá visualizar y analizar fácilmente datos complejos en un formato claro e intuitivo.

Un gráfico es una representación visual de datos que facilita la comprensión de patrones, tendencias y conocimientos a partir de la información presentada. Los gráficos de áreas, en particular, son ideales para mostrar datos a lo largo del tiempo o para categorías específicas. Se componen de áreas coloreadas que se superponen, resaltando los cambios en las cantidades a lo largo del eje X (normalmente el tiempo) y el eje Y (la cantidad medida).

Con los gráficos de áreas, puedes visualizar la distribución de los datos, así como la magnitud de las variaciones.

Bibliotecas importantes

Para hacer posible este proyecto, utilizaremos algunas bibliotecas importantes:

React: Una biblioteca JavaScript de código abierto para crear interfaces de usuario interactivas. React se utiliza ampliamente en el desarrollo front-end debido a su flexibilidad y eficiencia en la creación de componentes reutilizables e interactivos.

Node.js: Una plataforma de desarrollo de JavaScript de código abierto que le permite ejecutar código JavaScript en el lado del servidor. En nuestro caso, usaremos Node.js para crear un servidor que proporcionará datos de la base de datos PostgreSQL al frontend de React.

PostgreSQL: Un potente sistema de gestión de bases de datos relacionales de código abierto. PostgreSQL es muy valorado por su confiabilidad, extensibilidad y características avanzadas, lo que lo convierte en una opción popular para aplicaciones que requieren almacenamiento y recuperación de datos eficientes.

ApexCharts: Una biblioteca de JavaScript para crear gráficos interactivos. Usaremos ApexCharts para crear nuestro gráfico de áreas, lo que permitirá que los datos se presenten de una manera visualmente atractiva e interactiva.

Con este conjunto de tecnologías, estarás listo/a para darle vida a su panel interactivo y explorar el poder de los gráficos para analizar y comprender datos. ¡Comencemos nuestro viaje para crear un panel potente y funcional que abrirá un nuevo mundo de posibilidades para su análisis de datos! Sigue los pasos cuidadosamente y disfruta de esta emocionante experiencia de aprendizaje.

¡Vamos allá!

Paso a paso

El primer paso es configurar el entorno de desarrollo. Asegúrate de tener Node.js y PostgreSQL instalados en tu computadora. Node.js será responsable de crear un servidor que proporcionará datos de la base de datos, mientras que React se utilizará para desarrollar la interfaz interactiva del panel.

Durante el tutorial, aprenderás cómo configurar la base de datos PostgreSQL, crear tablas e importar datos. A continuación, te enseñaremos cómo crear el servidor Node.js para proporcionar los datos de la base de datos al frontend de React. Con el servidor en ejecución, aprenderás cómo crear componentes de React para mostrar el gráfico de áreas según los datos proporcionados por el servidor. Usaremos bibliotecas populares como React ChartJS 2 para facilitar la creación de gráficos interactivos.

Este tutorial mejorará tus habilidades de desarrollo full-stack, desde configurar tu entorno de servidor hasta crear interfaces de usuario interactivas y manipular datos de bases de datos. La capacidad de crear paneles interactivos con datos en tiempo real es una habilidad valiosa para los profesionales que trabajan en análisis de datos, inteligencia empresarial y toma de decisiones basada en información. ¡Comencemos nuestro viaje para crear un panel potente y funcional que abrirá un nuevo mundo de posibilidades para su análisis de datos! Sigue los pasos cuidadosamente y disfruta de esta emocionante experiencia de aprendizaje. ¡Vamos allá!

El código puede obtenerse a través de mi GitHub.

Paso 1: configuración del entorno y del proyecto

1. Instala Node.js y npm (manejador de paquetes de Node.js) en tu sistema si aún no los tienes. Podrás encontrar Node.js en su sitio oficial.

2. Crea una nueva carpeta para el proyecto del panel y accede a ella a través de la terminal:

mkdir dashboard-react-postgres

cd dashboard-react-postgres

3. Inicia el proyecto Node.js ejecutando el comando abajo. Responde las preguntas de npm para configurar el proyecto:

npm init


4. Ahora instala las dependencias que vamos a utilizar para desarrollar el servidor y el frontend del dashboard:

npm install express pg cors react react-dom react-scripts axios apexcharts apexcharts-react




En este proyecto, utilizaremos Express como framework para el servidor, el pacote `pg` para la conexión con PostgreSQL, `cors` para permitir el acceso al servidor a partir del frontend, React para crear la interfaz del dashboard, `axios` para hazer requisiciones a la API del servidor y `apexcharts` y `apexcharts-react` para generar el gráfico del área.

Paso 2: configuración del servidor con Express y PostgreSQL

Configuración de la base de datos

Antes de continuar, asegúrate de tener PostgreSQL en tu sistema. Si aún no lo tienes, puedes descargarlo e instalarlo desde el sitio web oficial de PostgreSQL (https://www.postgresql.org/).

Después de instalar PostgreSQL, crea una base de datos y una tabla para almacenar datos de archivos PDF. En este ejemplo, crearemos una tabla llamada facturas con los siguientes campos:

-- Conecte-se ao PostgreSQL e crie um banco de dados

CREATE DATABASE nome_do_banco;

\c nome_do_banco


-- Crie a tabela "faturas" para armazenar os dados dos PDFs

CREATE TABLE faturas (

    id SERIAL PRIMARY KEY,

    numero_cliente INTEGER,

    mes_referencia INTEGER,

    data_vencimento DATE,

    valor_total NUMERIC,

    contrib_ilum_publica NUMERIC,

    unidade_eletr VARCHAR(100),

    quantidade_eletr NUMERIC,

    preco_unitario_eletr NUMERIC,

    valor_eletr NUMERIC,

    nome_cliente VARCHAR(100),

    kw_mes NUMERIC

);


1. Crea un archivo llamado `server.js` en la raíz del proyecto y añade el siguiente código para configurar el servidor:


const express = require('express');

const { Pool } = require('pg');

const cors = require('cors');


const app = express();


// Configuração da conexão com o banco de dados PostgreSQL

const pool = new Pool({

  connectionString: 'postgres://seu_usuario:senha@localhost:5432/nome_do_banco', // Substitua pelos seus dados de conexão

});


// Middleware para habilitar o CORS

app.use(cors());


// Função para transformar os dados específicos em cada linha da consulta SQL

function transformData(rows) {

  return rows.map((row) => {

    return {

      ...row,

      data_vencimento: new Date(row.data_vencimento), // Converte data_vencimento para um objeto Date

      unidade_eletr: String(row.unidade_eletr), // Converte unidade_eletr para uma string

      unidade_injetada: String(row.unidade_injetada), // Converte unidade_injetada para uma string

      unidade_icms: String(row.unidade_icms), // Converte unidade_icms para uma string

      nome_cliente: String(row.nome_cliente), // Converte nome_cliente para uma string

    };

  });

}


// Rota para obter os dados do gráfico

app.get('/chartData', async (req, res) => {

  try {

    // Estabelece uma conexão com o banco de dados

    const client = await pool.connect();


    // Executa a consulta SQL para buscar os dados da tabela 'faturas' e ordena pelo campo 'mes_referencia' em ordem crescente

    const result = await client.query('SELECT * FROM faturas ORDER BY mes_referencia ASC');


    // Libera a conexão com o banco de dados

    client.release();


    // Transforma os dados específicos em cada linha da consulta

    const transformedData = transformData(result.rows);


    // Extrai os dados para cada coluna e aplica parseFloat nos dados numéricos (exceto colunas específicas)

    const columnsData = Object.keys(transformedData[0]).reduce((acc, key) => {

      const data = transformedData.map((row) => {

        // Utiliza parseFloat para dados numéricos (exceto colunas específicas)

        if (

          key !== 'data_vencimento' &&

          key !== 'unidade_eletr' &&

          key !== 'unidade_injetada' &&

          key !== 'unidade_icms' &&

          key !== 'nome_cliente'

        ) {

          return parseFloat(row[key]);

        }

        return row[key];

      });


      acc[key] = data;

      return acc;

    }, {});


    // Envia os dados transformados como resposta JSON

    res.json({ columnsData });

  } catch (error) {

    console.error('Erro ao obter dados do banco de dados:', error);

    res.status(500).json({ error: 'Erro ao obter dados do banco de dados' });

  }

});


// Define a porta em que o servidor vai ouvir as requisições (padrão: 3005)

const PORT = process.env.PORT || 3005;

app.listen(PORT, () => {

  console.log(`Servidor iniciado na porta ${PORT}`);

});





En este código, configuramos el servidor Express, creamos una conexión con la base de datos PostgreSQL por medio del paquete `pg`, habilitamos CORS para permitir que el frontend accese al servidor y definimos una ruta `'/chartData'` para obtener los datos del gráfico.

Asegúrate de reemplazar la cadena de conexión con tu nombre de usuario, contraseña y nombre de la base de datos PostgreSQL. Esta información es necesaria para que el servidor se conecte correctamente a la base de datos.

Paso 3: creación del componente de gráfico

1. En la carpeta `src`, crea una subcarpeta llamada `components`.

2. Dentro de `components`, genera un archivo llamado `Chart.js` y agrega el siguiente código para crear el componente de gráfico:

import React, { useEffect, useState } from 'react';

import { fetchChartData } from '../services/apiService';

import ReactApexChart from 'react-apexcharts';

import './Chart.css';


const Chart = () => {

  const [chartData, setChartData] = useState(null);

  const [selectedDataKey, setSelectedDataKey] = useState('valor_total'); // Estado para controlar o valor selecionado do filtro


  useEffect(() => {

    const fetchData = async () => {

      try {

        const data = await fetchChartData();

        setChartData(data);

      } catch (error) {

        console.error('Error fetching chart data:', error);

      }

    };


    fetchData();

  }, []);


  // Função para ordenar os meses de referência e substituir por seus nomes

  const sortMonths = (data) => {

    return data.sort((a, b) => a - b);

  };


  const monthNames = {

    1: 'Janeiro',

    2: 'Fevereiro',

    3: 'Março',

    4: 'Abril',

    5: 'Maio',

    6: 'Junho',

    // Adicione os outros meses aqui, se necessário.

  };


  // Função para atualizar o valor selecionado do filtro

  const handleDataFilter = (dataKey) => {

    setSelectedDataKey(dataKey);

  };


  return (

    <div className="Chart">

      {chartData ? (

        <>

          <div className="button-container">

            {/* Botões para selecionar o filtro */}

            <button

              onClick={() => handleDataFilter('valor_total')}

              className={selectedDataKey === 'valor_total' ? 'active' : ''}

            >

              Valor Total

            </button>

            <button

              onClick={() => handleDataFilter('quantidade_eletr')}

              className={selectedDataKey === 'quantidade_eletr' ? 'active' : ''}

            >

              Quantidade Elétrica

            </button>

            <button

              onClick={() => handleDataFilter('contrib_ilum_publica')}

              className={selectedDataKey === 'contrib_ilum_publica' ? 'active' : ''}

            >

              Contribuição Iluminação Pública

            </button>

            <button

              onClick={() => handleDataFilter('kw_mes')}

              className={selectedDataKey === 'kw_mes' ? 'active' : ''}

            >

              KW Total

            </button>

          </div>

          <ReactApexChart

            options={{

              chart: {

                type: 'area',

              },

              xaxis: {

                categories: sortMonths(chartData.mes_referencia).map((month) => monthNames[month]),

              },

            }}

            series={[

              {

                name: selectedDataKey, // Nome da série baseado no valor selecionado do filtro

                data: chartData[selectedDataKey], // Dados da série baseado no valor selecionado do filtro

              },

            ]}

            type="area"

            height={300}

            width={600}

          />

        </>

      ) : (

        <p>Loading chart data...</p>

      )}

    </div>

  );

};


export default Chart;






Aquí utilizamos el React Hook `useState` para controlar el estado del gráfico y del filtro seleccionado. En el método `useEffect`, buscamos los datos del gráfico a partir de la API ya creada.

El componente exhibe un gráfico de área generado por el paquete `apexcharts-react`, además de botones de filtro para alternar la información exhibida en el gráfico.

Paso 4: creación del componente principal del dashboard

1. Todavía en `components`, crea un archivo llamado `MainDash.js` y añade:

import React from 'react';

import Chart from './Chart';


const MainDash = () => {

  return (

    <div>

      <h2>Dashboard Principal</h2>

      <Chart />

    </div>

  );

};


export default MainDash;




En este componente, importamos y mostramos el componente `Chart` ya creado. Este será el componente principal que se mostrará en el dashboard.

Paso 6: configuración de las rutas del dashboard

1. Regresa al archivo `App.js` en la raíz del proyecto y sustituye el contenido por lo siguiente:

import React from 'react';

import MainDash from './components/MainDash';

import HistoryInvoice from 

import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';


function App() {

  return (

    <Router>

      <div className="App">

             <Routes>

            <Route path="/dashboard" element={<MainDash />} />

           />

          </Routes>

        </div>

      </div>

    </Router>

  );

}


export default App;





En este código, utilizamos el componente `BrowserRouter` del React Router para envolver toda la aplicación y definir las rutas. El componente `Sidebar` será responsable de mostrar la barra lateral de navegación en el dashboard.

El componente `Routes` contiene las rutas del dashboard, donde especificamos el camino y el componente correspondiente a ser renderizado. En el ejemplo arriba, estamos renderizando el componente `MainDash` cuando la ruta es `/dashboard` y el componente `HistoryInvoice` cuando la ruta es `/history-invoice`.

Paso 7: estilización del dashboard

1. En la raíz del proyecto, crea una carpeta llamada `styles`.

2. Dentro de la carpeta `styles`, crea un archivo llamado `App.css` y añade el siguiente código para estilizar el componente `Chart`:

/* Estilização do componente Chart */

.Chart {

  display: flex;

  flex-direction: column;

  align-items: center;

  margin-top: 20px;

}


/* Estilização dos botões de filtro */

.button-container {

  display: flex;

  justify-content: space-between;

  max-width: 600px;

  margin-bottom: 10px;

}


button {

  padding: 8px 16px;

  background-color: #007bff;

  color: #fff;

  border: none;

  border-radius: 4px;

  cursor: pointer;

}


button.active {

  background-color: #0056b3;

}







Paso 8: configuración de la API del servidor para el Frontend

1. En la raíz del proyecto, crea una carpeta llamada `services`.

2. Dentro de la carpeta `services`, crea un archivo llamado `apiService.js` y agrega esto:

import axios from 'axios';

//Olá recrutador(a), bem vindo ao meu código <3 <3

const apiService = axios.create({

  baseURL: 'http://localhost:3005', // URL base da API para onde serão feitas as requisições

  headers: {

    // Cabeçalhos adicionais podem ser definidos aqui, caso necessário

  },

});


// Função para buscar os dados do gráfico da API

export const fetchChartData = async () => {

  try {

    const response = await apiService.get('/chartData'); // Faz uma requisição GET para a rota '/chartData' da API

    return response.data.columnsData; // Retorna os dados da resposta da API (colunas do gráfico)

  } catch (error) {

    // Em caso de erro, lança uma exceção com uma mensagem de erro

    throw new Error('Erro ao obter os dados do gráfico:', error);

  }

};


export default apiService; // Exporta o serviço de API como padrão




Conclusión

¡Felicidades! Has completado con éxito la creación de un panel interactivo con React y datos de la base de datos PostgreSQL. A lo largo de este tutorial detallado, aprendiste a configurar el entorno de desarrollo, crear un servidor Node.js para servir los datos de la base de datos y desarrollar la interfaz del panel con componentes de React.

La visualización de datos es una parte esencial del proceso de análisis y toma de decisiones en muchas áreas como los negocios, la ciencia de datos, el marketing y muchos otros. Los paneles interactivos permiten a los usuarios explorar datos de forma dinámica, lo que hace que la interpretación de los datos sea más rápida y eficiente. Combinar el poder de React y PostgreSQL para crear un panel es una habilidad valiosa que te permitirá desarrollar aplicaciones ricas en funciones para mostrar y analizar datos de manera efectiva.

A lo largo del tutorial, configuraste la base de datos PostgreSQL, creaste tablas e importaste datos para usar en el panel. El servidor Node.js se creó para proporcionar los datos de la base de datos a la interfaz de React y usted desarrolló componentes de React para mostrar el gráfico de área interactivo usando las bibliotecas apexcharts y apexcharts-react.

Ahora tienes habilidades de desarrollo full-stack, mejorando tus conocimientos en JavaScript, React, Node.js y PostgreSQL. La capacidad de crear paneles interactivos con datos en tiempo real es una habilidad valiosa para los profesionales que trabajan en análisis de datos, inteligencia empresarial y toma de decisiones basada en información.

Recuerde que el aprendizaje continuo es fundamental en el desarrollo de software. A medida que avanza en su viaje, puede explorar otras bibliotecas y herramientas para crear gráficos más complejos, agregar interactividad adicional e integrarse con otras fuentes de datos. A partir de este momento, puede personalizar el panel de acuerdo con las necesidades de su proyecto o aplicación específica.

Espero que este tutorial haya sido útil y que esté entusiasmado de continuar su viaje de aprendizaje y desarrollo. No dude en explorar otros tutoriales y recursos para ampliar aún más sus conocimientos.

Gracias por seguir este tutorial y te deseamos mucho éxito en tus futuros proyectos y en tu carrera como desarrollador(a) full-stack.

💡
Las opiniones y comentarios emitidos en este artículo son propiedad única de su autor y no necesariamente representan el punto de vista de Listopro.

Listopro Community da la bienvenida a todas las razas, etnias, nacionalidades, credos, géneros, orientaciones, puntos de vista e ideologías, siempre y cuando promuevan la diversidad, la equidad, la inclusión y el crecimiento profesional de los profesionales en tecnología.