@@ -15,11 +15,11 @@ import { useTheme } from "next-themes";
1515export type Point = { date : string ; value : number } ;
1616
1717type Props = {
18- title ?: string ; // 左上角标题,例如 " USD / AUD "
19- subtitle ?: string ; // 右上角小字,例如 "Foreign Exchange Rate"
20- data : Point [ ] ; // 形如 [{date:'2025-10-16', value:0.65}, ...]
21- decimals ?: number ; // tooltip 小数位,默认 4
22- className ?: string ; // 外层容器样式
18+ title ?: string ; // title, such as "EUR to USD Exchange Rate "
19+ subtitle ?: string ; // subtitle, such as "Foreign Exchange Rate"
20+ data : Point [ ] ; // data points, e.g., [{date:'2025-10-16', value:0.65}, ...]
21+ decimals ?: number ; // number of decimal places in tooltip, default 4
22+ className ?: string ; // outer container styles
2323} ;
2424
2525export default function HistoricalChart ( {
@@ -29,7 +29,7 @@ export default function HistoricalChart({
2929 decimals = 4 ,
3030 className,
3131} : Props ) {
32- // 最后一个点,用于高亮当前值
32+ // Last data point, used to highlight the current value
3333 const lastPoint = useMemo (
3434 ( ) => ( data && data . length ? data [ data . length - 1 ] : null ) ,
3535 [ data ]
@@ -79,7 +79,7 @@ export default function HistoricalChart({
7979 < div className = "h-72 w-full" >
8080 < ResponsiveContainer >
8181 < AreaChart data = { data } >
82- { /* 时间轴保持简洁,不改默认配色 */ }
82+ { /* Keep the time axis simple, do not change the default colors */ }
8383 < XAxis
8484 dataKey = "date"
8585 tickLine = { false }
@@ -97,18 +97,18 @@ export default function HistoricalChart({
9797 tickFormatter = { ( v ) => Number ( v ) . toFixed ( decimals ) }
9898 />
9999
100- { /* 只调整 Tooltip 尺寸与圆角
101- 暗黑模式下灰底和灰白字,其余保持原生 */ }
100+ { /* Only adjust Tooltip size and border radius
101+ In dark mode, use gray background and gray-white text, keep others native */ }
102102 < Tooltip
103103 contentStyle = { {
104104 ...( isDark
105105 ? {
106- background : "hsl(var(--muted))" , // 灰底
107- color : "hsl(var(--muted-foreground))" , // 灰白字
106+ background : "hsl(var(--muted))" , // gray background
107+ color : "hsl(var(--muted-foreground))" , // gray-white text
108108 }
109109 : { } ) ,
110- padding : "6px 8px" , // 更小
111- borderRadius : "10px" , // 圆角
110+ padding : "6px 8px" , // smaller
111+ borderRadius : "10px" , // rounded corners
112112 } }
113113 labelStyle = { { fontSize : 12 , marginBottom : 2 , lineHeight : 1.2 } }
114114 itemStyle = { { fontSize : 12 , lineHeight : 1.2 } }
@@ -127,7 +127,7 @@ export default function HistoricalChart({
127127 fill = "url(#fxFill)"
128128 />
129129
130- { /* 渐变不改颜色,仅保留透明度过渡 */ }
130+
131131 < defs >
132132 < linearGradient id = "fxFill" x1 = "0" y1 = "0" x2 = "0" y2 = "1" >
133133 < stop offset = "5%" stopOpacity = { 0.2 } />
@@ -138,7 +138,7 @@ export default function HistoricalChart({
138138 </ ResponsiveContainer >
139139 </ div >
140140
141- { /* 末端小圆点的文本提示 */ }
141+ { /* Text tooltip for the last data point */ }
142142 { lastPoint ? (
143143 < div className = "mt-2 text-right text-sm text-muted-foreground" >
144144 { lastPoint . date } · { lastPoint . value . toFixed ( decimals ) }
0 commit comments