wick-charts 0.7.0 → 0.7.1

package/dist/axisRenderer.d.ts

@@ -0,0 +1,39 @@
+import type { Scale } from './hybridScale.js';
+import type { ChartAxisOptions, ChartFontOptions } from './types.js';
+/**
+ * Draws the price/time axis chrome — boundary lines, grid lines, tick
+ * labels, and the separator between stacked panes. Split out of
+ * `ChartRenderer` because none of it needs anything beyond already-resolved
+ * style options and per-call geometry (a `Scale`, a pixel rect): no
+ * series-specific, plugin-specific, or pane-identity state crosses into
+ * this class — `ChartRenderer.render()` still owns deciding *what* to draw
+ * where (the main pane vs. each indicator pane, in what order), this only
+ * owns *how* one axis actually gets drawn once told where.
+ */
+export declare class AxisRenderer {
+    private ctx;
+    private axis;
+    private font;
+    constructor(ctx: CanvasRenderingContext2D, axis: Required<ChartAxisOptions>, font: Required<ChartFontOptions>);
+    private axisFont;
+    /** The decimal precision `formatPrice` should use for a given value
+     * range — shared by this class's own tick labels and
+     * `CrosshairRenderer`'s price label so both display the same value with
+     * the same rounding. */
+    priceStep(min: number, max: number): number;
+    /**
+     * Draws one pane's right-side value axis: boundary line, horizontal grid
+     * lines, and tick labels. Used for both the main price pane and every
+     * indicator pane — `topOffset` shifts everything down by that pane's own
+     * position in the stack (0 for the main pane, which sits at the top), so
+     * `yScale` only ever has to know about its own pane-local [0, chartHeight]
+     * range and never about where that pane lives in the full canvas.
+     */
+    renderPriceAxis(priceMin: number, priceMax: number, step: number, yScale: Scale, chartWidth: number, chartHeight: number, topOffset: number): void;
+    /** The horizontal rule separating an indicator pane from whatever sits
+     * above it (the main pane, or the previous indicator pane) — the same
+     * `axis.lineColor` boundary style `renderTimeAxis` already draws between
+     * the plotting area and the time-axis strip. */
+    renderPaneSeparator(top: number, chartWidth: number): void;
+    renderTimeAxis(times: number[], startIdx: number, visibleCount: number, chartHeight: number, chartWidth: number, xForIndex: (globalIndex: number) => number): void;
+}

package/dist/axisRenderer.js

@@ -0,0 +1,94 @@
+import { formatAxisLabel, pickTickIndices } from './axis.js';
+import { formatPrice, niceTicks } from './priceAxis.js';
+/**
+ * Draws the price/time axis chrome — boundary lines, grid lines, tick
+ * labels, and the separator between stacked panes. Split out of
+ * `ChartRenderer` because none of it needs anything beyond already-resolved
+ * style options and per-call geometry (a `Scale`, a pixel rect): no
+ * series-specific, plugin-specific, or pane-identity state crosses into
+ * this class — `ChartRenderer.render()` still owns deciding *what* to draw
+ * where (the main pane vs. each indicator pane, in what order), this only
+ * owns *how* one axis actually gets drawn once told where.
+ */
+export class AxisRenderer {
+    constructor(ctx, axis, font) {
+        this.ctx = ctx;
+        this.axis = axis;
+        this.font = font;
+    }
+    axisFont() {
+        return `${this.font.axisSize}px ${this.font.family}`;
+    }
+    /** The decimal precision `formatPrice` should use for a given value
+     * range — shared by this class's own tick labels and
+     * `CrosshairRenderer`'s price label so both display the same value with
+     * the same rounding. */
+    priceStep(min, max) {
+        const ticks = niceTicks(min, max, this.axis.priceTickCount);
+        return ticks.length > 1 ? ticks[1] - ticks[0] : 0;
+    }
+    /**
+     * Draws one pane's right-side value axis: boundary line, horizontal grid
+     * lines, and tick labels. Used for both the main price pane and every
+     * indicator pane — `topOffset` shifts everything down by that pane's own
+     * position in the stack (0 for the main pane, which sits at the top), so
+     * `yScale` only ever has to know about its own pane-local [0, chartHeight]
+     * range and never about where that pane lives in the full canvas.
+     */
+    renderPriceAxis(priceMin, priceMax, step, yScale, chartWidth, chartHeight, topOffset) {
+        const { ctx, axis } = this;
+        const ticks = niceTicks(priceMin, priceMax, axis.priceTickCount);
+        ctx.strokeStyle = axis.lineColor;
+        ctx.beginPath();
+        ctx.moveTo(chartWidth + 0.5, topOffset);
+        ctx.lineTo(chartWidth + 0.5, topOffset + chartHeight);
+        ctx.stroke();
+        ctx.font = this.axisFont();
+        ctx.textAlign = 'left';
+        ctx.textBaseline = 'middle';
+        for (const value of ticks) {
+            const localY = yScale.map(value);
+            if (localY < 0 || localY > chartHeight)
+                continue;
+            const y = topOffset + localY;
+            ctx.strokeStyle = axis.gridLineColor;
+            ctx.beginPath();
+            ctx.moveTo(0, y + 0.5);
+            ctx.lineTo(chartWidth, y + 0.5);
+            ctx.stroke();
+            ctx.fillStyle = axis.textColor;
+            ctx.fillText(formatPrice(value, step), chartWidth + 6, y);
+        }
+    }
+    /** The horizontal rule separating an indicator pane from whatever sits
+     * above it (the main pane, or the previous indicator pane) — the same
+     * `axis.lineColor` boundary style `renderTimeAxis` already draws between
+     * the plotting area and the time-axis strip. */
+    renderPaneSeparator(top, chartWidth) {
+        const { ctx, axis } = this;
+        ctx.strokeStyle = axis.lineColor;
+        ctx.beginPath();
+        ctx.moveTo(0, top + 0.5);
+        ctx.lineTo(chartWidth, top + 0.5);
+        ctx.stroke();
+    }
+    renderTimeAxis(times, startIdx, visibleCount, chartHeight, chartWidth, xForIndex) {
+        const { ctx, axis } = this;
+        const visibleTimes = times.slice(startIdx, startIdx + visibleCount);
+        const spanSeconds = visibleTimes[visibleTimes.length - 1] - visibleTimes[0];
+        ctx.strokeStyle = axis.lineColor;
+        ctx.beginPath();
+        ctx.moveTo(0, chartHeight + 0.5);
+        ctx.lineTo(chartWidth, chartHeight + 0.5);
+        ctx.stroke();
+        ctx.fillStyle = axis.textColor;
+        ctx.font = this.axisFont();
+        ctx.textAlign = 'center';
+        ctx.textBaseline = 'top';
+        for (const localIndex of pickTickIndices(visibleCount, axis.timeMaxTicks)) {
+            const x = xForIndex(startIdx + localIndex);
+            const label = formatAxisLabel(visibleTimes[localIndex], spanSeconds);
+            ctx.fillText(label, x, chartHeight + 6);
+        }
+    }
+}

