fix(chart): "오늘" 표시를 차트 본체 마커 → 시간축 아래 캡션으로 이동
lightweight-charts 의 timeScale tick 라벨에 직접 텍스트를 끼우는 공식 API 가
없어서, 차트 컨테이너 바로 아래에 작은 캡션 (• 오늘 · YYYY-MM-DD (요일)) 으로
표시. 사용자 요청 ("차트에 표시 말고 아래 날짜 표시하는 곳에").
This commit is contained in:
@@ -7,8 +7,6 @@ import {
|
||||
type IChartApi,
|
||||
type ISeriesApi,
|
||||
type LineData,
|
||||
type SeriesMarker,
|
||||
type Time,
|
||||
type UTCTimestamp,
|
||||
} from "lightweight-charts";
|
||||
import type { ChartPayload, LatestPredictionResponse } from "../lib/api";
|
||||
@@ -104,28 +102,9 @@ export function StockChart({ chart, prediction }: Props) {
|
||||
close: p.close as number,
|
||||
}));
|
||||
candleRef.current.setData(data);
|
||||
|
||||
// 오늘 날짜 마커: 일/주/월봉에서만 표시 (10분봉은 데이터 자체가 오늘 하루라 무의미).
|
||||
// markers 는 데이터 포인트의 time 과 일치해야 표시되므로, 오늘 또는 가장 가까운 과거
|
||||
// 거래일을 찾는다.
|
||||
if (!isIntraday && chart.today) {
|
||||
const todayTs = isoToUtcTs(chart.today);
|
||||
// 차트의 마지막 데이터가 오늘이면 그 위에, 아니면 마지막 데이터 위에 "오늘" 표시.
|
||||
const lastTs = data.length > 0 ? (data[data.length - 1].time as UTCTimestamp) : null;
|
||||
const markerTime = (lastTs && lastTs <= todayTs ? lastTs : todayTs) as UTCTimestamp;
|
||||
const markers: SeriesMarker<Time>[] = [
|
||||
{
|
||||
time: markerTime,
|
||||
position: "aboveBar",
|
||||
color: "#fbbf24",
|
||||
shape: "arrowDown",
|
||||
text: "오늘",
|
||||
},
|
||||
];
|
||||
candleRef.current.setMarkers(markers);
|
||||
} else {
|
||||
candleRef.current.setMarkers([]);
|
||||
}
|
||||
// 오늘 표시는 차트 본체 위가 아니라 컨테이너 아래 캡션 (return JSX) 으로 옮김.
|
||||
// lightweight-charts 의 timeScale tick 자체에 라벨을 끼울 공식 API 가 없어서,
|
||||
// 시각적으로 동일한 위치 (시간축 바로 아래) 에 별도 div 로 렌더.
|
||||
chartRef.current?.timeScale().fitContent();
|
||||
}, [chart, isIntraday]);
|
||||
|
||||
@@ -203,9 +182,29 @@ export function StockChart({ chart, prediction }: Props) {
|
||||
chartRef.current.timeScale().fitContent();
|
||||
}, [prediction, isIntraday]);
|
||||
|
||||
// 오늘 라벨 — 차트 본체에 마커 대신 시간축 바로 아래에 작은 캡션으로.
|
||||
// 10분봉은 데이터 자체가 오늘 하루라 굳이 라벨 불필요.
|
||||
const todayLabel =
|
||||
!isIntraday && chart.today
|
||||
? new Date(chart.today + "T00:00:00").toLocaleDateString("ko-KR", {
|
||||
year: "numeric",
|
||||
month: "2-digit",
|
||||
day: "2-digit",
|
||||
weekday: "short",
|
||||
})
|
||||
: null;
|
||||
|
||||
return (
|
||||
<div className="h-[460px] w-full rounded-md border border-zinc-800 bg-zinc-900/30 p-2">
|
||||
<div className="w-full rounded-md border border-zinc-800 bg-zinc-900/30 p-2">
|
||||
<div className="h-[460px] w-full">
|
||||
<div ref={containerRef} className="h-full w-full" />
|
||||
</div>
|
||||
{todayLabel && (
|
||||
<div className="mt-1 flex items-center justify-end gap-2 px-2 text-xs text-zinc-400">
|
||||
<span className="inline-block h-2 w-2 rounded-full bg-amber-400" />
|
||||
<span>오늘 · {todayLabel}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user