@stocksharp/trading-controls 0.1.0 → 1.1.0

package/src/positions-widget.ts

@@ -15,6 +15,7 @@
 import { formatPnl, formatPrice } from './formatters.js';
 import { makeElement, makeIconButton, makePanelId, makePanelRoot } from './dom.js';
 import { ControlTypes } from './control-types.js';
+import { makeGridMenu } from './grid-menu.js';
 import { TradingHost, assertHost } from './trading-host.js';
 import type { BalanceRow, PositionRow } from './trading-data.js';
 import { DataGrid, GridColumn, GridPinnedRow, GridPinnedPlacements } from '@stocksharp/grids/source/data-grid';
@@ -135,6 +136,11 @@ export class PositionsWidget {
                 // Re-read on every render, so the cash figures track the live balance
                 // without the widget having to repaint the position rows itself.
                 pinnedRows: () => this._pinnedRows(),
+                contextMenu: makeGridMenu(this._host),
+                // Press to mark, drag or Shift to range, Ctrl to toggle, Ctrl+C
+                // to copy — the pinned cash row stays outside the selection the
+                // same way it stays outside the sort.
+                selection: 'multi',
             })
             : null;
 
@@ -145,6 +151,9 @@ export class PositionsWidget {
     }
 
     dispose(): void {
+        // The grid holds document-level listeners (the copy shortcut) that
+        // outlive a removed subtree — it has to be told, not just detached.
+        this._grid?.destroy();
         this._host.unregister(this);
         try { this.rootEl.remove(); } catch { /* already detached */ }
     }

package/src/trade-history-widget.ts

@@ -15,6 +15,7 @@
 import { formatPrice, formatQty, formatTime } from './formatters.js';
 import { makeElement, makeIconButton, makePanelId, makePanelRoot } from './dom.js';
 import { ControlTypes } from './control-types.js';
+import { makeGridMenu } from './grid-menu.js';
 import { TradingHost, assertHost } from './trading-host.js';
 import type { TradeRow } from './trading-data.js';
 import { DataGrid, GridColumn } from '@stocksharp/grids/source/data-grid';
@@ -109,6 +110,10 @@ export class TradeHistoryWidget {
                 defaultSort: { col: 'time', dir: 'desc' },
                 rowKey: (t) => String(t.id),
                 emptyText: this._host.t('No trade history'),
+                contextMenu: makeGridMenu(this._host),
+                // Press to mark, drag or Shift to range, Ctrl to toggle, Ctrl+C
+                // to copy — all the grid's own.
+                selection: 'multi',
             })
             : null;
 
@@ -116,6 +121,9 @@ export class TradeHistoryWidget {
     }
 
     dispose(): void {
+        // The grid holds document-level listeners (the copy shortcut) that
+        // outlive a removed subtree — it has to be told, not just detached.
+        this._grid?.destroy();
         this._host.unregister(this);
         try { this.rootEl.remove(); } catch { /* already detached */ }
     }

package/src/tradefeed-aggregator.ts

