- 1,000 × 241 つのボードの銘柄と列
- 30,000毎秒のイベントを 1 フレーム 1 回の更新で
- ~45 KBgzip のコア、ランタイム依存なし
- 8テーマプリセット、独自のトークンも
Chrome のプロダクションビルドで計測：1,000 銘柄・24 列のボードは、毎秒 10,000 イベントでフレームあたり約 9 ms、30,000 イベントで約 12 ms のメインスレッド処理で、変わったセルはすべて点滅します。
価格のために
トレーディング画面に必要なものが、セルレンダラー任せにせず最初から入っています。
- ティックごとの点滅値が変わるとセルが上昇・下落の色に染まり、変化幅も表示できます。忙しいボードでは保持型の点滅で負荷を抑えます。
- 値幅制限の色分けストップ高、ストップ安、基準値を取引所と同じ色で表示し、呼値に合わせた書式と取引時間の状態にも対応します。
- 見えている分だけ配信ティックをまとめるストリームが行をその場で更新し、ビューポート購読は画面に見えている銘柄だけを配信します。
- 板と歩み値のヘルパー板、価格ラダー、歩み値のためのヘルパーを、約 1 KB の任意のエントリーで提供します。
ひととおり見る
すべてを 1 つのパッケージに
インストールは 1 回、アドオンもライセンスキーもなし。
- リアルタイム
- ティックの点滅 · 変化幅 · その場での更新 · ティックをまとめるストリーム · 画面の行だけ配信 · ライブ再ソート
- データ
- 単一・複数ソート · テキスト、数値、日付、集合のフィルター · クイック検索 · グリッド内検索 · 小計付きグループ化 · ピボット · ツリーデータ · マスター/詳細 · サーバー側の行
- 編集
- インライン・型別エディター · 入力検証 · クリップボード · フィルハンドル · 元に戻す・やり直し
- レイアウト
- 列と行の固定 · 幅に合わせる列・値に応じて広がる列 · サイズ変更、並べ替え、非表示 · ヘッダーグループ · セル結合 · 列の仮想化 · ページ分け
- 見た目
- 8 つのテーマプリセットと独自トークン · データバー、アイコン、カラースケール · スパークライン · ローカライズ
- プラットフォーム
- キーボードとスクリーンリーダー対応 · SSR と SvelteKit · レイアウトの保存と復元 · CSV と Excel の出力・取り込み
1 分で始める
Svelte 5 ではそのまま使えます。React、Vue、Angular、素の JavaScript は <bo-grid> 要素を使い、Svelte の設定は要りません。
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 で取引画面をつくっていますか？
ぜひお話を聞かせてください。
business@tradecanvas.devお問い合わせ