traderspost/traderspost-command-dash/chart-setup

npm install lightweight-charts

import { useEffect, useRef, useState } from 'react'
import {
  createChart,
  CandlestickSeries,
  HistogramSeries,
  type IChartApi,
  type ISeriesApi
} from 'lightweight-charts'
interface Bar {
  time: number          // unix seconds (UTCTimestamp)
  open: number
  high: number
  low: number
  close: number
  volume: number
}
interface Props {
  symbol: string
  fetchBars: (symbol: string) => Promise<Bar[]>
}
export function ChartPanel({ symbol, fetchBars }: Props) {
  const containerRef = useRef<HTMLDivElement | null>(null)
  const chartRef = useRef<IChartApi | null>(null)
  const candleRef = useRef<ISeriesApi<'Candlestick'> | null>(null)
  const volRef = useRef<ISeriesApi<'Histogram'> | null>(null)
  useEffect(() => {
    if (!containerRef.current) return
    const chart = createChart(containerRef.current, {
      layout: { background: { color: '#1d2939' }, textColor: '#98a2b3' },
      grid: { vertLines: { color: '#293548' }, horzLines: { color: '#293548' } },
      rightPriceScale: { borderColor: '#344054' },
      timeScale: { borderColor: '#344054', timeVisible: true, secondsVisible: false },
      crosshair: { mode: 1 },
      autoSize: true
    })
    candleRef.current = chart.addSeries(CandlestickSeries, {
      upColor: '#12b76a', downColor: '#f04438',
      wickUpColor: '#12b76a', wickDownColor: '#f04438',
      borderVisible: false
    })
    volRef.current = chart.addSeries(HistogramSeries, {
      priceFormat: { type: 'volume' },
      priceScaleId: 'volume_scale',
      color: '#344054'
    })
    chart.priceScale('volume_scale').applyOptions({ scaleMargins: { top: 0.82, bottom: 0 } })
    chartRef.current = chart
    return () => chart.remove()
  }, [])
  useEffect(() => {
    let cancelled = false
    fetchBars(symbol).then((bars) => {
      if (cancelled || !candleRef.current || !volRef.current) return
      candleRef.current.setData(bars.map((b) => ({
        time: b.time as never, open: b.open, high: b.high, low: b.low, close: b.close
      })))
      volRef.current.setData(bars.map((b) => ({
        time: b.time as never,
        value: b.volume,
        color: b.close >= b.open ? 'rgba(18, 183, 106, 0.35)' : 'rgba(240, 68, 56, 0.35)'
      })))
      chartRef.current?.timeScale().fitContent()
    })
    return () => { cancelled = true }
  }, [symbol, fetchBars])
  return <div ref={containerRef} className="w-full h-full" />
}