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

package/dist/renderers/line-renderer.js

@@ -0,0 +1,80 @@
+/**
+ * @file packages/chart-renderer-canvas/src/renderers/line-renderer.ts
+ * Stroked line and gradient area fill renderer.
+ */
+export function renderLineSeries(options) {
+    const { ctx, points, xScale, yScale, color, strokeWidth = 2, lineDash, areaFill, startIndex = 0, endIndex = points.length - 1, } = options;
+    if (points.length === 0 || startIndex > endIndex)
+        return;
+    const start = Math.max(0, startIndex);
+    const end = Math.min(points.length - 1, endIndex);
+    ctx.save();
+    ctx.strokeStyle = color;
+    ctx.lineWidth = strokeWidth;
+    ctx.lineJoin = 'round';
+    ctx.lineCap = 'round';
+    if (lineDash && lineDash.length > 0) {
+        ctx.setLineDash(lineDash);
+    }
+    // Draw Line Path
+    let inSegment = false;
+    ctx.beginPath();
+    for (let i = start; i <= end; i++) {
+        const val = points[i];
+        if (val === null || val === undefined || !Number.isFinite(val)) {
+            inSegment = false;
+            continue;
+        }
+        const x = xScale.scale(i);
+        const y = yScale.scale(val);
+        if (!inSegment) {
+            ctx.moveTo(x, y);
+            inSegment = true;
+        }
+        else {
+            ctx.lineTo(x, y);
+        }
+    }
+    ctx.stroke();
+    // Draw Area Fill if configured
+    if (areaFill) {
+        const firstIdx = points.findIndex((v, idx) => idx >= start && idx <= end && v != null);
+        let lastIdx = -1;
+        for (let i = end; i >= start; i--) {
+            if (points[i] != null) {
+                lastIdx = i;
+                break;
+            }
+        }
+        if (firstIdx !== -1 && lastIdx !== -1 && lastIdx >= firstIdx) {
+            ctx.beginPath();
+            inSegment = false;
+            for (let i = firstIdx; i <= lastIdx; i++) {
+                const val = points[i];
+                if (val === null || val === undefined || !Number.isFinite(val)) {
+                    continue;
+                }
+                const x = xScale.scale(i);
+                const y = yScale.scale(val);
+                if (!inSegment) {
+                    ctx.moveTo(x, y);
+                    inSegment = true;
+                }
+                else {
+                    ctx.lineTo(x, y);
+                }
+            }
+            const endX = xScale.scale(lastIdx);
+            const startX = xScale.scale(firstIdx);
+            ctx.lineTo(endX, areaFill.baselineY);
+            ctx.lineTo(startX, areaFill.baselineY);
+            ctx.closePath();
+            const grad = ctx.createLinearGradient(0, yScale.scale(yScale.domain()[1]), 0, areaFill.baselineY);
+            grad.addColorStop(0, areaFill.gradientTopColor);
+            grad.addColorStop(1, areaFill.gradientBottomColor);
+            ctx.fillStyle = grad;
+            ctx.fill();
+        }
+    }
+    ctx.restore();
+}

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

@@ -0,0 +1,13 @@
+/**
+ * @file packages/chart-renderer-canvas/src/renderers/line-with-markers-renderer.ts
+ * Canvas 2D renderer for Line with Markers charts.
+ * Draws continuous polyline with circular anchor markers at each discrete data coordinate.
+ */
+import { type LineRenderOptions } from './line-renderer.js';
+export interface LineWithMarkersRenderOptions extends LineRenderOptions {
+    readonly markerRadius?: number | undefined;
+    readonly markerFillColor?: string | undefined;
+    readonly markerStrokeColor?: string | undefined;
+}
+export declare function renderLineWithMarkers(options: LineWithMarkersRenderOptions): void;
+//# sourceMappingURL=line-with-markers-renderer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"line-with-markers-renderer.d.ts","sourceRoot":"","sources":["../../src/renderers/line-with-markers-renderer.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,EAAoB,KAAK,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAE9E,MAAM,WAAW,4BAA6B,SAAQ,iBAAiB;IACrE,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3C,QAAQ,CAAC,eAAe,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9C,QAAQ,CAAC,iBAAiB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CACjD;AAED,wBAAgB,qBAAqB,CAAC,OAAO,EAAE,4BAA4B,GAAG,IAAI,CA4CjF"}

