@forgecharts/sdk 1.1.23 → 1.1.27

package/src/react/canvas/IndicatorPane.tsx

@@ -0,0 +1,503 @@
+/**
+ * IndicatorPane — Canvas 2D rendering of a single indicator sub-pane.
+ *
+ * Uses the main chart's CoordTransform for x-axis alignment, then computes
+ * its own per-pane y-axis from indicator value ranges.
+ */
+
+import { useEffect, useRef } from 'react';
+import type { OHLCV, IndicatorInstance, ChartTheme } from '@forgecharts/types';
+import type { CoordTransform, DAGResult } from '../../';
+import type { IndicatorPoint, MACDPoint } from '../../';
+import { IndicatorLabel } from './IndicatorLabel';
+
+// ─── Constants ────────────────────────────────────────────────────────────────
+
+/** Width of the right-side price axis — must match the main chart's AXIS_WIDTH. */
+const AXIS_W = 70;
+/** Vertical padding inside the pane (logical pixels). */
+const PAD_T = 8;
+const PAD_B = 8;
+
+// ─── Theme palettes ───────────────────────────────────────────────────────────
+
+const PALETTE = {
+  dark: {
+    bg: '#131722',
+    text: '#d1d4dc',
+    muted: '#787b86',
+    border: '#2a2e39',
+    up: '#26a69a',
+    down: '#ef5350',
+    macdLine: '#2196f3',
+    signalLine: '#ff9800',
+  },
+  light: {
+    bg: '#ffffff',
+    text: '#131722',
+    muted: '#9098a1',
+    border: '#e0e3eb',
+    up: '#26a69a',
+    down: '#ef5350',
+    macdLine: '#1565c0',
+    signalLine: '#e65100',
+  },
+} as const;
+
+type Pal = (typeof PALETTE)[keyof typeof PALETTE];
+
+// ─── Low-level draw helpers ───────────────────────────────────────────────────
+
+function _vy(value: number, min: number, max: number, topPad: number, plotH: number): number {
+  if (max === min) return topPad + plotH / 2;
+  return topPad + plotH * (1 - (value - min) / (max - min));
+}
+
+function _hline(
+  ctx: CanvasRenderingContext2D,
+  y: number,
+  plotW: number,
+  color: string,
+  dash: number[] = [],
+): void {
+  ctx.strokeStyle = color;
+  ctx.lineWidth = 0.5;
+  ctx.setLineDash(dash);
+  ctx.beginPath();
+  ctx.moveTo(0, y + 0.5);
+  ctx.lineTo(plotW, y + 0.5);
+  ctx.stroke();
+  ctx.setLineDash([]);
+}
+
+function _axisLabels(
+  ctx: CanvasRenderingContext2D,
+  ticks: number[],
+  min: number,
+  max: number,
+  topPad: number,
+  plotH: number,
+  canvasH: number,
+  plotW: number,
+  color: string,
+  decimals = 0,
+): void {
+  ctx.font = '9px -apple-system, BlinkMacSystemFont, sans-serif';
+  ctx.fillStyle = color;
+  ctx.textAlign = 'left';
+  ctx.textBaseline = 'middle';
+  for (const tick of ticks) {
+    const y = _vy(tick, min, max, topPad, plotH);
+    if (y < 2 || y > canvasH - 2) continue;
+    ctx.fillText(tick.toFixed(decimals), plotW + 4, y);
+  }
+}
+
+// ─── Per-indicator renderers ──────────────────────────────────────────────────
+
+function _renderRSI(
+  ctx: CanvasRenderingContext2D,
+  points: readonly IndicatorPoint[],
+  transform: CoordTransform,
+  plotW: number,
+  h: number,
+  lineColor: string,
+  pal: Pal,
+): void {
+  const plotH = h - PAD_T - PAD_B;
+  const min = 0;
+  const max = 100;
+  const y70 = _vy(70, min, max, PAD_T, plotH);
+  const y50 = _vy(50, min, max, PAD_T, plotH);
+  const y30 = _vy(30, min, max, PAD_T, plotH);
+
+  // Zone fills
+  ctx.fillStyle = 'rgba(239,83,80,0.06)';
+  ctx.fillRect(0, PAD_T, plotW, y70 - PAD_T);
+  ctx.fillStyle = 'rgba(38,166,154,0.06)';
+  ctx.fillRect(0, y30, plotW, h - PAD_B - y30);
+
+  // Reference lines
+  _hline(ctx, y70, plotW, pal.muted, [3, 3]);
+  _hline(ctx, y50, plotW, pal.border);
+  _hline(ctx, y30, plotW, pal.muted, [3, 3]);
+
+  // Level labels inside plot area
+  ctx.font = '9px sans-serif';
+  ctx.fillStyle = pal.muted;
+  ctx.textAlign = 'left';
+  ctx.textBaseline = 'bottom';
+  ctx.fillText('70', 2, y70);
+  ctx.textBaseline = 'top';
+  ctx.fillText('30', 2, y30);
+
+  // RSI line
+  if (points.length > 0) {
+    ctx.strokeStyle = lineColor;
+    ctx.lineWidth = 1.5;
+    ctx.beginPath();
+    let started = false;
+    for (const p of points) {
+      const x = transform.timeToX(p.time);
+      if (x < -20 || x > plotW + 20) { started = false; continue; }
+      const y = _vy(p.value, min, max, PAD_T, plotH);
+      if (!started) { ctx.moveTo(x, y); started = true; } else { ctx.lineTo(x, y); }
+    }
+    ctx.stroke();
+  }
+
+  _axisLabels(ctx, [0, 30, 50, 70, 100], min, max, PAD_T, plotH, h, plotW, pal.muted);
+}
+
+function _renderMACD(
+  ctx: CanvasRenderingContext2D,
+  points: readonly MACDPoint[],
+  transform: CoordTransform,
+  plotW: number,
+  h: number,
+  pal: Pal,
+): void {
+  if (points.length === 0) return;
+  const plotH = h - PAD_T - PAD_B;
+
+  // Auto-scale to visible values
+  let min = Infinity;
+  let max = -Infinity;
+  for (const p of points) {
+    const x = transform.timeToX(p.time);
+    if (x < -20 || x > plotW + 20) continue;
+    min = Math.min(min, p.histogram, p.macd, p.signal);
+    max = Math.max(max, p.histogram, p.macd, p.signal);
+  }
+  if (!isFinite(min)) { min = -0.01; max = 0.01; }
+  const rangePad = (max - min) * 0.1 || 0.001;
+  min -= rangePad; max += rangePad;
+
+  // Zero line
+  _hline(ctx, _vy(0, min, max, PAD_T, plotH), plotW, pal.border, [2, 2]);
+
+  // Compute bar pixel width from consecutive timestamps
+  let barPx = 5;
+  if (points.length >= 2) {
+    barPx = Math.max(1, Math.abs(transform.timeToX(points[1]!.time) - transform.timeToX(points[0]!.time)) * 0.7);
+  }
+
+  // Histogram bars
+  const y0 = _vy(0, min, max, PAD_T, plotH);
+  for (const p of points) {
+    const x = transform.timeToX(p.time);
+    if (x < -barPx || x > plotW + barPx) continue;
+    const yH = _vy(p.histogram, min, max, PAD_T, plotH);
+    ctx.fillStyle = p.histogram >= 0 ? `${pal.up}99` : `${pal.down}99`;
+    ctx.fillRect(x - barPx / 2, Math.min(y0, yH), barPx, Math.abs(y0 - yH) || 1);
+  }
+
+  // MACD line
+  ctx.strokeStyle = pal.macdLine;
+  ctx.lineWidth = 1.5;
+  ctx.beginPath();
+  let started = false;
+  for (const p of points) {
+    const x = transform.timeToX(p.time);
+    if (x < -20 || x > plotW + 20) { started = false; continue; }
+    const y = _vy(p.macd, min, max, PAD_T, plotH);
+    if (!started) { ctx.moveTo(x, y); started = true; } else { ctx.lineTo(x, y); }
+  }
+  ctx.stroke();
+
+  // Signal line
+  ctx.strokeStyle = pal.signalLine;
+  ctx.lineWidth = 1;
+  ctx.beginPath();
+  started = false;
+  for (const p of points) {
+    const x = transform.timeToX(p.time);
+    if (x < -20 || x > plotW + 20) { started = false; continue; }
+    const y = _vy(p.signal, min, max, PAD_T, plotH);
+    if (!started) { ctx.moveTo(x, y); started = true; } else { ctx.lineTo(x, y); }
+  }
+  ctx.stroke();
+
+  const range = max - min;
+  const dec = range < 0.1 ? 4 : range < 10 ? 2 : 0;
+  _axisLabels(
+    ctx,
+    [min + range * 0.1, min + range * 0.5, min + range * 0.9],
+    min, max, PAD_T, plotH, h, plotW, pal.muted, dec,
+  );
+}
+
+function _renderVolume(
+  ctx: CanvasRenderingContext2D,
+  bars: readonly OHLCV[],
+  points: readonly IndicatorPoint[],
+  transform: CoordTransform,
+  plotW: number,
+  h: number,
+  pal: Pal,
+): void {
+  if (points.length === 0) return;
+  const plotH = h - PAD_T - PAD_B;
+  const min = 0;
+  const max = Math.max(...points.map((p) => p.value));
+  if (max === 0) return;
+
+  const barMap = new Map(bars.map((b) => [b.time, b]));
+  let barPx = 5;
+  if (points.length >= 2) {
+    barPx = Math.max(1, Math.abs(transform.timeToX(points[1]!.time) - transform.timeToX(points[0]!.time)) * 0.8);
+  }
+
+  const yBase = _vy(0, min, max, PAD_T, plotH);
+  for (const p of points) {
+    const x = transform.timeToX(p.time);
+    if (x < -barPx || x > plotW + barPx) continue;
+    const bar = barMap.get(p.time);
+    const isUp = bar !== undefined ? bar.close >= bar.open : true;
+    const yTop = _vy(p.value, min, max, PAD_T, plotH);
+    ctx.fillStyle = isUp ? `${pal.up}99` : `${pal.down}99`;
+    ctx.fillRect(x - barPx / 2, yTop, barPx, Math.abs(yBase - yTop) || 1);
+  }
+
+  _axisLabels(ctx, [max], min, max, PAD_T, plotH, h, plotW, pal.muted, 0);
+}
+
+function _renderLineIndicator(
+  ctx: CanvasRenderingContext2D,
+  points: readonly IndicatorPoint[],
+  transform: CoordTransform,
+  plotW: number,
+  h: number,
+  lineColor: string,
+  pal: Pal,
+): void {
+  if (points.length === 0) return;
+  const plotH = h - PAD_T - PAD_B;
+
+  // Auto-scale to visible values
+  let min = Infinity;
+  let max = -Infinity;
+  for (const p of points) {
+    const x = transform.timeToX(p.time);
+    if (x < -20 || x > plotW + 20) continue;
+    min = Math.min(min, p.value);
+    max = Math.max(max, p.value);
+  }
+  if (!isFinite(min)) return;
+  const rangePad = (max - min) * 0.1 || 1;
+  min -= rangePad; max += rangePad;
+
+  ctx.strokeStyle = lineColor;
+  ctx.lineWidth = 1.5;
+  ctx.beginPath();
+  let started = false;
+  for (const p of points) {
+    const x = transform.timeToX(p.time);
+    if (x < -20 || x > plotW + 20) { started = false; continue; }
+    const y = _vy(p.value, min, max, PAD_T, plotH);
+    if (!started) { ctx.moveTo(x, y); started = true; } else { ctx.lineTo(x, y); }
+  }
+  ctx.stroke();
+
+  const range = max - min;
+  const dec = range < 0.1 ? 4 : range < 10 ? 2 : 0;
+  _axisLabels(ctx, [min + range * 0.25, min + range * 0.75], min, max, PAD_T, plotH, h, plotW, pal.muted, dec);
+}
+
+// ─── Label helper ─────────────────────────────────────────────────────────────
+
+function _indicatorLabel(type: string, params: Record<string, unknown> = {}): string {
+  switch (type) {
+    case 'rsi':    return `RSI(${params['period'] ?? 14})`;
+    case 'macd':   return `MACD(${params['fast'] ?? 12},${params['slow'] ?? 26},${params['signal'] ?? 9})`;
+    case 'volume': return 'Volume';
+    case 'sma':    return `SMA(${params['period'] ?? 20})`;
+    case 'ema':    return `EMA(${params['period'] ?? 20})`;
+    case 'wma':    return `WMA(${params['period'] ?? 20})`;
+    default:       return type.toUpperCase();
+  }
+}
+
+// ─── Component ────────────────────────────────────────────────────────────────
+
+export type IndicatorPaneProps = {
+  /** Indicators to render in this pane. */
+  indicators: readonly IndicatorInstance[];
+  /** Full bar dataset — still needed for volume bar up/down colouring. */
+  bars: readonly OHLCV[];
+  /** Shared coordinate transform from the main price chart. Null until chart mounts. */
+  transform: CoordTransform | null;
+  /** CSS height of this pane in pixels. */
+  height: number;
+  /** Colour theme — must match the main chart. */
+  theme: ChartTheme;
+  /** Pre-computed DAG results — keyed by indicator id. */
+  computedResults: ReadonlyMap<string, DAGResult>;
+  /** Called when the user clicks the × button on an indicator label. */
+  onRemove?: (id: string) => void;
+  /** Called when the user clicks the ⚙ button on an indicator label. */
+  onConfigure?: (indicator: IndicatorInstance) => void;
+  /** Ref to the current crosshair X pixel (from the price pane). Drawn as a synced vertical line. */
+  crosshairXRef?: { current: number | null };
+};
+
+export function IndicatorPane({
+  indicators,
+  bars,
+  transform,
+  height,
+  theme,
+  computedResults,
+  crosshairXRef,
+  onRemove,
+  onConfigure,
+}: IndicatorPaneProps) {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  // Stable ref to the draw function — rebuilt whenever data changes,
+  // called each RAF frame to stay in sync with the candle layer.
+  const drawFnRef = useRef<(() => void) | null>(null);
+
+  useEffect(() => {
+    drawFnRef.current = () => {
+    const canvas = canvasRef.current;
+    if (!canvas || !transform || indicators.length === 0) return;
+
+    const dpr = window.devicePixelRatio ?? 1;
+    const cssW = canvas.offsetWidth || (canvas.parentElement?.clientWidth ?? 800);
+    const cssH = height;
+    const physW = Math.round(cssW * dpr);
+    const physH = Math.round(cssH * dpr);
+
+    if (canvas.width !== physW || canvas.height !== physH) {
+      canvas.width = physW;
+      canvas.height = physH;
+    }
+
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+
+    const pal = PALETTE[theme];
+
+    ctx.save();
+    ctx.scale(dpr, dpr);
+
+    const w = cssW;
+    const h = cssH;
+    const plotW = w - AXIS_W;
+
+    // Background
+    ctx.fillStyle = pal.bg;
+    ctx.fillRect(0, 0, w, h);
+
+    // Top separator
+    ctx.strokeStyle = pal.border;
+    ctx.lineWidth = 1;
+    ctx.beginPath();
+    ctx.moveTo(0, 0.5);
+    ctx.lineTo(w, 0.5);
+    ctx.stroke();
+
+    // Axis divider
+    ctx.beginPath();
+    ctx.moveTo(plotW + 0.5, 0);
+    ctx.lineTo(plotW + 0.5, h);
+    ctx.stroke();
+
+    // Clip plot area so indicator lines don't bleed into axis
+    ctx.save();
+    ctx.beginPath();
+    ctx.rect(0, 0, plotW, h);
+    ctx.clip();
+
+    for (const indicator of indicators) {
+      const result = computedResults.get(indicator.id);
+      if (!result) continue;
+      const color = indicator.config.color;
+
+      switch (indicator.config.type) {
+        case 'rsi':
+          if (result.kind === 'series')
+            _renderRSI(ctx, result.points, transform, plotW, h, color ?? '#7c4dff', pal);
+          break;
+        case 'macd':
+          if (result.kind === 'macd')
+            _renderMACD(ctx, result.points, transform, plotW, h, pal);
+          break;
+        case 'volume':
+          if (result.kind === 'series')
+            _renderVolume(ctx, bars, result.points, transform, plotW, h, pal);
+          break;
+        default:
+          // sma, ema, wma, bbands, and any chained / custom indicators
+          if (result.kind === 'series')
+            _renderLineIndicator(ctx, result.points, transform, plotW, h, color ?? '#ffb300', pal);
+      }
+    }
+
+    // ── Crosshair vertical line (synced from price pane) ────────────────
+    const xhair = crosshairXRef?.current ?? null;
+    if (xhair !== null && xhair >= 0 && xhair <= plotW) {
+      ctx.strokeStyle = theme === 'dark' ? 'rgba(255,255,255,0.4)' : 'rgba(0,0,0,0.4)';
+      ctx.lineWidth = 0.5;
+      ctx.setLineDash([3, 3]);
+      ctx.beginPath();
+      ctx.moveTo(xhair + 0.5, 0);
+      ctx.lineTo(xhair + 0.5, h);
+      ctx.stroke();
+      ctx.setLineDash([]);
+    }
+
+    ctx.restore(); // clip
+
+      ctx.restore(); // dpr scale
+    };
+    // Draw immediately when data (not viewport) changes.
+    drawFnRef.current();
+  }, [computedResults, bars, height, indicators, transform, theme]);
+
+  // RAF loop: redraw every frame so the pane tracks pan/zoom in the same
+  // animation frame as the candle layer — no React state update needed.
+  useEffect(() => {
+    let rafId: number;
+    const tick = () => {
+      drawFnRef.current?.();
+      rafId = requestAnimationFrame(tick);
+    };
+    rafId = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(rafId);
+  }, []);
+
+  const pal = PALETTE[theme];
+
+  return (
+    <div style={{ position: 'relative', width: '100%', height: `${height}px` }}>
+      <canvas
+        ref={canvasRef}
+        style={{ width: '100%', height: `${height}px`, display: 'block' }}
+      />
+      {/* Indicator name labels — one per indicator in this pane */}
+      <div
+        style={{
+          position: 'absolute',
+          top: 4,
+          left: 4,
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 2,
+          pointerEvents: 'auto',
+          zIndex: 2,
+        }}
+      >
+        {indicators.map((ind) => (
+          <IndicatorLabel
+            key={ind.id}
+            indicator={ind}
+            color={pal.text}
+            onRemove={() => onRemove?.(ind.id)}
+            onConfigure={() => onConfigure?.(ind)}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/react/canvas/PointerOverlay.tsx

@@ -0,0 +1,126 @@
+import React, { useEffect, useRef } from 'react';
+import type { PointerToolType } from '../../';
+import {
+  DOT_RADIUS,
+  DOT_COLOR,
+  DEMONSTRATION_RADIUS,
+  DEMONSTRATION_FILL,
+  DEMONSTRATION_STROKE,
+  DEMONSTRATION_COLOR,
+} from '../../';
+
+/**
+ * PointerOverlay — a transparent `<div>` that covers the entire chart area and
+ * renders tool-specific cursor visuals for the `dot` and `demonstration` modes.
+ *
+ * - **dot**: SVG crosshair lines + small filled circle at the intersection.
+ * - **demonstration**: SVG crosshair + semi-transparent filled circle centred
+ *   on the cursor.
+ *
+ * The component does NOT intercept pointer events (`pointerEvents: none`), so
+ * all mouse interactions pass through to the canvas layers beneath it.
+ */
+
+type Props = {
+  mode: PointerToolType;
+  /** Width of the container to size the SVG overlay. */
+  width: number;
+  /** Height of the container to size the SVG overlay. */
+  height: number;
+};
+
+const CROSSHAIR_COLOR = DEMONSTRATION_COLOR;
+
+export function PointerOverlay({ mode, width, height }: Props): React.ReactElement | null {
+  const svgRef      = useRef<SVGSVGElement>(null);
+  const hGroupRef   = useRef<SVGGElement>(null);   // translateY group → horizontal line
+  const vGroupRef   = useRef<SVGGElement>(null);   // translateX group → vertical line
+  const cursorGroup = useRef<SVGGElement>(null);   // translate(x,y) group → dot/circle
+
+  useEffect(() => {
+    const svg = svgRef.current;
+    if (!svg) return;
+    const container = svg.parentElement;
+    if (!container) return;
+
+    // Cache the bounding rect so we never call getBoundingClientRect() inside the
+    // hot move handler (it forces a synchronous reflow on every event).
+    let cachedRect = container.getBoundingClientRect();
+    const ro = new ResizeObserver(() => { cachedRect = container.getBoundingClientRect(); });
+    ro.observe(container);
+
+    const onMove = (e: MouseEvent) => {
+      const x = e.clientX - cachedRect.left;
+      const y = e.clientY - cachedRect.top;
+
+      if (x < 0 || y < 0 || x > cachedRect.width || y > cachedRect.height) {
+        svg.style.opacity = '0';
+        return;
+      }
+
+      svg.style.opacity = '1';
+
+      // CSS transforms are GPU-composited — no layout reflow, no paint.
+      if (hGroupRef.current)   hGroupRef.current.style.transform   = `translateY(${y}px)`;
+      if (vGroupRef.current)   vGroupRef.current.style.transform   = `translateX(${x}px)`;
+      if (cursorGroup.current) cursorGroup.current.style.transform = `translate(${x}px,${y}px)`;
+    };
+
+    const hide = () => { svg.style.opacity = '0'; };
+
+    // passive:true lets the browser skip asking us about preventDefault → lower latency
+    container.addEventListener('mousemove',  onMove, { passive: true });
+    container.addEventListener('mouseleave', hide,  { passive: true });
+    return () => {
+      container.removeEventListener('mousemove',  onMove);
+      container.removeEventListener('mouseleave', hide);
+      ro.disconnect();
+    };
+  }, []);
+
+  if (mode !== 'dot' && mode !== 'demonstration') return null;
+
+  return (
+    <svg
+      ref={svgRef}
+      width={width}
+      height={height}
+      style={{
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        pointerEvents: 'none',
+        zIndex: 5,
+        opacity: 0,
+        overflow: 'visible',
+        willChange: 'opacity',
+      }}
+    >
+      {/* Horizontal crosshair line — spans ±∞ so width never matters */}
+      <g ref={hGroupRef}>
+        <line x1="-9999" y1="0" x2="9999" y2="0"
+          stroke={CROSSHAIR_COLOR} strokeWidth="1" strokeDasharray="4 3" />
+      </g>
+
+      {/* Vertical crosshair line — spans ±∞ so height never matters */}
+      <g ref={vGroupRef}>
+        <line x1="0" y1="-9999" x2="0" y2="9999"
+          stroke={CROSSHAIR_COLOR} strokeWidth="1" strokeDasharray="4 3" />
+      </g>
+
+      {/* Cursor element translated to (x, y) */}
+      <g ref={cursorGroup}>
+        {mode === 'dot' && (
+          <circle r={DOT_RADIUS} fill={DOT_COLOR} />
+        )}
+        {mode === 'demonstration' && (
+          <circle r={DEMONSTRATION_RADIUS}
+            fill={DEMONSTRATION_FILL}
+            stroke={DEMONSTRATION_STROKE}
+            strokeWidth="1.5"
+          />
+        )}
+      </g>
+    </svg>
+  );
+}