110 lines
3.6 KiB
TypeScript
110 lines
3.6 KiB
TypeScript
'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';
|
|
import { Skeleton } from '@/components/ui/skeleton';
|
|
|
|
const chartConfig = {
|
|
views: {
|
|
label: 'Views',
|
|
color: 'hsl(var(--foreground))',
|
|
},
|
|
} satisfies ChartConfig;
|
|
|
|
export default function Engagement({
|
|
chartData,
|
|
}: {
|
|
chartData:
|
|
| {
|
|
week: string;
|
|
views: number;
|
|
}[]
|
|
| null;
|
|
}) {
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Post engagement</CardTitle>
|
|
<CardDescription>
|
|
Showing engagements for the last week
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{chartData ? (
|
|
<ChartContainer
|
|
config={chartConfig}
|
|
className="w-full xl:w-[680px] lg:h-[270px] 2xl:h-[350px] 2xl:w-[880px]"
|
|
>
|
|
<AreaChart
|
|
accessibilityLayer
|
|
data={chartData}
|
|
margin={{
|
|
left: 12,
|
|
right: 12,
|
|
}}
|
|
>
|
|
<CartesianGrid vertical={false} />
|
|
<XAxis
|
|
dataKey="week"
|
|
tickLine={false}
|
|
axisLine={false}
|
|
tickMargin={8}
|
|
tickFormatter={(value) => value.slice(0, 3)}
|
|
/>
|
|
<ChartTooltip
|
|
cursor={false}
|
|
content={
|
|
<ChartTooltipContent indicator="line" />
|
|
}
|
|
/>
|
|
<defs>
|
|
<linearGradient
|
|
id="fillViews"
|
|
x1="0"
|
|
y1="0"
|
|
x2="0"
|
|
y2="1"
|
|
>
|
|
<stop
|
|
offset="5%"
|
|
stopColor="var(--color-views)"
|
|
stopOpacity={0.8}
|
|
/>
|
|
<stop
|
|
offset="95%"
|
|
stopColor="var(--color-views)"
|
|
stopOpacity={0.1}
|
|
/>
|
|
</linearGradient>
|
|
</defs>
|
|
|
|
<Area
|
|
dataKey="views"
|
|
type="natural"
|
|
fill="url(#fillViews)"
|
|
fillOpacity={0.4}
|
|
stroke="var(--color-views)"
|
|
/>
|
|
</AreaChart>
|
|
</ChartContainer>
|
|
) : (
|
|
<Skeleton className="w-full xl:w-[680px] lg:h-[270px] 2xl:h-[350px] 2xl:w-[880px]" />
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|