package/dist/renderers/line-with-markers-renderer.js

@@ -0,0 +1,35 @@
+/**
+ * @file packages/chart-renderer-canvas/src/renderers/line-with-markers-renderer.ts
+ * Canvas 2D renderer for Line with Markers charts.
+ * Draws continuous polyline with circular anchor markers at each discrete data coordinate.
+ */
+import { renderLineSeries } from './line-renderer.js';
+export function renderLineWithMarkers(options) {
+    const { ctx, points, xScale, yScale, color, markerRadius = 3, markerFillColor = '#ffffff', markerStrokeColor = color, startIndex = 0, endIndex = points.length - 1, } = options;
+    if (points.length === 0 || startIndex > endIndex)
+        return;
+    // 1. Render continuous line series
+    renderLineSeries(options);
+    // 2. Render circular markers
+    const start = Math.max(0, startIndex);
+    const end = Math.min(points.length - 1, endIndex);
+    const slotWidth = points.length > 1 ? Math.abs(xScale.scale(1) - xScale.scale(0)) : 10;
+    const markerStep = slotWidth < 8 ? Math.max(1, Math.ceil(12 / Math.max(0.1, slotWidth))) : 1;
+    const effectiveRadius = slotWidth < 4 ? 1.5 : markerRadius;
+    ctx.save();
+    for (let i = start; i <= end; i += markerStep) {
+        const val = points[i];
+        if (val === null || val === undefined || isNaN(val))
+            continue;
+        const x = xScale.scale(i);
+        const y = yScale.scale(val);
+        ctx.beginPath();
+        ctx.arc(x, y, effectiveRadius, 0, Math.PI * 2);
+        ctx.fillStyle = markerFillColor;
+        ctx.fill();
+        ctx.lineWidth = 1.5;
+        ctx.strokeStyle = markerStrokeColor;
+        ctx.stroke();
+    }
+    ctx.restore();
+}

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

@@ -0,0 +1,16 @@
+/**
+ * @file packages/chart-renderer-canvas/src/renderers/marker-renderer.ts
+ * Renders pin and shaped marker annotations on series coordinates.
+ */
+import type { Dimension, Padding, Scale, SeriesMarker } from '@tranding-custom-chart/core';
+export interface MarkerRenderOptions {
+    readonly ctx: CanvasRenderingContext2D;
+    readonly bounds: Dimension;
+    readonly padding: Padding;
+    readonly xScale: Scale<number>;
+    readonly yScale: Scale<number>;
+    readonly markers: readonly SeriesMarker[];
+    readonly dpr?: number | undefined;
+}
+export declare function renderSeriesMarkers(options: MarkerRenderOptions): void;
+//# sourceMappingURL=marker-renderer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"marker-renderer.d.ts","sourceRoot":"","sources":["../../src/renderers/marker-renderer.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAE3F,MAAM,WAAW,mBAAmB;IAClC,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,OAAO,EAAE,SAAS,YAAY,EAAE,CAAC;IAC1C,QAAQ,CAAC,GAAG,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CACnC;AAED,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,mBAAmB,GAAG,IAAI,CA6FtE"}

package/dist/renderers/marker-renderer.js

