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

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

@@ -0,0 +1,16 @@
+/**
+ * @file packages/chart-renderer-canvas/src/renderers/radar-renderer.ts
+ * Canvas 2D renderer for Radar / Spider charts with multi-axis circular web layout.
+ */
+import type { RadarAxis, RadarDataset } from '@tranding-custom-chart/core';
+export interface RadarRenderOptions {
+    readonly cx: number;
+    readonly cy: number;
+    readonly radius: number;
+    readonly rings?: number | undefined;
+    readonly gridColor?: string | undefined;
+    readonly axisColor?: string | undefined;
+    readonly labelColor?: string | undefined;
+}
+export declare function renderRadar(ctx: CanvasRenderingContext2D, axes: readonly RadarAxis[], datasets: readonly RadarDataset[], options: RadarRenderOptions): void;
+//# sourceMappingURL=radar-renderer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"radar-renderer.d.ts","sourceRoot":"","sources":["../../src/renderers/radar-renderer.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAE3E,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACpC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACxC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACxC,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAC1C;AAED,wBAAgB,WAAW,CACzB,GAAG,EAAE,wBAAwB,EAC7B,IAAI,EAAE,SAAS,SAAS,EAAE,EAC1B,QAAQ,EAAE,SAAS,YAAY,EAAE,EACjC,OAAO,EAAE,kBAAkB,GAC1B,IAAI,CAmHN"}

package/dist/renderers/radar-renderer.js

@@ -0,0 +1,99 @@
+/**
+ * @file packages/chart-renderer-canvas/src/renderers/radar-renderer.ts
+ * Canvas 2D renderer for Radar / Spider charts with multi-axis circular web layout.
+ */
+export function renderRadar(ctx, axes, datasets, options) {
+    const n = axes.length;
+    if (n < 3 || options.radius <= 0)
+        return;
+    const { cx, cy, radius, rings = 4, gridColor = 'rgba(255, 255, 255, 0.12)', axisColor = 'rgba(255, 255, 255, 0.2)', labelColor = '#858e89', } = options;
+    const angleStep = (2 * Math.PI) / n;
+    const startAngle = -Math.PI / 2;
+    ctx.save();
+    // 1. Concentric Web Rings
+    ctx.strokeStyle = gridColor;
+    ctx.lineWidth = 1;
+    for (let r = 1; r <= rings; r++) {
+        const ringRadius = (radius * r) / rings;
+        ctx.beginPath();
+        for (let i = 0; i < n; i++) {
+            const angle = startAngle + i * angleStep;
+            const x = cx + Math.cos(angle) * ringRadius;
+            const y = cy + Math.sin(angle) * ringRadius;
+            if (i === 0)
+                ctx.moveTo(x, y);
+            else
+                ctx.lineTo(x, y);
+        }
+        ctx.closePath();
+        ctx.stroke();
+    }
+    // 2. Spoke Lines and Axis Labels
+    ctx.strokeStyle = axisColor;
+    ctx.fillStyle = labelColor;
+    ctx.font = '500 11px Inter, system-ui, sans-serif';
+    ctx.textBaseline = 'middle';
+    for (let i = 0; i < n; i++) {
+        const axis = axes[i];
+        const angle = startAngle + i * angleStep;
+        const endX = cx + Math.cos(angle) * radius;
+        const endY = cy + Math.sin(angle) * radius;
+        // Spoke Line
+        ctx.beginPath();
+        ctx.moveTo(cx, cy);
+        ctx.lineTo(endX, endY);
+        ctx.stroke();
+        // Axis Label
+        const labelDistance = radius + 14;
+        const labelX = cx + Math.cos(angle) * labelDistance;
+        const labelY = cy + Math.sin(angle) * labelDistance;
+        const cos = Math.cos(angle);
+        if (Math.abs(cos) < 0.1) {
+            ctx.textAlign = 'center';
+        }
+        else if (cos > 0) {
+            ctx.textAlign = 'left';
+        }
+        else {
+            ctx.textAlign = 'right';
+        }
+        ctx.fillText(axis.label, labelX, labelY);
+    }
+    // 3. Datasets Filled Polygons
+    for (const ds of datasets) {
+        const points = [];
+        for (let i = 0; i < n; i++) {
+            const axis = axes[i];
+            const val = ds.data[axis.key] ?? 0;
+            const ratio = Math.max(0, Math.min(1.0, axis.max > 0 ? val / axis.max : 0));
+            const ptRadius = radius * ratio;
+            const angle = startAngle + i * angleStep;
+            points.push({
+                x: cx + Math.cos(angle) * ptRadius,
+                y: cy + Math.sin(angle) * ptRadius,
+            });
+        }
+        if (points.length < 3)
+            continue;
+        // Fill polygon
+        ctx.beginPath();
+        ctx.moveTo(points[0].x, points[0].y);
+        for (let i = 1; i < points.length; i++) {
+            ctx.lineTo(points[i].x, points[i].y);
+        }
+        ctx.closePath();
+        ctx.fillStyle = ds.fillColor;
+        ctx.fill();
+        ctx.lineWidth = ds.strokeWidth ?? 2;
+        ctx.strokeStyle = ds.strokeColor;
+        ctx.stroke();
+        // Node markers
+        ctx.fillStyle = ds.strokeColor;
+        for (const pt of points) {
+            ctx.beginPath();
+            ctx.arc(pt.x, pt.y, 3, 0, 2 * Math.PI);
+            ctx.fill();
+        }
+    }
+    ctx.restore();
+}

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

