OrderbookSettings

The OrderbookSettings component provides a collection of UI controls for adjusting orderbook configuration options like depth limits, update frequency, grouping, and debug settings.

Basic Usage

import { OrderbookSettings } from '@krono/kit'

export const SettingsBasic = () => {
  return (
    <div className="space-y-4">
      <OrderbookSettings.Row label="Depth">
        <OrderbookSettings.DepthSelect />
      </OrderbookSettings.Row>
      <OrderbookSettings.Row label="Spread">
        <OrderbookSettings.SpreadSelect />
      </OrderbookSettings.Row>
    </div>
  )
}

Anatomy

import { OrderbookSettings } from '@krono/kit'

<div>
  <OrderbookSettings.Row label="...">
    <OrderbookSettings.DepthSelect />
  </OrderbookSettings.Row>
  <OrderbookSettings.Separator />
  <OrderbookSettings.Row label="...">
    <OrderbookSettings.ThrottleInput />
  </OrderbookSettings.Row>
  <OrderbookSettings.Row label="...">
    <OrderbookSettings.DebounceInput />
  </OrderbookSettings.Row>
  <OrderbookSettings.Row label="...">
    <OrderbookSettings.HistorySwitch />
  </OrderbookSettings.Row>
  <OrderbookSettings.Row label="...">
    <OrderbookSettings.MaxHistoryInput />
  </OrderbookSettings.Row>
  <OrderbookSettings.Row label="...">
    <OrderbookSettings.DebugSwitch />
  </OrderbookSettings.Row>
</div>

Examples

Complete Settings Panel

A full settings panel with all available controls.

import { OrderbookSettings } from '@krono/kit'

export const SettingsPanel = () => {
  return (
    <div className="space-y-4">
      <OrderbookSettings.Row label="Depth">
        <OrderbookSettings.DepthSelect />
      </OrderbookSettings.Row>

      <OrderbookSettings.Row label="Spread Grouping">
        <OrderbookSettings.SpreadSelect />
      </OrderbookSettings.Row>

      <OrderbookSettings.Separator />

      <OrderbookSettings.Row label="Throttle (ms)">
        <OrderbookSettings.ThrottleInput />
      </OrderbookSettings.Row>

      <OrderbookSettings.Row label="Debounce (ms)">
        <OrderbookSettings.DebounceInput />
      </OrderbookSettings.Row>

      <OrderbookSettings.Separator />

      <OrderbookSettings.Row label="Enable History">
        <OrderbookSettings.HistorySwitch />
      </OrderbookSettings.Row>

      <OrderbookSettings.Row label="Max History">
        <OrderbookSettings.MaxHistoryInput />
      </OrderbookSettings.Row>

      <OrderbookSettings.Separator />

      <OrderbookSettings.Row label="Debug Mode">
        <OrderbookSettings.DebugSwitch />
      </OrderbookSettings.Row>
    </div>
  )
}

Display settings in a popover for space-efficient UI.

import { OrderbookSettings } from '@krono/kit'
import { Button } from '@/components/ui/button'
import { Settings } from 'lucide-react'

export const SettingsPopover = () => {
  return (
    <OrderbookSettings.Popover.Root>
      <OrderbookSettings.Popover.Trigger asChild>
        <Button variant="outline" size="icon">
          <Settings className="h-4 w-4" />
        </Button>
      </OrderbookSettings.Popover.Trigger>
      <OrderbookSettings.Popover.Content className="w-80">
        <div className="space-y-4">
          <OrderbookSettings.Row label="Depth">
            <OrderbookSettings.DepthSelect />
          </OrderbookSettings.Row>
          <OrderbookSettings.Row label="Spread">
            <OrderbookSettings.SpreadSelect />
          </OrderbookSettings.Row>
        </div>
      </OrderbookSettings.Popover.Content>
    </OrderbookSettings.Popover.Root>
  )
}

Display Settings Only

A minimal settings panel with just display options.

import { OrderbookSettings } from '@krono/kit'

export const DisplaySettings = () => {
  return (
    <div className="space-y-4">
      <OrderbookSettings.Row label="Price Levels">
        <OrderbookSettings.DepthSelect />
      </OrderbookSettings.Row>

      <OrderbookSettings.Row label="Price Grouping">
        <OrderbookSettings.SpreadSelect />
      </OrderbookSettings.Row>
    </div>
  )
}

