@tranding-custom-chart/renderer-canvas 0.0.0-stage → 2.0.0

package/dist/renderers/grid-renderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid-renderer.d.ts","sourceRoot":"","sources":["../../src/renderers/grid-renderer.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAC;AAGpG,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,GAAG,EAAE,wBAAwB,CAAC;IACvC,QAAQ,CAAC,MAAM,EAAE,SAAS,CAAC;IAC3B,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAC/B,QAAQ,CAAC,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAC/B,QAAQ,CAAC,KAAK,EAAE,UAAU,CAAC;IAC3B,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,cAAc,CAAC,EAAE,CAAC,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC,GAAG,SAAS,CAAC;IAChE,QAAQ,CAAC,cAAc,CAAC,EAAE,CAAC,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC,GAAG,SAAS,CAAC;IAChE,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACzC,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACzC,QAAQ,CAAC,SAAS,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAC3C,gFAAgF;IAChF,QAAQ,CAAC,aAAa,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;IAC/D,mDAAmD;IACnD,QAAQ,CAAC,eAAe,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,GAAG,SAAS,CAAC;IACrD,QAAQ,CAAC,uBAAuB,CAAC,EAAE,CAAC,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC,GAAG,SAAS,CAAC;CAC1E;AAED,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,iBAAiB,GAAG,IAAI,CA+HlE"}

package/dist/renderers/grid-renderer.js

@@ -0,0 +1,103 @@
+/**
+ * @file packages/chart-renderer-canvas/src/renderers/grid-renderer.ts
+ * Crisp gridlines, axes, and tick text labels.
+ */
+import { snapLine } from '../dpi.js';
+export function renderGridAndAxes(options) {
+    const { ctx, bounds, padding, xScale, yScale, theme, dpr, xTickFormatter = (v) => v.toString(), yTickFormatter = (v) => v.toFixed(2), showXGrid = true, showYGrid = true, gridStyle = 'dashed', yAxisPosition = 'right', secondaryYScale, secondaryYTickFormatter = (v) => `${v.toFixed(1)}%`, } = options;
+    const left = padding.left;
+    const right = bounds.width - padding.right;
+    const top = padding.top;
+    const bottom = bounds.height - padding.bottom;
+    const getLineDash = (style) => {
+        switch (style) {
+            case 'solid':
+                return [];
+            case 'dotted':
+                return [1, 3];
+            case 'dashed':
+            default:
+                return [3, 3];
+        }
+    };
+    const lineDashPattern = getLineDash(gridStyle);
+    ctx.save();
+    // Primary Horizontal Grid Lines & Y-Axis Labels
+    const yTicks = yScale.ticks(6);
+    ctx.strokeStyle = theme.gridLine;
+    ctx.lineWidth = 1;
+    ctx.font = '10px monospace';
+    ctx.fillStyle = theme.textSecondary;
+    ctx.textBaseline = 'middle';
+    for (const tickVal of yTicks) {
+        const rawY = yScale.scale(tickVal);
+        if (rawY < top || rawY > bottom)
+            continue;
+        const y = snapLine(rawY, dpr);
+        if (showYGrid) {
+            ctx.beginPath();
+            ctx.setLineDash(lineDashPattern);
+            ctx.moveTo(left, y);
+            ctx.lineTo(right, y);
+            ctx.stroke();
+        }
+        const label = yTickFormatter(tickVal);
+        ctx.setLineDash([]);
+        if (yAxisPosition === 'left' || yAxisPosition === 'both') {
+            ctx.textAlign = 'right';
+            ctx.fillText(label, left - 6, y);
+        }
+        if (yAxisPosition === 'right' || (yAxisPosition === 'both' && !secondaryYScale)) {
+            ctx.textAlign = 'left';
+            ctx.fillText(label, right + 6, y);
+        }
+    }
+    // Secondary Y-Axis Labels (for Dual-Axis / Mixed Charts)
+    if (secondaryYScale && (yAxisPosition === 'both' || yAxisPosition === 'right')) {
+        const secTicks = secondaryYScale.ticks(6);
+        ctx.font = '10px monospace';
+        ctx.fillStyle = '#f59e0b'; // Distinct secondary indicator color
+        ctx.textAlign = 'left';
+        for (const tickVal of secTicks) {
+            const rawY = secondaryYScale.scale(tickVal);
+            if (rawY < top || rawY > bottom)
+                continue;
+            const y = snapLine(rawY, dpr);
+            const label = secondaryYTickFormatter(tickVal);
+            ctx.fillText(label, right + 6, y);
+        }
+    }
+    // Vertical Grid Lines & X-Axis Labels
+    const xTicks = xScale.ticks(6);
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'top';
+    for (const tickVal of xTicks) {
+        const rawX = xScale.scale(tickVal);
+        if (rawX < left || rawX > right)
+            continue;
+        const x = snapLine(rawX, dpr);
+        if (showXGrid) {
+            ctx.beginPath();
+            ctx.setLineDash(lineDashPattern);
+            ctx.moveTo(x, top);
+            ctx.lineTo(x, bottom);
+            ctx.stroke();
+        }
+        // X Axis Tick Label below the bottom axis
+        const label = xTickFormatter(tickVal);
+        ctx.setLineDash([]);
+        ctx.fillText(label, x, bottom + 6);
+    }
+    // Outer Plot Area Boundary
+    ctx.strokeStyle = theme.axisLine;
+    ctx.setLineDash([]);
+    ctx.beginPath();
+    // Bottom axis line
+    ctx.moveTo(left, snapLine(bottom, dpr));
+    ctx.lineTo(right, snapLine(bottom, dpr));
+    // Right axis line
+    ctx.moveTo(snapLine(right, dpr), top);
+    ctx.lineTo(snapLine(right, dpr), bottom);
+    ctx.stroke();
+    ctx.restore();
+}