@@ -0,0 +1,14 @@
+/**
+ * @file packages/chart-renderer-canvas/src/renderers/scatter-renderer.ts
+ * High-performance 2D Canvas renderer for Scatter Plots.
+ */
+import type { Scale, ScatterDatum } from '@tranding-custom-chart/core';
+export interface ScatterRenderOptions {
+    readonly defaultRadius?: number;
+    readonly defaultColor?: string;
+    readonly strokeColor?: string;
+    readonly strokeWidth?: number;
+    readonly shape?: 'circle' | 'square' | 'triangle';
+}
+export declare function renderScatter(ctx: CanvasRenderingContext2D, data: readonly ScatterDatum[], xScale: Scale<number>, yScale: Scale<number>, options?: ScatterRenderOptions): void;
+//# sourceMappingURL=scatter-renderer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"scatter-renderer.d.ts","sourceRoot":"","sources":["../../src/renderers/scatter-renderer.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAEvE,MAAM,WAAW,oBAAoB;IACnC,QAAQ,CAAC,aAAa,CAAC,EAAE,MAAM,CAAC;IAChC,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,CAAC;IAC/B,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAC9B,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAC9B,QAAQ,CAAC,KAAK,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,UAAU,CAAC;CACnD;AAED,wBAAgB,aAAa,CAC3B,GAAG,EAAE,wBAAwB,EAC7B,IAAI,EAAE,SAAS,YAAY,EAAE,EAC7B,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,EACrB,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,EACrB,OAAO,GAAE,oBAAyB,GACjC,IAAI,CAyCN"}

package/dist/renderers/scatter-renderer.js

@@ -0,0 +1,42 @@
+/**
+ * @file packages/chart-renderer-canvas/src/renderers/scatter-renderer.ts
+ * High-performance 2D Canvas renderer for Scatter Plots.
+ */
+export function renderScatter(ctx, data, xScale, yScale, options = {}) {
+    if (!data || data.length === 0)
+        return;
+    const defaultRadius = options.defaultRadius ?? 4;
+    const defaultColor = options.defaultColor ?? '#3b82f6';
+    const strokeColor = options.strokeColor ?? '#ffffff';
+    const strokeWidth = options.strokeWidth ?? 1.5;
+    ctx.save();
+    ctx.lineWidth = strokeWidth;
+    for (let i = 0; i < data.length; i++) {
+        const d = data[i];
+        const px = xScale.scale(d.x);
+        const py = yScale.scale(d.y);
+        const r = d.radius ?? defaultRadius;
+        const color = d.color ?? defaultColor;
+        const shape = d.shape ?? options.shape ?? 'circle';
+        ctx.fillStyle = color;
+        ctx.strokeStyle = strokeColor;
+        ctx.beginPath();
+        if (shape === 'square') {
+            ctx.rect(px - r, py - r, r * 2, r * 2);
+        }
+        else if (shape === 'triangle') {
+            ctx.moveTo(px, py - r * 1.2);
+            ctx.lineTo(px + r, py + r * 0.8);
+            ctx.lineTo(px - r, py + r * 0.8);
+            ctx.closePath();
+        }
+        else {
+            ctx.arc(px, py, r, 0, Math.PI * 2);
+        }
+        ctx.fill();
+        if (strokeWidth > 0) {
+            ctx.stroke();
+        }
+    }
+    ctx.restore();
+}

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

