모든 캔들차트와 보조지표 사이 사이즈조절 가능

This commit is contained in:
Macbook
2026-06-22 01:32:47 +09:00
parent f5e5bbfdff
commit 23ccb89d2c
5 changed files with 7 additions and 9 deletions
+2 -2
View File
@@ -1172,13 +1172,13 @@ html.desktop-client .tmb-logo-version {
transform: translateY(-50%);
height: 2px;
border-radius: 1px;
background: transparent;
background: color-mix(in srgb, var(--border, rgba(100, 120, 180, 0.35)) 45%, transparent);
transition: background 0.15s ease;
}
.chart-pane-resize-handle:hover::after,
.chart-pane-resize-handle:active::after {
background: rgba(100, 120, 180, 0.55);
background: color-mix(in srgb, var(--accent, rgba(100, 120, 180, 0.55)) 55%, transparent);
}
/* 우측 세로 툴바 — 가격축 라벨 오른쪽 전용 영역 */
+5 -4
View File
@@ -153,7 +153,7 @@ interface TradingChartProps {
paneSeparatorOptions?: ChartPaneSeparatorOptions;
/** true: pane 합산 높이로 chart-container 를 키우지 않고 래퍼 높이에 맞춤 (미니 차트·알림 목록) */
paneLayoutClamp?: boolean;
/** paneLayoutClamp=true 환경에서도 캔들/보조지표 비율 드래그 핸들을 표시 (백테스팅 차트 등) */
/** false — 캔들·보조 pane 분리선 드래그 비활성 (기본 true, 보조 pane 있을 때 자동 표시) */
showPaneResizeHandle?: boolean;
/** 캔들+거래량 vs 보조 pane 높이 비율 (aux 0 이면 미적용) */
paneAreaRatio?: { candle: number; aux: number } | null;
@@ -231,7 +231,7 @@ const TradingChart: React.FC<TradingChartProps> = ({
chartVisible = true,
paneSeparatorOptions,
paneLayoutClamp = false,
showPaneResizeHandle = false,
showPaneResizeHandle = true,
paneAreaRatio = null,
showPaneLegend = true,
showChartRightToolbar,
@@ -1806,6 +1806,7 @@ const TradingChart: React.FC<TradingChartProps> = ({
&& chartPaintReady
&& (effectiveShowChartRightToolbar || showOverlayControlsOnly)
);
const allowPaneResize = showPaneResizeHandle && !auxIndicatorOnly;
return (
// wrapperRef: 스크롤 영역 (overflow-y: auto → App.css .tv-chart-wrap)
@@ -1829,8 +1830,8 @@ const TradingChart: React.FC<TradingChartProps> = ({
ref={containerRef}
className="chart-container"
/>
{/* 캔들 pane 하단 드래그 핸들 — 캔들/보조지표 높이 비율 조절 */}
{candlePaneBottomY != null && !candleOnlyMode && (!paneLayoutClamp || showPaneResizeHandle) && chartPaintReady && (
{/* 캔들 pane 하단 드래그 핸들 — 캔들/보조지표(·거래량) 높이 비율 조절 */}
{allowPaneResize && candlePaneBottomY != null && !candleOnlyMode && chartPaintReady && (
<div
className="chart-pane-resize-handle"
style={{ top: candlePaneBottomY }}
@@ -173,7 +173,6 @@ const SignalSnapshotChartPane: React.FC<SnapshotPaneProps> = ({
volumeVisible={false}
paneSeparatorOptions={appDefaults.chartPaneSeparator}
paneLayoutClamp
showPaneResizeHandle={!indicatorOnly && auxPaneCount > 0}
paneAreaRatio={paneAreaRatio}
showPaneLegend
crosshairInfoVisible
@@ -486,7 +486,6 @@ const BacktestAnalysisChart: React.FC<Props> = ({
volumeVisible={false}
paneSeparatorOptions={appDefaults.chartPaneSeparator}
paneLayoutClamp
showPaneResizeHandle={auxPaneCount > 0}
paneAreaRatio={paneAreaRatio}
showPaneLegend
crosshairInfoVisible
@@ -899,7 +899,6 @@ const StrategyEvaluationChart: React.FC<Props> = ({
volumeVisible={false}
paneSeparatorOptions={appDefaults.chartPaneSeparator}
paneLayoutClamp
showPaneResizeHandle={auxPaneCount > 0}
paneAreaRatio={paneAreaRatio}
showPaneLegend
crosshairInfoVisible={false}