package/dist/renderers/heatmap-renderer.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @file packages/chart-renderer-canvas/src/renderers/heatmap-renderer.ts
+ * High-performance 2D Matrix Heatmap renderer for correlation matrices, activity grids, and telemetry.
+ */
+import type { Dimension, HeatmapDatum, Padding } from '@tranding-custom-chart/core';
+export interface HeatmapRenderOptions {
+    readonly cellGap?: number | undefined;
+    readonly cellRadius?: number | undefined;
+    readonly colorLow?: string | undefined;
+    readonly colorHigh?: string | undefined;
+    readonly showLabels?: boolean | undefined;
+    readonly labelColor?: string | undefined;
+    readonly fontSize?: number | undefined;
+}
+export declare function renderHeatmap(ctx: CanvasRenderingContext2D, data: readonly HeatmapDatum[], bounds: Dimension, padding: Padding, options?: HeatmapRenderOptions): void;
+//# sourceMappingURL=heatmap-renderer.d.ts.map

package/dist/renderers/heatmap-renderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"heatmap-renderer.d.ts","sourceRoot":"","sources":["../../src/renderers/heatmap-renderer.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,6BAA6B,CAAC;AAEpF,MAAM,WAAW,oBAAoB;IACnC,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACtC,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACzC,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACvC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACxC,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC1C,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACzC,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CACxC;AAqBD,wBAAgB,aAAa,CAC3B,GAAG,EAAE,wBAAwB,EAC7B,IAAI,EAAE,SAAS,YAAY,EAAE,EAC7B,MAAM,EAAE,SAAS,EACjB,OAAO,EAAE,OAAO,EAChB,OAAO,GAAE,oBAAyB,GACjC,IAAI,CAyEN"}

package/dist/renderers/heatmap-renderer.js

