@forgecharts/sdk 1.1.23 → 1.1.28

package/src/pixi/PixiGridRenderer.ts

@@ -1,136 +0,0 @@
-import { Graphics, Container, Text, TextStyle } from 'pixi.js';
-import type { ChartColors } from '@forgecharts/types';
-import type { CoordTransform } from '../core/CoordTransform';
-import { computeTicks } from '../core/TimeScale';
-import { formatTimestampLabel } from '@forgecharts/utils';
-import type { TimeScale } from '../core/TimeScale';
-
-const TICK_LEN = 4;
-
-/**
- * PixiGridRenderer — draws background fill, horizontal grid lines (price),
- * vertical grid lines (time), and the axis separator borders.
- *
- * All drawing uses PixiJS `Graphics` which is GPU-batched.
- */
-export class PixiGridRenderer {
-  private readonly _gfx: Graphics;
-  private readonly _timeLabels: Container;
-  private readonly _priceLabels: Container;
-  private readonly _timeScale: TimeScale;
-
-  constructor(
-    layer: Container,
-    private readonly _colors: ChartColors,
-    timeScale: TimeScale,
-  ) {
-    this._timeScale = timeScale;
-    this._gfx = new Graphics();
-    this._timeLabels = new Container();
-    this._priceLabels = new Container();
-    layer.addChild(this._gfx, this._timeLabels, this._priceLabels);
-  }
-
-  draw(transform: CoordTransform, width: number, height: number): void {
-    const gfx = this._gfx;
-    gfx.clear();
-
-    const { plotWidth: pw, plotHeight: ph, priceScaleWidth, timeScaleHeight } = transform;
-    const { min: priceMin, max: priceMax } = transform.priceRange;
-    const { from: timeFrom, to: timeTo } = transform.timeRange;
-
-    // ── Background ────────────────────────────────────────────────────────────
-    gfx.rect(0, 0, width, height).fill(this._colors.background);
-
-    // ── Horizontal price grid ─────────────────────────────────────────────────
-    const priceTicks = computeTicks(priceMin, priceMax, Math.max(2, Math.floor(ph / 50)));
-    this._priceLabels.removeChildren();
-
-    const labelStyle = new TextStyle({
-      fontSize: 11,
-      fontFamily: 'system-ui, sans-serif',
-      fill: this._colors.text,
-    });
-
-    for (const tick of priceTicks) {
-      if (tick < priceMin || tick > priceMax) continue;
-      const y = transform.priceToY(tick);
-      if (y < 0 || y > ph) continue;
-
-      gfx.moveTo(0, y).lineTo(pw, y).stroke({ color: this._colors.grid, width: 1, alpha: 0.5 });
-
-      // Tick mark on axis border
-      gfx.moveTo(pw, y).lineTo(pw + TICK_LEN, y).stroke({ color: this._colors.border, width: 1 });
-
-      // Price label
-      const t = new Text({ text: this._formatPrice(tick), style: labelStyle });
-      t.x = pw + TICK_LEN + 2;
-      t.y = y - t.height / 2;
-      this._priceLabels.addChild(t);
-    }
-
-    // ── Vertical time grid ────────────────────────────────────────────────────
-    const approxTicks = Math.max(2, Math.floor(pw / 100));
-    const span = timeTo - timeFrom;
-    const rawStep = span / approxTicks;
-    const step = this._niceTimeStep(rawStep);
-    const startTime = Math.ceil(timeFrom / step) * step;
-
-    this._timeLabels.removeChildren();
-    const timeLabelStyle = new TextStyle({
-      fontSize: 11,
-      fontFamily: 'system-ui, sans-serif',
-      fill: this._colors.text,
-    });
-
-    for (let t = startTime; t <= timeTo; t += step) {
-      const x = transform.timeToX(t);
-      if (x < 0 || x > pw) continue;
-
-      gfx.moveTo(x, 0).lineTo(x, ph).stroke({ color: this._colors.grid, width: 1, alpha: 0.4 });
-      gfx.moveTo(x, ph).lineTo(x, ph + TICK_LEN).stroke({ color: this._colors.border, width: 1 });
-
-      const label = formatTimestampLabel(t, step);
-      const tl = new Text({ text: label, style: timeLabelStyle });
-      tl.x = x - tl.width / 2;
-      tl.y = ph + TICK_LEN + 2;
-      this._timeLabels.addChild(tl);
-    }
-
-    // ── Axis separator lines ──────────────────────────────────────────────────
-    gfx
-      .moveTo(0, ph).lineTo(pw, ph)
-      .stroke({ color: this._colors.border, width: 1 });
-    gfx
-      .moveTo(pw, 0).lineTo(pw, ph)
-      .stroke({ color: this._colors.border, width: 1 });
-
-    // ── Price axis background fill ────────────────────────────────────────────
-    gfx.rect(pw, 0, priceScaleWidth, ph).fill(this._colors.backgroundSecondary);
-
-    // ── Time axis background fill ─────────────────────────────────────────────
-    gfx.rect(0, ph, pw, timeScaleHeight).fill(this._colors.backgroundSecondary);
-  }
-
-  private _formatPrice(price: number): string {
-    const decimals = price < 1 ? 6 : price < 1000 ? 4 : 2;
-    return price.toFixed(decimals);
-  }
-
-  private _niceTimeStep(rawSeconds: number): number {
-    const nice = [
-      1, 5, 10, 30, 60, 300, 600, 900, 1800, 3600, 7200, 14400, 21600, 43200,
-      86400,           // 1 day
-      7   * 86400,     // 1 week
-      14  * 86400,     // 2 weeks
-      30  * 86400,     // ~1 month
-      91  * 86400,     // ~quarter
-      182 * 86400,     // ~half year
-      365 * 86400,     // ~1 year
-    ];
-    for (const s of nice) {
-      if (s >= rawSeconds) return s;
-    }
-    return 365 * 86400 * Math.ceil(rawSeconds / (365 * 86400));
-  }
-}

