모든 캔들차트와 보조지표 사이 사이즈조절 가능
This commit is contained in:
@@ -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);
|
||||
}
|
||||
|
||||
/* 우측 세로 툴바 — 가격축 라벨 오른쪽 전용 영역 */
|
||||
|
||||
@@ -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}
|
||||
|
||||
Reference in New Issue
Block a user