30 lines
996 B
TypeScript
30 lines
996 B
TypeScript
import { Card } from './Card'
|
|
|
|
interface ChartPanelProps {
|
|
title: string
|
|
data: Record<string, number>
|
|
}
|
|
|
|
const BAR_COLOR = 'bg-blue-500'
|
|
|
|
export function ChartPanel({ title, data }: ChartPanelProps) {
|
|
const entries = Object.entries(data)
|
|
const max = Math.max(1, ...entries.map(([, value]) => value))
|
|
|
|
return (
|
|
<Card title={title}>
|
|
<div className="flex flex-col gap-2">
|
|
{entries.map(([label, value]) => (
|
|
<div key={label} className="flex items-center gap-3">
|
|
<span className="w-20 shrink-0 text-xs capitalize text-gray-600 dark:text-gray-400">{label}</span>
|
|
<div className="h-2 flex-1 overflow-hidden rounded-full bg-gray-100 dark:bg-gray-800">
|
|
<div className={`h-full ${BAR_COLOR}`} style={{ width: `${(value / max) * 100}%` }} />
|
|
</div>
|
|
<span className="w-6 shrink-0 text-right text-xs text-gray-500 dark:text-gray-500">{value}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</Card>
|
|
)
|
|
}
|