@@ -0,0 +1,14 @@
+/**
+ * @file packages/chart-renderer-canvas/src/renderers/stacked-bar-renderer.ts
+ * Canvas 2D renderer for Stacked Bar charts with cumulative height calculations.
+ */
+import type { StackedBarDatum, Scale } from '@tranding-custom-chart/core';
+export interface StackedBarOptions {
+    readonly xScale: Scale<number>;
+    readonly yScale: Scale<number>;
+    readonly columnWidthRatio?: number | undefined;
+    readonly defaultColors?: readonly string[] | undefined;
+    readonly borderRadius?: number | undefined;
+}
+export declare function renderStackedBars(ctx: CanvasRenderingContext2D, data: readonly StackedBarDatum[], options: StackedBarOptions): void;
+//# sourceMappingURL=stacked-bar-renderer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"stacked-bar-renderer.d.ts","sourceRoot":"","sources":["../../src/renderers/stacked-bar-renderer.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,eAAe,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAC;AAG1E,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAC/B,QAAQ,CAAC,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAC/B,QAAQ,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/C,QAAQ,CAAC,aAAa,CAAC,EAAE,SAAS,MAAM,EAAE,GAAG,SAAS,CAAC;IACvD,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAC5C;AAED,wBAAgB,iBAAiB,CAC/B,GAAG,EAAE,wBAAwB,EAC7B,IAAI,EAAE,SAAS,eAAe,EAAE,EAChC,OAAO,EAAE,iBAAiB,GACzB,IAAI,CAyDN"}

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

@@ -0,0 +1,52 @@
+/**
+ * @file packages/chart-renderer-canvas/src/renderers/stacked-bar-renderer.ts
+ * Canvas 2D renderer for Stacked Bar charts with cumulative height calculations.
+ */
+import { snapRect } from '../dpi.js';
+export function renderStackedBars(ctx, data, options) {
+    if (data.length === 0)
+        return;
+    const { xScale, yScale, columnWidthRatio = 0.6, defaultColors = ['#10b981', '#3b82f6', '#f59e0b', '#ec4899'], borderRadius = 4, } = options;
+    const x0 = xScale.scale(0);
+    const x1 = data.length > 1 ? xScale.scale(1) : x0 + 20;
+    const slotWidth = Math.max(6, Math.abs(x1 - x0));
+    const colWidth = Math.max(4, Math.round(slotWidth * columnWidthRatio));
+    ctx.save();
+    for (let i = 0; i < data.length; i++) {
+        const datum = data[i];
+        const cx = xScale.scale(i);
+        const left = cx - colWidth / 2;
+        const colors = datum.colors ?? defaultColors;
+        let cumulativeValue = 0;
+        const count = datum.values.length;
+        for (let s = 0; s < count; s++) {
+            const val = Math.max(0, datum.values[s] ?? 0);
+            const prevY = yScale.scale(cumulativeValue);
+            cumulativeValue += val;
+            const nextY = yScale.scale(cumulativeValue);
+            const top = Math.min(prevY, nextY);
+            const height = Math.abs(prevY - nextY);
+            if (height <= 0)
+                continue;
+            const rx = snapRect(left);
+            const ry = snapRect(top);
+            const rw = snapRect(colWidth);
+            const rh = snapRect(height);
+            ctx.fillStyle = colors[s % colors.length] ?? '#3b82f6';
+            ctx.beginPath();
+            const isTopSegment = s === count - 1;
+            if (isTopSegment && borderRadius > 0 && typeof ctx.roundRect === 'function') {
+                // Round only the top corners of the topmost segment
+                ctx.roundRect(rx, ry, rw, rh, [borderRadius, borderRadius, 0, 0]);
+            }
+            else if (typeof ctx.rect === 'function') {
+                ctx.rect(rx, ry, rw, rh);
+            }
+            else {
+                ctx.fillRect(rx, ry, rw, rh);
+            }
+            ctx.fill();
+        }
+    }
+    ctx.restore();
+}

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

