Macbook
817 lines
35 KiB
TypeScript
817 lines
35 KiB
TypeScript
/**
|
|
* ChartSlot
|
|
* 레이아웃 내 개별 차트 슬롯. 자체 심볼/타임프레임/데이터를 관리한다.
|
|
*/
|
|
import React, {
|
|
useState, useEffect, useLayoutEffect, useCallback, useRef, useMemo,
|
|
useImperativeHandle, forwardRef,
|
|
} from 'react';
|
|
import ReactDOM from 'react-dom';
|
|
import TradingChart from './TradingChart';
|
|
import IndicatorContextToolbar from './IndicatorContextToolbar';
|
|
import IndicatorSettingsModal from './IndicatorSettingsModal';
|
|
import MainChartSettingsModal from './MainChartSettingsModal';
|
|
import { MarketSearchPanel } from './MarketSearchPanel';
|
|
import { generateBars, formatPrice } from '../utils/dataGenerator';
|
|
import { getKoreanName } from '../utils/marketNameCache';
|
|
import { DEFAULT_MAIN_CHART_STYLE } from '../utils/storage';
|
|
import { enrichIndicatorConfig, getIndicatorDef } from '../utils/indicatorRegistry';
|
|
import { normalizeSmaConfig, createDefaultSmaPlotVisibility } from '../utils/smaConfig';
|
|
import { normalizeIchimokuConfig } from '../utils/ichimokuConfig';
|
|
import { isUpbitMarket } from '../utils/upbitApi';
|
|
import { useChartRealtimeData, type WsStatus } from '../hooks/useChartRealtimeData';
|
|
import { invalidateMarketCache } from '../utils/requestCache';
|
|
import { useHistoryLoader, LOAD_MORE_TRIGGER } from '../hooks/useHistoryLoader';
|
|
import { useIndicatorSettings } from '../hooks/useIndicatorSettings';
|
|
import {
|
|
duplicateIndicatorInList,
|
|
mergeIndicators,
|
|
reorderIndicatorGroup,
|
|
splitIndicatorPane,
|
|
} from '../utils/indicatorPaneMerge';
|
|
import { saveSlot } from '../utils/backendApi';
|
|
import type {
|
|
OHLCVBar, ChartType, Theme, Timeframe,
|
|
IndicatorConfig, LegendData, Drawing, ChartMode, MainChartStyle,
|
|
} from '../types';
|
|
import type { ChartManager } from '../utils/ChartManager';
|
|
|
|
// ── 타임프레임 옵션 ────────────────────────────────────────────────────────
|
|
const TF_OPTIONS: Timeframe[] = ['1m','3m','5m','10m','15m','30m','1h','4h','1D','1W','1M'];
|
|
|
|
// ── Ws 배지 ───────────────────────────────────────────────────────────────
|
|
const WsBadge: React.FC<{ status: WsStatus; isUpbit: boolean }> = ({ status, isUpbit }) => {
|
|
if (!isUpbit) return null;
|
|
const map: Record<WsStatus, { dot: string; label: string }> = {
|
|
connecting: { dot: 'dot-yellow', label: '연결 중...' },
|
|
connected: { dot: 'dot-lime', label: '실시간' },
|
|
disconnected: { dot: 'dot-red', label: '재연결' },
|
|
error: { dot: 'dot-red', label: '오류' },
|
|
};
|
|
const { dot, label } = map[status];
|
|
return (
|
|
<span className={`ws-badge ${dot}`} style={{ fontSize: '10px' }}>
|
|
<span className="ws-dot" />{label}
|
|
</span>
|
|
);
|
|
};
|
|
|
|
let _slotIndCounter = 0;
|
|
function newIndId() { return `sind_${++_slotIndCounter}_${Date.now()}`; }
|
|
|
|
// ── Ref 핸들 (외부에서 슬롯 조작용) ─────────────────────────────────────────
|
|
export interface ChartSlotHandle {
|
|
/** 지표 추가 */
|
|
addIndicator: (type: string, fromConfig?: IndicatorConfig) => void;
|
|
/** 지표 제거 (type 기준) */
|
|
removeIndicatorByType: (type: string) => void;
|
|
/** 보조지표 pane 복사 */
|
|
duplicateIndicator: (sourceId: string) => void;
|
|
/** 현재 활성 심볼 */
|
|
getSymbol: () => string;
|
|
/** 현재 활성 타임프레임 */
|
|
getTimeframe: () => Timeframe;
|
|
/** 현재 활성 지표 목록 */
|
|
getIndicators: () => IndicatorConfig[];
|
|
/** 심볼 변경 */
|
|
setSymbol: (s: string) => void;
|
|
/** 타임프레임 변경 */
|
|
setTimeframe: (tf: Timeframe) => void;
|
|
/** 지표 목록 교체 (모드 전환 시 이전 설정 복원용) */
|
|
setIndicators: (inds: IndicatorConfig[]) => void;
|
|
/** 크로스헤어 자석모드 설정 */
|
|
setCrosshairMagnet: (enabled: boolean) => void;
|
|
/** 가격축 라벨·설명 on/off */
|
|
setSeriesPriceLabelsEnabled: (enabled: boolean) => void;
|
|
/** 거래량 pane on/off */
|
|
setVolumeVisible: (visible: boolean) => void;
|
|
}
|
|
|
|
// ── Props ─────────────────────────────────────────────────────────────────
|
|
export interface ChartSlotProps {
|
|
slotIndex: number;
|
|
theme: Theme;
|
|
/** 슬롯이 활성(포커스) 상태인지 */
|
|
active: boolean;
|
|
onActivate: () => void;
|
|
/** 외부에서 강제 심볼 동기화 */
|
|
forcedSymbol?: string;
|
|
/** 외부에서 강제 타임프레임 동기화 */
|
|
forcedTf?: Timeframe;
|
|
/** 마운트 시 1회만 적용되는 초기 심볼 (단일↔다중 모드 전환 시 설정 이전용) */
|
|
initialSymbol?: string;
|
|
/** 마운트 시 1회만 적용되는 초기 타임프레임 */
|
|
initialTimeframe?: Timeframe;
|
|
/** 마운트 시 1회만 적용되는 초기 지표 목록 */
|
|
initialIndicators?: IndicatorConfig[];
|
|
/** Crosshair sync: 동기화 시각 (unix seconds) */
|
|
syncTime?: number;
|
|
onCrosshairTime?: (t: number) => void;
|
|
/** Time sync: 동기화 가시 시간 범위 */
|
|
syncVisibleRange?: { from: number; to: number } | null;
|
|
onVisibleRangeChange?: (r: { from: number; to: number }) => void;
|
|
/** Date range sync: 동기화 가시 논리 범위 */
|
|
syncLogicalRange?: { from: number; to: number } | null;
|
|
onLogicalRangeChange?: (r: { from: number; to: number }) => void;
|
|
/** 돋보기 활성 여부 (App 에서 전달) */
|
|
magnifierEnabled?: boolean;
|
|
/** 돋보기 닫기 콜백 */
|
|
onMagnifierClose?: () => void;
|
|
/** 멀티차트 전체 보기: 이 슬롯을 단일 차트로 확장 */
|
|
onFullView?: (symbol: string) => void;
|
|
/**
|
|
* 슬롯 내 지표 목록이 바뀔 때마다 호출.
|
|
* App 에서 활성 슬롯의 지표 목록을 IndicatorModal 에 반영하기 위해 사용.
|
|
*/
|
|
onIndicatorsChange?: (indicators: IndicatorConfig[]) => void;
|
|
/**
|
|
* 슬롯 내 심볼이 바뀔 때마다 호출.
|
|
* App 에서 activeSlotSymbol(호가창 심볼)을 동기화하기 위해 사용.
|
|
*/
|
|
onSymbolChange?: (symbol: string) => void;
|
|
/** 자석모드 상태 (크로스헤어 스냅) */
|
|
magnetMode?: 'off' | 'weak' | 'strong';
|
|
/** 차트 우클릭 → 매수·매도 패널 자동 입력 */
|
|
onTradeOrderRequest?: (req: { market: string; price: number; side: 'buy' | 'sell' }, slotIndex: number) => void;
|
|
/** 보조지표 우측 가격축 라벨·설명 표시 */
|
|
chartSeriesPriceLabels?: boolean;
|
|
/** 차트 하단 거래량 바 표시 */
|
|
chartVolumeVisible?: boolean;
|
|
chartRealtimeSource?: 'BACKEND_STOMP' | 'UPBIT_DIRECT';
|
|
displayTimezone?: string;
|
|
}
|
|
|
|
const ChartSlot = forwardRef<ChartSlotHandle, ChartSlotProps>(function ChartSlot({
|
|
slotIndex, theme, active, onActivate,
|
|
forcedSymbol, forcedTf,
|
|
initialSymbol, initialTimeframe, initialIndicators,
|
|
syncTime, onCrosshairTime,
|
|
syncVisibleRange, onVisibleRangeChange,
|
|
syncLogicalRange, onLogicalRangeChange,
|
|
onFullView,
|
|
magnifierEnabled = false,
|
|
onMagnifierClose,
|
|
onIndicatorsChange,
|
|
onSymbolChange,
|
|
magnetMode = 'off',
|
|
onTradeOrderRequest,
|
|
chartSeriesPriceLabels = true,
|
|
chartVolumeVisible = true,
|
|
chartRealtimeSource = 'BACKEND_STOMP',
|
|
displayTimezone,
|
|
}, ref) {
|
|
// ── 전역 지표 파라미터 + 시각 설정 (DB 동기화) ────────────────────────
|
|
const { getParams, saveParams, getVisualConfig, saveVisual } = useIndicatorSettings();
|
|
|
|
// ── 자체 상태 ─────────────────────────────────────────────────────────
|
|
// initial* 값이 있으면 우선 적용 (단일↔다중 모드 전환 시 설정 이전용)
|
|
const [symbol, setSymbol] = useState(initialSymbol ?? forcedSymbol ?? 'KRW-BTC');
|
|
const [timeframe, setTimeframe] = useState<Timeframe>(initialTimeframe ?? forcedTf ?? '1D');
|
|
const [chartType] = useState<ChartType>('candlestick');
|
|
const [indicators, setIndicators] = useState<IndicatorConfig[]>(initialIndicators ?? []);
|
|
const [drawings] = useState<Drawing[]>([]);
|
|
const [legend, setLegend] = useState<LegendData | null>(null);
|
|
const [ctxToolbar, setCtxToolbar] = useState<{ entryId: string; screenX: number; screenY: number } | null>(null);
|
|
const [settingsModalId, setSettingsModalId] = useState<string | null>(null);
|
|
const [showMainChartModal, setShowMainChartModal] = useState(false);
|
|
const [mainChartStyle, setMainChartStyle] = useState<MainChartStyle>(DEFAULT_MAIN_CHART_STYLE);
|
|
const [showMarket, setShowMarket] = useState(false);
|
|
// 슬롯 컨테이너 rect: MarketSearchPanel 위치 계산에 사용
|
|
const [slotAnchorRect, setSlotAnchorRect] = useState<DOMRect | null>(null);
|
|
|
|
const managerRef = useRef<ChartManager | null>(null);
|
|
// initialSymbol 도 초기값으로 포함: requestAnimationFrame 이전에 올바른 값 보장
|
|
const symbolRef = useRef(initialSymbol ?? forcedSymbol ?? 'KRW-BTC');
|
|
const timeframeRef = useRef<Timeframe>(forcedTf ?? '1D');
|
|
|
|
// symbol / timeframe 변경 시 ref 동기화 (외부 접근용)
|
|
useEffect(() => { symbolRef.current = symbol; }, [symbol]);
|
|
useEffect(() => { timeframeRef.current = timeframe; }, [timeframe]);
|
|
|
|
// 심볼 변경 시 부모(App)에 알림 → 호가창 activeSlotSymbol 동기화
|
|
const onSymbolChangeRef = useRef(onSymbolChange);
|
|
onSymbolChangeRef.current = onSymbolChange;
|
|
useEffect(() => {
|
|
onSymbolChangeRef.current?.(symbol);
|
|
}, [symbol]);
|
|
|
|
// 지표 목록 변경 시 부모(App)에 알림 → IndicatorModal 의 activeIndicators 갱신
|
|
const onIndicatorsChangeRef = useRef(onIndicatorsChange);
|
|
onIndicatorsChangeRef.current = onIndicatorsChange;
|
|
useEffect(() => {
|
|
onIndicatorsChangeRef.current?.(indicators);
|
|
}, [indicators]);
|
|
|
|
// indicators 를 ref 로도 유지 (useImperativeHandle 의 최신 값 접근용)
|
|
const indicatorsRef = useRef<IndicatorConfig[]>(indicators);
|
|
useEffect(() => { indicatorsRef.current = indicators; }, [indicators]);
|
|
|
|
// ── 외부 핸들 노출 ─────────────────────────────────────────────────────
|
|
useImperativeHandle(ref, () => ({
|
|
addIndicator: (type: string, fromConfig?: IndicatorConfig) => {
|
|
setIndicators(prev => {
|
|
if (prev.some(i => i.type === type)) return prev;
|
|
const def = getIndicatorDef(type);
|
|
if (!def) return prev;
|
|
let cfg: IndicatorConfig;
|
|
if (fromConfig) {
|
|
cfg = { ...fromConfig, id: newIndId(), type: def.type };
|
|
} else {
|
|
const params = getParams(type, def.defaultParams);
|
|
const { plots, hlines, cloudColors } = getVisualConfig(type, def.plots, def.hlines);
|
|
cfg = {
|
|
id: newIndId(),
|
|
type: def.type,
|
|
params,
|
|
plots,
|
|
hlines,
|
|
...(cloudColors ? { cloudColors } : {}),
|
|
};
|
|
}
|
|
if (type === 'SMA') {
|
|
cfg = normalizeSmaConfig({
|
|
...cfg,
|
|
plotVisibility: cfg.plotVisibility ?? createDefaultSmaPlotVisibility(),
|
|
});
|
|
} else if (type === 'IchimokuCloud') {
|
|
cfg = normalizeIchimokuConfig(cfg);
|
|
}
|
|
return [...prev, cfg];
|
|
});
|
|
},
|
|
removeIndicatorByType: (type: string) => {
|
|
setIndicators(prev => prev.filter(i => i.type !== type));
|
|
},
|
|
duplicateIndicator: (sourceId: string) => {
|
|
setIndicators(prev => duplicateIndicatorInList(sourceId, prev, newIndId) ?? prev);
|
|
},
|
|
getSymbol: () => symbolRef.current,
|
|
getTimeframe: () => timeframeRef.current,
|
|
getIndicators: () => indicatorsRef.current,
|
|
setSymbol: (s: string) => {
|
|
pendingRealtimeBarRef.current = null;
|
|
// 새 종목의 캐시를 미리 무효화해 신선한 데이터를 요청하도록 함
|
|
if (isUpbitMarket(s)) invalidateMarketCache(s);
|
|
setSymbol(s);
|
|
setLegend(null);
|
|
},
|
|
setTimeframe: (tf: Timeframe) => { setTimeframe(tf); },
|
|
setIndicators: (inds: IndicatorConfig[]) => { setIndicators(inds); },
|
|
setCrosshairMagnet: (enabled: boolean) => {
|
|
managerRef.current?.setCrosshairMagnet(enabled);
|
|
},
|
|
setSeriesPriceLabelsEnabled: (enabled: boolean) => {
|
|
managerRef.current?.setSeriesPriceLabelsEnabled(enabled);
|
|
},
|
|
setVolumeVisible: (visible: boolean) => {
|
|
managerRef.current?.setVolumeVisible(visible);
|
|
},
|
|
}), []);
|
|
|
|
// 자석모드 변경 → ChartManager 크로스헤어 모드 즉시 반영
|
|
useEffect(() => {
|
|
managerRef.current?.setCrosshairMagnet(magnetMode !== 'off');
|
|
}, [magnetMode]);
|
|
|
|
useEffect(() => {
|
|
managerRef.current?.setSeriesPriceLabelsEnabled(chartSeriesPriceLabels);
|
|
}, [chartSeriesPriceLabels]);
|
|
|
|
useEffect(() => {
|
|
managerRef.current?.setVolumeVisible(chartVolumeVisible);
|
|
}, [chartVolumeVisible]);
|
|
|
|
// 외부 심볼 동기화
|
|
useEffect(() => {
|
|
if (forcedSymbol && forcedSymbol !== symbol) setSymbol(forcedSymbol);
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [forcedSymbol]);
|
|
|
|
// 외부 타임프레임 동기화
|
|
useEffect(() => {
|
|
if (forcedTf && forcedTf !== timeframe) setTimeframe(forcedTf);
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [forcedTf]);
|
|
|
|
// mainChartStyle → ChartManager
|
|
useEffect(() => {
|
|
managerRef.current?.updateMainSeriesStyle(mainChartStyle);
|
|
}, [mainChartStyle]);
|
|
|
|
// ── 슬롯 상태 변경 시 DB 자동 저장 (디바운스 2s) ─────────────────────────
|
|
// 멀티슬롯 모드에서 각 슬롯 독립 저장 보장 (App.tsx workspaceState는 슬롯 0만 포함)
|
|
const saveTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
|
useEffect(() => {
|
|
if (saveTimerRef.current) clearTimeout(saveTimerRef.current);
|
|
saveTimerRef.current = setTimeout(() => {
|
|
saveSlot(slotIndex, {
|
|
slotIndex,
|
|
symbol,
|
|
timeframe,
|
|
chartType: 'candlestick',
|
|
theme,
|
|
mode: 'normal',
|
|
logScale: false,
|
|
drawingsLocked: false,
|
|
drawingsVisible: true,
|
|
indicators,
|
|
drawings: [],
|
|
paneLayout: null,
|
|
mainChartStyle,
|
|
}).catch(err => console.error('[ChartSlot] saveSlot failed', err));
|
|
}, 2000);
|
|
return () => { if (saveTimerRef.current) clearTimeout(saveTimerRef.current); };
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [slotIndex, symbol, timeframe, theme, indicators, mainChartStyle]);
|
|
|
|
// ── 동기화 콜백 refs (항상 최신 값을 참조하도록) ─────────────────────────
|
|
const onVisibleRangeChangeRef = useRef(onVisibleRangeChange);
|
|
const onLogicalRangeChangeRef = useRef(onLogicalRangeChange);
|
|
onVisibleRangeChangeRef.current = onVisibleRangeChange;
|
|
onLogicalRangeChangeRef.current = onLogicalRangeChange;
|
|
|
|
// 외부에서 sync 값을 적용하는 중임을 표시 (feedback loop 방지)
|
|
const isSyncingTimeRef = useRef(false);
|
|
const isSyncingLogicalRef = useRef(false);
|
|
|
|
// 데이터 로드 전 수신한 sync range 를 저장해두는 pending ref
|
|
// → onDataLoaded 콜백에서 재적용 (멀티차트 첫 마운트 시 타이밍 문제 해결)
|
|
const pendingSyncVisibleRef = useRef<{ from: number; to: number } | null>(null);
|
|
const pendingSyncLogicalRef = useRef<{ from: number; to: number } | null>(null);
|
|
|
|
// ── Crosshair sync: syncTime → setCrosshairAtTime ────────────────────
|
|
useEffect(() => {
|
|
if (!syncTime) { managerRef.current?.clearCrosshairPosition(); return; }
|
|
managerRef.current?.setCrosshairAtTime(syncTime);
|
|
}, [syncTime]);
|
|
|
|
// ── Time sync: syncVisibleRange 외부 적용 ────────────────────────────
|
|
useEffect(() => {
|
|
if (!syncVisibleRange) return;
|
|
const mgr = managerRef.current;
|
|
if (!mgr || mgr.getRawBarsLength() === 0) {
|
|
// 데이터 로드 전 → pending 저장 후 onDataLoaded 에서 재적용
|
|
pendingSyncVisibleRef.current = syncVisibleRange;
|
|
return;
|
|
}
|
|
isSyncingTimeRef.current = true;
|
|
mgr.applyVisibleTimeRange(syncVisibleRange.from, syncVisibleRange.to);
|
|
requestAnimationFrame(() => { isSyncingTimeRef.current = false; });
|
|
}, [syncVisibleRange]);
|
|
|
|
// ── Date range sync: syncLogicalRange 외부 적용 ──────────────────────
|
|
useEffect(() => {
|
|
if (!syncLogicalRange) return;
|
|
const mgr = managerRef.current;
|
|
if (!mgr || mgr.getRawBarsLength() === 0) {
|
|
pendingSyncLogicalRef.current = syncLogicalRange;
|
|
return;
|
|
}
|
|
isSyncingLogicalRef.current = true;
|
|
mgr.applyVisibleLogicalRange(syncLogicalRange.from, syncLogicalRange.to);
|
|
requestAnimationFrame(() => { isSyncingLogicalRef.current = false; });
|
|
}, [syncLogicalRange]);
|
|
|
|
// 멀티 레이아웃 새로고침 시 차트 빈 화면 방지:
|
|
// CSS Grid 높이 확정 지연에 대비해 여러 시점에 pane 높이를 재적용한다.
|
|
// TradingChart 자체도 applyPaneLayout 자동 재시도를 하지만, 슬롯 레벨에서도 보강.
|
|
// ※ TradingChart를 재마운트(key 변경)하면 managerRef가 초기화되어 MarketSearchPanel 등
|
|
// 다른 상태에 영향을 줄 수 있으므로, 재마운트 대신 resetPaneHeights 재시도만 수행한다.
|
|
const slotContainerRef = useRef<HTMLDivElement | null>(null);
|
|
// 데이터 로딩 완료 후 차트가 여전히 비어 있으면 1회만 재마운트 (data + blank guard)
|
|
const [reloadTick, setReloadTick] = useState(0);
|
|
const reloadTriggeredRef = useRef(false); // 재마운트는 최대 1회
|
|
useLayoutEffect(() => {
|
|
reloadTriggeredRef.current = false;
|
|
chartLiveReadyRef.current = false;
|
|
pendingRealtimeBarRef.current = null;
|
|
}, [symbol, timeframe]);
|
|
useEffect(() => {
|
|
const checks = [200, 500, 1000, 2000].map(delay =>
|
|
setTimeout(() => {
|
|
const el = slotContainerRef.current;
|
|
const mgr = managerRef.current;
|
|
if (!el || !mgr) return;
|
|
const h = el.clientHeight;
|
|
if (h <= 0) return;
|
|
if (mgr.hasMainSeries()) {
|
|
// 차트 데이터 있음 → pane 높이만 재적용
|
|
mgr.resetPaneHeights(h);
|
|
} else if (!reloadTriggeredRef.current) {
|
|
// 차트 비어 있고 아직 재시도 안 했음 → 1회만 재마운트
|
|
// (bars 로딩 지연일 수 있으므로, 늦은 타이머에서만 트리거)
|
|
if (delay >= 1000) {
|
|
reloadTriggeredRef.current = true;
|
|
setReloadTick(t => t + 1);
|
|
}
|
|
}
|
|
}, delay)
|
|
);
|
|
return () => checks.forEach(clearTimeout);
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, []);
|
|
|
|
// ── 데이터 ────────────────────────────────────────────────────────────
|
|
const useUpbit = isUpbitMarket(symbol);
|
|
|
|
// 과거 데이터 추가 로드 (차트를 왼쪽으로 스크롤할 때)
|
|
const { isLoadingMore, loadMoreRef } = useHistoryLoader({
|
|
symbol, timeframe, isUpbit: useUpbit, managerRef,
|
|
});
|
|
|
|
const [simBars, setSimBars] = useState<OHLCVBar[]>(() =>
|
|
!isUpbitMarket(symbol) ? generateBars(symbol, timeframe) : []
|
|
);
|
|
useEffect(() => {
|
|
if (useUpbit) return;
|
|
setSimBars(generateBars(symbol, timeframe));
|
|
setLegend(null);
|
|
}, [symbol, timeframe, useUpbit]);
|
|
|
|
const pendingRealtimeBarRef = useRef<OHLCVBar | null>(null);
|
|
const barsMarketRef = useRef<string | null>(null);
|
|
const chartLiveReadyRef = useRef(false);
|
|
|
|
const handleCandlesReady = useCallback(() => {
|
|
chartLiveReadyRef.current = true;
|
|
const pending = pendingRealtimeBarRef.current;
|
|
const mgr = managerRef.current;
|
|
if (!pending || !mgr || barsMarketRef.current !== symbolRef.current) return;
|
|
pendingRealtimeBarRef.current = null;
|
|
mgr.updateBar(pending);
|
|
}, []);
|
|
|
|
const handleTickUpdate = useCallback((bar: OHLCVBar) => {
|
|
if (barsMarketRef.current !== symbolRef.current) return;
|
|
if (!chartLiveReadyRef.current) {
|
|
pendingRealtimeBarRef.current = bar;
|
|
return;
|
|
}
|
|
if (!managerRef.current) {
|
|
pendingRealtimeBarRef.current = bar;
|
|
return;
|
|
}
|
|
managerRef.current.updateBar(bar);
|
|
}, []);
|
|
const handleNewCandle = useCallback((bar: OHLCVBar) => {
|
|
if (barsMarketRef.current !== symbolRef.current) return;
|
|
if (!chartLiveReadyRef.current) {
|
|
pendingRealtimeBarRef.current = bar;
|
|
return;
|
|
}
|
|
if (!managerRef.current) {
|
|
pendingRealtimeBarRef.current = bar;
|
|
return;
|
|
}
|
|
managerRef.current.appendBar(bar);
|
|
}, []);
|
|
|
|
const { bars: upbitBars, barsMarket: upbitBarsMarket, latestBar, wsStatus, isLoading } = useChartRealtimeData(
|
|
symbol, timeframe,
|
|
useMemo(() => ({
|
|
onTickUpdate: handleTickUpdate,
|
|
onNewCandle: handleNewCandle,
|
|
enabled: useUpbit,
|
|
source: chartRealtimeSource,
|
|
}), [handleTickUpdate, handleNewCandle, useUpbit, chartRealtimeSource]),
|
|
);
|
|
|
|
const bars = useUpbit ? upbitBars : simBars;
|
|
const barsMarket = useUpbit ? upbitBarsMarket : symbol;
|
|
barsMarketRef.current = barsMarket;
|
|
|
|
const lastKnownBar = useUpbit
|
|
? (latestBar ?? (bars.length > 0 ? bars[bars.length - 1] : null))
|
|
: (bars.length > 0 ? bars[bars.length - 1] : null);
|
|
const currentBar = legend ?? lastKnownBar;
|
|
const isUp = currentBar ? currentBar.close >= currentBar.open : true;
|
|
const prevClose = bars.length > 1 ? bars[bars.length - 2].close : currentBar?.open ?? 0;
|
|
const dailyChange = currentBar ? currentBar.close - prevClose : 0;
|
|
const dailyChangePct = prevClose > 0 ? dailyChange / prevClose * 100 : 0;
|
|
|
|
// ── 인디케이터 핸들러 ─────────────────────────────────────────────────
|
|
const handleIndicatorSave = useCallback((updated: IndicatorConfig) => {
|
|
setIndicators(prev => prev.map(i => i.id === updated.id ? updated : i));
|
|
setSettingsModalId(null);
|
|
setCtxToolbar(null);
|
|
// 파라미터 변경 DB 저장 → 백엔드 Ta4j 계산에 반영
|
|
saveParams(updated.type, updated.params);
|
|
// 시각 설정(색상·선굵기·수평선) 변경 DB 저장 → 새 지표 추가 시 기본값으로 사용
|
|
saveVisual(updated.type, updated.plots, updated.hlines, updated.cloudColors);
|
|
}, [saveParams, saveVisual]);
|
|
|
|
const handleToggleHidden = useCallback((id: string) => {
|
|
setIndicators(prev => prev.map(i => i.id === id ? { ...i, hidden: !i.hidden } : i));
|
|
}, []);
|
|
|
|
const handleRemoveById = useCallback((id: string) => {
|
|
setIndicators(prev => prev.filter(i => i.id !== id));
|
|
setCtxToolbar(null);
|
|
setSettingsModalId(null);
|
|
}, []);
|
|
|
|
const handleReorderIndicators = useCallback((fromId: string, insertBeforeId: string | null) => {
|
|
setIndicators(prev => reorderIndicatorGroup(fromId, insertBeforeId, prev));
|
|
}, []);
|
|
|
|
const handleMergeIndicators = useCallback((fromId: string, intoId: string) => {
|
|
setIndicators(prev => mergeIndicators(fromId, intoId, prev));
|
|
}, []);
|
|
|
|
const handleSplitIndicatorPane = useCallback((hostId: string) => {
|
|
setIndicators(prev => splitIndicatorPane(hostId, prev));
|
|
}, []);
|
|
|
|
const [focusedIndicatorId, setFocusedIndicatorId] = useState<string | null>(null);
|
|
|
|
const handleExpandIndicator = useCallback((id: string) => {
|
|
setFocusedIndicatorId(id);
|
|
}, []);
|
|
|
|
const handleRestoreIndicators = useCallback(() => {
|
|
setFocusedIndicatorId(null);
|
|
}, []);
|
|
|
|
const handleDuplicateIndicator = useCallback((sourceId: string) => {
|
|
setIndicators(prev => duplicateIndicatorInList(sourceId, prev, newIndId) ?? prev);
|
|
}, []);
|
|
|
|
const handleRemoveByIdSlot = useCallback((id: string) => {
|
|
setIndicators(prev => prev.filter(i => i.id !== id));
|
|
setFocusedIndicatorId(prev => prev === id ? null : prev);
|
|
setCtxToolbar(null);
|
|
setSettingsModalId(null);
|
|
}, []);
|
|
|
|
/** 단독 전체화면에서 보여줄 지표 목록 (overlay + 선택된 1개) + 타임프레임 필터 */
|
|
const effectiveIndicators = useMemo(() => {
|
|
// 타임프레임 필터: timeframeVisibility[currentTf] === false 이면 제외
|
|
const tfFiltered = indicators.filter(ind =>
|
|
ind.timeframeVisibility?.[timeframe] !== false
|
|
);
|
|
if (!focusedIndicatorId) return tfFiltered;
|
|
return tfFiltered.filter(ind => {
|
|
const def = getIndicatorDef(ind.type);
|
|
return def?.overlay || def?.returnsMarkers || ind.id === focusedIndicatorId;
|
|
});
|
|
}, [focusedIndicatorId, indicators, timeframe]);
|
|
|
|
// ── 심볼 선택 ─────────────────────────────────────────────────────────
|
|
const handleSymbolSelect = useCallback((s: string) => {
|
|
if (isUpbitMarket(s)) invalidateMarketCache(s);
|
|
setSymbol(s);
|
|
setLegend(null);
|
|
setShowMarket(false);
|
|
}, []);
|
|
|
|
return (
|
|
<div
|
|
className={`chart-slot${active ? ' active' : ''}`}
|
|
onClick={onActivate}
|
|
>
|
|
{/* ── 슬롯 미니 헤더 ────────────────────────────────────────────────── */}
|
|
<div className="slot-header" onClick={e => e.stopPropagation()}>
|
|
{/* 심볼 버튼: 클릭 시 슬롯 영역 rect를 캡처 후 MarketSearchPanel Portal 오픈 */}
|
|
<button
|
|
className={`slot-sym-btn${showMarket ? ' open' : ''}`}
|
|
title="종목 변경"
|
|
onClick={() => {
|
|
if (!showMarket) {
|
|
// 클릭 시점에 슬롯 전체(.chart-slot) 컨테이너의 rect를 캡처
|
|
const slotEl = slotContainerRef.current?.closest('.chart-slot') as HTMLElement | null;
|
|
setSlotAnchorRect(slotEl?.getBoundingClientRect() ?? null);
|
|
}
|
|
setShowMarket(v => !v);
|
|
}}
|
|
>
|
|
<svg width="11" height="11" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.6" style={{ flexShrink: 0 }}>
|
|
<circle cx="6" cy="6" r="4"/><line x1="9.5" y1="9.5" x2="13" y2="13"/>
|
|
</svg>
|
|
{getKoreanName(symbol) !== symbol
|
|
? <><span className="slot-sym-kr">{getKoreanName(symbol)}</span><span className="slot-sym-code">{symbol}</span></>
|
|
: <span className="slot-sym-kr">{symbol}</span>
|
|
}
|
|
</button>
|
|
|
|
{/* MarketSearchPanel: body 포털로 렌더 + anchorRect로 해당 슬롯 영역 안에 표시 */}
|
|
{showMarket && ReactDOM.createPortal(
|
|
<MarketSearchPanel
|
|
currentMarket={symbol}
|
|
onSelect={s => { handleSymbolSelect(s); }}
|
|
onClose={() => setShowMarket(false)}
|
|
anchorRect={slotAnchorRect}
|
|
/>,
|
|
document.body,
|
|
)}
|
|
|
|
{/* 타임프레임 선택 */}
|
|
<div className="slot-tf-row">
|
|
{TF_OPTIONS.map(tf => (
|
|
<button
|
|
key={tf}
|
|
className={`slot-tf-btn${tf === timeframe ? ' active' : ''}`}
|
|
onClick={() => setTimeframe(tf)}
|
|
>
|
|
{tf}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{/* 현재가 */}
|
|
{currentBar && (
|
|
<span className="slot-price" style={{ color: isUp ? 'var(--up)' : 'var(--down)' }}>
|
|
{formatPrice(currentBar.close)}
|
|
<span className="slot-change" style={{ color: isUp ? 'var(--up)' : 'var(--down)' }}>
|
|
{isUp ? '▲' : '▼'} {Math.abs(dailyChangePct).toFixed(2)}%
|
|
</span>
|
|
</span>
|
|
)}
|
|
|
|
{useUpbit && <WsBadge status={wsStatus} isUpbit={true} />}
|
|
{isLoading && <span className="slot-loading">로딩...</span>}
|
|
</div>
|
|
|
|
{/* ── TradingChart ─────────────────────────────────────────────────── */}
|
|
<div
|
|
ref={slotContainerRef}
|
|
className="slot-chart-wrap"
|
|
style={{ flex: 1, minHeight: 0, position: 'relative', overflow: 'hidden', display: 'flex', flexDirection: 'column' }}
|
|
>
|
|
{useUpbit && isLoading && (
|
|
<div className="chart-loading" style={{ position: 'absolute', zIndex: 10 }}>
|
|
<div className="loading-spinner" />
|
|
</div>
|
|
)}
|
|
{isLoadingMore && (
|
|
<div className="chart-history-loading">
|
|
<div className="loading-spinner" style={{ width: 14, height: 14 }} />
|
|
<span>과거 데이터 로딩...</span>
|
|
</div>
|
|
)}
|
|
|
|
<TradingChart
|
|
key={reloadTick}
|
|
bars={bars}
|
|
barsMarket={barsMarket}
|
|
market={symbol}
|
|
timeframe={timeframe}
|
|
displayTimezone={displayTimezone}
|
|
chartType={chartType}
|
|
theme={theme}
|
|
mode="chart"
|
|
indicators={effectiveIndicators}
|
|
drawingTool="cursor"
|
|
drawings={drawings}
|
|
logScale={false}
|
|
drawingsLocked={false}
|
|
drawingsVisible={true}
|
|
onCrosshair={data => {
|
|
setLegend(data);
|
|
if (data && onCrosshairTime) onCrosshairTime(data.time ?? 0);
|
|
}}
|
|
onManagerReady={mgr => {
|
|
managerRef.current = mgr;
|
|
const pending = pendingRealtimeBarRef.current;
|
|
if (pending && chartLiveReadyRef.current && barsMarketRef.current === symbolRef.current && bars.length > 0) {
|
|
pendingRealtimeBarRef.current = null;
|
|
const last = bars[bars.length - 1];
|
|
if (last && pending.time === last.time) mgr.updateBar(pending);
|
|
else if (!last || pending.time > last.time) void mgr.appendBar(pending);
|
|
else mgr.updateBar({ ...pending, time: last.time });
|
|
} else {
|
|
pendingRealtimeBarRef.current = null;
|
|
}
|
|
mgr.setSeriesPriceLabelsEnabled(chartSeriesPriceLabels);
|
|
mgr.setVolumeVisible(chartVolumeVisible);
|
|
// Time sync: 가시 시간 범위 변화 구독
|
|
mgr.subscribeVisibleTimeRange(r => {
|
|
if (!r || isSyncingTimeRef.current) return;
|
|
onVisibleRangeChangeRef.current?.(r);
|
|
});
|
|
// Date range sync: 가시 논리 범위 변화 구독
|
|
// + 왼쪽 스크롤 감지 → 과거 데이터 추가 로드
|
|
mgr.subscribeVisibleLogicalRange(r => {
|
|
if (!r) return;
|
|
if (!isSyncingLogicalRef.current) {
|
|
onLogicalRangeChangeRef.current?.(r);
|
|
}
|
|
// 가시 범위 왼쪽 끝이 LOAD_MORE_TRIGGER 이내이면 추가 로드
|
|
if (r.from < LOAD_MORE_TRIGGER) {
|
|
loadMoreRef.current();
|
|
}
|
|
});
|
|
}}
|
|
onCandlesReady={handleCandlesReady}
|
|
onDataLoaded={() => {
|
|
// reloadAll(setData + setInitialVisibleRange) 완료 후
|
|
// 첫 마운트 시 pending 상태였던 sync range 를 재적용한다
|
|
const mgr = managerRef.current;
|
|
if (!mgr) return;
|
|
if (pendingSyncVisibleRef.current) {
|
|
isSyncingTimeRef.current = true;
|
|
mgr.applyVisibleTimeRange(
|
|
pendingSyncVisibleRef.current.from,
|
|
pendingSyncVisibleRef.current.to,
|
|
);
|
|
requestAnimationFrame(() => { isSyncingTimeRef.current = false; });
|
|
pendingSyncVisibleRef.current = null;
|
|
}
|
|
if (pendingSyncLogicalRef.current) {
|
|
isSyncingLogicalRef.current = true;
|
|
mgr.applyVisibleLogicalRange(
|
|
pendingSyncLogicalRef.current.from,
|
|
pendingSyncLogicalRef.current.to,
|
|
);
|
|
requestAnimationFrame(() => { isSyncingLogicalRef.current = false; });
|
|
pendingSyncLogicalRef.current = null;
|
|
}
|
|
}}
|
|
magnifierEnabled={magnifierEnabled}
|
|
onMagnifierClose={onMagnifierClose}
|
|
onAddDrawing={() => {}}
|
|
onSeriesClick={(entryId, point) => {
|
|
if (!entryId) { setCtxToolbar(null); return; }
|
|
setCtxToolbar({ entryId, screenX: point.x, screenY: point.y });
|
|
}}
|
|
onSeriesDoubleClick={entryId => {
|
|
setCtxToolbar(null);
|
|
if (!entryId) return;
|
|
if (entryId === '__main__') setShowMainChartModal(true);
|
|
else setSettingsModalId(entryId);
|
|
}}
|
|
onHoverPaneLegend={() => {}}
|
|
onLeavePaneLegend={() => {}}
|
|
onTradeOrderRequest={req => onTradeOrderRequest?.(req, slotIndex)}
|
|
onReorderIndicators={handleReorderIndicators}
|
|
onMergeIndicators={handleMergeIndicators}
|
|
onSplitIndicatorPane={handleSplitIndicatorPane}
|
|
onExpandIndicator={handleExpandIndicator}
|
|
onRemoveIndicator={handleRemoveByIdSlot}
|
|
onDuplicateIndicator={handleDuplicateIndicator}
|
|
focusedIndicatorId={focusedIndicatorId}
|
|
onRestoreIndicators={handleRestoreIndicators}
|
|
onFullView={onFullView ? () => onFullView(symbolRef.current) : undefined}
|
|
/>
|
|
|
|
{/* 컨텍스트 툴바 */}
|
|
{ctxToolbar && (() => {
|
|
const cfg = ctxToolbar.entryId !== '__main__'
|
|
? indicators.find(i => i.id === ctxToolbar.entryId) ?? null
|
|
: null;
|
|
return (
|
|
<IndicatorContextToolbar
|
|
indicatorId={ctxToolbar.entryId}
|
|
config={cfg}
|
|
chartType={chartType}
|
|
screenX={ctxToolbar.screenX}
|
|
screenY={ctxToolbar.screenY}
|
|
onMouseEnterToolbar={() => {}}
|
|
onMouseLeaveToolbar={() => {}}
|
|
onSettings={() => {
|
|
const id = ctxToolbar.entryId;
|
|
setCtxToolbar(null);
|
|
if (id === '__main__') setShowMainChartModal(true);
|
|
else setSettingsModalId(id);
|
|
}}
|
|
onToggleHidden={() => handleToggleHidden(ctxToolbar.entryId)}
|
|
onRemove={() => handleRemoveById(ctxToolbar.entryId)}
|
|
onClose={() => setCtxToolbar(null)}
|
|
/>
|
|
);
|
|
})()}
|
|
|
|
{/* 메인 차트 설정 모달 */}
|
|
{showMainChartModal && (
|
|
<MainChartSettingsModal
|
|
style={mainChartStyle}
|
|
onSave={style => { setMainChartStyle(style); setShowMainChartModal(false); }}
|
|
onCancel={() => setShowMainChartModal(false)}
|
|
/>
|
|
)}
|
|
|
|
{/* 지표 설정 모달 */}
|
|
{settingsModalId && settingsModalId !== '__main__' && (() => {
|
|
const cfg = indicators.find(i => i.id === settingsModalId);
|
|
if (!cfg) return null;
|
|
const def = getIndicatorDef(cfg.type);
|
|
const mergedCfg = enrichIndicatorConfig({
|
|
...cfg,
|
|
params: getParams(cfg.type, def?.defaultParams),
|
|
hlines: cfg.hlines ?? def?.hlines,
|
|
});
|
|
return (
|
|
<IndicatorSettingsModal
|
|
config={mergedCfg}
|
|
chartMarket={symbol}
|
|
onSave={handleIndicatorSave}
|
|
onCancel={() => setSettingsModalId(null)}
|
|
/>
|
|
);
|
|
})()}
|
|
</div>
|
|
</div>
|
|
);
|
|
});
|
|
|
|
export default ChartSlot;
|