@jcsoftdev/ui 0.0.0-stage → 0.1.1

package/src/charts/stock-chart/stock-drawing-layer.tsx

@@ -0,0 +1,386 @@
+"use client";
+
+import { type PointerEvent, useRef } from "react";
+import { DECORATIVE } from "../core/a11y.js";
+import { estimateTextWidth } from "../core/axes.js";
+import { formatPercent } from "../core/format.js";
+import { DIRECTION_COLORS } from "../core/palette.js";
+import {
+  distanceToSegment,
+  durationDays,
+  fibLevels,
+  indexAtTime,
+  measureRange,
+  type StockAnchor,
+  type StockDrawing,
+  type StockTool,
+  timeAtIndex,
+} from "./stock-drawings.js";
+
+/** Where the price pane sits and how pixels map to moments and prices. */
+export interface DrawingGeometry {
+  /** Time of every bar of the whole series (not only the visible window). */
+  times: readonly number[];
+  /** First visible bar. */
+  from: number;
+  /** Pixel of the first visible bar and distance between bars. */
+  x0: number;
+  step: number;
+  innerWidth: number;
+  priceHeight: number;
+  y: (price: number) => number;
+  invert: (pixel: number) => number;
+}
+
+export interface DrawingTexts {
+  bars: string;
+  days: string;
+}
+
+const HIT = 7;
+const COLORS = {
+  trend: "var(--chart-cat-2)",
+  horizontal: "var(--chart-cat-3)",
+  range: "var(--chart-cat-4)",
+  fib: "var(--chart-cat-5)",
+} as const;
+
+export function xOfTime(geometry: DrawingGeometry, time: number): number {
+  return geometry.x0 + (indexAtTime(geometry.times, time) - geometry.from) * geometry.step;
+}
+
+/** Anchor under a pixel of the price pane, snapped to the nearest bar and clamped inside. */
+export function anchorAt(geometry: DrawingGeometry, px: number, py: number): StockAnchor {
+  const last = Math.max(0, geometry.times.length - 1);
+  const index = (px - geometry.x0) / (geometry.step || 1) + geometry.from;
+  const snapped = Math.min(last, Math.max(0, Math.round(index)));
+  const row = Math.min(geometry.priceHeight, Math.max(0, py));
+  return { time: timeAtIndex(geometry.times, snapped), price: geometry.invert(row) };
+}
+
+/** Topmost drawing within a few pixels of the point, or null. */
+export function hitDrawing(
+  drawings: readonly StockDrawing[],
+  geometry: DrawingGeometry,
+  point: { x: number; y: number },
+): string | null {
+  for (let i = drawings.length - 1; i >= 0; i -= 1) {
+    const drawing = drawings[i] as StockDrawing;
+    if (drawing.type === "horizontal") {
+      if (Math.abs(point.y - geometry.y(drawing.price)) <= HIT) return drawing.id;
+      continue;
+    }
+    const a = { x: xOfTime(geometry, drawing.a.time), y: geometry.y(drawing.a.price) };
+    const b = { x: xOfTime(geometry, drawing.b.time), y: geometry.y(drawing.b.price) };
+    if (drawing.type === "trend") {
+      if (distanceToSegment(point, a, b) <= HIT) return drawing.id;
+    } else if (drawing.type === "range") {
+      const inside =
+        point.x >= Math.min(a.x, b.x) - HIT &&
+        point.x <= Math.max(a.x, b.x) + HIT &&
+        point.y >= Math.min(a.y, b.y) - HIT &&
+        point.y <= Math.max(a.y, b.y) + HIT;
+      if (inside) return drawing.id;
+    } else {
+      const near = fibLevels(drawing.a.price, drawing.b.price).some(
+        (level) => Math.abs(point.y - geometry.y(level.price)) <= HIT,
+      );
+      if (near) return drawing.id;
+    }
+  }
+  return null;
+}
+
+function Handle({ x, y }: { x: number; y: number }) {
+  return (
+    <circle
+      cx={x}
+      cy={y}
+      r={4.5}
+      strokeWidth={2}
+      style={{ fill: "var(--surface)", stroke: "var(--ink)" }}
+    />
+  );
+}
+
+export function DrawingShape({
+  drawing,
+  geometry,
+  selected,
+  fmt,
+  draft,
+}: {
+  drawing: StockDrawing;
+  geometry: DrawingGeometry;
+  selected: boolean;
+  fmt: (value: number) => string;
+  draft?: boolean;
+}) {
+  const width = selected ? 2.5 : 1.75;
+  const dash = draft ? "4 3" : undefined;
+  if (drawing.type === "horizontal") {
+    const py = geometry.y(drawing.price);
+    return (
+      <g {...DECORATIVE}>
+        <line
+          x1={0}
+          x2={geometry.innerWidth}
+          y1={py}
+          y2={py}
+          strokeWidth={width}
+          strokeDasharray={dash ?? "6 4"}
+          style={{ stroke: COLORS.horizontal }}
+        />
+        <text
+          x={6}
+          y={py - 5}
+          className="font-semibold text-[10.5px] tabular-nums"
+          style={{ fill: COLORS.horizontal }}
+        >
+          {fmt(drawing.price)}
+        </text>
+      </g>
+    );
+  }
+  const ax = xOfTime(geometry, drawing.a.time);
+  const ay = geometry.y(drawing.a.price);
+  const bx = xOfTime(geometry, drawing.b.time);
+  const by = geometry.y(drawing.b.price);
+  if (drawing.type === "trend") {
+    return (
+      <g {...DECORATIVE}>
+        <line
+          x1={ax}
+          y1={ay}
+          x2={bx}
+          y2={by}
+          strokeWidth={width}
+          strokeLinecap="round"
+          strokeDasharray={dash}
+          style={{ stroke: COLORS.trend }}
+        />
+        {selected ? (
+          <>
+            <Handle x={ax} y={ay} />
+            <Handle x={bx} y={by} />
+          </>
+        ) : null}
+      </g>
+    );
+  }
+  if (drawing.type === "range") {
+    const change = drawing.a.price
+      ? (drawing.b.price - drawing.a.price) / Math.abs(drawing.a.price)
+      : 0;
+    const left = Math.min(ax, bx);
+    const top = Math.min(ay, by);
+    return (
+      <g {...DECORATIVE}>
+        <rect
+          x={left}
+          y={top}
+          width={Math.abs(bx - ax)}
+          height={Math.abs(by - ay)}
+          rx={3}
+          strokeWidth={selected ? 2 : 1.25}
+          strokeDasharray={dash}
+          style={{ fill: COLORS.range, fillOpacity: 0.12, stroke: COLORS.range }}
+        />
+        <text
+          x={left + 6}
+          y={top + 14}
+          className="font-bold text-[10.5px] tabular-nums"
+          style={{ fill: COLORS.range }}
+        >
+          {change > 0 ? "+" : ""}
+          {formatPercent(change)}
+        </text>
+        {selected ? (
+          <>
+            <Handle x={ax} y={ay} />
+            <Handle x={bx} y={by} />
+          </>
+        ) : null}
+      </g>
+    );
+  }
+  const levels = fibLevels(drawing.a.price, drawing.b.price);
+  const left = Math.max(0, Math.min(ax, bx));
+  return (
+    <g {...DECORATIVE}>
+      <rect
+        x={left}
+        y={Math.min(ay, by)}
+        width={Math.max(0, geometry.innerWidth - left)}
+        height={Math.abs(by - ay)}
+        style={{ fill: COLORS.fib, fillOpacity: 0.06 }}
+      />
+      {levels.map((level) => {
+        const py = geometry.y(level.price);
+        return (
+          <g key={level.ratio}>
+            <line
+              x1={left}
+              x2={geometry.innerWidth}
+              y1={py}
+              y2={py}
+              strokeWidth={selected ? 1.75 : 1}
+              strokeDasharray={level.ratio === 0 || level.ratio === 1 ? dash : (dash ?? "3 3")}
+              style={{ stroke: COLORS.fib, strokeOpacity: 0.85 }}
+            />
+            <text
+              x={geometry.innerWidth - 4}
+              y={py - 4}
+              textAnchor="end"
+              className="font-semibold text-[10px] tabular-nums"
+              style={{ fill: COLORS.fib }}
+            >
+              {level.ratio} · {fmt(level.price)}
+            </text>
+          </g>
+        );
+      })}
+      {selected ? (
+        <>
+          <Handle x={ax} y={ay} />
+          <Handle x={bx} y={by} />
+        </>
+      ) : null}
+    </g>
+  );
+}
+
+/** The ruler: a dashed box between the two ends and a label with the change, bars and days. */
+export function MeasureShape({
+  a,
+  b,
+  geometry,
+  texts,
+}: {
+  a: StockAnchor;
+  b: StockAnchor;
+  geometry: DrawingGeometry;
+  texts: DrawingTexts;
+}) {
+  const measure = measureRange(geometry.times, a, b);
+  const color = measure.change >= 0 ? DIRECTION_COLORS.up : DIRECTION_COLORS.down;
+  const ax = xOfTime(geometry, a.time);
+  const bx = xOfTime(geometry, b.time);
+  const ay = geometry.y(a.price);
+  const by = geometry.y(b.price);
+  const label = `${measure.percent > 0 ? "+" : ""}${formatPercent(measure.percent)} · ${measure.bars} ${texts.bars} · ${durationDays(measure.duration)} ${texts.days}`;
+  const boxWidth = estimateTextWidth(label) + 16;
+  const boxX = Math.max(0, Math.min(geometry.innerWidth - boxWidth, (ax + bx) / 2 - boxWidth / 2));
+  const boxY = Math.max(0, Math.min(geometry.priceHeight - 22, Math.min(ay, by) - 28));
+  return (
+    <g {...DECORATIVE}>
+      <rect
+        x={Math.min(ax, bx)}
+        y={Math.min(ay, by)}
+        width={Math.abs(bx - ax)}
+        height={Math.abs(by - ay)}
+        strokeDasharray="4 3"
+        style={{ fill: color, fillOpacity: 0.1, stroke: color }}
+      />
+      <line x1={ax} y1={ay} x2={bx} y2={by} strokeWidth={1.5} style={{ stroke: color }} />
+      <rect x={boxX} y={boxY} width={boxWidth} height={22} rx={6} style={{ fill: color }} />
+      <text
+        x={boxX + boxWidth / 2}
+        y={boxY + 11}
+        dy="0.34em"
+        textAnchor="middle"
+        className="font-bold text-[10.5px] tabular-nums"
+        style={{ fill: "var(--surface)" }}
+      >
+        {label}
+      </text>
+    </g>
+  );
+}
+
+export interface DrawingInputProps {
+  tool: Exclude<StockTool, "cursor">;
+  geometry: DrawingGeometry;
+  left: number;
+  top: number;
+  onCreate: (drawing: StockDrawing) => void;
+  onDone: () => void;
+  onDraft: (state: { tool: StockTool; a: StockAnchor; b: StockAnchor } | null) => void;
+  /** Called when a measure drag ends, so the label stays until the next gesture. */
+  onMeasure: (state: { a: StockAnchor; b: StockAnchor } | null) => void;
+  label: string;
+}
+
+let counter = 0;
+export function newDrawingId(): string {
+  counter += 1;
+  return `d${Date.now().toString(36)}${counter}`;
+}
+
+/**
+ * Transparent layer over the price pane while a tool is armed: press, drag and
+ * release draws a two-point shape; a horizontal line is a single click.
+ */
+export function DrawingInput({
+  tool,
+  geometry,
+  left,
+  top,
+  onCreate,
+  onDone,
+  onDraft,
+  onMeasure,
+  label,
+}: DrawingInputProps) {
+  const start = useRef<{ anchor: StockAnchor; x: number; y: number } | null>(null);
+  const local = (event: PointerEvent<HTMLDivElement>) => {
+    const rect = event.currentTarget.getBoundingClientRect();
+    return { x: event.clientX - rect.left, y: event.clientY - rect.top };
+  };
+  const finish = (event: PointerEvent<HTMLDivElement>, commit: boolean) => {
+    const origin = start.current;
+    start.current = null;
+    onDraft(null);
+    if (!origin || !commit) return;
+    const point = local(event);
+    const end = anchorAt(geometry, point.x, point.y);
+    const moved = Math.hypot(point.x - origin.x, point.y - origin.y) > 6;
+    if (!moved) return;
+    if (tool === "measure") {
+      onMeasure({ a: origin.anchor, b: end });
+      return;
+    }
+    if (tool === "horizontal") return;
+    onCreate({ id: newDrawingId(), type: tool, a: origin.anchor, b: end });
+    onDone();
+  };
+  return (
+    <div
+      role="presentation"
+      aria-label={label}
+      className="absolute cursor-crosshair touch-none"
+      style={{ left, top, width: geometry.innerWidth, height: geometry.priceHeight }}
+      onPointerDown={(event) => {
+        event.currentTarget.setPointerCapture(event.pointerId);
+        const point = local(event);
+        const anchor = anchorAt(geometry, point.x, point.y);
+        onMeasure(null);
+        if (tool === "horizontal") {
+          onCreate({ id: newDrawingId(), type: "horizontal", price: anchor.price });
+          onDone();
+          return;
+        }
+        start.current = { anchor, x: point.x, y: point.y };
+        onDraft({ tool, a: anchor, b: anchor });
+      }}
+      onPointerMove={(event) => {
+        const origin = start.current;
+        if (!origin) return;
+        const point = local(event);
+        onDraft({ tool, a: origin.anchor, b: anchorAt(geometry, point.x, point.y) });
+      }}
+      onPointerUp={(event) => finish(event, true)}
+      onPointerCancel={(event) => finish(event, false)}
+    />
+  );
+}