@@ -0,0 +1,91 @@
+/**
+ * @file packages/chart-renderer-canvas/src/renderers/marker-renderer.ts
+ * Renders pin and shaped marker annotations on series coordinates.
+ */
+export function renderSeriesMarkers(options) {
+    const { ctx, xScale, yScale, markers } = options;
+    ctx.save();
+    for (const marker of markers) {
+        const x = xScale.scale(marker.index);
+        const targetPrice = marker.price ?? 0;
+        let y = yScale.scale(targetPrice);
+        const size = marker.size ?? 12;
+        const half = size / 2;
+        const shape = marker.shape ?? 'circle';
+        const position = marker.position ?? 'aboveBar';
+        // Position offset relative to point
+        if (position === 'aboveBar') {
+            y -= size + 4;
+        }
+        else if (position === 'belowBar') {
+            y += size + 4;
+        }
+        ctx.fillStyle = marker.color;
+        ctx.strokeStyle = '#ffffff';
+        ctx.lineWidth = 1.5;
+        ctx.beginPath();
+        if (shape === 'circle') {
+            ctx.arc(x, y, half, 0, Math.PI * 2);
+            ctx.fill();
+            ctx.stroke();
+        }
+        else if (shape === 'square') {
+            ctx.fillRect(x - half, y - half, size, size);
+            ctx.strokeRect(x - half, y - half, size, size);
+        }
+        else if (shape === 'arrowUp') {
+            ctx.moveTo(x, y - half);
+            ctx.lineTo(x + half, y + half);
+            ctx.lineTo(x - half, y + half);
+            ctx.closePath();
+            ctx.fill();
+        }
+        else if (shape === 'arrowDown') {
+            ctx.moveTo(x, y + half);
+            ctx.lineTo(x + half, y - half);
+            ctx.lineTo(x - half, y - half);
+            ctx.closePath();
+            ctx.fill();
+        }
+        else if (shape === 'star') {
+            const spikes = 5;
+            const outerRadius = half;
+            const innerRadius = half * 0.45;
+            let rot = (Math.PI / 2) * 3;
+            const step = Math.PI / spikes;
+            ctx.moveTo(x, y - outerRadius);
+            for (let i = 0; i < spikes; i++) {
+                let sx = x + Math.cos(rot) * outerRadius;
+                let sy = y + Math.sin(rot) * outerRadius;
+                ctx.lineTo(sx, sy);
+                rot += step;
+                sx = x + Math.cos(rot) * innerRadius;
+                sy = y + Math.sin(rot) * innerRadius;
+                ctx.lineTo(sx, sy);
+                rot += step;
+            }
+            ctx.lineTo(x, y - outerRadius);
+            ctx.closePath();
+            ctx.fill();
+            ctx.stroke();
+        }
+        // Render optional marker text label badge
+        if (marker.text) {
+            ctx.font = 'bold 9px monospace';
+            const textWidth = ctx.measureText(marker.text).width;
+            const badgeH = 14;
+            const badgeW = textWidth + 8;
+            const badgeY = position === 'aboveBar' ? y - half - badgeH - 2 : y + half + 2;
+            ctx.fillStyle = 'rgba(15, 23, 42, 0.85)';
+            ctx.fillRect(x - badgeW / 2, badgeY, badgeW, badgeH);
+            ctx.strokeStyle = marker.color;
+            ctx.lineWidth = 1;
+            ctx.strokeRect(x - badgeW / 2, badgeY, badgeW, badgeH);
+            ctx.fillStyle = '#ffffff';
+            ctx.textAlign = 'center';
+            ctx.textBaseline = 'middle';
+            ctx.fillText(marker.text, x, badgeY + badgeH / 2);
+        }
+    }
+    ctx.restore();
+}

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

