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
Bedankt voor je feedback!
Vraag AI
Vraag AI
Vraag wat u wilt of probeer een van de voorgestelde vragen om onze chat te starten.
Awesome!
Completion rate improved to 2.08
Working with the Dashboard Page
Veeg om het menu te tonen
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
Bedankt voor je feedback!