- 1,000 × 24한 시세판의 종목과 열
- 30,000초당 이벤트를 프레임당 한 번에
- ~45 KBgzip 코어, 런타임 의존성 없음
- 8테마 프리셋, 직접 만든 토큰도
Chrome에서 프로덕션 빌드로 측정: 1,000종목 24열 시세판은 초당 10,000 이벤트에서 프레임당 약 9 ms, 30,000 이벤트에서 약 12 ms의 메인 스레드 작업을 쓰며, 바뀐 셀은 모두 깜박입니다.
가격을 위해 만든
트레이딩 화면에 필요한 것이 셀 렌더러에 맡겨지지 않고 기본으로 들어 있습니다.
- 틱마다 깜박임값이 바뀌면 셀이 상승·하락 색으로 물들고, 움직인 크기도 보여 줄 수 있습니다. 바쁜 시세판에서는 유지형 깜박임으로 비용을 낮춥니다.
- 상·하한가 색상상한가, 하한가, 기준가를 거래소처럼 색으로 표시하고, 호가 단위에 맞춘 서식과 장 상태를 지원합니다.
- 화면에 보이는 것만 스트리밍틱을 모으는 스트림이 행을 제자리에서 패치하고, 뷰포트 구독은 화면에 보이는 종목만 스트리밍합니다.
- 호가창과 체결 도우미호가창, 가격 사다리, 체결 내역을 위한 도우미가 약 1 KB의 선택 엔트리에 있습니다.
둘러보기
하나의 패키지에 모두
한 번 설치, 애드온 없음, 라이선스 키 없음.
- 실시간
- 틱 깜박임 · 움직임 크기 · 제자리 패치 · 틱 병합 스트림 · 화면의 행만 스트리밍 · 실시간 재정렬
- 데이터
- 단일·다중 정렬 · 텍스트, 숫자, 날짜, 집합 필터 · 빠른 검색 · 그리드 내 찾기 · 소계가 있는 그룹화 · 피벗 · 트리 데이터 · 마스터-디테일 · 서버 측 행
- 편집
- 인라인·타입별 편집기 · 유효성 검사 · 클립보드 · 채우기 핸들 · 실행 취소와 다시 실행
- 레이아웃
- 열과 행 고정 · 맞춰 늘거나 값에 따라 넓어지는 열 · 크기 조절, 순서 변경, 숨기기 · 헤더 그룹 · 병합 셀 · 열 가상화 · 페이지 나누기
- 모양
- 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문의하기