@stocksharp/trading-controls 1.1.1 → 1.3.0

package/src/active-orders-widget.ts

@@ -34,10 +34,9 @@ export const OrderStates = {
     Cancelled: 7,
 } as const;
 
-/// What the blotter needs beyond the host port. All required: a panel that
-/// cannot cancel, modify or reload its orders is not this panel.
-export interface ActiveOrdersDeps {
-    host: TradingHost;
+/// The gestures that reach a venue. All required together: a panel that can
+/// cancel one order but not all of them is a panel half-wired.
+export interface ActiveOrdersActions {
     cancelOrder(orderId: number): void;
     dismissOrder(orderId: number): void;
     editOrderField(orderId: number, field: string): void;
@@ -46,6 +45,18 @@ export interface ActiveOrdersDeps {
     refreshOrders(): void;
 }
 
+/// What the blotter needs beyond the host port, in one of two shapes.
+///
+/// A live blotter carries every action, because a panel that cannot cancel,
+/// modify or reload its orders is not that panel. A read-only one carries none:
+/// over a finished run - a backtest report, an archived session - there is no
+/// venue left to reach, and the gestures that would reach it are not rendered
+/// rather than rendered and wired to nothing. The union states that, so a live
+/// consumer still cannot omit an action by accident.
+export type ActiveOrdersDeps =
+    | ({ host: TradingHost; readOnly?: false } & ActiveOrdersActions)
+    | { host: TradingHost; readOnly: true };
+
 export class ActiveOrdersWidget {
     static TYPE = ControlTypes.ActiveOrders;
 
@@ -54,6 +65,8 @@ export class ActiveOrdersWidget {
     // `//` rather than `///` from here down — see the note in positions-widget.
     _host: TradingHost;
     _deps: ActiveOrdersDeps;
+    _readOnly: boolean;
+    _actions: ActiveOrdersActions | null;
     _closeBtn: HTMLElement | null;
     _cancelAllBtn: HTMLElement | null;
     _refreshBtn: HTMLElement | null;
@@ -66,7 +79,7 @@ export class ActiveOrdersWidget {
         // host, so a missing host has to fail here rather than render a panel
         // captioned with raw English keys.
         const host = assertHost(deps?.host, 'ActiveOrdersWidget');
-        const root = ActiveOrdersWidget._buildRoot(host);
+        const root = ActiveOrdersWidget._buildRoot(host, deps?.readOnly === true);
         root.id = makePanelId(ActiveOrdersWidget.TYPE);
         hostEl.appendChild(root);
         return new ActiveOrdersWidget(root, state || {}, deps);
@@ -83,7 +96,7 @@ export class ActiveOrdersWidget {
     // already give the identical button — and are wired to deps. Cancel-all
     // keeps a distinct accessible name from its tooltip, which is why it states
     // `aria-label` rather than taking the tooltip for both.
-    static _buildRoot(host: TradingHost): HTMLElement {
+    static _buildRoot(host: TradingHost, readOnly = false): HTMLElement {
         return makePanelRoot('active-orders-panel', host.t('ActiveOrders'), [
             makeElement('div', 'panel-header', {}, [
                 makeElement('span', '', {}, [host.t('OpenOrders')]),
@@ -97,9 +110,11 @@ export class ActiveOrdersWidget {
                     ]),
                 ]),
                 makeElement('div', 'panel-rail', { role: 'toolbar', 'aria-label': host.t('ActiveOrdersActions') }, [
-                    makeIconButton('bt-icon-btn bt-icon-cancel-all panel-cancel-all-btn', host.t('CancelAll'), 'bi-x-circle',
-                        { 'aria-label': host.t('CancelAllOrders') }),
-                    makeIconButton('bt-icon-btn panel-refresh-btn', host.t('Refresh'), 'bi-arrow-clockwise', {}),
+                    ...(readOnly ? [] : [
+                        makeIconButton('bt-icon-btn bt-icon-cancel-all panel-cancel-all-btn', host.t('CancelAll'), 'bi-x-circle',
+                            { 'aria-label': host.t('CancelAllOrders') }),
+                        makeIconButton('bt-icon-btn panel-refresh-btn', host.t('Refresh'), 'bi-arrow-clockwise', {}),
+                    ]),
                     makeIconButton('bt-icon-btn panel-export-btn', host.t('ExportToExcel'), 'bi-file-earmark-spreadsheet', {}),
                 ]),
             ]),
@@ -108,9 +123,16 @@ export class ActiveOrdersWidget {
 
     constructor(rootEl: HTMLElement, _state: Record<string, unknown>, deps: ActiveOrdersDeps) {
         this._host = assertHost(deps?.host, 'ActiveOrdersWidget');
-        for (const name of ['cancelOrder', 'dismissOrder', 'editOrderField', 'replaceOrder', 'cancelAllOrders', 'refreshOrders'] as const) {
-            if (typeof deps?.[name] !== 'function')
-                throw new Error(`ActiveOrdersWidget: dep "${name}" is required`);
+        this._readOnly = deps?.readOnly === true;
+        if (this._readOnly) {
+            this._actions = null;
+        } else {
+            const actions = deps as ActiveOrdersActions;
+            for (const name of ['cancelOrder', 'dismissOrder', 'editOrderField', 'replaceOrder', 'cancelAllOrders', 'refreshOrders'] as const) {
+                if (typeof actions?.[name] !== 'function')
+                    throw new Error(`ActiveOrdersWidget: dep "${name}" is required`);
+            }
+            this._actions = actions;
         }
 
         this.rootEl = rootEl;
@@ -129,12 +151,12 @@ export class ActiveOrdersWidget {
 
         this._cancelAllBtn?.addEventListener('click', (e) => {
             e.preventDefault();
-            this._deps.cancelAllOrders();
+            this._actions?.cancelAllOrders();
         });
 
         this._refreshBtn?.addEventListener('click', (e) => {
             e.preventDefault();
-            this._deps.refreshOrders();
+            this._actions?.refreshOrders();
         });
 
         this._exportBtn?.addEventListener('click', (e) => {
@@ -246,7 +268,7 @@ export class ActiveOrdersWidget {
             if (newVal === currentValue) { this.update(this._orders); return; }
             const updated = { quantity: order.quantity, limitPrice: order.limitPrice, stopPrice: order.stopPrice };
             updated[field] = newVal;
-            this._deps.replaceOrder(orderId, updated.quantity!, updated.limitPrice!, updated.stopPrice!);
+            this._actions?.replaceOrder(orderId, updated.quantity!, updated.limitPrice!, updated.stopPrice!);
         };
         input.addEventListener('blur', commit);
         input.addEventListener('keydown', (e) => {
@@ -305,7 +327,7 @@ export class ActiveOrdersWidget {
                 exportable: true,
                 value: (o) => o.quantity,
                 render: (o) => formatQty(o.quantity),
-                cellClass: (o) => ActiveOrdersWidget._editableClass(o, 'quantity'),
+                cellClass: (o) => this._readOnly ? '' : ActiveOrdersWidget._editableClass(o, 'quantity'),
                 bindCell: (td, o) => this._bindInlineEdit(td, o, 'quantity'),
             },
             {
@@ -314,7 +336,7 @@ export class ActiveOrdersWidget {
                 exportable: true,
                 value: (o) => o.limitPrice,
                 render: (o) => o.limitPrice ? formatPrice(o.limitPrice) : label('MKT'),
-                cellClass: (o) => ActiveOrdersWidget._editableClass(o, 'limitPrice'),
+                cellClass: (o) => this._readOnly ? '' : ActiveOrdersWidget._editableClass(o, 'limitPrice'),
                 bindCell: (td, o) => this._bindInlineEdit(td, o, 'limitPrice'),
                 exportValue: (o) => o.limitPrice ?? label('MKT'),
             },
@@ -324,7 +346,7 @@ export class ActiveOrdersWidget {
                 exportable: true,
                 value: (o) => o.stopPrice,
                 render: (o) => o.stopPrice ? formatPrice(o.stopPrice) : '--',
-                cellClass: (o) => ActiveOrdersWidget._editableClass(o, 'stopPrice'),
+                cellClass: (o) => this._readOnly ? '' : ActiveOrdersWidget._editableClass(o, 'stopPrice'),
                 bindCell: (td, o) => this._bindInlineEdit(td, o, 'stopPrice'),
                 exportValue: (o) => o.stopPrice ?? '',
             },
@@ -336,14 +358,14 @@ export class ActiveOrdersWidget {
                 render: (o) => this._statusCell(o),
                 exportValue: (o) => presentation.statusText(o.status!),
             },
-            {
+            ...(this._readOnly ? [] : [{
                 key: 'actions',
                 header: label('Actions'),
                 headerHidden: true,
                 exportable: false,
                 cellClass: () => 'position-actions',
-                render: (o) => this._actionButton(o),
-            },
+                render: (o: OrderRow) => this._actionButton(o),
+            } as GridColumn<OrderRow>]),
         ];
     }
 
@@ -369,8 +391,9 @@ export class ActiveOrdersWidget {
     // Double-click to edit belongs to the whole cell rather than to a control
     // inside it, which is why it is wired here instead of returned by render().
     _bindInlineEdit(td: HTMLTableCellElement, order: OrderRow, field: 'quantity' | 'limitPrice' | 'stopPrice'): void {
-        if (!ActiveOrdersWidget._canEdit(order, field)) return;
-        td.addEventListener('dblclick', () => this._deps.editOrderField(order.id!, field));
+        if (this._actions === null || !ActiveOrdersWidget._canEdit(order, field)) return;
+        const edit = this._actions.editOrderField;
+        td.addEventListener('dblclick', () => edit(order.id!, field));
     }
 
     // Status text, plus a hoverable icon carrying the rejection reason. Some
@@ -412,8 +435,9 @@ export class ActiveOrdersWidget {
         icon.className = 'bi bi-x-circle';
         button.appendChild(icon);
         button.addEventListener('click', () => {
-            if (isTerminal) this._deps.dismissOrder(order.id!);
-            else this._deps.cancelOrder(order.id!);
+            if (this._actions === null) return;
+            if (isTerminal) this._actions.dismissOrder(order.id!);
+            else this._actions.cancelOrder(order.id!);
         });
         return button;
     }

package/src/black-scholes.ts

@@ -0,0 +1,199 @@
+// Option pricing and the greeks, as pure functions.
+//
+// The desktop desk gets these from StockSharp.Algo.Derivatives, which a browser cannot call. A
+// host could compute them and send them down, and one that already does should - the desk takes
+// them either way. But a host that has bid, ask and an expiry has everything the arithmetic
+// needs, and making it stand up a pricing service before it can draw a chain is a poor trade.
+//
+// So the maths ships, and it ships here, apart from the control: a wrong greek is not visible
+// on screen the way a wrong column is, and the only defence is checking the numbers against
+// values that are known.
+//
+// Conventions follow the desk that reads them, not the textbook: vega is per one point of
+// volatility, theta is per calendar day, and rho is per one point of rate - the units a trader
+// works in, rather than per 1.0 of each, which nobody quotes.
+
+export const OptionTypes = {
+    Call: 'call',
+    Put: 'put',
+} as const;
+
+export type OptionType = typeof OptionTypes[keyof typeof OptionTypes];
+
+/// Everything a price depends on. Time is in years, rates and volatility are fractions - 0.05
+/// is five percent, not five.
+export interface OptionInputs {
+    assetPrice: number;
+    strike: number;
+    /// Years remaining. Zero once expired, which makes every greek zero and the premium
+    /// intrinsic.
+    timeToExpiry: number;
+    riskFree: number;
+    dividend: number;
+    /// Volatility, as a fraction.
+    deviation: number;
+}
+
+export interface Greeks {
+    delta: number;
+    gamma: number;
+    /// Per one point of volatility.
+    vega: number;
+    /// Per calendar day.
+    theta: number;
+    /// Per one point of rate.
+    rho: number;
+}
+
+const SQRT_2PI = Math.sqrt(2 * Math.PI);
+const DAYS_IN_YEAR = 365;
+
+/// The standard normal CDF.
+///
+/// Hart's rational approximation, which is what pricing libraries use and what a desk's numbers
+/// are expected to agree with: accurate to about 1e-15 across the range, and exactly a half at
+/// the mean rather than nearly so. The cheaper Abramowitz-and-Stegun fit is good to 1e-7, which
+/// sounds like enough until a greek that should be symmetric is not.
+export function normalCdf(x: number): number {
+    const z = Math.abs(x);
+
+    // Beyond this the tail is smaller than double precision can carry anyway.
+    if (z > 37) return x > 0 ? 1 : 0;
+
+    const e = Math.exp(-(z * z) / 2);
+    let tail: number;
+
+    if (z < 7.07106781186547) {
+        let b = 3.52624965998911e-02 * z + 0.700383064443688;
+        b = b * z + 6.37396220353165;
+        b = b * z + 33.912866078383;
+        b = b * z + 112.079291497871;
+        b = b * z + 221.213596169931;
+        b = b * z + 220.206867912376;
+
+        let d = 8.83883476483184e-02 * z + 1.75566716318264;
+        d = d * z + 16.064177579207;
+        d = d * z + 86.7807322029461;
+        d = d * z + 296.564248779674;
+        d = d * z + 637.333633378831;
+        d = d * z + 793.826512519948;
+        d = d * z + 440.413735824752;
+
+        tail = (e * b) / d;
+    } else {
+        // A continued fraction, which is what stays accurate once the polynomial ratio above
+        // starts losing digits to cancellation.
+        let b = z + 0.65;
+        b = z + 4 / b;
+        b = z + 3 / b;
+        b = z + 2 / b;
+        b = z + 1 / b;
+        tail = e / (b * 2.506628274631);
+    }
+
+    return x > 0 ? 1 - tail : tail;
+}
+
+/// The standard normal density.
+export function normalPdf(x: number): number {
+    return Math.exp(-0.5 * x * x) / SQRT_2PI;
+}
+
+/// d1, or zero when there is no time or no volatility for the division to mean anything.
+export function d1(inputs: OptionInputs): number {
+    const { assetPrice, strike, timeToExpiry, riskFree, dividend, deviation } = inputs;
+    const spread = deviation * Math.sqrt(timeToExpiry);
+
+    if (spread === 0 || assetPrice <= 0 || strike <= 0) return 0;
+
+    return (Math.log(assetPrice / strike) + (riskFree - dividend + (deviation * deviation) / 2) * timeToExpiry) / spread;
+}
+
+/// d2, which is d1 less one standard deviation of the remaining time.
+export function d2(inputs: OptionInputs): number {
+    const spread = inputs.deviation * Math.sqrt(inputs.timeToExpiry);
+    return spread === 0 ? 0 : d1(inputs) - spread;
+}
+
+/// What the option is worth.
+///
+/// At expiry, or with no volatility, that is its intrinsic value - the formula degenerates to
+/// exactly that, and saying so explicitly keeps a zero denominator out of the general case.
+export function premium(type: OptionType, inputs: OptionInputs): number {
+    const { assetPrice, strike, timeToExpiry, riskFree, dividend, deviation } = inputs;
+
+    if (timeToExpiry <= 0 || deviation <= 0)
+        return Math.max(0, type === OptionTypes.Call ? assetPrice - strike : strike - assetPrice);
+
+    const a = d1(inputs);
+    const b = d2(inputs);
+    const carried = assetPrice * Math.exp(-dividend * timeToExpiry);
+    const discounted = strike * Math.exp(-riskFree * timeToExpiry);
+
+    return type === OptionTypes.Call
+        ? carried * normalCdf(a) - discounted * normalCdf(b)
+        : discounted * normalCdf(-b) - carried * normalCdf(-a);
+}
+
+/// Every greek at once: they share d1, and computing them together is both cheaper and the only
+/// way they are guaranteed to describe the same moment.
+export function greeks(type: OptionType, inputs: OptionInputs): Greeks {
+    const { assetPrice, strike, timeToExpiry, riskFree, dividend, deviation } = inputs;
+    const sign = type === OptionTypes.Call ? 1 : -1;
+
+    if (timeToExpiry <= 0 || deviation <= 0 || assetPrice <= 0) {
+        // An expired option still has a delta - it is one or nothing, depending on which side of
+        // the strike it finished. Everything else has stopped moving.
+        const inTheMoney = type === OptionTypes.Call ? assetPrice > strike : assetPrice < strike;
+        return { delta: inTheMoney ? sign : 0, gamma: 0, vega: 0, theta: 0, rho: 0 };
+    }
+
+    const a = d1(inputs);
+    const b = d2(inputs);
+    const sqrtT = Math.sqrt(timeToExpiry);
+    const density = normalPdf(a);
+    const carry = Math.exp(-dividend * timeToExpiry);
+    const discount = Math.exp(-riskFree * timeToExpiry);
+
+    const delta = sign * carry * normalCdf(sign * a);
+    const gamma = (carry * density) / (assetPrice * deviation * sqrtT);
+
+    // Scaled the way a desk quotes them: vega per one volatility point, rho per one rate point,
+    // theta per calendar day.
+    const vega = assetPrice * carry * density * sqrtT * 0.01;
+    const rho = sign * strike * timeToExpiry * discount * normalCdf(sign * b) * 0.01;
+
+    const theta = (
+        -(assetPrice * carry * density * deviation) / (2 * sqrtT)
+        - sign * riskFree * strike * discount * normalCdf(sign * b)
+        + sign * dividend * assetPrice * carry * normalCdf(sign * a)
+    ) / DAYS_IN_YEAR;
+
+    return { delta, gamma, vega, theta, rho };
+}
+
+/// The volatility that would produce this price, or null when none would.
+///
+/// Bisection rather than Newton: vega collapses far from the money and deep in time, and a
+/// Newton step divided by a vanishing vega walks off to nonsense. Halving cannot, and forty
+/// steps over a range this wide is finer than any quote.
+export function impliedVolatility(type: OptionType, inputs: OptionInputs, price: number): number | null {
+    if (!(price > 0) || inputs.timeToExpiry <= 0) return null;
+
+    const at = (deviation: number): number => premium(type, { ...inputs, deviation });
+
+    let low = 1e-6;
+    let high = 5;
+
+    // A price outside what any volatility in that range can produce has no answer, and
+    // returning the nearest bound would be a number that means nothing.
+    if (price < at(low) || price > at(high)) return null;
+
+    for (let step = 0; step < 60; step++) {
+        const mid = (low + high) / 2;
+        if (at(mid) < price) low = mid;
+        else high = mid;
+    }
+
+    return (low + high) / 2;
+}

package/src/control-types.ts

@@ -22,6 +22,10 @@ export const ControlTypes = {
     OrderBook: 'orderbook',
     TradeFeed: 'tradefeed',
     OrderEntry: 'orderEntry',
+    Statistics: 'statistics',
+    LogMonitor: 'logMonitor',
+    Strategies: 'strategies',
+    OptionDesk: 'optionDesk',
 } as const;
 
 export type ControlType = typeof ControlTypes[keyof typeof ControlTypes];

package/src/index.ts

@@ -21,6 +21,7 @@ export type {
     OrderType,
     PositionRow,
     QuoteStats,
+    StatisticRow,
     TradeRow,
 } from './trading-data.js';
 
@@ -67,6 +68,41 @@ export type { BookLevel, OrderBookFrame, QuoteLevel } from './trading-data.js';
 // where a class name cannot reach.
 export type { CanvasPalette } from './trading-host.js';
 
+// The cumulative P&L curve, shared by everything that draws one: a strategy row's
+// sparkline and a statistics card are the same curve at two sizes. A backtest's own
+// equity is not here - that one shares the price axis and belongs to the chart engine.
+export { compressPnl, drawPnlCurve, pnlCurve } from './pnl-curve.js';
+
+export type { PnlBox, PnlCurve, PnlCurveContext, PnlCurveStyle, PnlPoint } from './pnl-curve.js';
+
+export { OptionDeskWidget, greekPlaces, greekScales, scaleChain, sideGreeks } from './option-desk-widget.js';
+
+export type { OptionChainContext, OptionDeskDeps, OptionSide, OptionStrike } from './option-desk-widget.js';
+
+// Option pricing, for a host that has quotes and an expiry but no pricing service. A host
+// that computes its own greeks sends them instead and none of this is reached.
+export { OptionTypes, d1, d2, greeks, impliedVolatility, normalCdf, normalPdf, premium } from './black-scholes.js';
+
+export type { Greeks, OptionInputs, OptionType } from './black-scholes.js';
+
+export { StrategiesWidget, StrategyStates } from './strategies-widget.js';
+
+export type { StrategiesActions, StrategiesDeps, StrategyRow, StrategyState } from './strategies-widget.js';
+
+export { LogMonitorWidget } from './log-monitor-widget.js';
+
+export type { LogMonitorDeps } from './log-monitor-widget.js';
+
+// The log's own shapes: how sources nest, and which messages a view of them keeps. A host
+// rendering its own view of the same feed reads these rather than reinventing the filter.
+export { LogLevels, buildLogTree, keepLog, subtreeOf } from './log-tree.js';
+
+export type { LogLevel, LogMessageRow, LogSourceNode, LogTreeNode, LogView } from './log-tree.js';
+
+export { StatisticsWidget, formatStatistic } from './statistics-widget.js';
+
+export type { StatisticsDeps } from './statistics-widget.js';
+
 export { TradeFeedWidget } from './tradefeed-widget.js';
 
 export type { TradeFeedDeps } from './tradefeed-widget.js';
@@ -81,3 +117,8 @@ export type { FeedBubble, FeedTick } from './tradefeed-aggregator.js';
 export { layoutBubbles } from './tradefeed-bubbles.js';
 
 export type { BubbleAxisTick, BubbleLane, BubbleLaneShape, BubbleLayout, BubbleLayoutInput, BubbleShape } from './tradefeed-bubbles.js';
+
+// The grid's own menu, worded by the host. Exported because a host that builds a table of its
+// own - a run's log beside the blotters, say - needs the same menu in the same words, and the
+// alternative is every consumer restating thirty labels the package already knows.
+export { makeGridMenu } from './grid-menu.js';