@jcsoftdev/ui 0.0.0-stage → 0.1.0

package/dist/charts/stock-chart/stock-drawing-layer.js

@@ -0,0 +1,338 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { 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,
+  timeAtIndex
+} from "./stock-drawings.js";
+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)"
+};
+function xOfTime(geometry, time) {
+  return geometry.x0 + (indexAtTime(geometry.times, time) - geometry.from) * geometry.step;
+}
+function anchorAt(geometry, px, py) {
+  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) };
+}
+function hitDrawing(drawings, geometry, point) {
+  for (let i = drawings.length - 1; i >= 0; i -= 1) {
+    const drawing = drawings[i];
+    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 }) {
+  return /* @__PURE__ */ jsx(
+    "circle",
+    {
+      cx: x,
+      cy: y,
+      r: 4.5,
+      strokeWidth: 2,
+      style: { fill: "var(--surface)", stroke: "var(--ink)" }
+    }
+  );
+}
+function DrawingShape({
+  drawing,
+  geometry,
+  selected,
+  fmt,
+  draft
+}) {
+  const width = selected ? 2.5 : 1.75;
+  const dash = draft ? "4 3" : void 0;
+  if (drawing.type === "horizontal") {
+    const py = geometry.y(drawing.price);
+    return /* @__PURE__ */ jsxs("g", { ...DECORATIVE, children: [
+      /* @__PURE__ */ jsx(
+        "line",
+        {
+          x1: 0,
+          x2: geometry.innerWidth,
+          y1: py,
+          y2: py,
+          strokeWidth: width,
+          strokeDasharray: dash ?? "6 4",
+          style: { stroke: COLORS.horizontal }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "text",
+        {
+          x: 6,
+          y: py - 5,
+          className: "font-semibold text-[10.5px] tabular-nums",
+          style: { fill: COLORS.horizontal },
+          children: fmt(drawing.price)
+        }
+      )
+    ] });
+  }
+  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 /* @__PURE__ */ jsxs("g", { ...DECORATIVE, children: [
+      /* @__PURE__ */ jsx(
+        "line",
+        {
+          x1: ax,
+          y1: ay,
+          x2: bx,
+          y2: by,
+          strokeWidth: width,
+          strokeLinecap: "round",
+          strokeDasharray: dash,
+          style: { stroke: COLORS.trend }
+        }
+      ),
+      selected ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Handle, { x: ax, y: ay }),
+        /* @__PURE__ */ jsx(Handle, { x: bx, y: by })
+      ] }) : null
+    ] });
+  }
+  if (drawing.type === "range") {
+    const change = drawing.a.price ? (drawing.b.price - drawing.a.price) / Math.abs(drawing.a.price) : 0;
+    const left2 = Math.min(ax, bx);
+    const top = Math.min(ay, by);
+    return /* @__PURE__ */ jsxs("g", { ...DECORATIVE, children: [
+      /* @__PURE__ */ jsx(
+        "rect",
+        {
+          x: left2,
+          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 }
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "text",
+        {
+          x: left2 + 6,
+          y: top + 14,
+          className: "font-bold text-[10.5px] tabular-nums",
+          style: { fill: COLORS.range },
+          children: [
+            change > 0 ? "+" : "",
+            formatPercent(change)
+          ]
+        }
+      ),
+      selected ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Handle, { x: ax, y: ay }),
+        /* @__PURE__ */ jsx(Handle, { x: bx, y: by })
+      ] }) : null
+    ] });
+  }
+  const levels = fibLevels(drawing.a.price, drawing.b.price);
+  const left = Math.max(0, Math.min(ax, bx));
+  return /* @__PURE__ */ jsxs("g", { ...DECORATIVE, children: [
+    /* @__PURE__ */ jsx(
+      "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 /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx(
+          "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 }
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "text",
+          {
+            x: geometry.innerWidth - 4,
+            y: py - 4,
+            textAnchor: "end",
+            className: "font-semibold text-[10px] tabular-nums",
+            style: { fill: COLORS.fib },
+            children: [
+              level.ratio,
+              " \xB7 ",
+              fmt(level.price)
+            ]
+          }
+        )
+      ] }, level.ratio);
+    }),
+    selected ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Handle, { x: ax, y: ay }),
+      /* @__PURE__ */ jsx(Handle, { x: bx, y: by })
+    ] }) : null
+  ] });
+}
+function MeasureShape({
+  a,
+  b,
+  geometry,
+  texts
+}) {
+  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)} \xB7 ${measure.bars} ${texts.bars} \xB7 ${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 /* @__PURE__ */ jsxs("g", { ...DECORATIVE, children: [
+    /* @__PURE__ */ jsx(
+      "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 }
+      }
+    ),
+    /* @__PURE__ */ jsx("line", { x1: ax, y1: ay, x2: bx, y2: by, strokeWidth: 1.5, style: { stroke: color } }),
+    /* @__PURE__ */ jsx("rect", { x: boxX, y: boxY, width: boxWidth, height: 22, rx: 6, style: { fill: color } }),
+    /* @__PURE__ */ jsx(
+      "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)" },
+        children: label
+      }
+    )
+  ] });
+}
+let counter = 0;
+function newDrawingId() {
+  counter += 1;
+  return `d${Date.now().toString(36)}${counter}`;
+}
+function DrawingInput({
+  tool,
+  geometry,
+  left,
+  top,
+  onCreate,
+  onDone,
+  onDraft,
+  onMeasure,
+  label
+}) {
+  const start = useRef(null);
+  const local = (event) => {
+    const rect = event.currentTarget.getBoundingClientRect();
+    return { x: event.clientX - rect.left, y: event.clientY - rect.top };
+  };
+  const finish = (event, commit) => {
+    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 /* @__PURE__ */ jsx(
+    "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)
+    }
+  );
+}
+export {
+  DrawingInput,
+  DrawingShape,
+  MeasureShape,
+  anchorAt,
+  hitDrawing,
+  newDrawingId,
+  xOfTime
+};

