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

package/dist/index.d.ts

@@ -0,0 +1,38 @@
+/**
+ * @file packages/chart-renderer-canvas/src/index.ts
+ * Main entry point for @tranding-custom-chart/renderer-canvas.
+ */
+export * from './dpi.js';
+export * from './scheduler.js';
+export * from './renderers/grid-renderer.js';
+export * from './renderers/candlestick-renderer.js';
+export * from './renderers/line-renderer.js';
+export * from './renderers/bar-renderer.js';
+export * from './renderers/crosshair-renderer.js';
+export * from './renderers/ohlc-bar-renderer.js';
+export * from './renderers/hollow-candlestick-renderer.js';
+export * from './renderers/baseline-renderer.js';
+export * from './renderers/step-line-renderer.js';
+export * from './renderers/high-low-renderer.js';
+export * from './renderers/columns-renderer.js';
+export * from './renderers/line-with-markers-renderer.js';
+export * from './renderers/hlc-area-renderer.js';
+export * from './renderers/watermark-renderer.js';
+export * from './renderers/last-price-renderer.js';
+export * from './renderers/drawing-renderer.js';
+export * from './renderers/pie-renderer.js';
+export * from './renderers/horizontal-bar-renderer.js';
+export * from './renderers/stacked-bar-renderer.js';
+export * from './renderers/curved-line-renderer.js';
+export * from './renderers/radar-renderer.js';
+export * from './renderers/volume-profile-renderer.js';
+export * from './renderers/supertrend-renderer.js';
+export * from './renderers/scatter-renderer.js';
+export * from './renderers/bubble-renderer.js';
+export * from './renderers/polar-area-renderer.js';
+export * from './renderers/box-plot-renderer.js';
+export * from './renderers/heatmap-renderer.js';
+export * from './renderers/mixed-renderer.js';
+export * from './renderers/marker-renderer.js';
+export * from './canvas-engine.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,8BAA8B,CAAC;AAC7C,cAAc,qCAAqC,CAAC;AACpD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,mCAAmC,CAAC;AAClD,cAAc,kCAAkC,CAAC;AACjD,cAAc,4CAA4C,CAAC;AAC3D,cAAc,kCAAkC,CAAC;AACjD,cAAc,mCAAmC,CAAC;AAClD,cAAc,kCAAkC,CAAC;AACjD,cAAc,iCAAiC,CAAC;AAChD,cAAc,2CAA2C,CAAC;AAC1D,cAAc,kCAAkC,CAAC;AACjD,cAAc,mCAAmC,CAAC;AAClD,cAAc,oCAAoC,CAAC;AACnD,cAAc,iCAAiC,CAAC;AAChD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,wCAAwC,CAAC;AACvD,cAAc,qCAAqC,CAAC;AACpD,cAAc,qCAAqC,CAAC;AACpD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,wCAAwC,CAAC;AACvD,cAAc,oCAAoC,CAAC;AACnD,cAAc,iCAAiC,CAAC;AAChD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,oCAAoC,CAAC;AACnD,cAAc,kCAAkC,CAAC;AACjD,cAAc,iCAAiC,CAAC;AAChD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,oBAAoB,CAAC"}

package/dist/index.js