@@ -0,0 +1,80 @@
+/**
+ * @file packages/chart-renderer-canvas/src/renderers/heatmap-renderer.ts
+ * High-performance 2D Matrix Heatmap renderer for correlation matrices, activity grids, and telemetry.
+ */
+function parseRgba(colorStr) {
+    if (colorStr.startsWith('#')) {
+        let hex = colorStr.slice(1);
+        if (hex.length === 3)
+            hex = hex.split('').map((c) => c + c).join('');
+        const num = parseInt(hex, 16);
+        return [(num >> 16) & 255, (num >> 8) & 255, num & 255, 1];
+    }
+    const match = colorStr.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/);
+    if (match) {
+        return [
+            parseInt(match[1], 10),
+            parseInt(match[2], 10),
+            parseInt(match[3], 10),
+            match[4] !== undefined ? parseFloat(match[4]) : 1,
+        ];
+    }
+    return [59, 130, 246, 1];
+}
+export function renderHeatmap(ctx, data, bounds, padding, options = {}) {
+    if (data.length === 0)
+        return;
+    const { cellGap = 2, cellRadius = 2, colorLow = 'rgba(30, 41, 59, 0.6)', colorHigh = 'rgba(16, 185, 129, 0.9)', showLabels = false, labelColor = '#ffffff', fontSize = 10, } = options;
+    // Extract unique X categories (columns) and Y categories (rows)
+    const cols = Array.from(new Set(data.map((d) => String(d.x))));
+    const rows = Array.from(new Set(data.map((d) => String(d.y))));
+    if (cols.length === 0 || rows.length === 0)
+        return;
+    let minVal = Infinity;
+    let maxVal = -Infinity;
+    for (const d of data) {
+        if (d.value < minVal)
+            minVal = d.value;
+        if (d.value > maxVal)
+            maxVal = d.value;
+    }
+    const valRange = maxVal > minVal ? maxVal - minVal : 1;
+    const plotWidth = bounds.width - padding.left - padding.right;
+    const plotHeight = bounds.height - padding.top - padding.bottom;
+    const colWidth = (plotWidth - (cols.length - 1) * cellGap) / cols.length;
+    const rowHeight = (plotHeight - (rows.length - 1) * cellGap) / rows.length;
+    const [r1, g1, b1, a1] = parseRgba(colorLow);
+    const [r2, g2, b2, a2] = parseRgba(colorHigh);
+    ctx.save();
+    ctx.font = `${fontSize}px system-ui, sans-serif`;
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'middle';
+    for (const datum of data) {
+        const colIdx = cols.indexOf(String(datum.x));
+        const rowIdx = rows.indexOf(String(datum.y));
+        if (colIdx === -1 || rowIdx === -1)
+            continue;
+        const x = padding.left + colIdx * (colWidth + cellGap);
+        const y = padding.top + rowIdx * (rowHeight + cellGap);
+        const t = Math.max(0, Math.min(1, (datum.value - minVal) / valRange));
+        const r = Math.round(r1 + t * (r2 - r1));
+        const g = Math.round(g1 + t * (g2 - g1));
+        const b = Math.round(b1 + t * (b2 - b1));
+        const a = a1 + t * (a2 - a1);
+        ctx.fillStyle = `rgba(${r}, ${g}, ${b}, ${a})`;
+        if (cellRadius > 0 && typeof ctx.roundRect === 'function') {
+            ctx.beginPath();
+            ctx.roundRect(x, y, colWidth, rowHeight, cellRadius);
+            ctx.fill();
+        }
+        else {
+            ctx.fillRect(x, y, colWidth, rowHeight);
+        }
+        if (showLabels && colWidth > 20 && rowHeight > 14) {
+            ctx.fillStyle = labelColor;
+            const text = datum.label ?? (Number.isInteger(datum.value) ? String(datum.value) : datum.value.toFixed(1));
+            ctx.fillText(text, x + colWidth / 2, y + rowHeight / 2);
+        }
+    }
+    ctx.restore();
+}

package/dist/renderers/high-low-renderer.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @file packages/chart-renderer-canvas/src/renderers/high-low-renderer.ts
+ * High-Low range bars renderer showing volatility and trading spread without open/close ticks.
+ */
+import type { ChartTheme, OHLCVBar, Scale } from '@tranding-custom-chart/core';
+export interface HighLowRenderOptions {
+    readonly ctx: CanvasRenderingContext2D;
+    readonly bars: readonly OHLCVBar[];
+    readonly xScale: Scale<number>;
+    readonly yScale: Scale<number>;
+    readonly theme: ChartTheme;
+    readonly dpr: number;
+    readonly startIndex?: number | undefined;
+    readonly endIndex?: number | undefined;
+    readonly customColor?: string | undefined;
+    readonly lineWidth?: number | undefined;
+}
+export declare function renderHighLowBars(options: HighLowRenderOptions): void;
+//# sourceMappingURL=high-low-renderer.d.ts.map

package/dist/renderers/high-low-renderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"high-low-renderer.d.ts","sourceRoot":"","sources":["../../src/renderers/high-low-renderer.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAC;AAG/E,MAAM,WAAW,oBAAoB;IACnC,QAAQ,CAAC,GAAG,EAAE,wBAAwB,CAAC;IACvC,QAAQ,CAAC,IAAI,EAAE,SAAS,QAAQ,EAAE,CAAC;IACnC,QAAQ,CAAC,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAC/B,QAAQ,CAAC,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAC/B,QAAQ,CAAC,KAAK,EAAE,UAAU,CAAC;IAC3B,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACzC,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACvC,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1C,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CACzC;AAED,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,oBAAoB,GAAG,IAAI,CAsCrE"}

package/dist/renderers/high-low-renderer.js

