@zuttora/charts 0.0.0-stage → 0.1.0

package/dist/render/frameBuilder.d.ts

@@ -0,0 +1,12 @@
+import type { ChartState } from '../chartState.ts';
+import type { BarSource, Ctx, Frame } from './frame.ts';
+export declare const RANGE_TWEEN_MS = 150;
+export declare const CLOSE_TWEEN_MS = 180;
+export declare const SCROLL_TWEEN_MS = 250;
+export declare function sourceOf(s: ChartState): BarSource;
+export interface Built {
+    frame: Frame;
+    animating: boolean;
+    relayout: boolean;
+}
+export declare function buildFrame(s: ChartState, ctx: Ctx, animNow: number): Built;

package/dist/render/frameBuilder.js

@@ -0,0 +1,119 @@
+import { autoRange, axisTicks } from "../core/priceScale.js";
+import { priceFormatter } from "../core/format.js";
+import { INTERVAL_MS } from "../core/time.js";
+import { pickTimeLabels } from "../core/timeLabels.js";
+import { fontOf } from "./frame.js";
+import { computeLayout } from "./layout.js";
+export const RANGE_TWEEN_MS = 150;
+export const CLOSE_TWEEN_MS = 180;
+export const SCROLL_TWEEN_MS = 250;
+const bar = { o: 0, h: 0, l: 0, c: 0 };
+export function sourceOf(s) {
+    return s.options.type === 'heikinAshi' ? s.haBars : s.plainBars;
+}
+function extremes(src, from, to) {
+    let min = Infinity;
+    let max = -Infinity;
+    for (let i = from; i <= to; i++) {
+        src.at(i, bar);
+        if (bar.l < min)
+            min = bar.l;
+        if (bar.h > max)
+            max = bar.h;
+    }
+    return { min, max };
+}
+function textWidth(s, ctx, text) {
+    let w = s.textWidths.get(text);
+    if (w === undefined) {
+        w = ctx.measureText(text).width;
+        if (s.textWidths.size > 500)
+            s.textWidths.clear();
+        s.textWidths.set(text, w);
+    }
+    return w;
+}
+export function buildFrame(s, ctx, animNow) {
+    const o = s.options;
+    const theme = o.theme;
+    const reduced = o.reducedMotion;
+    const font = fontOf(theme);
+    const layout = computeLayout(s.width, s.height, s.axisWidth, 0);
+    s.vp.setPlot(layout.plotLeft, layout.plotRight);
+    s.scale.setPane(layout.mainTop, layout.mainHeight);
+    let animating = false;
+    if (s.rightAnimating) {
+        s.vp.setRightIndex(s.rightTween.value(animNow));
+        if (s.rightTween.active(animNow))
+            animating = true;
+        else
+            s.rightAnimating = false;
+    }
+    const src = sourceOf(s);
+    s.plainBars.drawnClose = s.series.forming ? s.closeTween.value(animNow) : null;
+    if (s.closeTween.active(animNow))
+        animating = true;
+    const vis = s.vp.visibleRange();
+    if (s.scale.manual) {
+        s.rangeMin.jump(s.scale.min);
+        s.rangeMax.jump(s.scale.max);
+    }
+    else if (vis) {
+        const target = autoRange(extremes(src, vis.from, vis.to), [], s.lines, o.minMove);
+        if (!s.rangeReady || reduced) {
+            s.rangeMin.jump(target.min);
+            s.rangeMax.jump(target.max);
+            s.rangeReady = true;
+        }
+        else {
+            s.rangeMin.set(target.min, animNow, RANGE_TWEEN_MS);
+            s.rangeMax.set(target.max, animNow, RANGE_TWEEN_MS);
+        }
+    }
+    if (s.rangeMin.active(animNow) || s.rangeMax.active(animNow))
+        animating = true;
+    const range = { min: s.rangeMin.value(animNow), max: s.rangeMax.value(animNow) };
+    s.scale.setRange(range);
+    const ticks = axisTicks(range, layout.mainHeight, o.minMove);
+    const fmt = priceFormatter(o.priceDecimals, o.locale);
+    ctx.font = font;
+    let widest = 0;
+    for (const p of ticks)
+        widest = Math.max(widest, textWidth(s, ctx, fmt(p)));
+    if (s.series.forming) {
+        widest = Math.max(widest, textWidth(s, ctx, fmt(s.series.forming.c)));
+        widest = Math.max(widest, textWidth(s, ctx, o.intervalMs >= INTERVAL_MS['1h'] ? '00:00:00' : '0:00'));
+    }
+    const wanted = Math.ceil(widest) + 12;
+    const relayout = wanted > s.axisWidth || wanted < s.axisWidth - 8;
+    if (relayout)
+        s.axisWidth = wanted;
+    const labelBars = [];
+    if (vis) {
+        for (let i = vis.from; i <= vis.to; i++)
+            labelBars.push({ t: s.series.timeAt(i), x: s.vp.x(i) });
+    }
+    const prevT = vis && vis.from > 0 ? s.series.timeAt(vis.from - 1) : null;
+    const timeLabels = pickTimeLabels(labelBars, prevT, o.intervalMs, o.tzOffsetMs);
+    const frame = {
+        theme,
+        layout,
+        vp: s.vp,
+        scale: s.scale,
+        series: s.series,
+        source: src,
+        type: o.type,
+        candleStyle: o.candleStyle,
+        range,
+        ticks,
+        timeLabels,
+        lines: s.lines,
+        markers: s.markers,
+        fmt,
+        font,
+        noDataText: o.labels.noData,
+        intervalMs: o.intervalMs,
+        tzOffsetMs: o.tzOffsetMs,
+    };
+    return { frame, animating, relayout };
+}

