screamer 2.2.0__tar.gz → 2.3.0__tar.gz

{screamer-2.2.0 → screamer-2.3.0}/CMakeLists.txt

@@ -1,5 +1,5 @@
 cmake_minimum_required(VERSION 3.18)
-project(screamer VERSION 2.2.0 LANGUAGES CXX)
+project(screamer VERSION 2.3.0 LANGUAGES CXX)
 
 # Set the default build type to Release for optimizations
 if(NOT CMAKE_BUILD_TYPE)

{screamer-2.2.0 → screamer-2.3.0}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.2
 Name: screamer
-Version: 2.2.0
+Version: 2.3.0
 Summary: Screamingly fast financial technical indicators with C++ performance and Python simplicity, built for both time series analysis and real-time, event-driven streaming.
 Keywords: streaming,indicators,real-time,algorithmic,trading,low-latency
 Author-Email: Thijs van den Berg <thijs@sitmo.com>

{screamer-2.2.0 → screamer-2.3.0}/js/README.md

@@ -25,6 +25,21 @@ await ready();
 const op = RollingMean(3);
 ```
 
+## Node, bundlers, and the browser
+
+The import above works in Node (18+) and through any bundler (Vite, Next.js, webpack,
+esbuild), which inlines the embedded-WASM module. In a plain browser with no build step,
+import from a CDN URL instead (browser use needs 2.2.1 or newer):
+
+```html
+<script type="module">
+  import { ready, RollingMean }
+    from "https://cdn.jsdelivr.net/npm/@screamer-labs/screamer@2.2.1/dist/index.js";
+  await ready();
+  const sma = RollingMean(3);
+</script>
+```
+
 ## Calling an op: four input regimes
 
 An op factory like `RollingMean(3)` returns a callable. That callable dispatches on its
@@ -94,8 +109,16 @@ package: same operators, same causal semantics, same numerics. Its outputs are
 verified against the Python package's outputs, and batch and streaming calls on the
 same data give identical results.
 
+## Live demo
+
+Watch the live trade dashboard in the browser:
+[screamer-labs.github.io/screamer/live-trades.html](https://screamer-labs.github.io/screamer/live-trades.html).
+It shows low-lag price, volume-weighted fair value, order-flow pressure, and an optional VPIN view. The self-contained source is [`examples/live-trades.html`](examples/live-trades.html).
+
 ## Learn more
 
-Full documentation, the function reference, and example notebooks are at
+The JavaScript reference and guide are at
+[screamer-labs.github.io/screamer](https://screamer-labs.github.io/screamer/). Full documentation,
+the function reference, and example notebooks are at
 [screamer.readthedocs.io](https://screamer.readthedocs.io/en/latest/). Source and
 issues live at [github.com/screamer-labs/screamer](https://github.com/screamer-labs/screamer).

screamer-2.3.0/js/docs-guide/environments.md

@@ -0,0 +1,80 @@
+---
+title: Node, bundlers, and the browser
+---
+
+# Node, bundlers, and the browser
+
+screamer.js is one package that runs in Node and in the browser. The API is identical everywhere;
+only how you point the runtime at the package differs. In every environment the rule is the same:
+call `await ready()` once before constructing any operator, because the WebAssembly module loads
+asynchronously.
+
+Browser use (a bundler or a CDN) requires version **2.2.1 or newer**. Earlier versions load only
+under Node.
+
+## Node
+
+Node 18 or newer. Install and import by name:
+
+```js
+// npm i @screamer-labs/screamer
+import { ready, RollingMean } from "@screamer-labs/screamer";
+
+await ready();
+const sma = RollingMean(3);
+console.log(sma([1, 2, 3, 4])); // [ NaN, NaN, 2, 3 ]
+```
+
+The package ships one self-contained module with the WebAssembly embedded, so there is no separate
+`.wasm` file to resolve.
+
+## Browser with a bundler
+
+Vite, Next.js, webpack, Rollup, esbuild, and similar tools need no special configuration. Install
+and import exactly as in Node; the bundler inlines the embedded-WASM module into your output:
+
+```js
+// npm i @screamer-labs/screamer
+import { ready, RollingMean } from "@screamer-labs/screamer";
+
+await ready();
+const sma = RollingMean(3);
+```
+
+The bare specifier `@screamer-labs/screamer` resolves through the bundler (or an import map). A raw
+browser cannot resolve a bare specifier, which is what the CDN form below handles.
+
+## Browser without a build step (CDN)
+
+Import from a full URL inside a module script. jsDelivr serves the published module directly:
+
+```html
+<script type="module">
+  import { ready, RollingMean }
+    from "https://cdn.jsdelivr.net/npm/@screamer-labs/screamer@2.2.1/dist/index.js";
+
+  await ready();
+
+  const sma = RollingMean(3);
+  console.log(Array.from(sma(new Float64Array([1, 2, 3, 4])))); // [ NaN, NaN, 2, 3 ]
+</script>
+```
+
+Pin the version (`@2.2.1`) so loads are reproducible. The module embeds its WebAssembly, so nothing
+else needs to be fetched or configured.
+
+To avoid a third-party origin (for offline use, a strict Content-Security-Policy, or full control),
+copy the package's `dist/` directory next to your page and import it with a relative URL. The
+[Live demo](./live-demo.md) does this; its
+[source](https://github.com/screamer-labs/screamer/blob/main/js/examples/live-trades.html) shows
+the pattern.
+
+## The rule in every environment
+
+`await ready()` resolves the WebAssembly module once and caches it; a second call awaits the same
+load. Construct operators after it, never before. Each op owns memory on the WASM side, so call
+`.dispose()` when you are done with it (or use `using` where your runtime supports it). See
+[Lifecycle](./lifecycle.md).
+
+Requirements: Node 18+, or any browser with WebAssembly, which is every current browser on desktop
+and mobile.

{screamer-2.2.0 → screamer-2.3.0}/js/docs-guide/getting-started.md

@@ -9,6 +9,10 @@ npm i @screamer-labs/screamer
 The package ships one self-contained WASM module. There is no separate `.wasm` asset to fetch
 and no build step on the consumer side.
 
+The examples below use a bare import, which resolves under Node or a bundler. To load screamer in
+the browser (through a bundler or straight from a CDN with no build step), see
+[Node, bundlers, and the browser](./environments.md).
+
 ## Load the module once
 
 screamer.js compiles to WebAssembly, and WebAssembly modules instantiate asynchronously

{screamer-2.2.0 → screamer-2.3.0}/js/docs-guide/index.md

@@ -37,4 +37,5 @@ RollingMean(3)(new Float64Array([1, 2, 3, 4])); // Float64Array [NaN, NaN, 2, 3]
 ```
 
 Start with [Getting started](./getting-started.md) for the async load step and your first