@@ -0,0 +1,28 @@
+/**
+ * @file packages/chart-renderer-canvas/src/renderers/high-low-renderer.ts
+ * High-Low range bars renderer showing volatility and trading spread without open/close ticks.
+ */
+import { snapLine } from '../dpi.js';
+export function renderHighLowBars(options) {
+    const { ctx, bars, xScale, yScale, theme, dpr, startIndex = 0, endIndex = bars.length - 1, customColor, lineWidth = 2, } = options;
+    if (bars.length === 0 || startIndex > endIndex)
+        return;
+    const start = Math.max(0, startIndex);
+    const end = Math.min(bars.length - 1, endIndex);
+    const color = customColor ?? theme.accent;
+    const slotWidth = bars.length > 1 ? Math.abs(xScale.scale(1) - xScale.scale(0)) : 10;
+    ctx.save();
+    ctx.strokeStyle = color;
+    ctx.lineWidth = slotWidth < 2 ? 0.75 : lineWidth;
+    ctx.beginPath();
+    for (let i = start; i <= end; i++) {
+        const b = bars[i];
+        const x = snapLine(xScale.scale(i), dpr);
+        const yHigh = snapLine(yScale.scale(b.high), dpr);
+        const yLow = snapLine(yScale.scale(b.low), dpr);
+        ctx.moveTo(x, yHigh);
+        ctx.lineTo(x, yLow);
+    }
+    ctx.stroke();
+    ctx.restore();
+}

package/dist/renderers/hlc-area-renderer.d.ts

@@ -0,0 +1,22 @@
+/**
+ * @file packages/chart-renderer-canvas/src/renderers/hlc-area-renderer.ts
+ * Canvas 2D renderer for HLC Area charts.
+ * Fills the shaded vertical band between High and Low prices with a crisp Close line overlay.
+ */
+import type { ChartTheme, OHLCVBar, Scale } from '@tranding-custom-chart/core';
+export interface HlcAreaRenderOptions {
+    readonly ctx: CanvasRenderingContext2D;
+    readonly bars: readonly OHLCVBar[];
+    readonly xScale: Scale<number>;
+    readonly yScale: Scale<number>;
+    readonly theme?: ChartTheme | undefined;
+    readonly bandFillColor?: string | undefined;
+    readonly closeLineColor?: string | undefined;
+    readonly closeLineWidth?: number | undefined;
+    readonly highLineColor?: string | undefined;
+    readonly lowLineColor?: string | undefined;
+    readonly startIndex?: number | undefined;
+    readonly endIndex?: number | undefined;
+}
+export declare function renderHlcArea(options: HlcAreaRenderOptions): void;
+//# sourceMappingURL=hlc-area-renderer.d.ts.map

package/dist/renderers/hlc-area-renderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hlc-area-renderer.d.ts","sourceRoot":"","sources":["../../src/renderers/hlc-area-renderer.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAC;AAE/E,MAAM,WAAW,oBAAoB;IACnC,QAAQ,CAAC,GAAG,EAAE,wBAAwB,CAAC;IACvC,QAAQ,CAAC,IAAI,EAAE,SAAS,QAAQ,EAAE,CAAC;IACnC,QAAQ,CAAC,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAC/B,QAAQ,CAAC,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAC/B,QAAQ,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;IACxC,QAAQ,CAAC,aAAa,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5C,QAAQ,CAAC,cAAc,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7C,QAAQ,CAAC,cAAc,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7C,QAAQ,CAAC,aAAa,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5C,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3C,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACzC,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CACxC;AAED,wBAAgB,aAAa,CAAC,OAAO,EAAE,oBAAoB,GAAG,IAAI,CA6EjE"}

package/dist/renderers/hlc-area-renderer.js