@@ -0,0 +1,95 @@
+// Bubble compaction for a tape.
+//
+// One lane of a bubble chart is one symbol's ticks, and a busy symbol delivers
+// far more of them than a lane has room for: drawn one circle per print, the
+// lane melts into a solid wall. Bucketing by time slice and side turns that
+// back into something readable — at most two bubbles per slice, each placed at
+// its slice's volume-weighted average price and sized by its summed volume.
+//
+// Pure: no DOM, no host, no clock. The trade feed renders what comes out of
+// here, which is what lets the arithmetic a busy symbol depends on be covered
+// directly rather than through a canvas.
+import type { OrderSide } from './trading-data.js';
+
+/// One print, with the two things the tape has already decided about it: which
+/// direction it went, and where it sits on the shared time axis.
+///
+/// `buy` is resolved by the host's presentation before a tick reaches this
+/// module — the wire spells a side three ways and normalising it is the host's
+/// job, not this file's — while `side` keeps the raw value, because wording it
+/// is the host's job too and only it can do that. `index` is the tick's
+/// position in the WHOLE feed rather than in its lane, so two symbols with
+/// wildly different prices still flow along one time axis.
+export interface FeedTick {
+    symbol: string;
+    side: OrderSide;
+    buy: boolean;
+    price: number;
+    quantity: number;
+    time: string;
+    index: number;
+}
+
+/// One bubble: a tick, or the slice of ticks it stands for.
+export interface FeedBubble extends FeedTick {
+    /// How many ticks this bubble represents — 1 when it is a tick itself, and
+    /// what the tooltip reads to say "VWAP" instead of "Price".
+    count: number;
+}
+
+/// Bucket one lane's ticks into at most `maxBucketsPerSide` bubbles per side.
+///
+/// Below that budget every tick passes through as its own one-tick bubble, so a
+/// sparse symbol still shows every print. Above it, each (side, slice) merges
+/// into one bubble. `ticks` is newest-first, which is how the tape holds them,
+/// so the first slice is the most recent block.
+export function aggregateBubbles(ticks: FeedTick[], maxBucketsPerSide: number): FeedBubble[] {
+    if (!ticks || ticks.length === 0) return [];
+    const budget = Math.max(1, Math.floor(maxBucketsPerSide));
+
+    // The two directions compete for the same horizontal room, so each gets its
+    // own budget rather than the busier one crowding the other out.
+    const buys: FeedTick[] = [];
+    const sells: FeedTick[] = [];
+    for (const tick of ticks) (tick.buy ? buys : sells).push(tick);
+
+    const bubbles: FeedBubble[] = [];
+    for (const side of [buys, sells]) {
+        if (side.length === 0) continue;
+        if (side.length <= budget) {
+            for (const tick of side) bubbles.push({ ...tick, count: 1 });
+            continue;
+        }
+        const bucketSize = Math.ceil(side.length / budget);
+        for (let start = 0; start < side.length; start += bucketSize)
+            bubbles.push(merge(side.slice(start, start + bucketSize)));
+    }
+    return bubbles;
+}
+
+/// One slice as a single bubble: total volume, volume-weighted price, and the
+/// slice's middle tick for its position on the time axis.
+function merge(slice: FeedTick[]): FeedBubble {
+    let quantity = 0;
+    let weighted = 0;
+    for (const tick of slice) {
+        const q = tick.quantity || 0;
+        quantity += q;
+        weighted += q * tick.price;
+    }
+    // A slice can legitimately total zero volume (an all-zero-quantity tape is
+    // rare live and ordinary in a fixture), and dividing by it would place the
+    // bubble at NaN — nowhere, silently. Its first price is the honest answer.
+    const price = quantity > 0 ? weighted / quantity : slice[0].price;
+    const middle = slice[Math.floor(slice.length / 2)];
+    return {
+        symbol: slice[0].symbol,
+        side: slice[0].side,
+        buy: slice[0].buy,
+        price,
+        quantity,
+        time: middle.time,
+        index: middle.index,
+        count: slice.length,
+    };
+}

package/src/tradefeed-bubbles.ts