package/dist/binarySearch.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Binary search over an ascending-sorted number array — extracted out of
+ * `WickChart` since it's pure array math with no dependency on chart state,
+ * used by `setVisibleTimeRange` to resolve a time to its index.
+ */
+/** First index in `values` (ascending) whose value is `>= target`, or
+ * `values.length` if every value is smaller — the standard binary
+ * lower-bound, O(log n) rather than a linear scan over what can be a
+ * multi-thousand-point loaded series. */
+export declare function lowerBound(values: number[], target: number): number;
+/** First index in `values` (ascending) whose value is `> target`, or
+ * `values.length` if none is — the exclusive end boundary for an inclusive
+ * upper bound, so a range `[lowerBound(from), upperBound(to))` includes
+ * every value in `[from, to]` inclusive on both ends. */
+export declare function upperBound(values: number[], target: number): number;

package/dist/binarySearch.js

@@ -0,0 +1,37 @@
+/**
+ * Binary search over an ascending-sorted number array — extracted out of
+ * `WickChart` since it's pure array math with no dependency on chart state,
+ * used by `setVisibleTimeRange` to resolve a time to its index.
+ */
+/** First index in `values` (ascending) whose value is `>= target`, or
+ * `values.length` if every value is smaller — the standard binary
+ * lower-bound, O(log n) rather than a linear scan over what can be a
+ * multi-thousand-point loaded series. */
+export function lowerBound(values, target) {
+    let lo = 0;
+    let hi = values.length;
+    while (lo < hi) {
+        const mid = (lo + hi) >>> 1;
+        if (values[mid] < target)
+            lo = mid + 1;
+        else
+            hi = mid;
+    }
+    return lo;
+}
+/** First index in `values` (ascending) whose value is `> target`, or
+ * `values.length` if none is — the exclusive end boundary for an inclusive
+ * upper bound, so a range `[lowerBound(from), upperBound(to))` includes
+ * every value in `[from, to]` inclusive on both ends. */
+export function upperBound(values, target) {
+    let lo = 0;
+    let hi = values.length;
+    while (lo < hi) {
+        const mid = (lo + hi) >>> 1;
+        if (values[mid] <= target)
+            lo = mid + 1;
+        else
+            hi = mid;
+    }
+    return lo;
+}

package/dist/crosshairRenderer.d.ts

