93 lines
2.4 KiB
TypeScript
93 lines
2.4 KiB
TypeScript
|
'use client'
|
||
|
|
|
||
|
|
import {
|
||
|
|
BarChart,
|
||
|
|
Bar,
|
||
|
|
XAxis,
|
||
|
|
YAxis,
|
||
|
|
CartesianGrid,
|
||
|
|
Tooltip,
|
||
|
|
ResponsiveContainer,
|
||
|
|
Cell,
|
||
|
|
} from 'recharts'
|
||
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||
|
|
|
||
|
|
interface ScoreDistributionProps {
|
||
|
|
data: { score: number; count: number }[]
|
||
|
|
averageScore: number
|
||
|
|
totalScores: number
|
||
|
|
}
|
||
|
|
|
||
|
|
const COLORS = [
|
||
|
|
'#de0f1e', // 1 - red (poor)
|
||
|
|
'#e6382f',
|
||
|
|
'#ed6141',
|
||
|
|
'#f38a52',
|
||
|
|
'#f8b364', // 5 - yellow (average)
|
||
|
|
'#c9c052',
|
||
|
|
'#99cc41',
|
||
|
|
'#6ad82f',
|
||
|
|
'#3be31e',
|
||
|
|
'#0bd90f', // 10 - green (excellent)
|
||
|
|
]
|
||
|
|
|
||
|
|
export function ScoreDistributionChart({
|
||
|
|
data,
|
||
|
|
averageScore,
|
||
|
|
totalScores,
|
||
|
|
}: ScoreDistributionProps) {
|
||
|
|
return (
|
||
|
|
<Card>
|
||
|
|
<CardHeader>
|
||
|
|
<CardTitle className="flex items-center justify-between">
|
||
|
|
<span>Score Distribution</span>
|
||
|
|
<span className="text-sm font-normal text-muted-foreground">
|
||
|
|
Avg: {averageScore.toFixed(2)} ({totalScores} scores)
|
||
|
|
</span>
|
||
|
|
</CardTitle>
|
||
|
|
</CardHeader>
|
||
|
|
<CardContent>
|
||
|
|
<div className="h-[300px]">
|
||
|
|
<ResponsiveContainer width="100%" height="100%">
|
||
|
|
<BarChart
|
||
|
|
data={data}
|
||
|
|
margin={{ top: 20, right: 20, bottom: 20, left: 20 }}
|
||
|
|
>
|
||
|
|
<CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
|
||
|
|
<XAxis
|
||
|
|
dataKey="score"
|
||
|
|
label={{
|
||
|
|
value: 'Score',
|
||
|
|
position: 'insideBottom',
|
||
|
|
offset: -10,
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
<YAxis
|
||
|
|
label={{
|
||
|
|
value: 'Count',
|
||
|
|
angle: -90,
|
||
|
|
position: 'insideLeft',
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
<Tooltip
|
||
|
|
contentStyle={{
|
||
|
|
backgroundColor: 'hsl(var(--card))',
|
||
|
|
border: '1px solid hsl(var(--border))',
|
||
|
|
borderRadius: '6px',
|
||
|
|
}}
|
||
|
|
formatter={(value: number | undefined) => [value ?? 0, 'Count']}
|
||
|
|
labelFormatter={(label) => `Score: ${label}`}
|
||
|
|
/>
|
||
|
|
<Bar dataKey="count" radius={[4, 4, 0, 0]}>
|
||
|
|
{data.map((_, index) => (
|
||
|
|
<Cell key={`cell-${index}`} fill={COLORS[index]} />
|
||
|
|
))}
|
||
|
|
</Bar>
|
||
|
|
</BarChart>
|
||
|
|
</ResponsiveContainer>
|
||
|
|
</div>
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
)
|
||
|
|
}
|