package/dist/render/layout.d.ts

@@ -0,0 +1,4 @@
+import type { Layout } from './frame.ts';
+export declare const TIME_AXIS_HEIGHT = 22;
+export declare const MIN_AXIS_WIDTH = 56;
+export declare function computeLayout(width: number, height: number, axisWidth: number, subCount: number): Layout;

package/dist/render/layout.js

@@ -0,0 +1,26 @@
+export const TIME_AXIS_HEIGHT = 22;
+export const MIN_AXIS_WIDTH = 56;
+export function computeLayout(width, height, axisWidth, subCount) {
+    const axisW = Math.max(MIN_AXIS_WIDTH, Math.ceil(axisWidth));
+    const avail = Math.max(0, height - TIME_AXIS_HEIGHT);
+    const share = width < 360 ? 0.18 : 0.22;
+    let subH = subCount > 0 ? Math.max(64, Math.round(avail * share)) : 0;
+    if (subCount * subH > avail * 0.7)
+        subH = Math.floor((avail * 0.7) / subCount);
+    const mainH = avail - subCount * subH;
+    const subs = [];
+    for (let i = 0; i < subCount; i++)
+        subs.push({ top: mainH + i * subH, height: subH });
+    return {
+        width,
+        height,
+        plotLeft: 0,
+        plotRight: Math.max(0, width - axisW),
+        mainTop: 0,
+        mainHeight: mainH,
+        axisWidth: axisW,
+        timeTop: avail,
+        timeHeight: TIME_AXIS_HEIGHT,
+        subs,
+    };
+}

package/dist/render/paintFrame.d.ts

@@ -0,0 +1,11 @@
+import type { ChartState } from '../chartState.ts';
+import type { Frame } from './frame.ts';
+import type { Flags } from './scheduler.ts';
+export interface PaintTarget {
+    mainCanvas: HTMLCanvasElement;
+    overlayCanvas: HTMLCanvasElement;
+    dpr(): number;
+    frameBuilt(frame: Frame): void;
+    afterDraw(): void;
+}
+export declare function paintFrame(s: ChartState, t: PaintTarget, flags: Flags, now: number): boolean;

package/dist/render/paintFrame.js

@@ -0,0 +1,30 @@
+import { fitCanvas } from "./canvas.js";
+import { drawCrosshair } from "./drawCrosshair.js";
+import { drawLastPrice, PULSE_MS } from "./drawLastPrice.js";
+import { drawMain } from "./drawMain.js";
+import { buildFrame } from "./frameBuilder.js";
+export function paintFrame(s, t, flags, now) {
+    if (s.width <= 0 || s.height <= 0)
+        return false;
+    const mainCtx = fitCanvas(t.mainCanvas, s.width, s.height, t.dpr());
+    const built = buildFrame(s, mainCtx, now);
+    t.frameBuilt(built.frame);
+    if (flags.main || built.animating || built.relayout)
+        drawMain(mainCtx, built.frame);
+    const overlayCtx = fitCanvas(t.overlayCanvas, s.width, s.height, t.dpr());
+    overlayCtx.clearRect(0, 0, s.width, s.height);
+    s.pulses = s.pulses.filter((p) => now - p < PULSE_MS);
+    if (s.series.forming) {
+        drawLastPrice(overlayCtx, built.frame, {
+            close: s.closeTween.value(now),
+            wallNow: s.options.now(),
+            animNow: now,
+            pulses: s.pulses,
+            reducedMotion: s.options.reducedMotion,
+        });
+    }
+    if (s.crosshair)
+        drawCrosshair(overlayCtx, built.frame, s.crosshair);
+    t.afterDraw();
+    return built.animating || built.relayout || s.pulses.length > 0;
+}

package/dist/render/scheduler.d.ts