package/src/charts/stock-chart/stock-drawings.ts

@@ -0,0 +1,121 @@
+/** A point on the chart in data space: a moment and a price. */
+export interface StockAnchor {
+  /** Milliseconds since the epoch. */
+  time: number;
+  price: number;
+}
+
+export type StockDrawing =
+  | { id: string; type: "trend"; a: StockAnchor; b: StockAnchor }
+  | { id: string; type: "horizontal"; price: number }
+  | { id: string; type: "range"; a: StockAnchor; b: StockAnchor }
+  | { id: string; type: "fib"; a: StockAnchor; b: StockAnchor };
+
+/** Tools of the drawing toolbar: `cursor` selects, `measure` is transient (never persisted). */
+export type StockTool = "cursor" | "trend" | "horizontal" | "range" | "fib" | "measure";
+
+export const DEFAULT_STOCK_TOOLS: readonly StockTool[] = [
+  "cursor",
+  "trend",
+  "horizontal",
+  "range",
+  "fib",
+  "measure",
+];
+
+export const FIB_LEVELS: readonly number[] = [0, 0.236, 0.382, 0.5, 0.618, 0.786, 1];
+
+/**
+ * Fractional bar index of a moment over ascending `times`: integers are bars,
+ * values between two bars interpolate their times, and moments outside the
+ * series extrapolate with the nearest gap.
+ */
+export function indexAtTime(times: readonly number[], time: number): number {
+  const last = times.length - 1;
+  if (last <= 0) return 0;
+  const first = times[0] as number;
+  const end = times[last] as number;
+  if (time <= first) return (time - first) / ((times[1] as number) - first || 1);
+  if (time >= end) return last + (time - end) / (end - (times[last - 1] as number) || 1);
+  let lo = 0;
+  let hi = last;
+  while (hi - lo > 1) {
+    const mid = (lo + hi) >> 1;
+    if ((times[mid] as number) <= time) lo = mid;
+    else hi = mid;
+  }
+  const a = times[lo] as number;
+  const b = times[hi] as number;
+  return lo + (time - a) / (b - a || 1);
+}
+
+/** Inverse of `indexAtTime`. */
+export function timeAtIndex(times: readonly number[], index: number): number {
+  const last = times.length - 1;
+  if (last < 0) return 0;
+  if (last === 0) return times[0] as number;
+  if (index <= 0) {
+    return (times[0] as number) + index * ((times[1] as number) - (times[0] as number));
+  }
+  if (index >= last) {
+    const gap = (times[last] as number) - (times[last - 1] as number);
+    return (times[last] as number) + (index - last) * gap;
+  }
+  const lo = Math.floor(index);
+  const a = times[lo] as number;
+  return a + (index - lo) * ((times[lo + 1] as number) - a);
+}
+
+export interface FibLevel {
+  ratio: number;
+  price: number;
+}
+
+/** Retracement levels between two prices: ratio 0 sits at `a`, ratio 1 at `b`. */
+export function fibLevels(a: number, b: number): FibLevel[] {
+  return FIB_LEVELS.map((ratio) => ({ ratio, price: a + (b - a) * ratio }));
+}
+
+export interface Measurement {
+  change: number;
+  /** Fraction of the start price (0.05 = +5%), negative when falling. */
+  percent: number;
+  /** Whole bars between the two ends. */
+  bars: number;
+  /** Milliseconds between the two ends. */
+  duration: number;
+}
+
+/** What a drag between two anchors measures. */
+export function measureRange(
+  times: readonly number[],
+  a: StockAnchor,
+  b: StockAnchor,
+): Measurement {
+  const change = b.price - a.price;
+  return {
+    change,
+    percent: a.price ? change / Math.abs(a.price) : 0,
+    bars: Math.round(Math.abs(indexAtTime(times, b.time) - indexAtTime(times, a.time))),
+    duration: Math.abs(b.time - a.time),
+  };
+}
+
+/** Whole days in a duration. */
+export function durationDays(duration: number): number {
+  return Math.round(duration / 86_400_000);
+}
+
+/** Distance from point `p` to the segment `a`-`b`, in pixels. */
+export function distanceToSegment(
+  p: { x: number; y: number },
+  a: { x: number; y: number },
+  b: { x: number; y: number },
+): number {
+  const dx = b.x - a.x;
+  const dy = b.y - a.y;
+  const length = dx * dx + dy * dy;
+  const t =
+    length === 0 ? 0 : Math.max(0, Math.min(1, ((p.x - a.x) * dx + (p.y - a.y) * dy) / length));
+  return Math.hypot(p.x - (a.x + t * dx), p.y - (a.y + t * dy));
+}

