feat: instrument analysis

frontend/src/components/InstrumentChart.tsx

@@ -25,10 +25,11 @@ interface ChartEvent {
 }
 
 interface Props {
-  priceData:   PriceCandle[]
-  indicators:  Record<string, LinePoint[]>
-  events?:     ChartEvent[]
-  height?:     number
+  priceData:    PriceCandle[]
+  indicators:   Record<string, LinePoint[]>
+  events?:      ChartEvent[]
+  height?:      number
+  chartType?:   'candles' | 'line'
   onDateHover?: (date: string | null) => void
 }
 
@@ -57,7 +58,7 @@ const CAT_LABELS: Record<string, string> = {
   technical:      'Tech.',
 }
 
-export default function InstrumentChart({ priceData, indicators, events = [], height = 420, onDateHover }: Props) {
+export default function InstrumentChart({ priceData, indicators, events = [], height = 420, chartType = 'candles', onDateHover }: Props) {
   const containerRef    = useRef<HTMLDivElement>(null)
   const cleanupRef      = useRef<(() => void) | null>(null)
   const onHoverRef      = useRef(onDateHover)
@@ -119,16 +120,30 @@ export default function InstrumentChart({ priceData, indicators, events = [], he
         })))
       }
 
-      // Candlesticks
-      const candleSeries = chart.addCandlestickSeries({
-        upColor:         '#10b981',
-        downColor:       '#ef4444',
-        borderUpColor:   '#10b981',
-        borderDownColor: '#ef4444',
-        wickUpColor:     '#6ee7b7',
-        wickDownColor:   '#fca5a5',
-      })
-      candleSeries.setData(priceData)
+      // Prix principal — chandeliers ou courbe lisse
+      if (chartType === 'line') {
+        const areaSeries = chart.addAreaSeries({
+          lineColor:              '#3b82f6',
+          topColor:               'rgba(59,130,246,0.18)',
+          bottomColor:            'rgba(59,130,246,0.01)',
+          lineWidth:              2,
+          priceLineVisible:       true,
+          lastValueVisible:       true,
+          crosshairMarkerVisible: true,
+          crosshairMarkerRadius:  4,
+        })
+        areaSeries.setData(priceData.map(d => ({ time: d.time as any, value: d.close })))
+      } else {
+        const candleSeries = chart.addCandlestickSeries({
+          upColor:         '#10b981',
+          downColor:       '#ef4444',
+          borderUpColor:   '#10b981',
+          borderDownColor: '#ef4444',
+          wickUpColor:     '#6ee7b7',
+          wickDownColor:   '#fca5a5',
+        })
+        candleSeries.setData(priceData)
+      }
 
       // MA lines
       for (const [key, color] of Object.entries(MA_COLORS)) {
@@ -278,7 +293,7 @@ export default function InstrumentChart({ priceData, indicators, events = [], he
       cleanupRef.current?.()
       cleanupRef.current = null
     }
-  }, [priceData, indicators, events, height])
+  }, [priceData, indicators, events, height, chartType])
 
   return (
     <div className="bg-dark-900/60 rounded-xl border border-slate-700/40 overflow-hidden">