73 lines
1.8 KiB
TypeScript
73 lines
1.8 KiB
TypeScript
"use client"
|
|
|
|
import { EChartWrapper } from "./EChartWrapper"
|
|
|
|
interface TierData {
|
|
hardwareSlug: string
|
|
hardwareName?: string
|
|
unplayable: number
|
|
playable: number
|
|
smooth: number
|
|
excellent: number
|
|
}
|
|
|
|
export function PerformanceTierChart({ data }: { data: TierData[] }) {
|
|
if (!data || data.length === 0) {
|
|
return <div className="flex items-center justify-center h-48 text-sm text-text/40">No tier data</div>
|
|
}
|
|
|
|
const labels = data.map((d) => d.hardwareName || d.hardwareSlug)
|
|
|
|
const option = {
|
|
tooltip: {
|
|
trigger: "axis" as const,
|
|
axisPointer: { type: "shadow" as const },
|
|
},
|
|
legend: {
|
|
data: ["<30 fps", "30-59", "60-119", "≥120"],
|
|
textStyle: { color: "#999" },
|
|
top: 0,
|
|
},
|
|
grid: { left: 100, right: 20, top: 40, bottom: 30 },
|
|
xAxis: { type: "value" as const, splitLine: { lineStyle: { color: "#333" } } },
|
|
yAxis: {
|
|
type: "category" as const,
|
|
data: labels,
|
|
axisLine: { lineStyle: { color: "#555" } },
|
|
axisLabel: { color: "#999" },
|
|
},
|
|
series: [
|
|
{
|
|
name: "<30 fps",
|
|
type: "bar" as const,
|
|
stack: "total",
|
|
data: data.map((d) => d.unplayable),
|
|
itemStyle: { color: "#ef4444" },
|
|
},
|
|
{
|
|
name: "30-59",
|
|
type: "bar" as const,
|
|
stack: "total",
|
|
data: data.map((d) => d.playable),
|
|
itemStyle: { color: "#eab308" },
|
|
},
|
|
{
|
|
name: "60-119",
|
|
type: "bar" as const,
|
|
stack: "total",
|
|
data: data.map((d) => d.smooth),
|
|
itemStyle: { color: "#22c55e" },
|
|
},
|
|
{
|
|
name: "≥120",
|
|
type: "bar" as const,
|
|
stack: "total",
|
|
data: data.map((d) => d.excellent),
|
|
itemStyle: { color: "#3b82f6" },
|
|
},
|
|
],
|
|
}
|
|
|
|
return <EChartWrapper option={option} height={250} />
|
|
}
|