@@ -0,0 +1,18 @@
+/**
+ * @file packages/chart-renderer-canvas/src/renderers/mixed-renderer.ts
+ * Heterogeneous multi-dataset mixed chart renderer (Bar + Line + Spline + Area + Scatter).
+ * Coordinated multi-dataset rendering with dual-axis scale synchronization.
+ */
+import type { Dimension, MixedDataset, Padding, Scale } from '@tranding-custom-chart/core';
+export interface MixedRenderOptions {
+    readonly ctx: CanvasRenderingContext2D;
+    readonly bounds: Dimension;
+    readonly padding: Padding;
+    readonly xScale: Scale<number>;
+    readonly yScale: Scale<number>;
+    readonly secondaryYScale?: Scale<number> | undefined;
+    readonly datasets: readonly MixedDataset[];
+    readonly dpr?: number | undefined;
+}
+export declare function renderMixedDatasets(options: MixedRenderOptions): void;
+//# sourceMappingURL=mixed-renderer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mixed-renderer.d.ts","sourceRoot":"","sources":["../../src/renderers/mixed-renderer.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAC;AAI3F,MAAM,WAAW,kBAAkB;IACjC,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,eAAe,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,GAAG,SAAS,CAAC;IACrD,QAAQ,CAAC,QAAQ,EAAE,SAAS,YAAY,EAAE,CAAC;IAC3C,QAAQ,CAAC,GAAG,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CACnC;AAED,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,kBAAkB,GAAG,IAAI,CA+HrE"}

package/dist/renderers/mixed-renderer.js

@@ -0,0 +1,123 @@
+/**
+ * @file packages/chart-renderer-canvas/src/renderers/mixed-renderer.ts
+ * Heterogeneous multi-dataset mixed chart renderer (Bar + Line + Spline + Area + Scatter).
+ * Coordinated multi-dataset rendering with dual-axis scale synchronization.
+ */
+import { computeCatmullRomBezierSegments } from '@tranding-custom-chart/core';
+import { snapLine } from '../dpi.js';
+export function renderMixedDatasets(options) {
+    const { ctx, bounds, padding, xScale, yScale, secondaryYScale, datasets, dpr = 1 } = options;
+    const left = padding.left;
+    const right = bounds.width - padding.right;
+    const top = padding.top;
+    const bottom = bounds.height - padding.bottom;
+    ctx.save();
+    // Clip to plot area to avoid spilling outside margins
+    ctx.beginPath();
+    ctx.rect(left, top, right - left, bottom - top);
+    ctx.clip();
+    // 1. Separate bar datasets to calculate grouped bar slotting
+    const activeBarDatasets = datasets.filter((d) => !d.hidden && d.type === 'bar');
+    const barCount = activeBarDatasets.length;
+    for (let barIdx = 0; barIdx < barCount; barIdx++) {
+        const ds = activeBarDatasets[barIdx];
+        const activeYScale = ds.yAxisPosition === 'right' && secondaryYScale ? secondaryYScale : yScale;
+        const baselineY = activeYScale.scale(0);
+        const color = ds.backgroundColor ?? ds.color ?? '#3b82f6';
+        ctx.fillStyle = color;
+        for (let i = 0; i < ds.data.length; i++) {
+            const val = ds.data[i];
+            if (val === undefined || val === null)
+                continue;
+            const slotCenter = xScale.scale(i);
+            // Grouped bar width & offset calculation
+            const slotWidth = Math.max(8, (right - left) / Math.max(1, ds.data.length));
+            const groupWidth = slotWidth * 0.75;
+            const singleBarWidth = Math.max(3, groupWidth / barCount);
+            const barX = slotCenter - groupWidth / 2 + barIdx * singleBarWidth;
+            const yVal = activeYScale.scale(val);
+            const barY = Math.min(yVal, baselineY);
+            const barHeight = Math.max(1, Math.abs(baselineY - yVal));
+            ctx.fillRect(barX, barY, singleBarWidth - 1, barHeight);
+        }
+    }
+    // 2. Render continuous series: Area, Spline, Line, Scatter
+    for (const ds of datasets) {
+        if (ds.hidden || ds.type === 'bar')
+            continue;
+        const activeYScale = ds.yAxisPosition === 'right' && secondaryYScale ? secondaryYScale : yScale;
+        const strokeColor = ds.color ?? '#10b981';
+        const strokeWidth = ds.strokeWidth ?? 2;
+        const points = [];
+        for (let i = 0; i < ds.data.length; i++) {
+            const val = ds.data[i];
+            if (val === undefined || val === null)
+                continue;
+            points.push({
+                x: xScale.scale(i),
+                y: activeYScale.scale(val),
+            });
+        }
+        if (points.length < 2 && ds.type !== 'scatter')
+            continue;
+        if (ds.type === 'area') {
+            const baselineY = activeYScale.scale(0);
+            const fillColor = ds.backgroundColor ?? 'rgba(16, 185, 129, 0.15)';
+            ctx.fillStyle = fillColor;
+            ctx.beginPath();
+            ctx.moveTo(points[0].x, baselineY);
+            for (const p of points) {
+                ctx.lineTo(p.x, p.y);
+            }
+            ctx.lineTo(points[points.length - 1].x, baselineY);
+            ctx.closePath();
+            ctx.fill();
+            // Top edge line
+            ctx.strokeStyle = strokeColor;
+            ctx.lineWidth = strokeWidth;
+            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.stroke();
+        }
+        else if (ds.type === 'spline') {
+            ctx.strokeStyle = strokeColor;
+            ctx.lineWidth = strokeWidth;
+            ctx.beginPath();
+            ctx.moveTo(points[0].x, points[0].y);
+            const segments = computeCatmullRomBezierSegments(points, 1.0);
+            for (const seg of segments) {
+                ctx.bezierCurveTo(seg.cp1.x, seg.cp1.y, seg.cp2.x, seg.cp2.y, seg.p2.x, seg.p2.y);
+            }
+            ctx.stroke();
+        }
+        else if (ds.type === 'line') {
+            ctx.strokeStyle = strokeColor;
+            ctx.lineWidth = strokeWidth;
+            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.stroke();
+            // Data markers
+            ctx.fillStyle = strokeColor;
+            for (const p of points) {
+                ctx.beginPath();
+                ctx.arc(p.x, p.y, 3, 0, Math.PI * 2);
+                ctx.fill();
+            }
+        }
+        else if (ds.type === 'scatter') {
+            ctx.fillStyle = strokeColor;
+            for (const p of points) {
+                ctx.beginPath();
+                ctx.arc(p.x, p.y, 4, 0, Math.PI * 2);
+                ctx.fill();
+            }
+        }
+    }
+    ctx.restore();
+}

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