@@ -0,0 +1,37 @@
+/**
+ * @file packages/chart-renderer-canvas/src/index.ts
+ * Main entry point for @tranding-custom-chart/renderer-canvas.
+ */
+export * from './dpi.js';
+export * from './scheduler.js';
+export * from './renderers/grid-renderer.js';
+export * from './renderers/candlestick-renderer.js';
+export * from './renderers/line-renderer.js';
+export * from './renderers/bar-renderer.js';
+export * from './renderers/crosshair-renderer.js';
+export * from './renderers/ohlc-bar-renderer.js';
+export * from './renderers/hollow-candlestick-renderer.js';
+export * from './renderers/baseline-renderer.js';
+export * from './renderers/step-line-renderer.js';
+export * from './renderers/high-low-renderer.js';
+export * from './renderers/columns-renderer.js';
+export * from './renderers/line-with-markers-renderer.js';
+export * from './renderers/hlc-area-renderer.js';
+export * from './renderers/watermark-renderer.js';
+export * from './renderers/last-price-renderer.js';
+export * from './renderers/drawing-renderer.js';
+export * from './renderers/pie-renderer.js';
+export * from './renderers/horizontal-bar-renderer.js';
+export * from './renderers/stacked-bar-renderer.js';
+export * from './renderers/curved-line-renderer.js';
+export * from './renderers/radar-renderer.js';
+export * from './renderers/volume-profile-renderer.js';
+export * from './renderers/supertrend-renderer.js';
+export * from './renderers/scatter-renderer.js';
+export * from './renderers/bubble-renderer.js';
+export * from './renderers/polar-area-renderer.js';
+export * from './renderers/box-plot-renderer.js';
+export * from './renderers/heatmap-renderer.js';
+export * from './renderers/mixed-renderer.js';
+export * from './renderers/marker-renderer.js';
+export * from './canvas-engine.js';

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

@@ -0,0 +1,26 @@
+/**
+ * @file packages/chart-renderer-canvas/src/renderers/bar-renderer.ts
+ * Bar chart and volume panel renderer.
+ */
+import type { Scale } from '@tranding-custom-chart/core';
+export interface BarItem {
+    readonly value: number;
+    readonly color?: string | undefined;
+    readonly isUp?: boolean | undefined;
+}
+export interface BarRenderOptions {
+    readonly ctx: CanvasRenderingContext2D;
+    readonly items: readonly (BarItem | null | undefined)[];
+    readonly xScale: Scale<number>;
+    readonly yScale: Scale<number>;
+    readonly baselineY: number;
+    readonly dpr: number;
+    readonly defaultColor?: string;
+    readonly upColor?: string;
+    readonly downColor?: string;
+    readonly barWidthRatio?: number;
+    readonly startIndex?: number;
+    readonly endIndex?: number;
+}
+export declare function renderBarSeries(options: BarRenderOptions): void;
+//# sourceMappingURL=bar-renderer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"bar-renderer.d.ts","sourceRoot":"","sources":["../../src/renderers/bar-renderer.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAC;AAGzD,MAAM,WAAW,OAAO;IACtB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACpC,QAAQ,CAAC,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CACrC;AAED,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,GAAG,EAAE,wBAAwB,CAAC;IACvC,QAAQ,CAAC,KAAK,EAAE,SAAS,CAAC,OAAO,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,SAAS,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,CAAC;IAC/B,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,aAAa,CAAC,EAAE,MAAM,CAAC;IAChC,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,wBAAgB,eAAe,CAAC,OAAO,EAAE,gBAAgB,GAAG,IAAI,CAyD/D"}

package/dist/renderers/bar-renderer.js

@@ -0,0 +1,45 @@
+/**
+ * @file packages/chart-renderer-canvas/src/renderers/bar-renderer.ts
+ * Bar chart and volume panel renderer.
+ */
+import { snapRect } from '../dpi.js';
+export function renderBarSeries(options) {
+    const { ctx, items, xScale, yScale, baselineY, dpr, defaultColor = '#155c45', upColor = 'rgba(22, 121, 76, 0.45)', downColor = 'rgba(180, 35, 24, 0.45)', barWidthRatio = 0.7, startIndex = 0, endIndex = items.length - 1, } = options;
+    if (items.length === 0 || startIndex > endIndex)
+        return;
+    const start = Math.max(0, startIndex);
+    const end = Math.min(items.length - 1, endIndex);
+    let slotWidth = 8;
+    if ('stepWidth' in xScale && typeof xScale.stepWidth === 'number') {
+        slotWidth = xScale.stepWidth;
+    }
+    else if (items.length > 1) {
+        const x0 = xScale.scale(0);
+        const x1 = xScale.scale(1);
+        slotWidth = Math.abs(x1 - x0) || 8;
+    }
+    const barWidth = slotWidth < 2 ? Math.max(0.5, slotWidth * 0.8) : Math.max(1, slotWidth * barWidthRatio);
+    const halfWidth = barWidth / 2;
+    ctx.save();
+    for (let i = start; i <= end; i++) {
+        const item = items[i];
+        if (!item || !Number.isFinite(item.value) || item.value <= 0)
+            continue;
+        const rawX = xScale.scale(i);
+        const barTop = yScale.scale(item.value);
+        const height = Math.max(1, Math.abs(baselineY - barTop));
+        const leftX = snapRect(rawX - halfWidth, dpr);
+        const topY = snapRect(Math.min(baselineY, barTop), dpr);
+        if (item.color) {
+            ctx.fillStyle = item.color;
+        }
+        else if (item.isUp !== undefined) {
+            ctx.fillStyle = item.isUp ? upColor : downColor;
+        }
+        else {
+            ctx.fillStyle = defaultColor;
+        }
+        ctx.fillRect(leftX, topY, barWidth, height);
+    }
+    ctx.restore();
+}

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

