Gráficos com shadcn charts e Next.js

Workshop

19 vídeos • 02:15:25

Seção 01 | Introdução

  1. 1.

    Apresentando o projeto

    00:57
  2. 2.

    Requisitos e Design do Projeto

    06:03
  3. 3.

    Setup do Projeto Next

    06:52

Seção 02 | HTML e CSS do App

  1. 4.

    Estruturando o HTML do projeto

    06:27
  2. 5.

    Extraindo componentes

    06:56
  3. 6.

    Estilizando os botões do Header

    07:07
  4. 7.

    Dica - transforme ícones SVG em componentes React

    08:32
  5. 8.

    Responsividade do Header

    01:46
  6. 9.

    Usando o Card do shadcn/ui

    04:17

Seção 03 | Gráficos com Recharts e shadcn

  1. 10.

    Preparando os dados da API para o gráfico

    07:28
  2. 11.

    Instalando o shadcn charts

    09:26
  3. 12.

    Adicionando labels dos estados (LabelList)

    05:05
  4. 13.

    Adicionando o eixo horizontal

    01:21
  5. 14.

    Adicionando tooltip

    06:02
  6. 15.

    Adicionando a barra de média

    09:19
  7. 16.

    Gráfico de Gastos por Partido

    15:21

Seção 04 | Navegação com estado na URL

  1. 17.

    Mudando os gráficos de acordo com a url

    19:12
  2. 18.

    Criando o seletor de anos

    11:16

Seção 05 | Finalização

  1. 19.

    Finalização

    01:58
Login
Workshops>Gráficos com shadcn charts e Next.js>Criando o seletor de anos

Acesso exclusivo para membros PRO

Esse conteúdo é exclusivo para nossos assinantes.

Libere esse e muito mais conteúdo assinando o Codante PRO.

Criando o seletor de anos

Implementamos um menu dropdown usando ShadCN para selecionar anos de gastos dos senadores. Configuramos um Radio Group para indicar o ano escolhido e tornamos o menu interativo ao vincular a seleção de anos à URL da aplicação. Também incluímos opções de visualização de gastos por UF ou partido, permitindo alterar as exibições dinamicamente.

Comentários

(0)