Performance Settings

Focus on performance-related controls.

import { OrderbookSettings } from '@krono/kit'

export const PerformanceSettings = () => {
  return (
    <div className="space-y-4">
      <OrderbookSettings.Row label="Update Throttle (ms)">
        <OrderbookSettings.ThrottleInput />
      </OrderbookSettings.Row>

      <OrderbookSettings.Row label="Input Debounce (ms)">
        <OrderbookSettings.DebounceInput />
      </OrderbookSettings.Row>

      <OrderbookSettings.Separator />

      <OrderbookSettings.Row label="Enable History">
        <OrderbookSettings.HistorySwitch />
      </OrderbookSettings.Row>

      <OrderbookSettings.Row label="Max History Entries">
        <OrderbookSettings.MaxHistoryInput />
      </OrderbookSettings.Row>
    </div>
  )
}

Use settings in a sidebar layout.

import { OrderbookSettings } from '@krono/kit'
import { Orderbook, OrderbookTable } from '@krono/kit'

export const SettingsSidebar = () => {
  return (
    <div className="flex h-screen">
      <aside className="w-80 border-r p-4 overflow-y-auto">
        <h2 className="text-lg font-semibold mb-4">Orderbook Settings</h2>
        <div className="space-y-4">
          <OrderbookSettings.Row label="Depth">
            <OrderbookSettings.DepthSelect />
          </OrderbookSettings.Row>
          <OrderbookSettings.Row label="Spread">
            <OrderbookSettings.SpreadSelect />
          </OrderbookSettings.Row>
          <OrderbookSettings.Separator />
          <OrderbookSettings.Row label="Debug">
            <OrderbookSettings.DebugSwitch />
          </OrderbookSettings.Row>
        </div>
      </aside>

      <main className="flex-1">
        <Orderbook.Root config={{ symbol: 'BTC/USD' }}>
          <Orderbook.Panel
            renderTable={(props) => <OrderbookTable.Root {...props} />}
          />
        </Orderbook.Root>
      </main>
    </div>
  )
}

Components

DepthSelect

Select the number of price levels to display.

<OrderbookSettings.Row label="Depth">
  <OrderbookSettings.DepthSelect />
</OrderbookSettings.Row>

Props:

string

Additional CSS classes to apply.

SpreadSelect

Configure price level grouping based on spread.

<OrderbookSettings.Row label="Spread Grouping">
  <OrderbookSettings.SpreadSelect />
</OrderbookSettings.Row>

Props:

string

Additional CSS classes to apply.

ThrottleInput

Control the update throttle interval in milliseconds.

<OrderbookSettings.Row label="Throttle (ms)">
  <OrderbookSettings.ThrottleInput />
</OrderbookSettings.Row>

Props:

string

Additional CSS classes to apply.

DebounceInput

Set the input debounce delay in milliseconds.

<OrderbookSettings.Row label="Debounce (ms)">
  <OrderbookSettings.DebounceInput />
</OrderbookSettings.Row>

Props:

string

Additional CSS classes to apply.

HistorySwitch

Toggle historical data tracking.

<OrderbookSettings.Row label="Enable History">
  <OrderbookSettings.HistorySwitch />
</OrderbookSettings.Row>

Props:

string

Additional CSS classes to apply.

MaxHistoryInput

Set the maximum number of historical entries to retain.

<OrderbookSettings.Row label="Max History">
  <OrderbookSettings.MaxHistoryInput />
</OrderbookSettings.Row>

Props:

string

Additional CSS classes to apply.

DebugSwitch

Enable or disable debug mode.

<OrderbookSettings.Row label="Debug Mode">
  <OrderbookSettings.DebugSwitch />
</OrderbookSettings.Row>

Props:

string

Additional CSS classes to apply.

Row

Container for a label and control pair.

<OrderbookSettings.Row label="Setting Name">
  {/* Control component */}
</OrderbookSettings.Row>

Props:

string

required

The label text for the setting.

ReactNode

required

The control component to display.

string

Additional CSS classes to apply.

Separator

Visual separator between setting groups.

<OrderbookSettings.Separator />

Props:

string

Additional CSS classes to apply.

Popover components for displaying settings in an overlay. Root container for the popover.

<OrderbookSettings.Popover.Root>
  {/* Trigger and Content */}
</OrderbookSettings.Popover.Root>

Popover.Trigger