package/src/pixi/PixiLayerManager.ts

@@ -1,102 +0,0 @@
-import { Container } from 'pixi.js';
-import { LayerName, LAYER_NAMES, LAYER_LABEL } from './LayerName';
-
-/**
- * DirtyFlags — bitmask that tracks which layers need to be redrawn.
- *
- * Call `mark(layer)` whenever data or viewport changes affecting a layer.
- * Call `isDirty(layer)` before redrawing to skip unnecessary work.
- * Call `clear(layer)` after the layer finishes drawing.
- */
-export class DirtyFlags {
-  private _bits = 0;
-
-  mark(layer: LayerName): void {
-    this._bits |= 1 << layer;
-  }
-
-  markAll(): void {
-    this._bits = (1 << LAYER_NAMES.length) - 1;
-  }
-
-  isDirty(layer: LayerName): boolean {
-    return (this._bits & (1 << layer)) !== 0;
-  }
-
-  clear(layer: LayerName): void {
-    this._bits &= ~(1 << layer);
-  }
-
-  clearAll(): void {
-    this._bits = 0;
-  }
-}
-
-/**
- * PixiLayerManager — owns one PixiJS `Container` per layer, stacked by z-index.
- *
- * Responsibilities:
- * - Creates and names seven containers corresponding to `LayerName` values
- * - Attaches all containers to a root `Container` already mounted in the stage
- * - Exposes `get(layer)` so renderers can add display objects to the right layer
- * - Owns a `DirtyFlags` instance for selective redraw signalling
- * - `clear(layer)` removes all children from a layer without destroying the container
- *
- * @example
- * ```ts
- * const layers = new PixiLayerManager(stage);
- *
- * // Direct child access
- * const seriesContainer = layers.get(LayerName.PriceSeries);
- *
- * // Invalidation
- * layers.dirty.mark(LayerName.PriceSeries);
- * if (layers.dirty.isDirty(LayerName.PriceSeries)) {
- *   // redraw…
- *   layers.dirty.clear(LayerName.PriceSeries);
- * }
- * ```
- */
-export class PixiLayerManager {
-  private readonly _containers = new Map<LayerName, Container>();
-  readonly dirty = new DirtyFlags();
-
-  constructor(stage: Container) {
-    for (const name of LAYER_NAMES) {
-      const c = new Container();
-      c.label = LAYER_LABEL[name];
-      c.zIndex = name;
-      stage.addChild(c);
-      this._containers.set(name, c);
-    }
-
-    // PixiJS v8: sortableChildren must be true on the stage so zIndex is respected
-    stage.sortableChildren = true;
-  }
-
-  /** Returns the `Container` for the given layer. */
-  get(layer: LayerName): Container {
-    const c = this._containers.get(layer);
-    if (!c) throw new Error(`[ForgeCharts] Unknown layer: ${layer}`);
-    return c;
-  }
-
-  /** Removes all display objects from a layer (preserves the container itself). */
-  clear(layer: LayerName): void {
-    this.get(layer).removeChildren();
-  }
-
-  /** Removes all display objects from every layer. */
-  clearAll(): void {
-    for (const name of LAYER_NAMES) this.clear(name);
-  }
-
-  /** Destroys all container children (use on chart destroy). */
-  destroy(): void {
-    for (const name of LAYER_NAMES) {
-      const c = this._containers.get(name);
-      c?.destroy({ children: true });
-    }
-    this._containers.clear();
-  }
-}

