Constants & Helpers

import {
  VERSION, darkTheme, DEFAULT_CANDLE_STYLE,
  clamp, niceTicks, generateBars,
} from 'openalgo-charts';

export const VERSION = '2.2.0';
export function version(): string;

interface ChartTheme {
  background: string;
  grid: string;
  axisText: string;
  axisLine: string;
  crosshair: string;
  // candle / bar / column
  upColor: string;
  downColor: string;
  wickUpColor: string;
  wickDownColor: string;
  // line / area
  lineColor: string;
  areaTopColor: string;
  areaBottomColor: string;
  // baseline
  baselineTopLine: string;
  baselineTopFill: string;
  baselineBottomLine: string;
  baselineBottomFill: string;
  // last-price tag
  lastPriceUp: string;
  lastPriceDown: string;
  lastPriceText: string;
  // trade layer
  buy: string;
  sell: string;
  profit: string;
  loss: string;
}

export const darkTheme: ChartTheme = {
  background:          '#0d0e12',
  grid:                '#161a26',
  axisText:            '#8b91a7',
  axisLine:            '#2a3046',
  crosshair:           '#6b7280',
  upColor:             '#26a69a',
  downColor:           '#ef5350',
  wickUpColor:         '#26a69a',
  wickDownColor:       '#ef5350',
  lineColor:           '#4f8cff',
  areaTopColor:        'rgba(79,140,255,0.40)',
  areaBottomColor:     'rgba(79,140,255,0.00)',
  baselineTopLine:     '#26a69a',
  baselineTopFill:     'rgba(38,166,154,0.20)',
  baselineBottomLine:  '#ef5350',
  baselineBottomFill:  'rgba(239,83,80,0.20)',
  lastPriceUp:         '#26a69a',
  lastPriceDown:       '#ef5350',
  lastPriceText:       '#0d0e12',
  buy:                 '#26a69a',
  sell:                '#ef5350',
  profit:              '#26a69a',
  loss:                '#ef5350',
};
 
export const DEFAULT_THEME = darkTheme;

export const lightTheme: ChartTheme = {
  background:          '#ffffff',
  grid:                '#eef1f6',
  axisText:            '#5b6472',
  axisLine:            '#d4dae3',
  crosshair:           '#9aa3b2',
  upColor:             '#089981',
  downColor:           '#e0473e',
  wickUpColor:         '#089981',
  wickDownColor:       '#e0473e',
  lineColor:           '#2962ff',
  areaTopColor:        'rgba(41,98,255,0.30)',
  areaBottomColor:     'rgba(41,98,255,0.00)',
  baselineTopLine:     '#089981',
  baselineTopFill:     'rgba(8,153,129,0.18)',
  baselineBottomLine:  '#e0473e',
  baselineBottomFill:  'rgba(224,71,62,0.18)',
  lastPriceUp:         '#089981',
  lastPriceDown:       '#e0473e',
  lastPriceText:       '#ffffff',
  buy:                 '#089981',
  sell:                '#e0473e',
  profit:              '#089981',
  loss:                '#e0473e',
};

export const DEFAULT_PRICE_SCALE_OPTIONS: PriceScaleOptions = {
  marginTop:    0.1,   // 10 % of pane height kept empty above the highest bar
  marginBottom: 0.1,   // 10 % kept empty below the lowest bar
  minMove:      0,     // 0 = infer precision from the visible range
  mode:         'linear',
  inverted:     false,
};

export const DEFAULT_TIME_SCALE_OPTIONS: TimeScaleOptions = {
  barSpacing:    8,   // CSS px per bar at the default zoom level
  minBarSpacing: 1,   // zoom-out floor
  maxBarSpacing: 80,  // zoom-in ceiling
  rightOffset:   4,   // empty bar slots to the right of the latest bar
};

export const DEFAULT_CANDLE_STYLE: CandleStyle = {
  upColor:        '#26a69a',
  downColor:      '#ef5350',
  borderUpColor:  '#26a69a',
  borderDownColor:'#ef5350',
  wickUpColor:    '#26a69a',
  wickDownColor:  '#ef5350',
  borderVisible:  true,
  wickVisible:    true,
};

export const DEFAULT_HISTOGRAM_STYLE: HistogramStyle = {
  color: '#3a4666',
  base:  0,          // baseline value; bars extend from base to bar.close
};

export const DEFAULT_CANDLE_BUILDER_OPTIONS: CandleBuilderOptions = {
  intervalSec:      60,              // one-minute bars
  volumeMode:       'ltq-sum',       // accumulate last-traded-qty per tick
  lateTickPolicy:   'foldIntoBar',   // merge late ticks into the current bar
  sessionAnchorSec: 0,               // align buckets to epoch (override with session open)
};