-`Pipeline`.
+`Pipeline`, or watch the operators run on a live trade feed in the
+[Live demo](./live-demo.md).

screamer-2.3.0/js/docs-guide/live-demo.md

@@ -0,0 +1,59 @@
+---
+title: Live demo
+---
+
+# Live demo
+
+**[Open the live demo](https://screamer-labs.github.io/screamer/live-trades.html)** to read a live
+crypto tape with screamer, in your browser.
+
+Live trades are noisy. The demo connects to a public exchange feed (Coinbase or Binance, no API
+key) and turns the raw prints into three things a trader actually wants:
+
+- **A low-lag price.** `RollingPoly1(window, 0)` is the endpoint of a rolling linear fit. It tracks
+  price with far less lag than a moving average, so it de-noises the tape without falling behind.
+- **A volume-weighted fair value.** A VWMA built from `RollingSum(price * size) / RollingSum(size)`
+  shows where the volume actually traded, not just where the last print landed.
+- **Order-flow pressure.** An EW-smoothed, normalized signed-volume imbalance shows whether buyers
+  are lifting offers or sellers are hitting bids right now. It is a leading read on short-term
+  direction (drawn as a green/red strip under the price), not a trade signal.
+
+The **view** control switches the x-axis between a trade-count clock and a volume clock. On a
+volume clock each bar is a fixed slice of traded volume, so a burst of micro-trades collapses into
+a couple of bars instead of stretching across the chart.
+
+The **signal** control switches the lower panel between the existing order-flow pressure view and
+VPIN. VPIN uses 0.5 BTC volume buckets and reports how one-sided the recent signed flow has been.
+
+Each operator is fed one trade at a time as it arrives:
+
+```js
+import { ready, RollingPoly1, RollingSum, EwMean } from "@screamer-labs/screamer";
+
+await ready();
+
+const lowLag  = RollingPoly1(30, 0);                    // low-lag price
+const sumPV   = RollingSum(50), sumV = RollingSum(50);  // volume-weighted fair value
+const flowNet = EwMean(undefined, 50), flowAbs = EwMean(undefined, 50); // order-flow pressure
+
+// sign: +1 when a buyer lifted the offer, -1 when a seller hit the bid
+function onTrade(price, size, sign) {
+  const denoised = lowLag(price);
+  const fair     = sumPV(price * size) / sumV(size);
+  const pressure = flowNet(sign * size) / flowAbs(size);   // in [-1, 1], positive = buyers leaning
+  // ...draw denoised and fair over the trades, pressure as a green/red strip
+}
+```
+
+The same operators run just as well on a stored array as on this live feed, so a study done on
+history carries over to production unchanged. See [Getting started](./getting-started.md) for the
+input regimes and [Node, bundlers, and the browser](./environments.md) for how to load screamer in
+each environment.
+
+## Running it yourself
+
+The demo is a single self-contained HTML file at
+[`js/examples/live-trades.html`](https://github.com/screamer-labs/screamer/blob/main/js/examples/live-trades.html).
+It loads screamer from a CDN, so it needs internet access for both the module and the trade feed.
+If the chart stays empty, the selected market may be restricted in your region; switch markets in
+the demo.

screamer-2.3.0/js/examples/live-trades.html

@@ -0,0 +1,441 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>screamer.js — reading the live tape</title>
+<style>
+  :root {
+    --bg: #0d1117; --panel: #161b22; --line: #232a33;
+    --fg: #e6edf3; --muted: #8b949e;
+    --raw: #6e7681;
+    --lowlag: #f5a623; --fair: #58a6ff;
+    --buy: #3fb950; --sell: #f85149;
+    --live: #3fb950; --warn: #d29922; --dead: #f85149;
+  }
+  * { box-sizing: border-box; }
+  html, body { margin: 0; height: 100%; }
+  body {
+    background: var(--bg); color: var(--fg);
+    font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+    display: flex; flex-direction: column; min-height: 100%;
+  }
+  header { padding: 16px 20px 8px; }
+  h1 { margin: 0; font-size: 17px; font-weight: 650; letter-spacing: .2px; }
+  h1 .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: #58a6ff; }
+  .sub { color: var(--muted); font-size: 12.5px; margin-top: 3px; max-width: 760px; }
+  .bar { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; padding: 6px 20px 12px; }
+  .bar label { color: var(--muted); font-size: 12px; margin-right: 5px; }
+  select, button {
+    background: var(--panel); color: var(--fg); border: 1px solid var(--line);
+    border-radius: 6px; padding: 5px 9px; font-size: 12.5px; cursor: pointer;
+  }
+  button:hover, select:hover { border-color: #3d4653; }
+  .pill {
+    display: inline-flex; align-items: center; gap: 7px;
+    background: var(--panel); border: 1px solid var(--line);
+    border-radius: 999px; padding: 4px 11px; font-size: 12px; color: var(--muted);
+  }
+  .pill b { color: var(--fg); font-weight: 600; }
+  .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
+  .dot.live { background: var(--live); box-shadow: 0 0 0 3px rgba(63,185,80,.18); }
+  .dot.connecting { background: var(--warn); }
+  .dot.dead { background: var(--dead); }
+  .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
+  #bias.buy  { color: var(--buy); border-color: rgba(63,185,80,.4); }
+  #bias.sell { color: var(--sell); border-color: rgba(248,81,73,.4); }
+  .grow { flex: 1; }
+  #wrap { flex: 1; padding: 0 12px 4px; min-height: 320px; position: relative; }
+  canvas { width: 100%; height: 100%; display: block; }
+  #overlay {
+    position: absolute; inset: 0; display: none; align-items: center; justify-content: center;
+    text-align: center; padding: 24px; color: var(--muted);
+  }
+  #overlay .box { max-width: 460px; }
+  #overlay code { color: #f0883e; font-family: ui-monospace, Menlo, monospace; }
+  .legend { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 8px 20px 4px; }
+  .lg { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; }
+  .sw { width: 22px; height: 3px; border-radius: 2px; }
+  .sw.sq { width: 11px; height: 11px; border-radius: 2px; }
+  .lg .nm { color: var(--muted); }
+  .lg .vl { font-family: ui-monospace, Menlo, monospace; }
+  footer { color: var(--muted); font-size: 11.5px; padding: 4px 20px 14px; }
+  footer a { color: #58a6ff; text-decoration: none; }
+</style>
+</head>
+<body>
+  <header>
+    <h1><span class="mono">screamer.js</span> &nbsp;·&nbsp; reading the live tape</h1>
+    <div class="sub">
+      Live trades are noisy. This reads the tape for you: a low-lag estimate of where price really
+      is, a volume-weighted fair value, and the order-flow pressure showing whether buyers or
+      sellers are leaning on the market right now.
+    </div>
+  </header>
+
+  <div class="bar">
+    <span><label>market</label>
+      <select id="source">
+        <option value="coinbase">Coinbase · BTC-USD</option>
+        <option value="binance">Binance · BTC/USDT</option>
+      </select>
+    </span>
+    <span><label>view</label>
+      <select id="window">
+        <option value="count:240" selected>240 trades</option>
+        <option value="count:480">480 trades</option>
+        <option value="vol:6">volume clock · fine</option>
+        <option value="vol:20">volume clock · coarse</option>
+      </select>
+    </span>
+    <span><label>signal</label>
+      <select id="signal">
+        <option value="flow" selected>order-flow pressure</option>
+        <option value="vpin">VPIN · 0.5 BTC buckets</option>
+      </select>
+    </span>
+    <button id="pause">Pause</button>
+    <button id="reset">Reset</button>
+    <span class="grow"></span>
+    <span class="pill"><span id="dot" class="dot"></span><span id="status">starting…</span></span>
+    <span class="pill">price <b id="last" class="mono">—</b></span>
+    <span class="pill" id="bias"><span id="signalLabel">flow</span> <b id="biastxt">—</b></span>
+    <span class="pill"><b id="rate">0</b>&nbsp;trades/s</span>
+  </div>
+
+  <div id="wrap">
+    <canvas id="chart"></canvas>
+    <div id="overlay"><div class="box"></div></div>
+  </div>
+
+  <div class="legend">
+    <span class="lg"><span class="sw" style="background:var(--lowlag)"></span><span class="nm">low-lag price</span> <span class="vl" id="v_lowlag">—</span></span>
+    <span class="lg"><span class="sw" style="background:var(--fair)"></span><span class="nm">fair value (volume-weighted)</span> <span class="vl" id="v_fair">—</span></span>
+    <span class="lg"><span class="sw" style="background:var(--raw)"></span><span class="nm">trades</span></span>
+    <span class="lg"><span class="sw sq" style="background:var(--buy)"></span><span class="sw sq" style="background:var(--sell)"></span><span class="nm" id="signalLegend">order-flow pressure (buy / sell)</span></span>
+  </div>
+
+  <footer>
+    Powered by <a href="https://www.npmjs.com/package/@screamer-labs/screamer" target="_blank" rel="noopener">@screamer-labs/screamer</a>.
+    Public trade feeds, no API key. Order flow is a leading read on short-term direction, not a
+    trade signal. If a market shows no data it may be geo-restricted, switch markets above.
+  </footer>
+
+<script type="module">
+// ---------------------------------------------------------------------------
+// Load screamer.js. On the docs site a same-origin bundle sits next to this
+// page (built to a broad target, most robust across browsers incl. mobile
+// Safari); the CDN entries are fallbacks when the file is opened standalone.
+// ---------------------------------------------------------------------------
+const SOURCES = [
+  new URL("./vendor/screamer/index.js", import.meta.url).href,                 // same-origin (docs site)
+  "https://cdn.jsdelivr.net/npm/@screamer-labs/screamer@2.2.1/dist/index.js",  // raw published ESM
+  "https://esm.sh/@screamer-labs/screamer@2.2.1",                             // transformed fallback
+];
+async function loadScreamer() {
+  const errs = [];
+  for (const url of SOURCES) {
+    try { return await import(url); }
+    catch (e) {
+      const where = url.startsWith("http") ? new URL(url).host : "same-origin";
+      errs.push(where + " — " + String((e && e.message) || e));
+    }
+  }
+  throw new Error(errs.join("\n"));
+}
+
+const overlay = document.getElementById("overlay");
+function fail(html) { overlay.querySelector(".box").innerHTML = html; overlay.style.display = "flex"; }
+
+let S;
+try {
+  S = await loadScreamer();
+  await S.ready();
+} catch (e) {
+  const detail = String((e && e.message) || e)
+    .replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/\n/g, "<br>");
+  fail(`Could not load <code>@screamer-labs/screamer</code>.<br><br>` +
+       `This page needs internet access for the module and the trade feed.<br><br>` +
+       `<small style="color:#f0883e">${detail}</small>`);
+  throw e;
+}
+
+// ---------------------------------------------------------------------------
+// The signals, all screamer operators fed one trade at a time:
+//   low-lag price   RollingPoly1(win, 0)      endpoint of a rolling linear fit
+//   fair value      RollingSum(pv)/RollingSum(v)   volume-weighted price (VWMA)
+//   order flow      EwMean(signed vol) / EwMean(|vol|)  buy-vs-sell pressure in [-1,1]
+// Rebuilt on reset / market change so state starts clean.
+// ---------------------------------------------------------------------------
+const POLY_WIN = 30, VWMA_WIN = 50, FLOW_SPAN = 50;
+const VPIN_BUCKET = 0.5, VPIN_BUCKETS = 20;
+let ops;
+function buildOps() {
+  ops = {
+    poly:  S.RollingPoly1(POLY_WIN, 0),
+    sumPV: S.RollingSum(VWMA_WIN),
+    sumV:  S.RollingSum(VWMA_WIN),
+    ewS:   S.EwMean(undefined, FLOW_SPAN),
+    ewA:   S.EwMean(undefined, FLOW_SPAN),
+    vpin:  S.VPIN(VPIN_BUCKET, VPIN_BUCKETS),
+  };
+}
+function disposeOps() { if (ops) for (const k in ops) ops[k].dispose(); }
+
+let N = 240;                 // samples shown
+let prices = [], lowlag = [], fair = [], flow = [], vpin = [];
+let vpinLatest = NaN, signalName = "flow";
+let paused = false, dirty = true;
+const arrivals = [];
+
+// The clock decides what one plotted sample is: a single trade (count clock), or
+// a fixed slice of volume (volume clock). A volume clock collapses a burst of
+// micro-trades into a few bars instead of a long stretch of near-flat prints.
+let clock = { mode: "count", factor: 0 };
+let bucket = null, avgSize = 0;
+
+function reset() {
+  disposeOps(); buildOps();
+  prices = []; lowlag = []; fair = []; flow = []; vpin = [];
+  vpinLatest = NaN; bucket = null; avgSize = 0;
+  arrivals.length = 0; dirty = true;
+}
+buildOps();
+
+function onTrade(price, size, sign) {
+  arrivals.push(performance.now());              // trades/sec always counts raw trades
+  document.getElementById("last").textContent = fmt(price);
+  avgSize = avgSize > 0 ? avgSize * 0.99 + size * 0.01 : size;   // slow EWMA, burst-resistant
+  const buy = sign > 0 ? size : 0, sell = sign < 0 ? size : 0;
+  vpinLatest = ops.vpin(buy, sell);
+
+  if (clock.mode === "count") { addSample(price, size, sign * size); return; }
+
+  // Volume clock: accumulate into a bucket until it holds a target slice of
+  // volume, then emit one bar (its VWAP, its volume, its net signed flow).
+  if (!bucket) bucket = { vol: 0, signed: 0, pv: 0 };
+  bucket.vol += size; bucket.signed += sign * size; bucket.pv += price * size;
+  if (bucket.vol >= avgSize * clock.factor) {
+    addSample(bucket.pv / bucket.vol, bucket.vol, bucket.signed);
+    bucket = null;
+  }
+}
+
+// One plotted sample, fed through the operators. `signedVol` is net signed
+// volume (sign*size for a single trade, the bucket's net for a volume bar).
+function addSample(price, size, signedVol) {
+  const ll = ops.poly(price);
+  const pv = ops.sumPV(price * size), v = ops.sumV(size);
+  const vw = v > 0 ? pv / v : NaN;
+  const sv = ops.ewS(signedVol), av = ops.ewA(size);
+  const of = av > 0 ? Math.max(-1, Math.min(1, sv / av)) : 0;
+
+  prices.push(price); lowlag.push(ll); fair.push(vw); flow.push(of); vpin.push(vpinLatest);
+  while (prices.length > N) { prices.shift(); lowlag.shift(); fair.shift(); flow.shift(); vpin.shift(); }
+  dirty = true;
+}
+
+// ---------------------------------------------------------------------------
+// Public trade feeds. Each yields { price, size, sign } where sign is the
+// aggressor: +1 when a buyer lifted the offer, -1 when a seller hit the bid.
+// ---------------------------------------------------------------------------
+const FEEDS = {
+  coinbase: {
+    label: "Coinbase BTC-USD",
+    url: "wss://ws-feed.exchange.coinbase.com",
+    onopen: (ws) => ws.send(JSON.stringify({
+      type: "subscribe", product_ids: ["BTC-USD"], channels: ["matches"],
+    })),
+    parse: (m) => {
+      if (m.type !== "match" && m.type !== "last_match") return null;
+      const price = parseFloat(m.price), size = parseFloat(m.size);
+      if (!Number.isFinite(price) || !Number.isFinite(size)) return null;
+      // Coinbase `side` is the resting (maker) side; the aggressor is the opposite.
+      return { price, size, sign: m.side === "sell" ? 1 : -1 };
+    },
+  },
+  binance: {
+    label: "Binance BTC/USDT",
+    url: "wss://stream.binance.com:9443/ws/btcusdt@trade",
+    onopen: null,
+    parse: (m) => {
+      if (m.e !== "trade") return null;
+      const price = parseFloat(m.p), size = parseFloat(m.q);
+      if (!Number.isFinite(price) || !Number.isFinite(size)) return null;
+      // m.m = buyer is the maker, so the seller is the aggressor.
+      return { price, size, sign: m.m ? -1 : 1 };
+    },
+  },
+};
+
+let ws = null, source = "coinbase", retry = 0, reconnectTimer = null;
+
+function setStatus(state, text) {
+  document.getElementById("dot").className = "dot " + (state || "");
+  document.getElementById("status").textContent = text;
+}
+function connect() {
+  clearTimeout(reconnectTimer);
+  const feed = FEEDS[source];
+  setStatus("connecting", "connecting to " + feed.label + "…");
+  let sock;
+  try { sock = new WebSocket(feed.url); } catch { scheduleReconnect(); return; }
+  ws = sock;
+  sock.onopen = () => { retry = 0; if (feed.onopen) feed.onopen(sock); setStatus("live", "live · " + feed.label); };
+  sock.onmessage = (ev) => {
+    if (paused) return;
+    let m; try { m = JSON.parse(ev.data); } catch { return; }
+    const t = feed.parse(m);
+    if (t) onTrade(t.price, t.size, t.sign);
+  };
+  sock.onerror = () => { try { sock.close(); } catch {} };
+  sock.onclose = () => { if (sock !== ws) return; setStatus("dead", "disconnected · retrying…"); scheduleReconnect(); };
+}
+function scheduleReconnect() { retry = Math.min(retry + 1, 6); reconnectTimer = setTimeout(connect, 400 * retry); }
+function switchFeed(next) { source = next; if (ws) { ws.onclose = null; try { ws.close(); } catch {} ws = null; } reset(); connect(); }
+
+// ---------------------------------------------------------------------------
+// Rendering: a price panel (raw trades, low-lag price, fair value) over a slim
+// order-flow strip (buy pressure green above zero, sell pressure red below).
+// The price axis is scaled from the raw trades only.
+// ---------------------------------------------------------------------------
+const canvas = document.getElementById("chart");
+const ctx = canvas.getContext("2d");
+let cssW = 0, cssH = 0, dpr = 1;
+function resize() {
+  const r = canvas.getBoundingClientRect();
+  cssW = Math.max(320, r.width); cssH = Math.max(300, r.height);
+  dpr = window.devicePixelRatio || 1;
+  canvas.width = Math.round(cssW * dpr); canvas.height = Math.round(cssH * dpr);
+  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+  dirty = true;
+}
+window.addEventListener("resize", resize);
+
+const PADL = 12, PADR = 74, PADT = 12, PADB = 18;
+
+function fmt(v) {
+  return Number.isFinite(v) ? v.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 }) : "—";
+}
+function lastFinite(a) { for (let i = a.length - 1; i >= 0; i--) if (Number.isFinite(a[i])) return a[i]; return NaN; }
+
+function render() {
+  requestAnimationFrame(render);
+  const now = performance.now();
+  while (arrivals.length && now - arrivals[0] > 1000) arrivals.shift();
+  document.getElementById("rate").textContent = arrivals.length;
+
+  if (!dirty) return;
+  dirty = false;
+
+  ctx.clearRect(0, 0, cssW, cssH);
+  const plotW = cssW - PADL - PADR, plotH = cssH - PADT - PADB;
+  const priceH = plotH * 0.70, gap = plotH * 0.07, flowH = plotH - priceH - gap;
+  const priceTop = PADT, flowTop = PADT + priceH + gap;
+
+  const finite = prices.filter(Number.isFinite);
+  if (finite.length < 2) {
+    ctx.fillStyle = "#8b949e"; ctx.font = "13px -apple-system, sans-serif"; ctx.textAlign = "center";
+    ctx.fillText("waiting for trades…", PADL + plotW / 2, priceTop + priceH / 2);
+    return;
+  }
+
+  let lo = Math.min(...finite), hi = Math.max(...finite);
+  for (const v of fair) if (Number.isFinite(v)) { lo = Math.min(lo, v); hi = Math.max(hi, v); }
+  if (hi - lo < 1e-9) { hi += 1; lo -= 1; }
+  const pad = (hi - lo) * 0.08; lo -= pad; hi += pad;
+
+  const len = prices.length, step = plotW / (N - 1);
+  const X = (i) => PADL + plotW - (len - 1 - i) * step;
+  const Yp = (p) => priceTop + (1 - (p - lo) / (hi - lo)) * priceH;
+  const Yf = (v) => flowTop + (1 - (v + 1) / 2) * flowH;
+  const zeroY = Yf(0);
+
+  // price grid + right labels
+  ctx.strokeStyle = "#232a33"; ctx.fillStyle = "#8b949e"; ctx.lineWidth = 1;
+  ctx.font = "11px ui-monospace, Menlo, monospace"; ctx.textAlign = "left";
+  for (let k = 0; k <= 4; k++) {
+    const y = priceTop + (k / 4) * priceH;
+    ctx.beginPath(); ctx.moveTo(PADL, y); ctx.lineTo(PADL + plotW, y); ctx.stroke();
+    ctx.fillText(fmt(hi - (k / 4) * (hi - lo)), PADL + plotW + 8, y + 3);
+  }
+
+  // price lines, clipped to the price panel
+  ctx.save(); ctx.beginPath(); ctx.rect(PADL, priceTop, plotW, priceH); ctx.clip();
+  line(prices, "#6e7681", 1, 0.5, X, Yp);
+  line(fair,   "#58a6ff", 1.4, 0.9, X, Yp);
+  line(lowlag, "#f5a623", 1.9, 1, X, Yp);
+  ctx.restore();
+
+  // The lower panel can show either the existing order-flow read or VPIN.
+  const nowFlow = lastFinite(flow), nowVpin = lastFinite(vpin);
+  document.getElementById("v_lowlag").textContent = fmt(lastFinite(lowlag));
+  document.getElementById("v_fair").textContent = fmt(lastFinite(fair));
+  const pill = document.getElementById("bias"), txt = document.getElementById("biastxt");
+  document.getElementById("signalLabel").textContent = signalName === "vpin" ? "VPIN" : "flow";
+  document.getElementById("signalLegend").textContent = signalName === "vpin" ? "VPIN (0–1, higher = more one-sided)" : "order-flow pressure (buy / sell)";
+  if (signalName === "vpin") {
+    const Yv = (v) => flowTop + (1 - v) * flowH;
+    ctx.strokeStyle = "#2c333d"; ctx.beginPath(); ctx.moveTo(PADL, Yv(0.5)); ctx.lineTo(PADL + plotW, Yv(0.5)); ctx.stroke();
+    ctx.fillStyle = "#8b949e"; ctx.textAlign = "left"; ctx.fillText("VPIN", PADL + 2, flowTop + 10);
+    ctx.font = "11px ui-monospace, Menlo, monospace"; ctx.fillText("1.00", PADL + plotW + 8, flowTop + 3); ctx.fillText("0.00", PADL + plotW + 8, flowTop + flowH + 3);
+    line(vpin, "#d29922", 1.8, 1, X, Yv);
+    pill.className = "pill"; txt.textContent = Number.isFinite(nowVpin) ? nowVpin.toFixed(2) : "warming up";
+  } else {
+    // order-flow strip: zero line, green fill above, red fill below
+    ctx.strokeStyle = "#2c333d"; ctx.beginPath(); ctx.moveTo(PADL, zeroY); ctx.lineTo(PADL + plotW, zeroY); ctx.stroke();
+    ctx.fillStyle = "#8b949e"; ctx.textAlign = "left"; ctx.fillText("order flow", PADL + 2, flowTop + 10);
+    fillFlow(flow, X, Yf, zeroY, "#3fb950", PADL, flowTop, plotW, zeroY - flowTop);
+    fillFlow(flow, X, Yf, zeroY, "#f85149", PADL, zeroY, plotW, flowTop + flowH - zeroY);
+    if (Number.isFinite(nowFlow) && nowFlow > 0.05) { pill.className = "pill buy"; txt.textContent = "buyers " + Math.round(nowFlow * 100) + "%"; }
+    else if (Number.isFinite(nowFlow) && nowFlow < -0.05) { pill.className = "pill sell"; txt.textContent = "sellers " + Math.round(-nowFlow * 100) + "%"; }
+    else { pill.className = "pill"; txt.textContent = "balanced"; }
+  }
+}
+
+function line(arr, color, w, alpha, X, Yp) {
+  ctx.strokeStyle = color; ctx.lineWidth = w; ctx.globalAlpha = alpha; ctx.lineJoin = "round";
+  ctx.beginPath(); let pen = false;
+  for (let i = 0; i < arr.length; i++) {
+    const v = arr[i];
+    if (!Number.isFinite(v)) { pen = false; continue; }
+    const x = X(i), y = Yp(v);
+    if (pen) ctx.lineTo(x, y); else { ctx.moveTo(x, y); pen = true; }
+  }
+  ctx.stroke(); ctx.globalAlpha = 1;
+}
+
+// Fill the area between the flow line and the zero line, clipped to a rectangle
+// so only the above-zero (green) or below-zero (red) part shows.
+function fillFlow(arr, X, Yf, zeroY, color, cx, cy, cw, ch) {
+  const len = arr.length; if (len < 2) return;
+  ctx.save(); ctx.beginPath(); ctx.rect(cx, cy, cw, ch); ctx.clip();
+  ctx.fillStyle = color; ctx.globalAlpha = 0.55; ctx.beginPath();
+  ctx.moveTo(X(0), zeroY);
+  for (let i = 0; i < len; i++) ctx.lineTo(X(i), Yf(Number.isFinite(arr[i]) ? arr[i] : 0));
+  ctx.lineTo(X(len - 1), zeroY); ctx.closePath(); ctx.fill();
+  ctx.globalAlpha = 1; ctx.restore();
+}
+
+// ---------------------------------------------------------------------------
+document.getElementById("source").addEventListener("change", (e) => switchFeed(e.target.value));
+document.getElementById("signal").addEventListener("change", (e) => { signalName = e.target.value; dirty = true; });
+document.getElementById("window").addEventListener("change", (e) => {
+  const [t, n] = e.target.value.split(":");
+  const next = t === "vol" ? { mode: "volume", factor: +n, N: 240 } : { mode: "count", factor: 0, N: +n };
+  const sameMode = next.mode === clock.mode && next.factor === clock.factor;
+  clock = { mode: next.mode, factor: next.factor }; N = next.N;
+  if (sameMode) {
+    while (prices.length > N) { prices.shift(); lowlag.shift(); fair.shift(); flow.shift(); vpin.shift(); }
+    dirty = true;
+  } else reset();  // clock type changed: the samples mean something different, start clean
+});
+document.getElementById("pause").addEventListener("click", (e) => { paused = !paused; e.target.textContent = paused ? "Resume" : "Pause"; });
+document.getElementById("reset").addEventListener("click", reset);
+
+resize();
+connect();
+requestAnimationFrame(render);
+</script>
+</body>
+</html>

{screamer-2.2.0 → screamer-2.3.0}/js/package-lock.json

@@ -10,6 +10,7 @@
       "license": "MIT",
       "devDependencies": {
         "@types/node": "^20.0.0",
+        "esbuild": "^0.28.1",
         "tsx": "^4.0.0",
         "typedoc": "^0.28.20",
         "typescript": "^5.5.0"