102 lines
2.5 KiB
TypeScript
102 lines
2.5 KiB
TypeScript
"use client"
|
|
|
|
import { useMemo } from "react"
|
|
|
|
interface SimpleHorizontalBarChartProps {
|
|
data: Record<string, string | number>[]
|
|
dataKey: string
|
|
labelKey: string
|
|
fill?: string
|
|
width?: number
|
|
}
|
|
|
|
export function SimpleHorizontalBarChart({
|
|
data,
|
|
dataKey,
|
|
labelKey,
|
|
fill = "#6366f1",
|
|
width = 300,
|
|
}: SimpleHorizontalBarChartProps) {
|
|
const chartWidth = width
|
|
const chartHeight = Math.max(data.length * 40 + 20, 120)
|
|
const padding = { top: 10, right: 10, bottom: 10, left: 80 }
|
|
const innerWidth = chartWidth - padding.left - padding.right
|
|
|
|
const bars = useMemo(() => {
|
|
if (data.length === 0) return []
|
|
|
|
const values = data.map(d => Number(d[dataKey]) || 0)
|
|
const maxVal = Math.max(...values, 1)
|
|
|
|
return data.map((d, i) => {
|
|
const val = Number(d[dataKey]) || 0
|
|
const barWidth = (val / maxVal) * innerWidth * 0.9
|
|
const y =
|
|
padding.top +
|
|
(i * (chartHeight - padding.top - padding.bottom)) / data.length
|
|
return {
|
|
x: padding.left,
|
|
y,
|
|
width: barWidth,
|
|
height: Math.min(
|
|
24,
|
|
(chartHeight - padding.top - padding.bottom) / data.length - 4,
|
|
),
|
|
label: String(d[labelKey] ?? ""),
|
|
value: val,
|
|
}
|
|
})
|
|
}, [data, dataKey, labelKey, innerWidth, chartHeight])
|
|
|
|
if (data.length === 0) {
|
|
return (
|
|
<div
|
|
className="flex items-center justify-center text-muted-foreground text-sm"
|
|
style={{ height: 120 }}
|
|
>
|
|
暂无数据
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<svg
|
|
viewBox={`0 0 ${chartWidth} ${chartHeight}`}
|
|
className="w-full"
|
|
preserveAspectRatio="xMidYMid meet"
|
|
style={{ height: chartHeight }}
|
|
>
|
|
{bars.map((bar, i) => (
|
|
<g key={i}>
|
|
<text
|
|
x={padding.left - 8}
|
|
y={bar.y + bar.height / 2 + 4}
|
|
textAnchor="end"
|
|
className="fill-muted-foreground"
|
|
fontSize={12}
|
|
>
|
|
{bar.label.length > 6 ? `${bar.label.slice(0, 6)}...` : bar.label}
|
|
</text>
|
|
<rect
|
|
x={bar.x}
|
|
y={bar.y}
|
|
width={bar.width}
|
|
height={bar.height}
|
|
rx={4}
|
|
fill={fill}
|
|
opacity={0.8}
|
|
/>
|
|
<text
|
|
x={bar.x + bar.width + 6}
|
|
y={bar.y + bar.height / 2 + 4}
|
|
className="fill-muted-foreground"
|
|
fontSize={11}
|
|
>
|
|
{bar.value}
|
|
</text>
|
|
</g>
|
|
))}
|
|
</svg>
|
|
)
|
|
}
|