@@ -0,0 +1,20 @@
+/**
+ * @file packages/chart-renderer-canvas/src/renderers/baseline-renderer.ts
+ * Two-zone baseline chart splitting returns into bullish (above) and bearish (below) zones.
+ */
+import type { Dimension, Padding, Scale } from '@tranding-custom-chart/core';
+export interface BaselineRenderOptions {
+    readonly ctx: CanvasRenderingContext2D;
+    readonly data: readonly number[];
+    readonly xScale: Scale<number>;
+    readonly yScale: Scale<number>;
+    readonly baselineValue: number;
+    readonly bounds: Dimension;
+    readonly padding: Padding;
+    readonly dpr: number;
+    readonly aboveColor?: string | undefined;
+    readonly belowColor?: string | undefined;
+    readonly lineWidth?: number | undefined;
+}
+export declare function renderBaselineChart(options: BaselineRenderOptions): void;
+//# sourceMappingURL=baseline-renderer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"baseline-renderer.d.ts","sourceRoot":"","sources":["../../src/renderers/baseline-renderer.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAC;AAG7E,MAAM,WAAW,qBAAqB;IACpC,QAAQ,CAAC,GAAG,EAAE,wBAAwB,CAAC;IACvC,QAAQ,CAAC,IAAI,EAAE,SAAS,MAAM,EAAE,CAAC;IACjC,QAAQ,CAAC,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAC/B,QAAQ,CAAC,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAC/B,QAAQ,CAAC,aAAa,EAAE,MAAM,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,UAAU,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACzC,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACzC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CACzC;AAED,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,qBAAqB,GAAG,IAAI,CAyHxE"}

package/dist/renderers/baseline-renderer.js