@@ -0,0 +1,21 @@
+/**
+ * @file packages/chart-renderer-canvas/src/renderers/ohlc-bar-renderer.ts
+ * Traditional American OHLC bar chart renderer with left/right ticks.
+ */
+import type { ChartTheme, OHLCVBar, Scale } from '@tranding-custom-chart/core';
+export interface OhlcBarRenderOptions {
+    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 tickWidthRatio?: number | undefined;
+    readonly customUpColor?: string | undefined;
+    readonly customDownColor?: string | undefined;
+    readonly lineWidth?: number | undefined;
+}
+export declare function renderOhlcBars(options: OhlcBarRenderOptions): void;
+//# sourceMappingURL=ohlc-bar-renderer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ohlc-bar-renderer.d.ts","sourceRoot":"","sources":["../../src/renderers/ohlc-bar-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,cAAc,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7C,QAAQ,CAAC,aAAa,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5C,QAAQ,CAAC,eAAe,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9C,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CACzC;AAED,wBAAgB,cAAc,CAAC,OAAO,EAAE,oBAAoB,GAAG,IAAI,CAwFlE"}

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

@@ -0,0 +1,73 @@
+/**
+ * @file packages/chart-renderer-canvas/src/renderers/ohlc-bar-renderer.ts
+ * Traditional American OHLC bar chart renderer with left/right ticks.
+ */
+import { snapLine } from '../dpi.js';
+export function renderOhlcBars(options) {
+    const { ctx, bars, xScale, yScale, theme, dpr, startIndex = 0, endIndex = bars.length - 1, tickWidthRatio = 0.35, customUpColor, customDownColor, lineWidth = 1.2, } = 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 tickLength = slotWidth < 3 ? Math.max(0.5, slotWidth * 0.4) : Math.max(1, slotWidth * tickWidthRatio);
+    const upColor = customUpColor ?? theme.upCandle;
+    const downColor = customDownColor ?? theme.downCandle;
+    ctx.save();
+    ctx.lineWidth = slotWidth < 2 ? 0.75 : lineWidth;
+    // Render Bullish (Up) Bars
+    ctx.strokeStyle = upColor;
+    ctx.beginPath();
+    for (let i = start; i <= end; i++) {
+        const b = bars[i];
+        if (b.close >= b.open) {
+            const x = snapLine(xScale.scale(i), dpr);
+            const yHigh = snapLine(yScale.scale(b.high), dpr);
+            const yLow = snapLine(yScale.scale(b.low), dpr);
+            const yOpen = snapLine(yScale.scale(b.open), dpr);
+            const yClose = snapLine(yScale.scale(b.close), dpr);
+            // Vertical range line
+            ctx.moveTo(x, yHigh);
+            ctx.lineTo(x, yLow);
+            // Left tick for Open
+            ctx.moveTo(x - tickLength, yOpen);
+            ctx.lineTo(x, yOpen);
+            // Right tick for Close
+            ctx.moveTo(x, yClose);
+            ctx.lineTo(x + tickLength, yClose);
+        }
+    }
+    ctx.stroke();
+    // Render Bearish (Down) Bars
+    ctx.strokeStyle = downColor;
+    ctx.beginPath();
+    for (let i = start; i <= end; i++) {
+        const b = bars[i];
+        if (b.close < b.open) {
+            const x = snapLine(xScale.scale(i), dpr);
+            const yHigh = snapLine(yScale.scale(b.high), dpr);
+            const yLow = snapLine(yScale.scale(b.low), dpr);
+            const yOpen = snapLine(yScale.scale(b.open), dpr);
+            const yClose = snapLine(yScale.scale(b.close), dpr);
+            // Vertical range line
+            ctx.moveTo(x, yHigh);
+            ctx.lineTo(x, yLow);
+            // Left tick for Open
+            ctx.moveTo(x - tickLength, yOpen);
+            ctx.lineTo(x, yOpen);
+            // Right tick for Close
+            ctx.moveTo(x, yClose);
+            ctx.lineTo(x + tickLength, yClose);
+        }
+    }
+    ctx.stroke();
+    ctx.restore();
+}

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