@@ -0,0 +1,19 @@
+/**
+ * @file packages/chart-renderer-canvas/src/renderers/step-line-renderer.ts
+ * Step line (staircase) series renderer.
+ */
+import type { Scale } from '@tranding-custom-chart/core';
+export interface StepLineRenderOptions {
+    readonly ctx: CanvasRenderingContext2D;
+    readonly data: readonly (number | null)[];
+    readonly xScale: Scale<number>;
+    readonly yScale: Scale<number>;
+    readonly color?: string | undefined;
+    readonly strokeWidth?: number | undefined;
+    readonly areaFill?: {
+        readonly baselineY: number;
+        readonly fillColor: string;
+    } | undefined;
+}
+export declare function renderStepLine(options: StepLineRenderOptions): void;
+//# sourceMappingURL=step-line-renderer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"step-line-renderer.d.ts","sourceRoot":"","sources":["../../src/renderers/step-line-renderer.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAC;AAEzD,MAAM,WAAW,qBAAqB;IACpC,QAAQ,CAAC,GAAG,EAAE,wBAAwB,CAAC;IACvC,QAAQ,CAAC,IAAI,EAAE,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC;IAC1C,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,MAAM,GAAG,SAAS,CAAC;IACpC,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1C,QAAQ,CAAC,QAAQ,CAAC,EAAE;QAClB,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;QAC3B,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;KAC5B,GAAG,SAAS,CAAC;CACf;AAED,wBAAgB,cAAc,CAAC,OAAO,EAAE,qBAAqB,GAAG,IAAI,CA8DnE"}

package/dist/renderers/step-line-renderer.js

@@ -0,0 +1,52 @@
+/**
+ * @file packages/chart-renderer-canvas/src/renderers/step-line-renderer.ts
+ * Step line (staircase) series renderer.
+ */
+export function renderStepLine(options) {
+    const { ctx, data, xScale, yScale, color = '#3b82f6', strokeWidth = 2, areaFill, } = options;
+    if (data.length < 2)
+        return;
+    const validPoints = [];
+    for (let i = 0; i < data.length; i++) {
+        const v = data[i];
+        if (v !== null && v !== undefined && Number.isFinite(v)) {
+            validPoints.push({
+                x: xScale.scale(i),
+                y: yScale.scale(v),
+            });
+        }
+    }
+    if (validPoints.length < 2)
+        return;
+    ctx.save();
+    // Area Fill if requested
+    if (areaFill) {
+        ctx.fillStyle = areaFill.fillColor;
+        ctx.beginPath();
+        ctx.moveTo(validPoints[0].x, areaFill.baselineY);
+        ctx.lineTo(validPoints[0].x, validPoints[0].y);
+        for (let i = 0; i < validPoints.length - 1; i++) {
+            const p1 = validPoints[i];
+            const p2 = validPoints[i + 1];
+            ctx.lineTo(p2.x, p1.y);
+            ctx.lineTo(p2.x, p2.y);
+        }
+        ctx.lineTo(validPoints[validPoints.length - 1].x, areaFill.baselineY);
+        ctx.closePath();
+        ctx.fill();
+    }
+    // Step Stroke
+    ctx.strokeStyle = color;
+    ctx.lineWidth = strokeWidth;
+    ctx.beginPath();
+    ctx.moveTo(validPoints[0].x, validPoints[0].y);
+    for (let i = 0; i < validPoints.length - 1; i++) {
+        const p1 = validPoints[i];
+        const p2 = validPoints[i + 1];
+        // Horizontal step to p2.x, then vertical to p2.y
+        ctx.lineTo(p2.x, p1.y);
+        ctx.lineTo(p2.x, p2.y);
+    }
+    ctx.stroke();
+    ctx.restore();
+}

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

