84 lines
2.5 KiB
TypeScript
84 lines
2.5 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import {
|
|
AreaChart,
|
|
Area,
|
|
XAxis,
|
|
YAxis,
|
|
CartesianGrid,
|
|
Tooltip,
|
|
ResponsiveContainer
|
|
} from 'recharts';
|
|
|
|
// 定義傳入組件的歷史賠率資料介面
|
|
export interface OddsDataPoint {
|
|
time: string; // 格式化後的時間 (如: 14:30)
|
|
odds: number; // 小數賠率
|
|
}
|
|
|
|
interface OddsLineMovementChartProps {
|
|
data: OddsDataPoint[];
|
|
teamName: string;
|
|
}
|
|
|
|
export function OddsLineMovementChart({ data, teamName }: OddsLineMovementChartProps) {
|
|
return (
|
|
<div className="w-full h-72 bg-stone-50 p-4 rounded-lg border border-stone-200 shadow-sm">
|
|
<div className="mb-4">
|
|
<h3 className="text-sm text-stone-500 uppercase tracking-wider font-semibold">
|
|
Line Movement
|
|
</h3>
|
|
<h2 className="text-xl text-stone-900 font-dotmatrix">
|
|
{teamName} 賠率走勢
|
|
</h2>
|
|
</div>
|
|
|
|
<ResponsiveContainer width="100%" height="80%">
|
|
<AreaChart data={data} margin={{ top: 10, right: 10, left: -20, bottom: 0 }}>
|
|
<defs>
|
|
{/* 定義暖橘色漸層填充，增強視覺專業感 */}
|
|
<linearGradient id="colorOdds" x1="0" y1="0" x2="0" y2="1">
|
|
<stop offset="5%" stopColor="#ea580c" stopOpacity={0.3}/>
|
|
<stop offset="95%" stopColor="#ea580c" stopOpacity={0}/>
|
|
</linearGradient>
|
|
</defs>
|
|
<CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#e5e5e5" />
|
|
<XAxis
|
|
dataKey="time"
|
|
axisLine={false}
|
|
tickLine={false}
|
|
tick={{ fontSize: 12, fill: '#78716c' }}
|
|
dy={10}
|
|
/>
|
|
<YAxis
|
|
domain={['dataMin - 0.1', 'dataMax + 0.1']}
|
|
axisLine={false}
|
|
tickLine={false}
|
|
tick={{ fontSize: 12, fill: '#78716c' }}
|
|
tickFormatter={(val) => val.toFixed(2)}
|
|
/>
|
|
<Tooltip
|
|
contentStyle={{
|
|
backgroundColor: '#1A1A1A',
|
|
borderColor: '#ea580c',
|
|
color: '#FAF6F0',
|
|
fontFamily: '"DotGothic16", monospace'
|
|
}}
|
|
itemStyle={{ color: '#ea580c' }}
|
|
/>
|
|
<Area
|
|
type="monotone"
|
|
dataKey="odds"
|
|
stroke="#ea580c"
|
|
strokeWidth={3}
|
|
fillOpacity={1}
|
|
fill="url(#colorOdds)"
|
|
isAnimationActive={true}
|
|
/>
|
|
</AreaChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
);
|
|
}
|