@stocksharp/trading-controls 1.3.0 → 1.4.0

package/dist/esm/heatmap-grid.js

@@ -0,0 +1,271 @@
+// The geometry of a heatmap - one metric over two discrete axes - as pure functions over numbers.
+//
+// A heatmap is a lattice: every distinct value of one axis crossed with every distinct value of
+// the other, one cell per pair, coloured by what that pair measured. What produced the pairs is
+// not here and does not need to be - an optimisation sweep is one source of them, and the object
+// is the same shape whatever the source.
+//
+// None of this needs a canvas, which is what makes it checkable: a fake 2D context can only
+// record the calls a control made, so the numbers those calls carry are checked here, against
+// arithmetic rather than against pixels.
+//
+// The colour comes out as a signed number in -1..1 rather than as a colour. The sign says which
+// side of the anchor a cell fell on and the magnitude how far, and the control turns that into
+// one of the two direction colours its host answered with. Nothing in this file knows a colour.
+/// Which way is better. Stated wherever a scale is built, never inferred: a metric does not
+/// carry its own direction, and a map of drawdowns would otherwise paint its worst corner in
+/// the winning colour.
+export const HeatDirections = {
+    Higher: 'higher',
+    Lower: 'lower',
+};
+// Proportions, not looks: a canvas has no cascade to read them from, and moving them into CSS
+// would only mean reading them back out again.
+const LEFT_GUTTER = 54;
+const RIGHT_PAD = 6;
+const TOP_BAND = 26;
+const BOTTOM_BAND = 30;
+const TICK_GAP = 4;
+const LABEL_HEIGHT = 13;
+/// Half a pixel off each side, so abutting cells show a hairline of the panel between them and
+/// the lattice reads as cells rather than as one continuous wash.
+const CELL_INSET = 0.5;
+const LEGEND_WIDTH = 140;
+const LEGEND_HEIGHT = 8;
+const LEGEND_Y = 14;
+const LEGEND_STEPS = 28;
+/// Room one label wants. Below this the labels touch, and an axis whose values overprint each
+/// other is worse than an axis showing every fourth value.
+const MIN_TICK_WIDTH = 34;
+const MIN_TICK_HEIGHT = 13;
+/// A value that is a number written as text, trailing unit included: "12", "-0.5", "7.5%".
+const NUMERIC = /^[+-]?(?:\d+(?:\.\d*)?|\.\d+)(?:[eE][+-]?\d+)?\s*%?$/;
+/// Every run at a pair, as one cell.
+///
+/// A run whose metric is not a number is dropped rather than folded in: a report that carries a
+/// missing figure as an empty string would otherwise turn the whole cell into a NaN, and a NaN
+/// cell paints as nothing while claiming the pair was measured.
+export function foldCells(cells) {
+    const folded = new Map();
+    const order = [];
+    for (const cell of cells) {
+        if (cell === null || cell === undefined || !Number.isFinite(cell.value))
+            continue;
+        const id = pairKey(cell.x, cell.y);
+        const found = folded.get(id);
+        if (found === undefined) {
+            folded.set(id, { x: cell.x, y: cell.y, sum: cell.value, count: 1 });
+            order.push(id);
+        }
+        else {
+            found.sum += cell.value;
+            found.count += 1;
+        }
+    }
+    return order.map(id => {
+        const fold = folded.get(id);
+        return { x: fold.x, y: fold.y, value: fold.sum / fold.count, count: fold.count };
+    });
+}
+/// One axis, in the order it is read.
+///
+/// Numerically when every value on it is a number, which is the whole point: a text sort puts
+/// "10" before "2" and the axis stops being monotonic, so the map's shape becomes an artefact of
+/// how the values happened to be spelled. Text order otherwise - and it is the right answer for
+/// the shapes that actually arrive, because .NET writes a time span at a fixed width, so
+/// "00:05:00" < "00:15:00" < "01:00:00" is also chronological.
+export function axisValues(values) {
+    const unique = [];
+    const seen = new Set();
+    for (const value of values) {
+        if (seen.has(value))
+            continue;
+        seen.add(value);
+        unique.push(value);
+    }
+    if (unique.every(value => NUMERIC.test(value)))
+        return unique.sort((left, right) => numberOf(left) - numberOf(right));
+    return unique.sort((left, right) => (left < right ? -1 : left > right ? 1 : 0));
+}
+/// What the colours are measured against.
+///
+/// Two anchors, and which one applies is decided by the data rather than by the caller. When the
+/// values straddle zero, zero is the anchor: profit and loss are different in kind, not merely
+/// in degree, and a map that shaded a loss green because it was less bad than the others would
+/// be lying about the only thing a reader checks first. When zero is nowhere in the range - a
+/// Sharpe of 1.8 to 2.2, a profit of 100 to 5000 - the anchor is the middle of the range,
+/// because anchoring at a zero the sweep never came near produces one flat block with no
+/// contrast, and comparing the cells with each other is what the reader came for.
+///
+/// The reach is the same on both sides of the anchor, so one unit of colour means one amount of
+/// metric everywhere on the map. Scaling each side to its own extreme instead would make a five
+/// dollar loss look exactly as red as a five hundred dollar one.
+export function heatScale(buckets) {
+    let min = Infinity;
+    let max = -Infinity;
+    for (const bucket of buckets) {
+        if (bucket.value < min)
+            min = bucket.value;
+        if (bucket.value > max)
+            max = bucket.value;
+    }
+    if (!isFinite(min) || !isFinite(max)) {
+        min = 0;
+        max = 0;
+    }
+    const anchor = min <= 0 && max >= 0 ? 0 : (min + max) / 2;
+    const reach = Math.max(Math.abs(max - anchor), Math.abs(anchor - min));
+    return { anchor, reach: reach > 0 ? reach : 1, min, max };
+}
+/// How good a value is, as -1..1. Positive is better whichever way better runs.
+export function tintOf(value, scale, betterWhen) {
+    const distance = (value - scale.anchor) / scale.reach;
+    const signed = betterWhen === HeatDirections.Lower ? -distance : distance;
+    return Math.max(-1, Math.min(1, signed));
+}
+/// The inverse, for labelling a legend: what value a tint stands for.
+export function valueAt(tint, scale, betterWhen) {
+    const distance = betterWhen === HeatDirections.Lower ? -tint : tint;
+    return scale.anchor + distance * scale.reach;
+}
+/// Lay one map out, or null when nothing was measured.
+export function layoutHeatmap(input) {
+    const buckets = foldCells(input.cells);
+    if (buckets.length === 0)
+        return null;
+    const columns = axisValues(buckets.map(bucket => bucket.x));
+    const rows = axisValues(buckets.map(bucket => bucket.y));
+    const scale = heatScale(buckets);
+    const plot = {
+        x: LEFT_GUTTER,
+        y: TOP_BAND,
+        width: Math.max(1, input.width - LEFT_GUTTER - RIGHT_PAD),
+        height: Math.max(1, input.height - TOP_BAND - BOTTOM_BAND),
+    };
+    const cellWidth = plot.width / columns.length;
+    const cellHeight = plot.height / rows.length;
+    const rectOf = (column, row) => ({
+        x: plot.x + column * cellWidth + CELL_INSET,
+        // Row 0 sits at the FOOT of the plot: this is a chart, and a chart's Y grows upward. A
+        // table would put it at the top, and then the map and its axis would disagree about
+        // which corner is which.
+        y: plot.y + plot.height - (row + 1) * cellHeight + CELL_INSET,
+        width: Math.max(1, cellWidth - CELL_INSET * 2),
+        height: Math.max(1, cellHeight - CELL_INSET * 2),
+    });
+    const measured = new Map(buckets.map(bucket => [pairKey(bucket.x, bucket.y), bucket]));
+    const cells = [];
+    const gaps = [];
+    for (let row = 0; row < rows.length; row++) {
+        for (let column = 0; column < columns.length; column++) {
+            const bucket = measured.get(pairKey(columns[column], rows[row]));
+            if (bucket === undefined) {
+                gaps.push({ x: columns[column], y: rows[row], rect: rectOf(column, row) });
+                continue;
+            }
+            cells.push({
+                bucket,
+                rect: rectOf(column, row),
+                tint: tintOf(bucket.value, scale, input.betterWhen),
+                best: false,
+            });
+        }
+    }
+    // The highest tint is the best cell whichever way better runs, which is the reason the tint
+    // is signed by direction rather than by the metric. A tie goes to the first in scan order -
+    // the cell nearest the origin - rather than to whichever run happened to arrive first.
+    let best = cells[0];
+    for (const shape of cells)
+        if (shape.tint > best.tint)
+            best = shape;
+    best.best = true;
+    const xTicks = tickIndices(columns.length, tickStep(columns.length, plot.width, MIN_TICK_WIDTH))
+        .map(index => ({
+        text: columns[index],
+        x: plot.x + (index + 0.5) * cellWidth,
+        y: plot.y + plot.height + TICK_GAP,
+    }));
+    const yTicks = tickIndices(rows.length, tickStep(rows.length, plot.height, MIN_TICK_HEIGHT))
+        .map(index => ({
+        text: rows[index],
+        x: plot.x - TICK_GAP,
+        y: plot.y + plot.height - (index + 0.5) * cellHeight,
+    }));
+    return {
+        plot,
+        columns,
+        rows,
+        cells,
+        gaps,
+        xTicks,
+        yTicks,
+        xTitle: { text: input.xLabel, x: plot.x + plot.width / 2, y: plot.y + plot.height + TICK_GAP + LABEL_HEIGHT },
+        // Above the plot rather than beside it: a title down the left edge would have to be
+        // rotated, and a rotation is a transform the control would then have to unwind around
+        // everything else it draws.
+        yTitle: { text: input.yLabel, x: 0, y: 0 },
+        legend: legendOf(plot, scale, input.betterWhen),
+        scale,
+    };
+}
+/// The cell under a point, or null. Cells never overlap, so the first match is the only one -
+/// unlike a scatter, where the hit test has to walk the draw order backwards.
+export function hitHeatmap(layout, x, y) {
+    for (const shape of layout.cells) {
+        const rect = shape.rect;
+        if (x >= rect.x && x <= rect.x + rect.width && y >= rect.y && y <= rect.y + rect.height)
+            return shape;
+    }
+    return null;
+}
+function legendOf(plot, scale, betterWhen) {
+    const right = plot.x + plot.width;
+    const left = Math.max(plot.x, right - LEGEND_WIDTH);
+    const stepWidth = (right - left) / LEGEND_STEPS;
+    const steps = [];
+    for (let step = 0; step < LEGEND_STEPS; step++) {
+        steps.push({
+            // Half a pixel of overlap: abutting fills leave a seam wherever the boundary is
+            // fractional, and a key with a comb of background through it reads as a scale with
+            // holes in it.
+            rect: { x: left + step * stepWidth, y: LEGEND_Y, width: stepWidth + 0.5, height: LEGEND_HEIGHT },
+            tint: -1 + (2 * step) / (LEGEND_STEPS - 1),
+        });
+    }
+    return {
+        steps,
+        low: { value: valueAt(-1, scale, betterWhen), x: left, y: 0 },
+        anchor: { value: scale.anchor, x: (left + right) / 2, y: 0 },
+        high: { value: valueAt(1, scale, betterWhen), x: right, y: 0 },
+    };
+}
+/// How many values to skip between labels so they do not touch.
+function tickStep(count, span, room) {
+    const slots = Math.max(1, Math.floor(span / room));
+    return Math.max(1, Math.ceil(count / slots));
+}
+/// Which values get a label. The last one always does - the end of an axis is what a reader
+/// checks first - and the label before it gives way when the step would land them on top of
+/// each other.
+function tickIndices(count, step) {
+    const indices = [];
+    for (let index = 0; index < count; index += step)
+        indices.push(index);
+    const last = count - 1;
+    if (indices[indices.length - 1] !== last) {
+        if (last - indices[indices.length - 1] < step)
+            indices.pop();
+        indices.push(last);
+    }
+    return indices;
+}
+/// A pair as one map key. NUL rather than a printable separator: an axis value may contain any
+/// character a parameter's own notation uses, and "a|b" crossed with "c" must not collide with
+/// "a" crossed with "b|c".
+function pairKey(x, y) {
+    return `${x}\u0000${y}`;
+}
+function numberOf(value) {
+    return Number(value.trim().replace(/%$/, ''));
+}
+//# sourceMappingURL=heatmap-grid.js.map