package/dist/charts/stock-chart/stock-drawings.d.ts

@@ -0,0 +1,68 @@
+/** 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 declare const DEFAULT_STOCK_TOOLS: readonly StockTool[];
+export declare const FIB_LEVELS: readonly number[];
+/**
+ * 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 declare function indexAtTime(times: readonly number[], time: number): number;
+/** Inverse of `indexAtTime`. */
+export declare function timeAtIndex(times: readonly number[], index: number): number;
+export interface FibLevel {
+    ratio: number;
+    price: number;
+}
+/** Retracement levels between two prices: ratio 0 sits at `a`, ratio 1 at `b`. */
+export declare function fibLevels(a: number, b: number): FibLevel[];
+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 declare function measureRange(times: readonly number[], a: StockAnchor, b: StockAnchor): Measurement;
+/** Whole days in a duration. */
+export declare function durationDays(duration: number): number;
+/** Distance from point `p` to the segment `a`-`b`, in pixels. */
+export declare function distanceToSegment(p: {
+    x: number;
+    y: number;
+}, a: {
+    x: number;
+    y: number;
+}, b: {
+    x: number;
+    y: number;
+}): number;

package/dist/charts/stock-chart/stock-drawings.js

@@ -0,0 +1,74 @@
+const DEFAULT_STOCK_TOOLS = [
+  "cursor",
+  "trend",
+  "horizontal",
+  "range",
+  "fib",
+  "measure"
+];
+const FIB_LEVELS = [0, 0.236, 0.382, 0.5, 0.618, 0.786, 1];
+function indexAtTime(times, time) {
+  const last = times.length - 1;
+  if (last <= 0) return 0;
+  const first = times[0];
+  const end = times[last];
+  if (time <= first) return (time - first) / (times[1] - first || 1);
+  if (time >= end) return last + (time - end) / (end - times[last - 1] || 1);
+  let lo = 0;
+  let hi = last;
+  while (hi - lo > 1) {
+    const mid = lo + hi >> 1;
+    if (times[mid] <= time) lo = mid;
+    else hi = mid;
+  }
+  const a = times[lo];
+  const b = times[hi];
+  return lo + (time - a) / (b - a || 1);
+}
+function timeAtIndex(times, index) {
+  const last = times.length - 1;
+  if (last < 0) return 0;
+  if (last === 0) return times[0];
+  if (index <= 0) {
+    return times[0] + index * (times[1] - times[0]);
+  }
+  if (index >= last) {
+    const gap = times[last] - times[last - 1];
+    return times[last] + (index - last) * gap;
+  }
+  const lo = Math.floor(index);
+  const a = times[lo];
+  return a + (index - lo) * (times[lo + 1] - a);
+}
+function fibLevels(a, b) {
+  return FIB_LEVELS.map((ratio) => ({ ratio, price: a + (b - a) * ratio }));
+}
+function measureRange(times, a, b) {
+  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)
+  };
+}
+function durationDays(duration) {
+  return Math.round(duration / 864e5);
+}
+function distanceToSegment(p, a, b) {
+  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));
+}
+export {
+  DEFAULT_STOCK_TOOLS,
+  FIB_LEVELS,
+  distanceToSegment,
+  durationDays,
+  fibLevels,
+  indexAtTime,
+  measureRange,
+  timeAtIndex
+};

