108 lines
2.9 KiB
TypeScript
108 lines
2.9 KiB
TypeScript
"use client";
|
|
|
|
import React from 'react';
|
|
import {
|
|
BarChart,
|
|
Bar,
|
|
XAxis,
|
|
YAxis,
|
|
CartesianGrid,
|
|
Tooltip,
|
|
Legend,
|
|
ResponsiveContainer,
|
|
Cell
|
|
} from 'recharts';
|
|
|
|
interface CountryHistogramProps {
|
|
data: { country: string; impressions: number; visitors: number }[];
|
|
title: string;
|
|
}
|
|
|
|
export default function CountryHistogram({ data, title }: CountryHistogramProps) {
|
|
const [mounted, setMounted] = React.useState(false);
|
|
|
|
React.useEffect(() => {
|
|
setMounted(true);
|
|
}, []);
|
|
|
|
// Take top 10 for readability
|
|
const chartData = data.slice(0, 10).map(item => ({
|
|
name: item.country || 'Inconnu',
|
|
"Impressions": item.impressions,
|
|
"V. Uniques": item.visitors
|
|
}));
|
|
|
|
return (
|
|
<div className="card bg-slate-900/50 border border-slate-800 p-6">
|
|
<h2 className="text-xl font-bold text-white mb-6 flex items-center gap-2">
|
|
{title}
|
|
</h2>
|
|
|
|
<div className="h-[400px] w-full flex items-center justify-center">
|
|
{!mounted ? (
|
|
<p className="text-slate-500 text-xs font-bold uppercase tracking-widest animate-pulse">Chargement du graphique...</p>
|
|
) : (
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<BarChart
|
|
data={chartData}
|
|
margin={{
|
|
top: 5,
|
|
right: 30,
|
|
left: 20,
|
|
bottom: 5,
|
|
}}
|
|
>
|
|
<CartesianGrid strokeDasharray="3 3" stroke="#1e293b" vertical={false} />
|
|
<XAxis
|
|
dataKey="name"
|
|
stroke="#64748b"
|
|
fontSize={10}
|
|
tickLine={false}
|
|
axisLine={false}
|
|
interval={0}
|
|
/>
|
|
<YAxis
|
|
stroke="#64748b"
|
|
fontSize={10}
|
|
tickLine={false}
|
|
axisLine={false}
|
|
tickFormatter={(value) => value.toLocaleString()}
|
|
/>
|
|
<Tooltip
|
|
contentStyle={{
|
|
backgroundColor: '#0f172a',
|
|
border: '1px solid #1e293b',
|
|
borderRadius: '8px',
|
|
fontSize: '12px'
|
|
}}
|
|
itemStyle={{ padding: '2px 0' }}
|
|
cursor={{ fill: 'rgba(255, 255, 255, 0.05)' }}
|
|
/>
|
|
<Legend
|
|
verticalAlign="top"
|
|
align="right"
|
|
iconType="circle"
|
|
wrapperStyle={{ paddingBottom: '20px', fontSize: '10px', textTransform: 'uppercase', fontWeight: 'bold' }}
|
|
/>
|
|
<Bar
|
|
dataKey="Impressions"
|
|
fill="#6366f1"
|
|
radius={[4, 4, 0, 0]}
|
|
barSize={20}
|
|
animationDuration={1500}
|
|
/>
|
|
<Bar
|
|
dataKey="V. Uniques"
|
|
fill="#10b981"
|
|
radius={[4, 4, 0, 0]}
|
|
barSize={20}
|
|
animationDuration={1500}
|
|
/>
|
|
</BarChart>
|
|
</ResponsiveContainer>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|