Trigger element to open the popover.

<OrderbookSettings.Popover.Trigger asChild>
  <Button>Settings</Button>
</OrderbookSettings.Popover.Trigger>

Props:

boolean

Merge props with child element instead of wrapping.

ReactNode

required

The trigger element.

Content container for the popover.

<OrderbookSettings.Popover.Content className="w-80">
  {/* Settings components */}
</OrderbookSettings.Popover.Content>

Props:

ReactNode

required

Settings components to display.

string

Additional CSS classes to apply.

Integration Example

Complete example with all settings in a popover.

import { Orderbook, OrderbookSettings, OrderbookTable } from '@krono/kit'
import { Button } from '@/components/ui/button'
import { Settings } from 'lucide-react'

export const OrderbookWithSettings = () => {
  return (
    <Orderbook.Root config={{ symbol: 'BTC/USD' }}>
      <div className="relative">
        <Orderbook.Panel
          renderTable={(props) => <OrderbookTable.Root {...props} />}
        />

        <div className="absolute top-4 right-4">
          <OrderbookSettings.Popover.Root>
            <OrderbookSettings.Popover.Trigger asChild>
              <Button variant="outline" size="icon">
                <Settings className="h-4 w-4" />
              </Button>
            </OrderbookSettings.Popover.Trigger>
            <OrderbookSettings.Popover.Content className="w-80">
              <div className="space-y-4">
                <h3 className="font-semibold">Display</h3>
                <OrderbookSettings.Row label="Depth">
                  <OrderbookSettings.DepthSelect />
                </OrderbookSettings.Row>
                <OrderbookSettings.Row label="Grouping">
                  <OrderbookSettings.SpreadSelect />
                </OrderbookSettings.Row>

                <OrderbookSettings.Separator />

                <h3 className="font-semibold">Performance</h3>
                <OrderbookSettings.Row label="Throttle (ms)">
                  <OrderbookSettings.ThrottleInput />
                </OrderbookSettings.Row>
                <OrderbookSettings.Row label="Debounce (ms)">
                  <OrderbookSettings.DebounceInput />
                </OrderbookSettings.Row>

                <OrderbookSettings.Separator />

                <h3 className="font-semibold">Advanced</h3>
                <OrderbookSettings.Row label="History">
                  <OrderbookSettings.HistorySwitch />
                </OrderbookSettings.Row>
                <OrderbookSettings.Row label="Max History">
                  <OrderbookSettings.MaxHistoryInput />
                </OrderbookSettings.Row>
                <OrderbookSettings.Row label="Debug">
                  <OrderbookSettings.DebugSwitch />
                </OrderbookSettings.Row>
              </div>
            </OrderbookSettings.Popover.Content>
          </OrderbookSettings.Popover.Root>
        </div>
      </div>
    </Orderbook.Root>
  )
}

Notes

All settings components must be used within an Orderbook.Root context to function properly.

Use OrderbookSettings.Row to maintain consistent spacing and alignment between labels and controls.

Enabling debug mode may impact performance. Use only during development.

Introduction

Configuration

Components

OrderbookSettings

Basic Usage

Anatomy

Examples

Complete Settings Panel

In a Popover

Display Settings Only

Performance Settings

In a Sidebar

Components

DepthSelect

SpreadSelect

ThrottleInput

DebounceInput

HistorySwitch

MaxHistoryInput

DebugSwitch

Row

Separator

Popover

Popover.Root

Popover.Trigger

Popover.Content

Integration Example

Notes

​Basic Usage

​Anatomy

​Examples

​Complete Settings Panel

​In a Popover

​Display Settings Only

​Performance Settings

​In a Sidebar

​Components

​DepthSelect

​SpreadSelect

​ThrottleInput

​DebounceInput

​HistorySwitch

​MaxHistoryInput

​DebugSwitch

​Row

​Separator

​Popover

​Popover.Root

​Popover.Trigger

​Popover.Content

​Integration Example

​Notes

Basic Usage

Anatomy

Examples

Complete Settings Panel

In a Popover

Display Settings Only

Performance Settings

In a Sidebar

Components

DepthSelect

SpreadSelect

ThrottleInput

DebounceInput

HistorySwitch

MaxHistoryInput

DebugSwitch

Row

Separator

Popover

Popover.Root

Popover.Trigger

Popover.Content

Integration Example

Notes