package/dist/charts/stock-chart/stock-model.d.ts

@@ -0,0 +1,87 @@
+import { type IndicatorSeries } from "../core/indicators.js";
+import type { ChartTone } 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 declare function isCandleLike(type: StockSeriesType): boolean;
+/** 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 declare function overlayId(overlay: StockOverlay, index: number): string;
+export declare function overlayName(overlay: StockOverlay): string;
+/** Overlay lines on the full data (warm-up before the visible window is kept). */
+export declare function overlayLines(data: readonly StockBar[], overlays: readonly StockOverlay[], vwapFrom: number): OverlayLine[];
+/** Bollinger's middle line, drawn dashed inside the band. */
+export declare function bollingerMiddle(data: readonly StockBar[], overlay: StockOverlay): IndicatorSeries;
+export interface OscillatorModel {
+    type: "rsi" | "macd";
+    name: string;
+    /** RSI value or MACD line. */
+    main: IndicatorSeries;
+    signal?: IndicatorSeries;
+    histogram?: IndicatorSeries;
+}
+export declare function oscillatorModel(data: readonly StockBar[], oscillator: StockOscillator): OscillatorModel;
+/** Comparison values rebased at the first visible bar that has a value. */
+export declare function rebaseFrom(values: ReadonlyArray<number | null>, from: number): IndicatorSeries;
+/** Same calendar day. */
+export declare function sameDay(a: Date | number, b: Date | number): boolean;

package/dist/charts/stock-chart/stock-model.js

@@ -0,0 +1,83 @@
+import {
+  bollinger,
+  ema,
+  macd,
+  rebase,
+  rsi,
+  sma,
+  vwap
+} from "../core/indicators.js";
+import { seriesColor } from "../core/palette.js";
+function isCandleLike(type) {
+  return type === "candle" || type === "heikin-ashi" || type === "renko";
+}
+function overlayId(overlay, index) {
+  return `${overlay.type}-${index}`;
+}
+function overlayName(overlay) {
+  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";
+}
+function overlayLines(data, overlays, vwapFrom) {
+  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 };
+  });
+}
+function bollingerMiddle(data, overlay) {
+  if (overlay.type !== "bollinger") return [];
+  return bollinger(
+    data.map((bar) => bar.close),
+    overlay.period ?? 20,
+    overlay.deviations ?? 2
+  ).middle;
+}
+function oscillatorModel(data, oscillator) {
+  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
+  };
+}
+function rebaseFrom(values, from) {
+  let base = from;
+  while (base < values.length && values[base] == null) base += 1;
+  return base < values.length ? rebase(values, base) : values.map(() => null);
+}
+function sameDay(a, b) {
+  const x = new Date(a);
+  const y = new Date(b);
+  return x.getFullYear() === y.getFullYear() && x.getMonth() === y.getMonth() && x.getDate() === y.getDate();
+}
+export {
+  bollingerMiddle,
+  isCandleLike,
+  oscillatorModel,
+  overlayId,
+  overlayLines,
+  overlayName,
+  rebaseFrom,
+  sameDay
+};