@@ -0,0 +1,18 @@
+/**
+ * @file packages/chart-renderer-canvas/src/renderers/supertrend-renderer.ts
+ * Canvas 2D renderer for the Supertrend trailing stop indicator.
+ * Draws dynamic green/red trend line with buy/sell reversal markers.
+ */
+import type { Scale, SupertrendResult, IndexTimeScale } from '@tranding-custom-chart/core';
+export interface SupertrendRenderOptions {
+    readonly ctx: CanvasRenderingContext2D;
+    readonly supertrend: SupertrendResult;
+    readonly xScale: IndexTimeScale | Scale<number>;
+    readonly yScale: Scale<number>;
+    readonly upColor?: string | undefined;
+    readonly downColor?: string | undefined;
+    readonly strokeWidth?: number | undefined;
+    readonly showReversalMarkers?: boolean | undefined;
+}
+export declare function renderSupertrend(options: SupertrendRenderOptions): void;
+//# sourceMappingURL=supertrend-renderer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"supertrend-renderer.d.ts","sourceRoot":"","sources":["../../src/renderers/supertrend-renderer.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,KAAK,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAE3F,MAAM,WAAW,uBAAuB;IACtC,QAAQ,CAAC,GAAG,EAAE,wBAAwB,CAAC;IACvC,QAAQ,CAAC,UAAU,EAAE,gBAAgB,CAAC;IACtC,QAAQ,CAAC,MAAM,EAAE,cAAc,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IAChD,QAAQ,CAAC,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAC/B,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACtC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACxC,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1C,QAAQ,CAAC,mBAAmB,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CACpD;AAED,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,uBAAuB,GAAG,IAAI,CA0FvE"}

package/dist/renderers/supertrend-renderer.js

@@ -0,0 +1,80 @@
+/**
+ * @file packages/chart-renderer-canvas/src/renderers/supertrend-renderer.ts
+ * Canvas 2D renderer for the Supertrend trailing stop indicator.
+ * Draws dynamic green/red trend line with buy/sell reversal markers.
+ */
+export function renderSupertrend(options) {
+    const { ctx, supertrend, xScale, yScale, upColor = '#16a34a', // Bullish green
+    downColor = '#dc2626', // Bearish red
+    strokeWidth = 2, showReversalMarkers = true, } = options;
+    const points = supertrend.points;
+    if (!points || points.length === 0)
+        return;
+    ctx.save();
+    ctx.lineWidth = strokeWidth;
+    ctx.lineCap = 'round';
+    ctx.lineJoin = 'round';
+    const getX = (idx) => {
+        return 'slotCenter' in xScale ? xScale.slotCenter(idx) : xScale.scale(idx);
+    };
+    const period = supertrend.period ?? 10;
+    const startIdx = Math.min(points.length, Math.max(0, period - 1));
+    if (startIdx >= points.length)
+        return;
+    // Group contiguous segments of the same direction starting after warmup
+    let currentDirection = points[startIdx].direction;
+    let segmentStartIndex = startIdx;
+    for (let i = startIdx; i <= points.length; i++) {
+        const isEnd = i === points.length;
+        const dir = !isEnd ? points[i].direction : currentDirection;
+        if (isEnd || dir !== currentDirection) {
+            // Draw segment from segmentStartIndex to i - 1
+            ctx.beginPath();
+            ctx.strokeStyle = currentDirection === 1 ? upColor : downColor;
+            for (let j = segmentStartIndex; j < i; j++) {
+                const pt = points[j];
+                const x = getX(j);
+                const y = yScale.scale(pt.supertrend);
+                if (j === segmentStartIndex) {
+                    ctx.moveTo(x, y);
+                }
+                else {
+                    ctx.lineTo(x, y);
+                }
+            }
+            ctx.stroke();
+            if (!isEnd) {
+                currentDirection = dir;
+                segmentStartIndex = i;
+            }
+        }
+    }
+    // Draw Reversal Markers (Buy = Green Up Arrow / Pill, Sell = Red Down Arrow / Pill)
+    if (showReversalMarkers) {
+        for (let i = startIdx + 1; i < points.length; i++) {
+            const pt = points[i];
+            if (pt.isReversal) {
+                const x = getX(i);
+                const y = yScale.scale(pt.supertrend);
+                const isBuy = pt.direction === 1;
+                ctx.fillStyle = isBuy ? upColor : downColor;
+                ctx.beginPath();
+                if (isBuy) {
+                    // Upward pointing triangle below price
+                    ctx.moveTo(x, y + 4);
+                    ctx.lineTo(x - 5, y + 14);
+                    ctx.lineTo(x + 5, y + 14);
+                }
+                else {
+                    // Downward pointing triangle above price
+                    ctx.moveTo(x, y - 4);
+                    ctx.lineTo(x - 5, y - 14);
+                    ctx.lineTo(x + 5, y - 14);
+                }
+                ctx.closePath();
+                ctx.fill();
+            }
+        }
+    }
+    ctx.restore();
+}

