53 lines
1.3 KiB
TypeScript
53 lines
1.3 KiB
TypeScript
'use client'
|
|
|
|
import React from 'react'
|
|
|
|
interface ChartDataPoint {
|
|
value: number
|
|
label?: string
|
|
color?: string
|
|
}
|
|
|
|
interface BarChartProps {
|
|
className?: string
|
|
data?: ChartDataPoint[]
|
|
}
|
|
|
|
const BarChart: React.FC<BarChartProps> = ({ className = '', data }) => {
|
|
const barData = (Array.isArray(data) && data.length > 0)
|
|
? data.map(d => ({ value: d.value, color: d.color || 'rgb(42, 157, 144)' }))
|
|
: Array.from({ length: 12 }, () => ({ value: 0, color: 'rgb(42, 157, 144)' }))
|
|
|
|
const maxVal = Math.max(...barData.map(b => b.value || 0), 1)
|
|
|
|
return (
|
|
<div className={`w-full h-full ${className}`}>
|
|
<svg className="w-full h-full" viewBox="0 0 635 200">
|
|
<g>
|
|
{barData.map((bar, index) => {
|
|
const barWidth = 40
|
|
const barSpacing = 12
|
|
const x = index * (barWidth + barSpacing) + 20
|
|
const barHeight = (bar.value / maxVal) * 160
|
|
const y = 180 - barHeight
|
|
|
|
return (
|
|
<rect
|
|
key={index}
|
|
x={x}
|
|
y={y}
|
|
width={barWidth}
|
|
height={barHeight}
|
|
fill={bar.color}
|
|
rx="4"
|
|
ry="4"
|
|
/>
|
|
)
|
|
})}
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default BarChart |