package/dist/esm/heatmap-grid.js.map

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

package/dist/esm/index.js

@@ -15,7 +15,26 @@ export { OrderBookWidget } from './orderbook-widget.js';
 // 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';
+// The same curve at the size of a chart: one control for an equity panel, so a host does not
+// hand-roll the arithmetic a sparkline already does.
+export { EquityWidget } from './equity-widget.js';
+// The chart engine the two chart panels are built on, re-exported so a host can reach the same
+// createChart these panels use rather than resolving a second copy of it.
+export { AreaSeries, CrosshairMode, LineSeries, createChart } from './chart-engine.js';
+// One metric over two parameters. It knows nothing about optimisation - a grid of {x, y, value}
+// is the same object whatever produced it - which is what lets a backtest sweep and anything
+// else that varies two things share a control.
+export { OptimizationHeatmapWidget } from './optimization-heatmap-widget.js';
+export { HeatDirections, heatScale, hitHeatmap, layoutHeatmap, tintOf, valueAt } from './heatmap-grid.js';
+// The same measurements as a landscape, turned by hand. No library under it: the projection is
+// arithmetic and the gestures are pointer events, so a mouse and a thumb take the same path.
+export { SurfaceWidget } from './surface-widget.js';
+export { DEFAULT_VIEW, MAX_PITCH, MIN_PITCH, clampView, dragView, project, surfaceLayout, zoomView, } from './surface-grid.js';
 export { OptionDeskWidget, greekPlaces, greekScales, scaleChain, sideGreeks } from './option-desk-widget.js';
+// The smile: the same chain the desk reads, drawn as the shape a trader looks for rather than as
+// a column of percentages.
+export { OptionSmileWidget } from './option-smile-widget.js';
+export { sideVolatility, sortedChain, toSmileSeries } from './option-smile-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';

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AA2BvF,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAIlD,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAEnG,8EAA8E;AAC9E,8EAA8E;AAC9E,eAAe;AACf,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,cAAc,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAE7F,OAAO,EAAE,kBAAkB,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAI5E,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAIxD,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAI/D,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAIxD,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAM7F,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAUxD,kFAAkF;AAClF,oFAAoF;AACpF,uFAAuF;AACvF,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAIrE,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,WAAW,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAI7G,0FAA0F;AAC1F,+EAA+E;AAC/E,OAAO,EAAE,WAAW,EAAE,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE,iBAAiB,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAInH,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAI1E,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAI3D,0FAA0F;AAC1F,0FAA0F;AAC1F,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAI5E,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAI3E,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAIxD,2EAA2E;AAC3E,8EAA8E;AAC9E,oEAAoE;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAI7D,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAIvD,8FAA8F;AAC9F,8FAA8F;AAC9F,mFAAmF;AACnF,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"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"}

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