https://ssicevs.com/assets/ResearchShowcase-sbsXTPpR.js

1import{j as e}from"./metal-fx-C6GZ_SKA.js";import{Demo as i}from"./PriceScrubberPro-jeFf7Nww.js";import{Demo as n}from"./CorrelationMatrixPro-B5y3h3f6.js";import{Demo as t}from"./FundingRatePro-BOK0Wvdw.js";import{Demo as s}from"./CandlestickPro-BnB7Boya.js";import{Demo as m}from"./MarketHeatmapPro-Ckhk0ceM.js";import{Demo as l}from"./EquityDrawdownPro-DJ6HcDY0.js";import{Demo as d}from"./VolumeProfilePro-D8o3H6m0.js";import{Demo as c}from"./WaterfallPro-DIi2lySW.js";import{Demo as u}from"./AnalystRadarPro-CcBKBbys.js";import{Demo as h}from"./HealthGaugePro-BMN8PwO7.js";import{Demo as p}from"./DistributionPro-FQ6A3m1t.js";import{Demo as g}from"./RangeNavigatorPro-DSS0rb_Y.js";import{Demo as b}from"./SankeyFlowPro-DHHw-eNE.js";import{Demo as v}from"./MultiPaneChartPro-DP9VTTtr.js";import{Demo as f}from"./ReturnsCalendarPro-BFVLcKcg.js";import{Demo as x}from"./LeverageTicketPro-C3Uk9Akg.js";import"./shared-OtDZU4QY.js";import"./formatValue-B9PpHWcg.js";import"./useChartPointer-Dc8ejnc2.js";import"./index-D1yBc__G.js";import"./motion-BHwmuFpx.js";import"./SparklineAtom-CyGLBJUD.js";const o=[{name:"Price Scrubber",blurb:"The synthesis — six of the research’s top-10 interactions in one chart.",interactions:["magnet crosshair","axis-riding price/time badges","scrub → hero number","recolor off reference","gradient area draw-in","timeframe morph"],Demo:i,wide:!0},{name:"Candlestick",blurb:"The identity trading chart — candles + volume, magnet crosshair, OHLC legend.",interactions:["magnet crosshair (snaps to candle)","OHLC + change legend","price badge on axis","hover isolates the candle","volume histogram"],Demo:s,wide:!0},{name:"Equity & Drawdown",blurb:"Trading-journal core — equity curve over a synced underwater drawdown panel.",interactions:["one crosshair drives both panels","equity + drawdown + days-below-high readout","draw-in","derivable numbers"],Demo:l,wide:!0},{name:"Market Heatmap",blurb:"Finviz-style treemap — tiles sized by market cap, colored by % change.",interactions:["squarified treemap layout","diverging red↔green","hover lifts + reads the tile","staggered reveal"],Demo:m},{name:"Volume Profile",blurb:"Volume traded at each price level — POC + value area, hover a bin.",interactions:["bars grow from POC outward","value-area shading","POC + current-price lines","hover reads price/share/role"],Demo:d},{name:"Waterfall",blurb:"P&L bridge — sequential contributions bridge revenue to net income.",interactions:["floating bars + connectors","blue totals / green + / amber −","staggered grow-in","hover reads value + running total"],Demo:c,wide:!0},{name:"Analyst Radar",blurb:"Multivariate factor scores — company vs sector overlaid.",interactions:["two series overlaid","hover a spoke reads both","legend toggles a series","polygon scale-in"],Demo:u},{name:"Multi-Pane Chart",blurb:"Price + volume + RSI in three panes sharing one x — and one crosshair.",interactions:["one crosshair across all 3 panes","RSI 14 with 30/70 bands","volume colored by candle","synced readout header"],Demo:v,wide:!0},{name:"Returns Calendar",blurb:"Monthly returns heat grid, years × months, with a compounded year total.",interactions:["diverging green/red by magnitude","compounded year-total column","row + column cross-dim on hover","staggered reveal"],Demo:f},{name:"Range Navigator",blurb:"Focus + context — drag a mini-map window to re-window the detail chart.",interactions:["drag the window to pan","pull an edge to zoom","detail chart re-windows live","dimmed context mask"],Demo:g,wide:!0},{name:"Sankey Flow",blurb:"Fund-flow — income sources through Cash into uses, thickness ∝ amount.",interactions:["hover a node lights its whole path","link + node thickness ∝ value","hand-rolled layout","path draw-in"],Demo:b,wide:!0},{name:"Distribution",blurb:"Daily-return histogram — gains green / losses amber, mean + 5% VaR markers.",interactions:["bars grow from baseline","mean + VaR tail markers","hover reads range/count/share","staggered draw-in"],Demo:p},{name:"Health Gauge",blurb:"Bounded single-metric dial — 270° arc with zones + count-up center.",interactions:["270° arc with color zones","value arc draws in","end marker","count-up center number"],Demo:h}

1,{name:"Correlation Matrix",blurb:"Pairwise correlation grid — diverging blue(+)/amber(−), colorblind-safe.",interactions:["hover cross-highlight (row + column)","diverging color scale","pair readout","staggered cell reveal"],Demo:n},{name:"Leverage Ticket",blurb:"Perps order ticket with a live liquidation preview.",interactions:["leverage slider → live liq price","long/short flips liq direction","liq-distance bar shrinks with leverage","derived margin/fees/size"],Demo:x},{name:"Funding Rate Board",blurb:"Perps funding board with a live countdown to the next funding.",interactions:["live countdown timer","interruptible flash on funding","rate history sparks","green +/amber − rates"],Demo:t}];function A(){return e.jsx("div",{className:"lab-page min-h-screen px-5 py-10 sm:px-10",children:e.jsxs("div",{className:"mx-auto max-w-[1180px]",children:[e.jsxs("header",{className:"mb-8",children:[e.jsxs("div",{className:"flex items-center gap-2 text-[13px] font-semibold",children:[e.jsx("span",{className:"inline-block h-2 w-2 rounded-full",style:{background:"var(--chart-1)"}}),"SSI / UI Lab — research showcase"]}),e.jsxs("p",{className:"mt-2 max-w-[680px] text-[13px] text-foreground/50",children:[o.length," components built from the fintech data-viz research (",e.jsx("code",{className:"text-foreground/70",children:"refs/fintech-dataviz-research.md"}),"). Each is live and interactive — reload to replay the motion, hover/scrub to drive the interactions. This page grows as new ones are built."]})]}),e.jsx("div",{className:"grid grid-cols-1 gap-5 md:grid-cols-2",children:o.map(r=>e.jsxs("section",{className:`overflow-hidden rounded-xl border border-foreground

1/[0.06] ${r.wide?"md:col-span-2":""}`,style:{background:"var(--card)"},children:[e.jsxs("div",{className:"border-b border-foreground/[0.06] px-4 py-3",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("span",{className:"text-[13px] font-semibold",children:r.name}),e.jsx("span",{className:"rounded-full px-2 py-[2px] text-[9px] font-semibold uppercase tracking-wide",style:{color:"var(--chart-1)",background:"color-mix(in srgb, var(--chart-1) 13%, transparent)"},children:"new"})]}),e.jsx("div",{className:"mt-1 text-[11px] text-foreground/45",children:r.blurb}),e.jsx("div",{className:"mt-2 flex flex-wrap gap-1.5",children:r.interactions.map(a=>e.jsx("span",{className:"rounded-md border border-foreground/[0.06] px-1.5 py-[2px] text-[9.5px]",style:{color:"var(--muted-foreground)"},children:a},a))})]}),e.jsx("div",{className:"grid min-h-[300px] place-items-center",children:e.jsx(r.Demo,{})})]},r.name))})]})})}export{A as default};