Advanced Chart

import { AdvancedChart } from '@hanzo/ui'

export function Default() {
  return <AdvancedChart symbol="NASDAQ:AAPL" />
}

export function LightAndBare() {
  return (
    <AdvancedChart
      symbol="BINANCE:BTCUSDT"
      theme="light"
      height={400}
      hideTopToolbar
      rounded="$3"
    />
  )
}

export function SeveralSymbols() {
  return (
    <YStack gap="$4">
      <AdvancedChart symbol="NASDAQ:AAPL" height={320} hideSideToolbar />
      <AdvancedChart symbol="NASDAQ:GOOGL" height={320} hideSideToolbar />
    </YStack>
  )
}

export function Controlled() {
  const symbols = ["NASDAQ:AAPL", "NASDAQ:MSFT", "BINANCE:ETHUSDT"]
  const intervals = ["15", "60", "D", "W"] as const
  const [symbol, setSymbol] = useState(symbols[0])
  const [span, setSpan] = useState<(typeof intervals)[number]>("D")
  return (
    <YStack gap="$3">
      <XStack gap="$2" flexWrap="wrap">
        {symbols.map((s) => (
          <Button
            key={s}
            size="sm"
            variant={s === symbol ? "primary" : "outline"}
            onPress={() => setSymbol(s)}
          >
            {s}
          </Button>
        ))}
      </XStack>
      <XStack gap="$2">
        {intervals.map((i) => (
          <Button
            key={i}
            size="sm"
            variant={i === span ? "primary" : "outline"}
            onPress={() => setSpan(i)}
          >
            {i}
          </Button>
        ))}
      </XStack>
      <AdvancedChart symbol={symbol} interval={span} height={420} />
    </YStack>
  )
}

Types

export type AdvancedChartInterval =
  | '1'
  | '3'
  | '5'
  | '15'
  | '30'
  | '60'
  | '120'
  | '180'
  | '240'
  | 'D'
  | 'W'
  | 'M'

export type AdvancedChartTheme = 'light' | 'dark'

export interface AdvancedChartProps extends Omit<YStackProps, 'width' | 'height' | 'theme'> {
  /** The symbol to chart, exchange-qualified. */
  symbol?: string
  /** Minutes, or a day, a week, a month per bar. */
  interval?: AdvancedChartInterval
  /** The chart's own palette; independent of the surrounding gui theme. */
  theme?: AdvancedChartTheme
  width?: string | number
  height?: string | number
  /** Fill the frame; the chart then ignores its own `width` and `height`. */
  autosize?: boolean
  hideTopToolbar?: boolean
  hideSideToolbar?: boolean
  saveImage?: boolean
}

Exports