Types

type Candle = {
  time: number;   // millisecond timestamp
  open: number;   // opening price
  high: number;   // highest price
  low: number;    // lowest price
  close: number;  // closing price
};

type KlineChartProps = {
  // Required
  data: Candle[];
  width: number;
  height: number;

  // Candle appearance
  candleWidth?: number;          // default: 8
  candleSpacing?: number;        // default: 3
  minCandleWidth?: number;       // default: 2
  maxCandleWidth?: number;       // default: 24
  bullishColor?: string;         // default: '#2DC08E'
  bearishColor?: string;         // default: '#F6465D'

  // Moving Average
  showMA?: boolean;              // default: true
  maPeriods?: number[];          // default: [5, 10]
  maColors?: string[];           // default: ['#F7931A', '#5B8DEF', '#C084FC']

  // Crosshair
  showCrosshair?: boolean;       // default: true
  crosshairColor?: string;       // default: 'rgba(255,255,255,0.3)'
  onCrosshairChange?: (candle: Candle | null) => void;

  // Layout & Colors
  backgroundColor?: string;      // default: '#0B0E11'
  gridColor?: string;            // default: 'rgba(255,255,255,0.2)'
  textColor?: string;            // default: 'rgba(255,255,255,0.35)'
  rightPaddingCandles?: number;  // default: 20
};

function computeMA(
  data: Candle[],
  period: number
): (number | null)[];

// Returns an array of MA values.
// null for indices where period hasn't been reached yet.