feat: instrument model
This commit is contained in:
OpenSquared
@@ -7,6 +7,7 @@ import { useState, useEffect, useCallback, useMemo, useRef } from 'react'
|
||||
import {
|
||||
RefreshCw, Edit3, X, Trash2, ChevronDown, ChevronUp,
|
||||
TrendingUp, TrendingDown, Minus, LineChart, Table2, Network, Activity,
|
||||
Plus, Zap,
|
||||
} from 'lucide-react'
|
||||
import clsx from 'clsx'
|
||||
import axios from 'axios'
|
||||
@@ -56,6 +57,13 @@ interface ModelState {
|
||||
description: string
|
||||
at_date: string
|
||||
net_pips: number
|
||||
structural_pips: number
|
||||
event_pips: number
|
||||
price_intercept: number
|
||||
pip_to_price: number
|
||||
yf_ticker: string
|
||||
fundamental_level: number
|
||||
synthetic_price: number
|
||||
direction: 'bullish' | 'bearish' | 'neutral'
|
||||
nodes: ModelNode[]
|
||||
output_node: string
|
||||
@@ -65,10 +73,31 @@ interface ModelState {
|
||||
interface TimelinePoint {
|
||||
date: string
|
||||
net_pips: number
|
||||
structural_pips: number
|
||||
event_pips: number
|
||||
fundamental_level: number
|
||||
synthetic_price: number
|
||||
regime?: string
|
||||
nodes: Record<string, number>
|
||||
}
|
||||
|
||||
interface PricePoint {
|
||||
date: string
|
||||
close: number
|
||||
}
|
||||
|
||||
interface VirtualEventForm {
|
||||
id: string
|
||||
date: string
|
||||
category: string
|
||||
pips: number
|
||||
label: string
|
||||
absorption_days: number
|
||||
rise_days: number
|
||||
plateau_days: number
|
||||
decay_type: string
|
||||
}
|
||||
|
||||
// ── Constants ─────────────────────────────────────────────────────────────────
|
||||
|
||||
const INSTRUMENTS = ['EURUSD','USDJPY','XAUUSD','SP500','TLT','GBPUSD','EEM','QQQ']
|
||||
@@ -151,6 +180,26 @@ function fmt(v: number) {
|
||||
return `${s}${v.toFixed(1)}`
|
||||
}
|
||||
|
||||
function fmtPrice(v: number, pipToPrice: number): string {
|
||||
if (pipToPrice <= 0.0001) return v.toFixed(4)
|
||||
if (pipToPrice <= 0.01) return v.toFixed(2)
|
||||
if (pipToPrice <= 0.1) return v.toFixed(2)
|
||||
return v.toFixed(0)
|
||||
}
|
||||
|
||||
const EVENT_CATEGORIES = [
|
||||
{ value: 'central_bank', label: 'Banque Centrale' },
|
||||
{ value: 'monetary_shock', label: 'Surprise Macro' },
|
||||
{ value: 'geopolitical', label: 'Géopolitique' },
|
||||
{ value: 'trade_policy', label: 'Commerce / Tarifs' },
|
||||
{ value: 'growth_shock', label: 'Choc Croissance' },
|
||||
{ value: 'credit_stress', label: 'Stress Crédit' },
|
||||
{ value: 'commodity', label: 'Commodités' },
|
||||
{ value: 'sentiment', label: 'Sentiment' },
|
||||
{ value: 'technical', label: 'Technique' },
|
||||
{ value: 'unclassified', label: 'Non classifié' },
|
||||
]
|
||||
|
||||
function DirectionBadge({ direction, pips }: { direction: string; pips: number }) {
|
||||
const icon =
|
||||
direction === 'bullish' ? <TrendingUp className="w-3.5 h-3.5"/> :
|
||||
@@ -316,6 +365,10 @@ function NodeCard({ node, onEdit }: { node: ModelNode; onEdit: (n: ModelNode) =>
|
||||
const meta = NODE_TYPE_META[node.node_type]
|
||||
const v = node.pip_contribution
|
||||
const canEdit = node.node_type === 'input_event' || node.node_type === 'input_manual'
|
||||
const isManual = node.node_type === 'input_manual'
|
||||
const hasValue = node.source === 'manual' && node.raw_value !== undefined && node.raw_value !== 0
|
||||
const coeff = node.coefficient_to_pips ?? 1
|
||||
|
||||
return (
|
||||
<div
|
||||
className={clsx(
|
||||
@@ -332,15 +385,40 @@ function NodeCard({ node, onEdit }: { node: ModelNode; onEdit: (n: ModelNode) =>
|
||||
|
||||
<div className="text-xs text-slate-300 font-medium leading-tight line-clamp-2 pr-3">{node.label}</div>
|
||||
|
||||
<div className={clsx('text-xs font-bold mt-1', node.node_type === 'output' ? 'text-base' : '', pipColor(v))}>
|
||||
{fmt(v)} pips
|
||||
</div>
|
||||
{isManual ? (
|
||||
<div className="mt-1 flex items-center gap-1.5 flex-wrap">
|
||||
{hasValue ? (
|
||||
<span className={clsx('text-xs font-bold font-mono', pipColor(v))}>
|
||||
{node.raw_value! > 0 ? '+' : ''}{node.raw_value} {node.unit}
|
||||
</span>
|
||||
) : (
|
||||
<span className="text-xs text-slate-600">— {node.unit}</span>
|
||||
)}
|
||||
<span className="text-xs text-slate-600 bg-slate-800/60 px-1.5 py-0.5 rounded font-mono">
|
||||
w:{coeff}
|
||||
</span>
|
||||
{hasValue && (
|
||||
<span className={clsx('text-xs font-mono', pipColor(v))}>
|
||||
={fmt(v)}p
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className={clsx('text-xs font-bold mt-1', node.node_type === 'output' ? 'text-base' : '', pipColor(v))}>
|
||||
{fmt(v)} pips
|
||||
</div>
|
||||
)}
|
||||
|
||||
{Math.abs(v) > 0.05 && (
|
||||
{Math.abs(v) > 0.05 && !isManual && (
|
||||
<div className="mt-1 h-1 rounded-full bg-slate-700/40 overflow-hidden">
|
||||
<div className={clsx('h-full rounded-full', pipBg(v))} style={{width: `${Math.min(100, Math.abs(v / 50) * 100)}%`}}/>
|
||||
</div>
|
||||
)}
|
||||
{isManual && Math.abs(v) > 0.05 && (
|
||||
<div className="mt-1 h-0.5 rounded-full bg-slate-700/40 overflow-hidden">
|
||||
<div className={clsx('h-full rounded-full', pipBg(v))} style={{width: `${Math.min(100, Math.abs(v / 50) * 100)}%`}}/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{node.node_type === 'intermediate' && (
|
||||
<div className="mt-1 flex items-center gap-2">
|
||||
@@ -562,93 +640,150 @@ function TableView({ nodes, onEdit }: { nodes: ModelNode[]; onEdit: (n: ModelNod
|
||||
|
||||
// ── Timeline Chart ─────────────────────────────────────────────────────────────
|
||||
|
||||
const REGIME_CANVAS_COLORS: Record<string, string> = {
|
||||
MONETARY_DOMINANCE: 'rgba(59,130,246,0.07)',
|
||||
GEOPOLITICAL_RISK: 'rgba(249,115,22,0.07)',
|
||||
CREDIT_STRESS: 'rgba(239,68,68,0.07)',
|
||||
GROWTH_SCARE: 'rgba(245,158,11,0.07)',
|
||||
COMMODITY_SHOCK: 'rgba(234,179,8,0.07)',
|
||||
BALANCED: 'rgba(0,0,0,0)',
|
||||
}
|
||||
|
||||
function newVirtualEvent(): VirtualEventForm {
|
||||
return {
|
||||
id: Math.random().toString(36).slice(2),
|
||||
date: new Date().toISOString().slice(0, 10),
|
||||
category: 'central_bank',
|
||||
pips: 50,
|
||||
label: 'Event virtuel',
|
||||
absorption_days: 14,
|
||||
rise_days: 1,
|
||||
plateau_days: 0,
|
||||
decay_type: 'exp',
|
||||
}
|
||||
}
|
||||
|
||||
function TimelineView({ instrument }: { instrument: string }) {
|
||||
const [period, setPeriod] = useState<Period>('3mo')
|
||||
const [data, setData] = useState<TimelinePoint[]>([])
|
||||
const [realPrices, setRealPrices] = useState<PricePoint[]>([])
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [showReal, setShowReal] = useState(true)
|
||||
const [showFund, setShowFund] = useState(true)
|
||||
const [showPips, setShowPips] = useState(false) // toggle: price vs pips
|
||||
const [layerKeys, setLayerKeys] = useState<string[]>([])
|
||||
const [shown, setShown] = useState<Set<string>>(new Set(['net_pips']))
|
||||
const [shownLayers, setShownLayers] = useState<Set<string>>(new Set())
|
||||
const [showVirtual, setShowVirtual] = useState(false)
|
||||
const [virtuals, setVirtuals] = useState<VirtualEventForm[]>([])
|
||||
const [whatifLoading, setWhatifLoading] = useState(false)
|
||||
const [whatifData, setWhatifData] = useState<TimelinePoint[] | null>(null)
|
||||
const canvasRef = useRef<HTMLCanvasElement>(null)
|
||||
|
||||
const activeData = whatifData ?? data
|
||||
|
||||
// Load timeline
|
||||
useEffect(() => {
|
||||
setLoading(true)
|
||||
setWhatifData(null)
|
||||
api.get<TimelinePoint[]>(`/instrument-models/${instrument}/timeline?period=${period}`)
|
||||
.then(r => {
|
||||
const pts: TimelinePoint[] = r.data
|
||||
const pts = r.data
|
||||
setData(pts)
|
||||
if (pts.length > 0) {
|
||||
const keys = Object.keys(pts[0].nodes).filter(k => k.startsWith('layer_'))
|
||||
setLayerKeys(keys)
|
||||
setShown(new Set(['net_pips', ...keys]))
|
||||
}
|
||||
})
|
||||
.catch(() => setData([]))
|
||||
.finally(() => setLoading(false))
|
||||
}, [instrument, period])
|
||||
|
||||
// Load real price history
|
||||
useEffect(() => {
|
||||
api.get<{ prices: PricePoint[] }>(`/instrument-models/${instrument}/price-history?period=${period}`)
|
||||
.then(r => setRealPrices(r.data.prices || []))
|
||||
.catch(() => setRealPrices([]))
|
||||
}, [instrument, period])
|
||||
|
||||
// Draw canvas
|
||||
useEffect(() => {
|
||||
const canvas = canvasRef.current
|
||||
if (!canvas || data.length === 0) return
|
||||
if (!canvas || activeData.length === 0) return
|
||||
const ctx = canvas.getContext('2d')
|
||||
if (!ctx) return
|
||||
|
||||
const W = canvas.width = canvas.offsetWidth
|
||||
const H = canvas.height = 260
|
||||
const H = canvas.height = 300
|
||||
ctx.clearRect(0, 0, W, H)
|
||||
|
||||
const keys = Array.from(shown)
|
||||
if (keys.length === 0) return
|
||||
// Build date→index map for real prices alignment
|
||||
const dateToIdx = new Map<string, number>()
|
||||
activeData.forEach((pt, i) => dateToIdx.set(pt.date, i))
|
||||
|
||||
// Value extractor depending on mode
|
||||
const getV = (pt: TimelinePoint) => showPips ? pt.net_pips : pt.synthetic_price
|
||||
const getFundV = (pt: TimelinePoint) => showPips ? pt.structural_pips : pt.fundamental_level
|
||||
|
||||
let minV = Infinity, maxV = -Infinity
|
||||
for (const pt of data) {
|
||||
for (const k of keys) {
|
||||
const v = k === 'net_pips' ? pt.net_pips : (pt.nodes[k] ?? 0)
|
||||
for (const pt of activeData) {
|
||||
const v = getV(pt)
|
||||
if (v < minV) minV = v
|
||||
if (v > maxV) maxV = v
|
||||
if (showFund) {
|
||||
const f = getFundV(pt)
|
||||
if (f < minV) minV = f
|
||||
if (f > maxV) maxV = f
|
||||
}
|
||||
}
|
||||
if (showReal && realPrices.length > 0 && !showPips) {
|
||||
for (const p of realPrices) {
|
||||
if (p.close < minV) minV = p.close
|
||||
if (p.close > maxV) maxV = p.close
|
||||
}
|
||||
}
|
||||
for (const k of shownLayers) {
|
||||
for (const pt of activeData) {
|
||||
const v = pt.nodes[k] ?? 0
|
||||
if (v < minV) minV = v
|
||||
if (v > maxV) maxV = v
|
||||
}
|
||||
}
|
||||
const pad = Math.max(5, 0.15 * (maxV - minV))
|
||||
|
||||
const pad = Math.max(showPips ? 5 : 0.001, 0.08 * (maxV - minV))
|
||||
minV -= pad; maxV += pad
|
||||
|
||||
const mL = 52, mR = 16, mT = 12, mB = 28
|
||||
const mL = 64, mR = 16, mT = 12, mB = 28
|
||||
const cW = W - mL - mR, cH = H - mT - mB
|
||||
const toX = (i: number) => mL + (i / Math.max(data.length - 1, 1)) * cW
|
||||
const toX = (i: number) => mL + (i / Math.max(activeData.length - 1, 1)) * cW
|
||||
const toY = (v: number) => mT + (1 - (v - minV) / (maxV - minV)) * cH
|
||||
|
||||
// Regime background bands
|
||||
const REGIME_CANVAS_COLORS: Record<string, string> = {
|
||||
MONETARY_DOMINANCE: 'rgba(59,130,246,0.07)',
|
||||
GEOPOLITICAL_RISK: 'rgba(249,115,22,0.07)',
|
||||
CREDIT_STRESS: 'rgba(239,68,68,0.07)',
|
||||
GROWTH_SCARE: 'rgba(245,158,11,0.07)',
|
||||
COMMODITY_SHOCK: 'rgba(234,179,8,0.07)',
|
||||
BALANCED: 'rgba(0,0,0,0)',
|
||||
}
|
||||
let bandStart = 0, bandRegime = data[0]?.regime || 'BALANCED'
|
||||
for (let i = 1; i <= data.length; i++) {
|
||||
const r = i < data.length ? (data[i]?.regime || 'BALANCED') : null
|
||||
if (r !== bandRegime || i === data.length) {
|
||||
// Regime bands
|
||||
let bandStart = 0, bandRegime = activeData[0]?.regime || 'BALANCED'
|
||||
for (let i = 1; i <= activeData.length; i++) {
|
||||
const r = i < activeData.length ? (activeData[i]?.regime || 'BALANCED') : null
|
||||
if (r !== bandRegime || i === activeData.length) {
|
||||
const color = REGIME_CANVAS_COLORS[bandRegime]
|
||||
if (color !== 'rgba(0,0,0,0)') {
|
||||
if (color && color !== 'rgba(0,0,0,0)') {
|
||||
ctx.fillStyle = color
|
||||
ctx.fillRect(toX(bandStart), mT, toX(i - 1) - toX(bandStart), cH)
|
||||
ctx.fillRect(toX(bandStart), mT, toX(Math.max(i - 1, bandStart)) - toX(bandStart) + 1, cH)
|
||||
}
|
||||
bandStart = i; bandRegime = r || 'BALANCED'
|
||||
}
|
||||
}
|
||||
|
||||
// Grid
|
||||
ctx.lineWidth = 1
|
||||
const nG = 5
|
||||
for (let i = 0; i <= nG; i++) {
|
||||
const v = minV + (i / nG) * (maxV - minV)
|
||||
const y = toY(v)
|
||||
ctx.strokeStyle = '#1e293b'; ctx.beginPath(); ctx.moveTo(mL, y); ctx.lineTo(W - mR, y); ctx.stroke()
|
||||
ctx.strokeStyle = '#1e293b'; ctx.lineWidth = 1
|
||||
ctx.beginPath(); ctx.moveTo(mL, y); ctx.lineTo(W - mR, y); ctx.stroke()
|
||||
ctx.fillStyle = '#64748b'; ctx.font = '10px sans-serif'; ctx.textAlign = 'right'
|
||||
ctx.fillText(fmt(v), mL - 4, y + 3.5)
|
||||
const lbl = showPips ? fmt(v) : v.toFixed(v > 100 ? 1 : 4)
|
||||
ctx.fillText(lbl, mL - 4, y + 3.5)
|
||||
}
|
||||
|
||||
if (minV < 0 && maxV > 0) {
|
||||
if (showPips && minV < 0 && maxV > 0) {
|
||||
const y0 = toY(0)
|
||||
ctx.strokeStyle = '#334155'; ctx.setLineDash([3,3]); ctx.lineWidth = 1
|
||||
ctx.beginPath(); ctx.moveTo(mL, y0); ctx.lineTo(W - mR, y0); ctx.stroke()
|
||||
@@ -656,42 +791,125 @@ function TimelineView({ instrument }: { instrument: string }) {
|
||||
}
|
||||
|
||||
// X labels
|
||||
const step = Math.max(1, Math.floor(data.length / Math.floor(cW / 60)))
|
||||
const step = Math.max(1, Math.floor(activeData.length / Math.floor(cW / 60)))
|
||||
ctx.fillStyle = '#64748b'; ctx.font = '10px sans-serif'; ctx.textAlign = 'center'
|
||||
for (let i = 0; i < data.length; i += step) {
|
||||
ctx.fillText(data[i].date.slice(5), toX(i), H - 4)
|
||||
for (let i = 0; i < activeData.length; i += step) {
|
||||
ctx.fillText(activeData[i].date.slice(5), toX(i), H - 4)
|
||||
}
|
||||
|
||||
// Lines
|
||||
for (const k of keys) {
|
||||
const color = CANVAS_COLORS[k] || '#94a3b8'
|
||||
const isNet = k === 'net_pips'
|
||||
ctx.strokeStyle = color; ctx.lineWidth = isNet ? 2.5 : 1.5
|
||||
ctx.setLineDash(isNet ? [] : [4, 3])
|
||||
// Virtual event markers
|
||||
if (virtuals.length > 0) {
|
||||
ctx.fillStyle = '#f59e0b'
|
||||
for (const ve of virtuals) {
|
||||
const idx = dateToIdx.get(ve.date)
|
||||
if (idx !== undefined) {
|
||||
const x = toX(idx)
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(x, mT + cH)
|
||||
ctx.lineTo(x - 4, mT + cH + 6)
|
||||
ctx.lineTo(x + 4, mT + cH + 6)
|
||||
ctx.closePath()
|
||||
ctx.fill()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Real price line (light grey)
|
||||
if (showReal && !showPips && realPrices.length > 0) {
|
||||
ctx.strokeStyle = 'rgba(148,163,184,0.5)'; ctx.lineWidth = 1.5; ctx.setLineDash([])
|
||||
ctx.beginPath()
|
||||
data.forEach((pt, i) => {
|
||||
const v = k === 'net_pips' ? pt.net_pips : (pt.nodes[k] ?? 0)
|
||||
i === 0 ? ctx.moveTo(toX(i), toY(v)) : ctx.lineTo(toX(i), toY(v))
|
||||
})
|
||||
let started = false
|
||||
for (const p of realPrices) {
|
||||
const idx = dateToIdx.get(p.date)
|
||||
if (idx !== undefined) {
|
||||
const x = toX(idx); const y = toY(p.close)
|
||||
if (!started) { ctx.moveTo(x, y); started = true } else { ctx.lineTo(x, y) }
|
||||
}
|
||||
}
|
||||
ctx.stroke()
|
||||
}
|
||||
ctx.setLineDash([])
|
||||
}, [data, shown])
|
||||
|
||||
// Fundamental level (dashed amber)
|
||||
if (showFund) {
|
||||
ctx.strokeStyle = '#f59e0b'; ctx.lineWidth = 1; ctx.setLineDash([5, 4])
|
||||
ctx.beginPath()
|
||||
activeData.forEach((pt, i) => {
|
||||
const y = toY(getFundV(pt))
|
||||
i === 0 ? ctx.moveTo(toX(i), y) : ctx.lineTo(toX(i), y)
|
||||
})
|
||||
ctx.stroke()
|
||||
ctx.setLineDash([])
|
||||
}
|
||||
|
||||
// Layer lines (dashed, thin)
|
||||
for (const k of shownLayers) {
|
||||
const color = CANVAS_COLORS[k] || '#94a3b8'
|
||||
ctx.strokeStyle = color; ctx.lineWidth = 1.2; ctx.setLineDash([4, 3])
|
||||
ctx.beginPath()
|
||||
activeData.forEach((pt, i) => {
|
||||
const v = showPips ? (pt.nodes[k] ?? 0) : (pt.synthetic_price + (pt.nodes[k] ?? 0) * (1 / Math.max(activeData.length, 1)))
|
||||
i === 0 ? ctx.moveTo(toX(i), toY(showPips ? v : (pt.nodes[k] ?? 0))) : ctx.lineTo(toX(i), toY(showPips ? v : (pt.nodes[k] ?? 0)))
|
||||
})
|
||||
ctx.stroke()
|
||||
ctx.setLineDash([])
|
||||
}
|
||||
|
||||
// Synthetic price (main bold line — green/red)
|
||||
const lastPt = activeData[activeData.length - 1]
|
||||
const lastFirst = activeData[0]
|
||||
const trending = getV(lastPt) > getV(lastFirst)
|
||||
ctx.strokeStyle = trending ? '#10b981' : '#f87171'; ctx.lineWidth = 2.5; ctx.setLineDash([])
|
||||
ctx.beginPath()
|
||||
activeData.forEach((pt, i) => {
|
||||
i === 0 ? ctx.moveTo(toX(i), toY(getV(pt))) : ctx.lineTo(toX(i), toY(getV(pt)))
|
||||
})
|
||||
ctx.stroke()
|
||||
|
||||
// What-if overlay (if exists, draw original in grey too)
|
||||
if (whatifData) {
|
||||
ctx.strokeStyle = '#6366f1'; ctx.lineWidth = 2; ctx.setLineDash([6, 3])
|
||||
ctx.beginPath()
|
||||
whatifData.forEach((pt, i) => {
|
||||
i === 0 ? ctx.moveTo(toX(i), toY(getV(pt))) : ctx.lineTo(toX(i), toY(getV(pt)))
|
||||
})
|
||||
ctx.stroke()
|
||||
ctx.setLineDash([])
|
||||
}
|
||||
|
||||
}, [activeData, realPrices, showReal, showFund, showPips, shownLayers, virtuals, whatifData])
|
||||
|
||||
async function runWhatIf() {
|
||||
if (virtuals.length === 0) return
|
||||
setWhatifLoading(true)
|
||||
try {
|
||||
const r = await api.post<TimelinePoint[]>(`/instrument-models/${instrument}/timeline-whatif`, {
|
||||
period,
|
||||
virtual_events: virtuals.map(ve => ({
|
||||
date: ve.date,
|
||||
category: ve.category,
|
||||
pips: ve.pips,
|
||||
label: ve.label,
|
||||
absorption_days: ve.absorption_days,
|
||||
rise_days: ve.rise_days,
|
||||
plateau_days: ve.plateau_days,
|
||||
decay_type: ve.decay_type,
|
||||
})),
|
||||
})
|
||||
setWhatifData(r.data)
|
||||
} finally { setWhatifLoading(false) }
|
||||
}
|
||||
|
||||
function toggleLayer(k: string) {
|
||||
setShown(prev => {
|
||||
const n = new Set(prev)
|
||||
n.has(k) ? n.delete(k) : n.add(k)
|
||||
return n
|
||||
})
|
||||
setShownLayers(prev => { const n = new Set(prev); n.has(k) ? n.delete(k) : n.add(k); return n })
|
||||
}
|
||||
|
||||
if (loading) return <div className="flex items-center justify-center h-64 text-slate-500 text-sm">Calcul timeline…</div>
|
||||
if (!loading && data.length === 0) return <div className="text-center py-8 text-slate-500 text-sm">Aucune donnée pour {instrument}</div>
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="flex items-center gap-2 mb-3 flex-wrap">
|
||||
<div className="space-y-3">
|
||||
{/* Controls */}
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
{PERIODS.map(p => (
|
||||
<button key={p} onClick={() => setPeriod(p)}
|
||||
className={clsx('px-2 py-1 rounded text-xs font-medium transition-colors',
|
||||
@@ -699,29 +917,143 @@ function TimelineView({ instrument }: { instrument: string }) {
|
||||
{p}
|
||||
</button>
|
||||
))}
|
||||
<span className="ml-auto text-xs text-slate-500">{data.length} jours</span>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap gap-1.5 mb-3">
|
||||
{/* Net pips toggle */}
|
||||
<button onClick={() => toggleLayer('net_pips')}
|
||||
className={clsx('flex items-center gap-1.5 px-2 py-1 rounded text-xs font-medium border transition-all',
|
||||
shown.has('net_pips') ? 'border-emerald-600/50 text-emerald-400 bg-emerald-900/20' : 'border-slate-700/40 text-slate-600')}>
|
||||
<span className="w-2 h-2 rounded-full bg-emerald-500"/> Net pips
|
||||
</button>
|
||||
{layerKeys.map(k => (
|
||||
<button key={k} onClick={() => toggleLayer(k)}
|
||||
className={clsx('flex items-center gap-1.5 px-2 py-1 rounded text-xs font-medium border transition-all',
|
||||
shown.has(k) ? 'border-slate-600/50 text-slate-300 bg-slate-800/40' : 'border-slate-700/30 text-slate-600')}>
|
||||
<span className={clsx('w-2 h-2 rounded-full', LAYER_COLORS[k] || 'bg-slate-500')}/>
|
||||
{k.replace('layer_', '')}
|
||||
<div className="ml-2 flex gap-1.5">
|
||||
<button onClick={() => setShowPips(v => !v)}
|
||||
className={clsx('px-2 py-1 rounded text-xs border transition-all',
|
||||
showPips ? 'border-blue-600/50 text-blue-400 bg-blue-900/20' : 'border-slate-700/40 text-slate-400')}>
|
||||
{showPips ? 'Mode pips' : 'Mode prix'}
|
||||
</button>
|
||||
))}
|
||||
<button onClick={() => setShowReal(v => !v)}
|
||||
className={clsx('flex items-center gap-1 px-2 py-1 rounded text-xs border transition-all',
|
||||
showReal ? 'border-slate-600/50 text-slate-300' : 'border-slate-700/30 text-slate-600')}>
|
||||
<span className="w-2 h-0.5 bg-slate-400 inline-block"/> Réel
|
||||
</button>
|
||||
<button onClick={() => setShowFund(v => !v)}
|
||||
className={clsx('flex items-center gap-1 px-2 py-1 rounded text-xs border transition-all',
|
||||
showFund ? 'border-amber-600/50 text-amber-400' : 'border-slate-700/30 text-slate-600')}>
|
||||
<span className="w-2 h-0.5 bg-amber-400 inline-block" style={{borderTop:'1px dashed #f59e0b'}}/> Fondamental
|
||||
</button>
|
||||
<button onClick={() => setShowVirtual(v => !v)}
|
||||
className={clsx('flex items-center gap-1.5 px-2 py-1 rounded text-xs border transition-all',
|
||||
showVirtual ? 'border-violet-600/50 text-violet-400 bg-violet-900/20' : 'border-slate-700/30 text-slate-500')}>
|
||||
<Zap className="w-3 h-3"/> What-if {virtuals.length > 0 && `(${virtuals.length})`}
|
||||
</button>
|
||||
</div>
|
||||
<span className="ml-auto text-xs text-slate-500">{activeData.length} jours</span>
|
||||
</div>
|
||||
|
||||
{/* Layer toggles */}
|
||||
{layerKeys.length > 0 && (
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{layerKeys.map(k => (
|
||||
<button key={k} onClick={() => toggleLayer(k)}
|
||||
className={clsx('flex items-center gap-1.5 px-2 py-1 rounded text-xs font-medium border transition-all',
|
||||
shownLayers.has(k) ? 'border-slate-600/50 text-slate-300 bg-slate-800/40' : 'border-slate-700/30 text-slate-600')}>
|
||||
<span className={clsx('w-2 h-2 rounded-full', LAYER_COLORS[k] || 'bg-slate-500')}/>
|
||||
{k.replace('layer_', '')}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Canvas */}
|
||||
<div className="rounded-lg bg-dark-900/50 border border-slate-700/30 p-2">
|
||||
<canvas ref={canvasRef} className="w-full" style={{height: 260, display: 'block'}}/>
|
||||
<canvas ref={canvasRef} className="w-full" style={{height: 300, display: 'block'}}/>
|
||||
{/* Legend */}
|
||||
<div className="flex flex-wrap gap-3 mt-2 px-1">
|
||||
<div className="flex items-center gap-1.5 text-xs text-slate-500">
|
||||
<span className="w-4 h-0.5 bg-emerald-500 inline-block"/> Prix synthétique
|
||||
</div>
|
||||
{showReal && (
|
||||
<div className="flex items-center gap-1.5 text-xs text-slate-500">
|
||||
<span className="w-4 h-0.5 bg-slate-400 inline-block opacity-50"/> Prix réel
|
||||
</div>
|
||||
)}
|
||||
{showFund && (
|
||||
<div className="flex items-center gap-1.5 text-xs text-slate-500">
|
||||
<span className="w-4 h-0.5 border-t border-dashed border-amber-500 inline-block"/> Fondamental
|
||||
</div>
|
||||
)}
|
||||
{whatifData && (
|
||||
<div className="flex items-center gap-1.5 text-xs text-violet-400">
|
||||
<span className="w-4 h-0.5 border-t border-dashed border-violet-500 inline-block"/> What-if
|
||||
<button onClick={() => setWhatifData(null)} className="ml-1 text-slate-600 hover:text-slate-400">✕</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Virtual Events Panel */}
|
||||
{showVirtual && (
|
||||
<div className="rounded-lg border border-violet-700/30 bg-violet-900/10 p-3 space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="text-xs font-semibold text-violet-400">Events virtuels (What-if)</div>
|
||||
<button onClick={() => setVirtuals(v => [...v, newVirtualEvent()])}
|
||||
className="flex items-center gap-1 text-xs text-violet-400 hover:text-violet-300 border border-violet-700/40 rounded px-2 py-0.5 transition-colors">
|
||||
<Plus className="w-3 h-3"/> Ajouter
|
||||
</button>
|
||||
</div>
|
||||
{virtuals.length === 0 && (
|
||||
<div className="text-xs text-slate-500 text-center py-2">
|
||||
Ajoute des events hypothétiques pour simuler leur impact sur la courbe synthétique.
|
||||
</div>
|
||||
)}
|
||||
{virtuals.map((ve, idx) => (
|
||||
<div key={ve.id} className="grid grid-cols-2 md:grid-cols-4 gap-2 items-end bg-dark-800/40 rounded p-2">
|
||||
<div>
|
||||
<label className="text-xs text-slate-500 block mb-0.5">Date</label>
|
||||
<input type="date" value={ve.date}
|
||||
onChange={e => setVirtuals(v => v.map((x, i) => i === idx ? {...x, date: e.target.value} : x))}
|
||||
className="w-full bg-dark-700 border border-slate-700/40 rounded px-2 py-1 text-xs text-white focus:outline-none"/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-xs text-slate-500 block mb-0.5">Catégorie</label>
|
||||
<select value={ve.category}
|
||||
onChange={e => setVirtuals(v => v.map((x, i) => i === idx ? {...x, category: e.target.value} : x))}
|
||||
className="w-full bg-dark-700 border border-slate-700/40 rounded px-2 py-1 text-xs text-white focus:outline-none">
|
||||
{EVENT_CATEGORIES.map(c => <option key={c.value} value={c.value}>{c.label}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-xs text-slate-500 block mb-0.5">Magnitude (pips)</label>
|
||||
<input type="number" step="any" value={ve.pips}
|
||||
onChange={e => setVirtuals(v => v.map((x, i) => i === idx ? {...x, pips: parseFloat(e.target.value) || 0} : x))}
|
||||
className="w-full bg-dark-700 border border-slate-700/40 rounded px-2 py-1 text-xs text-white focus:outline-none"/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-xs text-slate-500 block mb-0.5">Absorption (j)</label>
|
||||
<div className="flex gap-1">
|
||||
<input type="number" value={ve.absorption_days}
|
||||
onChange={e => setVirtuals(v => v.map((x, i) => i === idx ? {...x, absorption_days: parseInt(e.target.value)||14} : x))}
|
||||
className="flex-1 bg-dark-700 border border-slate-700/40 rounded px-2 py-1 text-xs text-white focus:outline-none"/>
|
||||
<button onClick={() => setVirtuals(v => v.filter((_, i) => i !== idx))}
|
||||
className="text-red-500/60 hover:text-red-400 px-1.5 transition-colors">
|
||||
<X className="w-3 h-3"/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-span-2 md:col-span-4">
|
||||
<input type="text" value={ve.label} placeholder="Label de l'event"
|
||||
onChange={e => setVirtuals(v => v.map((x, i) => i === idx ? {...x, label: e.target.value} : x))}
|
||||
className="w-full bg-dark-700 border border-slate-700/40 rounded px-2 py-1 text-xs text-white focus:outline-none"/>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{virtuals.length > 0 && (
|
||||
<div className="flex gap-2 justify-end">
|
||||
<button onClick={() => { setVirtuals([]); setWhatifData(null) }}
|
||||
className="text-xs text-slate-500 hover:text-slate-300 transition-colors">
|
||||
Effacer tout
|
||||
</button>
|
||||
<button onClick={runWhatIf} disabled={whatifLoading}
|
||||
className="flex items-center gap-1.5 px-3 py-1.5 bg-violet-600 hover:bg-violet-500 disabled:opacity-40 text-white text-xs rounded font-medium transition-colors">
|
||||
<Zap className="w-3 h-3"/>
|
||||
{whatifLoading ? 'Simulation…' : 'Simuler'}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1001,27 +1333,57 @@ export default function InstrumentModels() {
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Net pressure banner */}
|
||||
{/* Synthetic Price Banner */}
|
||||
{state && (
|
||||
<div className="rounded-xl border border-slate-700/40 bg-dark-800/60 p-4">
|
||||
<div className="rounded-xl border border-slate-700/40 bg-dark-800/60 p-4 space-y-3">
|
||||
{/* Row 1 — synthetic price + direction + regime */}
|
||||
<div className="flex items-start justify-between gap-4 flex-wrap">
|
||||
<div>
|
||||
<div className="text-xs font-semibold text-slate-500 uppercase tracking-wider mb-1">
|
||||
{state.name} — Pression Nette Cumulée
|
||||
{state.name} — Prix Synthétique
|
||||
</div>
|
||||
<div className="flex items-baseline gap-3">
|
||||
<span className={clsx('text-3xl font-bold font-mono tracking-tight',
|
||||
state.direction === 'bullish' ? 'text-emerald-400'
|
||||
: state.direction === 'bearish' ? 'text-red-400'
|
||||
: 'text-slate-300')}>
|
||||
{fmtPrice(state.synthetic_price, state.pip_to_price)}
|
||||
</span>
|
||||
<DirectionBadge direction={state.direction} pips={state.net_pips}/>
|
||||
</div>
|
||||
{/* Structural vs event breakdown */}
|
||||
<div className="flex gap-4 mt-2 text-xs">
|
||||
<div>
|
||||
<span className="text-slate-500">Fondamental </span>
|
||||
<span className="text-amber-400 font-mono font-semibold">
|
||||
{fmtPrice(state.fundamental_level, state.pip_to_price)}
|
||||
</span>
|
||||
<span className="text-slate-600 ml-1">({fmt(state.structural_pips)}p)</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-slate-500">Surprises </span>
|
||||
<span className={clsx('font-mono font-semibold', pipColor(state.event_pips))}>
|
||||
{fmt(state.event_pips)}p
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-slate-600">Intercept </span>
|
||||
<span className="text-slate-500 font-mono">
|
||||
{fmtPrice(state.price_intercept, state.pip_to_price)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<DirectionBadge direction={state.direction} pips={state.net_pips}/>
|
||||
<div className="text-xs text-slate-500 mt-1.5 max-w-sm">{state.description}</div>
|
||||
</div>
|
||||
|
||||
{/* Layer contributions summary */}
|
||||
{/* Layer contributions */}
|
||||
{layerSummary.length > 0 && (
|
||||
<div className="flex gap-4 flex-wrap">
|
||||
{layerSummary.map(l => (
|
||||
<div key={l.id} className="text-center min-w-[80px]">
|
||||
<div key={l.id} className="text-center min-w-[72px]">
|
||||
<div className="text-xs text-slate-500 leading-tight mb-0.5">
|
||||
{l.label.replace('▶ ', '').split(' ').slice(0, 3).join(' ')}
|
||||
{l.label.replace('▶ ', '').split(' ').slice(0, 2).join(' ')}
|
||||
</div>
|
||||
<div className={clsx('text-sm font-bold', pipColor(l.pip_contribution))}>{fmt(l.pip_contribution)}</div>
|
||||
<div className={clsx('text-sm font-bold font-mono', pipColor(l.pip_contribution))}>{fmt(l.pip_contribution)}</div>
|
||||
<div className="text-xs text-slate-600">{l.pct > 0 ? '+' : ''}{l.pct}%</div>
|
||||
</div>
|
||||
))}
|
||||
@@ -1085,14 +1447,14 @@ export default function InstrumentModels() {
|
||||
{state && view !== 'timeline' && (
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-3">
|
||||
{[
|
||||
{ label: 'Inputs Events', value: state.nodes.filter(n=>n.node_type==='input_event').length, sub: `${state.nodes.filter(n=>n.source==='events').length} actifs` },
|
||||
{ label: 'Inputs Manuels', value: state.nodes.filter(n=>n.node_type==='input_manual').length, sub: `${state.nodes.filter(n=>n.source==='manual').length} overrides` },
|
||||
{ label: 'Couches interméd.',value: state.nodes.filter(n=>n.node_type==='intermediate').length, sub: 'propagation DAG' },
|
||||
{ label: 'Pression nette', value: `${fmt(state.net_pips)} pips`, sub: state.direction },
|
||||
{ label: 'Prix synthétique', value: fmtPrice(state.synthetic_price, state.pip_to_price), sub: state.direction, color: state.direction === 'bullish' ? 'text-emerald-400' : state.direction === 'bearish' ? 'text-red-400' : 'text-white' },
|
||||
{ label: 'Niveau fondamental',value: fmtPrice(state.fundamental_level, state.pip_to_price), sub: `struct: ${fmt(state.structural_pips)}p`, color: 'text-amber-400' },
|
||||
{ label: 'Surprises events', value: `${fmt(state.event_pips)} pips`, sub: `sur ${state.nodes.filter(n=>n.source==='events').length} events actifs`, color: pipColor(state.event_pips) },
|
||||
{ label: 'Variables manuelles',value: `${state.nodes.filter(n=>n.source==='manual').length} actives`, sub: `sur ${state.nodes.filter(n=>n.node_type==='input_manual').length} disponibles`, color: 'text-violet-400' },
|
||||
].map(card => (
|
||||
<div key={card.label} className="rounded-lg border border-slate-700/30 bg-dark-800/50 p-3">
|
||||
<div className="text-xs text-slate-500 mb-1">{card.label}</div>
|
||||
<div className="text-lg font-bold text-white">{card.value}</div>
|
||||
<div className={clsx('text-lg font-bold font-mono', card.color)}>{card.value}</div>
|
||||
<div className="text-xs text-slate-600">{card.sub}</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
Reference in New Issue
Block a user