package/src/renderers/CandlestickRenderer.ts

@@ -1,130 +0,0 @@
-import type { OHLCV, SeriesOptions, Viewport, Rect, ChartColors } from '@forgecharts/types';
-import type { IRenderer } from '../types/IRenderer';
-import { mapRange } from '@forgecharts/utils';
-
-/**
- * CandlestickRenderer — draws OHLCV data as Japanese candlesticks.
- * All rendering is pure Canvas 2D; no third-party dependencies.
- */
-export class CandlestickRenderer implements IRenderer {
-  private readonly _colors: ChartColors;
-
-  constructor(colors: ChartColors) {
-    this._colors = colors;
-  }
-
-  draw(
-    ctx: CanvasRenderingContext2D,
-    bars: readonly OHLCV[],
-    viewport: Viewport,
-    rect: Rect,
-    options: SeriesOptions,
-  ): void {
-    if (options.type !== 'candlestick' && options.type !== 'heikinashi' && options.type !== 'bar') {
-      return;
-    }
-    const plotData = options.type === 'heikinashi' ? this._toHeikinAshi(bars) : bars;
-
-    const upColor = 'upColor' in options ? (options.upColor ?? '#26a641') : '#26a641';
-    const downColor = 'downColor' in options ? (options.downColor ?? '#f85149') : '#f85149';
-    const wickUpColor = 'wickUpColor' in options ? (options.wickUpColor ?? upColor) : upColor;
-    const wickDownColor =
-      'wickDownColor' in options ? (options.wickDownColor ?? downColor) : downColor;
-    const borderVisible = 'borderVisible' in options ? (options.borderVisible ?? false) : false;
-
-    const plotW = rect.width - 70; // price axis reserved
-    const plotH = rect.height - 30; // time axis reserved
-
-    // ── Bar pitch: pixels per candle ─────────────────────────────────────────
-    // IMPORTANT: must be derived from the visible time range + candle interval,
-    // NOT from total bar count.  Using bar count means pitch shrinks as you pan
-    // into history (more bars → narrower candles) and widens as you pan forward
-    // (fewer bars visible → wider candles with gaps), which is wrong.
-
-    // Infer candle interval from the median gap between consecutive bars.
-    let candleInterval = 0;
-    if (plotData.length >= 2) {
-      const deltas: number[] = [];
-      for (let i = 1; i < Math.min(plotData.length, 20); i++) {
-        const d = plotData[i]!.time - plotData[i - 1]!.time;
-        if (d > 0) deltas.push(d);
-      }
-      if (deltas.length > 0) {
-        deltas.sort((a, b) => a - b);
-        candleInterval = deltas[Math.floor(deltas.length / 2)]!;
-      }
-    }
-
-    const visibleSpan = viewport.timeRange.to - viewport.timeRange.from;
-    const pixelsPerSecond = visibleSpan > 0 ? plotW / visibleSpan : 1;
-    const barPitch = candleInterval > 0
-      ? candleInterval * pixelsPerSecond            // correct: interval-based
-      : plotW / Math.max(1, plotData.length);       // fallback for edge cases
-
-    const minBarWidth = 1;
-    const maxBarWidth = 20;
-    const gap = Math.max(1, Math.round(barPitch * 0.15));
-    const barWidth = Math.min(
-      maxBarWidth,
-      Math.max(minBarWidth, Math.floor(barPitch) - gap),
-    );
-    const halfBar = Math.max(0.5, barWidth / 2);
-
-    for (const bar of plotData) {
-      const x = mapRange(
-        bar.time,
-        viewport.timeRange.from,
-        viewport.timeRange.to,
-        0,
-        plotW,
-      );
-
-      if (x < -barWidth || x > plotW + barWidth) continue;
-
-      const yOpen = mapRange(bar.open, viewport.priceRange.max, viewport.priceRange.min, 0, plotH);
-      const yClose = mapRange(bar.close, viewport.priceRange.max, viewport.priceRange.min, 0, plotH);
-      const yHigh = mapRange(bar.high, viewport.priceRange.max, viewport.priceRange.min, 0, plotH);
-      const yLow = mapRange(bar.low, viewport.priceRange.max, viewport.priceRange.min, 0, plotH);
-
-      const bullish = bar.close >= bar.open;
-      const bodyColor = bullish ? upColor : downColor;
-      const bodyTop = Math.min(yOpen, yClose);
-      const bodyBottom = Math.max(yOpen, yClose);
-      const bodyH = Math.max(1, bodyBottom - bodyTop);
-
-      // Wick
-      ctx.beginPath();
-      ctx.strokeStyle = bullish ? wickUpColor : wickDownColor;
-      ctx.lineWidth = 1;
-      ctx.moveTo(x, yHigh);
-      ctx.lineTo(x, bodyTop);
-      ctx.moveTo(x, bodyBottom);
-      ctx.lineTo(x, yLow);
-      ctx.stroke();
-
-      // Body
-      ctx.fillStyle = bodyColor;
-      ctx.fillRect(x - halfBar, bodyTop, barWidth, bodyH);
-
-      if (borderVisible) {
-        ctx.strokeStyle = bodyColor;
-        ctx.lineWidth = 1;
-        ctx.strokeRect(x - halfBar, bodyTop, barWidth, bodyH);
-      }
-    }
-  }
-
-  private _toHeikinAshi(bars: readonly OHLCV[]): OHLCV[] {
-    const result: OHLCV[] = [];
-    for (let i = 0; i < bars.length; i++) {
-      const bar = bars[i]!;
-      const prev = result[i - 1] ?? bar;
-      const haClose = (bar.open + bar.high + bar.low + bar.close) / 4;
-      const haOpen = (prev.open + prev.close) / 2;
-      const haHigh = Math.max(bar.high, haOpen, haClose);
-      const haLow = Math.min(bar.low, haOpen, haClose);
-      result.push({ time: bar.time, open: haOpen, high: haHigh, low: haLow, close: haClose, volume: bar.volume });
-    }
-    return result;
-  }
-}