@@ -0,0 +1,60 @@
+import type { ChartCrosshairOptions, ChartFontOptions, ChartLegendOptions } from './types.js';
+/** Everything one frame's hover crosshair/legend needs — computed by
+ * `ChartRenderer.render()` (which owns the hovered point, the active
+ * series, and its style) and handed in as plain data so this class stays
+ * generic-free and series-agnostic. `legendParts` is already the result of
+ * `seriesDefinition.formatLegend?.(point, style)` — this class only lays
+ * out and draws whatever strings it's given. */
+export interface CrosshairRenderInput {
+    x: number;
+    timeSeconds: number;
+    hoverY: number | null;
+    valueMin: number;
+    valueMax: number;
+    priceStep: number;
+    chartWidth: number;
+    chartHeight: number;
+    /** Full pane-stack height — the dashed vertical line spans this, not
+     * just `chartHeight` (the main pane's own), so a hovered candle lines up
+     * across every indicator pane below it. */
+    stackHeight: number;
+    invertValueAxis: boolean;
+    legendParts: string[];
+    /** The canvas's own backing-store width — needed only to clamp the
+     * time-axis label chip so it never runs off the right edge. */
+    canvasWidth: number;
+}
+/**
+ * Draws the hover crosshair (dashed lines), its price/time label chips,
+ * and the OHLC-style legend tooltip. Split out of `ChartRenderer` for the
+ * same reason `AxisRenderer` was: everything it needs arrives as
+ * already-resolved style options plus one frame's worth of plain data
+ * (`CrosshairRenderInput`) — no series generic, no plugin state.
+ */
+export declare class CrosshairRenderer {
+    private ctx;
+    private crosshair;
+    private legend;
+    private font;
+    private priceAxisWidth;
+    constructor(ctx: CanvasRenderingContext2D, crosshair: Required<ChartCrosshairOptions>, legend: Required<ChartLegendOptions>, font: Required<ChartFontOptions>, priceAxisWidth: number);
+    private axisFont;
+    private legendFont;
+    render(input: CrosshairRenderInput): void;
+    /** The OHLC(+volume) tooltip — floats near the hovered pixel like a
+     * speech bubble, one line per part, rather than a fixed banner glued to
+     * a corner of the canvas. Offset up-and-right of the cursor/finger by
+     * `legend.cursorGap` and clamped to both chart edges so it never runs
+     * off-screen, including when there's no `hoverY` to anchor to (a series
+     * with no primary value still gets a legend, just pinned near the top
+     * at the hovered column). */
+    private renderHoverTooltip;
+    /** The highlighted price-axis label that follows the crosshair's
+     * horizontal line — drawn over `AxisRenderer`'s own tick labels so the
+     * hovered value reads clearly even where it lands between two ticks. */
+    private renderPriceLabelChip;
+    /** The highlighted time-axis label under the crosshair's vertical line.
+     * Clamped so its background chip stays fully on-screen even when the
+     * hovered point sits at the very first or last visible index. */
+    private renderTimeLabelChip;
+}

package/dist/crosshairRenderer.js

@@ -0,0 +1,121 @@
+import { formatHoverTime } from './axis.js';
+import { formatPrice } from './priceAxis.js';
+import { pixelToValue } from './valueAxis.js';
+/**
+ * Draws the hover crosshair (dashed lines), its price/time label chips,
+ * and the OHLC-style legend tooltip. Split out of `ChartRenderer` for the
+ * same reason `AxisRenderer` was: everything it needs arrives as
+ * already-resolved style options plus one frame's worth of plain data
+ * (`CrosshairRenderInput`) — no series generic, no plugin state.
+ */
+export class CrosshairRenderer {
+    constructor(ctx, crosshair, legend, font, priceAxisWidth) {
+        this.ctx = ctx;
+        this.crosshair = crosshair;
+        this.legend = legend;
+        this.font = font;
+        this.priceAxisWidth = priceAxisWidth;
+    }
+    axisFont() {
+        return `${this.font.axisSize}px ${this.font.family}`;
+    }
+    legendFont() {
+        return `${this.font.legendSize}px ${this.font.family}`;
+    }
+    render(input) {
+        const { x, timeSeconds, hoverY, valueMin, valueMax, priceStep, chartWidth, chartHeight, stackHeight, invertValueAxis, legendParts, canvasWidth, } = input;
+        const { ctx, crosshair } = this;
+        ctx.save();
+        ctx.strokeStyle = crosshair.lineColor;
+        ctx.setLineDash([4, 4]);
+        // Spans the whole pane stack (not just the main pane's own
+        // chartHeight) so hovering a candle lines up with the same column
+        // across every indicator pane below it — see `stackHeight`'s own doc
+        // comment for why the horizontal line/legend don't follow suit.
+        ctx.beginPath();
+        ctx.moveTo(x, 0);
+        ctx.lineTo(x, stackHeight);
+        ctx.stroke();
+        // The horizontal line follows the actual cursor/finger position, not
+        // any property of the hovered point — pinning it to (say) the candle's
+        // close would leave it motionless while the pointer moves anywhere
+        // within that same candle's column, which reads as broken/stuck rather
+        // than as a crosshair. Only drawn while the pointer is actually inside
+        // the chart's vertical extent, same as AxisRenderer's tick-skip logic.
+        const priceLineVisible = hoverY !== null && hoverY >= 0 && hoverY <= chartHeight;
+        if (priceLineVisible) {
+            ctx.beginPath();
+            ctx.moveTo(0, hoverY);
+            ctx.lineTo(chartWidth, hoverY);
+            ctx.stroke();
+        }
+        ctx.restore();
+        if (priceLineVisible) {
+            // Exact inverse of the value->y mapping createScale set up for this
+            // frame — same helper (and same invertValueAxis flag) as
+            // PluginRenderApi.valueForY, see src/valueAxis.ts.
+            const value = pixelToValue(hoverY, valueMin, valueMax, chartHeight, invertValueAxis);
+            this.renderPriceLabelChip(formatPrice(value, priceStep), hoverY, chartWidth);
+        }
+        this.renderTimeLabelChip(formatHoverTime(timeSeconds), x, chartHeight, canvasWidth);
+        if (legendParts.length === 0)
+            return;
+        this.renderHoverTooltip(legendParts, x, hoverY, chartWidth, chartHeight);
+    }
+    /** The OHLC(+volume) tooltip — floats near the hovered pixel like a
+     * speech bubble, one line per part, rather than a fixed banner glued to
+     * a corner of the canvas. Offset up-and-right of the cursor/finger by
+     * `legend.cursorGap` and clamped to both chart edges so it never runs
+     * off-screen, including when there's no `hoverY` to anchor to (a series
+     * with no primary value still gets a legend, just pinned near the top
+     * at the hovered column). */
+    renderHoverTooltip(lines, x, hoverY, chartWidth, chartHeight) {
+        const { ctx, font, legend } = this;
+        ctx.font = this.legendFont();
+        ctx.textAlign = 'left';
+        ctx.textBaseline = 'top';
+        const lineHeight = font.legendSize + 4;
+        const textWidth = Math.max(...lines.map((line) => ctx.measureText(line).width));
+        const boxWidth = textWidth + legend.paddingX * 2;
+        const boxHeight = lines.length * lineHeight + legend.paddingY * 2;
+        const anchorY = hoverY ?? 0;
+        const left = Math.min(Math.max(x + legend.cursorGap, 0), Math.max(0, chartWidth - boxWidth));
+        const top = Math.min(Math.max(anchorY - boxHeight - legend.cursorGap, 0), Math.max(0, chartHeight - boxHeight));
+        ctx.fillStyle = legend.background;
+        ctx.fillRect(left, top, boxWidth, boxHeight);
+        ctx.fillStyle = legend.textColor;
+        lines.forEach((line, i) => {
+            ctx.fillText(line, left + legend.paddingX, top + legend.paddingY + i * lineHeight);
+        });
+    }
+    /** The highlighted price-axis label that follows the crosshair's
+     * horizontal line — drawn over `AxisRenderer`'s own tick labels so the
+     * hovered value reads clearly even where it lands between two ticks. */
+    renderPriceLabelChip(text, y, chartWidth) {
+        const { ctx, font, crosshair } = this;
+        ctx.font = this.axisFont();
+        const chipHeight = font.axisSize + crosshair.labelPaddingY * 2;
+        ctx.fillStyle = crosshair.labelBackground;
+        ctx.fillRect(chartWidth, y - chipHeight / 2, this.priceAxisWidth, chipHeight);
+        ctx.fillStyle = crosshair.labelTextColor;
+        ctx.textAlign = 'left';
+        ctx.textBaseline = 'middle';
+        ctx.fillText(text, chartWidth + crosshair.labelPaddingX, y);
+    }
+    /** The highlighted time-axis label under the crosshair's vertical line.
+     * Clamped so its background chip stays fully on-screen even when the
+     * hovered point sits at the very first or last visible index. */
+    renderTimeLabelChip(text, x, chartHeight, canvasWidth) {
+        const { ctx, font, crosshair } = this;
+        ctx.font = this.axisFont();
+        const chipWidth = ctx.measureText(text).width + crosshair.labelPaddingX * 2;
+        const chipHeight = font.axisSize + crosshair.labelPaddingY * 2;
+        const chipLeft = Math.min(Math.max(x - chipWidth / 2, 0), canvasWidth - chipWidth);
+        ctx.fillStyle = crosshair.labelBackground;
+        ctx.fillRect(chipLeft, chartHeight, chipWidth, chipHeight);
+        ctx.fillStyle = crosshair.labelTextColor;
+        ctx.textAlign = 'left';
+        ctx.textBaseline = 'top';
+        ctx.fillText(text, chipLeft + crosshair.labelPaddingX, chartHeight + crosshair.labelPaddingY);
+    }
+}

