알림목록 백테스팅 차트에서 이동평균선, 일목균형표, 볼린저 그래프 표시

frontend/src/components/tradeNotification/TradeSignalMiniChart.tsx

@@ -16,6 +16,9 @@ import type { ChartManager } from '../../utils/ChartManager';
 import { pinCandleWatch } from '../../utils/backendApi';
 import { timeframeToCandleType } from '../../utils/chartCandleType';
 import { DEFAULT_DISPLAY_TIMEZONE } from '../../utils/timezone';
+import { useIndicatorSettings } from '../../hooks/useIndicatorSettings';
+import { useSessionCandleOverlayControls } from '../../hooks/useSessionCandleOverlayControls';
+import { ensurePaperChartOverlays } from '../../utils/strategyToChartIndicators';
 
 interface Props {
   market: string;
@@ -40,6 +43,7 @@ const TradeSignalMiniChart: React.FC<Props> = ({
   fillHeight = false,
   onRealtimeActivity,
 }) => {
+  const { getParams, getVisualConfig } = useIndicatorSettings();
   const managerRef = useRef<ChartManager | null>(null);
   const canvasWrapRef = useRef<HTMLDivElement | null>(null);
   const [chartReloadTick, setChartReloadTick] = useState(0);
@@ -50,6 +54,18 @@ const TradeSignalMiniChart: React.FC<Props> = ({
   const marketRef = useRef(market);
   marketRef.current = market;
 
+  const baseIndicators = useMemo(
+    () => ensurePaperChartOverlays(indicators, getParams, getVisualConfig),
+    [indicators, getParams, getVisualConfig],
+  );
+
+  const {
+    indicators: chartIndicators,
+    candleOverlayToggles,
+    handleToggleCandleOverlay,
+    syncToManager,
+  } = useSessionCandleOverlayControls(managerRef, baseIndicators);
+
   const syncChartLayout = useCallback(() => {
     const wrap = canvasWrapRef.current;
     const mgr = managerRef.current;
@@ -191,7 +207,7 @@ const TradeSignalMiniChart: React.FC<Props> = ({
         </div>
       )}
       <TradingChart
-        key={`${market}-${timeframe}-${chartReloadTick}-${indicators.map(i => i.id).join(',')}`}
+        key={`${market}-${timeframe}-${chartReloadTick}-${chartIndicators.map(i => i.id).join(',')}`}
         chartVisible
         bars={bars}
         barsMarket={barsMarket}
@@ -200,14 +216,17 @@ const TradeSignalMiniChart: React.FC<Props> = ({
         chartType={'candlestick' as ChartType}
         theme={theme}
         mode={'chart' as ChartMode}
-        indicators={indicators}
+        indicators={chartIndicators}
         drawingTool="cursor"
         drawings={[] as Drawing[]}
         logScale={false}
         drawingsLocked
         drawingsVisible={false}
         onCrosshair={noop as (d: LegendData | null) => void}
-        onManagerReady={mgr => { managerRef.current = mgr; }}
+        onManagerReady={mgr => {
+          managerRef.current = mgr;
+          syncToManager(mgr);
+        }}
         onAddDrawing={noop as (d: Drawing) => void}
         onCandlesReady={handleCandlesReady}
         magnifierEnabled={false}
@@ -215,7 +234,12 @@ const TradeSignalMiniChart: React.FC<Props> = ({
         showHoverToolbar={false}
         seriesPriceLabelsEnabled={false}
         paneLayoutClamp
-        showPaneLegend={false}
+        showPaneLegend
+        showChartRightToolbar={false}
+        showCandleOverlayControls
+        candleOverlayToggles={candleOverlayToggles}
+        onToggleCandleOverlay={handleToggleCandleOverlay}
+        crosshairInfoVisible={false}
       />
     </div>
   );