package/dist/renderers/volume-profile-renderer.d.ts

@@ -0,0 +1,25 @@
+/**
+ * @file packages/chart-renderer-canvas/src/renderers/volume-profile-renderer.ts
+ * Canvas 2D renderer for Visible Range Volume Profile (VRVP) with POC line & Value Area.
+ */
+import type { VolumeProfileResult, Scale } from '@tranding-custom-chart/core';
+export interface VolumeProfileRenderOptions {
+    readonly ctx: CanvasRenderingContext2D;
+    readonly profile: VolumeProfileResult;
+    readonly yScale: Scale<number>;
+    readonly chartWidth: number;
+    readonly chartHeight: number;
+    readonly paddingRight: number;
+    readonly paddingLeft: number;
+    readonly maxBarWidth?: number | undefined;
+    readonly alignment?: 'right' | 'left' | undefined;
+    readonly buyColor?: string | undefined;
+    readonly sellColor?: string | undefined;
+    readonly valueAreaBuyColor?: string | undefined;
+    readonly valueAreaSellColor?: string | undefined;
+    readonly pocColor?: string | undefined;
+    readonly showPOCLine?: boolean | undefined;
+    readonly showLabels?: boolean | undefined;
+}
+export declare function renderVolumeProfile(options: VolumeProfileRenderOptions): void;
+//# sourceMappingURL=volume-profile-renderer.d.ts.map

package/dist/renderers/volume-profile-renderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"volume-profile-renderer.d.ts","sourceRoot":"","sources":["../../src/renderers/volume-profile-renderer.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,mBAAmB,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAC;AAG9E,MAAM,WAAW,0BAA0B;IACzC,QAAQ,CAAC,GAAG,EAAE,wBAAwB,CAAC;IACvC,QAAQ,CAAC,OAAO,EAAE,mBAAmB,CAAC;IACtC,QAAQ,CAAC,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAC/B,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAC;IAC9B,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1C,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;IAClD,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACvC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACxC,QAAQ,CAAC,iBAAiB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAChD,QAAQ,CAAC,kBAAkB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACjD,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACvC,QAAQ,CAAC,WAAW,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC3C,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CAC3C;AAED,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,0BAA0B,GAAG,IAAI,CA0G7E"}

package/dist/renderers/volume-profile-renderer.js

