aidev/goldenChart
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

실시간 차트 신고가,신저가 표시

Browse Source
This commit is contained in:
Macbook
2026-06-12 21:00:52 +09:00
parent d54dc6e2ff
commit 046bcc6379
15 changed files with 509 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/chart/ChartWorkspaceView.tsx
+12 -1
View File
@@ -138,6 +138,7 @@ export interface ChartWorkspaceViewProps {
chartCandleAreaPriceLabels: boolean;
chartSeriesPriceLabels: boolean;
chartVolumeVisible: boolean;
chartPriceExtremeLabelsVisible: boolean;
chartPaneSeparator: ChartPaneSeparatorOptions;
chartCrosshairInfoVisible: boolean;
chartHoverToolbarVisible: boolean;
@@ -291,6 +292,7 @@ export interface ChartWorkspaceViewProps {
handleExpandIndicator: (id: string) => void;
handleRestoreIndicators: () => void;
handleToggleCandleOverlay: (key: ChartOverlayToggleKey) => void;
handleTogglePriceExtremeLabels: () => void;
handleCustomOverlayActiveChange: (active: boolean) => void;
handleCustom1OverlayActiveChange: (active: boolean) => void;
handleSaveCustomOverlaySelection: (slot: ChartCustomOverlaySlotId, selection: ChartCustomOverlaySelection) => void;
@@ -325,7 +327,7 @@ function ChartWorkspaceViewInner(props: ChartWorkspaceViewProps) {
overlayVisibilityRef, candleOverlayToggles, customOverlaySelection,
custom1OverlaySelection, customOverlaySettingsSlot, customOverlayActive,
custom1OverlayActive, chartCandleAreaPriceLabels, chartSeriesPriceLabels,
chartVolumeVisible, chartPaneSeparator, chartCrosshairInfoVisible,
chartVolumeVisible, chartPriceExtremeLabelsVisible, chartPaneSeparator, chartCrosshairInfoVisible,
chartHoverToolbarVisible, chartLiveReceiveHighlight, chartRealtimeSource,
displayTimezone, chartTimeFormat, chartLegendOptions, useUpbit, wsStatus, bars, barsMarket,
barsMarketRef, chartMountKey, chartLiveReadyRef, pendingRealtimeBarRef,
@@ -363,6 +365,7 @@ function ChartWorkspaceViewInner(props: ChartWorkspaceViewProps) {
handleDuplicateIndicator, handleRemoveIndicatorById, handleScreenshot,
handleReorderIndicators, handleMergeIndicators, handleSplitIndicatorPane,
handleExpandIndicator, handleRestoreIndicators, handleToggleCandleOverlay,
handleTogglePriceExtremeLabels,
handleCustomOverlayActiveChange, handleCustom1OverlayActiveChange,
handleSaveCustomOverlaySelection, syncCustomOverlaysToManager,
handleCandlesReady, applyBacktestMarkersWhenReady, btRun, refreshPaperAccount,
@@ -505,6 +508,8 @@ function ChartWorkspaceViewInner(props: ChartWorkspaceViewProps) {
chartLiveQuote={liveQuote}
chartQuoteLoading={isLoading}
chartQuoteError={error}
priceExtremeLabelsVisible={chartPriceExtremeLabelsVisible}
onTogglePriceExtremeLabels={handleTogglePriceExtremeLabels}
/>
{isMobile && (showMarketPanel || mobileRightOpen) && (
@@ -616,6 +621,8 @@ function ChartWorkspaceViewInner(props: ChartWorkspaceViewProps) {
chartPaneSeparator={chartPaneSeparator}
chartCrosshairInfoVisible={chartCrosshairInfoVisible}
chartHoverToolbarVisible={chartHoverToolbarVisible}
chartPriceExtremeLabelsVisible={chartPriceExtremeLabelsVisible}
onTogglePriceExtremeLabels={handleTogglePriceExtremeLabels}
chartLiveReceiveHighlight={chartLiveReceiveHighlight}
chartRealtimeSource={chartRealtimeSource as 'BACKEND_STOMP' | 'UPBIT_DIRECT'}
displayTimezone={displayTimezone}
@@ -659,6 +666,7 @@ function ChartWorkspaceViewInner(props: ChartWorkspaceViewProps) {
chartPaneSeparator={chartPaneSeparator}
chartCrosshairInfoVisible={chartCrosshairInfoVisible}
chartHoverToolbarVisible={chartHoverToolbarVisible}
chartPriceExtremeLabelsVisible={chartPriceExtremeLabelsVisible}
chartLiveReceiveHighlight={chartLiveReceiveHighlight}
chartRealtimeSource={chartRealtimeSource as 'BACKEND_STOMP' | 'UPBIT_DIRECT'}
displayTimezone={displayTimezone}
@@ -723,6 +731,7 @@ function ChartWorkspaceViewInner(props: ChartWorkspaceViewProps) {
mgr.setIndicatorAreaPriceLabelsEnabled(chartSeriesPriceLabels);
const wrapper = document.querySelector('.chart-wrapper') as HTMLElement | null;
mgr.setVolumeVisible(chartVolumeVisible, wrapper?.clientHeight);
mgr.setPriceExtremeLabelsVisible(chartPriceExtremeLabelsVisible);
mgr.setPaneSeparatorOptions(chartPaneSeparator);
mgr.setDisplayTimezone(displayTimezone, timeframe, chartTimeFormat);
mgr.setChartOverlayVisibility(overlayVisibilityRef.current);
@@ -773,6 +782,8 @@ function ChartWorkspaceViewInner(props: ChartWorkspaceViewProps) {
paneSeparatorOptions={chartPaneSeparator}
candleOverlayToggles={candleOverlayToggles}
onToggleCandleOverlay={handleToggleCandleOverlay}
priceExtremeLabelsVisible={chartPriceExtremeLabelsVisible}
onTogglePriceExtremeLabels={handleTogglePriceExtremeLabels}
customOverlayActive={customOverlayActive}
onCustomOverlayActiveChange={handleCustomOverlayActiveChange}
onOpenCustomOverlaySettings={() => setCustomOverlaySettingsSlot('custom')}
frontend/src/chart/useChartWorkspace.ts
+25 -1
View File
@@ -54,6 +54,10 @@ import {
DEFAULT_CHART_OVERLAY_VISIBILITY,
listChartOverlayToggleItems,
} from '../utils/chartOverlayVisibility';
import {
loadChartPriceExtremeLabelsVisible,
saveChartPriceExtremeLabelsVisible,
} from '../utils/chartPriceExtremeLabelsPref';
import {
type ChartCustomOverlaySelection,
type ChartCustomOverlaySlotId,
@@ -1396,6 +1400,15 @@ export function useChartWorkspace({
[overlayVisibility],
);
const [chartPriceExtremeLabelsVisible, setChartPriceExtremeLabelsVisible] = useState(
() => loadChartPriceExtremeLabelsVisible(),
);
useEffect(() => {
managerRef.current?.setPriceExtremeLabelsVisible(chartPriceExtremeLabelsVisible);
slotRefs.current.forEach(slot => slot?.setPriceExtremeLabelsVisible(chartPriceExtremeLabelsVisible));
}, [chartPriceExtremeLabelsVisible]);
const [customOverlaySelection, setCustomOverlaySelection] = useState<ChartCustomOverlaySelection>(
() => createDefaultChartCustomOverlaySelection(),
);
@@ -1481,6 +1494,16 @@ export function useChartWorkspace({
});
}, []);
const handleTogglePriceExtremeLabels = useCallback(() => {
setChartPriceExtremeLabelsVisible(prev => {
const next = !prev;
saveChartPriceExtremeLabelsVisible(next);
managerRef.current?.setPriceExtremeLabelsVisible(next);
slotRefs.current.forEach(slot => slot?.setPriceExtremeLabelsVisible(next));
return next;
});
}, []);
/**
* 보조지표 순서 변경 (드래그 핸들): fromId 를 indicators 배열에서 이동.
* overlay/markers 지표는 건드리지 않고 비오버레이 지표 위치만 변경됨.
@@ -1908,7 +1931,7 @@ export function useChartWorkspace({
candleOverlayToggles, customOverlaySelection, custom1OverlaySelection,
activeCustomOverlaySlot, customOverlaySettingsSlot, customOverlayActive,
custom1OverlayActive, chartCandleAreaPriceLabels, chartSeriesPriceLabels,
chartVolumeVisible, chartPaneSeparator, chartCrosshairInfoVisible,
chartVolumeVisible, chartPriceExtremeLabelsVisible, chartPaneSeparator, chartCrosshairInfoVisible,
chartHoverToolbarVisible, chartLiveReceiveHighlight,
chartRealtimeSource: (chartRealtimeSource ?? 'BACKEND_STOMP') as 'BACKEND_STOMP' | 'UPBIT_DIRECT',
displayTimezone, chartTimeFormat, chartLegendOptions, useUpbit,
@@ -1948,6 +1971,7 @@ export function useChartWorkspace({
handleDuplicateIndicator, handleRemoveIndicatorById, handleScreenshot,
handleReorderIndicators, handleMergeIndicators, handleSplitIndicatorPane,
handleExpandIndicator, handleRestoreIndicators, handleToggleCandleOverlay,
handleTogglePriceExtremeLabels,
handleCustomOverlayActiveChange, handleCustom1OverlayActiveChange,
handleSaveCustomOverlaySelection, syncCustomOverlaysToManager,
handleCandlesReady, applyBacktestMarkersWhenReady, btRun, refreshPaperAccount,
frontend/src/components/ChartRightToolbar.tsx
+32 -3
View File
@@ -45,6 +45,9 @@ export interface ChartRightToolbarProps {
onOpenCustom1OverlaySettings?: () => void;
/** true — 캔들 pane 상단 오버레이 토글만 (미니 차트 등) */
overlayControlsOnly?: boolean;
/** 9·20일 신고가·신저가 라벨 표시 (실시간 차트) */
priceExtremeLabelsVisible?: boolean;
onTogglePriceExtremeLabels?: () => void;
}
const BTN_SIZE = 32;
@@ -150,6 +153,14 @@ const IconIchimoku = () => (
</svg>
);
/** 신고가(상향)·신저가(하향) */
const IconPriceExtreme = () => (
<svg width="14" height="14" viewBox="0 0 14 14" aria-hidden>
<path d="M7 1.5 L10.5 6 H3.5 Z" fill="#4dabf7"/>
<path d="M7 12.5 L3.5 8 H10.5 Z" fill="#ef5350"/>
</svg>
);
const OVERLAY_ICONS: Record<ChartOverlayToggleKey, React.ReactNode> = {
ma: <IconMa />,
bollinger: <IconBollinger />,
@@ -360,6 +371,8 @@ const ChartRightToolbar: React.FC<ChartRightToolbarProps> = ({
onExpand, onRestore, focusedId,
onDragStart, onToggleHidden, onSettings,
overlayControlsOnly = false,
priceExtremeLabelsVisible = false,
onTogglePriceExtremeLabels,
}) => {
const [paneLayouts, setPaneLayouts] = useState<Array<{ paneIndex: number; topY: number; height: number }>>([]);
const [paneItems, setPaneItems] = useState<ReturnType<typeof buildPaneItems>>([]);
@@ -418,9 +431,11 @@ const ChartRightToolbar: React.FC<ChartRightToolbarProps> = ({
const candlePane = paneLayouts.find(l => l.paneIndex === 0);
const showOverlayIcons = !!(candleOverlayToggles?.length && candlePane && onToggleCandleOverlay);
const showPriceExtremeBtn = !!(candlePane && onTogglePriceExtremeLabels);
const showOverlayCluster = showOverlayIcons || showPriceExtremeBtn;
if (paused || chartHeight <= 0) return null;
if (overlayControlsOnly && !showOverlayIcons) return null;
if (overlayControlsOnly && !showOverlayCluster) return null;
const innerHeight = paneLayouts.reduce(
(max, l) => Math.max(max, l.topY + l.height),
@@ -475,12 +490,12 @@ const ChartRightToolbar: React.FC<ChartRightToolbarProps> = ({
</div>
)}
{showOverlayIcons && (
{showOverlayCluster && (
<div
className="chart-right-toolbar-cluster chart-right-toolbar-cluster--overlay-icons"
style={{ top: candlePane!.topY + 4 }}
>
{candleOverlayToggles!.map((item, idx) => (
{candleOverlayToggles?.map((item, idx) => (
<button
key={item.key}
type="button"
@@ -495,6 +510,20 @@ const ChartRightToolbar: React.FC<ChartRightToolbarProps> = ({
{OVERLAY_ICONS[item.key]}
</button>
))}
{showPriceExtremeBtn && (
<button
type="button"
className={`tv-side-btn chart-right-toolbar-btn chart-right-toolbar-btn--overlay chart-right-toolbar-btn--price-extreme${priceExtremeLabelsVisible ? '' : ' chart-right-toolbar-btn--overlay-off'}`}
title={priceExtremeLabelsVisible ? '9·20일 신고가·신저가 숨기기' : '9·20일 신고가·신저가 표시'}
style={{ marginTop: (candleOverlayToggles?.length ?? 0) > 0 ? BTN_GAP : 0 }}
onClick={e => {
e.stopPropagation();
onTogglePriceExtremeLabels?.();
}}
>
<IconPriceExtreme />
</button>
)}
{showCustomBtn && (
<button
type="button"
frontend/src/components/ChartSlot.tsx
+17
View File
@@ -139,6 +139,8 @@ export interface ChartSlotHandle {
setIndicatorAreaPriceLabelsEnabled: (enabled: boolean) => void;
/** 거래량 pane on/off */
setVolumeVisible: (visible: boolean) => void;
/** 9·20일 신고가·신저가 표시 */
setPriceExtremeLabelsVisible: (visible: boolean) => void;
setPaneSeparatorOptions: (opts: ChartPaneSeparatorOptions) => void;
/** 차트 시간축·크로스헤어 날짜 형식 */
setChartTimeFormat: (format: string, timeframe?: Timeframe) => void;
@@ -210,6 +212,9 @@ export interface ChartSlotProps {
chartCrosshairInfoVisible?: boolean;
/** 차트 마우스오버 줌·이동 플로팅 툴바 */
chartHoverToolbarVisible?: boolean;
/** 9·20일 신고가·신저가 차트 표시 */
chartPriceExtremeLabelsVisible?: boolean;
onTogglePriceExtremeLabels?: () => void;
/** 업비트 실시간 티커 맵 (슬롯 심볼별 현재가·등락) */
marketTickers?: Map<string, TickerData>;
}
@@ -239,6 +244,8 @@ const ChartSlot = forwardRef<ChartSlotHandle, ChartSlotProps>(function ChartSlot
chartPaneSeparator,
chartCrosshairInfoVisible = true,
chartHoverToolbarVisible = true,
chartPriceExtremeLabelsVisible = false,
onTogglePriceExtremeLabels,
marketTickers,
}, ref) {
// ── 전역 지표 파라미터 + 시각 설정 (DB 동기화) ────────────────────────
@@ -364,6 +371,9 @@ const ChartSlot = forwardRef<ChartSlotHandle, ChartSlotProps>(function ChartSlot
setVolumeVisible: (visible: boolean) => {
managerRef.current?.setVolumeVisible(visible);
},
setPriceExtremeLabelsVisible: (visible: boolean) => {
managerRef.current?.setPriceExtremeLabelsVisible(visible);
},
setPaneSeparatorOptions: (opts: ChartPaneSeparatorOptions) => {
managerRef.current?.setPaneSeparatorOptions(opts);
managerRef.current?.refreshPaneSeparatorOverlay();
@@ -391,6 +401,10 @@ const ChartSlot = forwardRef<ChartSlotHandle, ChartSlotProps>(function ChartSlot
managerRef.current?.setVolumeVisible(chartVolumeVisible);
}, [chartVolumeVisible]);
useEffect(() => {
managerRef.current?.setPriceExtremeLabelsVisible(chartPriceExtremeLabelsVisible);
}, [chartPriceExtremeLabelsVisible]);
useEffect(() => {
if (!chartPaneSeparator) return;
managerRef.current?.setPaneSeparatorOptions(chartPaneSeparator);
@@ -1010,6 +1024,7 @@ const ChartSlot = forwardRef<ChartSlotHandle, ChartSlotProps>(function ChartSlot
mgr.setCandleAreaPriceLabelsEnabled(chartCandleAreaPriceLabels);
mgr.setIndicatorAreaPriceLabelsEnabled(chartSeriesPriceLabels);
mgr.setVolumeVisible(chartVolumeVisible);
mgr.setPriceExtremeLabelsVisible(chartPriceExtremeLabelsVisible ?? false);
if (chartPaneSeparator) mgr.setPaneSeparatorOptions(chartPaneSeparator);
mgr.setChartOverlayVisibility(overlayVisibilityRef.current);
syncCustomOverlaysToManager(mgr);
@@ -1099,6 +1114,8 @@ const ChartSlot = forwardRef<ChartSlotHandle, ChartSlotProps>(function ChartSlot
custom1OverlayActive={compactMode ? undefined : custom1OverlayActive}
onCustom1OverlayActiveChange={compactMode ? undefined : handleCustom1OverlayActiveChange}
onOpenCustom1OverlaySettings={compactMode ? undefined : () => setCustomOverlaySettingsSlot('custom1')}
priceExtremeLabelsVisible={chartPriceExtremeLabelsVisible}
onTogglePriceExtremeLabels={onTogglePriceExtremeLabels}
/>
{customOverlaySettingsSlot === 'custom' && !compactMode && (
frontend/src/components/StrategyEditorPage.tsx
+37 -9
View File
@@ -52,6 +52,10 @@ import {
loadPaletteItems,
type PaletteItem,
} from '../utils/strategyPaletteStorage';
import {
buildCompositePaletteTemplateRows,
buildSidewaysPaletteTemplateRows,
} from '../utils/strategyEditorTemplatePaletteRows';
import {
buildPriceExtremeBreakoutTree,
isPriceExtremeBreakoutPairPaletteValue,
@@ -1307,22 +1311,22 @@ export default function StrategyEditorPage({ theme, onNavigateToBacktest }: Prop
const templates = useMemo(() => getStrategyTemplates(DEF), [DEF]);
const templateRows = useMemo(() => {
const userRows = userTemplates.map(t => ({
const userRows: TemplatePaletteRow[] = userTemplates.map(t => ({
key: t.id,
source: 'user' as const,
source: 'user',
label: t.label,
description: t.description,
signal: t.signal,
user: t,
}));
const hidden = new Set(hiddenBuiltinTemplateIds);
const builtinRows = templates
const builtinRows: TemplatePaletteRow[] = templates
.filter(t => !hidden.has(getBuiltinTemplateId(t)))
.map(t => {
const builtinId = getBuiltinTemplateId(t);
return {
key: builtinId,
source: 'builtin' as const,
source: 'builtin',
label: t.label,
description: 'description' in t ? t.description : undefined,
signal: t.signal,
@@ -1330,19 +1334,26 @@ export default function StrategyEditorPage({ theme, onNavigateToBacktest }: Prop
builtin: t,
};
});
return [...userRows, ...builtinRows];
}, [userTemplates, templates, hiddenBuiltinTemplateIds]);
const compositeRows: TemplatePaletteRow[] = buildCompositePaletteTemplateRows(compositePalette, hidden);
const sidewaysRows: TemplatePaletteRow[] = buildSidewaysPaletteTemplateRows(sidewaysPalette, hidden);
return [...userRows, ...builtinRows, ...compositeRows, ...sidewaysRows];
}, [userTemplates, templates, hiddenBuiltinTemplateIds, compositePalette, sidewaysPalette]);
const filteredTemplateRows = useMemo(() => {
const q = templateSearch.trim().toLowerCase();
if (!q) return templateRows;
return templateRows.filter(row => {
const signalLabel = row.signal === 'buy' ? '매수' : '매도';
const badge = row.source === 'user' ? '내 템플릿'
: row.source === 'composite-palette' ? '복합지표'
: row.source === 'sideways-palette' ? '횡보지표'
: '';
return (
row.label.toLowerCase().includes(q)
|| row.description?.toLowerCase().includes(q)
|| signalLabel.includes(q)
|| row.signal.includes(q)
|| badge.includes(q)
);
});
}, [templateRows, templateSearch]);
@@ -1468,14 +1479,31 @@ export default function StrategyEditorPage({ theme, onNavigateToBacktest }: Prop
handleDeleteUserTemplate(row.user.id, row.label);
} else if (row.source === 'builtin' && row.builtinId) {
handleDeleteBuiltinTemplate(row.builtinId, row.label);
} else if (row.source === 'composite-palette' || row.source === 'sideways-palette') {
handleDeleteBuiltinTemplate(row.key, row.label);
}
setSelectedTemplateKey(null);
}, [selectedTemplateKey, templateRows, handleDeleteUserTemplate, handleDeleteBuiltinTemplate]);
const handleTemplateApply = useCallback((row: TemplatePaletteRow) => {
if (row.source === 'user' && row.user) applyUserTemplate(row.user);
else if (row.builtin) handleTemplate(row.builtin);
}, [applyUserTemplate, handleTemplate]);
if (row.source === 'user' && row.user) {
applyUserTemplate(row.user);
return;
}
if (row.source === 'builtin' && row.builtin) {
handleTemplate(row.builtin);
return;
}
if (row.source === 'composite-palette' && row.paletteItem) {
applyPaletteItem(row.paletteItem);
showSnack(`"${row.label}" 조건이 추가됐습니다`);
return;
}
if (row.source === 'sideways-palette' && row.sidewaysFilterId) {
applySidewaysFilter(row.sidewaysFilterId);
showSnack(`"${row.label}" 필터가 추가됐습니다`);
}
}, [applyUserTemplate, handleTemplate, applyPaletteItem, applySidewaysFilter]);
const handleTemplateSaveConfirm = useCallback(() => {
const label = templateSaveLabel.trim();
frontend/src/components/Toolbar.tsx
+22
View File
@@ -143,6 +143,9 @@ export interface ToolbarProps {
chartLiveQuote?: ChartLiveQuote | null;
chartQuoteLoading?: boolean;
chartQuoteError?: string | null;
/** 9·20일 신고가·신저가 차트 표시 (실시간 차트 상단 툴바) */
priceExtremeLabelsVisible?: boolean;
onTogglePriceExtremeLabels?: () => void;
}
// ─── SVG 아이콘 ────────────────────────────────────────────────────────────
@@ -240,6 +243,12 @@ const IcTradeSignal = () => (
<path d="M8.5 1.5 L4 8.5 H7.5 L6 13.5 L11 6 H7.5 Z" fill="currentColor" stroke="none" opacity="0.85"/>
</svg>
);
const IcPriceExtreme = () => (
<svg width="14" height="14" viewBox="0 0 14 14" aria-hidden>
<path d="M7 1.5 L10.5 6 H3.5 Z" fill="#4dabf7"/>
<path d="M7 12.5 L3.5 8 H10.5 Z" fill="#ef5350"/>
</svg>
);
const IcGridIcon = () => (
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" stroke="currentColor" strokeWidth="1.3">
<rect x="1" y="1" width="13" height="13" rx="1"/>
@@ -826,6 +835,8 @@ const Toolbar: React.FC<ToolbarProps> = ({
chartLiveQuote = null,
chartQuoteLoading = false,
chartQuoteError = null,
priceExtremeLabelsVisible = false,
onTogglePriceExtremeLabels,
}) => {
const [showMarket, setShowMarket] = React.useState(false);
const [showTfMenu, setShowTfMenu] = React.useState(false);
@@ -1097,6 +1108,17 @@ const Toolbar: React.FC<ToolbarProps> = ({
<IcFibAuto />
</button>
{/* 9·20일 신고가·신저가 표시 */}
{onTogglePriceExtremeLabels && (
<button
className={`tv-icon-btn${priceExtremeLabelsVisible ? ' active' : ''}`}
onClick={onTogglePriceExtremeLabels}
title={priceExtremeLabelsVisible ? '9·20일 신고가·신저가 숨기기' : '9·20일 신고가·신저가 표시'}
>
<IcPriceExtreme />
</button>
)}
{/* 그리드 토글 */}
<button
className={`tv-icon-btn${showGrid ? ' active' : ''}`}
frontend/src/components/TradeSignalLabelOverlay.tsx
+37 -12
View File
@@ -1,4 +1,5 @@
import React, { useCallback, useEffect, useRef } from 'react';
import React, { useCallback, useEffect, useRef, useState } from 'react';
import { createPortal } from 'react-dom';
import type { ChartManager } from '../utils/ChartManager';
import {
layoutStackedSignalLabels,
@@ -95,6 +96,18 @@ function renderTradeSignalLabels(
const TradeSignalLabelOverlay: React.FC<Props> = ({ manager }) => {
const canvasRef = useRef<HTMLCanvasElement>(null);
const [portalTarget, setPortalTarget] = useState<HTMLElement | null>(null);
const redrawRafRef = useRef(0);
useEffect(() => {
const container = manager.getContainer();
if (container) {
setPortalTarget(container);
return;
}
const tid = window.setTimeout(() => setPortalTarget(manager.getContainer()), 100);
return () => clearTimeout(tid);
}, [manager]);
const redraw = useCallback(() => {
const canvas = canvasRef.current;
@@ -120,11 +133,18 @@ const TradeSignalLabelOverlay: React.FC<Props> = ({ manager }) => {
}, [manager]);
useEffect(() => {
if (!portalTarget) return;
redraw();
let layoutRaf = 0;
/** 패닝·스크롤 중 매 이벤트 즉시 + 다음 프레임 보정 (cancelAnimationFrame 미사용) */
const scheduleRedraw = () => {
cancelAnimationFrame(layoutRaf);
layoutRaf = requestAnimationFrame(redraw);
redraw();
if (redrawRafRef.current) return;
redrawRafRef.current = requestAnimationFrame(() => {
redrawRafRef.current = 0;
redraw();
});
};
const unsubs = [
@@ -137,19 +157,23 @@ const TradeSignalLabelOverlay: React.FC<Props> = ({ manager }) => {
const ro = new ResizeObserver(scheduleRedraw);
if (container) ro.observe(container);
const raf1 = requestAnimationFrame(redraw);
const raf2 = requestAnimationFrame(() => requestAnimationFrame(redraw));
const scrollWrap = container?.closest('.tv-chart-wrap') as HTMLElement | null;
scrollWrap?.addEventListener('scroll', scheduleRedraw, { passive: true });
return () => {
unsubs.forEach(u => u());
ro.disconnect();
cancelAnimationFrame(layoutRaf);
cancelAnimationFrame(raf1);
cancelAnimationFrame(raf2);
scrollWrap?.removeEventListener('scroll', scheduleRedraw);
if (redrawRafRef.current) {
cancelAnimationFrame(redrawRafRef.current);
redrawRafRef.current = 0;
}
};
}, [manager, redraw]);
}, [manager, portalTarget, redraw]);
return (
if (!portalTarget) return null;
return createPortal(
<canvas
ref={canvasRef}
className="trade-signal-label-overlay"
@@ -160,7 +184,8 @@ const TradeSignalLabelOverlay: React.FC<Props> = ({ manager }) => {
pointerEvents: 'none',
zIndex: 8,
}}
/>
/>,
portalTarget,
);
};
frontend/src/components/TradingChart.tsx
+8
View File
@@ -180,6 +180,9 @@ interface TradingChartProps {
custom1OverlayActive?: boolean;
onCustom1OverlayActiveChange?: (active: boolean) => void;
onOpenCustom1OverlaySettings?: () => void;
/** 9·20일 신고가·신저가 라벨 표시 (실시간 차트 우측 툴바) */
priceExtremeLabelsVisible?: boolean;
onTogglePriceExtremeLabels?: () => void;
/** 미니 차트 — plot 너비에 맞는 초기 x축 캔들 수 (미지정 시 DISPLAY_COUNT) */
resolveInitialDisplayCount?: (plotWidth: number) => number;
/** true — reload·layout 복구 타이머의 반복 viewport 재조정 생략 (미니 카드 깜빡임 방지) */
@@ -243,6 +246,8 @@ const TradingChart: React.FC<TradingChartProps> = ({
custom1OverlayActive,
onCustom1OverlayActiveChange,
onOpenCustom1OverlaySettings,
priceExtremeLabelsVisible,
onTogglePriceExtremeLabels,
resolveInitialDisplayCount,
skipViewportRecovery = false,
auxIndicatorOnly = false,
@@ -1161,6 +1166,7 @@ const TradingChart: React.FC<TradingChartProps> = ({
managerRef.current?.panByPixelDelta(dx, dy, {
allowVerticalPan: allowVertical,
});
managerRef.current?.notifyViewportChanged();
};
const onPanPointerUp = (e: PointerEvent) => {
@@ -1827,6 +1833,8 @@ const TradingChart: React.FC<TradingChartProps> = ({
custom1OverlayActive={custom1OverlayActive}
onCustom1OverlayActiveChange={onCustom1OverlayActiveChange}
onOpenCustom1OverlaySettings={onOpenCustom1OverlaySettings}
priceExtremeLabelsVisible={priceExtremeLabelsVisible}
onTogglePriceExtremeLabels={onTogglePriceExtremeLabels}
onSplit={onSplitIndicatorPane}
onRemove={onRemoveIndicator}
onDuplicate={onDuplicateIndicator}
frontend/src/components/strategyEditor/TemplatePaletteTab.tsx
+20 -4
View File
@@ -1,16 +1,25 @@
import React from 'react';
import type { StrategyTemplateDef } from '../../utils/strategyPresets';
import type { UserStrategyTemplate } from '../../utils/strategyTemplateStorage';
import type { PaletteItem } from '../../utils/strategyPaletteStorage';
import {
templateBadgeForSource,
type TemplatePaletteSource,
} from '../../utils/strategyEditorTemplatePaletteRows';
export type { TemplatePaletteSource };
export type TemplatePaletteRow = {
key: string;
source: 'user' | 'builtin';
source: TemplatePaletteSource;
label: string;
description?: string;
signal: 'buy' | 'sell';
user?: UserStrategyTemplate;
builtinId?: string;
builtin?: StrategyTemplateDef;
paletteItem?: PaletteItem;
sidewaysFilterId?: string;
};
interface Props {
@@ -91,7 +100,9 @@ export default function TemplatePaletteTab({
{rows.length === 0 ? (
<div className="se-template-empty">검색 결과가 없습니다</div>
) : (
rows.map(row => (
rows.map(row => {
const sourceBadge = templateBadgeForSource(row.source);
return (
<div
key={row.key}
className={`se-template-row${selectedKey === row.key ? ' se-template-row--selected' : ''}`}
@@ -108,7 +119,11 @@ export default function TemplatePaletteTab({
>
<div className="se-template-item">
<span className="se-template-label">
{row.source === 'user' && <span className="se-template-user-badge">내 템플릿</span>}
{sourceBadge && (
<span className={`se-template-source-badge se-template-source-badge--${row.source}`}>
{sourceBadge}
</span>
)}
{row.label}
</span>
{row.description && (
@@ -119,7 +134,8 @@ export default function TemplatePaletteTab({
</span>
</div>
</div>
))
);
})
)}
</div>
</div>
frontend/src/components/strategyEvaluation/StrategyEvaluationChart.tsx
+1
View File
@@ -481,6 +481,7 @@ const StrategyEvaluationChart: React.FC<Props> = ({
crosshairInfoVisible={false}
showHoverToolbar={false}
showChartRightToolbar={false}
showCandlePaneControls={false}
/>
{chartMgr && (
<StrategyEvaluationBarSelector
frontend/src/styles/strategyEditor.css
+16 -1
View File
@@ -2296,15 +2296,30 @@
gap: 6px;
min-width: 0;
}
.se-template-user-badge {
.se-template-user-badge,
.se-template-source-badge {
flex-shrink: 0;
font-size: 0.58rem;
font-weight: 700;
padding: 2px 5px;
border-radius: 4px;
}
.se-template-user-badge,
.se-template-source-badge--user {
color: var(--se-gold);
background: color-mix(in srgb, var(--se-gold) 14%, transparent);
}
.se-template-source-badge--composite-palette {
color: #82b1ff;
background: color-mix(in srgb, #82b1ff 14%, transparent);
}
.se-template-source-badge--sideways-palette {
color: #ffb74d;
background: color-mix(in srgb, #ffb74d 14%, transparent);
}
.se-template-save-hint {
margin: 0 0 8px;
font-size: 0.76rem;
frontend/src/utils/ChartManager.ts
+92 -8
View File
@@ -33,6 +33,7 @@ import {
type TradeSignalLabelItem,
type TradeSignalMarkerWithPrice,
} from './tradeSignalLabels';
import { computePriceExtremeChartMarkers } from './priceExtremeChartEvents';
import {
DEFAULT_CHART_TIME_FORMAT,
formatLwcTimeWithPattern,
@@ -274,6 +275,9 @@ export class ChartManager {
private backtestMarkers: TradeSignalMarkerWithPrice[] = [];
/** 실시간 전략 체크 마커 */
private liveStrategyMarkers: TradeSignalMarkerWithPrice[] = [];
/** 9·20일 신고가·신저가 마커 */
private priceExtremeMarkers: TradeSignalMarkerWithPrice[] = [];
private _priceExtremeLabelsVisible = false;
private _tradeSignalLabelListeners = new Set<() => void>();
private compareSeriesMap = new Map<string, ISeriesApi<SeriesType>>();
/** 캔들 pane 오버레이 그룹 표시 (config.hidden 과 별도 — in-place 토글용) */
@@ -515,7 +519,7 @@ export class ChartManager {
panesInit[0].setStretchFactor(1);
}
this._reapplyAllPatternMarkers();
this._refreshPriceExtremeMarkers();
// 종목 전환·초기 로드 — bar 수가 적을 때 음수 logical from 은 캔들이 우측으로 몰림
if (this._auxIndicatorOnlyLayout && bars.length <= 21) {
@@ -550,7 +554,7 @@ export class ChartManager {
} else {
ts.fitContent();
}
this._notifyViewport();
this._scheduleNotifyViewport();
return;
}
@@ -563,7 +567,7 @@ export class ChartManager {
from: bars[startIdx].time as Time,
to: to as Time,
});
this._notifyViewport();
this._scheduleNotifyViewport();
}
private _createMainSeries(chartType: ChartType, t: ThemeTokens): ISeriesApi<SeriesType> {
@@ -1777,7 +1781,14 @@ export class ChartManager {
color: m.color,
text: '',
}));
const all = [...patternAll, ...backtestAll, ...liveAll];
const priceExtremeAll = this.priceExtremeMarkers.map(m => ({
time: m.time as Time,
position: m.position,
shape: m.shape,
color: m.color,
text: '',
}));
const all = [...patternAll, ...backtestAll, ...liveAll, ...priceExtremeAll];
if (this.mainMarkersPlugin) {
try {
if (this.mainMarkersPlugin.getSeries() !== this.mainSeries) {
@@ -1876,9 +1887,50 @@ export class ChartManager {
return [
...this.backtestMarkers.map(toTradeSignalLabelItem),
...this.liveStrategyMarkers.map(toTradeSignalLabelItem),
...this.priceExtremeMarkers.map(toTradeSignalLabelItem),
];
}
/** rawBars 기준 9·20일 신고가·신저가 마커·라벨 재계산 */
private _refreshPriceExtremeMarkers(): void {
if (!this._priceExtremeLabelsVisible) {
if (this.priceExtremeMarkers.length === 0) return;
this.priceExtremeMarkers = [];
this._reapplyAllPatternMarkers();
this._notifyTradeSignalLabels();
return;
}
const next = computePriceExtremeChartMarkers(this.rawBars);
if (this._samePriceExtremeMarkers(next, this.priceExtremeMarkers)) return;
this.priceExtremeMarkers = next;
this._reapplyAllPatternMarkers();
this._notifyTradeSignalLabels();
}
/** 실시간 차트 — 9·20일 신고가·신저가 라벨·마커 표시 */
setPriceExtremeLabelsVisible(visible: boolean): void {
if (this._priceExtremeLabelsVisible === visible) return;
this._priceExtremeLabelsVisible = visible;
this._refreshPriceExtremeMarkers();
}
isPriceExtremeLabelsVisible(): boolean {
return this._priceExtremeLabelsVisible;
}
private _samePriceExtremeMarkers(
a: TradeSignalMarkerWithPrice[],
b: TradeSignalMarkerWithPrice[],
): boolean {
if (a.length !== b.length) return false;
for (let i = 0; i < a.length; i++) {
if (a[i].time !== b[i].time || a[i].text !== b[i].text || a[i].position !== b[i].position) {
return false;
}
}
return true;
}
subscribeTradeSignalLabels(cb: () => void): () => void {
this._tradeSignalLabelListeners.add(cb);
return () => { this._tradeSignalLabelListeners.delete(cb); };
@@ -2281,6 +2333,7 @@ export class ChartManager {
// 4) 보조지표 마지막 포인트 스로틀 갱신
this._scheduleIndicatorLastUpdate();
this._refreshPriceExtremeMarkers();
}
/**
@@ -2621,6 +2674,7 @@ export class ChartManager {
if (this._pendingIndUpdate) {
this._scheduleIndicatorLastUpdate();
}
this._refreshPriceExtremeMarkers();
}
/**
@@ -2652,6 +2706,7 @@ export class ChartManager {
if (!this._indicatorLoadStale(loadGen)) {
this._finalizeIndicatorPaneLayout();
}
this._refreshPriceExtremeMarkers();
}
// ─── Alerts ──────────────────────────────────────────────────────────────
@@ -2896,7 +2951,11 @@ export class ChartManager {
/** 가시 시간 범위 변경 알림 (커스텀 패닝·줌 등 LWC 이벤트 미발생 경로 포함) */
private readonly _viewportListeners = new Set<() => void>();
private _viewportLwcHooked = false;
private readonly _lwcViewportHandler = (): void => { this._notifyViewport(); };
private _viewportNotifyQueued = false;
private readonly _lwcViewportHandler = (): void => {
this._notifyViewport();
this._scheduleNotifyViewport();
};
private _notifyViewport(): void {
for (const cb of this._viewportListeners) {
@@ -2904,6 +2963,18 @@ export class ChartManager {
}
}
/** LWC timeScale·좌표 변환 반영 후 오버레이 재그리기 (연속 패닝 중 cancel 로 redraw 누락 방지) */
private _scheduleNotifyViewport(): void {
if (this._viewportNotifyQueued) return;
this._viewportNotifyQueued = true;
requestAnimationFrame(() => {
requestAnimationFrame(() => {
this._viewportNotifyQueued = false;
this._notifyViewport();
});
});
}
private _hookViewportLwc(): void {
if (this._viewportLwcHooked) return;
this._viewportLwcHooked = true;
@@ -2923,6 +2994,7 @@ export class ChartManager {
try {
this.chart.timeScale().setVisibleLogicalRange(range);
this._notifyViewport();
this._scheduleNotifyViewport();
} catch { /* 데이터 로드 전 */ }
}
@@ -2931,9 +3003,10 @@ export class ChartManager {
this._notifyPaneLayout();
}
/** 시간축 오버레이 등 — 뷰포트 동기화 강제 (패닝 종료 시 등) */
/** 시간축 오버레이 등 — 뷰포트 동기화 강제 (패닝·스크롤 중) */
notifyViewportChanged(): void {
this._notifyViewport();
this._scheduleNotifyViewport();
}
/** visible logical range → 플롯 X (LWC 좌표 API와 동일한 선형 매핑) */
@@ -3590,7 +3663,10 @@ export class ChartManager {
}
// ─── Layout ───────────────────────────────────────────────────────────────
fitContent(): void { this.chart.timeScale().fitContent(); }
fitContent(): void {
this.chart.timeScale().fitContent();
this._scheduleNotifyViewport();
}
/** 시간축 확대 (visible logical range 20% 축소) */
zoomIn(): void {
@@ -4167,6 +4243,8 @@ export class ChartManager {
this._mainPriceVisibleRange = next;
try {
ps.setVisibleRange(next);
this._notifyViewport();
this._scheduleNotifyViewport();
} catch { /* 범위 미설정 등 */ }
}
@@ -4223,6 +4301,7 @@ export class ChartManager {
try {
this.chart.timeScale().setVisibleRange({ from: from as Time, to: to as Time });
this._notifyViewport();
this._scheduleNotifyViewport();
} catch { /* 데이터 로딩 전 호출 무시 */ }
}
@@ -4262,7 +4341,10 @@ export class ChartManager {
* 사용자가 과거 데이터를 탐색하다가 최신 캔들로 즉시 이동할 때 호출
* (ref: https://tradingview.github.io/lightweight-charts/tutorials/demos/realtime-updates)
*/
scrollToRealTime(): void { this.chart.timeScale().scrollToRealTime(); }
scrollToRealTime(): void {
this.chart.timeScale().scrollToRealTime();
this._scheduleNotifyViewport();
}
/** 줌 툴: 두 X 픽셀 위치(canvas 내부)를 시간 범위로 변환하여 확대 */
zoomToXRange(x0: number, x1: number): void {
@@ -4272,6 +4354,7 @@ export class ChartManager {
try {
this.chart.timeScale().setVisibleRange({ from: t0 as import('lightweight-charts').Time, to: t1 as import('lightweight-charts').Time });
this._notifyViewport();
this._scheduleNotifyViewport();
} catch { /* ok */ }
}
@@ -4430,6 +4513,7 @@ export class ChartManager {
// 보조지표 전체 재계산 (새 데이터가 왼쪽에 추가됐으므로 전체 갱신 필요)
await this._refreshAllIndicatorsData();
this._refreshPriceExtremeMarkers();
return newBars.length;
}
frontend/src/utils/chartPriceExtremeLabelsPref.ts
+16
View File
@@ -0,0 +1,16 @@
const STORAGE_KEY = 'gc_chartPriceExtremeLabels';
/** 실시간 차트 — 9·20일 신고가·신저가 라벨 표시 (기본 off) */
export function loadChartPriceExtremeLabelsVisible(): boolean {
try {
return localStorage.getItem(STORAGE_KEY) === '1';
} catch {
return false;
}
}
export function saveChartPriceExtremeLabelsVisible(visible: boolean): void {
try {
localStorage.setItem(STORAGE_KEY, visible ? '1' : '0');
} catch { /* ok */ }
}
frontend/src/utils/priceExtremeChartEvents.ts
+83
View File
@@ -0,0 +1,83 @@
import type { OHLCVBar } from '../types';
import { formatUpbitKrwPrice } from './safeFormat';
import { TRADE_BUY_COLOR, TRADE_SELL_COLOR } from './tradeSignalColors';
import type { TradeSignalMarkerWithPrice } from './tradeSignalLabels';
const CHART_PERIODS = [9, 20] as const;
/** 직전 N봉 고가 중 최고값 (현재 봉 제외) — index t 에서 max(high[t-N]..high[t-1]) */
export function priorHighestHigh(bars: OHLCVBar[], index: number, period: number): number | null {
if (index < period) return null;
let max = -Infinity;
for (let j = index - period; j < index; j++) {
max = Math.max(max, bars[j].high);
}
return max === -Infinity ? null : max;
}
/** 직전 N봉 저가 중 최저값 (현재 봉 제외) */
export function priorLowestLow(bars: OHLCVBar[], index: number, period: number): number | null {
if (index < period) return null;
let min = Infinity;
for (let j = index - period; j < index; j++) {
min = Math.min(min, bars[j].low);
}
return min === Infinity ? null : min;
}
/** 종가가 직전 N봉 최고가선을 상향 돌파(CROSS_UP) */
export function isNewHighCrossUp(bars: OHLCVBar[], index: number, period: number): boolean {
const thresh = priorHighestHigh(bars, index, period);
if (thresh == null) return false;
const close = bars[index].close;
if (close <= thresh) return false;
if (index === 0) return true;
const prevThresh = priorHighestHigh(bars, index - 1, period);
const prevClose = bars[index - 1].close;
if (prevThresh == null) return true;
return prevClose <= prevThresh;
}
/** 종가가 직전 N봉 최저가선을 하향 이탈(CROSS_DOWN) */
export function isNewLowCrossDown(bars: OHLCVBar[], index: number, period: number): boolean {
const thresh = priorLowestLow(bars, index, period);
if (thresh == null) return false;
const close = bars[index].close;
if (close >= thresh) return false;
if (index === 0) return true;
const prevThresh = priorLowestLow(bars, index - 1, period);
const prevClose = bars[index - 1].close;
if (prevThresh == null) return true;
return prevClose >= prevThresh;
}
/** 실시간·백테스트 차트 — 9·20일 신고가·신저가 마커·라벨 */
export function computePriceExtremeChartMarkers(bars: OHLCVBar[]): TradeSignalMarkerWithPrice[] {
const out: TradeSignalMarkerWithPrice[] = [];
for (let i = 0; i < bars.length; i++) {
const bar = bars[i];
for (const period of CHART_PERIODS) {
if (isNewHighCrossUp(bars, i, period)) {
out.push({
time: bar.time,
position: 'aboveBar',
shape: 'arrowDown',
color: TRADE_SELL_COLOR,
text: `${period}일 신고가 : ${formatUpbitKrwPrice(bar.close)}`,
price: bar.close,
});
}
if (isNewLowCrossDown(bars, i, period)) {
out.push({
time: bar.time,
position: 'belowBar',
shape: 'arrowUp',
color: TRADE_BUY_COLOR,
text: `${period}일 신저가 : ${formatUpbitKrwPrice(bar.close)}`,
price: bar.close,
});
}
}
}
return out;
}
frontend/src/utils/strategyEditorTemplatePaletteRows.ts
+91
View File
@@ -0,0 +1,91 @@
/**
* 전략편집기 — 복합지표·횡보 팔레트 → 템플릿 목록 행
*/
import type { PaletteItem } from './strategyPaletteStorage';
import type { SidewaysFilterPaletteEntry } from './sidewaysFilterPaletteStorage';
import {
isInflection33BuyPaletteValue,
isInflection33SellPaletteValue,
} from './inflection33Strategy';
import {
isNewHigh920BuyPaletteValue,
isNewLow920SellPaletteValue,
} from './priceExtremeBreakoutPair';
import { STABLE_STRATEGY_PALETTE_ITEMS } from './stableStrategyPairs';
export type TemplatePaletteSource =
| 'user'
| 'builtin'
| 'composite-palette'
| 'sideways-palette';
export type TemplatePaletteBadge = '내 템플릿' | '복합지표' | '횡보지표';
export interface PaletteTemplateRow {
key: string;
source: 'composite-palette' | 'sideways-palette';
label: string;
description?: string;
signal: 'buy' | 'sell';
badge: TemplatePaletteBadge;
paletteItem?: PaletteItem;
sidewaysFilterId?: string;
}
export function templateBadgeForSource(source: TemplatePaletteSource): TemplatePaletteBadge | null {
switch (source) {
case 'user': return '내 템플릿';
case 'composite-palette': return '복합지표';
case 'sideways-palette': return '횡보지표';
default: return null;
}
}
export function inferCompositePaletteSignal(item: PaletteItem): 'buy' | 'sell' {
if (isNewHigh920BuyPaletteValue(item.value) || isInflection33BuyPaletteValue(item.value)) {
return 'buy';
}
if (isNewLow920SellPaletteValue(item.value) || isInflection33SellPaletteValue(item.value)) {
return 'sell';
}
const stable = STABLE_STRATEGY_PALETTE_ITEMS.find(s => s.value === item.value);
if (stable) return stable.mode;
if (item.value.endsWith('_BUY')) return 'buy';
if (item.value.endsWith('_SELL')) return 'sell';
return 'buy';
}
export function buildCompositePaletteTemplateRows(
items: PaletteItem[],
hiddenIds: ReadonlySet<string>,
): PaletteTemplateRow[] {
return items
.filter(item => item.kind === 'composite')
.filter(item => !hiddenIds.has(`composite-palette:${item.id}`))
.map(item => ({
key: `composite-palette:${item.id}`,
source: 'composite-palette' as const,
label: item.label,
description: item.desc,
signal: inferCompositePaletteSignal(item),
badge: '복합지표' as const,
paletteItem: item,
}));
}
export function buildSidewaysPaletteTemplateRows(
items: SidewaysFilterPaletteEntry[],
hiddenIds: ReadonlySet<string>,
): PaletteTemplateRow[] {
return items
.filter(item => !hiddenIds.has(`sideways-palette:${item.id}`))
.map(item => ({
key: `sideways-palette:${item.id}`,
source: 'sideways-palette' as const,
label: item.label,
description: item.desc,
signal: item.mode === 'exclude' ? 'sell' : 'buy',
badge: '횡보지표' as const,
sidewaysFilterId: item.id,
}));
}