API Reference

1interface BarData {2  time: number;       // Unix timestamp (seconds)3  open: number;       // Opening price4  high: number;       // Highest price during the bar5  low: number;        // Lowest price during the bar6  close: number;      // Closing price7  volume: number;     // Volume traded during the bar8}910// Time is always in seconds since epoch (not milliseconds!)11// Example: 1700000000 = Nov 14, 2023

1type PriceSource = 'close' | 'open' | 'high' | 'low' | 'hl2' | 'hlc3' | 'ohlc4' | 'volume';23function getPrice(bar: BarData, source: PriceSource): number {4  switch (source) {5    case 'close':  return bar.close;6    case 'open':   return bar.open;7    case 'high':   return bar.high;8    case 'low':    return bar.low;9    case 'hl2':    return (bar.high + bar.low) / 2;10    case 'hlc3':   return (bar.high + bar.low + bar.close) / 3;11    case 'ohlc4':  return (bar.open + bar.high + bar.low + bar.close) / 4;12    case 'volume': return bar.volume;13  }14}

1interface IIndicatorConfig {2  // Identity3  id: string;              // Unique slug: 'my-rsi'4  name: string;            // Display name: 'My RSI'5  version: string;         // Semantic version: '1.0.0'6  7  // Visual8  outputType: OutputType;  // 'LINE' | 'MULTI_LINE' | 'HISTOGRAM' | 'POINTS' | 'AREA' | 'CLOUD'9  color: string;           // Primary color (CSS)10  lineWidth?: number;      // Line thickness (default: 1)11  12  // Behavior13  overlay: boolean;        // true = draw on price chart, false = separate pane14  15  // Configuration16  params: IndicatorParam[];  // User-adjustable parameters17}

1interface IndicatorParam {2  name: string;            // Parameter key: 'period', 'smoothing'3  label: string;           // Display label: 'RSI Period'4  type: 'number' | 'string' | 'boolean' | 'color' | 'select';5  default: any;            // Default value6  min?: number;            // For number type: minimum7  max?: number;            // For number type: maximum8  step?: number;           // For number type: step increment9  options?: string[];      // For select type: choices10}

1// Single value output (for LINE, HISTOGRAM, POINTS, AREA)2interface IndicatorValue {3  time: number;            // Must match the bar's time4  value: number;           // The computed indicator value5  color?: string;          // Optional per-bar color override6}78// Multi-line output (for MULTI_LINE)9interface MultiLineOutput {10  time: number;11  values: Record<string, number>;  // { upper: 155, middle: 150, lower: 145 }12}1314// Cloud output (for CLOUD)15interface CloudOutput {16  time: number;17  upper: number;18  lower: number;19  fillColor?: string;     // Optional per-bar fill color20}

1interface IOverlayConfig {2  id: string;              // Unique slug3  name: string;            // Display name4  version: string;5  overlay_type: OverlayType;  // 'POINT' | 'LINE' | 'SHAPE' | 'MULTIPOINT' | 'TEXT' | 'COMPLEX'6  anchor: AnchorMode;     // 'data' | 'pixel' | 'percentage'7  draggable: boolean;      // Can the user drag the overlay8  resizable: boolean;      // Can the user resize the overlay9  zIndex: number;          // Draw order (higher = on top)10  opacity: number;         // Base opacity 0-111}

1interface OverlayState {2  points: DataPoint[];     // Anchor points [{time, price}] or [{x, y}]3  style: OverlayStyle;     // Visual style4  interaction: InteractionState;  // 'normal' | 'hovered' | 'selected' | 'dragging' | 'resizing'5  userData: Record<string, any>;  // Custom data storage6}78interface DataPoint {9  time?: number;           // For 'data' anchored overlays10  price?: number;          // For 'data' anchored overlays11  x?: number;              // For 'pixel' or 'percentage' anchored12  y?: number;              // For 'pixel' or 'percentage' anchored13}

1# Strategy metadata dictionary2metadata = {3    'name': 'My Strategy',4    'version': '1.0.0',5    'author': 'Your Name',6    'description': 'A description of the strategy',7}89# Risk management configuration10config = {11    'initial_capital': 100000.0,       # Starting capital12    'position_size_pct': 2.0,          # % of capital per trade13    'max_positions': 5,                # Maximum concurrent positions14    'stop_loss_pct': 2.0,              # Stop loss percentage15    'take_profit_pct': 4.0,            # Take profit percentage16    'commission_pct': 0.1,             # Commission percentage17    'slippage_pct': 0.05,              # Slippage percentage18    'use_trailing_stop': False,        # Enable trailing stop19    'trailing_stop_pct': 1.5,          # Trailing stop distance20}

1from enum import Enum23class Signal(Enum):4    BUY = 'BUY'5    SELL = 'SELL'6    CLOSE = 'CLOSE'7    HOLD = 'HOLD'89# Signal object returned from generate_signal()10signal_output = {11    'signal': Signal.BUY,12    'price': 150.00,13    'time': 1700000000,14    'reason': 'RSI crossed below 30 — oversold',15    'stop_loss': 147.00,16    'take_profit': 156.00,17    'size': None,  # None = use config.position_size_pct18}

1// Key Canvas 2D APIs used in rendering:23ctx.save()                    // Save current state4ctx.restore()                 // Restore saved state56// Lines & Paths7ctx.beginPath()               // Start a new path8ctx.moveTo(x, y)              // Move cursor9ctx.lineTo(x, y)              // Draw line to point10ctx.arc(x, y, r, 0, Math.PI*2) // Draw circle/arc11ctx.rect(x, y, w, h)         // Draw rectangle path12ctx.closePath()               // Close current path1314// Stroke & Fill15ctx.stroke()                  // Draw path outline16ctx.fill()                    // Fill path interior17ctx.fillRect(x, y, w, h)     // Filled rectangle18ctx.strokeRect(x, y, w, h)   // Outlined rectangle19ctx.clearRect(x, y, w, h)    // Clear area2021// Style22ctx.strokeStyle = '#color'    // Line color23ctx.fillStyle = '#color'      // Fill color24ctx.lineWidth = 2             // Line thickness25ctx.setLineDash([5, 5])       // Dashed line pattern26ctx.globalAlpha = 0.5         // Opacity (0-1)27ctx.lineCap = 'round'         // Line end style28ctx.lineJoin = 'round'        // Line join style2930// Text31ctx.font = '12px Inter'       // Font32ctx.textAlign = 'left'        // 'left' | 'center' | 'right'33ctx.textBaseline = 'top'      // 'top' | 'middle' | 'bottom'34ctx.fillText('text', x, y)    // Draw text35ctx.measureText('text').width  // Measure text width

1// toPixel converts data point to canvas coordinates2type ToPixelFn = (point: { time: number; price: number }) => { x: number; y: number };34// Usage in render functions:5function render(ctx, state, toPixel) {6  const pixel = toPixel({ time: 1700000000, price: 150.50 });7  ctx.fillRect(pixel.x - 2, pixel.y - 2, 4, 4);  // Draw a 4x4 dot8}910// Reverse: toData converts pixel coordinates back to data11type ToDataFn = (pixel: { x: number; y: number }) => { time: number; price: number };1213// Usage in hit testing:14function hitTest(mouseX, mouseY, state, toPixel) {15  const p = toPixel(state.points[0]);16  const distance = Math.sqrt((mouseX - p.x) ** 2 + (mouseY - p.y) ** 2);17  return distance < 10;  // 10px tolerance18}