obv 선 표시

frontend/src/utils/ChartManager.ts

@@ -76,7 +76,7 @@ import {
   isCustomPlotSelected,
 } from './chartCustomOverlay';
 import type { PlotDef, HLineStyle } from './indicatorRegistry';
-import { mapHistogramSeriesData, histogramBarColor } from './plotColorUtils';
+import { mapHistogramSeriesData, histogramBarColor, resolvePlotLineColor } from './plotColorUtils';
 import {
   applyPaneSeparatorToChartOptions,
   cloneChartPaneSeparatorOptions,
@@ -789,8 +789,9 @@ export class ChartManager {
               : config.plotVisibility?.[plotDef.id] !== false);
           const showPriceLabel = this.shouldShowSeriesPriceLabel(config, true, pane);
           const showSeriesTitle = pane < 2 && showPriceLabel;
+          const regPlot = def?.plots?.find(p => p.id === plotDef.id);
           series = this.chart.addSeries(LineSeries, {
-            color:            plotDef.color,
+            color:            resolvePlotLineColor(plotDef.color, regPlot?.color ?? plotDef.color ?? '#2962FF'),
             lineWidth:        Math.max(1, plotDef.lineWidth ?? 1) as 1 | 2 | 3 | 4,
             lineStyle:        plotSeriesLineStyle(plotDef.lineStyle),
             priceLineVisible: false,
@@ -2747,8 +2748,9 @@ export class ChartManager {
         opts['priceFormat'] = indicatorPriceFormat;
       }
       if (!entry.seriesMeta[i]?.isHistogram) {
-        opts['color'] = plot.color ?? '#aaa';
-        if (plot.lineWidth != null) opts['lineWidth'] = plot.lineWidth;
+        const regPlot = def?.plots?.find(p => p.id === pid);
+        opts['color'] = resolvePlotLineColor(plot.color, regPlot?.color ?? plot.color ?? '#aaa');
+        opts['lineWidth'] = Math.max(1, plot.lineWidth ?? regPlot?.lineWidth ?? 1);
         opts['lineStyle'] = plotSeriesLineStyle(plot.lineStyle);
         let plotAllows = true;
         if (entry.type === 'IchimokuCloud') {

frontend/src/utils/indicatorRegistry.ts

@@ -11,6 +11,7 @@ import {
   mergeIchimokuPlots,
   resolveIchimokuDisplacements,
 } from './ichimokuConfig';
+import { resolvePlotLineColor } from './plotColorUtils';
 import {
   normalizePsychologicalParams,
   resolvePsychologicalIndicatorType,
@@ -441,9 +442,21 @@ export function mergePlotDefs(saved: PlotDef[] | undefined, defaults: PlotDef[])
   });
 }
 
-/** OBV·CCI·RSI·TRIX — registry 신호선(plot1) 병합·표시 보장 (DB에 plot0만 저장된 경우 대비) */
+/** OBV·CCI·RSI·TRIX — 이중 plot 병합·표시 보장 */
 const SIGNAL_LINE_INDICATOR_TYPES = new Set(['OBV', 'CCI', 'RSI', 'TRIX']);
 
+function normalizeDualLinePlotDef(saved: PlotDef, reg: PlotDef): PlotDef {
+  return {
+    ...reg,
+    ...saved,
+    id: reg.id,
+    title: reg.title,
+    type: 'line',
+    lineWidth: Math.max(1, saved.lineWidth ?? reg.lineWidth ?? 1),
+    color: resolvePlotLineColor(saved.color, reg.color),
+  };
+}
+
 function normalizeSignalLineIndicatorPlots(
   type: string,
   plots: PlotDef[],
@@ -455,24 +468,27 @@ function normalizeSignalLineIndicatorPlots(
     return { plots, plotVisibility };
   }
   const merged = mergePlotDefs(plots, registryPlots);
+
+  if (type === 'OBV') {
+    const nextPlots = merged.map(p => {
+      const reg = registryPlots.find(r => r.id === p.id);
+      return reg ? normalizeDualLinePlotDef(p, reg) : p;
+    });
+    return {
+      plots: nextPlots,
+      plotVisibility: { ...plotVisibility, plot0: true, plot1: true },
+    };
+  }
+
   const regSignal = registryPlots.find(p => p.id === 'plot1');
   const nextPlots = regSignal
     ? merged.map(p => {
       if (p.id !== 'plot1') return p;
-      return {
-        ...regSignal,
-        ...p,
-        id: 'plot1',
-        title: regSignal.title,
-        type: 'line' as const,
-        lineWidth: Math.max(1, p.lineWidth ?? regSignal.lineWidth ?? 1),
-      };
+      return normalizeDualLinePlotDef(p, regSignal);
     })
     : merged;
   const nextVis = { ...plotVisibility };
-  if (type === 'OBV') {
-    nextVis.plot1 = true;
-  } else if ((type === 'CCI' || type === 'RSI') && params.maType === 'None') {
+  if ((type === 'CCI' || type === 'RSI') && params.maType === 'None') {
     nextVis.plot1 = false;
   } else if (nextVis.plot1 !== false) {
     nextVis.plot1 = true;

frontend/src/utils/plotColorUtils.ts

@@ -45,6 +45,15 @@ export function plotColorCss(value: string): string {
   return `rgba(${r},${g},${b},${(alpha / 100).toFixed(2)})`;
 }
 
+/** line 시리즈 색 — DB에 alpha 0·8자리 hex 저장 시 registry 기본색으로 복원 */
+export function resolvePlotLineColor(color: string | undefined, fallback: string): string {
+  const raw = (color ?? fallback).trim();
+  const fb = fallback.length >= 7 && fallback.startsWith('#') ? fallback.slice(0, 7) : '#2962FF';
+  const { alpha } = parsePlotColor(raw);
+  if (alpha < 10) return fb;
+  return plotColorCss(raw);
+}
+
 export const LINE_WIDTH_OPTIONS = [1, 2, 3, 4] as const;
 export const LINE_STYLE_OPTIONS: HLineStyle[] = ['solid', 'dashed', 'dotted'];