多语言金融设计系统
Go/Rust/TS 三语言，专为交易终端打造

import { KLineChart } from '@libra-design/react'
import '@libra-design/tokens/css'

<KLineChart
  data={ohlcvData}
  width={800}
  height={400}
/>

import { TimeShareChart } from '@libra-design/react'

<TimeShareChart
  data={ticks}
  width={600}
  height={300}
/>

import { StockTable, Modal, Tabs,
  TimeShareChart, KLineChart }
  from '@libra-design/react'

function App() {
  const [stock, setStock] = useState(null)
  return (
    <>
      <StockTable data={data}
        onRowClick={(r) => setStock(r)}
        columnPicker navigable
        selectable />
      <Modal open={!!stock}
        onClose={() => setStock(null)}>
        <TimeShareChart data={ts} />
      </Modal>
    </>
  )
}

import { Badge, PriceDisplay, StockCard }
  from '@libra-design/react'

<Badge variant="up">+2.13%</Badge>
<PriceDisplay value={1689.50}
  change={35.20}
  changePercent={2.13} />
<StockCard name="贵州茅台"
  code="sh600519" price={1689.50}
  change={35.20}
  changePercent={2.13} />