Financials

import { Financials } from '@hanzo/ui'

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

export function CompactAndLight() {
  return (
    <Financials
      symbol="BINANCE:BTCUSDT"
      displayMode="compact"
      colorTheme="light"
      height={500}
      rounded="$3"
    />
  )
}

export function SeveralSymbols() {
  return (
    <YStack gap="$4">
      <Financials symbol="NASDAQ:AAPL" displayMode="compact" height={400} />
      <Financials symbol="NASDAQ:GOOGL" displayMode="compact" height={400} />
    </YStack>
  )
}

export function Controlled() {
  const symbols = ["NASDAQ:AAPL", "NASDAQ:MSFT", "BINANCE:ETHUSDT"]
  const [symbol, setSymbol] = useState(symbols[0])
  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>
      <Financials symbol={symbol} displayMode="compact" height={500} />
    </YStack>
  )
}

Types

export type FinancialsDisplayMode = 'adaptive' | 'regular' | 'compact'

export type FinancialsTheme = 'light' | 'dark'

export interface FinancialsProps extends Omit<YStackProps, 'width' | 'height' | 'theme'> {
  /** The symbol to report on, exchange-qualified. */
  symbol?: string
  width?: string | number
  height?: string | number
  locale?: string
  /** The widget's own palette; independent of the surrounding gui theme. */
  colorTheme?: FinancialsTheme
  isTransparent?: boolean
  displayMode?: FinancialsDisplayMode
  largeChartUrl?: string
}

Exports