package/src/renderers/HistogramRenderer.ts

@@ -1,63 +0,0 @@
-import type { OHLCV, SeriesOptions, Viewport, Rect, ChartColors } from '@forgecharts/types';
-import type { IRenderer } from '../types/IRenderer';
-import { mapRange } from '@forgecharts/utils';
-
-/**
- * HistogramRenderer — draws volume or indicator values as vertical bars.
- */
-export class HistogramRenderer implements IRenderer {
-  private readonly _colors: ChartColors;
-
-  constructor(colors: ChartColors) {
-    this._colors = colors;
-  }
-
-  draw(
-    ctx: CanvasRenderingContext2D,
-    bars: readonly OHLCV[],
-    viewport: Viewport,
-    rect: Rect,
-    options: SeriesOptions,
-  ): void {
-    if (options.type !== 'histogram') return;
-
-    const color = options.color ?? '#8b949e';
-    const plotW = rect.width - 70;
-    const plotH = rect.height - 30;
-
-    // Derive pitch from candle interval × pixels-per-second (same fix as CandlestickRenderer)
-    let candleInterval = 0;
-    if (bars.length >= 2) {
-      const deltas: number[] = [];
-      for (let i = 1; i < Math.min(bars.length, 20); i++) {
-        const d = bars[i]!.time - bars[i - 1]!.time;
-        if (d > 0) deltas.push(d);
-      }
-      if (deltas.length > 0) {
-        deltas.sort((a, b) => a - b);
-        candleInterval = deltas[Math.floor(deltas.length / 2)]!;
-      }
-    }
-    const visibleSpan = viewport.timeRange.to - viewport.timeRange.from;
-    const pixelsPerSecond = visibleSpan > 0 ? plotW / visibleSpan : 1;
-    const barPitch = candleInterval > 0
-      ? candleInterval * pixelsPerSecond
-      : plotW / Math.max(1, bars.length);
-    const barWidth = Math.max(1, Math.floor(barPitch) - 1);
-    const halfBar = barWidth / 2;
-    const baseline = plotH; // draws from bottom up
-
-    for (const bar of bars) {
-      const x = mapRange(bar.time, viewport.timeRange.from, viewport.timeRange.to, 0, plotW);
-      if (x < -barWidth || x > plotW + barWidth) continue;
-
-      const y = mapRange(bar.volume, viewport.priceRange.max, viewport.priceRange.min, 0, plotH);
-      const barH = Math.max(1, baseline - y);
-
-      ctx.fillStyle = bar.close >= bar.open ? '#26a641' : '#f85149';
-      ctx.fillRect(x - halfBar, y, barWidth, barH);
-    }
-
-    void color; // unused when per-bar coloring is active
-  }
-}

