michi.vonah/nextjs
1
0
Fork 0
mirror of https://github.com/michivonah/nextjs.git synced 2025-12-22 22:16:28 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

setup db connection + implement data fetching on dashboard + add skeleton + docs

Browse source
This commit is contained in:
Michi 2025-04-19 17:56:12 +02:00
parent aea677e6f7
commit 00c39d3416
11 changed files with 259 additions and 67 deletions
Download patch file Download diff file Expand all files Collapse all files

25
dashboard-app-course/app/ui/dashboard/revenue-chart.tsx
View file

@ -2,6 +2,7 @@ import { generateYAxis } from '@/app/lib/utils';
import { CalendarIcon } from '@heroicons/react/24/outline';
import { lusitana } from '@/app/ui/fonts';
import { Revenue } from '@/app/lib/definitions';
import { fetchRevenue } from '@/app/lib/data';
// This component is representational only.
// For data visualization UI, check out:
@ -9,28 +10,22 @@ import { Revenue } from '@/app/lib/definitions';
// https://www.chartjs.org/
// https://airbnb.io/visx/
export default async function RevenueChart({
revenue,
}: {
revenue: Revenue[];
}) {
export default async function RevenueChart() {
const revenue = await fetchRevenue();
const chartHeight = 350;
// NOTE: Uncomment this code in Chapter 7
const { yAxisLabels, topLabel } = generateYAxis(revenue);
// const { yAxisLabels, topLabel } = generateYAxis(revenue);
// if (!revenue || revenue.length === 0) {
// return <p className="mt-4 text-gray-400">No data available.</p>;
// }
if (!revenue || revenue.length === 0) {
return <p className="mt-4 text-gray-400">No data available.</p>;
}
return (
<div className="w-full md:col-span-4">
<h2 className={`${lusitana.className} mb-4 text-xl md:text-2xl`}>
Recent Revenue
</h2>
{/* NOTE: Uncomment this code in Chapter 7 */}
{/* <div className="rounded-xl bg-gray-50 p-4">
<div className="rounded-xl bg-gray-50 p-4">
<div className="sm:grid-cols-13 mt-0 grid grid-cols-12 items-end gap-2 rounded-md bg-white p-4 md:gap-4">
<div
className="mb-6 hidden flex-col justify-between text-sm text-gray-400 sm:flex"
@ -59,7 +54,7 @@ export default async function RevenueChart({
<CalendarIcon className="h-5 w-5 text-gray-500" />
<h3 className="ml-2 text-sm text-gray-500 ">Last 12 months</h3>
</div>
</div> */}
</div>
</div>
);
}