9b25bc6970
- PeriodReturns: chart.ohlcv 종가로 1주/1개월/3개월/6개월/1년/전체 수익률 그리드 - TradingValuePanel: chart.trading_value 외국인/기관/개인 최근 5일 표 (억원 단위) - [code]/page.tsx 레이아웃 재배치: 수익률 → 거래주체+메트릭 → 뉴스+공시 백엔드 변경 없음 — 기존 ChartPayload 의 미사용 시리즈를 재활용. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
84 lines
2.9 KiB
TypeScript
84 lines
2.9 KiB
TypeScript
"use client";
|
|
|
|
// 거래주체 패널 — chart.trading_value (외국인/기관/개인 순매수) 를 최근 5일 표로.
|
|
// 별도 백엔드 호출 없음. ChartPayload 에 이미 들어있는 시리즈를 재사용.
|
|
// 단위: 백엔드는 원(KRW) 단위. UI 는 억원(억원=1e8)으로 환산.
|
|
// 색: KR 관행 — 매수 우위(+) 빨강, 매도 우위(-) 파랑.
|
|
|
|
import type { TradingValuePoint } from "../lib/api";
|
|
|
|
export function TradingValuePanel({
|
|
data,
|
|
}: {
|
|
data: TradingValuePoint[];
|
|
}) {
|
|
if (!data || data.length === 0) {
|
|
return (
|
|
<div className="rounded-md border border-zinc-800 bg-zinc-900/40 p-4 text-xs text-zinc-500">
|
|
거래주체 데이터 없음
|
|
</div>
|
|
);
|
|
}
|
|
// 최근 5일만 (입력은 오래된→최신 순), 표시는 최신이 위.
|
|
const recent = data.slice(-5).reverse();
|
|
|
|
return (
|
|
<div className="rounded-md border border-zinc-800 bg-zinc-900/40 p-4">
|
|
<div className="mb-3 flex items-baseline justify-between">
|
|
<div className="text-sm font-medium text-zinc-200">거래주체 순매수</div>
|
|
<div className="text-[11px] text-zinc-500">최근 {recent.length}일 · 단위: 억원</div>
|
|
</div>
|
|
<div className="overflow-hidden rounded-md border border-zinc-800">
|
|
<table className="w-full text-xs tabular-nums">
|
|
<thead className="bg-zinc-900/60 text-[11px] text-zinc-500">
|
|
<tr>
|
|
<th className="px-2 py-1.5 text-left font-normal">일자</th>
|
|
<th className="px-2 py-1.5 text-right font-normal">외국인</th>
|
|
<th className="px-2 py-1.5 text-right font-normal">기관</th>
|
|
<th className="px-2 py-1.5 text-right font-normal">개인</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-zinc-800">
|
|
{recent.map((row) => (
|
|
<tr key={row.date}>
|
|
<td className="px-2 py-1.5 text-left text-zinc-400">
|
|
{shortDate(row.date)}
|
|
</td>
|
|
<NetCell value={row.foreign_net} />
|
|
<NetCell value={row.institution_net} />
|
|
<NetCell value={row.individual_net} />
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function NetCell({ value }: { value: number | null }) {
|
|
if (value == null) {
|
|
return <td className="px-2 py-1.5 text-right text-zinc-600">—</td>;
|
|
}
|
|
const eok = value / 1e8;
|
|
const tone =
|
|
eok === 0
|
|
? "text-zinc-400"
|
|
: eok > 0
|
|
? "text-rose-400"
|
|
: "text-sky-400";
|
|
const sign = eok > 0 ? "+" : "";
|
|
return (
|
|
<td className={`px-2 py-1.5 text-right ${tone}`}>
|
|
{sign}
|
|
{eok.toLocaleString(undefined, { maximumFractionDigits: 0 })}
|
|
</td>
|
|
);
|
|
}
|
|
|
|
function shortDate(iso: string): string {
|
|
// 'YYYY-MM-DD' → 'MM-DD'
|
|
const m = /^\d{4}-(\d{2})-(\d{2})/.exec(iso);
|
|
return m ? `${m[1]}-${m[2]}` : iso;
|
|
}
|