@@ -0,0 +1,72 @@
+/**
+ * @file packages/chart-renderer-canvas/src/renderers/hlc-area-renderer.ts
+ * Canvas 2D renderer for HLC Area charts.
+ * Fills the shaded vertical band between High and Low prices with a crisp Close line overlay.
+ */
+export function renderHlcArea(options) {
+    const { ctx, bars, xScale, yScale, bandFillColor = 'rgba(37, 99, 235, 0.18)', closeLineColor = '#2563eb', closeLineWidth = 2, highLineColor = 'rgba(37, 99, 235, 0.4)', lowLineColor = 'rgba(37, 99, 235, 0.4)', startIndex = 0, endIndex = bars.length - 1, } = options;
+    if (bars.length < 2 || startIndex > endIndex)
+        return;
+    const start = Math.max(0, startIndex);
+    const end = Math.min(bars.length - 1, endIndex);
+    ctx.save();
+    // 1. Draw High-Low Shaded Band
+    ctx.beginPath();
+    // Trace high forward
+    for (let i = start; i <= end; i++) {
+        const x = xScale.scale(i);
+        const yHigh = yScale.scale(bars[i].high);
+        if (i === start)
+            ctx.moveTo(x, yHigh);
+        else
+            ctx.lineTo(x, yHigh);
+    }
+    // Trace low backward
+    for (let i = end; i >= start; i--) {
+        const x = xScale.scale(i);
+        const yLow = yScale.scale(bars[i].low);
+        ctx.lineTo(x, yLow);
+    }
+    ctx.closePath();
+    ctx.fillStyle = bandFillColor;
+    ctx.fill();
+    // 2. High & Low Boundary Lines (subtle)
+    ctx.beginPath();
+    for (let i = start; i <= end; i++) {
+        const x = xScale.scale(i);
+        const y = yScale.scale(bars[i].high);
+        if (i === start)
+            ctx.moveTo(x, y);
+        else
+            ctx.lineTo(x, y);
+    }
+    ctx.strokeStyle = highLineColor;
+    ctx.lineWidth = 1;
+    ctx.stroke();
+    ctx.beginPath();
+    for (let i = start; i <= end; i++) {
+        const x = xScale.scale(i);
+        const y = yScale.scale(bars[i].low);
+        if (i === start)
+            ctx.moveTo(x, y);
+        else
+            ctx.lineTo(x, y);
+    }
+    ctx.strokeStyle = lowLineColor;
+    ctx.lineWidth = 1;
+    ctx.stroke();
+    // 3. Close Price Line
+    ctx.beginPath();
+    for (let i = start; i <= end; i++) {
+        const x = xScale.scale(i);
+        const y = yScale.scale(bars[i].close);
+        if (i === start)
+            ctx.moveTo(x, y);
+        else
+            ctx.lineTo(x, y);
+    }
+    ctx.strokeStyle = closeLineColor;
+    ctx.lineWidth = closeLineWidth;
+    ctx.stroke();
+    ctx.restore();
+}

package/dist/renderers/hollow-candlestick-renderer.d.ts

@@ -0,0 +1,26 @@
+/**
+ * @file packages/chart-renderer-canvas/src/renderers/hollow-candlestick-renderer.ts
+ * Hollow candlestick renderer representing both intraday and bar-to-bar price direction.
+ *
+ * Rules:
+ * - Close >= Open: Hollow body (stroked outline)
+ * - Close < Open: Solid body (filled interior)
+ * - Close >= PrevClose: Bullish Green color
+ * - Close < PrevClose: Bearish Red color
+ */
+import type { ChartTheme, OHLCVBar, Scale } from '@tranding-custom-chart/core';
+export interface HollowCandlestickRenderOptions {
+    readonly ctx: CanvasRenderingContext2D;
+    readonly bars: readonly OHLCVBar[];
+    readonly xScale: Scale<number>;
+    readonly yScale: Scale<number>;
+    readonly theme: ChartTheme;
+    readonly dpr: number;
+    readonly startIndex?: number | undefined;
+    readonly endIndex?: number | undefined;
+    readonly candleWidthRatio?: number | undefined;
+    readonly customUpColor?: string | undefined;
+    readonly customDownColor?: string | undefined;
+}
+export declare function renderHollowCandlesticks(options: HollowCandlestickRenderOptions): void;
+//# sourceMappingURL=hollow-candlestick-renderer.d.ts.map

package/dist/renderers/hollow-candlestick-renderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hollow-candlestick-renderer.d.ts","sourceRoot":"","sources":["../../src/renderers/hollow-candlestick-renderer.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAC;AAG/E,MAAM,WAAW,8BAA8B;IAC7C,QAAQ,CAAC,GAAG,EAAE,wBAAwB,CAAC;IACvC,QAAQ,CAAC,IAAI,EAAE,SAAS,QAAQ,EAAE,CAAC;IACnC,QAAQ,CAAC,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAC/B,QAAQ,CAAC,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAC/B,QAAQ,CAAC,KAAK,EAAE,UAAU,CAAC;IAC3B,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACzC,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACvC,QAAQ,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/C,QAAQ,CAAC,aAAa,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5C,QAAQ,CAAC,eAAe,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAC/C;AAED,wBAAgB,wBAAwB,CAAC,OAAO,EAAE,8BAA8B,GAAG,IAAI,CAiFtF"}

package/dist/renderers/hollow-candlestick-renderer.js

