78 lines
1.3 KiB
TypeScript
78 lines
1.3 KiB
TypeScript
'use client';
|
|
|
|
import { Bar } from 'react-chartjs-2';
|
|
import {
|
|
Chart as ChartJS,
|
|
CategoryScale,
|
|
LinearScale,
|
|
BarElement,
|
|
Title,
|
|
Tooltip,
|
|
Legend
|
|
} from 'chart.js';
|
|
|
|
ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend);
|
|
|
|
interface DailyActivity {
|
|
date: string;
|
|
sessionsCount: number;
|
|
}
|
|
|
|
interface DailyActivityChartProps {
|
|
data: DailyActivity[];
|
|
}
|
|
|
|
export function DailyActivityChart({ data }: DailyActivityChartProps) {
|
|
const chartData = {
|
|
labels: data.map((item) => new Date(item.date).toLocaleDateString()),
|
|
datasets: [
|
|
{
|
|
label: 'Sessions',
|
|
data: data.map((item) => item.sessionsCount),
|
|
backgroundColor: 'rgba(59, 130, 246, 0.8)',
|
|
borderColor: 'rgb(59, 130, 246)',
|
|
borderWidth: 1
|
|
}
|
|
]
|
|
};
|
|
|
|
const options = {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: {
|
|
position: 'top' as const,
|
|
labels: {
|
|
color: '#e5e7eb'
|
|
}
|
|
}
|
|
},
|
|
scales: {
|
|
x: {
|
|
ticks: {
|
|
color: '#9ca3af'
|
|
},
|
|
grid: {
|
|
color: '#374151'
|
|
}
|
|
},
|
|
y: {
|
|
beginAtZero: true,
|
|
ticks: {
|
|
color: '#9ca3af',
|
|
stepSize: 1
|
|
},
|
|
grid: {
|
|
color: '#374151'
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="h-64">
|
|
<Bar data={chartData} options={options} />
|
|
</div>
|
|
);
|
|
}
|