Торговые JavaScript-контролы

JavaScript-контролы StockSharp для торговли — набор браузерных панелей для торгового терминала. Пакет опубликован в npm под именем @stocksharp/trading-controls, а все контролы можно увидеть в онлайн-демо.

Торговый экран с лентой сделок, стаканом, списком инструментов, вводом заявки и таблицами

На снимке также показан свечной график из отдельного пакета @stocksharp/chart. В @stocksharp/trading-controls входят семь самостоятельных контролов:

Контрол	Класс	Идентификатор
Активные заявки	`ActiveOrdersWidget`	`activeOrders`
Позиции	`PositionsWidget`	`positions`
История сделок	`TradeHistoryWidget`	`tradeHistory`
Список инструментов	`WatchlistWidget`	`watchlist`
Ввод заявки	`OrderEntryWidget`	`orderEntry`
Стакан	`OrderBookWidget`	`orderbook`
Лента сделок	`TradeFeedWidget`	`tradefeed`

Значения идентификаторов доступны через экспортируемый объект ControlTypes.

Установка

npm install @stocksharp/trading-controls

Основные стили обязательны. Готовую светлую и тёмную палитру можно подключить дополнительно либо заменить собственными CSS-переменными --t-*:

import '@stocksharp/trading-controls/styles.css';
import '@stocksharp/trading-controls/theme.css'; // Необязательно: готовая тема.

Контролы используют классы Bootstrap Icons, но не поставляют сами шрифты и SVG. Хост-страница должна подключить иконки отдельно.

Для страницы без сборщика предназначен файл dist/sstradingcontrols.js, который создаёт глобальный объект window.SSTradingControls.

Общая схема создания

Каждый контрол создаётся статическим методом create. Метод проверяет хост, строит собственный DOM и добавляет корневой элемент в переданный контейнер:

import {
  PositionsWidget,
  type TradingHost,
} from '@stocksharp/trading-controls';

declare const host: TradingHost;

const positions = PositionsWidget.create(
  document.querySelector<HTMLElement>('#positions')!,
  {},
  {
    host,
    closePosition: (portfolioId, instrumentId, symbol) =>
      console.log('close', portfolioId, instrumentId, symbol),
    reversePosition: (portfolioId, instrumentId, symbol) =>
      console.log('reverse', portfolioId, instrumentId, symbol),
    refreshPositions: () => console.log('refresh'),
  },
);

positions.update([]);

Второй аргумент — сохранённое состояние экземпляра. Набор зависимостей в третьем аргументе различается у контролов: например, панель позиций получает обработчики закрытия и переворота, а стакан — обработчики выбора и исполнения цены.

Контракт TradingHost

Контролы не обращаются напрямую к глобальному переводчику, хранилищу настроек, торговому соединению или менеджеру окон. Всё внешнее взаимодействие проходит через один объект TradingHost.

Член хоста	Назначение
`isPrimary`	Указывает основной экземпляр контрола на странице.
`t(key, ...args)`	Переводит видимый текст и подставляет аргументы.
`presentation`	Форматирует сторону, тип и состояние заявки, классы прибыли и палитру canvas.
`preferences`, `cache`	Хранят долговременные настройки и временные данные.
`trading.api`	Ищет инструменты и загружает исполнения.
`trading.marketData`	Управляет подписками и предоставляет активные заявки.
`trading.portfolioId()`	Возвращает текущий портфель.
`trading.pickInstrument(...)`	Открывает выбор инструмента.
`ticker`	Получает видимые инструменты и их котировки.
`allow(action)`	Проверяет разрешение на действие.
`close`, `spawn`, `persistState`, `saveLayout`	Управляют жизненным циклом и состоянием панели.
`register`, `unregister`, `broadcast`	Регистрируют экземпляры и рассылают изменения между ними.
`log(message)`	Принимает диагностические сообщения.

Все члены обязательны. assertHost проверяет вложенные функции до отрисовки контрола и сообщает точный отсутствующий путь. Если приложению не нужна часть возможностей, для обязательных команд можно передать осмысленные заглушки, например log: console.warn или пустой saveLayout.

Локализация и оформление

Видимый текст контролы получают только через host.t. Полный актуальный перечень из 153 ключей поставляется в @stocksharp/trading-controls/translation-keys.json. Неизвестный ключ будет показан пользователю как есть, поэтому хост должен определить переводы для всего списка.

Файл styles.css содержит правила, но берёт цвета, шрифты и размеры из CSS-переменных --t-*. Если готовый theme.css не используется, эти переменные определяет приложение. Цвета canvas для стакана и пузырьковой ленты возвращает host.presentation.canvasPalette().

Освобождение ресурсов

При удалении панели вызовите dispose(). Метод снимает обработчики, при наличии отключает наблюдатели и подписки конкретного контрола, а затем вызывает host.unregister.

positions.dispose();

Сборка из исходного кода

git clone https://github.com/StockSharp/JS-TradingControls.git
cd JS-TradingControls
npm install
npm test
npm run build