85 lines
2.4 KiB
TypeScript
85 lines
2.4 KiB
TypeScript
'use client';
|
||
|
||
import {
|
||
Bar,
|
||
BarChart,
|
||
CartesianGrid,
|
||
ResponsiveContainer,
|
||
Tooltip,
|
||
XAxis,
|
||
YAxis,
|
||
} from 'recharts';
|
||
|
||
type XGPoint = {
|
||
minute: number;
|
||
xgHome: number;
|
||
xgAway: number;
|
||
};
|
||
|
||
type ZonePoint = {
|
||
zone: string;
|
||
pct: number;
|
||
};
|
||
|
||
type 球員道具盤 = {
|
||
timeline: {
|
||
minute: number;
|
||
label: string;
|
||
}[];
|
||
xgSeries: XGPoint[];
|
||
heatZones: ZonePoint[];
|
||
};
|
||
|
||
export function LiveMatchCenter({ timeline, xgSeries, heatZones }: 球員道具盤) {
|
||
return (
|
||
<section className="space-y-4">
|
||
<article className="panel-glow rounded-2xl p-4">
|
||
<h3 className="dot-matrix text-xl text-[#7d2a15]">比賽事件時間軸</h3>
|
||
<ul className="mt-2 space-y-1 text-sm text-[#7a5b46]">
|
||
{timeline.map((item) => (
|
||
<li key={item.minute}>
|
||
{item.minute}’ {item.label}
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</article>
|
||
|
||
<article className="panel-glow rounded-2xl p-4">
|
||
<h3 className="dot-matrix text-xl text-[#7d2a15]">預期進球累積走勢</h3>
|
||
<div className="mt-2 h-72 w-full">
|
||
<ResponsiveContainer width="100%" height="100%">
|
||
<BarChart data={xgSeries}>
|
||
<CartesianGrid strokeDasharray="4 4" stroke="#eadcb9" />
|
||
<XAxis dataKey="minute" tick={{ fill: '#6d4d39' }} />
|
||
<YAxis tick={{ fill: '#6d4d39' }} />
|
||
<Tooltip
|
||
contentStyle={{ background: '#fff8e6', borderColor: '#d8b58c' }}
|
||
itemStyle={{ color: '#5f4031' }}
|
||
/>
|
||
<Bar dataKey="xgHome" fill="#b83822" name="主隊預期進球" />
|
||
<Bar dataKey="xgAway" fill="#7a4a2c" name="客隊預期進球" />
|
||
</BarChart>
|
||
</ResponsiveContainer>
|
||
</div>
|
||
</article>
|
||
|
||
<article className="panel-glow rounded-2xl p-4">
|
||
<h3 className="dot-matrix text-xl text-[#7d2a15]">控球熱區</h3>
|
||
<div className="mt-3 space-y-2">
|
||
{heatZones.map((zone) => (
|
||
<div key={zone.zone}>
|
||
<p className="text-xs text-[#8a6b58]">{zone.zone}</p>
|
||
<div className="mt-1 h-3 overflow-hidden rounded-full bg-[#ece0ca]">
|
||
<div
|
||
className="h-full bg-[#b83822]"
|
||
style={{ width: `${Math.max(0, Math.min(zone.pct, 100))}%` }}
|
||
/>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</article>
|
||
</section>
|
||
);
|
||
}
|