@@ -0,0 +1,26 @@
+/**
+ * @file packages/chart-renderer-canvas/src/renderers/pie-renderer.ts
+ * Canvas 2D renderer for Pie and Doughnut charts.
+ * Supports configurable inner cutout radius, hover slice explosion, slice borders,
+ * and centered KPI readout.
+ */
+import type { PieSlice } from '@tranding-custom-chart/core';
+export interface PieCenterText {
+    readonly title?: string | undefined;
+    readonly value?: string | undefined;
+    readonly subtitle?: string | undefined;
+    readonly color?: string | undefined;
+}
+export interface PieRenderOptions {
+    readonly cx: number;
+    readonly cy: number;
+    readonly radius: number;
+    readonly innerRadius?: number | undefined;
+    readonly hoverIndex?: number | null | undefined;
+    readonly hoverExplodeDistance?: number | undefined;
+    readonly borderColor?: string | undefined;
+    readonly borderWidth?: number | undefined;
+    readonly centerText?: PieCenterText | undefined;
+}
+export declare function renderPie(ctx: CanvasRenderingContext2D, slices: readonly PieSlice[], options: PieRenderOptions): void;
+//# sourceMappingURL=pie-renderer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pie-renderer.d.ts","sourceRoot":"","sources":["../../src/renderers/pie-renderer.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAE5D,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACpC,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACpC,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACvC,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CACrC;AAED,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1C,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IAChD,QAAQ,CAAC,oBAAoB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACnD,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1C,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1C,QAAQ,CAAC,UAAU,CAAC,EAAE,aAAa,GAAG,SAAS,CAAC;CACjD;AAED,wBAAgB,SAAS,CACvB,GAAG,EAAE,wBAAwB,EAC7B,MAAM,EAAE,SAAS,QAAQ,EAAE,EAC3B,OAAO,EAAE,gBAAgB,GACxB,IAAI,CAsFN"}