package/dist/index.js

@@ -1,3 +1,4 @@
+import { lowerBound, upperBound } from './binarySearch.js';
 import { mergeSeriesPoints } from './mergeSeries.js';
 import { computePaneLayout } from './paneLayout.js';
 import { ChartRenderer } from './renderer.js';
@@ -45,39 +46,6 @@ const LONG_PRESS_MS = 350;
  * as a real drag, not a hold — cancels the pending long-press timer so a
  * fast pan gesture never flips into scrub mid-motion. */
 const LONG_PRESS_MOVE_TOLERANCE_PX = 10;
-/** First index in `times` (ascending) whose value is `>= target`, or
- * `times.length` if every value is smaller — the standard binary
- * lower-bound, O(log n) rather than a linear scan over what can be a
- * multi-thousand-point loaded series. Used by `setVisibleTimeRange` to
- * resolve a `from` time to its start index. */
-function lowerBound(times, target) {
-    let lo = 0;
-    let hi = times.length;
-    while (lo < hi) {
-        const mid = (lo + hi) >>> 1;
-        if (times[mid] < target)
-            lo = mid + 1;
-        else
-            hi = mid;
-    }
-    return lo;
-}
-/** First index in `times` (ascending) whose value is `> target`, or
- * `times.length` if none is — the exclusive end boundary for a `to` time,
- * so a range `[lowerBound(from), upperBound(to))` includes every point
- * with a time in `[from, to]` inclusive on both ends. */
-function upperBound(times, target) {
-    let lo = 0;
-    let hi = times.length;
-    while (lo < hi) {
-        const mid = (lo + hi) >>> 1;
-        if (times[mid] <= target)
-            lo = mid + 1;
-        else
-            hi = mid;
-    }
-    return lo;
-}
 /**
  * Interactive chart: drag to pan, wheel to zoom, drag the price-axis strip
  * to rescale it, hover a point for a legend. What gets plotted (candles

package/dist/renderer.d.ts

@@ -12,8 +12,8 @@ export interface RenderInput<TPoint extends SeriesPoint> {
     hoverIndex: number | null;
     /** Device-pixel y of the pointer/finger that produced `hoverIndex`, or
      * null. Drives the crosshair's horizontal line directly — see
-     * `renderCrosshairAndLegend` for why that has to be the raw cursor
-     * position rather than any property of the hovered point itself. */
+     * `CrosshairRenderer` for why that has to be the raw cursor position
+     * rather than any property of the hovered point itself. */
     hoverY: number | null;
     plugins: ChartPlugin<TPoint>[];
     /** Indicator/oscillator panes declared via `WickChart.addPane`, resolved
@@ -23,15 +23,22 @@ export interface RenderInput<TPoint extends SeriesPoint> {
     panes: ResolvedPaneOptions[];
 }
 /**
- * The chart engine's renderer: canvas lifecycle, axes, crosshair, and
- * plugin drawing are all generic — none of it knows what kind of series is
- * on screen. The one series-specific seam is `seriesDefinition`, injected
- * at construction (see `src/series/types.ts`); everything above delegates
- * to it for value-range computation, point drawing, and legend text.
+ * The chart engine's renderer: owns the canvas lifecycle and orchestrates
+ * one frame — deciding what data is visible, computing scales, and calling
+ * out to collaborators for the actual pixel-pushing. None of it knows what
+ * kind of series is on screen: the one series-specific seam is
+ * `seriesDefinition`, injected at construction (see `src/series/types.ts`).
  * Stateless per call otherwise — all pan/zoom/hover state lives in
  * `Viewport` and `WickChart`; this class only turns a snapshot of that
  * state into pixels.
  *
+ * Axis chrome and the hover crosshair/legend are drawn by two collaborators
+ * (`AxisRenderer`, `CrosshairRenderer`) rather than methods on this class —
+ * both take only already-resolved style options and per-call geometry, no
+ * series generic or plugin state, so splitting them out keeps this file
+ * focused on orchestration (what gets drawn, in what order, with what
+ * scale) rather than mixing in how each individual chrome element paints.
+ *
  * Every visual constant below (fonts, axis sizing/coloring, crosshair
  * coloring/padding, legend color) is resolved once at construction from
  * `WickChartOptions.font`/`axis`/`crosshair`/`legend`, each merged field
@@ -44,10 +51,13 @@ export declare class ChartRenderer<TPoint extends SeriesPoint> {
     private ctx;
     private background;
     private style;
-    private font;
+    /** Kept as its own field (unlike font/crosshair/legend, which only
+     * `AxisRenderer`/`CrosshairRenderer` need after construction) because
+     * `chartWidth`/`chartHeight`/`priceAxisWidth` below read it directly on
+     * every call, not just once at construction. */
     private axis;
