React

Criando um Dashboard com React e Dados do PostgreSQL

Jéssica Silva Soares

Jun 11, 2024 • 15 min read

Bem-vindo a este tutorial avançado sobre como criar um dashboard interativo com React e dados do banco de dados PostgreSQL!

Neste guia detalhado, você aprenderá a desenvolver um aplicativo poderoso que exibirá informações relevantes em um gráfico de área, utilizando dados armazenados em um banco de dados PostgreSQL.

Com esta solução, você poderá visualizar e analisar facilmente dados complexos em um formato claro e intuitivo.

Um gráfico é uma representação visual de dados, tornando mais fácil entender padrões, tendências e insights a partir das informações apresentadas. Gráficos de área, em particular, são ideais para exibir dados ao longo do tempo ou de categorias específicas. Eles são compostos por áreas coloridas que se sobrepõem, destacando as mudanças nas quantidades ao longo do eixo X (normalmente, o tempo) e no eixo Y (a quantidade medida).

Com gráficos de área, é possível visualizar a distribuição dos dados, bem como a magnitude das variações.

Bibliotecas importantes

Para tornar este projeto possível, utilizaremos algumas bibliotecas importantes:

React: Uma biblioteca JavaScript de código aberto para construir interfaces de usuário interativas. O React é amplamente utilizado no desenvolvimento front-end devido à sua flexibilidade e eficiência em criar componentes reutilizáveis e interativos.

Node.js: Uma plataforma de desenvolvimento JavaScript de código aberto que permite a execução de código JavaScript do lado do servidor. No nosso caso, utilizaremos o Node.js para criar um servidor que fornecerá os dados do banco de dados PostgreSQL para o frontend do React.

PostgreSQL: Um sistema de gerenciamento de banco de dados relacional de código aberto e poderoso. O PostgreSQL é altamente valorizado por sua confiabilidade, extensibilidade e recursos avançados, sendo uma escolha popular para aplicações que exigem armazenamento e recuperação eficiente de dados.

ApexCharts: Uma biblioteca JavaScript para criação de gráficos interativos. Utilizaremos o ApexCharts para criar nosso gráfico de área, permitindo que os dados sejam apresentados de maneira visualmente atraente e interativa.

Com esse conjunto de tecnologias, você estará pronto para dar vida ao seu dashboard interativo e explorar o poder dos gráficos para a análise e compreensão de dados. Vamos começar nossa jornada para criar um dashboard poderoso e funcional que abrirá um novo mundo de possibilidades para suas análises de dados! Siga os passos cuidadosamente e aproveite esta emocionante experiência de aprendizado. Vamos lá!

Passo a passo

O primeiro passo é configurar o ambiente de desenvolvimento. Certifique-se de ter o Node.js e o PostgreSQL instalados em seu computador. O Node.js será responsável por criar um servidor que fornecerá os dados do banco de dados, enquanto o React será usado para desenvolver a interface interativa do dashboard.

Durante o tutorial, você aprenderá como configurar o banco de dados PostgreSQL, criar tabelas e importar dados. Em seguida, ensinaremos a criar o servidor Node.js para fornecer os dados do banco de dados para o frontend do React. Com o servidor funcionando, você aprenderá a criar componentes React para exibir o gráfico de área com base nos dados fornecidos pelo servidor. Usaremos bibliotecas populares, como o React ChartJS 2, para facilitar a criação do gráfico interativo.

Este tutorial permitirá que você aprimore suas habilidades de desenvolvimento full-stack, desde a configuração do ambiente de servidor até a criação de interfaces de usuário interativas e a manipulação de dados do banco de dados. A capacidade de criar dashboards interativos com dados em tempo real é uma habilidade valiosa para profissionais que trabalham com análise de dados, business intelligence e tomada de decisões baseada em informações. Vamos começar nossa jornada para criar um dashboard poderoso e funcional que abrirá um novo mundo de possibilidades para suas análises de dados! Siga os passos cuidadosamente e aproveite esta emocionante experiência de aprendizado. Vamos lá!

O código pode ser obtido através do link no GitHub.

Passo 1: Configuração do Ambiente e Projeto

1. Instale o Node.js e o npm (gerenciador de pacotes do Node.js) em seu sistema, caso ainda não tenha instalado. Você pode encontrar o Node.js no site oficial.

2. Crie uma nova pasta para o projeto do dashboard e acesse-a por meio do terminal:

mkdir dashboard-react-postgres

cd dashboard-react-postgres

3. Inicialize o projeto Node.js executando o comando abaixo. Responda às perguntas do npm para configurar o projeto:

npm init

4. Agora, instale as dependências que vamos utilizar para desenvolver o servidor e o frontend do dashboard:

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

Neste projeto, utilizaremos o Express como framework para o servidor, o pacote `pg` para conexão com o PostgreSQL, o `cors` para permitir acesso ao servidor a partir do frontend, o React para criar a interface do dashboard, o `axios` para fazer requisições à API do servidor, e o `apexcharts` e `apexcharts-react` para gerar o gráfico de área.

Passo 2: Configuração do Servidor com Express e PostgreSQL

Configuração do Banco de Dados