@@ -0,0 +1,194 @@
+// Where every bubble, rule and label of a bubble chart goes.
+//
+// The trade feed's second rendering is a scatter of prints: time along X,
+// price up Y, volume as the radius, direction as the colour. It is drawn on a
+// canvas, which is the one surface a class name cannot reach — so the geometry
+// is computed here, as numbers, and the control does nothing but stroke and
+// fill what comes back.
+//
+// Pure, and that is the point: a fake canvas that swallows drawing calls proves
+// nothing, while the arithmetic below — lanes sharing one time axis, a price
+// scale per symbol, a radius that stays inside its lane — is exactly what can
+// be wrong. It is covered directly.
+import { aggregateBubbles, type FeedBubble, type FeedTick } from './tradefeed-aggregator.js';
+
+/// One symbol's prints. A feed following a single symbol has one unnamed lane;
+/// pinning extras splits the height into one lane each so a $76k symbol and a
+/// $270 one both stay visible instead of one flattening the other.
+export interface BubbleLane {
+    symbol: string;
+    ticks: FeedTick[];
+}
+
+export interface BubbleLayoutInput {
+    width: number;
+    height: number;
+    lanes: BubbleLane[];
+    /// How many ticks the whole feed holds. The X axis is a tick's index in
+    /// that list, so lanes flow along one shared time axis rather than each
+    /// stretching its own count across the full width.
+    total: number;
+}
+
+/// One bubble, placed.
+export interface BubbleShape {
+    x: number;
+    y: number;
+    radius: number;
+    bubble: FeedBubble;
+}
+
+/// One price label on the right-hand axis, and the rule leading to it.
+export interface BubbleAxisTick {
+    text: string;
+    y: number;
+}
+
+/// One lane, placed. `label` is null for a feed following a single symbol —
+/// naming the only lane says nothing — and `separatorY` is null for the first
+/// lane, which has nothing above it to be divided from.
+export interface BubbleLaneShape {
+    symbol: string;
+    label: { x: number; y: number } | null;
+    separatorY: number | null;
+    ticks: BubbleAxisTick[];
+}
+
+export interface BubbleLayout {
+    /// Left edge of the axis strip: rules stop just short of it, labels start
+    /// just past it.
+    axisX: number;
+    /// Where an axis label's text begins.
+    labelX: number;
+    lanes: BubbleLaneShape[];
+    /// Every bubble in draw order — oldest first, so the newest print lands on
+    /// top of what it overlaps. Hit-testing walks this backwards for the same
+    /// reason.
+    bubbles: BubbleShape[];
+}
+
+// Geometry. These are the chart's proportions, not the host's looks: a canvas
+// has no cascade to read them from, and moving them into CSS would only mean
+// reading them back out again.
+const PAD_X = 10;
+const PAD_Y = 10;
+const AXIS_WIDTH = 56;
+const LABEL_GAP = 4;
+const LANE_GAP = 2;
+const MIN_LANE_HEIGHT = 20;
+const AXIS_TICKS = 3;
+const MIN_RADIUS = 2;
+const MAX_RADIUS = 22;
+/// A bubble may grow to this share of its lane's height, so a lane with one
+/// enormous print does not draw a circle taller than the lane it sits in.
+const RADIUS_LANE_SHARE = 0.4;
+/// Horizontal room one bucket wants. Narrower and the lane reads as a wall;
+/// wider and a sparse symbol turns into a handful of lonely dots.
+const BUCKET_WIDTH = 8;
+const MIN_BUCKETS = 6;
+const MAX_BUCKETS = 30;
+
+/// Place every lane and every bubble for one paint.
+export function layoutBubbles(input: BubbleLayoutInput): BubbleLayout {
+    const { width, height, total } = input;
+    const axisX = Math.max(PAD_X + 1, width - AXIS_WIDTH);
+    const drawWidth = Math.max(1, axisX - PAD_X);
+    const layout: BubbleLayout = { axisX, labelX: axisX + LABEL_GAP, lanes: [], bubbles: [] };
+
+    const lanes = input.lanes.filter(lane => lane.ticks.length > 0);
+    if (lanes.length === 0) return layout;
+
+    const named = input.lanes.length > 1;
+    const laneHeight = Math.max(
+        MIN_LANE_HEIGHT,
+        (height - 2 * PAD_Y - LANE_GAP * (input.lanes.length - 1)) / input.lanes.length);
+
+    // Placed against the DECLARED lanes, not the non-empty ones: a symbol that
+    // has not printed yet keeps its slot rather than letting the lanes below it
+    // slide up and back down on its first tick.
+    input.lanes.forEach((lane, position) => {
+        const laneTop = named ? PAD_Y + position * (laneHeight + LANE_GAP) : PAD_Y;
+        const laneSpan = named ? laneHeight : Math.max(MIN_LANE_HEIGHT, height - 2 * PAD_Y);
+        const scale = priceScale(lane.ticks, laneTop, laneSpan);
+
+        layout.lanes.push({
+            symbol: lane.symbol,
+            label: named ? { x: LABEL_GAP, y: laneTop + 2 } : null,
+            separatorY: named && position > 0 ? laneTop - LANE_GAP / 2 : null,
+            ticks: lane.ticks.length === 0 ? [] : axisTicks(scale),
+        });
+
+        if (lane.ticks.length === 0) return;
+        const buckets = Math.max(MIN_BUCKETS, Math.min(MAX_BUCKETS, Math.floor(drawWidth / BUCKET_WIDTH)));
+        const bubbles = aggregateBubbles(lane.ticks, buckets);
+        let maxQuantity = 0;
+        for (const bubble of bubbles) if (bubble.quantity > maxQuantity) maxQuantity = bubble.quantity;
+        const quantityScale = Math.max(maxQuantity, Number.EPSILON);
+        const radiusCap = Math.min(MAX_RADIUS, laneSpan * RADIUS_LANE_SHARE);
+
+        for (const bubble of bubbles) {
+            layout.bubbles.push({
+                // Newest print (index 0) at the right edge, oldest at the left.
+                x: PAD_X + drawWidth * (total <= 1 ? 1 : 1 - bubble.index / (total - 1)),
+                y: scale.top + scale.height * (1 - (bubble.price - scale.min) / scale.range),
+                radius: MIN_RADIUS + Math.sqrt(Math.max(0, bubble.quantity) / quantityScale) * radiusCap,
+                bubble,
+            });
+        }
+    });
+
+    // Oldest first: a later print draws over an earlier one, and the hit test
+    // reads the same list backwards so the circle on top is the one picked.
+    layout.bubbles.sort((left, right) => right.bubble.index - left.bubble.index);
+    return layout;
+}
+
+interface PriceScale {
+    top: number;
+    height: number;
+    min: number;
+    range: number;
+}
+
+/// The lane's price range, as the Y axis. `range` is never zero — a lane whose
+/// prints are all at one price would otherwise divide by it — so a flat lane
+/// draws along its own top edge rather than nowhere.
+function priceScale(ticks: FeedTick[], top: number, height: number): PriceScale {
+    let min = Infinity;
+    let max = -Infinity;
+    for (const tick of ticks) {
+        if (tick.price < min) min = tick.price;
+        if (tick.price > max) max = tick.price;
+    }
+    if (!isFinite(min) || !isFinite(max)) { min = 0; max = 0; }
+    return { top, height, min, range: Math.max(max - min, Number.EPSILON) };
+}
+
+/// Three labels down the lane: its high, its middle and its low.
+function axisTicks(scale: PriceScale): BubbleAxisTick[] {
+    const format = priceFormatter(scale.min, scale.min + scale.range);
+    const ticks: BubbleAxisTick[] = [];
+    for (let step = 0; step < AXIS_TICKS; step++) {
+        const fraction = step / (AXIS_TICKS - 1);
+        ticks.push({
+            text: format((scale.min + scale.range) - scale.range * fraction),
+            y: scale.top + scale.height * fraction,
+        });
+    }
+    return ticks;
+}
+
+/// Decimals chosen from the lane's magnitude. A fixed precision is wrong at
+/// both ends: two decimals on a $76,000 print is noise, and none on a $0.04 one
+/// collapses the whole lane onto a single label.
+export function priceFormatter(min: number, max: number): (price: number) => string {
+    const magnitude = Math.max(Math.abs(min), Math.abs(max));
+    let digits = 6;
+    if (magnitude >= 1000) digits = 0;
+    else if (magnitude >= 10) digits = 2;
+    else if (magnitude >= 0.1) digits = 4;
+    return (price: number) => price.toLocaleString(undefined, {
+        minimumFractionDigits: digits,
+        maximumFractionDigits: digits,
+    });
+}