44 lines
1.1 KiB
JavaScript
44 lines
1.1 KiB
JavaScript
import React from 'react';
|
|
|
|
const BarChart = ({ data = [], width = 400, height = 80, color = 'currentColor' }) => {
|
|
if (!data || data.length === 0) return null;
|
|
|
|
const max = Math.max(...data, 1);
|
|
const barCount = data.length;
|
|
const gap = 4;
|
|
const totalGap = (barCount - 1) * gap;
|
|
const barWidth = Math.max(8, (width - totalGap) / barCount);
|
|
const totalUsed = barCount * barWidth + totalGap;
|
|
const offsetX = (width - totalUsed) / 2;
|
|
|
|
return (
|
|
<svg
|
|
width='100%'
|
|
height={height}
|
|
viewBox={`0 0 ${width} ${height}`}
|
|
preserveAspectRatio='none'
|
|
>
|
|
{data.map((v, i) => {
|
|
const barH = Math.max(2, (v / max) * (height - 4));
|
|
const x = offsetX + i * (barWidth + gap);
|
|
const y = height - barH;
|
|
const rx = Math.min(3, barWidth / 3);
|
|
return (
|
|
<rect
|
|
key={i}
|
|
x={x}
|
|
y={y}
|
|
width={barWidth}
|
|
height={barH}
|
|
rx={rx}
|
|
fill={color}
|
|
opacity={0.85}
|
|
/>
|
|
);
|
|
})}
|
|
</svg>
|
|
);
|
|
};
|
|
|
|
export default BarChart;
|