Working with the Dashboard Page
Let's focus on the dashboard page now and see the theory in action to understand the concept better.
Back to the Project
Copy and paste the code below into app/dashboard/page.tsx
. Take a moment to explore the UI, but note that no data is present, so the live page will not show any changes.
Retrieving Data for IncomeChart
To fetch income data, import the fetchIncome
function from the '@/app/lib/data'
module and call it inside the Page
component. Then, uncomment the IncomeChart
component and check the live page.
Next, follow these steps to view the income chart:
- Visit the
app/ui/dashboard/income-chart.tsx
file. - Uncomment the ready UI code.
This results in the following income chart on the live page.
In Practice
Grazie per i tuoi commenti!
Chieda ad AI
Chieda ad AI
Chieda pure quello che desidera o provi una delle domande suggerite per iniziare la nostra conversazione
Awesome!
Completion rate improved to 2.08
Working with the Dashboard Page
Scorri per mostrare il menu
Let's focus on the dashboard page now and see the theory in action to understand the concept better.
Back to the Project
Copy and paste the code below into app/dashboard/page.tsx
. Take a moment to explore the UI, but note that no data is present, so the live page will not show any changes.
Retrieving Data for IncomeChart
To fetch income data, import the fetchIncome
function from the '@/app/lib/data'
module and call it inside the Page
component. Then, uncomment the IncomeChart
component and check the live page.
Next, follow these steps to view the income chart:
- Visit the
app/ui/dashboard/income-chart.tsx
file. - Uncomment the ready UI code.
This results in the following income chart on the live page.
In Practice
Grazie per i tuoi commenti!