package/src/renderers/LineRenderer.ts

@@ -1,77 +0,0 @@
-import type { OHLCV, SeriesOptions, Viewport, Rect, ChartColors } from '@forgecharts/types';
-import type { IRenderer } from '../types/IRenderer';
-import { mapRange } from '@forgecharts/utils';
-import { hexToRgba } from '@forgecharts/utils';
-
-/**
- * LineRenderer — draws close prices as a line or area series.
- */
-export class LineRenderer implements IRenderer {
-  private readonly _colors: ChartColors;
-
-  constructor(colors: ChartColors) {
-    this._colors = colors;
-  }
-
-  draw(
-    ctx: CanvasRenderingContext2D,
-    bars: readonly OHLCV[],
-    viewport: Viewport,
-    rect: Rect,
-    options: SeriesOptions,
-  ): void {
-    if (options.type !== 'line' && options.type !== 'area') return;
-    if (bars.length < 2) return;
-
-    const color = options.color ?? '#58a6ff';
-    const lineWidth = options.lineWidth ?? 2;
-    const isArea = options.type === 'area';
-
-    const plotW = rect.width - 70;
-    const plotH = rect.height - 30;
-
-    const points = bars.map((bar) => ({
-      x: mapRange(bar.time, viewport.timeRange.from, viewport.timeRange.to, 0, plotW),
-      y: mapRange(bar.close, viewport.priceRange.max, viewport.priceRange.min, 0, plotH),
-    }));
-
-    // Line path
-    ctx.beginPath();
-    ctx.strokeStyle = color;
-    ctx.lineWidth = lineWidth;
-    this._applyLineStyle(ctx, options.lineStyle ?? 'solid');
-
-    const first = points[0]!;
-    ctx.moveTo(first.x, first.y);
-    for (let i = 1; i < points.length; i++) {
-      ctx.lineTo(points[i]!.x, points[i]!.y);
-    }
-    ctx.stroke();
-    ctx.setLineDash([]);
-
-    // Area fill
-    if (isArea) {
-      ctx.beginPath();
-      ctx.moveTo(first.x, plotH);
-      ctx.lineTo(first.x, first.y);
-      for (let i = 1; i < points.length; i++) {
-        ctx.lineTo(points[i]!.x, points[i]!.y);
-      }
-      const last = points[points.length - 1]!;
-      ctx.lineTo(last.x, plotH);
-      ctx.closePath();
-
-      const gradient = ctx.createLinearGradient(0, 0, 0, plotH);
-      gradient.addColorStop(0, hexToRgba(color, 0.3));
-      gradient.addColorStop(1, hexToRgba(color, 0.0));
-      ctx.fillStyle = gradient;
-      ctx.fill();
-    }
-  }
-
-  private _applyLineStyle(ctx: CanvasRenderingContext2D, style: string): void {
-    if (style === 'dashed') ctx.setLineDash([6, 3]);
-    else if (style === 'dotted') ctx.setLineDash([2, 3]);
-    else ctx.setLineDash([]);
-  }
-}

package/src/theme/colors.ts

@@ -1,21 +0,0 @@
-import type { ChartColors } from '@forgecharts/types';
-
-export const DARK_COLORS: ChartColors = {
-  background: '#000000',
-  backgroundSecondary: '#0a0a0a',
-  text: '#ffffff',
-  textMuted: '#888888',
-  grid: '#2a2a2a',
-  border: '#333333',
-  crosshair: '#ffffff',
-};
-
-export const LIGHT_COLORS: ChartColors = {
-  background: '#ffffff',
-  backgroundSecondary: '#f5f5f5',
-  text: '#000000',
-  textMuted: '#666666',
-  grid: '#e8e8e8',
-  border: '#cccccc',
-  crosshair: '#000000',
-};