@stocksharp/trading-controls 1.2.0 → 1.4.0

package/dist/esm/optimization-heatmap-widget.js

@@ -0,0 +1,303 @@
+// Optimisation heatmap - multi-instance.
+//
+// One metric over two parameters: an axis of discrete values across, another up, a cell per pair
+// of them, coloured by what that pair measured. The panel does not know what an optimisation is -
+// a heatmap of a metric over two parameters is the same object whatever produced it - so the
+// pairs are handed in and the two axis names come with them.
+//
+// The map is a <canvas>, the one surface a class name cannot reach: its geometry comes out of
+// `heatmap-grid.ts` as numbers and its colours out of the host's `canvasPalette()`, so nothing
+// here is painted from a palette this package chose. The tooltip is DOM, because it is text.
+//
+// Two things are drawn rather than tabulated and are worth stating. A cell carries no printed
+// number: at the size a forty by forty sweep leaves a cell, digits are unreadable, and reading
+// colour at that size is the entire reason to draw the map. And a pair nobody ran is struck
+// through rather than left blank, because an unrun pair and a pair that measured zero are
+// different facts that a scale with zero at its neutral point would otherwise paint the same.
+import { formatStatistic } from './statistics-widget.js';
+import { makeElement, makeIconButton, makePanelId, makePanelRoot } from './dom.js';
+import { ControlTypes } from './control-types.js';
+import { assertHost } from './trading-host.js';
+import { hitHeatmap, layoutHeatmap } from './heatmap-grid.js';
+// Opacity, not colour. Every hue below is the host's `canvasPalette`; how solid a thing is drawn
+// is the map's own business, and keeping the two apart is what lets one palette serve a light
+// theme and a dark one without the package knowing which it is in.
+//
+// The ground is drawn under every measured cell so that a cell sitting exactly on the anchor -
+// which takes no tint at all - is still visibly a cell. That is also what lets the tint itself
+// go all the way down to nothing without a floor: neutral reads as the ground, and a pair that
+// was never run has no ground under it.
+const GROUND_ALPHA = 0.1;
+const GAP_ALPHA = 0.25;
+const LABEL_ALPHA = 0.65;
+const BEST_WIDTH = 2;
+// Gap between the cursor and the tooltip, and between the tooltip and the edge it is clamped
+// against.
+const TOOLTIP_OFFSET = 12;
+const TOOLTIP_MARGIN = 4;
+export class OptimizationHeatmapWidget {
+    static create(hostEl, state, deps) {
+        // Assert before building: the markup below is localized through the host, so a missing
+        // host has to fail here rather than render a panel captioned with raw English keys.
+        const host = assertHost(deps?.host, 'OptimizationHeatmapWidget');
+        const root = OptimizationHeatmapWidget._buildRoot(host);
+        root.id = makePanelId(OptimizationHeatmapWidget.TYPE);
+        hostEl.appendChild(root);
+        return new OptimizationHeatmapWidget(root, state || {}, deps);
+    }
+    // The panel's markup. The metric's name sits in the header rather than on the canvas: it is
+    // the caption the drawn legend is read against, and putting it in the chrome costs the map
+    // no pixels and leaves the text selectable and sized by the stylesheet.
+    static _buildRoot(host) {
+        const title = host.t('OptimizationHeatmap');
+        return makePanelRoot('optimization-heatmap-panel', title, [
+            makeElement('div', 'panel-header', {}, [
+                makeElement('span', '', {}, [title]),
+                makeElement('span', 'heatmap-metric', {}, []),
+                makeIconButton('bt-icon-btn bt-icon-cancel panel-close-btn', host.t('ClosePanel'), 'bi-x', { type: 'button' }),
+            ]),
+            makeElement('div', 'panel-body', {}, [
+                makeElement('canvas', 'heatmap-canvas', { role: 'img', 'aria-label': host.t('OptimizationHeatmapChart') }, []),
+                makeElement('div', 'heatmap-empty', { hidden: '' }, [host.t('NoOptimizationResults')]),
+                makeElement('div', 'heatmap-tooltip', { role: 'tooltip', hidden: '' }, []),
+            ]),
+        ]);
+    }
+    constructor(rootEl, _state, deps) {
+        this._host = assertHost(deps?.host, 'OptimizationHeatmapWidget');
+        this.rootEl = rootEl;
+        this.canvasEl = this.rootEl.querySelector('.heatmap-canvas');
+        this._metricEl = this.rootEl.querySelector('.heatmap-metric');
+        this._emptyEl = this.rootEl.querySelector('.heatmap-empty');
+        this._tooltipEl = this.rootEl.querySelector('.heatmap-tooltip');
+        this._closeBtn = this.rootEl.querySelector('.panel-close-btn');
+        this._ctx = this.canvasEl?.getContext('2d') ?? null;
+        this._data = null;
+        this._layout = null;
+        this._size = null;
+        this._resizeObserver = null;
+        this._closeBtn?.addEventListener('click', (e) => { e.preventDefault(); this._host.close(); });
+        this._bindHover();
+        this._setEmpty(true);
+        if (this.canvasEl && typeof ResizeObserver === 'function') {
+            this._resizeObserver = new ResizeObserver(() => this._render());
+            this._resizeObserver.observe(this.canvasEl);
+        }
+        this._host.register(this);
+    }
+    dispose() {
+        try {
+            this._resizeObserver?.disconnect();
+        }
+        catch { /* already torn down */ }
+        this._host.unregister(this);
+        try {
+            this.rootEl.remove();
+        }
+        catch { /* already detached */ }
+    }
+    /// Show this map. The whole of it at once: a pair that has dropped out of the set has stopped
+    /// existing, and leaving its cell behind would report a run that is no longer in the report.
+    update(data) {
+        this._data = data;
+        if (this._metricEl !== null)
+            this._metricEl.textContent = data.metricLabel;
+        this._hideTooltip();
+        this._render();
+    }
+    // The canvas in CSS pixels, and its backing store in device pixels. Without the second the
+    // map is drawn at a third of the resolution the screen has, and a lattice of hairlines is
+    // exactly the drawing that shows it.
+    _sizeCanvas() {
+        const canvas = this.canvasEl;
+        if (!canvas)
+            return;
+        const rect = canvas.getBoundingClientRect();
+        const ratio = typeof devicePixelRatio === 'number' && devicePixelRatio > 0 ? devicePixelRatio : 1;
+        const width = Math.max(1, Math.floor(rect.width));
+        const height = Math.max(1, Math.floor(rect.height));
+        if (canvas.width !== width * ratio || canvas.height !== height * ratio) {
+            canvas.width = width * ratio;
+            canvas.height = height * ratio;
+            // Everything below draws in CSS pixels, which is also the space a mouse event
+            // arrives in - so the hit test needs no conversion of its own.
+            this._ctx?.setTransform(ratio, 0, 0, ratio, 0, 0);
+        }
+        this._size = { width, height };
+    }
+    _render() {
+        const ctx = this._ctx;
+        if (ctx === null)
+            return;
+        this._sizeCanvas();
+        const size = this._size;
+        if (size === null)
+            return;
+        ctx.clearRect(0, 0, size.width, size.height);
+        this._layout = null;
+        const data = this._data;
+        if (data === null) {
+            this._setEmpty(true);
+            return;
+        }
+        const layout = layoutHeatmap({
+            width: size.width,
+            height: size.height,
+            cells: data.cells,
+            betterWhen: data.betterWhen,
+            xLabel: data.xLabel,
+            yLabel: data.yLabel,
+        });
+        this._setEmpty(layout === null);
+        if (layout === null)
+            return;
+        this._layout = layout;
+        const palette = this._host.presentation.canvasPalette();
+        ctx.font = palette.font;
+        ctx.lineWidth = 1;
+        for (const shape of layout.cells)
+            this._paintTint(ctx, shape.rect, shape.tint, palette.grid, palette.up, palette.down);
+        // A pair nobody ran, struck through. One diagonal rather than a fill of any kind: no
+        // amount of colour can say "not measured" on a map whose colours are all measurements.
+        ctx.globalAlpha = GAP_ALPHA;
+        ctx.strokeStyle = palette.grid;
+        for (const gap of layout.gaps) {
+            ctx.beginPath();
+            ctx.moveTo(gap.rect.x, gap.rect.y + gap.rect.height);
+            ctx.lineTo(gap.rect.x + gap.rect.width, gap.rect.y);
+            ctx.stroke();
+        }
+        // Last, so it sits over its own fill. In the grid colour because that is the only
+        // non-directional colour the palette carries, and an outline in either direction colour
+        // would vanish on half the cells it might land on.
+        const best = layout.cells.find(shape => shape.best);
+        if (best !== undefined) {
+            ctx.globalAlpha = 1;
+            ctx.strokeStyle = palette.grid;
+            ctx.lineWidth = BEST_WIDTH;
+            OptimizationHeatmapWidget._outline(ctx, best.rect, BEST_WIDTH / 2);
+            ctx.lineWidth = 1;
+        }
+        // The key, drawn out of the same two colours the map is: a legend in CSS would read the
+        // page's own tokens, and a host whose canvas palette comes from anywhere else would then
+        // explain its map in colours the map does not use.
+        for (const step of layout.legend.steps)
+            this._paintTint(ctx, step.rect, step.tint, palette.grid, palette.up, palette.down);
+        ctx.globalAlpha = LABEL_ALPHA;
+        ctx.fillStyle = palette.grid;
+        ctx.textBaseline = 'top';
+        ctx.textAlign = 'center';
+        for (const tick of layout.xTicks)
+            ctx.fillText(tick.text, tick.x, tick.y);
+        ctx.fillText(layout.xTitle.text, layout.xTitle.x, layout.xTitle.y);
+        ctx.fillText(formatStatistic(layout.legend.anchor.value), layout.legend.anchor.x, layout.legend.anchor.y);
+        ctx.textAlign = 'left';
+        ctx.fillText(layout.yTitle.text, layout.yTitle.x, layout.yTitle.y);
+        ctx.fillText(formatStatistic(layout.legend.low.value), layout.legend.low.x, layout.legend.low.y);
+        ctx.textAlign = 'right';
+        ctx.fillText(formatStatistic(layout.legend.high.value), layout.legend.high.x, layout.legend.high.y);
+        ctx.textBaseline = 'middle';
+        for (const tick of layout.yTicks)
+            ctx.fillText(tick.text, tick.x, tick.y);
+        ctx.globalAlpha = 1;
+    }
+    // The ground, then as much of the direction colour as the cell earned. Two fills rather than
+    // one blended colour: blending would need a background this control is not allowed to know.
+    _paintTint(ctx, rect, tint, ground, up, down) {
+        ctx.globalAlpha = GROUND_ALPHA;
+        ctx.fillStyle = ground;
+        ctx.fillRect(rect.x, rect.y, rect.width, rect.height);
+        if (tint === 0)
+            return;
+        ctx.globalAlpha = Math.abs(tint);
+        ctx.fillStyle = tint > 0 ? up : down;
+        ctx.fillRect(rect.x, rect.y, rect.width, rect.height);
+    }
+    static _outline(ctx, rect, inset) {
+        const left = rect.x + inset;
+        const top = rect.y + inset;
+        const right = rect.x + rect.width - inset;
+        const bottom = rect.y + rect.height - inset;
+        ctx.beginPath();
+        ctx.moveTo(left, top);
+        ctx.lineTo(right, top);
+        ctx.lineTo(right, bottom);
+        ctx.lineTo(left, bottom);
+        ctx.closePath();
+        ctx.stroke();
+    }
+    _setEmpty(empty) {
+        if (this._emptyEl === null)
+            return;
+        if (empty)
+            this._emptyEl.removeAttribute('hidden');
+        else
+            this._emptyEl.setAttribute('hidden', '');
+    }
+    _bindHover() {
+        const canvas = this.canvasEl;
+        if (!canvas)
+            return;
+        canvas.addEventListener('mousemove', (e) => {
+            const layout = this._layout;
+            if (layout === null) {
+                this._hideTooltip();
+                return;
+            }
+            const rect = canvas.getBoundingClientRect();
+            const x = e.clientX - rect.left;
+            const y = e.clientY - rect.top;
+            const hit = hitHeatmap(layout, x, y);
+            // A pair nobody ran says nothing, so it says nothing: a tooltip reading "no data"
+            // over a cell that is visibly struck through is the same statement twice.
+            if (hit !== null)
+                this._showTooltip(hit, x, y);
+            else
+                this._hideTooltip();
+        });
+        canvas.addEventListener('mouseleave', () => this._hideTooltip());
+    }
+    _showTooltip(shape, x, y) {
+        const tooltip = this._tooltipEl;
+        const canvas = this.canvasEl;
+        const data = this._data;
+        if (!tooltip || !canvas || data === null)
+            return;
+        const lines = [
+            this._tooltipLine(data.xLabel, shape.bucket.x),
+            this._tooltipLine(data.yLabel, shape.bucket.y),
+            this._tooltipLine(data.metricLabel, formatStatistic(shape.bucket.value)),
+        ];
+        // How many runs the figure is the mean of, and only when it is a mean of more than one.
+        // A count of 1 on every cell is a column of noise; a count of 5 on one of them is the
+        // difference between a result and a coincidence.
+        if (shape.bucket.count > 1)
+            lines.push(this._tooltipLine(this._host.t('Runs'), String(shape.bucket.count)));
+        if (shape.best)
+            lines.push(makeElement('div', 'heatmap-tt-row heatmap-tt-best', {}, [this._host.t('Best')]));
+        tooltip.replaceChildren(...lines);
+        // Measured, then placed: the size is only known once it is showing, and it is clamped
+        // inside the canvas so a cell near the right or bottom edge does not push its own
+        // tooltip out of view.
+        tooltip.removeAttribute('hidden');
+        const canvasRect = canvas.getBoundingClientRect();
+        const parentRect = tooltip.offsetParent?.getBoundingClientRect() ?? canvasRect;
+        const originX = canvasRect.left - parentRect.left;
+        const originY = canvasRect.top - parentRect.top;
+        const maxX = originX + canvasRect.width - tooltip.offsetWidth - TOOLTIP_MARGIN;
+        const maxY = originY + canvasRect.height - tooltip.offsetHeight - TOOLTIP_MARGIN;
+        tooltip.style.left = `${Math.max(0, Math.min(originX + x + TOOLTIP_OFFSET, maxX))}px`;
+        tooltip.style.top = `${Math.max(0, Math.min(originY + y + TOOLTIP_OFFSET, maxY))}px`;
+    }
+    _tooltipLine(label, value) {
+        return makeElement('div', 'heatmap-tt-row', {}, [
+            makeElement('span', 'heatmap-tt-label', {}, [label]),
+            makeElement('span', 'heatmap-tt-value', {}, [value]),
+        ]);
+    }
+    _hideTooltip() {
+        this._tooltipEl?.setAttribute('hidden', '');
+    }
+}
+OptimizationHeatmapWidget.TYPE = ControlTypes.OptimizationHeatmap;
+//# sourceMappingURL=optimization-heatmap-widget.js.map