@@ -0,0 +1,83 @@
+/**
+ * @file packages/chart-renderer-canvas/src/renderers/volume-profile-renderer.ts
+ * Canvas 2D renderer for Visible Range Volume Profile (VRVP) with POC line & Value Area.
+ */
+import { snapRect, snapLine } from '../dpi.js';
+export function renderVolumeProfile(options) {
+    const { ctx, profile, yScale, chartWidth, paddingRight, paddingLeft, maxBarWidth = 140, alignment = 'right', buyColor = 'rgba(22, 121, 76, 0.35)', sellColor = 'rgba(180, 35, 24, 0.35)', valueAreaBuyColor = 'rgba(34, 197, 94, 0.6)', valueAreaSellColor = 'rgba(239, 68, 68, 0.6)', pocColor = '#f59e0b', showPOCLine = true, showLabels = true, } = options;
+    if (profile.bins.length === 0 || profile.pocVolume <= 0)
+        return;
+    const rightEdge = chartWidth - paddingRight;
+    const leftEdge = paddingLeft;
+    const maxVol = profile.pocVolume;
+    ctx.save();
+    // 1. Render Volume Bins
+    for (const bin of profile.bins) {
+        if (bin.totalVolume <= 0)
+            continue;
+        const yTop = yScale.scale(bin.priceHigh);
+        const yBottom = yScale.scale(bin.priceLow);
+        const barHeight = Math.max(2, Math.abs(yBottom - yTop) - 1);
+        const y = Math.min(yTop, yBottom);
+        const totalWidth = (bin.totalVolume / maxVol) * maxBarWidth;
+        const buyWidth = (bin.buyVolume / bin.totalVolume) * totalWidth;
+        const sellWidth = totalWidth - buyWidth;
+        const currentBuyColor = bin.isValueArea ? valueAreaBuyColor : buyColor;
+        const currentSellColor = bin.isValueArea ? valueAreaSellColor : sellColor;
+        if (alignment === 'right') {
+            const startX = rightEdge - totalWidth;
+            ctx.fillStyle = currentBuyColor;
+            ctx.fillRect(snapRect(startX), snapRect(y), snapRect(buyWidth), snapRect(barHeight));
+            ctx.fillStyle = currentSellColor;
+            ctx.fillRect(snapRect(startX + buyWidth), snapRect(y), snapRect(sellWidth), snapRect(barHeight));
+        }
+        else {
+            ctx.fillStyle = currentBuyColor;
+            ctx.fillRect(snapRect(leftEdge), snapRect(y), snapRect(buyWidth), snapRect(barHeight));
+            ctx.fillStyle = currentSellColor;
+            ctx.fillRect(snapRect(leftEdge + buyWidth), snapRect(y), snapRect(sellWidth), snapRect(barHeight));
+        }
+    }
+    // 2. Render Point of Control (POC) Line across chart
+    if (showPOCLine && profile.pocPrice > 0) {
+        const pocY = snapLine(yScale.scale(profile.pocPrice));
+        ctx.strokeStyle = pocColor;
+        ctx.lineWidth = 1.5;
+        ctx.setLineDash([4, 3]);
+        ctx.beginPath();
+        ctx.moveTo(leftEdge, pocY);
+        ctx.lineTo(rightEdge, pocY);
+        ctx.stroke();
+        ctx.setLineDash([]);
+        if (showLabels) {
+            ctx.fillStyle = pocColor;
+            ctx.fillRect(rightEdge - 85, pocY - 9, 83, 18);
+            ctx.fillStyle = '#000000';
+            ctx.font = '700 10px Inter, system-ui, sans-serif';
+            ctx.textAlign = 'center';
+            ctx.textBaseline = 'middle';
+            ctx.fillText(`POC ₹${profile.pocPrice.toFixed(1)}`, rightEdge - 43, pocY);
+        }
+    }
+    // 3. Render Value Area High (VAH) & Value Area Low (VAL)
+    if (showLabels && profile.vahPrice > 0 && profile.valPrice > 0) {
+        const vahY = snapLine(yScale.scale(profile.vahPrice));
+        const valY = snapLine(yScale.scale(profile.valPrice));
+        ctx.strokeStyle = 'rgba(255, 255, 255, 0.25)';
+        ctx.lineWidth = 1;
+        ctx.setLineDash([2, 4]);
+        ctx.beginPath();
+        ctx.moveTo(rightEdge - maxBarWidth - 10, vahY);
+        ctx.lineTo(rightEdge, vahY);
+        ctx.moveTo(rightEdge - maxBarWidth - 10, valY);
+        ctx.lineTo(rightEdge, valY);
+        ctx.stroke();
+        ctx.setLineDash([]);
+        ctx.fillStyle = 'rgba(255, 255, 255, 0.65)';
+        ctx.font = '500 9px Inter, system-ui, sans-serif';
+        ctx.textAlign = 'right';
+        ctx.fillText(`VAH ₹${profile.vahPrice.toFixed(1)}`, rightEdge - 6, vahY - 5);
+        ctx.fillText(`VAL ₹${profile.valPrice.toFixed(1)}`, rightEdge - 6, valY + 10);
+    }
+    ctx.restore();
+}

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