@@ -0,0 +1,71 @@
+/**
+ * @file packages/chart-renderer-canvas/src/renderers/hollow-candlestick-renderer.ts
+ * Hollow candlestick renderer representing both intraday and bar-to-bar price direction.
+ *
+ * Rules:
+ * - Close >= Open: Hollow body (stroked outline)
+ * - Close < Open: Solid body (filled interior)
+ * - Close >= PrevClose: Bullish Green color
+ * - Close < PrevClose: Bearish Red color
+ */
+import { snapLine, snapRect } from '../dpi.js';
+export function renderHollowCandlesticks(options) {
+    const { ctx, bars, xScale, yScale, theme, dpr, startIndex = 0, endIndex = bars.length - 1, candleWidthRatio = 0.7, customUpColor, customDownColor, } = options;
+    if (bars.length === 0 || startIndex > endIndex)
+        return;
+    const start = Math.max(0, startIndex);
+    const end = Math.min(bars.length - 1, endIndex);
+    let slotWidth = 8;
+    if ('stepWidth' in xScale && typeof xScale.stepWidth === 'number') {
+        slotWidth = xScale.stepWidth;
+    }
+    else if (bars.length > 1) {
+        const x0 = xScale.scale(0);
+        const x1 = xScale.scale(1);
+        slotWidth = Math.abs(x1 - x0) || 8;
+    }
+    const candleWidth = slotWidth < 2 ? Math.max(0.5, slotWidth * 0.8) : Math.max(1, slotWidth * candleWidthRatio);
+    const halfWidth = candleWidth / 2;
+    const upColor = customUpColor ?? theme.upCandle;
+    const downColor = customDownColor ?? theme.downCandle;
+    ctx.save();
+    ctx.lineWidth = slotWidth < 2 ? 0.75 : 1;
+    for (let i = start; i <= end; i++) {
+        const b = bars[i];
+        const prevClose = i > 0 ? bars[i - 1].close : b.open;
+        // Color determined by comparison with previous close
+        const isBullishColor = b.close >= prevClose;
+        const color = isBullishColor ? upColor : downColor;
+        const isHollow = b.close >= b.open;
+        const xCenter = snapLine(xScale.scale(i), dpr);
+        const yHigh = snapLine(yScale.scale(b.high), dpr);
+        const yLow = snapLine(yScale.scale(b.low), dpr);
+        const yOpen = yScale.scale(b.open);
+        const yClose = yScale.scale(b.close);
+        const bodyTop = snapRect(Math.min(yOpen, yClose), dpr);
+        const bodyBottom = snapRect(Math.max(yOpen, yClose), dpr);
+        const bodyHeight = Math.max(1, bodyBottom - bodyTop);
+        const bodyLeft = snapRect(xCenter - halfWidth, dpr);
+        ctx.strokeStyle = color;
+        ctx.fillStyle = color;
+        // Draw wicks
+        ctx.beginPath();
+        // Top wick: High to top of body
+        ctx.moveTo(xCenter, yHigh);
+        ctx.lineTo(xCenter, bodyTop);
+        // Bottom wick: Bottom of body to Low
+        ctx.moveTo(xCenter, bodyBottom);
+        ctx.lineTo(xCenter, yLow);
+        ctx.stroke();
+        // Draw body
+        if (isHollow) {
+            // Hollow body: clear interior to canvas background or fill with surface, stroke border
+            ctx.strokeRect(bodyLeft, bodyTop, candleWidth, bodyHeight);
+        }
+        else {
+            // Solid filled body
+            ctx.fillRect(bodyLeft, bodyTop, candleWidth, bodyHeight);
+        }
+    }
+    ctx.restore();
+}

package/dist/renderers/horizontal-bar-renderer.d.ts

@@ -0,0 +1,25 @@
+/**
+ * @file packages/chart-renderer-canvas/src/renderers/horizontal-bar-renderer.ts
+ * Canvas 2D renderer for Horizontal Bar charts with rounded corners and value badges.
+ */
+import type { HorizontalBarDatum, Scale } from '@tranding-custom-chart/core';
+export interface HorizontalBarOptions {
+    readonly bounds: {
+        readonly width: number;
+        readonly height: number;
+    };
+    readonly padding: {
+        readonly top: number;
+        readonly right: number;
+        readonly bottom: number;
+        readonly left: number;
+    };
+    readonly xScale: Scale<number>;
+    readonly barHeightRatio?: number | undefined;
+    readonly borderRadius?: number | undefined;
+    readonly defaultColor?: string | undefined;
+    readonly showLabels?: boolean | undefined;
+    readonly labelColor?: string | undefined;
+}
+export declare function renderHorizontalBars(ctx: CanvasRenderingContext2D, data: readonly HorizontalBarDatum[], options: HorizontalBarOptions): void;
+//# sourceMappingURL=horizontal-bar-renderer.d.ts.map

