OrderDepth

Basic Usage

import { OrderDepth } from './OrderDepth';

<OrderDepth
  bids={bidsData}
  asks={asksData}
  depth={10}
  displayMode="split"
  theme="dark"
/>

<OrderDepth
  bids={bidsData}
  asks={asksData}
  depth={5}
  displayMode="left"
  theme={{
    backgroundColor: '#1a1a1a',
    bidColor: '#10b981',
    askColor: '#ef4444'
  }}
  locale="en"
  showHeader={true}
/>

Props

| Property | Type | Default | Description | | ----------------- | -------------------------------------- | --------- | --------------------------------- | | bids | OrderDepthItem[] | [] | Bid data array | | asks | OrderDepthItem[] | [] | Ask data array | | depth | number | 5 | Number of depth levels to display | | displayMode | 'left' \| 'right' \| 'split' | 'left' | Layout display mode | | theme | 'light' \| 'dark' \| OrderDepthTheme | 'light' | Theme configuration | | locale | 'zh-CN' \| 'en' \| OrderDepthLocale | 'zh-CN' | Language localization | | showHeader | boolean | true | Whether to show table header | | style | React.CSSProperties | - | Custom container styles | | className | string | - | CSS class name for styling | | bidColor | string | - | Custom color for bid levels | | askColor | string | - | Custom color for ask levels | | textColor | string | - | Custom text color | | backgroundColor | string | - | Custom background color |

Preview

OrderFlow

Basic Usage

import OrderFlow, { OrderFlowItem } from './OrderFlow';

const orderData: OrderFlowItem[] = [
  {
    id: "1",
    price: 100.5,
    amount: 10,
    side: "buy",
    timestamp: Date.now(),
  },
  {
    id: "2",
    price: 101.2,
    amount: 5,
    side: "sell",
    timestamp: Date.now() - 1000,
  },
];

function App() {
  return (
    <OrderFlow
      data={orderData}
      theme="light"
      buyColor="#00a36c"
      sellColor="#ff4d4f"
    />
  );
}

Props

OrderFlowProps

| Prop | Type | Default | Description | | ----------------- | --------------------- | -------------- | ---------------------------------- | | data | OrderFlowItem[] | [] | Order data | | maxItems | number | - | Maximum number of items to display | | buyColor | string | '#00a36c' | Buy text color | | sellColor | string | '#ff4d4f' | Sell text color | | textColor | string | - | Text color | | backgroundColor | string | - | Background color | | showHeader | boolean | true | Whether to show header | | listHead | ListHeadItem[] | Default header | Custom header configuration | | style | React.CSSProperties | - | Container styles | | className | string | - | CSS class name | | theme | 'light' \| 'dark' | 'light' | Theme style | | buyText | string | 'Buy' | Buy button text | | sellText | string | 'Sell' | Sell button text | | noDataText | string | 'No data' | Text to display when no data |

OrderFlowItem

| Prop | Type | Description | | ----------- | ----------------- | -------------------- | | id | string | Order ID | | price | number | Price | | amount | number | Amount | | side | 'buy' \| 'sell' | Buy/Sell direction | | timestamp | number | Timestamp (optional) |

ListHeadItem

| Prop | Type | Description | | ------- | --------------------- | ---------------------------------- | | key | string | Column key | | text | string | Column display text | | width | number | Column width percentage (optional) | | style | React.CSSProperties | Column styles (optional) |

Preview