feat(chart): 10m 실시간 / 일·주·월 토글 / 오늘 마커 / 예측 거래일 선택
- backend/app/api/chart.py: interval=10m|1d|1w|1mo. 10m 은 ohlcv_1m 을 time_bucket(10min) 으로 집계, stale(>10분) 이면 KIS 분봉 fetch 후 재조회. 1w/1mo 는 ohlcv_daily 를 date_trunc 로 집계. today 필드 추가. - backend/app/fetch/kis.py: fetch_minute_price() 추가 (tr_id FHKST03010200). KIS 응답 KST 시각을 tz-aware datetime 으로 변환, 오름차순 정렬. - web/lib/api.ts: ChartInterval 타입, getChart(interval), predict(horizons[]). - web/components/StockChart.tsx: 10m 이면 timeVisible. 일·주·월에서 오늘 화살표 마커 표시. ISO datetime 도 파싱. - web/components/PredictionPanel.tsx: 단기/중기/장기 프리셋 + 사용자 직접 지정 (예: 1,2,3,7). API 에 horizons 배열 전달. - web/app/[code]/page.tsx: interval 칩 (10분/일/주/월). 10m 일 때 60초마다 폴링. interval 별 기본 lookback (10m=1, 1d=180, 1w=730, 1mo=1825).
This commit is contained in:
claude-owner
@@ -7,6 +7,8 @@ import {
|
||||
type IChartApi,
|
||||
type ISeriesApi,
|
||||
type LineData,
|
||||
type SeriesMarker,
|
||||
type Time,
|
||||
type UTCTimestamp,
|
||||
} from "lightweight-charts";
|
||||
import type { ChartPayload, LatestPredictionResponse } from "../lib/api";
|
||||
@@ -16,12 +18,26 @@ type Props = {
|
||||
prediction?: LatestPredictionResponse | null;
|
||||
};
|
||||
|
||||
function dateToUtcTs(d: string): UTCTimestamp {
|
||||
// 'YYYY-MM-DD' → UTC midnight epoch seconds
|
||||
// 'YYYY-MM-DD' 또는 'YYYY-MM-DDTHH:MM:SS' (KST naive, 백엔드가 +09:00 시각의 wall-clock 을
|
||||
// 그대로 ISO 로 직렬화) 를 UTCTimestamp 로. lightweight-charts 는 timestamp 가 UTC 라고
|
||||
// 가정하지만, 우리는 KST wall-clock 을 UTC 인 척 넣는다 — timeScale 의 표시도 KST 그대로
|
||||
// 나와서 한국 사용자에겐 가장 직관적.
|
||||
function isoToUtcTs(s: string): UTCTimestamp {
|
||||
if (s.length <= 10) {
|
||||
return (Date.UTC(
|
||||
Number(s.slice(0, 4)),
|
||||
Number(s.slice(5, 7)) - 1,
|
||||
Number(s.slice(8, 10)),
|
||||
) / 1000) as UTCTimestamp;
|
||||
}
|
||||
// datetime: YYYY-MM-DDTHH:MM:SS
|
||||
return (Date.UTC(
|
||||
Number(d.slice(0, 4)),
|
||||
Number(d.slice(5, 7)) - 1,
|
||||
Number(d.slice(8, 10)),
|
||||
Number(s.slice(0, 4)),
|
||||
Number(s.slice(5, 7)) - 1,
|
||||
Number(s.slice(8, 10)),
|
||||
Number(s.slice(11, 13)),
|
||||
Number(s.slice(14, 16)),
|
||||
Number(s.slice(17, 19) || "0"),
|
||||
) / 1000) as UTCTimestamp;
|
||||
}
|
||||
|
||||
@@ -33,7 +49,9 @@ export function StockChart({ chart, prediction }: Props) {
|
||||
const predLowRef = useRef<ISeriesApi<"Line"> | null>(null);
|
||||
const predHighRef = useRef<ISeriesApi<"Line"> | null>(null);
|
||||
|
||||
// create chart once
|
||||
const isIntraday = chart.interval === "10m";
|
||||
|
||||
// create chart once (interval 바뀌면 timeVisible 토글 위해 의존성에 isIntraday 포함 — 재생성)
|
||||
useEffect(() => {
|
||||
if (!containerRef.current) return;
|
||||
const c = createChart(containerRef.current, {
|
||||
@@ -46,7 +64,11 @@ export function StockChart({ chart, prediction }: Props) {
|
||||
horzLines: { color: "#1f2937" },
|
||||
},
|
||||
rightPriceScale: { borderColor: "#374151" },
|
||||
timeScale: { borderColor: "#374151", timeVisible: false },
|
||||
timeScale: {
|
||||
borderColor: "#374151",
|
||||
timeVisible: isIntraday,
|
||||
secondsVisible: false,
|
||||
},
|
||||
autoSize: true,
|
||||
});
|
||||
const candle = c.addCandlestickSeries({
|
||||
@@ -67,28 +89,49 @@ export function StockChart({ chart, prediction }: Props) {
|
||||
predLowRef.current = null;
|
||||
predHighRef.current = null;
|
||||
};
|
||||
}, []);
|
||||
}, [isIntraday]);
|
||||
|
||||
// push candle data
|
||||
// push candle data + today marker
|
||||
useEffect(() => {
|
||||
if (!candleRef.current) return;
|
||||
const data: CandlestickData[] = chart.ohlcv
|
||||
.filter((p) => p.open !== null && p.high !== null && p.low !== null && p.close !== null)
|
||||
.map((p) => ({
|
||||
time: dateToUtcTs(p.date),
|
||||
time: isoToUtcTs(p.date),
|
||||
open: p.open as number,
|
||||
high: p.high as number,
|
||||
low: p.low as number,
|
||||
close: p.close as number,
|
||||
}));
|
||||
candleRef.current.setData(data);
|
||||
chartRef.current?.timeScale().fitContent();
|
||||
}, [chart]);
|
||||
|
||||
// push prediction overlay
|
||||
// 오늘 날짜 마커: 일/주/월봉에서만 표시 (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([]);
|
||||
}
|
||||
chartRef.current?.timeScale().fitContent();
|
||||
}, [chart, isIntraday]);
|
||||
|
||||
// push prediction overlay (10분봉에서는 표시 안 함 — 예측은 일봉 기준)
|
||||
useEffect(() => {
|
||||
if (!chartRef.current) return;
|
||||
// remove previous overlay
|
||||
if (predRef.current) {
|
||||
chartRef.current.removeSeries(predRef.current);
|
||||
predRef.current = null;
|
||||
@@ -101,6 +144,7 @@ export function StockChart({ chart, prediction }: Props) {
|
||||
chartRef.current.removeSeries(predHighRef.current);
|
||||
predHighRef.current = null;
|
||||
}
|
||||
if (isIntraday) return;
|
||||
if (!prediction || !prediction.found || !prediction.steps?.length) return;
|
||||
const baseDate = prediction.base_date!;
|
||||
const baseClose = prediction.base_close;
|
||||
@@ -108,22 +152,22 @@ export function StockChart({ chart, prediction }: Props) {
|
||||
const sorted = [...prediction.steps].sort((a, b) => a.horizon - b.horizon);
|
||||
|
||||
const med: LineData[] = [
|
||||
{ time: dateToUtcTs(baseDate), value: baseClose },
|
||||
{ time: isoToUtcTs(baseDate), value: baseClose },
|
||||
...sorted
|
||||
.filter((s) => s.point_close !== null)
|
||||
.map((s) => ({ time: dateToUtcTs(s.target_date), value: s.point_close as number })),
|
||||
.map((s) => ({ time: isoToUtcTs(s.target_date), value: s.point_close as number })),
|
||||
];
|
||||
const lo: LineData[] = [
|
||||
{ time: dateToUtcTs(baseDate), value: baseClose },
|
||||
{ time: isoToUtcTs(baseDate), value: baseClose },
|
||||
...sorted
|
||||
.filter((s) => s.ci_low !== null)
|
||||
.map((s) => ({ time: dateToUtcTs(s.target_date), value: s.ci_low as number })),
|
||||
.map((s) => ({ time: isoToUtcTs(s.target_date), value: s.ci_low as number })),
|
||||
];
|
||||
const hi: LineData[] = [
|
||||
{ time: dateToUtcTs(baseDate), value: baseClose },
|
||||
{ time: isoToUtcTs(baseDate), value: baseClose },
|
||||
...sorted
|
||||
.filter((s) => s.ci_high !== null)
|
||||
.map((s) => ({ time: dateToUtcTs(s.target_date), value: s.ci_high as number })),
|
||||
.map((s) => ({ time: isoToUtcTs(s.target_date), value: s.ci_high as number })),
|
||||
];
|
||||
|
||||
const medLine = chartRef.current.addLineSeries({
|
||||
@@ -157,7 +201,7 @@ export function StockChart({ chart, prediction }: Props) {
|
||||
predLowRef.current = loLine;
|
||||
predHighRef.current = hiLine;
|
||||
chartRef.current.timeScale().fitContent();
|
||||
}, [prediction]);
|
||||
}, [prediction, isIntraday]);
|
||||
|
||||
return (
|
||||
<div className="h-[460px] w-full rounded-md border border-zinc-800 bg-zinc-900/30 p-2">
|
||||
|
||||
Reference in New Issue
Block a user