export const DEFAULT_TRADING_COLORS: TradingColors = {
  long:  '#2f6df6',
  short: '#ef5350',
  order: '#3b82f6',
  tp:    '#26a69a',
  sl:    '#ef5350',
  buy:   '#26a69a',
  sell:  '#ef5350',
};

export const ALT_PRESET: Record<string, string[]> = {
  panLeftFast:  ['Alt+ArrowLeft'],
  panRightFast: ['Alt+ArrowRight'],
  screenshot:   ['Mod+Shift+KeyS'],
};

export const IST_OFFSET_SECONDS = 19800; // 5 * 3600 + 30 * 60  (UTC+5:30)

export const DEFAULT_TIMEZONE = 'Asia/Kolkata';

import { PROFILE_TIER   } from 'openalgo-charts/profile';
import { TRANSFORM_TIER } from 'openalgo-charts/transform';
import { TRADE_TIER     } from 'openalgo-charts/trade';

function clamp(value: number, min: number, max: number): number

function lerp(a: number, b: number, t: number): number

function roundToTick(value: number, step: number): number

function compactVolume(value: number): string

function niceTicks(min: number, max: number, maxTicks?: number): number[]

function precisionForStep(step: number): number

function optimalBarWidth(barSpacing: number, dpr: number): number

function markerSizePx(size: MarkerSize): number

function effectiveMarkerPx(size: MarkerSize, barSpacing: number): number

function drawShape(
  ctx: CanvasRenderingContext2D,
  shape: MarkerShape,
  cx: number,
  cy: number,
  px: number,
  color: string,
): void

function autoscaleRange(
  low: number,
  high: number,
  marginTop: number,
  marginBottom: number,
): PriceRange

function conflationGroupSize(
  barSpacing: number,
  dpr: number,
  minPx?: number,  // default 0.5
  factor?: number, // default 1
): number

function mergeBars(group: readonly Bar[]): Bar

function conflateBars(bars: readonly Bar[], groupSize: number): Bar[]

function conflateItems<T extends { x: number; bar: Bar }>(
  items: readonly T[],
  groupSize: number,
): { x: number; bar: Bar }[]

function registerChartType(type: SeriesType | string, entry: RendererEntry): void

function getChartType(type: SeriesType | string): RendererEntry

function registeredChartTypes(): string[]

function verticalGradient(
  ctx: CanvasRenderingContext2D,
  heightPx: number,
  topColor: string,
  bottomColor: string,
): CanvasGradient

function bitmapSize(mediaWidth: number, mediaHeight: number, dpr: number): Size

function snapToDevicePixel(mediaCoord: number, dpr: number): number

// EMA
function ema(values: readonly number[], period: number): number[]
function emaSeries(bars: readonly Bar[], period: number): Bar[]
 
// RSI -- Wilder smoothing; NaN during warmup (first `period` slots)
function rsi(values: readonly number[], period?: number /* default 14 */): number[]
function rsiSeries(bars: readonly Bar[], period?: number /* default 14 */): Bar[]
 
// ATR -- Wilder ATR; first ATR value lands at index period-1, earlier slots NaN
function trueRange(high: readonly number[], low: readonly number[], close: readonly number[]): number[]
function atr(high: readonly number[], low: readonly number[], close: readonly number[], period?: number /* default 14 */): number[]
 
// Supertrend -- direction: -1 = uptrend (support below price), +1 = downtrend
function supertrend(bars: readonly Bar[], period?: number /* default 10 */, multiplier?: number /* default 3 */): SupertrendPoint[]
function supertrendSeries(bars: readonly Bar[], period?: number, multiplier?: number): { up: Bar[]; down: Bar[] }

function generateBars(startTime: number, count: number, intervalSec: number): Bar[]

function intervalToSeconds(interval: string): number

function rowTimeToUtcSeconds(value: number | string): number

function mapHistoryResponse(json: { data?: HistoryRow[] }): Bar[]

// Fixed offset in seconds for IST (UTC+5:30, no DST)
const IST_OFFSET_SECONDS = 19800
 
// Epoch milliseconds -> UTC seconds
function epochMsToUtcSeconds(ms: number): number
 
// IST wall-clock string ('YYYY-MM-DD', 'YYYY-MM-DD HH:MM', 'YYYY-MM-DD HH:MM:SS') -> UTC seconds
function istStringToUtcSeconds(input: string): number
 
// UTC seconds -> IST calendar parts { year, month, day, hour, minute, second, weekday }
function utcSecondsToIstParts(utcSeconds: number): IstParts
 
// UTC seconds -> IST date string for OpenAlgo REST requests ('YYYY-MM-DD')
function utcSecondsToIstDateString(utcSeconds: number): string
 