package/src/charts/stock-chart/stock-model.ts

@@ -0,0 +1,167 @@
+import {
+  bollinger,
+  ema,
+  type IndicatorSeries,
+  macd,
+  rebase,
+  rsi,
+  sma,
+  vwap,
+} from "../core/indicators.js";
+import type { ChartTone } from "../core/palette.js";
+import { seriesColor } from "../core/palette.js";
+
+export interface StockBar {
+  date: Date;
+  open: number;
+  high: number;
+  low: number;
+  close: number;
+  volume?: number;
+}
+
+export type StockSeriesType =
+  | "candle"
+  | "ohlc"
+  | "line"
+  | "area"
+  | "column"
+  | "heikin-ashi"
+  | "renko";
+
+/** The types drawn as candles (the last two are transforms of the data first). */
+export function isCandleLike(type: StockSeriesType): boolean {
+  return type === "candle" || type === "heikin-ashi" || type === "renko";
+}
+
+/** Indicators drawn over the price. */
+export type StockOverlay =
+  | { type: "sma"; period: number; color?: string }
+  | { type: "ema"; period: number; color?: string }
+  | { type: "bollinger"; period?: number; deviations?: number; color?: string }
+  /** Anchored at the first visible bar. */
+  | { type: "vwap"; color?: string };
+
+/** Oscillator in the lower pane. */
+export type StockOscillator =
+  | { type: "rsi"; period?: number }
+  | { type: "macd"; fast?: number; slow?: number; signal?: number };
+
+export interface StockComparison {
+  id: string;
+  name: string;
+  /** One close per bar of `data` (same dates), null where missing. */
+  values: ReadonlyArray<number | null>;
+  color?: string;
+}
+
+export interface StockFlag {
+  date: Date | number;
+  /** One or two characters on the flag, e.g. "P". */
+  label: string;
+  /** Full text for the tooltip and screen readers. */
+  text: string;
+  tone?: ChartTone;
+}
+
+/** One line of an overlay (Bollinger has three that share an id). */
+export interface OverlayLine {
+  id: string;
+  name: string;
+  color: string;
+  values: IndicatorSeries;
+  dashed?: boolean;
+  /** Bollinger: the band between `values` (upper) and `lower`. */
+  lower?: IndicatorSeries;
+}
+
+export function overlayId(overlay: StockOverlay, index: number): string {
+  return `${overlay.type}-${index}`;
+}
+
+export function overlayName(overlay: StockOverlay): string {
+  if (overlay.type === "sma") return `SMA ${overlay.period}`;
+  if (overlay.type === "ema") return `EMA ${overlay.period}`;
+  if (overlay.type === "bollinger") {
+    return `Bollinger ${overlay.period ?? 20}, ${overlay.deviations ?? 2}`;
+  }
+  return "VWAP";
+}
+
+/** Overlay lines on the full data (warm-up before the visible window is kept). */
+export function overlayLines(
+  data: readonly StockBar[],
+  overlays: readonly StockOverlay[],
+  vwapFrom: number,
+): OverlayLine[] {
+  const closes = data.map((bar) => bar.close);
+  return overlays.map((overlay, index) => {
+    const id = overlayId(overlay, index);
+    const color = overlay.color ?? seriesColor(index + 1);
+    const name = overlayName(overlay);
+    if (overlay.type === "sma") return { id, name, color, values: sma(closes, overlay.period) };
+    if (overlay.type === "ema") return { id, name, color, values: ema(closes, overlay.period) };
+    if (overlay.type === "vwap") return { id, name, color, values: vwap(data, vwapFrom) };
+    const bands = bollinger(closes, overlay.period ?? 20, overlay.deviations ?? 2);
+    return { id, name, color, values: bands.upper, lower: bands.lower, dashed: false };
+  });
+}
+
+/** Bollinger's middle line, drawn dashed inside the band. */
+export function bollingerMiddle(data: readonly StockBar[], overlay: StockOverlay): IndicatorSeries {
+  if (overlay.type !== "bollinger") return [];
+  return bollinger(
+    data.map((bar) => bar.close),
+    overlay.period ?? 20,
+    overlay.deviations ?? 2,
+  ).middle;
+}
+
+export interface OscillatorModel {
+  type: "rsi" | "macd";
+  name: string;
+  /** RSI value or MACD line. */
+  main: IndicatorSeries;
+  signal?: IndicatorSeries;
+  histogram?: IndicatorSeries;
+}
+
+export function oscillatorModel(
+  data: readonly StockBar[],
+  oscillator: StockOscillator,
+): OscillatorModel {
+  const closes = data.map((bar) => bar.close);
+  if (oscillator.type === "rsi") {
+    const period = oscillator.period ?? 14;
+    return { type: "rsi", name: `RSI ${period}`, main: rsi(closes, period) };
+  }
+  const fast = oscillator.fast ?? 12;
+  const slow = oscillator.slow ?? 26;
+  const signal = oscillator.signal ?? 9;
+  const result = macd(closes, fast, slow, signal);
+  return {
+    type: "macd",
+    name: `MACD ${fast}, ${slow}, ${signal}`,
+    main: result.macd,
+    signal: result.signal,
+    histogram: result.histogram,
+  };
+}
+
+/** Comparison values rebased at the first visible bar that has a value. */
+export function rebaseFrom(values: ReadonlyArray<number | null>, from: number): IndicatorSeries {
+  let base = from;
+  while (base < values.length && values[base] == null) base += 1;
+  return base < values.length ? rebase(values, base) : values.map(() => null);
+}
+
+/** Same calendar day. */
+export function sameDay(a: Date | number, b: Date | number): boolean {
+  const x = new Date(a);
+  const y = new Date(b);
+  return (
+    x.getFullYear() === y.getFullYear() &&
+    x.getMonth() === y.getMonth() &&
+    x.getDate() === y.getDate()
+  );
+}