@@ -0,0 +1,17 @@
+export type Layer = 'main' | 'overlay';
+export interface Flags {
+    main: boolean;
+    overlay: boolean;
+}
+export declare class Scheduler {
+    private flags;
+    private handle;
+    private draw;
+    private raf;
+    private caf;
+    private stopped;
+    constructor(draw: (flags: Flags, now: number) => boolean, raf?: (cb: (now: number) => void) => number, caf?: (handle: number) => void);
+    invalidate(layer: Layer): void;
+    stop(): void;
+    private frame;
+}

package/dist/render/scheduler.js

@@ -0,0 +1,38 @@
+export class Scheduler {
+    constructor(draw, raf = (cb) => requestAnimationFrame(cb), caf = (h) => cancelAnimationFrame(h)) {
+        this.flags = { main: false, overlay: false };
+        this.handle = null;
+        this.stopped = false;
+        this.frame = (now) => {
+            this.handle = null;
+            if (this.stopped)
+                return;
+            const flags = { main: this.flags.main, overlay: this.flags.overlay };
+            this.flags.main = false;
+            this.flags.overlay = false;
+            const again = this.draw(flags, now);
+            if (again) {
+                this.flags.main = true;
+                this.flags.overlay = true;
+                if (this.handle === null)
+                    this.handle = this.raf(this.frame);
+            }
+        };
+        this.draw = draw;
+        this.raf = raf;
+        this.caf = caf;
+    }
+    invalidate(layer) {
+        if (this.stopped)
+            return;
+        this.flags[layer] = true;
+        if (this.handle === null)
+            this.handle = this.raf(this.frame);
+    }
+    stop() {
+        this.stopped = true;
+        if (this.handle !== null)
+            this.caf(this.handle);
+        this.handle = null;
+    }
+}

package/dist/render/tween.d.ts

@@ -0,0 +1,12 @@
+export declare class Tween {
+    private from;
+    private to;
+    private start;
+    private dur;
+    constructor(value: number);
+    get target(): number;
+    set(target: number, now: number, duration: number): void;
+    jump(value: number): void;
+    value(now: number): number;
+    active(now: number): boolean;
+}

package/dist/render/tween.js

@@ -0,0 +1,38 @@
+const easeOutCubic = (x) => 1 - (1 - x) ** 3;
+export class Tween {
+    constructor(value) {
+        this.start = 0;
+        this.dur = 0;
+        this.from = value;
+        this.to = value;
+    }
+    get target() {
+        return this.to;
+    }
+    set(target, now, duration) {
+        if (target === this.to)
+            return;
+        this.from = this.value(now);
+        this.to = target;
+        this.start = now;
+        this.dur = duration;
+    }
+    jump(value) {
+        this.from = value;
+        this.to = value;
+        this.dur = 0;
+    }
+    value(now) {
+        if (this.dur <= 0)
+            return this.to;
+        const p = (now - this.start) / this.dur;
+        if (p >= 1)
+            return this.to;
+        if (p <= 0)
+            return this.from;
+        return this.from + (this.to - this.from) * easeOutCubic(p);
+    }
+    active(now) {
+        return this.dur > 0 && now - this.start < this.dur;
+    }
+}

package/dist/theme.d.ts

@@ -0,0 +1,2 @@
+import type { ChartTheme } from './core/types.ts';
+export declare const zuttoraTheme: ChartTheme;

package/dist/theme.js

@@ -0,0 +1,16 @@
+export const zuttoraTheme = {
+    background: '#12100E',
+    text: '#F3EDE2',
+    textMuted: '#91887A',
+    grid: 'rgba(56, 49, 42, 0.6)',
+    up: '#3EE89A',
+    down: '#FF9640',
+    line: '#FF3D7F',
+    areaTop: 'rgba(255, 61, 127, 0.28)',
+    areaBottom: 'rgba(255, 61, 127, 0)',
+    crosshair: '#CBC2B4',
+    accent: '#FF3D7F',
+    accentText: '#12100E',
+    fontFamily: '"IBM Plex Mono", monospace',
+    fontSize: 12,
+};

package/package.json

@@ -1,6 +1,39 @@
 {
   "name": "@zuttora/charts",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "description": "Zuttora's own canvas charting package: candlesticks, square corners, no runtime dependencies.",
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": false,
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint .",
+    "test": "node --test \"test/**/*.test.mjs\"",
+    "build": "node -e \"require('fs').rmSync('dist',{recursive:true,force:true})\" && tsc -p tsconfig.build.json",
+    "size": "node scripts/size.mjs",
+    "prepublishOnly": "yarn typecheck && yarn lint && yarn test && yarn build && yarn size"
+  },
+  "engines": {
+    "node": ">=22.18"
+  },
+  "devDependencies": {
+    "@eslint/js": "^10.0.1",
+    "@types/node": "^26.6.5",
+    "eslint": "^10.13.0",
+    "typescript": "^6",
+    "typescript-eslint": "^8.71.2"
+  }
+}