@@ -0,0 +1,101 @@
+/**
+ * @file packages/chart-renderer-canvas/src/renderers/baseline-renderer.ts
+ * Two-zone baseline chart splitting returns into bullish (above) and bearish (below) zones.
+ */
+import { snapLine } from '../dpi.js';
+export function renderBaselineChart(options) {
+    const { ctx, data, xScale, yScale, baselineValue, bounds, padding, dpr, aboveColor = '#16794c', belowColor = '#b42318', lineWidth = 2, } = options;
+    if (data.length === 0)
+        return;
+    const yBase = snapLine(yScale.scale(baselineValue), dpr);
+    const chartLeft = padding.left;
+    const chartRight = bounds.width - padding.right;
+    const chartTop = padding.top;
+    const chartBottom = bounds.height - padding.bottom;
+    // Build the continuous polyline points
+    const points = [];
+    for (let i = 0; i < data.length; i++) {
+        const val = data[i];
+        if (Number.isFinite(val)) {
+            points.push({
+                x: xScale.scale(i),
+                y: yScale.scale(val),
+            });
+        }
+    }
+    if (points.length < 2)
+        return;
+    ctx.save();
+    // 1. Render Upper Zone (Above Baseline)
+    ctx.save();
+    ctx.beginPath();
+    ctx.rect(chartLeft, chartTop, chartRight - chartLeft, Math.max(0, yBase - chartTop));
+    ctx.clip();
+    // Upper gradient fill
+    const upperGrad = ctx.createLinearGradient(0, chartTop, 0, yBase);
+    upperGrad.addColorStop(0, 'rgba(22, 121, 76, 0.40)');
+    upperGrad.addColorStop(1, 'rgba(22, 121, 76, 0.02)');
+    ctx.fillStyle = upperGrad;
+    ctx.beginPath();
+    ctx.moveTo(points[0].x, yBase);
+    for (const pt of points) {
+        ctx.lineTo(pt.x, pt.y);
+    }
+    ctx.lineTo(points[points.length - 1].x, yBase);
+    ctx.closePath();
+    ctx.fill();
+    // Upper stroke
+    ctx.strokeStyle = aboveColor;
+    ctx.lineWidth = lineWidth;
+    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();
+    ctx.restore();
+    // 2. Render Lower Zone (Below Baseline)
+    ctx.save();
+    ctx.beginPath();
+    ctx.rect(chartLeft, yBase, chartRight - chartLeft, Math.max(0, chartBottom - yBase));
+    ctx.clip();
+    // Lower gradient fill
+    const lowerGrad = ctx.createLinearGradient(0, yBase, 0, chartBottom);
+    lowerGrad.addColorStop(0, 'rgba(180, 35, 24, 0.02)');
+    lowerGrad.addColorStop(1, 'rgba(180, 35, 24, 0.40)');
+    ctx.fillStyle = lowerGrad;
+    ctx.beginPath();
+    ctx.moveTo(points[0].x, yBase);
+    for (const pt of points) {
+        ctx.lineTo(pt.x, pt.y);
+    }
+    ctx.lineTo(points[points.length - 1].x, yBase);
+    ctx.closePath();
+    ctx.fill();
+    // Lower stroke
+    ctx.strokeStyle = belowColor;
+    ctx.lineWidth = lineWidth;
+    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();
+    ctx.restore();
+    // 3. Render Baseline Reference Line
+    ctx.strokeStyle = 'rgba(255, 255, 255, 0.35)';
+    ctx.lineWidth = 1;
+    ctx.setLineDash([4, 4]);
+    ctx.beginPath();
+    ctx.moveTo(chartLeft, yBase);
+    ctx.lineTo(chartRight, yBase);
+    ctx.stroke();
+    // Baseline Badge on Price Axis
+    ctx.setLineDash([]);
+    ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';
+    ctx.font = '10px monospace';
+    ctx.textAlign = 'left';
+    ctx.textBaseline = 'middle';
+    ctx.fillText(`Base: ${baselineValue.toFixed(1)}`, chartRight + 4, yBase);
+    ctx.restore();
+}

package/dist/renderers/box-plot-renderer.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @file packages/chart-renderer-canvas/src/renderers/box-plot-renderer.ts
+ * High-performance Canvas 2D statistical box plot (box-and-whisker) renderer.
+ */
+import type { BoxPlotDatum, Scale } from '@tranding-custom-chart/core';
+export interface BoxPlotRenderOptions {
+    readonly boxWidthRatio?: number | undefined;
+    readonly capWidthRatio?: number | undefined;
+    readonly defaultColor?: string | undefined;
+    readonly strokeWidth?: number | undefined;
+    readonly medianColor?: string | undefined;
+}
+export declare function renderBoxPlots(ctx: CanvasRenderingContext2D, data: readonly BoxPlotDatum[], xScale: Scale<number>, yScale: Scale<number>, options?: BoxPlotRenderOptions): void;
+//# sourceMappingURL=box-plot-renderer.d.ts.map

package/dist/renderers/box-plot-renderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"box-plot-renderer.d.ts","sourceRoot":"","sources":["../../src/renderers/box-plot-renderer.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAC;AAEvE,MAAM,WAAW,oBAAoB;IACnC,QAAQ,CAAC,aAAa,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5C,QAAQ,CAAC,aAAa,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5C,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3C,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1C,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAC3C;AAED,wBAAgB,cAAc,CAC5B,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,CAyFN"}