-    private crosshair;
-    private legend;
+    private axisRenderer;
+    private crosshairRenderer;
     /** Unlike the style groups above, mutable after construction — see
      * `setInvertValueAxis`. A live toggle, not a one-time style choice, is
      * the whole point of this option (a "what if this series moved the
@@ -62,8 +72,6 @@ export declare class ChartRenderer<TPoint extends SeriesPoint> {
     get chartWidth(): number;
     get chartHeight(): number;
     get priceAxisWidth(): number;
-    private axisFont;
-    private legendFont;
     render(input: RenderInput<TPoint>): void;
     /**
      * Builds the `PluginRenderApi` for one pane — the main price pane or a
@@ -73,40 +81,4 @@ export declare class ChartRenderer<TPoint extends SeriesPoint> {
      * frame-ended flag, for the whole stack; see `FrameGeometry`).
      */
     private buildPluginApi;
-    /** The decimal precision `formatPrice` should use for the current price
-     * range — shared by the axis ticks and the crosshair's price label so
-     * both display the same value with the same rounding. */
-    private currentPriceStep;
-    /**
-     * Draws one pane's right-side value axis: boundary line, horizontal grid
-     * lines, and tick labels. Used for both the main price pane and every
-     * indicator pane — `topOffset` shifts everything down by that pane's own
-     * position in the stack (0 for the main pane, which sits at the top), so
-     * `yScale` only ever has to know about its own pane-local [0, chartHeight]
-     * range and never about where that pane lives in the full canvas.
-     */
-    private renderPriceAxis;
-    /** The horizontal rule separating an indicator pane from whatever sits
-     * above it (the main pane, or the previous indicator pane) — the same
-     * `axis.lineColor` boundary style `renderTimeAxis` already draws between
-     * the plotting area and the time-axis strip. */
-    private renderPaneSeparator;
-    private renderTimeAxis;
-    private renderCrosshairAndLegend;
-    /** The OHLC(+volume) tooltip — floats near the hovered pixel like a
-     * speech bubble, one line per part, rather than a fixed banner glued to
-     * a corner of the canvas. Offset up-and-right of the cursor/finger by
-     * `legend.cursorGap` and clamped to both chart edges so it never runs
-     * off-screen, including when there's no `hoverY` to anchor to (a series
-     * with no primary value still gets a legend, just pinned near the top
-     * at the hovered column). */
-    private renderHoverTooltip;
-    /** The highlighted price-axis label that follows the crosshair's
-     * horizontal line — drawn over `renderPriceAxis`'s own tick labels so the
-     * hovered value reads clearly even where it lands between two ticks. */
-    private renderPriceLabelChip;
-    /** The highlighted time-axis label under the crosshair's vertical line.
-     * Clamped so its background chip stays fully on-screen even when the
-     * hovered point sits at the very first or last visible index. */
-    private renderTimeLabelChip;
 }

package/dist/renderer.js

