34 lines
1.6 KiB
TypeScript
34 lines
1.6 KiB
TypeScript
import { Area, AreaChart, CartesianGrid, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
|
|
|
|
import type { AnalyticsOverviewDto } from "~/utils/helpers/.server/AnalyticsService";
|
|
import { useLocaleFormatters } from "~/locale/format";
|
|
|
|
import { Card } from "../ui/card";
|
|
|
|
type AnalyticsOverviewChartProps = {
|
|
chartData: NonNullable<AnalyticsOverviewDto["charts"]>["pageViewsAndUniqueVisitors"];
|
|
pageViewsLabel: string;
|
|
uniqueVisitorsLabel: string;
|
|
};
|
|
|
|
export default function AnalyticsOverviewChart({ chartData, pageViewsLabel, uniqueVisitorsLabel }: AnalyticsOverviewChartProps) {
|
|
const formatters = useLocaleFormatters();
|
|
const valueFormatter = (value: number) => formatters.number(value, { maximumFractionDigits: 0 });
|
|
|
|
return (
|
|
<Card className="h-56 p-4">
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<AreaChart data={chartData} margin={{ top: 8, right: 16, left: 0, bottom: 0 }}>
|
|
<CartesianGrid strokeDasharray="3 3" vertical={false} />
|
|
<XAxis dataKey="date" tickLine={false} axisLine={false} fontSize={12} />
|
|
<YAxis tickFormatter={valueFormatter} tickLine={false} axisLine={false} fontSize={12} width={48} />
|
|
<Tooltip formatter={(value) => valueFormatter(Number(value))} />
|
|
<Legend />
|
|
<Area type="monotone" dataKey="Page views" name={pageViewsLabel} stroke="#4f46e5" fill="#4f46e5" fillOpacity={0.16} strokeWidth={2} />
|
|
<Area type="monotone" dataKey="Unique visitors" name={uniqueVisitorsLabel} stroke="#0891b2" fill="#0891b2" fillOpacity={0.16} strokeWidth={2} />
|
|
</AreaChart>
|
|
</ResponsiveContainer>
|
|
</Card>
|
|
);
|
|
}
|