package/dist/renderers/box-plot-renderer.js

@@ -0,0 +1,76 @@
+/**
+ * @file packages/chart-renderer-canvas/src/renderers/box-plot-renderer.ts
+ * High-performance Canvas 2D statistical box plot (box-and-whisker) renderer.
+ */
+export function renderBoxPlots(ctx, data, xScale, yScale, options = {}) {
+    if (data.length === 0)
+        return;
+    const { boxWidthRatio = 0.5, capWidthRatio = 0.25, defaultColor = '#3b82f6', strokeWidth = 1.5, medianColor = '#ffffff', } = options;
+    ctx.save();
+    ctx.lineWidth = strokeWidth;
+    const count = data.length;
+    // Step width estimate between categories
+    let slotWidth = 40;
+    if (count > 1) {
+        slotWidth = Math.abs(xScale.scale(1) - xScale.scale(0));
+    }
+    else {
+        slotWidth = 60;
+    }
+    const boxHalfWidth = Math.max(4, (slotWidth * boxWidthRatio) / 2);
+    const capHalfWidth = Math.max(3, (slotWidth * capWidthRatio) / 2);
+    for (let i = 0; i < count; i++) {
+        const datum = data[i];
+        const cx = Math.round(xScale.scale(i));
+        const yMin = yScale.scale(datum.min);
+        const yQ1 = yScale.scale(datum.q1);
+        const yMedian = yScale.scale(datum.median);
+        const yQ3 = yScale.scale(datum.q3);
+        const yMax = yScale.scale(datum.max);
+        const baseColor = datum.color ?? defaultColor;
+        // 1. Whisker lines (from min to Q1 and Q3 to max)
+        ctx.strokeStyle = baseColor;
+        ctx.beginPath();
+        // Lower whisker
+        ctx.moveTo(cx, yMin);
+        ctx.lineTo(cx, yQ1);
+        // Lower cap
+        ctx.moveTo(cx - capHalfWidth, yMin);
+        ctx.lineTo(cx + capHalfWidth, yMin);
+        // Upper whisker
+        ctx.moveTo(cx, yQ3);
+        ctx.lineTo(cx, yMax);
+        // Upper cap
+        ctx.moveTo(cx - capHalfWidth, yMax);
+        ctx.lineTo(cx + capHalfWidth, yMax);
+        ctx.stroke();
+        // 2. Interquartile Range (IQR) Box: [Q3 to Q1] (Note: yQ3 is pixel-top, yQ1 is pixel-bottom)
+        const boxTop = Math.min(yQ1, yQ3);
+        const boxHeight = Math.max(1, Math.abs(yQ1 - yQ3));
+        const boxLeft = cx - boxHalfWidth;
+        // Box fill
+        ctx.fillStyle = baseColor.startsWith('#') ? `${baseColor}44` : 'rgba(59, 130, 246, 0.25)';
+        ctx.fillRect(boxLeft, boxTop, boxHalfWidth * 2, boxHeight);
+        // Box outline
+        ctx.strokeRect(boxLeft, boxTop, boxHalfWidth * 2, boxHeight);
+        // 3. Median Line
+        ctx.strokeStyle = medianColor;
+        ctx.beginPath();
+        ctx.moveTo(boxLeft, yMedian);
+        ctx.lineTo(boxLeft + boxHalfWidth * 2, yMedian);
+        ctx.stroke();
+        // 4. Outlier points (if any)
+        if (datum.outliers && datum.outliers.length > 0) {
+            ctx.fillStyle = '#ef4444';
+            ctx.strokeStyle = '#ffffff';
+            for (const outlier of datum.outliers) {
+                const yOut = yScale.scale(outlier);
+                ctx.beginPath();
+                ctx.arc(cx, yOut, 3, 0, Math.PI * 2);
+                ctx.fill();
+                ctx.stroke();
+            }
+        }
+    }
+    ctx.restore();
+}

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

