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
Смотрите видео Gráficos no Next.js 14 com shadcn/ui charts | Consumindo uma API de gastos dos senadores онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Codante - Evolua no front-end 24 Сентябрь 2024, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 571 раз и оно понравилось 59 людям.