62 lines
1.6 KiB
TypeScript
62 lines
1.6 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 = '' }) => {
|
|
const barData = [
|
|
{ value: 80, color: 'rgb(42, 157, 144)' },
|
|
{ value: 65, color: 'rgb(42, 157, 144)' },
|
|
{ value: 90, color: 'rgb(42, 157, 144)' },
|
|
{ value: 45, color: 'rgb(42, 157, 144)' },
|
|
{ value: 75, color: 'rgb(42, 157, 144)' },
|
|
{ value: 55, color: 'rgb(42, 157, 144)' },
|
|
{ value: 85, color: 'rgb(42, 157, 144)' },
|
|
{ value: 70, color: 'rgb(42, 157, 144)' },
|
|
{ value: 60, color: 'rgb(42, 157, 144)' },
|
|
{ value: 95, color: 'rgb(42, 157, 144)' },
|
|
{ value: 40, color: 'rgb(42, 157, 144)' },
|
|
{ value: 80, color: 'rgb(42, 157, 144)' }
|
|
]
|
|
|
|
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 / 100) * 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 |