@@ -0,0 +1,15 @@
+/**
+ * @file packages/chart-renderer-canvas/src/renderers/watermark-renderer.ts
+ * Subtle background watermark displaying symbol identity and timeframe.
+ */
+import type { Dimension, Padding } from '@tranding-custom-chart/core';
+export interface WatermarkRenderOptions {
+    readonly ctx: CanvasRenderingContext2D;
+    readonly bounds: Dimension;
+    readonly padding: Padding;
+    readonly text: string;
+    readonly subText?: string | undefined;
+    readonly color?: string | undefined;
+}
+export declare function renderWatermark(options: WatermarkRenderOptions): void;
+//# sourceMappingURL=watermark-renderer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"watermark-renderer.d.ts","sourceRoot":"","sources":["../../src/renderers/watermark-renderer.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,6BAA6B,CAAC;AAEtE,MAAM,WAAW,sBAAsB;IACrC,QAAQ,CAAC,GAAG,EAAE,wBAAwB,CAAC;IACvC,QAAQ,CAAC,MAAM,EAAE,SAAS,CAAC;IAC3B,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACtC,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CACrC;AAED,wBAAgB,eAAe,CAAC,OAAO,EAAE,sBAAsB,GAAG,IAAI,CAiCrE"}

package/dist/renderers/watermark-renderer.js

@@ -0,0 +1,26 @@
+/**
+ * @file packages/chart-renderer-canvas/src/renderers/watermark-renderer.ts
+ * Subtle background watermark displaying symbol identity and timeframe.
+ */
+export function renderWatermark(options) {
+    const { ctx, bounds, padding, text, subText, color = 'rgba(255, 255, 255, 0.05)', } = options;
+    if (!text)
+        return;
+    const plotWidth = bounds.width - padding.left - padding.right;
+    const plotHeight = bounds.height - padding.top - padding.bottom;
+    const centerX = padding.left + plotWidth / 2;
+    const centerY = padding.top + plotHeight / 2;
+    ctx.save();
+    ctx.fillStyle = color;
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'middle';
+    // Responsive font size: roughly 10% of plot width, capped between 28px and 64px
+    const fontSize = Math.max(28, Math.min(64, Math.floor(plotWidth * 0.08)));
+    ctx.font = `bold ${fontSize}px sans-serif`;
+    ctx.fillText(text, centerX, subText ? centerY - fontSize * 0.35 : centerY);
+    if (subText) {
+        ctx.font = `500 ${Math.floor(fontSize * 0.45)}px sans-serif`;
+        ctx.fillText(subText, centerX, centerY + fontSize * 0.45);
+    }
+    ctx.restore();
+}

package/dist/scheduler.d.ts

@@ -0,0 +1,25 @@
+/**
+ * @file packages/chart-renderer-canvas/src/scheduler.ts
+ * Coalesced requestAnimationFrame render scheduler.
+ * Batches high-frequency update requests into a single 60/120fps paint pass.
+ */
+export declare class RenderScheduler {
+    private _frameId;
+    private _isDirty;
+    private readonly _renderCallback;
+    private _disposed;
+    constructor(renderCallback: () => void);
+    /**
+     * Marks the canvas as dirty and schedules a render pass on the next animation frame.
+     */
+    requestRender(): void;
+    /**
+     * Immediately runs a synchronous render pass if dirty, cancelling any pending rAF.
+     */
+    flushSync(): void;
+    isDirty(): boolean;
+    dispose(): void;
+    private _onFrame;
+    private _cancelPendingFrame;
+}
+//# sourceMappingURL=scheduler.d.ts.map

package/dist/scheduler.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scheduler.d.ts","sourceRoot":"","sources":["../src/scheduler.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,qBAAa,eAAe;IAC1B,OAAO,CAAC,QAAQ,CAAuB;IACvC,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAa;IAC7C,OAAO,CAAC,SAAS,CAAS;gBAEd,cAAc,EAAE,MAAM,IAAI;IAItC;;OAEG;IACI,aAAa,IAAI,IAAI;IAc5B;;OAEG;IACI,SAAS,IAAI,IAAI;IASjB,OAAO,IAAI,OAAO;IAIlB,OAAO,IAAI,IAAI;IAMtB,OAAO,CAAC,QAAQ,CAad;IAEF,OAAO,CAAC,mBAAmB;CAU5B"}