86 lines
2.7 KiB
TypeScript
86 lines
2.7 KiB
TypeScript
import { Tag } from "./ui";
|
||
import { AppIcon } from "./PixelIcons";
|
||
import type { MacroPayload } from "../lib/api";
|
||
|
||
/** 殖利率曲線小圖：留白充足、線條偏細，縮小時用 viewBox 等比縮放 */
|
||
export default function YieldCurve({ yc }: { yc?: MacroPayload["yieldCurve"] }) {
|
||
if (!yc?.yields?.length || !yc.maturities?.length)
|
||
return <p className="muted small">暫無殖利率曲線資料。</p>;
|
||
|
||
const ys = yc.yields;
|
||
const labels = yc.maturities;
|
||
const min = Math.min(...ys, ...(yc.prevYields || []));
|
||
const max = Math.max(...ys, ...(yc.prevYields || []));
|
||
const span = max - min || 1;
|
||
|
||
const W = 360;
|
||
const H = 128;
|
||
const padL = 28;
|
||
const padR = 20;
|
||
const padT = 22;
|
||
const padB = 28;
|
||
const plotW = W - padL - padR;
|
||
const plotH = H - padT - padB;
|
||
|
||
const x = (i: number) => padL + (plotW * i) / Math.max(1, labels.length - 1);
|
||
const y = (v: number) => padT + plotH * (1 - (v - min) / span);
|
||
const path = (arr: number[]) => arr.map((v, i) => `${x(i)},${y(v)}`).join(" ");
|
||
|
||
const yTicks = 3;
|
||
const gridYs = Array.from({ length: yTicks + 1 }, (_, i) => padT + (plotH * i) / yTicks);
|
||
|
||
return (
|
||
<div className="chart-panel chart-panel--curve">
|
||
{yc.inverted && (
|
||
<div className="chart-panel-tag">
|
||
<Tag tone="down">
|
||
<span className="tag-icon-inline">
|
||
<AppIcon name="warning" size={14} framed={false} />
|
||
</span>
|
||
殖利率倒掛
|
||
</Tag>
|
||
</div>
|
||
)}
|
||
<svg viewBox={`0 0 ${W} ${H}`} className="mini-chart-svg" role="img" aria-label="殖利率曲線">
|
||
{gridYs.map((gy, i) => (
|
||
<line
|
||
key={i}
|
||
x1={padL}
|
||
x2={W - padR}
|
||
y1={gy}
|
||
y2={gy}
|
||
stroke="rgba(231,198,107,.06)"
|
||
strokeWidth="1"
|
||
/>
|
||
))}
|
||
{yc.prevYields?.length === ys.length && (
|
||
<polyline
|
||
points={path(yc.prevYields)}
|
||
fill="none"
|
||
stroke="rgba(174,180,207,.35)"
|
||
strokeWidth="1.5"
|
||
strokeDasharray="4 4"
|
||
strokeLinecap="round"
|
||
/>
|
||
)}
|
||
<polyline
|
||
points={path(ys)}
|
||
fill="none"
|
||
stroke="#6fe0d0"
|
||
strokeWidth="2"
|
||
strokeLinecap="round"
|
||
strokeLinejoin="round"
|
||
/>
|
||
{ys.map((v, i) => (
|
||
<g key={i}>
|
||
<circle cx={x(i)} cy={y(v)} r="2.5" fill="#e7c66b" stroke="#0c1024" strokeWidth="1" />
|
||
<text x={x(i)} y={H - 8} fontSize="8" fill="#8b92b0" textAnchor="middle" fontFamily="var(--sans)">
|
||
{labels[i]}
|
||
</text>
|
||
</g>
|
||
))}
|
||
</svg>
|
||
<div className="chart-caption">實線＝目前，虛線＝約一個月前</div>
|
||
</div>
|
||
);
|
||
} |