@stocksharp/trading-controls 1.2.0 → 1.3.0

package/src/black-scholes.ts

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

package/src/control-types.ts

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

package/src/index.ts

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

package/src/log-monitor-widget.ts

@@ -0,0 +1,312 @@
+// Log monitor — multi-instance.
+//
+// Two panes: the tree of everything that writes a log on the left, and on the right what the
+// selected source and everything under it has written. The desktop version copies each message
+// into every ancestor's list, so one line is held as many times as it has ancestors and its own
+// counter reports copies rather than messages. Here a message is held once and carries the id
+// of the source that wrote it; selecting a node filters by its subtree.
+//
+// A live log has no end, so this one has a cap. The desktop's grows for the lifetime of the
+// window - nothing trims it - which a browser tab cannot afford.
+import { makeElement, makeIconButton, makePanelId, makePanelRoot } from './dom.js';
+import { ControlTypes } from './control-types.js';
+import { makeGridMenu } from './grid-menu.js';
+import { TradingHost, assertHost } from './trading-host.js';
+import {
+    LogLevels, buildLogTree, keepLog, subtreeOf,
+    type LogLevel, type LogMessageRow, type LogSourceNode, type LogTreeNode,
+} from './log-tree.js';
+import { DataGrid, GridColumn } from '@stocksharp/grids/source/data-grid';
+
+/// What the monitor needs beyond the host port. Nothing: a log is written to, not acted on.
+export interface LogMonitorDeps {
+    host: TradingHost;
+    /// How many messages to keep. Older ones fall off the front. Defaults to 5000 - enough to
+    /// scroll back through a session, small enough that a chatty connector cannot fill a tab.
+    maxMessages?: number;
+}
+
+const DEFAULT_MAX = 5_000;
+
+/// The letter a level shows in the narrow column, and the class that colours the row.
+///
+/// Info gets a letter here. The desktop leaves its cell blank - there is simply no trigger for
+/// it among the four that exist - so the commonest level is the one with no marking at all,
+/// which is an omission rather than a decision.
+const LEVEL_LETTER: Record<string, string> = {
+    [LogLevels.Error]: 'E',
+    [LogLevels.Warning]: 'W',
+    [LogLevels.Info]: 'I',
+    [LogLevels.Debug]: 'D',
+    [LogLevels.Verbose]: 'V',
+};
+
+const ALL_LEVELS: LogLevel[] = [LogLevels.Error, LogLevels.Warning, LogLevels.Info, LogLevels.Debug, LogLevels.Verbose];
+
+export class LogMonitorWidget {
+    static TYPE = ControlTypes.LogMonitor;
+
+    rootEl: HTMLElement;
+    el: HTMLElement | null;
+    // `//` rather than `///` from here down — see the note in positions-widget.
+    _host: TradingHost;
+    _max: number;
+    _closeBtn: HTMLElement | null;
+    _clearBtn: HTMLElement | null;
+    _exportBtn: HTMLElement | null;
+    _treeEl: HTMLElement | null;
+    _filterEl: HTMLInputElement | null;
+    _sources: LogSourceNode[];
+    _messages: LogMessageRow[];
+    _levels: Set<string>;
+    _text: string;
+    _selected: string | null;
+    _grid: DataGrid<LogMessageRow> | null;
+
+    static create(hostEl: HTMLElement, state: Record<string, unknown>, deps: LogMonitorDeps): LogMonitorWidget {
+        const host = assertHost(deps?.host, 'LogMonitorWidget');
+        const root = LogMonitorWidget._buildRoot(host);
+        root.id = makePanelId(LogMonitorWidget.TYPE);
+        hostEl.appendChild(root);
+        return new LogMonitorWidget(root, state || {}, deps);
+    }
+
+    // The panel's markup: a source tree, a toolbar of level toggles and a text box, and the
+    // message table. The level toggles are buttons rather than checkboxes because they are read
+    // as a row of states, and each carries its letter so the toolbar and the column agree.
+    static _buildRoot(host: TradingHost): HTMLElement {
+        const title = host.t('LogMonitor');
+        return makePanelRoot('log-monitor-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 log-monitor-body', {}, [
+                makeElement('div', 'log-sources', { role: 'tree', 'aria-label': host.t('LogSources') }, []),
+                makeElement('div', 'log-messages', {}, [
+                    makeElement('div', 'log-toolbar', { role: 'toolbar', 'aria-label': host.t('LogMonitorActions') }, [
+                        ...ALL_LEVELS.map(level => makeElement('button', `log-level-toggle log-level-${level} is-on`, {
+                            type: 'button',
+                            'data-level': level,
+                            'aria-pressed': 'true',
+                            title: levelTitle(host, level),
+                        }, [LEVEL_LETTER[level]])),
+                        makeElement('input', 'form-control form-control-sm log-filter', {
+                            type: 'search',
+                            placeholder: host.t('Filter'),
+                            'aria-label': host.t('Filter'),
+                        }, []),
+                        makeIconButton('bt-icon-btn log-clear-btn', host.t('ClearItems'), 'bi-eraser', {}),
+                        makeIconButton('bt-icon-btn panel-export-btn', host.t('ExportToExcel'), 'bi-file-earmark-spreadsheet', {}),
+                    ]),
+                    // The table sits in a box of its own rather than being a flex child: a table
+                    // told to fill a column stretches its rows to do it, so a log holding one
+                    // line drew that line a panel tall - and with the toolbar and the table as
+                    // the only two children there was nowhere for a long log to scroll.
+                    makeElement('div', 'log-table-scroll', {}, [
+                        makeElement('table', 'terminal-table log-table', { role: 'table', 'aria-label': host.t('LogMessages') }, [
+                            makeElement('thead', '', {}, []),
+                            makeElement('tbody', 'log-body', {}, []),
+                        ]),
+                    ]),
+                ]),
+            ]),
+        ]);
+    }
+
+    constructor(rootEl: HTMLElement, _state: Record<string, unknown>, deps: LogMonitorDeps) {
+        this._host = assertHost(deps?.host, 'LogMonitorWidget');
+        this._max = deps?.maxMessages && deps.maxMessages > 0 ? deps.maxMessages : DEFAULT_MAX;
+
+        this.rootEl = rootEl;
+        this.el = this.rootEl.querySelector('.log-body');
+        this._treeEl = this.rootEl.querySelector('.log-sources');
+        this._filterEl = this.rootEl.querySelector('.log-filter');
+        this._closeBtn = this.rootEl.querySelector('.panel-close-btn');
+        this._clearBtn = this.rootEl.querySelector('.log-clear-btn');
+        this._exportBtn = this.rootEl.querySelector('.panel-export-btn');
+
+        this._sources = [];
+        this._messages = [];
+        this._levels = new Set<string>(ALL_LEVELS);
+        this._text = '';
+        this._selected = null;
+
+        this._closeBtn?.addEventListener('click', (e) => { e.preventDefault(); this._host.close(); });
+        this._clearBtn?.addEventListener('click', (e) => { e.preventDefault(); this.clear(); });
+        this._exportBtn?.addEventListener('click', (e) => { e.preventDefault(); this._export(); });
+
+        for (const toggle of Array.from(this.rootEl.querySelectorAll<HTMLElement>('.log-level-toggle'))) {
+            toggle.addEventListener('click', (e) => {
+                e.preventDefault();
+                const level = toggle.getAttribute('data-level') ?? '';
+                if (this._levels.has(level)) this._levels.delete(level);
+                else this._levels.add(level);
+                toggle.classList.toggle('is-on', this._levels.has(level));
+                toggle.setAttribute('aria-pressed', this._levels.has(level) ? 'true' : 'false');
+                this._render();
+            });
+        }
+
+        this._filterEl?.addEventListener('input', () => {
+            this._text = this._filterEl?.value ?? '';
+            this._render();
+        });
+
+        const head = this.rootEl.querySelector('.log-table thead');
+        this._grid = head && this.el
+            ? new DataGrid<LogMessageRow>({
+                head: head as HTMLElement,
+                body: this.el,
+                columns: this._columns(),
+                // The order it happened in. A log read out of order is not a log.
+                defaultSort: { col: 'time', dir: 'asc' },
+                rowKey: (m) => String(m.id),
+                emptyText: this._host.t('NoLogMessages'),
+                rowClass: (m) => `log-row log-row-${m.level}`,
+                contextMenu: makeGridMenu(this._host),
+                selection: 'multi',
+            })
+            : null;
+
+        this._host.register(this);
+    }
+
+    dispose(): void {
+        this._grid?.destroy();
+        this._host.unregister(this);
+        try { this.rootEl.remove(); } catch { /* already detached */ }
+    }
+
+    /// The sources that exist. Sent whole: a source that has gone is gone from the tree, and
+    /// the selection falls back to everything rather than to a node nobody can see.
+    setSources(sources: LogSourceNode[]): void {
+        this._sources = sources || [];
+        if (this._selected !== null && !this._sources.some(s => s.id === this._selected)) this._selected = null;
+        this._renderTree();
+        this._render();
+    }
+
+    /// Add what has just been written. The oldest fall off the front once the cap is reached.
+    append(messages: LogMessageRow[]): void {
+        if (!messages || messages.length === 0) return;
+
+        this._messages.push(...messages);
+        if (this._messages.length > this._max) this._messages.splice(0, this._messages.length - this._max);
+        this._render();
+    }
+
+    /// Forget every message. The sources stay: they still exist, they have just gone quiet.
+    clear(): void {
+        this._messages = [];
+        this._render();
+    }
+
+    /// Show one source's subtree, or everything when given null.
+    select(sourceId: string | null): void {
+        this._selected = sourceId;
+        this._renderTree();
+        this._render();
+    }
+
+    /// What is on screen, after every filter.
+    visible(): LogMessageRow[] {
+        const sources = subtreeOf(this._sources, this._selected);
+        return this._messages.filter(m => keepLog(m, { levels: this._levels, text: this._text, sources }));
+    }
+
+    _render(): void {
+        this._grid?.setRows(this.visible());
+    }
+
+    _renderTree(): void {
+        const tree = this._treeEl;
+        if (tree === null) return;
+
+        tree.innerHTML = '';
+        tree.appendChild(this._treeRow({ id: '', name: this._host.t('AllSources'), depth: 0, children: [] }, null));
+        for (const root of buildLogTree(this._sources)) this._appendNode(tree, root);
+    }
+
+    _appendNode(into: HTMLElement, node: LogTreeNode): void {
+        into.appendChild(this._treeRow(node, node.id));
+        for (const child of node.children) this._appendNode(into, child);
+    }
+
+    // Flat rows with an indent rather than nested lists: the tree is read, not restructured,
+    // and one list is what a keyboard walks through in the order the eye does.
+    _treeRow(node: LogTreeNode, id: string | null): HTMLElement {
+        const selected = this._selected === id;
+        const row = makeElement('button', `log-source${selected ? ' is-selected' : ''}`, {
+            type: 'button',
+            role: 'treeitem',
+            'aria-selected': selected ? 'true' : 'false',
+            'aria-level': String(node.depth + 1),
+            style: `padding-left: ${0.5 + node.depth * 0.85}rem`,
+        }, [node.name]);
+
+        row.addEventListener('click', (e) => { e.preventDefault(); this.select(id); });
+        return row;
+    }
+
+    _export(): void {
+        this._grid?.download('log', this._host.t('LogMonitor'));
+    }
+
+    _columns(): GridColumn<LogMessageRow>[] {
+        const label = (key: string) => this._host.t(key);
+        return [
+            {
+                key: 'source',
+                header: label('Source'),
+                exportable: true,
+                value: (m) => m.source ?? this._sourceName(m.sourceId),
+            },
+            {
+                key: 'time',
+                header: label('Time'),
+                exportable: true,
+                value: (m) => m.time,
+                render: (m) => this._host.presentation.timeText(m.time),
+                exportValue: (m) => this._host.presentation.timeText(m.time),
+            },
+            {
+                key: 'level',
+                header: label('Type'),
+                headerClass: 'log-level-col',
+                exportable: true,
+                cellClass: (m) => `log-level-cell log-level-${m.level}`,
+                value: (m) => m.level,
+                render: (m) => LEVEL_LETTER[m.level] ?? String(m.level ?? '').slice(0, 1).toUpperCase(),
+                // The sheet carries the level's name, not the letter the column has room for.
+                exportValue: (m) => m.level,
+            },
+            {
+                key: 'message',
+                header: label('Message'),
+                exportable: true,
+                cellClass: () => 'log-message-cell',
+                value: (m) => m.message,
+            },
+        ];
+    }
+
+    _sourceName(id: string): string {
+        return this._sources.find(s => s.id === id)?.name ?? id;
+    }
+}
+
+/// What a level's toggle is called.
+///
+/// Literal keys at the point they are asked for - see the note on the same shape in
+/// strategies-widget: a key built from a value is invisible to the scan that generates
+/// `translation-keys.json`, and reaches the user untranslated.
+function levelTitle(host: TradingHost, level: LogLevel): string {
+    switch (level) {
+        case LogLevels.Error: return host.t('Errors');
+        case LogLevels.Warning: return host.t('Warnings');
+        case LogLevels.Info: return host.t('Messages');
+        case LogLevels.Debug: return host.t('Debug');
+        default: return host.t('Verbose');
+    }
+}