package/dist/renderers/horizontal-bar-renderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"horizontal-bar-renderer.d.ts","sourceRoot":"","sources":["../../src/renderers/horizontal-bar-renderer.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,kBAAkB,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAC;AAG7E,MAAM,WAAW,oBAAoB;IACnC,QAAQ,CAAC,MAAM,EAAE;QAAE,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IACrE,QAAQ,CAAC,OAAO,EAAE;QAAE,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IACnH,QAAQ,CAAC,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAC/B,QAAQ,CAAC,cAAc,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7C,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3C,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3C,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC1C,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAC1C;AAED,wBAAgB,oBAAoB,CAClC,GAAG,EAAE,wBAAwB,EAC7B,IAAI,EAAE,SAAS,kBAAkB,EAAE,EACnC,OAAO,EAAE,oBAAoB,GAC5B,IAAI,CA6DN"}

package/dist/renderers/horizontal-bar-renderer.js

@@ -0,0 +1,52 @@
+/**
+ * @file packages/chart-renderer-canvas/src/renderers/horizontal-bar-renderer.ts
+ * Canvas 2D renderer for Horizontal Bar charts with rounded corners and value badges.
+ */
+import { snapRect } from '../dpi.js';
+export function renderHorizontalBars(ctx, data, options) {
+    if (data.length === 0)
+        return;
+    const { bounds, padding, xScale, barHeightRatio = 0.6, borderRadius = 4, defaultColor = '#3b82f6', showLabels = true, labelColor = '#e8ebe6', } = options;
+    const innerHeight = bounds.height - padding.top - padding.bottom;
+    const slotHeight = innerHeight / data.length;
+    const barHeight = Math.max(4, Math.round(slotHeight * barHeightRatio));
+    const zeroX = xScale.scale(0);
+    ctx.save();
+    for (let i = 0; i < data.length; i++) {
+        const item = data[i];
+        const slotY = padding.top + i * slotHeight;
+        const centerY = slotY + slotHeight / 2;
+        const top = centerY - barHeight / 2;
+        const valX = xScale.scale(item.value);
+        const left = Math.min(zeroX, valX);
+        const width = Math.max(2, Math.abs(valX - zeroX));
+        const rx = snapRect(left);
+        const ry = snapRect(top);
+        const rw = snapRect(width);
+        const rh = snapRect(barHeight);
+        ctx.fillStyle = item.color ?? defaultColor;
+        ctx.beginPath();
+        if (typeof ctx.roundRect === 'function' && borderRadius > 0) {
+            ctx.roundRect(rx, ry, rw, rh, Math.min(borderRadius, rh / 2));
+        }
+        else {
+            ctx.rect(rx, ry, rw, rh);
+        }
+        ctx.fill();
+        if (showLabels) {
+            // Category label on the left margin
+            ctx.fillStyle = labelColor;
+            const fontSize = slotHeight < 22 ? 10 : slotHeight < 28 ? 11 : 12;
+            ctx.font = `500 ${fontSize}px Inter, system-ui, sans-serif`;
+            ctx.textAlign = 'right';
+            ctx.textBaseline = 'middle';
+            ctx.fillText(item.category, rx - 8, centerY);
+            // Value label to the right of the bar
+            ctx.textAlign = 'left';
+            ctx.fillStyle = labelColor;
+            const displayVal = item.label ?? item.value.toLocaleString();
+            ctx.fillText(displayVal, rx + rw + 8, centerY);
+        }
+    }
+    ctx.restore();
+}

package/dist/renderers/last-price-renderer.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @file packages/chart-renderer-canvas/src/renderers/last-price-renderer.ts
+ * Real-time last price line and dynamic Y-axis price badge.
+ */
+import type { Dimension, Padding, Scale } from '@tranding-custom-chart/core';
+export interface LastPriceRenderOptions {
+    readonly ctx: CanvasRenderingContext2D;
+    readonly lastPrice: number;
+    readonly yScale: Scale<number>;
+    readonly bounds: Dimension;
+    readonly padding: Padding;
+    readonly dpr: number;
+    readonly color?: string | undefined;
+    readonly formatter?: ((price: number) => string) | undefined;
+}
+export declare function renderLastPriceLine(options: LastPriceRenderOptions): void;
+//# sourceMappingURL=last-price-renderer.d.ts.map