package/dist/renderers/pie-renderer.js

@@ -0,0 +1,71 @@
+/**
+ * @file packages/chart-renderer-canvas/src/renderers/pie-renderer.ts
+ * Canvas 2D renderer for Pie and Doughnut charts.
+ * Supports configurable inner cutout radius, hover slice explosion, slice borders,
+ * and centered KPI readout.
+ */
+export function renderPie(ctx, slices, options) {
+    if (slices.length === 0 || options.radius <= 0)
+        return;
+    const total = slices.reduce((sum, s) => sum + Math.max(0, s.value), 0);
+    if (total <= 0)
+        return;
+    const { cx, cy, radius, innerRadius = 0, hoverIndex = null, hoverExplodeDistance = 6, borderColor = '#181b19', borderWidth = 2, centerText, } = options;
+    ctx.save();
+    let currentAngle = -Math.PI / 2; // start at 12 o'clock
+    for (let i = 0; i < slices.length; i++) {
+        const slice = slices[i];
+        const val = Math.max(0, slice.value);
+        const sliceAngle = (val / total) * 2 * Math.PI;
+        const endAngle = currentAngle + sliceAngle;
+        if (sliceAngle <= 0) {
+            currentAngle = endAngle;
+            continue;
+        }
+        const isHovered = hoverIndex === i;
+        let sliceCx = cx;
+        let sliceCy = cy;
+        if (isHovered && hoverExplodeDistance > 0) {
+            const bisector = currentAngle + sliceAngle / 2;
+            sliceCx += Math.cos(bisector) * hoverExplodeDistance;
+            sliceCy += Math.sin(bisector) * hoverExplodeDistance;
+        }
+        ctx.beginPath();
+        if (innerRadius > 0) {
+            // Doughnut Arc
+            ctx.arc(sliceCx, sliceCy, radius, currentAngle, endAngle, false);
+            ctx.arc(sliceCx, sliceCy, innerRadius, endAngle, currentAngle, true);
+            ctx.closePath();
+        }
+        else {
+            // Pie Arc
+            ctx.moveTo(sliceCx, sliceCy);
+            ctx.arc(sliceCx, sliceCy, radius, currentAngle, endAngle, false);
+            ctx.closePath();
+        }
+        ctx.fillStyle = slice.color;
+        ctx.fill();
+        if (borderWidth > 0 && borderColor) {
+            ctx.lineWidth = borderWidth;
+            ctx.strokeStyle = borderColor;
+            ctx.stroke();
+        }
+        currentAngle = endAngle;
+    }
+    // Draw Center KPI Text for Doughnut
+    if (innerRadius > 20 && centerText) {
+        ctx.textAlign = 'center';
+        ctx.textBaseline = 'middle';
+        if (centerText.value) {
+            ctx.font = 'bold 18px Inter, system-ui, sans-serif';
+            ctx.fillStyle = centerText.color ?? '#ffffff';
+            ctx.fillText(centerText.value, cx, cy - (centerText.title ? 4 : 0));
+        }
+        if (centerText.title) {
+            ctx.font = '500 11px Inter, system-ui, sans-serif';
+            ctx.fillStyle = centerText.color ? `${centerText.color}aa` : '#858e89';
+            ctx.fillText(centerText.title.toUpperCase(), cx, cy + (centerText.value ? 16 : 0));
+        }
+    }
+    ctx.restore();
+}

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