@@ -0,0 +1,14 @@
+/**
+ * @file packages/chart-renderer-canvas/src/renderers/bubble-renderer.ts
+ * High-performance 2D Canvas renderer for Bubble Charts.
+ */
+import type { Scale, BubbleDatum } from '@tranding-custom-chart/core';
+export interface BubbleRenderOptions {
+    readonly minRadius?: number;
+    readonly maxRadius?: number;
+    readonly defaultColor?: string;
+    readonly strokeColor?: string;
+    readonly strokeWidth?: number;
+}
+export declare function renderBubbles(ctx: CanvasRenderingContext2D, data: readonly BubbleDatum[], xScale: Scale<number>, yScale: Scale<number>, options?: BubbleRenderOptions): void;
+//# sourceMappingURL=bubble-renderer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"bubble-renderer.d.ts","sourceRoot":"","sources":["../../src/renderers/bubble-renderer.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAEtE,MAAM,WAAW,mBAAmB;IAClC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,CAAC;IAC/B,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAC9B,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;CAC/B;AAED,wBAAgB,aAAa,CAC3B,GAAG,EAAE,wBAAwB,EAC7B,IAAI,EAAE,SAAS,WAAW,EAAE,EAC5B,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,EACrB,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,EACrB,OAAO,GAAE,mBAAwB,GAChC,IAAI,CAqCN"}

package/dist/renderers/bubble-renderer.js

@@ -0,0 +1,37 @@
+/**
+ * @file packages/chart-renderer-canvas/src/renderers/bubble-renderer.ts
+ * High-performance 2D Canvas renderer for Bubble Charts.
+ */
+export function renderBubbles(ctx, data, xScale, yScale, options = {}) {
+    if (!data || data.length === 0)
+        return;
+    const defaultColor = options.defaultColor ?? 'rgba(59, 130, 246, 0.6)';
+    const strokeColor = options.strokeColor ?? 'rgba(59, 130, 246, 0.9)';
+    const strokeWidth = options.strokeWidth ?? 1.5;
+    const minRadius = options.minRadius ?? 3;
+    const maxRadius = options.maxRadius ?? 40;
+    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 radius = Math.max(minRadius, Math.min(maxRadius, d.r));
+        ctx.beginPath();
+        ctx.arc(px, py, radius, 0, Math.PI * 2);
+        ctx.fillStyle = d.color ?? defaultColor;
+        ctx.strokeStyle = strokeColor;
+        ctx.fill();
+        if (strokeWidth > 0) {
+            ctx.stroke();
+        }
+        if (d.label) {
+            ctx.fillStyle = '#ffffff';
+            ctx.font = '10px system-ui, sans-serif';
+            ctx.textAlign = 'center';
+            ctx.textBaseline = 'middle';
+            ctx.fillText(d.label, px, py);
+        }
+    }
+    ctx.restore();
+}

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

@@ -0,0 +1,18 @@
+/**
+ * @file packages/chart-renderer-canvas/src/renderers/candlestick-renderer.ts
+ * High-performance batched candlestick renderer.
+ */
+import type { ChartTheme, OHLCVBar, Scale } from '@tranding-custom-chart/core';
+export interface CandlestickRenderOptions {
+    readonly ctx: CanvasRenderingContext2D;
+    readonly bars: readonly OHLCVBar[];
+    readonly xScale: Scale<number>;
+    readonly yScale: Scale<number>;
+    readonly theme: ChartTheme;
+    readonly dpr: number;
+    readonly startIndex?: number;
+    readonly endIndex?: number;
+    readonly candleWidthRatio?: number;
+}
+export declare function renderCandlesticks(options: CandlestickRenderOptions): void;
+//# sourceMappingURL=candlestick-renderer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"candlestick-renderer.d.ts","sourceRoot":"","sources":["../../src/renderers/candlestick-renderer.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAC;AAG/E,MAAM,WAAW,wBAAwB;IACvC,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,CAAC;IAC7B,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC;CACpC;AAED,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,wBAAwB,GAAG,IAAI,CAwG1E"}

package/dist/renderers/candlestick-renderer.js