Antes de prosseguir, certifique-se de ter o PostgreSQL instalado em seu sistema. Caso ainda não tenha, você pode baixá-lo e instalá-lo a partir do site oficial do PostgreSQL (https://www.postgresql.org/).

Após a instalação do PostgreSQL, crie um banco de dados e uma tabela para armazenar os dados dos arquivos PDF. Neste exemplo, vamos criar uma tabela chamada faturas com os seguintes 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. Crie um arquivo chamado `server.js` na raiz do projeto e adicione o seguinte código para configurar o 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}`);

});

Neste código, configuramos o servidor Express, criamos uma conexão com o banco de dados PostgreSQL por meio do pacote `pg`, habilitamos o CORS para permitir que o frontend acesse o servidor, e definimos uma rota `'/chartData'` para obter os dados do gráfico.

Certifique-se de substituir a string de conexão pelo seu usuário, senha e nome do banco de dados PostgreSQL. Essas informações são necessárias para que o servidor se conecte ao banco de dados corretamente.

Passo 3: Criação do Componente de Gráfico

1. Na pasta `src`, crie uma subpasta chamada `components`.

2. Dentro da pasta `components`, crie um arquivo chamado `Chart.js` e adicione o seguinte código para criar o 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 (

{chartData ? (

{/* 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;

Neste componente, utilizamos o React Hook `useState` para controlar o estado do gráfico e do filtro selecionado. No método `useEffect`, buscamos os dados do gráfico a partir da API criada anteriormente.

O componente exibe um gráfico de área gerado pelo pacote `apexcharts-react`, além de botões de filtro para alternar as informações exibidas no gráfico.

Passo 4: Criação do Componente Principal do Dashboard

1. Ainda na pasta `components`, crie um arquivo chamado `MainDash.js` e adicione o seguinte código:

import React from 'react';

import Chart from './Chart';

const MainDash = () => {

return (

<div>

<h2>Dashboard Principal</h2>

</div>

);

};

export default MainDash;

Neste componente, importamos e exibimos o componente `Chart` que criamos anteriormente. Esse será o componente principal exibido no dashboard.

Passo 6: Configuração das Rotas do Dashboard

1. Volte para o arquivo `App.js` na raiz do projeto e substitua o conteúdo pelo seguinte código:

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 (

</Routes>

</div>

</Router>

);

}

export default App;

Neste código, utilizamos o componente `BrowserRouter` do React Router para envolver todo o aplicativo e definir as rotas. O componente `Sidebar` será responsável por exibir a barra lateral de navegação no dashboard.

O componente `Routes` contém as rotas do dashboard, onde especificamos o caminho e o componente correspondente a ser renderizado. No exemplo acima, estamos renderizando o componente `MainDash` quando o caminho é `/dashboard` e o componente `HistoryInvoice` quando o caminho é `/history-invoice`.

Passo 7: Estilização do Dashboard

1. Na raiz do projeto, crie uma pasta chamada `styles`.

2. Dentro da pasta `styles`, crie um arquivo chamado `App.css` e adicione o seguinte código para estilizar o 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;

}

Passo 8: Configuração da API do Servidor para o Frontend

1. Na raiz do projeto, crie uma pasta chamada `services`.

2. Dentro da pasta `services`, crie um arquivo chamado `apiService.js` e adicione o seguinte código:

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

Conclusão

Parabéns! Você concluiu com sucesso a criação de um dashboard interativo com React e dados do banco de dados PostgreSQL. Ao longo deste tutorial detalhado, você aprendeu a configurar o ambiente de desenvolvimento, criar um servidor Node.js para fornecer os dados do banco de dados e desenvolver o frontend do dashboard com componentes React.

A visualização de dados é uma parte essencial do processo de análise e tomada de decisões em muitas áreas, como negócios, ciência de dados, marketing e muitas outras. Dashboards interativos permitem que os usuários explorem dados de forma dinâmica, tornando a interpretação dos dados mais rápida e eficiente. Combinar o poder do React e do PostgreSQL para criar um dashboard é uma habilidade valiosa que permitirá que você desenvolva aplicações ricas em recursos para exibir e analisar dados de maneira eficaz.

Ao longo do tutorial, você configurou o banco de dados PostgreSQL, criou tabelas e importou dados para utilização no dashboard. O servidor Node.js foi criado para fornecer os dados do banco de dados para o frontend do React, e você desenvolveu componentes React para exibir o gráfico de área interativo, utilizando a biblioteca apexcharts e apexcharts-react.

Você agora possui habilidades em desenvolvimento full-stack, aprimorando seus conhecimentos em JavaScript, React, Node.js e PostgreSQL. A capacidade de criar dashboards interativos com dados em tempo real é uma habilidade valiosa para profissionais que trabalham com análise de dados, business intelligence e tomada de decisões baseada em informações.

Lembre-se que a aprendizagem contínua é essencial no desenvolvimento de software. À medida que avança em sua jornada, você pode explorar outras bibliotecas e ferramentas para criar gráficos mais complexos, incluir interatividade adicional e integrar com outras fontes de dados. A partir deste ponto, você pode personalizar o dashboard de acordo com as necessidades do seu projeto ou aplicativo específico.

Espero que este tutorial tenha sido útil e que você esteja empolgado para continuar sua jornada de aprendizado e desenvolvimento. Sinta-se à vontade para explorar outros tutoriais e recursos para expandir ainda mais seus conhecimentos.

Obrigado por acompanhar este tutorial e desejamos muito sucesso em seus futuros projetos e em sua carreira como desenvolvedor(a) full-stack.

💡

As opiniões e comentários expressos neste artigo são de propriedade exclusiva de seu autor e não representam necessariamente o ponto de vista da Revelo.

A Revelo Content Network acolhe todas as raças, etnias, nacionalidades, credos, gêneros, orientações, pontos de vista e ideologias, desde que promovam diversidade, equidade, inclusão e crescimento na carreira dos profissionais de tecnologia.