Таблица данных для оживлённых рынков.
Табло котировок, списки наблюдения, журналы ордеров и стаканы. Десятки тысяч тиков в секунду укладываются в одно обновление на кадр, и перерисовываются только изменившиеся ячейки. Группировка, сводные таблицы, древовидные данные и экспорт в Excel входят в тот же бесплатный пакет.
npm i bo-grid
- 1000 × 24символов и столбцов на одном табло
- 30 000событий в секунду за одно обновление на кадр
- ~45 KBядро после gzip, без runtime-зависимостей
- 8готовых тем и ваши собственные токены
Измерено на production-сборке в Chrome: табло из 1000 символов и 24 столбцов занимает около 9 мс работы основного потока на кадр при 10 000 событий в секунду и около 12 мс при 30 000, и каждая изменившаяся ячейка мигает.
Создано для цен
Всё, что нужно торговому экрану, встроено, а не оставлено на откуп рендереру ячеек.
- Вспышка на каждом тикеЯчейки подсвечиваются вверх или вниз при изменении и могут показывать величину движения. На загруженном табло удерживаемые вспышки делают каждую из них дешёвой.
- Цвета ценовых пределовВерхний предел, нижний предел и референсная цена окрашены так, как их показывают биржи, с форматированием по шагу цены и состоянием сессии.
- Передаётся только то, что на экранеОбъединяющий поток тиков обновляет строки на месте, а подписки по области просмотра передают только видимые символы.
- Помощники для стакана и ленты сделокПомощники для стакана, ценовой лестницы и ленты сделок в необязательной точке входа размером около 1 KB.
Взгляд вокруг
Всё в одном пакете
Одна установка, никаких дополнений, никакого лицензионного ключа.
- Реальное время
- Вспышки на тиках · величина каждого движения · обновления на месте · объединяющий поток тиков · передача только видимых строк · живая пересортировка
- Данные
- Сортировка по одному и нескольким столбцам · текстовые, числовые, календарные фильтры и фильтры по набору · быстрый поиск · поиск по таблице · группировка с промежуточными итогами · сводные таблицы · древовидные данные · master-detail · строки на стороне сервера
- Редактирование
- Встроенные и типизированные редакторы · валидация · буфер обмена · маркер заполнения · отмена и повтор
- Макет
- Закреплённые столбцы и строки · столбцы, которые масштабируются или расширяются по мере роста значений · изменение размера, порядка, скрытие · группы заголовков · объединённые ячейки · виртуализация столбцов · постраничный вывод
- Оформление
- 8 готовых тем и ваши собственные токены · гистограммы в ячейках, значки и цветовые шкалы · спарклайны · локализация
- Платформа
- Клавиатура и программы чтения с экрана · SSR и SvelteKit · сохранение и восстановление макета · экспорт и импорт CSV и Excel
Начните за минуту
Нативно в Svelte 5. React, Vue, Angular или чистый JavaScript используют элемент <bo-grid> и не требуют настройки Svelte.
<script lang="ts">
import { Grid, type ColumnDef } from 'bo-grid';
const columns: ColumnDef[] = [
{ type: 'text', key: 'symbol', header: 'Symbol' },
{ type: 'price', key: 'price', header: 'Price', flash: 'auto', showChange: true },
{ type: 'percent', key: 'change', header: 'Chg %' },
{ type: 'volume', key: 'volume', header: 'Volume' },
];
let rows = $state.raw(quotes);
</script>
<Grid {rows} {columns} height={480} fitColumns findBar />// React, Vue, Angular or plain JS: no Svelte setup
import 'bo-grid/element';
document.querySelector('bo-grid').config = {
columns,
rows,
height: 480,
theme: 'dark',
// Ticks patch rows in place: only changed cells repaint
onReady: (api) => feed.onTicks((changes) => api.patchRows(changes)),
};Рядом с графиком
bo-grid и TradeCanvas созданы, чтобы стоять рядом: табло, строки которого открывают график, график рядом с журналом ордеров. Вместе они — начало набора инструментов для торгового софта: графики, ввод ордеров, табло котировок и поток ордеров.
Делаете торговый экран на TradeCanvas?
Мы будем рады узнать об этом.