@stocksharp/trading-controls 1.3.0 → 1.4.0

package/src/optimization-heatmap-widget.ts

@@ -0,0 +1,347 @@
+// 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 { TradingHost, assertHost } from './trading-host.js';
+import { hitHeatmap, layoutHeatmap } from './heatmap-grid.js';
+import type { HeatCell, HeatCellShape, HeatDirection, HeatLayout, HeatRect } from './heatmap-grid.js';
+
+/// One map: the pairs, what they measured, and the three names a reader needs to know what is
+/// on the screen. The labels arrive worded - they are the consumer's own vocabulary for its
+/// parameters and its metric, the way a statistic reaches the statistics panel already named.
+export interface HeatmapData {
+    xLabel: string;
+    yLabel: string;
+    metricLabel: string;
+    /// Which way is better. Required, and required for a reason: without it the same map of
+    /// drawdowns would paint its worst corner in the winning colour.
+    betterWhen: HeatDirection;
+    cells: HeatCell[];
+}
+
+/// The panel needs nothing beyond the host port. There is nothing on a map to act on: a cell is
+/// the mean of the runs at one pair rather than a run, so there is no run for a click to open.
+export interface OptimizationHeatmapDeps {
+    host: TradingHost;
+}
+
+// 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 TYPE = ControlTypes.OptimizationHeatmap;
+
+    rootEl: HTMLElement;
+    canvasEl: HTMLCanvasElement | null;
+    // `//` rather than `///` from here down - see the note in positions-widget.
+    _host: TradingHost;
+    _metricEl: HTMLElement | null;
+    _emptyEl: HTMLElement | null;
+    _tooltipEl: HTMLElement | null;
+    _closeBtn: HTMLElement | null;
+    _ctx: CanvasRenderingContext2D | null;
+    _data: HeatmapData | null;
+    // Rebuilt on every paint: where each cell landed and what it stands for. Hover reads it
+    // rather than the data, so a cursor and a pixel agree about which pair is under it.
+    _layout: HeatLayout | null;
+    _size: { width: number; height: number } | null;
+    _resizeObserver: ResizeObserver | null;
+
+    static create(hostEl: HTMLElement, state: Record<string, unknown>, deps: OptimizationHeatmapDeps): OptimizationHeatmapWidget {
+        // 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: TradingHost): HTMLElement {
+        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: HTMLElement, _state: Record<string, unknown>, deps: OptimizationHeatmapDeps) {
+        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(): void {
+        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: HeatmapData): void {
+        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(): void {
+        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(): void {
+        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: CanvasRenderingContext2D, rect: HeatRect, tint: number, ground: string, up: string, down: string): void {
+        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: CanvasRenderingContext2D, rect: HeatRect, inset: number): void {
+        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: boolean): void {
+        if (this._emptyEl === null) return;
+        if (empty) this._emptyEl.removeAttribute('hidden');
+        else this._emptyEl.setAttribute('hidden', '');
+    }
+
+    _bindHover(): void {
+        const canvas = this.canvasEl;
+        if (!canvas) return;
+        canvas.addEventListener('mousemove', (e: MouseEvent) => {
+            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: HeatCellShape, x: number, y: number): void {
+        const tooltip = this._tooltipEl;
+        const canvas = this.canvasEl;
+        const data = this._data;
+        if (!tooltip || !canvas || data === null) return;
+
+        const lines: HTMLElement[] = [
+            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: string, value: string): HTMLElement {
+        return makeElement('div', 'heatmap-tt-row', {}, [
+            makeElement('span', 'heatmap-tt-label', {}, [label]),
+            makeElement('span', 'heatmap-tt-value', {}, [value]),
+        ]);
+    }
+
+    _hideTooltip(): void {
+        this._tooltipEl?.setAttribute('hidden', '');
+    }
+}

package/src/option-smile-widget.ts

@@ -0,0 +1,281 @@
+// Option smile — multi-instance.
+//
+// One expiry's implied volatility against strike, call side and put side as two curves on one
+// scale, drawn by @stocksharp/chart.
+//
+// The engine is a time-series engine and this axis is a ladder of strikes, which looked at first
+// like a reason to draw the chart by hand. It is not: the axis carries numbers, and what turns
+// them into dates is `timeScale.formatter` - one function shared by the tick labels and the
+// crosshair label. Given a formatter that words a number as a strike, the axis is a strike axis,
+// and the crosshair, the legend readout, the zoom and the pan come with it rather than being
+// written again here.
+//
+// `mode: 'ordinal'` on top of that, because a listed chain is evenly spaced by listing rather
+// than by the gaps between its numbers: a venue that lists 67000, 67250 and then 68000 means
+// three rungs, not a hole.
+import { formatPrice } from './formatters.js';
+import { makeElement, makeIconButton, makePanelId, makePanelRoot } from './dom.js';
+import { ControlTypes } from './control-types.js';
+import { TradingHost, assertHost } from './trading-host.js';
+import type { OptionChainContext, OptionSide, OptionStrike } from './option-desk-widget.js';
+import {
+    CrosshairMode, LineSeries, createChart,
+    type CrosshairEvent, type IChartApi, type ISeriesApi, type LineData, type Time,
+} from './chart-engine.js';
+
+/// What the panel needs beyond the host port. Nothing: a smile is read, not acted on.
+export interface OptionSmileDeps {
+    host: TradingHost;
+}
+
+const LINE_WIDTH = 2;
+
+/// The volatility a side is drawn at: what it last traded at, or the middle of its quote when it
+/// has not traded. Null when neither is known - a strike nobody has quoted is a gap in the curve,
+/// and a line drawn through it invents a quote nobody made.
+export function sideVolatility(side: OptionSide | undefined): number | null {
+    if (side === undefined || side === null) return null;
+
+    const last = side.ivLast;
+    if (typeof last === 'number' && isFinite(last) && last > 0) return last;
+
+    const bid = side.ivBid;
+    const ask = side.ivAsk;
+    const quoted = [bid, ask].filter((v): v is number => typeof v === 'number' && isFinite(v) && v > 0);
+    if (quoted.length === 0) return null;
+    return quoted.reduce((sum, v) => sum + v, 0) / quoted.length;
+}
+
+/// The chain in the order it is drawn: by strike, lowest first, whatever order it arrived in.
+export function sortedChain(strikes: readonly OptionStrike[]): OptionStrike[] {
+    return [...strikes]
+        .filter(row => row !== null && row !== undefined && isFinite(row.strike))
+        .sort((a, b) => a.strike - b.strike);
+}
+
+/// One side as a series, and the strikes it was drawn at.
+///
+/// The x value is the strike itself rather than an index: the axis words it back through the
+/// formatter, so the number on the wire and the number on the label are the same one and no
+/// lookup can put them out of step.
+export function toSmileSeries(chain: readonly OptionStrike[], put: boolean): LineData[] {
+    const out: LineData[] = [];
+    for (const row of chain) {
+        const volatility = sideVolatility(put ? row.put : row.call);
+        // Whitespace rather than a point: the engine keeps the rung on the axis and leaves the
+        // line broken across it, which is what a strike quoted on one side only looks like.
+        if (volatility === null) out.push({ time: row.strike as Time } as LineData);
+        else out.push({ time: row.strike as Time, value: volatility * 100 });
+    }
+    return out;
+}
+
+export class OptionSmileWidget {
+    static TYPE = ControlTypes.OptionSmile;
+
+    rootEl: HTMLElement;
+    // `//` rather than `///` from here down — see the note in positions-widget.
+    _host: TradingHost;
+    _closeBtn: HTMLElement | null;
+    _resetBtn: HTMLElement | null;
+    _emptyEl: HTMLElement | null;
+    _chartEl: HTMLElement | null;
+    _spotEl: HTMLElement | null;
+    _hoverEl: HTMLElement | null;
+    _chart: IChartApi | null;
+    _call: ISeriesApi<LineData> | null;
+    _put: ISeriesApi<LineData> | null;
+    _strikes: OptionStrike[];
+    _context: OptionChainContext;
+    _resizeObserver: ResizeObserver | null;
+
+    static create(hostEl: HTMLElement, state: Record<string, unknown>, deps: OptionSmileDeps): OptionSmileWidget {
+        const host = assertHost(deps?.host, 'OptionSmileWidget');
+        const root = OptionSmileWidget._buildRoot(host);
+        root.id = makePanelId(OptionSmileWidget.TYPE);
+        hostEl.appendChild(root);
+        return new OptionSmileWidget(root, state || {}, deps);
+    }
+
+    static _buildRoot(host: TradingHost): HTMLElement {
+        const title = host.t('OptionSmile');
+        return makePanelRoot('option-smile-panel', title, [
+            makeElement('div', 'panel-header', {}, [
+                makeElement('span', '', {}, [title]),
+                makeIconButton('bt-icon-btn option-smile-reset-btn', host.t('ResetView'), 'bi-arrow-clockwise', { type: 'button' }),
+                makeIconButton('bt-icon-btn bt-icon-cancel panel-close-btn', host.t('ClosePanel'), 'bi-x', { type: 'button' }),
+            ]),
+            makeElement('div', 'panel-body', {}, [
+                makeElement('div', 'option-smile-legend', {}, [
+                    makeElement('span', 'option-smile-axis', {}, [host.t('ImpliedVolatility')]),
+                    makeElement('span', 'option-smile-key', {}, [
+                        makeElement('span', 'option-smile-dot option-smile-dot-call', {}, []),
+                        host.t('Call'),
+                    ]),
+                    makeElement('span', 'option-smile-key', {}, [
+                        makeElement('span', 'option-smile-dot option-smile-dot-put', {}, []),
+                        host.t('Put'),
+                    ]),
+                    makeElement('span', 'option-smile-spot', {}, []),
+                ]),
+                makeElement('div', 'option-smile-chart', { role: 'img', 'aria-label': host.t('OptionChain') }, [
+                    // Over the chart, not in the panel header: a reading about the point under the
+                    // pointer belongs beside that point, and a host that lifts panel headers into a
+                    // tab strip would otherwise write it into a tab title.
+                    makeElement('div', 'option-smile-hover', {}, []),
+                    makeElement('div', 'option-smile-empty', {}, [host.t('NoOptions')]),
+                ]),
+            ]),
+        ]);
+    }
+
+    constructor(rootEl: HTMLElement, _state: Record<string, unknown>, deps: OptionSmileDeps) {
+        this._host = assertHost(deps?.host, 'OptionSmileWidget');
+
+        this.rootEl = rootEl;
+        this._closeBtn = this.rootEl.querySelector('.panel-close-btn');
+        this._resetBtn = this.rootEl.querySelector('.option-smile-reset-btn');
+        this._emptyEl = this.rootEl.querySelector('.option-smile-empty');
+        this._chartEl = this.rootEl.querySelector('.option-smile-chart');
+        this._spotEl = this.rootEl.querySelector('.option-smile-spot');
+        this._hoverEl = this.rootEl.querySelector('.option-smile-hover');
+        this._chart = null;
+        this._call = null;
+        this._put = null;
+        this._strikes = [];
+        this._context = {};
+        this._resizeObserver = null;
+
+        this._closeBtn?.addEventListener('click', (e) => { e.preventDefault(); this._host.close(); });
+        this._resetBtn?.addEventListener('click', (e) => { e.preventDefault(); this.resetZoom(); });
+
+        if (this._chartEl !== null && typeof ResizeObserver !== 'undefined') {
+            this._resizeObserver = new ResizeObserver(() => this._fit());
+            this._resizeObserver.observe(this._chartEl);
+        }
+
+        this._render();
+        this._host.register(this);
+    }
+
+    dispose(): void {
+        try { this._resizeObserver?.disconnect(); } catch { /* already torn down */ }
+        this._resizeObserver = null;
+        try { this._chart?.remove(); } catch { /* already gone */ }
+        this._chart = null;
+        this._call = null;
+        this._put = null;
+        this._host.unregister(this);
+        try { this.rootEl.remove(); } catch { /* already detached */ }
+    }
+
+    /// Show this chain, priced against this context.
+    ///
+    /// The desk's two arguments unchanged, and for the same reason it takes them together: they
+    /// are one observation. A smile marked with a spot the curves never saw is two moments.
+    update(strikes: OptionStrike[], context: OptionChainContext = {}): void {
+        this._strikes = strikes || [];
+        this._context = context || {};
+        this._render();
+    }
+
+    /// Show the whole chain again, after a zoom.
+    resetZoom(): void {
+        try { this._chart?.timeScale().fitContent(); } catch { /* no chart yet */ }
+    }
+
+    /// The engine, for a host that wants to add to this chart - a second expiry, a marker.
+    chart(): IChartApi | null {
+        return this._chart;
+    }
+
+    _ensureChart(): boolean {
+        if (this._chart !== null) return true;
+        if (this._chartEl === null) return false;
+
+        const palette = this._host.presentation.canvasPalette();
+        this._chart = createChart(this._chartEl, {
+            layout: {
+                background: { type: 'solid', color: 'transparent' },
+                textColor: palette.grid,
+                fontFamily: palette.font,
+                fontSize: 11,
+                attributionLogo: false,
+            },
+            grid: { vertLines: { color: palette.grid }, horzLines: { color: palette.grid } },
+            crosshair: { mode: CrosshairMode.Normal },
+            rightPriceScale: { borderColor: palette.grid },
+            timeScale: {
+                borderColor: palette.grid,
+                // Evenly spaced by listing, and worded as strikes: the axis carries the strike
+                // itself, so the label and the value can never drift apart.
+                mode: 'ordinal',
+                formatter: (value: Time) => formatPrice(Number(value)),
+            },
+        });
+
+        this._call = this._chart.addSeries(LineSeries, { lineWidth: LINE_WIDTH, color: palette.up });
+        this._put = this._chart.addSeries(LineSeries, { lineWidth: LINE_WIDTH, color: palette.down });
+        this._chart.subscribeCrosshairMove((param) => this._renderHover(param));
+        return true;
+    }
+
+    _render(): void {
+        const chain = sortedChain(this._strikes);
+        const quoted = chain.some(row =>
+            sideVolatility(row.call) !== null || sideVolatility(row.put) !== null);
+
+        if (this._emptyEl !== null) this._emptyEl.hidden = quoted;
+        this._renderSpot();
+        if (!quoted) return;
+        if (!this._ensureChart() || this._call === null || this._put === null) return;
+
+        this._call.setData(toSmileSeries(chain, false));
+        this._put.setData(toSmileSeries(chain, true));
+        this._fit();
+    }
+
+    _fit(): void {
+        if (this._chart === null || this._chartEl === null) return;
+        const rect = this._chartEl.getBoundingClientRect();
+        if (rect.width <= 0 || rect.height <= 0) return;
+        try {
+            this._chart.resize(rect.width, rect.height);
+        } catch { /* the engine is between frames */ }
+    }
+
+    // Where the money is. Not a line on the chart: an ordinal axis has a rung per listed strike
+    // and the spot is between two of them, so it is stated rather than drawn at a place the
+    // ladder does not have.
+    _renderSpot(): void {
+        const el = this._spotEl;
+        if (el === null) return;
+
+        const spot = this._context.assetPrice;
+        if (typeof spot !== 'number' || !isFinite(spot)) {
+            el.textContent = '';
+            return;
+        }
+        el.textContent = `${this._host.t('Underlying')} ${formatPrice(spot)}`;
+    }
+
+    // What the pointer is over: the strike and both sides at it. Both, because a smile is read by
+    // the distance between the two curves - a readout naming one of them answers half of it.
+    _renderHover(param: CrosshairEvent): void {
+        const el = this._hoverEl;
+        if (el === null) return;
+
+        if (param.time === null) {
+            el.textContent = '';
+            return;
+        }
+
+        const at = (series: ISeriesApi<LineData> | null): string => {
+            const point = series === null ? undefined : param.seriesData.get(series);
+            const value = (point as { value?: number } | undefined)?.value;
+            return typeof value === 'number' && isFinite(value) ? `${value.toFixed(2)}%` : '--';
+        };
+
+        el.textContent = `${formatPrice(Number(param.time))}  ${at(this._call)} / ${at(this._put)}`;
+    }
+}

package/src/pnl-curve.ts

@@ -32,6 +32,14 @@ export interface PnlCurve {
     /// The value range the box covers, zero included.
     min: number;
     max: number;
+    /// The stretch of time the box covers. Compression keeps the run's first and last samples
+    /// exactly, so these are where it started and where it stands - which is what lets a panel
+    /// wide enough for a time axis date both ends without laying the run out a second time.
+    from: number;
+    to: number;
+    /// The value the run ended at. `positive` is this figure's sign; a panel with room to print
+    /// a number wants the figure.
+    last: number;
     /// Whether the run ended at or above where it started. What the curve is coloured by - and
     /// the last value, not the highest: a run that peaked and gave it all back is a loss.
     positive: boolean;
@@ -127,6 +135,7 @@ export function pnlCurve(points: readonly PnlPoint[], box: PnlBox): PnlCurve | n
 
     const curve = shown.map(p => [x(p.time), y(p.value)] as [number, number]);
     const zeroY = y(0);
+    const last = shown[shown.length - 1].value;
 
     return {
         points: curve,
@@ -136,7 +145,10 @@ export function pnlCurve(points: readonly PnlPoint[], box: PnlBox): PnlCurve | n
         zeroY,
         min,
         max,
-        positive: shown[shown.length - 1].value >= 0,
+        from: firstTime,
+        to: lastTime,
+        last,
+        positive: last >= 0,
     };
 }