package/dist/esm/optimization-heatmap-widget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"optimization-heatmap-widget.js","sourceRoot":"","sources":["../../src/optimization-heatmap-widget.ts"],"names":[],"mappings":"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"}

package/dist/esm/option-desk-widget.js

@@ -0,0 +1,322 @@
+// Option desk — multi-instance.
+//
+// One expiry of a chain, strike by strike: the call's side on the left, the put's mirrored on
+// the right, and the strike between them. Every figure a trader compares across the strip -
+// volume, open interest, volatility - carries a bar as well as a number, because a chain is
+// read by shape first and by value second.
+//
+// Two scales, and the difference matters. Volume and open interest are scaled per side, since
+// calls and puts trade in different sizes and comparing a call's volume against the busiest put
+// says nothing. Volatility is scaled across BOTH sides at once - a skew is exactly the
+// comparison between them, and two independent scales would flatten it.
+//
+// Greeks arrive one of two ways. A host that computes them sends them and the desk shows what
+// it was given; a host that sends volatility instead has them computed here, from the same
+// Black-Scholes the desktop uses. Neither is a fallback for the other going wrong - they are
+// two shapes of host, and which one a row came from is not the desk's business.
+import { formatPrice, formatQty } from './formatters.js';
+import { makeElement, makeIconButton, makePanelId, makePanelRoot } from './dom.js';
+import { ControlTypes } from './control-types.js';
+import { makeGridMenu } from './grid-menu.js';
+import { assertHost } from './trading-host.js';
+import { OptionTypes, greeks as computeGreeks } from './black-scholes.js';
+import { DataGrid } from '@stocksharp/grids/data-grid';
+export class OptionDeskWidget {
+    static create(hostEl, state, deps) {
+        const host = assertHost(deps?.host, 'OptionDeskWidget');
+        const root = OptionDeskWidget._buildRoot(host);
+        root.id = makePanelId(OptionDeskWidget.TYPE);
+        hostEl.appendChild(root);
+        return new OptionDeskWidget(root, state || {}, deps);
+    }
+    static _buildRoot(host) {
+        const title = host.t('OptionDesk');
+        return makePanelRoot('option-desk-panel', title, [
+            makeElement('div', 'panel-header', {}, [
+                makeElement('span', '', {}, [title]),
+                makeIconButton('bt-icon-btn bt-icon-cancel panel-close-btn', host.t('ClosePanel'), 'bi-x', { type: 'button' }),
+            ]),
+            makeElement('div', 'panel-body panel-body-with-rail', {}, [
+                makeElement('div', 'panel-body-content', {}, [
+                    makeElement('table', 'terminal-table option-desk-table', { role: 'table', 'aria-label': host.t('OptionChain') }, [
+                        makeElement('thead', '', {}, []),
+                        makeElement('tbody', 'option-desk-body', {}, []),
+                    ]),
+                ]),
+                makeElement('div', 'panel-rail', { role: 'toolbar', 'aria-label': host.t('OptionDeskActions') }, [
+                    makeIconButton('bt-icon-btn panel-export-btn', host.t('ExportToExcel'), 'bi-file-earmark-spreadsheet', {}),
+                ]),
+            ]),
+        ]);
+    }
+    constructor(rootEl, _state, deps) {
+        this._host = assertHost(deps?.host, 'OptionDeskWidget');
+        this.rootEl = rootEl;
+        this.el = this.rootEl.querySelector('.option-desk-body');
+        this._closeBtn = this.rootEl.querySelector('.panel-close-btn');
+        this._exportBtn = this.rootEl.querySelector('.panel-export-btn');
+        this._rows = [];
+        this._context = {};
+        this._places = greekScales([], {});
+        this._closeBtn?.addEventListener('click', (e) => { e.preventDefault(); this._host.close(); });
+        this._exportBtn?.addEventListener('click', (e) => { e.preventDefault(); this._export(); });
+        const head = this.rootEl.querySelector('.option-desk-table thead');
+        this._grid = head && this.el
+            ? new DataGrid({
+                head: head,
+                body: this.el,
+                columns: this._columns(),
+                // By strike, ascending. A chain has exactly one order and it is not negotiable:
+                // the strip is read as a ladder, and re-sorting it by any column destroys that.
+                defaultSort: { col: 'strike', dir: 'asc' },
+                rowKey: (r) => String(r.strike),
+                emptyText: this._host.t('NoOptions'),
+                rowClass: (r) => this._rowClass(r),
+                contextMenu: makeGridMenu(this._host),
+                selection: 'multi',
+            })
+            : null;
+        // The greeks and the far volatilities are there when wanted and out of the way when not:
+        // a desk is read across, and thirty-six columns at once cannot be.
+        this._grid?.setState({
+            hidden: [
+                'callRho', 'callTheta', 'callHv', 'callTheor',
+                'putRho', 'putTheta', 'putHv', 'putTheor',
+            ],
+        });
+        this._host.register(this);
+    }
+    dispose() {
+        this._grid?.destroy();
+        this._host.unregister(this);
+        try {
+            this.rootEl.remove();
+        }
+        catch { /* already detached */ }
+    }
+    /// Show this chain, priced against this context.
+    ///
+    /// Both together, always: a chain and the underlying it is priced off are one observation,
+    /// and refreshing them separately shows greeks computed from a price that has moved.
+    update(strikes, context = {}) {
+        this._context = context ?? {};
+        this._rows = scaleChain(strikes ?? [], this._context);
+        this._places = greekScales(this._rows, this._context);
+        this._grid?.setRows(this._rows);
+    }
+    /// The rows as the desk holds them, scales and intrinsic values resolved.
+    rows() {
+        return this._rows;
+    }
+    _export() {
+        this._grid?.download('option-chain', this._host.t('OptionDesk'));
+    }
+    // Which side of the money this strike is on. A chain is read from the money outwards, and
+    // the line between the two halves is what a reader finds first.
+    _rowClass(row) {
+        const asset = this._context.assetPrice;
+        if (asset === null || asset === undefined)
+            return 'option-row';
+        return `option-row ${row.strike < asset ? 'option-itm-call' : 'option-itm-put'}`;
+    }
+    _columns() {
+        const label = (key) => this._host.t(key);
+        const side = (which) => {
+            const prefix = which;
+            const at = (r) => r[which];
+            const g = (r) => sideGreeks(r, which, this._context);
+            return [
+                { key: `${prefix}Rho`, header: label('Rho'), exportable: true, value: (r) => g(r)?.rho ?? null, render: (r) => decimals(g(r)?.rho, this._places.rho) },
+                { key: `${prefix}Theta`, header: label('Theta'), exportable: true, value: (r) => g(r)?.theta ?? null, render: (r) => decimals(g(r)?.theta, this._places.theta) },
+                { key: `${prefix}Vega`, header: label('Vega'), exportable: true, value: (r) => g(r)?.vega ?? null, render: (r) => decimals(g(r)?.vega, this._places.vega) },
+                { key: `${prefix}Gamma`, header: label('Gamma'), exportable: true, value: (r) => g(r)?.gamma ?? null, render: (r) => decimals(g(r)?.gamma, this._places.gamma) },
+                { key: `${prefix}Delta`, header: label('Delta'), exportable: true, value: (r) => g(r)?.delta ?? null, render: (r) => decimals(g(r)?.delta, this._places.delta) },
+                { key: `${prefix}Bid`, header: label('Bid'), exportable: true, cellClass: () => 'option-bid', value: (r) => at(r).bid ?? null, render: (r) => price(at(r).bid) },
+                { key: `${prefix}Ask`, header: label('Ask'), exportable: true, cellClass: () => 'option-ask', value: (r) => at(r).ask ?? null, render: (r) => price(at(r).ask) },
+                { key: `${prefix}Theor`, header: label('TheorPrice'), exportable: true, value: (r) => at(r).theoretical ?? null, render: (r) => price(at(r).theoretical) },
+                {
+                    key: `${prefix}Volume`, header: label('Volume'), exportable: true,
+                    value: (r) => at(r).volume ?? 0,
+                    render: (r) => this._bar(at(r).volume, which === 'call' ? r.maxCallVolume : r.maxPutVolume, which, formatQty(at(r).volume ?? 0)),
+                    exportValue: (r) => at(r).volume ?? 0,
+                },
+                {
+                    key: `${prefix}Oi`, header: label('OI'), exportable: true,
+                    value: (r) => at(r).openInterest ?? 0,
+                    render: (r) => this._bar(at(r).openInterest, which === 'call' ? r.maxCallOpenInterest : r.maxPutOpenInterest, which, formatQty(at(r).openInterest ?? 0)),
+                    exportValue: (r) => at(r).openInterest ?? 0,
+                },
+                { key: `${prefix}Symbol`, header: which === 'call' ? label('Call') : label('Put'), exportable: true, value: (r) => at(r).symbol ?? '' },
+                {
+                    key: `${prefix}IvBid`, header: label('IVBid'), exportable: true,
+                    value: (r) => at(r).ivBid ?? null,
+                    render: (r) => this._bar(at(r).ivBid, r.maxVolatility, 'iv', percent(at(r).ivBid)),
+                    exportValue: (r) => at(r).ivBid ?? '',
+                },
+                {
+                    key: `${prefix}IvAsk`, header: label('IVAsk'), exportable: true,
+                    value: (r) => at(r).ivAsk ?? null,
+                    render: (r) => this._bar(at(r).ivAsk, r.maxVolatility, 'iv', percent(at(r).ivAsk)),
+                    exportValue: (r) => at(r).ivAsk ?? '',
+                },
+                {
+                    key: `${prefix}IvLast`, header: label('IVLast'), exportable: true,
+                    value: (r) => at(r).ivLast ?? null,
+                    render: (r) => this._bar(at(r).ivLast, r.maxVolatility, 'iv', percent(at(r).ivLast)),
+                    exportValue: (r) => at(r).ivLast ?? '',
+                },
+                {
+                    key: `${prefix}Hv`, header: label('HV'), exportable: true,
+                    value: (r) => at(r).historicalVolatility ?? null,
+                    render: (r) => this._bar(at(r).historicalVolatility, r.maxVolatility, 'iv', percent(at(r).historicalVolatility)),
+                    exportValue: (r) => at(r).historicalVolatility ?? '',
+                },
+            ];
+        };
+        // Declared outward from the strike: volatilities and quotes against the middle, where
+        // the two sides are compared, and the greeks out at the edges. The put side is that
+        // same order reflected, which is what makes the chain a mirror rather than a repeat.
+        const puts = side('put').slice().reverse();
+        return [
+            ...side('call'),
+            {
+                key: 'strike',
+                header: label('Strike'),
+                exportable: true,
+                cellClass: () => 'option-strike',
+                value: (r) => r.strike,
+                render: (r) => price(r.strike),
+            },
+            {
+                key: 'intrinsic',
+                header: label('IntrinsicValue'),
+                exportable: true,
+                cellClass: () => 'option-intrinsic',
+                // Whichever side is in the money at this strike; the other is worth nothing to
+                // exercise, and showing both would be one number and one zero on every row.
+                value: (r) => Math.max(r.callIntrinsic, r.putIntrinsic),
+                render: (r) => price(Math.max(r.callIntrinsic, r.putIntrinsic)),
+            },
+            ...puts,
+        ];
+    }
+    // A figure with its share of the strip behind it. The bar is a width, not a drawing: it
+    // scales with the cell, it prints, and it needs no canvas per row.
+    _bar(value, max, kind, text) {
+        if (value === null || value === undefined || !isFinite(value) || value <= 0)
+            return text;
+        const cell = document.createElement('span');
+        cell.className = 'option-bar-cell';
+        const bar = document.createElement('span');
+        bar.className = `option-bar option-bar-${kind}`;
+        bar.style.width = `${Math.min(100, (value / (max || 1)) * 100).toFixed(1)}%`;
+        cell.appendChild(bar);
+        const label = document.createElement('span');
+        label.className = 'option-bar-text';
+        label.textContent = text;
+        cell.appendChild(label);
+        return cell;
+    }
+}
+OptionDeskWidget.TYPE = ControlTypes.OptionDesk;
+/// Resolve the bar scales and the intrinsic values over a whole chain.
+///
+/// One pass over every strike, not one per row: a bar means "this much of the busiest strike",
+/// and a scale computed per row would make every row its own maximum.
+export function scaleChain(strikes, context) {
+    const asset = context.assetPrice ?? null;
+    const maxOf = (pick, sides) => Math.max(0, ...strikes.flatMap(r => sides(r).map(s => pick(s) ?? 0)).filter(v => isFinite(v)));
+    const maxCallVolume = maxOf(s => s.volume, r => [r.call]);
+    const maxPutVolume = maxOf(s => s.volume, r => [r.put]);
+    const maxCallOpenInterest = maxOf(s => s.openInterest, r => [r.call]);
+    const maxPutOpenInterest = maxOf(s => s.openInterest, r => [r.put]);
+    // One scale across both sides: the comparison a skew IS, is the one between them.
+    const maxVolatility = Math.max(maxOf(s => s.ivBid, r => [r.call, r.put]), maxOf(s => s.ivAsk, r => [r.call, r.put]), maxOf(s => s.ivLast, r => [r.call, r.put]), maxOf(s => s.historicalVolatility, r => [r.call, r.put]));
+    return strikes.map(row => ({
+        ...row,
+        maxCallVolume,
+        maxPutVolume,
+        maxCallOpenInterest,
+        maxPutOpenInterest,
+        maxVolatility,
+        callIntrinsic: asset === null ? 0 : Math.max(0, asset - row.strike),
+        putIntrinsic: asset === null ? 0 : Math.max(0, row.strike - asset),
+    }));
+}
+/// The greeks for one side: the host's if it sent them, otherwise computed from its volatility.
+///
+/// Null when neither is possible - no volatility, or nothing to price against. A blank is the
+/// honest answer there; a zero would read as a measured delta of nothing.
+export function sideGreeks(row, which, context) {
+    const side = row[which];
+    if (side.greeks !== undefined)
+        return side.greeks;
+    const deviation = side.ivLast ?? side.ivBid ?? side.ivAsk ?? side.historicalVolatility ?? null;
+    const assetPrice = context.assetPrice ?? null;
+    const timeToExpiry = context.timeToExpiry ?? null;
+    if (deviation === null || assetPrice === null || timeToExpiry === null)
+        return null;
+    return computeGreeks(which === 'call' ? OptionTypes.Call : OptionTypes.Put, {
+        assetPrice,
+        strike: row.strike,
+        timeToExpiry,
+        riskFree: context.riskFree ?? 0,
+        dividend: context.dividend ?? 0,
+        deviation,
+    });
+}
+/// Every greek this desk can show. Order is the order a chain is read in, outwards from delta.
+const GREEK_KEYS = ['delta', 'gamma', 'vega', 'theta', 'rho'];
+/// Three significant digits for the smallest figure in a column, within bounds a column can hold.
+const GREEK_DIGITS = 4;
+const GREEK_MIN_PLACES = 2;
+const GREEK_MAX_PLACES = 8;
+/// How many decimal places a column of greeks needs.
+///
+/// One count cannot serve every greek: a delta is about one, while a gamma on an underlying at
+/// 60000 is about 0.00003, and the four places that suit the first show every strike of the
+/// second as 0.0000 - a column that is present, aligned, and says nothing. So the count comes
+/// from the numbers, sized to the smallest of them.
+///
+/// One count for the whole column, not per cell: a column of figures is read down its decimal
+/// point, and a ragged one is read a cell at a time.
+export function greekPlaces(values) {
+    const scale = Math.min(...values
+        .filter((v) => typeof v === 'number' && isFinite(v) && v !== 0)
+        .map(Math.abs));
+    // Nothing measurable: a zero column is a zero column at any width.
+    if (!isFinite(scale))
+        return GREEK_MIN_PLACES;
+    const places = GREEK_DIGITS - 1 - Math.floor(Math.log10(scale));
+    return Math.min(GREEK_MAX_PLACES, Math.max(GREEK_MIN_PLACES, places));
+}
+/// The places for each greek, measured across both sides of the chain at once.
+///
+/// Across both sides deliberately: the desk mirrors, and a gamma written to eight places on the
+/// left and five on the right stops being a mirror.
+export function greekScales(rows, context) {
+    const all = rows
+        .flatMap(r => [sideGreeks(r, OptionTypes.Call, context), sideGreeks(r, OptionTypes.Put, context)])
+        .filter((g) => g !== null);
+    const places = {};
+    for (const key of GREEK_KEYS)
+        places[key] = greekPlaces(all.map(g => g[key]));
+    return places;
+}
+function decimals(value, places) {
+    if (value === null || value === undefined || !isFinite(value))
+        return '';
+    return value.toFixed(places);
+}
+function price(value) {
+    if (value === null || value === undefined || !isFinite(value))
+        return '';
+    return formatPrice(value);
+}
+/// A volatility, as the points a desk quotes it in rather than the fraction it is held as.
+function percent(value) {
+    if (value === null || value === undefined || !isFinite(value))
+        return '';
+    return `${(value * 100).toFixed(2)}%`;
+}
+//# sourceMappingURL=option-desk-widget.js.map