@@ -1,7 +1,7 @@
-import { formatAxisLabel, formatHoverTime, pickTickIndices } from './axis.js';
+import { AxisRenderer } from './axisRenderer.js';
+import { CrosshairRenderer } from './crosshairRenderer.js';
 import { createScale } from './hybridScale.js';
 import { computePaneLayout } from './paneLayout.js';
-import { formatPrice, niceTicks } from './priceAxis.js';
 import { pixelToValue, valueAxisPixelRange } from './valueAxis.js';
 const DEFAULT_BACKGROUND = 'transparent';
 const DEFAULT_FONT = {
@@ -33,15 +33,22 @@ const DEFAULT_LEGEND = {
     cursorGap: 12,
 };
 /**
- * The chart engine's renderer: canvas lifecycle, axes, crosshair, and
- * plugin drawing are all generic — none of it knows what kind of series is
- * on screen. The one series-specific seam is `seriesDefinition`, injected
- * at construction (see `src/series/types.ts`); everything above delegates
- * to it for value-range computation, point drawing, and legend text.
+ * The chart engine's renderer: owns the canvas lifecycle and orchestrates
+ * one frame — deciding what data is visible, computing scales, and calling
+ * out to collaborators for the actual pixel-pushing. None of it knows what
+ * kind of series is on screen: the one series-specific seam is
+ * `seriesDefinition`, injected at construction (see `src/series/types.ts`).
  * Stateless per call otherwise — all pan/zoom/hover state lives in
  * `Viewport` and `WickChart`; this class only turns a snapshot of that
  * state into pixels.
  *
+ * Axis chrome and the hover crosshair/legend are drawn by two collaborators
+ * (`AxisRenderer`, `CrosshairRenderer`) rather than methods on this class —
+ * both take only already-resolved style options and per-call geometry, no
+ * series generic or plugin state, so splitting them out keeps this file
+ * focused on orchestration (what gets drawn, in what order, with what
+ * scale) rather than mixing in how each individual chrome element paints.
+ *
  * Every visual constant below (fonts, axis sizing/coloring, crosshair
  * coloring/padding, legend color) is resolved once at construction from
  * `WickChartOptions.font`/`axis`/`crosshair`/`legend`, each merged field
@@ -58,11 +65,13 @@ export class ChartRenderer {
         this.ctx = ctx;
         this.background = options.background ?? DEFAULT_BACKGROUND;
         this.style = { ...seriesDefinition.defaultStyle, ...(options.style ?? {}) };
-        this.font = { ...DEFAULT_FONT, ...options.font };
         this.axis = { ...DEFAULT_AXIS, ...options.axis };
-        this.crosshair = { ...DEFAULT_CROSSHAIR, ...options.crosshair };
-        this.legend = { ...DEFAULT_LEGEND, ...options.legend };
         this.invertValueAxis = options.invertValueAxis ?? false;
+        const font = { ...DEFAULT_FONT, ...options.font };
+        const crosshair = { ...DEFAULT_CROSSHAIR, ...options.crosshair };
+        const legend = { ...DEFAULT_LEGEND, ...options.legend };
+        this.axisRenderer = new AxisRenderer(ctx, this.axis, font);
+        this.crosshairRenderer = new CrosshairRenderer(ctx, crosshair, legend, font, this.axis.priceWidth);
     }
     setInvertValueAxis(inverted) {
         this.invertValueAxis = inverted;
@@ -79,12 +88,6 @@ export class ChartRenderer {
     get priceAxisWidth() {
         return this.axis.priceWidth;
     }
-    axisFont() {
-        return `${this.font.axisSize}px ${this.font.family}`;
-    }
-    legendFont() {
-        return `${this.font.legendSize}px ${this.font.family}`;
-    }
     render(input) {
         const { ctx, canvas, background, seriesDefinition, style } = this;
         const { sorted, times, viewport, hoverIndex, hoverY, plugins, panes } = input;
@@ -166,20 +169,34 @@ export class ChartRenderer {
             finally {
                 ctx.restore();
             }
-            const priceStep = this.currentPriceStep(valueMin, valueMax);
-            this.renderPriceAxis(valueMin, valueMax, priceStep, yScale, chartWidth, chartHeight, mainRect.top);
+            const priceStep = this.axisRenderer.priceStep(valueMin, valueMax);
+            this.axisRenderer.renderPriceAxis(valueMin, valueMax, priceStep, yScale, chartWidth, chartHeight, mainRect.top);
             for (const { rect, min, max, scale } of paneScales) {
-                this.renderPaneSeparator(rect.top, chartWidth);
-                const step = this.currentPriceStep(min, max);
-                this.renderPriceAxis(min, max, step, scale, chartWidth, rect.height, rect.top);
+                this.axisRenderer.renderPaneSeparator(rect.top, chartWidth);
+                const step = this.axisRenderer.priceStep(min, max);
+                this.axisRenderer.renderPriceAxis(min, max, step, scale, chartWidth, rect.height, rect.top);
             }
-            this.renderTimeAxis(times, startIdx, visible.length, stackHeight, chartWidth, xForIndex);
+            this.axisRenderer.renderTimeAxis(times, startIdx, visible.length, stackHeight, chartWidth, xForIndex);
             if (hoverIndex !== null && hoverIndex >= startIdx && hoverIndex < endIdx) {
                 // The dashed vertical line spans the whole stack (every pane); the
                 // horizontal line, price-label chip, and OHLC legend stay scoped
                 // to the main pane only — an indicator pane's own hover readout,
                 // if it wants one, is the job of whatever plugin draws into it.
-                this.renderCrosshairAndLegend(sorted[hoverIndex], xForIndex(hoverIndex), times[hoverIndex], hoverY, valueMin, valueMax, priceStep, chartWidth, chartHeight, stackHeight);
+                const legendParts = seriesDefinition.formatLegend?.(sorted[hoverIndex], style) ?? [];
+                this.crosshairRenderer.render({
+                    x: xForIndex(hoverIndex),
+                    timeSeconds: times[hoverIndex],
+                    hoverY,
+                    valueMin,
+                    valueMax,
+                    priceStep,
+                    chartWidth,
+                    chartHeight,
+                    stackHeight,
+                    invertValueAxis: this.invertValueAxis,
+                    legendParts,
+                    canvasWidth: canvas.width,
+                });
             }
             if (plugins.length > 0) {
                 // Everything every pane's PluginRenderApi shares — only the pane's
@@ -267,172 +284,4 @@ export class ChartRenderer {
             allPoints,
         };
     }
-    /** The decimal precision `formatPrice` should use for the current price
-     * range — shared by the axis ticks and the crosshair's price label so
-     * both display the same value with the same rounding. */
-    currentPriceStep(priceMin, priceMax) {
-        const ticks = niceTicks(priceMin, priceMax, this.axis.priceTickCount);
-        return ticks.length > 1 ? ticks[1] - ticks[0] : 0;
-    }
-    /**
-     * Draws one pane's right-side value axis: boundary line, horizontal grid
-     * lines, and tick labels. Used for both the main price pane and every
-     * indicator pane — `topOffset` shifts everything down by that pane's own
-     * position in the stack (0 for the main pane, which sits at the top), so
-     * `yScale` only ever has to know about its own pane-local [0, chartHeight]
-     * range and never about where that pane lives in the full canvas.
-     */
-    renderPriceAxis(priceMin, priceMax, step, yScale, chartWidth, chartHeight, topOffset) {
-        const { ctx, axis } = this;
-        const ticks = niceTicks(priceMin, priceMax, axis.priceTickCount);
-        ctx.strokeStyle = axis.lineColor;
-        ctx.beginPath();
-        ctx.moveTo(chartWidth + 0.5, topOffset);
-        ctx.lineTo(chartWidth + 0.5, topOffset + chartHeight);
-        ctx.stroke();
-        ctx.font = this.axisFont();
-        ctx.textAlign = 'left';
-        ctx.textBaseline = 'middle';
-        for (const value of ticks) {
-            const localY = yScale.map(value);
-            if (localY < 0 || localY > chartHeight)
-                continue;
-            const y = topOffset + localY;
-            ctx.strokeStyle = axis.gridLineColor;
-            ctx.beginPath();
-            ctx.moveTo(0, y + 0.5);
-            ctx.lineTo(chartWidth, y + 0.5);
-            ctx.stroke();
-            ctx.fillStyle = axis.textColor;
-            ctx.fillText(formatPrice(value, step), chartWidth + 6, y);
-        }
-    }
-    /** The horizontal rule separating an indicator pane from whatever sits
-     * above it (the main pane, or the previous indicator pane) — the same
-     * `axis.lineColor` boundary style `renderTimeAxis` already draws between
-     * the plotting area and the time-axis strip. */
-    renderPaneSeparator(top, chartWidth) {
-        const { ctx, axis } = this;
-        ctx.strokeStyle = axis.lineColor;
-        ctx.beginPath();
-        ctx.moveTo(0, top + 0.5);
-        ctx.lineTo(chartWidth, top + 0.5);
-        ctx.stroke();
-    }
-    renderTimeAxis(times, startIdx, visibleCount, chartHeight, chartWidth, xForIndex) {
-        const { ctx, axis } = this;
-        const visibleTimes = times.slice(startIdx, startIdx + visibleCount);
-        const spanSeconds = visibleTimes[visibleTimes.length - 1] - visibleTimes[0];
-        ctx.strokeStyle = axis.lineColor;
-        ctx.beginPath();
-        ctx.moveTo(0, chartHeight + 0.5);
-        ctx.lineTo(chartWidth, chartHeight + 0.5);
-        ctx.stroke();
-        ctx.fillStyle = axis.textColor;
-        ctx.font = this.axisFont();
-        ctx.textAlign = 'center';
-        ctx.textBaseline = 'top';
-        for (const localIndex of pickTickIndices(visibleCount, axis.timeMaxTicks)) {
-            const x = xForIndex(startIdx + localIndex);
-            const label = formatAxisLabel(visibleTimes[localIndex], spanSeconds);
-            ctx.fillText(label, x, chartHeight + 6);
-        }
-    }
-    renderCrosshairAndLegend(point, x, timeSeconds, hoverY, valueMin, valueMax, priceStep, chartWidth, chartHeight, stackHeight) {
-        const { ctx, canvas, seriesDefinition, style, crosshair } = this;
-        ctx.save();
-        ctx.strokeStyle = crosshair.lineColor;
-        ctx.setLineDash([4, 4]);
-        // Spans the whole pane stack (not just the main pane's own
-        // chartHeight) so hovering a candle lines up with the same column
-        // across every indicator pane below it — see the call site's comment
-        // in `render()` for why the horizontal line/legend don't follow suit.
-        ctx.beginPath();
-        ctx.moveTo(x, 0);
-        ctx.lineTo(x, stackHeight);
-        ctx.stroke();
-        // The horizontal line follows the actual cursor/finger position, not
-        // any property of the hovered point — pinning it to (say) the candle's
-        // close would leave it motionless while the pointer moves anywhere
-        // within that same candle's column, which reads as broken/stuck rather
-        // than as a crosshair. Only drawn while the pointer is actually inside
-        // the chart's vertical extent, same as the price-axis tick-skip logic
-        // in renderPriceAxis.
-        const priceLineVisible = hoverY !== null && hoverY >= 0 && hoverY <= chartHeight;
-        if (priceLineVisible) {
-            ctx.beginPath();
-            ctx.moveTo(0, hoverY);
-            ctx.lineTo(chartWidth, hoverY);
-            ctx.stroke();
-        }
-        ctx.restore();
-        if (priceLineVisible) {
-            // Exact inverse of the value->y mapping createScale set up for this
-            // frame — same helper (and same invertValueAxis flag) as
-            // PluginRenderApi.valueForY, see src/valueAxis.ts.
-            const value = pixelToValue(hoverY, valueMin, valueMax, chartHeight, this.invertValueAxis);
-            this.renderPriceLabelChip(formatPrice(value, priceStep), hoverY, chartWidth);
-        }
-        this.renderTimeLabelChip(formatHoverTime(timeSeconds), x, chartHeight, canvas.width);
-        const parts = seriesDefinition.formatLegend?.(point, style) ?? [];
-        if (parts.length === 0)
-            return;
-        this.renderHoverTooltip(parts, x, hoverY, chartWidth, chartHeight);
-    }
-    /** The OHLC(+volume) tooltip — floats near the hovered pixel like a
-     * speech bubble, one line per part, rather than a fixed banner glued to
-     * a corner of the canvas. Offset up-and-right of the cursor/finger by
-     * `legend.cursorGap` and clamped to both chart edges so it never runs
-     * off-screen, including when there's no `hoverY` to anchor to (a series
-     * with no primary value still gets a legend, just pinned near the top
-     * at the hovered column). */
-    renderHoverTooltip(lines, x, hoverY, chartWidth, chartHeight) {
-        const { ctx, font, legend } = this;
-        ctx.font = this.legendFont();
-        ctx.textAlign = 'left';
-        ctx.textBaseline = 'top';
-        const lineHeight = font.legendSize + 4;
-        const textWidth = Math.max(...lines.map((line) => ctx.measureText(line).width));
-        const boxWidth = textWidth + legend.paddingX * 2;
-        const boxHeight = lines.length * lineHeight + legend.paddingY * 2;
-        const anchorY = hoverY ?? 0;
-        const left = Math.min(Math.max(x + legend.cursorGap, 0), Math.max(0, chartWidth - boxWidth));
-        const top = Math.min(Math.max(anchorY - boxHeight - legend.cursorGap, 0), Math.max(0, chartHeight - boxHeight));
-        ctx.fillStyle = legend.background;
-        ctx.fillRect(left, top, boxWidth, boxHeight);
-        ctx.fillStyle = legend.textColor;
-        lines.forEach((line, i) => {
-            ctx.fillText(line, left + legend.paddingX, top + legend.paddingY + i * lineHeight);
-        });
-    }
-    /** The highlighted price-axis label that follows the crosshair's
-     * horizontal line — drawn over `renderPriceAxis`'s own tick labels so the
-     * hovered value reads clearly even where it lands between two ticks. */
-    renderPriceLabelChip(text, y, chartWidth) {
-        const { ctx, font, crosshair } = this;
-        ctx.font = this.axisFont();
-        const chipHeight = font.axisSize + crosshair.labelPaddingY * 2;
-        ctx.fillStyle = crosshair.labelBackground;
-        ctx.fillRect(chartWidth, y - chipHeight / 2, this.priceAxisWidth, chipHeight);
-        ctx.fillStyle = crosshair.labelTextColor;
-        ctx.textAlign = 'left';
-        ctx.textBaseline = 'middle';
-        ctx.fillText(text, chartWidth + crosshair.labelPaddingX, y);
-    }
-    /** The highlighted time-axis label under the crosshair's vertical line.
-     * Clamped so its background chip stays fully on-screen even when the
-     * hovered point sits at the very first or last visible index. */
-    renderTimeLabelChip(text, x, chartHeight, canvasWidth) {
-        const { ctx, font, crosshair } = this;
-        ctx.font = this.axisFont();
-        const chipWidth = ctx.measureText(text).width + crosshair.labelPaddingX * 2;
-        const chipHeight = font.axisSize + crosshair.labelPaddingY * 2;
-        const chipLeft = Math.min(Math.max(x - chipWidth / 2, 0), canvasWidth - chipWidth);
-        ctx.fillStyle = crosshair.labelBackground;
-        ctx.fillRect(chipLeft, chartHeight, chipWidth, chipHeight);
-        ctx.fillStyle = crosshair.labelTextColor;
-        ctx.textAlign = 'left';
-        ctx.textBaseline = 'top';
-        ctx.fillText(text, chipLeft + crosshair.labelPaddingX, chartHeight + crosshair.labelPaddingY);
-    }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wick-charts",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "description": "An open-source financial charting library — WASM (Rust) for compute, Canvas2D for rendering.",
   "license": "MIT",
   "author": "eatnows",