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
Takk for tilbakemeldingene dine!
Spør AI
Spør AI
Spør om hva du vil, eller prøv ett av de foreslåtte spørsmålene for å starte chatten vår
Awesome!
Completion rate improved to 2.08
Working with the Dashboard Page
Sveip for å vise menyen
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
Takk for tilbakemeldingene dine!