Crie um Dashboard Interativo com React e D3.js: Domine a Visualização de Dados na Web

1. Configuração do Projeto

Comece criando um novo projeto React com TypeScript usando o Create React App e instalando as dependências necessárias:

# Crie um novo projeto React com TypeScript
npx create-react-app dashboard --template typescript

# Entre no diretório do projeto
cd dashboard

# Instale as dependências
npm install d3 @tanstack/react-query tailwindcss
                                        

Esses comandos irão criar um novo projeto React com TypeScript, navegar até o diretório do projeto e instalar as bibliotecas D3.js, React Query e TailwindCSS.

2. Criando o Componente do Gráfico

Crie um componente React para renderizar o gráfico usando D3.js. Este componente irá receber os dados e as dimensões do gráfico como props:

import React, { useEffect, useRef } from 'react';
import * as d3 from 'd3';

interface DataPoint {
  date: Date;
  value: number;
}

interface LineChartProps {
  data: DataPoint[];
  width: number;
  height: number;
}

const LineChart: React.FC<LineChartProps> = ({ data, width, height }) => {
  const svgRef = useRef<SVGSVGElement>(null);

  useEffect(() => {
    if (!svgRef.current) return;

    // Limpar SVG
    d3.select(svgRef.current).selectAll('*').remove();

    // Configurar margens
    const margin = { top: 20, right: 20, bottom: 30, left: 40 };
    const innerWidth = width - margin.left - margin.right;
    const innerHeight = height - margin.top - margin.bottom;

    // Criar escalas
    const xScale = d3.scaleTime()
      .domain(d3.extent(data, d => d.date) as [Date, Date])
      .range([0, innerWidth]);

    const yScale = d3.scaleLinear()
      .domain([0, d3.max(data, d => d.value) as number])
      .range([innerHeight, 0]);

    // Criar linha
    const line = d3.line<DataPoint>()
      .x(d => xScale(d.date))
      .y(d => yScale(d.value));

    // Criar SVG
    const svg = d3.select(svgRef.current)
      .attr('width', width)
      .attr('height', height);

    // Adicionar grupo principal
    const g = svg.append('g')
      .attr('transform', `translate(${margin.left},${margin.top})`);

    // Adicionar eixos
    g.append('g')
      .attr('transform', `translate(0,${innerHeight})`)
      .call(d3.axisBottom(xScale));

    g.append('g')
      .call(d3.axisLeft(yScale));

    // Adicionar linha
    g.append('path')
      .datum(data)
      .attr('fill', 'none')
      .attr('stroke', 'steelblue')
      .attr('stroke-width', 1.5)
      .attr('d', line);

    // Adicionar pontos
    g.selectAll('circle')
      .data(data)
      .enter()
      .append('circle')
      .attr('cx', d => xScale(d.date))
      .attr('cy', d => yScale(d.value))
      .attr('r', 4)
      .attr('fill', 'steelblue');

  }, [data, width, height]);

  return <svg ref={svgRef}></svg>;
};

export default LineChart;
                                        

Este componente utiliza o hook `useRef` para criar uma referência ao elemento SVG e o hook `useEffect` para criar o gráfico usando D3.js. As configurações são ajustadas dinamicamente através das props `width`, `height` e `data`.

3. Integrando o React Query para Gerenciar Dados

Utilize o React Query para buscar e gerenciar os dados que serão exibidos no seu dashboard. Este exemplo mostra como buscar dados de uma API e exibi-los em um componente:

import { useQuery } from '@tanstack/react-query';

interface DataPoint {
  date: Date;
  value: number;
}

interface DashboardData {
  chartData: DataPoint[];
  tableData: any[];
}

const fetchData = async (filters: any): Promise<DashboardData> => {
  // Simule uma chamada de API com filtros
  await new Promise(resolve => setTimeout(resolve, 1000));
  const chartData = Array.from({ length: 20 }, (_, i) => ({
    date: new Date(2023, 0, i + 1),
    value: Math.random() * 100
  }));
  const tableData = Array.from({ length: 10 }, (_, i) => ({
    id: i + 1,
    name: `Item ${i + 1}`,
    value: Math.random() * 100
  }));
  return { chartData, tableData };
};

function Dashboard() {
  const { data, isLoading, error } = useQuery({
    queryKey: ['dashboardData'],
    queryFn: () => fetchData({})
  });

  if (isLoading) return <div>Carregando...</div>;
  if (error) return <div>Erro: {error.message}</div>;

  return (
    <div>
      {/* Exiba seus componentes aqui */}
    </div>
  );
}

export default Dashboard;
                                        

Neste exemplo, a função `fetchData` simula uma chamada de API que retorna dados para o gráfico e para a tabela. O hook `useQuery` do React Query gerencia o estado da requisição e o cache dos dados.

4. Estilizando com TailwindCSS

Utilize o TailwindCSS para estilizar seu dashboard de forma rápida e responsiva. Adicione classes utilitárias aos seus componentes para criar um design moderno e atraente:

<div className="bg-white rounded-lg shadow-md p-6">
  <h2 className="text-xl font-bold mb-4">Título do Componente</h2>
  <p className="text-gray-700">Conteúdo do componente...</p>
</div>
                                        

Neste exemplo, a classe `bg-white` define o fundo como branco, `rounded-lg` adiciona bordas arredondadas, `shadow-md` adiciona uma sombra suave e `p-6` adiciona um preenchimento de 6 unidades.