@@ -0,0 +1,13 @@
+/**
+ * @file packages/chart-renderer-canvas/src/renderers/polar-area-renderer.ts
+ * High-performance 2D Canvas renderer for Polar Area Charts.
+ */
+import type { Dimension, Padding, PolarAreaDatum } from '@tranding-custom-chart/core';
+export interface PolarAreaRenderOptions {
+    readonly startAngle?: number;
+    readonly strokeColor?: string;
+    readonly strokeWidth?: number;
+    readonly showLabels?: boolean;
+}
+export declare function renderPolarArea(ctx: CanvasRenderingContext2D, data: readonly PolarAreaDatum[], dimension: Dimension, padding: Padding, options?: PolarAreaRenderOptions): void;
+//# sourceMappingURL=polar-area-renderer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"polar-area-renderer.d.ts","sourceRoot":"","sources":["../../src/renderers/polar-area-renderer.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAEtF,MAAM,WAAW,sBAAsB;IACrC,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAC9B,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAC9B,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAC;CAC/B;AAED,wBAAgB,eAAe,CAC7B,GAAG,EAAE,wBAAwB,EAC7B,IAAI,EAAE,SAAS,cAAc,EAAE,EAC/B,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,OAAO,GAAE,sBAA2B,GACnC,IAAI,CAgDN"}

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

@@ -0,0 +1,44 @@
+/**
+ * @file packages/chart-renderer-canvas/src/renderers/polar-area-renderer.ts
+ * High-performance 2D Canvas renderer for Polar Area Charts.
+ */
+export function renderPolarArea(ctx, data, dimension, padding, options = {}) {
+    if (!data || data.length === 0)
+        return;
+    const plotWidth = dimension.width - padding.left - padding.right;
+    const plotHeight = dimension.height - padding.top - padding.bottom;
+    const cx = padding.left + plotWidth / 2;
+    const cy = padding.top + plotHeight / 2;
+    const maxRadius = Math.max(10, Math.min(plotWidth, plotHeight) / 2);
+    const maxVal = data.reduce((max, d) => Math.max(max, d.value), 0) || 1;
+    const sliceAngle = (Math.PI * 2) / data.length;
+    let currentAngle = options.startAngle ?? -Math.PI / 2;
+    const strokeColor = options.strokeColor ?? 'rgba(255, 255, 255, 0.4)';
+    const strokeWidth = options.strokeWidth ?? 1;
+    ctx.save();
+    ctx.lineWidth = strokeWidth;
+    ctx.strokeStyle = strokeColor;
+    for (let i = 0; i < data.length; i++) {
+        const d = data[i];
+        const sliceRadius = (d.value / maxVal) * maxRadius;
+        ctx.beginPath();
+        ctx.moveTo(cx, cy);
+        ctx.arc(cx, cy, sliceRadius, currentAngle, currentAngle + sliceAngle);
+        ctx.closePath();
+        ctx.fillStyle = d.color;
+        ctx.fill();
+        ctx.stroke();
+        if (options.showLabels) {
+            const midAngle = currentAngle + sliceAngle / 2;
+            const lx = cx + Math.cos(midAngle) * (sliceRadius + 14);
+            const ly = cy + Math.sin(midAngle) * (sliceRadius + 14);
+            ctx.fillStyle = '#d1d5db';
+            ctx.font = '11px system-ui, sans-serif';
+            ctx.textAlign = 'center';
+            ctx.textBaseline = 'middle';
+            ctx.fillText(`${d.label} (${d.value})`, lx, ly);
+        }
+        currentAngle += sliceAngle;
+    }
+    ctx.restore();
+}