// UTC seconds -> IST 'HH:MM' label
function formatIstTime(utcSeconds: number): string
 
// UTC seconds -> IST 'HH:MM:SS' label (sub-minute / tick timeframes)
function formatIstTimeSeconds(utcSeconds: number): string
 
// UTC seconds -> IST 'DD Mon' label (e.g. '21 May')
function formatIstDate(utcSeconds: number): string
 
// True when two UTC-second instants fall on different IST calendar days
function isNewIstDay(prevUtcSeconds: number, utcSeconds: number): boolean
 
// Bar indices that open a trading session, read back from the timestamps.
// null when the series shows no readable break.
function sessionStartIndices(times: readonly number[]): number[] | null
 
// One flag per bar, true on the first bar of each session.
// Falls back to calendar days in `zone` (default DEFAULT_TIMEZONE) when sessions
// are unreadable.
function sessionStartFlags(times: readonly number[], zone?: string): boolean[]
 
// One flag per bar, true where `isNew` says a new week/month/year began.
// Tested on session opens, so a session is never cut in half.
function calendarPeriodFlags(
  times: readonly number[],
  isNew: (prevUtcSeconds: number, utcSeconds: number) => boolean,
): boolean[]

const DEFAULT_TIMEZONE = 'Asia/Kolkata'
 
// True when the host runtime recognises the name. Guard user input with this
// rather than catching the throw from createChart / setTimezone.
function isValidTimezone(zone: string): boolean
 
// Seconds east of UTC for that instant, so DST is resolved per instant
// (New York is -18000 in January and -14400 in June).
function zoneOffsetSeconds(utcSeconds: number, zone?: string): number
 
// UTC seconds -> calendar parts { year, month, day, hour, minute, second, weekday }
function utcSecondsToZonedParts(utcSeconds: number, zone?: string): ZonedParts
 
// Labels: 'HH:MM', 'HH:MM:SS', 'DD Mon', "Ddd DD Mon 'YY HH:MM"
function formatZonedTime(utcSeconds: number, zone?: string): string
function formatZonedTimeSeconds(utcSeconds: number, zone?: string): string
function formatZonedDate(utcSeconds: number, zone?: string): string
function formatZonedCrosshairLabel(utcSeconds: number, zone?: string): string
 
// UTC seconds -> 'YYYY-MM-DD' on that zone's calendar
function utcSecondsToZonedDateString(utcSeconds: number, zone?: string): string
 
// Wall clock -> UTC seconds. The string form takes
// 'YYYY-MM-DD[ HH:MM[:SS]]'; the parts form takes explicit fields.
function zonedStringToUtcSeconds(input: string, zone?: string): number
function zonedWallClockToUtcSeconds(
  year: number, month: number, day: number,
  hour: number, minute: number, second: number, zone?: string,
): number
 
// Period starts, as UTC seconds
function startOfZonedDay(utcSeconds: number, zone?: string): number
function startOfZonedWeek(utcSeconds: number, zone?: string): number   // Monday-based
function startOfZonedMonth(utcSeconds: number, zone?: string): number
 
// Integer indices, for cheap "same period?" comparisons
function zonedDayIndex(utcSeconds: number, zone?: string): number
function zonedWeekIndex(utcSeconds: number, zone?: string): number
 
// Boundary tests between two instants, on that zone's calendar
function isNewZonedDay(prev: number, next: number, zone?: string): boolean
function isNewZonedWeek(prev: number, next: number, zone?: string): boolean
function isNewZonedMonth(prev: number, next: number, zone?: string): boolean
function isNewZonedQuarter(prev: number, next: number, zone?: string): boolean
function isNewZonedYear(prev: number, next: number, zone?: string): boolean
function isNewZonedPeriod(
  prev: number, next: number,
  period: 'day' | 'week' | 'month' | 'quarter' | 'year', zone?: string,
): boolean

import { createChart, generateBars, clamp, roundToTick } from 'openalgo-charts';
 
const chart = createChart(document.getElementById('chart')!);
const series = chart.addSeries('candlestick');
 
// 300 bars of synthetic OHLC starting at a known epoch, 5-minute interval
const bars = generateBars(1_700_000_000, 300, 300);
series.setData(bars);
 
// Snap a user-dragged price to the nearest 0.05 tick, bounded by the visible range
function sanitizeOrderPrice(raw: number, lo: number, hi: number): number {
  return clamp(roundToTick(raw, 0.05), lo, hi);
}

import { emaSeries } from 'openalgo-charts';
 
const emaSeries20 = chart.addSeries('line', { style: { color: '#f59e0b' } });
emaSeries20.setData(emaSeries(bars, 20));