package/dist/renderers/last-price-renderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"last-price-renderer.d.ts","sourceRoot":"","sources":["../../src/renderers/last-price-renderer.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAC;AAG7E,MAAM,WAAW,sBAAsB;IACrC,QAAQ,CAAC,GAAG,EAAE,wBAAwB,CAAC;IACvC,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAC/B,QAAQ,CAAC,MAAM,EAAE,SAAS,CAAC;IAC3B,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACpC,QAAQ,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC,GAAG,SAAS,CAAC;CAC9D;AAED,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,sBAAsB,GAAG,IAAI,CAyDzE"}

package/dist/renderers/last-price-renderer.js

@@ -0,0 +1,46 @@
+/**
+ * @file packages/chart-renderer-canvas/src/renderers/last-price-renderer.ts
+ * Real-time last price line and dynamic Y-axis price badge.
+ */
+import { snapLine } from '../dpi.js';
+export function renderLastPriceLine(options) {
+    const { ctx, lastPrice, yScale, bounds, padding, dpr, color = '#10b981', formatter = (p) => `₹${p.toFixed(2)}`, } = options;
+    if (!Number.isFinite(lastPrice))
+        return;
+    const yRaw = yScale.scale(lastPrice);
+    const chartTop = padding.top;
+    const chartBottom = bounds.height - padding.bottom;
+    // Do not draw if outside visible Y range
+    if (yRaw < chartTop || yRaw > chartBottom)
+        return;
+    const y = snapLine(yRaw, dpr);
+    const chartLeft = padding.left;
+    const chartRight = bounds.width - padding.right;
+    ctx.save();
+    // 1. Horizontal dashed line across chart
+    ctx.strokeStyle = color;
+    ctx.lineWidth = 1;
+    ctx.setLineDash([3, 3]);
+    ctx.beginPath();
+    ctx.moveTo(chartLeft, y);
+    ctx.lineTo(chartRight, y);
+    ctx.stroke();
+    // 2. Solid Price Badge on Right Y-Axis
+    ctx.setLineDash([]);
+    const text = formatter(lastPrice);
+    ctx.font = '10px monospace';
+    const textMetrics = ctx.measureText(text);
+    const badgeWidth = textMetrics.width + 10;
+    const badgeHeight = 16;
+    const badgeX = chartRight + 2;
+    const badgeY = y - badgeHeight / 2;
+    // Background rect
+    ctx.fillStyle = color;
+    ctx.fillRect(badgeX, badgeY, badgeWidth, badgeHeight);
+    // Text
+    ctx.fillStyle = '#ffffff';
+    ctx.textAlign = 'left';
+    ctx.textBaseline = 'middle';
+    ctx.fillText(text, badgeX + 5, y);
+    ctx.restore();
+}

package/dist/renderers/line-renderer.d.ts

@@ -0,0 +1,23 @@
+/**
+ * @file packages/chart-renderer-canvas/src/renderers/line-renderer.ts
+ * Stroked line and gradient area fill renderer.
+ */
+import type { Scale } from '@tranding-custom-chart/core';
+export interface LineRenderOptions {
+    readonly ctx: CanvasRenderingContext2D;
+    readonly points: readonly (number | null | undefined)[];
+    readonly xScale: Scale<number>;
+    readonly yScale: Scale<number>;
+    readonly color: string;
+    readonly strokeWidth?: number | undefined;
+    readonly lineDash?: readonly number[] | undefined;
+    readonly areaFill?: {
+        readonly gradientTopColor: string;
+        readonly gradientBottomColor: string;
+        readonly baselineY: number;
+    } | undefined;
+    readonly startIndex?: number | undefined;
+    readonly endIndex?: number | undefined;
+}
+export declare function renderLineSeries(options: LineRenderOptions): void;
+//# sourceMappingURL=line-renderer.d.ts.map

package/dist/renderers/line-renderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"line-renderer.d.ts","sourceRoot":"","sources":["../../src/renderers/line-renderer.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAC;AAEzD,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,GAAG,EAAE,wBAAwB,CAAC;IACvC,QAAQ,CAAC,MAAM,EAAE,SAAS,CAAC,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC,EAAE,CAAC;IACxD,QAAQ,CAAC,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAC/B,QAAQ,CAAC,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAC/B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1C,QAAQ,CAAC,QAAQ,CAAC,EAAE,SAAS,MAAM,EAAE,GAAG,SAAS,CAAC;IAClD,QAAQ,CAAC,QAAQ,CAAC,EAAE;QAClB,QAAQ,CAAC,gBAAgB,EAAE,MAAM,CAAC;QAClC,QAAQ,CAAC,mBAAmB,EAAE,MAAM,CAAC;QACrC,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;KAC5B,GAAG,SAAS,CAAC;IACd,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACzC,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CACxC;AAED,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,iBAAiB,GAAG,IAAI,CAiGjE"}