feat: instrument analysis

2026-07-23 22:28:56 +02:00
parent 548bad2dcd
commit e0c4aa8f65
9 changed files with 2395 additions and 307 deletions
--- a/frontend/src/components/SaxoLinkPicker.tsx
+++ b/frontend/src/components/SaxoLinkPicker.tsx
@@ -0,0 +1,106 @@
+import { useState } from 'react'
+import { Link2, Unlink } from 'lucide-react'
+import clsx from 'clsx'
+import { useSaxoCatalog } from '../hooks/useApi'
+
+// Saxo has no shared naming convention with yfinance — its catalog search matches on
+// Saxo's own instrument description text ("Brent Crude"), not the yfinance ticker code
+// ("BZ=F"). This maps the common yfinance futures-root/index tickers to the plain-English
+// name worth searching for, so opening a picker pre-fills something useful instead of an
+// empty box the user has to guess into. Not exhaustive — anything not listed here (most
+// FX pairs, where the Saxo symbol IS the yfinance root, e.g. "EURUSD=X" -> "EURUSD") falls
+// back to a best-effort strip of yfinance's own suffix/prefix decoration.
+const YFINANCE_SEARCH_HINTS: Record<string, string> = {
+  'BZ=F': 'Brent', 'CL=F': 'WTI Crude', 'NG=F': 'Natural Gas',
+  'GC=F': 'Gold', 'SI=F': 'Silver', 'HG=F': 'Copper', 'PL=F': 'Platinum',
+  '^GSPC': 'S&P 500', '^NDX': 'Nasdaq 100', '^DJI': 'Dow Jones', '^RUT': 'Russell 2000',
+  '^VIX': 'VIX', 'IEF': 'Treasury',
+}
+
+export function guessSaxoSearchHint(ticker: string): string {
+  if (YFINANCE_SEARCH_HINTS[ticker]) return YFINANCE_SEARCH_HINTS[ticker]
+  return ticker.replace(/=F$|=X$|^\^/g, '')
+}
+
+export const SAXO_LINK_KIND_META = {
+  option: {
+    label: 'Option', placeholder: 'Search Saxo option symbol…',
+    activeCls: 'text-emerald-400 hover:text-emerald-300 bg-emerald-900/20 border-emerald-700/30',
+    assetTypes: 'FuturesOption,FxVanillaOption,StockOption,StockIndexOption',
+  },
+  quote: {
+    label: 'Quote', placeholder: 'Search Saxo spot/futures symbol…',
+    activeCls: 'text-sky-400 hover:text-sky-300 bg-sky-900/20 border-sky-700/30',
+    assetTypes: 'ContractFutures,CfdOnFutures,FxSpot,StockIndex',
+  },
+} as const
+
+export type SaxoLinkKind = keyof typeof SAXO_LINK_KIND_META
+
+// Generic Saxo symbol linker — ticker/saxoSymbol are display data, onSave/isPending are
+// injected by the caller so this can drive any backing store (instruments_watchlist's
+// saxo_option_symbol/saxo_quote_symbol columns via Config.tsx, or instruments.json's
+// saxo_quote_symbol field via InstrumentDashboard.tsx) without knowing which one it is.
+export default function SaxoLinkPicker({ ticker, kind, saxoSymbol, onSave, isPending }: {
+  ticker: string
+  kind: SaxoLinkKind
+  saxoSymbol: string | null
+  onSave: (symbol: string | null) => void
+  isPending: boolean
+}) {
+  const [editing, setEditing] = useState(false)
+  const [value, setValue] = useState(saxoSymbol ?? '')
+  const [showDropdown, setShowDropdown] = useState(false)
+  const meta = SAXO_LINK_KIND_META[kind]
+  const { data: catalogMatches } = useSaxoCatalog(meta.assetTypes, value.length >= 2 ? value : undefined)
+
+  const save = (sym?: string) => {
+    const resolved = (sym ?? value).trim().toUpperCase() || null
+    onSave(resolved)
+    setEditing(false)
+  }
+
+  if (!editing) {
+    return saxoSymbol ? (
+      <button onClick={() => { setEditing(true); setValue(saxoSymbol) }} className={clsx('flex items-center gap-1 text-[9px] px-1.5 py-0.5 rounded border', meta.activeCls)}>
+        <Link2 className="w-2.5 h-2.5" /> {meta.label}: {saxoSymbol}
+      </button>
+    ) : (
+      <button onClick={() => { setEditing(true); setValue(guessSaxoSearchHint(ticker)); setShowDropdown(true) }} className="flex items-center gap-1 text-[9px] text-slate-500 hover:text-slate-300 border border-slate-700/40 px-1.5 py-0.5 rounded">
+        <Unlink className="w-2.5 h-2.5" /> {meta.label}
+      </button>
+    )
+  }
+
+  return (
+    <div className="relative">
+      <input
+        autoFocus
+        value={value}
+        onChange={e => { setValue(e.target.value); setShowDropdown(true) }}
+        onFocus={() => setShowDropdown(true)}
+        onKeyDown={e => { if (e.key === 'Enter') save(); if (e.key === 'Escape') setEditing(false) }}
+        onBlur={() => save()}
+        placeholder={meta.placeholder}
+        className="bg-dark-800 border border-slate-700/40 rounded px-1.5 py-0.5 text-[9px] text-white w-28 focus:outline-none focus:border-blue-500/50"
+      />
+      {isPending && <span className="text-[9px] text-slate-600 ml-1">…</span>}
+      {showDropdown && (catalogMatches ?? []).length > 0 && (
+        <div className="absolute z-20 top-full left-0 mt-1 w-72 max-h-60 overflow-y-auto bg-dark-800 border border-slate-700 rounded shadow-xl">
+          {(catalogMatches ?? []).map((c: any) => (
+            <button
+              key={c.symbol}
+              type="button"
+              onMouseDown={e => e.preventDefault()}
+              onClick={() => { setValue(c.symbol); setShowDropdown(false); save(c.symbol) }}
+              className="flex items-center justify-between gap-3 w-full text-left px-2.5 py-1.5 text-[10px] hover:bg-dark-700 transition-colors"
+            >
+              <span className="font-mono font-bold text-white shrink-0">{c.symbol}</span>
+              <span className="text-slate-500 truncate">{c.description}</span>
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}