La cuadrícula de datos para mercados con mucho movimiento.
Pizarras de precios, listas de seguimiento, listas de órdenes y libros de órdenes. Decenas de miles de ticks por segundo llegan en una actualización por fotograma, y solo se vuelven a pintar las celdas que cambiaron. La agrupación, la tabla dinámica, los datos en árbol y la exportación a Excel vienen en el mismo paquete gratuito.
npm i bo-grid
- 1,000 × 24símbolos y columnas en una pizarra
- 30,000eventos por segundo, en una actualización por fotograma
- ~45 KBnúcleo con gzip, sin dependencias en tiempo de ejecución
- 8temas predefinidos, y tus propios tokens
Medido en un build de producción en Chrome: una pizarra de 1,000 símbolos y 24 columnas necesita unos 9 ms de trabajo del hilo principal por fotograma a 10,000 eventos por segundo y unos 12 ms a 30,000, con cada celda que cambia parpadeando.
Hecha para precios
Lo que necesita una pantalla de trading viene integrado, no se deja en manos de un renderizador de celdas.
- Un parpadeo en cada tickLas celdas se tiñen al alza o a la baja al cambiar y pueden mostrar el tamaño del movimiento. En una pizarra con mucha actividad, los parpadeos sostenidos mantienen barato cada uno.
- Colores de límites de precioPrecios de techo, suelo y referencia coloreados como los muestran los mercados, con formato según el tick y estado de la sesión.
- Solo se transmite lo que está en pantallaUn flujo de ticks que los agrupa actualiza las filas en su sitio, y las suscripciones por viewport transmiten solo los símbolos visibles.
- Utilidades para libro de órdenes y cintaUtilidades para un libro de órdenes, una escalera de precios y time and sales, en un punto de entrada opcional de 1 KB aproximadamente.
Un vistazo
Todo en un solo paquete
Una instalación, sin complementos, sin clave de licencia.
- Tiempo real
- Parpadeo en cada tick · tamaño de cada movimiento · actualizaciones en su sitio · un flujo de ticks agrupado · transmisión solo de las filas en pantalla · reordenación en vivo
- Datos
- Ordenación simple y múltiple · filtros de texto, número, fecha y conjunto · búsqueda rápida · buscar en la cuadrícula · agrupación con subtotales · tabla dinámica · datos en árbol · maestro-detalle · filas en el servidor
- Edición
- Editores en línea y tipados · validación · portapapeles · controlador de relleno · deshacer y rehacer
- Diseño
- Columnas y filas fijas · columnas que se escalan o ensanchan cuando crecen los valores · redimensionar, reordenar, ocultar · grupos de encabezados · celdas combinadas · virtualización de columnas · paginación
- Aspecto
- 8 temas predefinidos y tus propios tokens · barras de datos, iconos y escalas de color · minigráficos · localización
- Plataforma
- Soporte de teclado y lector de pantalla · SSR y SvelteKit · guardar y restaurar el diseño · exportación e importación CSV y Excel
Empieza en un minuto
Nativa en Svelte 5. React, Vue, Angular o JavaScript puro usan el elemento <bo-grid> y no necesitan configurar 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)),
};Junto al gráfico
bo-grid y TradeCanvas están hechos para ir juntos: una pizarra cuyas filas abren un gráfico, un gráfico junto a una lista de órdenes. Juntos son el comienzo de un kit para software de trading: gráficos, envío de órdenes, pizarras de precios y flujo de órdenes.
¿Estás creando una pantalla de trading con TradeCanvas?
Nos encantaría saberlo.