@@ -0,0 +1,87 @@
+/**
+ * @file packages/chart-renderer-canvas/src/renderers/candlestick-renderer.ts
+ * High-performance batched candlestick renderer.
+ */
+import { snapLine, snapRect } from '../dpi.js';
+export function renderCandlesticks(options) {
+    const { ctx, bars, xScale, yScale, theme, dpr, startIndex = 0, endIndex = bars.length - 1, candleWidthRatio = 0.7, } = options;
+    if (bars.length === 0 || startIndex > endIndex)
+        return;
+    const start = Math.max(0, startIndex);
+    const end = Math.min(bars.length - 1, endIndex);
+    // Determine bar width from scale
+    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;
+    ctx.save();
+    ctx.lineWidth = slotWidth < 2 ? 0.75 : 1;
+    // Render Bullish (Up) Candles
+    ctx.strokeStyle = theme.upCandle;
+    ctx.fillStyle = theme.upCandle;
+    ctx.beginPath();
+    for (let i = start; i <= end; i++) {
+        const b = bars[i];
+        if (b.close < b.open)
+            continue; // Skip bearish
+        const rawX = xScale.scale(i);
+        const x = snapLine(rawX, dpr);
+        const highY = snapLine(yScale.scale(b.high), dpr);
+        const lowY = snapLine(yScale.scale(b.low), dpr);
+        // Wick line
+        ctx.moveTo(x, highY);
+        ctx.lineTo(x, lowY);
+    }
+    ctx.stroke();
+    // Bullish Bodies
+    for (let i = start; i <= end; i++) {
+        const b = bars[i];
+        if (b.close < b.open)
+            continue;
+        const rawX = xScale.scale(i);
+        const openY = yScale.scale(b.open);
+        const closeY = yScale.scale(b.close);
+        const topY = snapRect(Math.min(openY, closeY), dpr);
+        const bodyHeight = Math.max(1.5, Math.abs(closeY - openY));
+        const leftX = snapRect(rawX - halfWidth, dpr);
+        ctx.fillRect(leftX, topY, candleWidth, bodyHeight);
+    }
+    // Render Bearish (Down) Candles
+    ctx.strokeStyle = theme.downCandle;
+    ctx.fillStyle = theme.downCandle;
+    ctx.beginPath();
+    for (let i = start; i <= end; i++) {
+        const b = bars[i];
+        if (b.close >= b.open)
+            continue; // Skip bullish
+        const rawX = xScale.scale(i);
+        const x = snapLine(rawX, dpr);
+        const highY = snapLine(yScale.scale(b.high), dpr);
+        const lowY = snapLine(yScale.scale(b.low), dpr);
+        // Wick line
+        ctx.moveTo(x, highY);
+        ctx.lineTo(x, lowY);
+    }
+    ctx.stroke();
+    // Bearish Bodies
+    for (let i = start; i <= end; i++) {
+        const b = bars[i];
+        if (b.close >= b.open)
+            continue;
+        const rawX = xScale.scale(i);
+        const openY = yScale.scale(b.open);
+        const closeY = yScale.scale(b.close);
+        const topY = snapRect(Math.min(openY, closeY), dpr);
+        const bodyHeight = Math.max(1.5, Math.abs(closeY - openY));
+        const leftX = snapRect(rawX - halfWidth, dpr);
+        ctx.fillRect(leftX, topY, candleWidth, bodyHeight);
+    }
+    ctx.restore();
+}

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

@@ -0,0 +1,21 @@
+/**
+ * @file packages/chart-renderer-canvas/src/renderers/columns-renderer.ts
+ * Canvas 2D renderer for vertical Columns charts.
+ * Draws vertical columns from scale baseline to close price with bullish/bearish color coding.
+ */
+import type { ChartTheme, OHLCVBar, Scale } from '@tranding-custom-chart/core';
+export interface ColumnsRenderOptions {
+    readonly ctx: CanvasRenderingContext2D;
+    readonly bars: readonly OHLCVBar[];
+    readonly xScale: Scale<number>;
+    readonly yScale: Scale<number>;
+    readonly baselineY: number;
+    readonly theme?: ChartTheme | undefined;
+    readonly upColor?: string | undefined;
+    readonly downColor?: string | undefined;
+    readonly columnWidthRatio?: number | undefined;
+    readonly startIndex?: number | undefined;
+    readonly endIndex?: number | undefined;
+}
+export declare function renderColumns(options: ColumnsRenderOptions): void;
+//# sourceMappingURL=columns-renderer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"columns-renderer.d.ts","sourceRoot":"","sources":["../../src/renderers/columns-renderer.ts"],"names":[],"mappings":"AAAA;;;;GAIG;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,SAAS,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;IACxC,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACtC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACxC,QAAQ,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/C,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,CA8CjE"}

