Gráficos no Next.js 14 com shadcn/ui charts | Consumindo uma API de gastos dos senadores

🔗 Link do Mini Projeto no Codante: https://codante.io/mini-projetos/graf...

Vamos criar gráficos que analisam os gráficos dos senadores brasileiros usando Next.js 14, recharts e shadcn/ui.

Capítulos
00:00 - Apresentando o projeto
00:00 - Requisitos e Design do Projeto
00:57 - Setup do Projeto Next
07:00 - Estruturando o HTML do projeto
13:52 - Extraindo componentes
20:20 - Estilizando os botões do Header
27:17 - Dica - transforme ícones SVG em componentes React
34:24 - Responsividade do Header
42:56 - Usando o Card do shadcn/ui
44:42 - Preparando os dados da API para o gráfico
49:00 - Instalando o shadcn charts
56:29 - Adicionando labels dos estados (LabelList)
01:05 - Adicionando o eixo horizontal
01:11 - Adicionando tooltip
01:12 - Adicionando a barra de média
01:18 - Gráfico de Gastos por Partido
01:27 - Mudando os gráficos de acordo com a url
01:43 - Criando o seletor de anos
02:02 - Finalização


O que você vai aprender:
Recharts e Shadcn Chasrts
NextAuth v14
Estado na URL / State in URL