File size: 2,696 Bytes
32e1a9b |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 |
"use client"
import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card"
import {
ChartConfig,
ChartContainer,
ChartTooltip,
ChartTooltipContent,
} from "@/components/ui/chart"
interface SimpleAreaProps {
title: string
description: string
data: Array<{ date: Date; count: number }>
}
export function SimpleArea({ title, description, data }: SimpleAreaProps) {
const chartConfig = {
count: {
label: "Total",
color: "hsl(var(--chart-1))",
},
} satisfies ChartConfig
const formattedData = data.map(item => ({
label: item.date.toISOString().split('T')[0],
count: item.count
}))
const total = data.length > 0 ? data[data.length - 1].count : 0
return (
<Card className="bg-[var(--card-background)]">
<CardHeader className="flex flex-row items-center justify-between">
<div>
<CardTitle className="text-[var(--card-text)]">{title}</CardTitle>
<CardDescription className="text-[var(--card-text)]">
{description}
</CardDescription>
</div>
<div className="text-right">
<span className="text-xs text-white">Total</span>
<p className="text-2xl font-bold text-white">{total.toLocaleString()}</p>
</div>
</CardHeader>
<CardContent>
{data.length > 0 ? (
<ChartContainer config={chartConfig}>
<AreaChart
accessibilityLayer
data={formattedData}
margin={{
left: 12,
right: 12,
}}
>
<CartesianGrid vertical={false} />
<XAxis
dataKey="label"
tickLine={false}
axisLine={false}
tickMargin={8}
tickFormatter={(value) => {
const date = new Date(value);
return `${date.getMonth() + 1}/${date.getDate()}`;
}}
/>
<ChartTooltip
cursor={false}
content={<ChartTooltipContent indicator="line" />}
/>
<Area
dataKey="count"
type="natural"
fill="hsl(var(--chart-1))"
fillOpacity={0.4}
stroke="hsl(var(--chart-1))"
/>
</AreaChart>
</ChartContainer>
) : (
<div className="flex items-center justify-center h-[300px] text-[var(--card-text)]">
Loading...
</div>
)}
</CardContent>
</Card>
)
}
|