Trabalhando com a Página do Painel
Vamos focar agora na página do dashboard e ver a teoria em prática para compreender melhor o conceito.
De volta ao projeto
Copie e cole o código abaixo em app/dashboard/page.tsx. Reserve um momento para explorar a interface, mas observe que nenhum dado está presente, portanto a página ao vivo não exibirá alterações.
Recuperação de Dados para IncomeChart
Para buscar os dados de receita, importe a função fetchIncome do módulo '@/app/lib/data' e chame-a dentro do componente Page. Em seguida, descomente o componente IncomeChart e verifique a página ao vivo.
Em seguida, siga estas etapas para visualizar o gráfico de receita:
- Acesse o arquivo
app/ui/dashboard/income-chart.tsx. - Descomente o código de interface pronto.
Isso resulta no seguinte gráfico de receita na página ao vivo.
Na Prática
Obrigado pelo seu feedback!
Pergunte à IA
Pergunte à IA
Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo
Awesome!
Completion rate improved to 2.08Trabalhando com a Página do Painel
Deslize para mostrar o menu
Vamos focar agora na página do dashboard e ver a teoria em prática para compreender melhor o conceito.
De volta ao projeto
Copie e cole o código abaixo em app/dashboard/page.tsx. Reserve um momento para explorar a interface, mas observe que nenhum dado está presente, portanto a página ao vivo não exibirá alterações.
Recuperação de Dados para IncomeChart
Para buscar os dados de receita, importe a função fetchIncome do módulo '@/app/lib/data' e chame-a dentro do componente Page. Em seguida, descomente o componente IncomeChart e verifique a página ao vivo.
Em seguida, siga estas etapas para visualizar o gráfico de receita:
- Acesse o arquivo
app/ui/dashboard/income-chart.tsx. - Descomente o código de interface pronto.
Isso resulta no seguinte gráfico de receita na página ao vivo.
Na Prática
Obrigado pelo seu feedback!