package/dist/renderers/columns-renderer.js

@@ -0,0 +1,35 @@
+/**
+ * @file packages/chart-renderer-canvas/src/renderers/columns-renderer.ts
+ * Canvas 2D renderer for vertical Columns charts.
+ * Draws vertical columns from scale baseline to close price with bullish/bearish color coding.
+ */
+import { snapRect } from '../dpi.js';
+export function renderColumns(options) {
+    const { ctx, bars, xScale, yScale, baselineY, theme, upColor = theme?.upCandle ?? '#16794c', downColor = theme?.downCandle ?? '#b42318', columnWidthRatio = 0.75, startIndex = 0, endIndex = bars.length - 1, } = options;
+    if (bars.length === 0 || startIndex > endIndex)
+        return;
+    const start = Math.max(0, startIndex);
+    const end = Math.min(bars.length - 1, endIndex);
+    // Approximate slot width from scale difference
+    const x0 = xScale.scale(0);
+    const x1 = bars.length > 1 ? xScale.scale(1) : x0 + 10;
+    const actualSlot = bars.length > 1 ? Math.abs(x1 - x0) : 10;
+    const colWidth = actualSlot < 2 ? Math.max(0.5, actualSlot * 0.8) : Math.max(1, Math.round(actualSlot * columnWidthRatio));
+    ctx.save();
+    for (let i = start; i <= end; i++) {
+        const bar = bars[i];
+        const cx = xScale.scale(i);
+        const cy = yScale.scale(bar.close);
+        const isUp = bar.close >= bar.open;
+        ctx.fillStyle = isUp ? upColor : downColor;
+        const left = cx - colWidth / 2;
+        const top = Math.min(cy, baselineY);
+        const height = Math.abs(baselineY - cy);
+        const rx = snapRect(left);
+        const ry = snapRect(top);
+        const rw = snapRect(colWidth);
+        const rh = snapRect(Math.max(1, height));
+        ctx.fillRect(rx, ry, rw, rh);
+    }
+    ctx.restore();
+}

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

@@ -0,0 +1,19 @@
+/**
+ * @file packages/chart-renderer-canvas/src/renderers/crosshair-renderer.ts
+ * Interactive crosshair guidelines, price/time axis badges, and highlight markers.
+ */
+import type { ChartTheme, Dimension, Padding } from '@tranding-custom-chart/core';
+export interface CrosshairRenderOptions {
+    readonly ctx: CanvasRenderingContext2D;
+    readonly bounds: Dimension;
+    readonly padding: Padding;
+    readonly x: number;
+    readonly y: number;
+    readonly theme: ChartTheme;
+    readonly dpr: number;
+    readonly xLabel?: string | undefined;
+    readonly yLabel?: string | undefined;
+    readonly showHorizontalLine?: boolean | undefined;
+}
+export declare function renderCrosshair(options: CrosshairRenderOptions): void;
+//# sourceMappingURL=crosshair-renderer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"crosshair-renderer.d.ts","sourceRoot":"","sources":["../../src/renderers/crosshair-renderer.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,6BAA6B,CAAC;AAGlF,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,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,KAAK,EAAE,UAAU,CAAC;IAC3B,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACrC,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACrC,QAAQ,CAAC,kBAAkB,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CACnD;AAED,wBAAgB,eAAe,CAAC,OAAO,EAAE,sBAAsB,GAAG,IAAI,CA6ErE"}