Technical Analysis

import { TechnicalAnalysis } from '@hanzo/ui'

Default

TradingView's summary gauge and indicator tables for one symbol, daily bars, dark, 450px tall and as wide as its parent.

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

Light and compact

`colorTheme="light"` takes the widget's light palette, `displayMode="single"` collapses it to the one summary gauge.

export function LightAndCompact() {
  return (
    <TechnicalAnalysis
      symbol="BINANCE:BTCUSDT"
      colorTheme="light"
      displayMode="single"
      height={220}
      rounded="$3"
    />
  )
}

Several symbols

Each widget is its own frame, so a column of them stacks like any other boxes.

export function SeveralSymbols() {
  return (
    <YStack gap="$4">
      <TechnicalAnalysis symbol="NASDAQ:AAPL" height={300} showIntervalTabs={false} />
      <TechnicalAnalysis symbol="NASDAQ:GOOGL" height={300} showIntervalTabs={false} />
    </YStack>
  )
}

Controlled

`symbol` and `interval` come from state; a change opens the widget afresh at the new address.

export function Controlled() {
  const symbols = ["NASDAQ:AAPL", "NASDAQ:MSFT", "BINANCE:ETHUSDT"]
  const intervals = ["15m", "1h", "1D", "1W"] as const
  const [symbol, setSymbol] = useState(symbols[0])
  const [span, setSpan] = useState<(typeof intervals)[number]>("1D")
  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>
      <TechnicalAnalysis symbol={symbol} interval={span} displayMode="multiple" height={520} />
    </YStack>
  )
}

Types

export type TechnicalAnalysisInterval =
  | '1m'
  | '5m'
  | '15m'
  | '30m'
  | '1h'
  | '2h'
  | '4h'
  | '1D'
  | '1W'
  | '1M'

export type TechnicalAnalysisTheme = 'light' | 'dark'

export type TechnicalAnalysisDisplayMode = 'single' | 'multiple'

export interface TechnicalAnalysisProps extends Omit<YStackProps, 'width' | 'height' | 'theme'> {
  /** The symbol to analyze, exchange-qualified. */
  symbol?: string
  /** Minutes, hours, or a day/week/month per analysis window. */
  interval?: TechnicalAnalysisInterval
  width?: string | number
  height?: string | number
  locale?: string
  /** The widget's own palette; independent of the surrounding gui theme. */
  colorTheme?: TechnicalAnalysisTheme
  isTransparent?: boolean
  showIntervalTabs?: boolean
  /** One summary gauge, or the full oscillators/moving-averages breakdown. */
  displayMode?: TechnicalAnalysisDisplayMode
}

Exports

TechnicalAnalysistype TechnicalAnalysisDisplayModetype TechnicalAnalysisIntervaltype TechnicalAnalysisPropstype TechnicalAnalysisTheme