@qfo/qfchart 0.6.8 → 0.7.1

package/src/components/renderers/DrawingLineRenderer.ts

@@ -18,7 +18,6 @@ export class DrawingLineRenderer implements SeriesRenderer {
         // (since multiple objects at the same bar would overwrite each other in the
         // sparse array). Handle both array-of-objects and single-object entries.
         const lineObjects: any[] = [];
-        const lineData: number[][] = [];
 
         for (let i = 0; i < dataArray.length; i++) {
             const val = dataArray[i];
@@ -28,75 +27,82 @@ export class DrawingLineRenderer implements SeriesRenderer {
             for (const ln of items) {
                 if (ln && typeof ln === 'object' && !ln._deleted) {
                     lineObjects.push(ln);
-                    // Apply padding offset for bar_index-based coordinates
-                    const xOff = ln.xloc === 'bar_index' ? offset : 0;
-                    lineData.push([ln.x1 + xOff, ln.y1, ln.x2 + xOff, ln.y2]);
                 }
             }
         }
 
-        if (lineData.length === 0) {
+        if (lineObjects.length === 0) {
             return { name: seriesName, type: 'custom', xAxisIndex, yAxisIndex, data: [], silent: true };
         }
 
+        // Compute y-range for axis scaling
+        let yMin = Infinity, yMax = -Infinity;
+        for (const ln of lineObjects) {
+            if (ln.y1 < yMin) yMin = ln.y1;
+            if (ln.y1 > yMax) yMax = ln.y1;
+            if (ln.y2 < yMin) yMin = ln.y2;
+            if (ln.y2 > yMax) yMax = ln.y2;
+        }
+
+        // Use a SINGLE data entry spanning the full x-range so renderItem is always called.
+        // ECharts filters a data item only when ALL its x-dimensions are on the same side
+        // of the visible window.  With dims 0=0 and 1=lastBar the item always straddles
+        // the viewport, so renderItem fires exactly once regardless of scroll position.
+        // Dims 2/3 are yMin/yMax for axis scaling.
+        const totalBars = (context.candlestickData?.length || 0) + offset;
+        const lastBarIndex = Math.max(0, totalBars - 1);
+
         return {
             name: seriesName,
             type: 'custom',
             xAxisIndex,
             yAxisIndex,
             renderItem: (params: any, api: any) => {
-                const idx = params.dataIndex;
-                const ln = lineObjects[idx];
-                if (!ln || ln._deleted) return;
-
-                const x1 = api.value(0);
-                const y1 = api.value(1);
-                const x2 = api.value(2);
-                const y2 = api.value(3);
-
-                let p1 = api.coord([x1, y1]);
-                let p2 = api.coord([x2, y2]);
-
-                // Handle extend (none | left | right | both)
-                const extend = ln.extend || 'none';
-                if (extend !== 'none') {
-                    const cs = params.coordSys;
-                    const left = cs.x;
-                    const right = cs.x + cs.width;
-                    const top = cs.y;
-                    const bottom = cs.y + cs.height;
-                    [p1, p2] = this.extendLine(p1, p2, extend, left, right, top, bottom);
-                }
-
                 const children: any[] = [];
-                const color = ln.color || defaultColor;
-                const lineWidth = ln.width || 1;
-
-                // Main line segment
-                children.push({
-                    type: 'line',
-                    shape: { x1: p1[0], y1: p1[1], x2: p2[0], y2: p2[1] },
-                    style: {
-                        stroke: color,
-                        lineWidth: lineWidth,
-                        lineDash: this.getDashPattern(ln.style),
-                    },
-                });
-
-                // Arrow heads based on style
-                const style = ln.style || 'style_solid';
-                if (style === 'style_arrow_left' || style === 'style_arrow_both') {
-                    const arrow = this.arrowHead(p2, p1, lineWidth, color);
-                    if (arrow) children.push(arrow);
-                }
-                if (style === 'style_arrow_right' || style === 'style_arrow_both') {
-                    const arrow = this.arrowHead(p1, p2, lineWidth, color);
-                    if (arrow) children.push(arrow);
+
+                for (const ln of lineObjects) {
+                    if (ln._deleted) continue;
+                    const xOff = (ln.xloc === 'bar_index' || ln.xloc === 'bi') ? offset : 0;
+
+                    let p1 = api.coord([ln.x1 + xOff, ln.y1]);
+                    let p2 = api.coord([ln.x2 + xOff, ln.y2]);
+
+                    // Handle extend (none | left | right | both)
+                    const extend = ln.extend || 'none';
+                    if (extend !== 'none') {
+                        const cs = params.coordSys;
+                        [p1, p2] = this.extendLine(p1, p2, extend, cs.x, cs.x + cs.width, cs.y, cs.y + cs.height);
+                    }
+
+                    const color = ln.color || defaultColor;
+                    const lineWidth = ln.width || 1;
+
+                    children.push({
+                        type: 'line',
+                        shape: { x1: p1[0], y1: p1[1], x2: p2[0], y2: p2[1] },
+                        style: {
+                            stroke: color,
+                            lineWidth,
+                            lineDash: this.getDashPattern(ln.style),
+                        },
+                    });
+
+                    const style = ln.style || 'style_solid';
+                    if (style === 'style_arrow_left' || style === 'style_arrow_both') {
+                        const arrow = this.arrowHead(p2, p1, lineWidth, color);
+                        if (arrow) children.push(arrow);
+                    }
+                    if (style === 'style_arrow_right' || style === 'style_arrow_both') {
+                        const arrow = this.arrowHead(p1, p2, lineWidth, color);
+                        if (arrow) children.push(arrow);
+                    }
                 }
 
                 return { type: 'group', children };
             },
-            data: lineData,
+            data: [[0, lastBarIndex, yMin, yMax]],
+            clip: true,
+            encode: { x: [0, 1], y: [2, 3] },
             z: 15,
             silent: true,
             emphasis: { disabled: true },

package/src/components/renderers/LabelRenderer.ts

@@ -37,18 +37,18 @@ export class LabelRenderer implements SeriesRenderer {
                 const shape = this.styleToShape(styleRaw);
 
                 // Determine X position using label's own x coordinate
-                const xPos = lbl.xloc === 'bar_index' ? (lbl.x + offset) : lbl.x;
+                const xPos = (lbl.xloc === 'bar_index' || lbl.xloc === 'bi') ? (lbl.x + offset) : lbl.x;
 
                 // Determine Y value based on yloc
                 let yValue = lbl.y;
                 let symbolOffset: (string | number)[] = [0, 0];
 
-                if (yloc === 'abovebar') {
+                if (yloc === 'abovebar' || yloc === 'AboveBar' || yloc === 'ab') {
                     if (candlestickData && candlestickData[xPos]) {
                         yValue = candlestickData[xPos].high;
                     }
                     symbolOffset = [0, '-150%'];
-                } else if (yloc === 'belowbar') {
+                } else if (yloc === 'belowbar' || yloc === 'BelowBar' || yloc === 'bl') {
                     if (candlestickData && candlestickData[xPos]) {
                         yValue = candlestickData[xPos].low;
                     }
@@ -64,7 +64,8 @@ export class LabelRenderer implements SeriesRenderer {
 
                 // Dynamically size the bubble to fit text content
                 let finalSize: number | number[];
-                const isBubble = shape === 'labeldown' || shape === 'labelup' ||
+                const isBubble = shape === 'labeldown' || shape === 'shape_label_down' ||
+                    shape === 'labelup' || shape === 'shape_label_up' ||
                     shape === 'labelleft' || shape === 'labelright';
                 // Track label text offset for centering text within the body
                 // (excluding the pointer area)
@@ -150,8 +151,8 @@ export class LabelRenderer implements SeriesRenderer {
                         fontSize: fontSize,
                         fontWeight: 'bold',
                         align: isInsideLabel ? 'center'
-                            : textalign === 'align_left' ? 'left'
-                            : textalign === 'align_right' ? 'right'
+                            : (textalign === 'align_left' || textalign === 'left') ? 'left'
+                            : (textalign === 'align_right' || textalign === 'right') ? 'right'
                             : 'center',
                         verticalAlign: 'middle',
                         padding: [2, 6],
@@ -247,10 +248,10 @@ export class LabelRenderer implements SeriesRenderer {
             case 'text_outline':
             case 'none':
                 // Text only, positioned based on yloc
-                return yloc === 'abovebar' ? 'top' : yloc === 'belowbar' ? 'bottom' : 'top';
+                return (yloc === 'abovebar' || yloc === 'AboveBar' || yloc === 'ab') ? 'top' : (yloc === 'belowbar' || yloc === 'BelowBar' || yloc === 'bl') ? 'bottom' : 'top';
             default:
                 // For simple shapes (circle, diamond, etc.), text goes outside
-                return yloc === 'belowbar' ? 'bottom' : 'top';
+                return (yloc === 'belowbar' || yloc === 'BelowBar' || yloc === 'bl') ? 'bottom' : 'top';
         }
     }
 

package/src/components/renderers/LinefillRenderer.ts

@@ -16,7 +16,6 @@ export class LinefillRenderer implements SeriesRenderer {
         // Same aggregation pattern as DrawingLineRenderer — objects are stored
         // as an array in a single data entry.
         const fillObjects: any[] = [];
-        const fillData: number[][] = [];
 
         for (let i = 0; i < dataArray.length; i++) {
             const val = dataArray[i];
@@ -31,93 +30,82 @@ export class LinefillRenderer implements SeriesRenderer {
                 if (!line1 || !line2 || line1._deleted || line2._deleted) continue;
 
                 fillObjects.push(lf);
-
-                // Store all 8 coordinates for the two lines
-                const xOff1 = line1.xloc === 'bar_index' ? offset : 0;
-                const xOff2 = line2.xloc === 'bar_index' ? offset : 0;
-                fillData.push([
-                    line1.x1 + xOff1, line1.y1,
-                    line1.x2 + xOff1, line1.y2,
-                    line2.x1 + xOff2, line2.y1,
-                    line2.x2 + xOff2, line2.y2,
-                ]);
             }
         }
 
-        if (fillData.length === 0) {
+        if (fillObjects.length === 0) {
             return { name: seriesName, type: 'custom', xAxisIndex, yAxisIndex, data: [], silent: true };
         }
 
+        // Compute y-range for axis scaling
+        let yMin = Infinity, yMax = -Infinity;
+        for (const lf of fillObjects) {
+            for (const y of [lf.line1.y1, lf.line1.y2, lf.line2.y1, lf.line2.y2]) {
+                if (y < yMin) yMin = y;
+                if (y > yMax) yMax = y;
+            }
+        }
+
+        // Use a SINGLE data entry spanning the full x-range so renderItem is always called.
+        // ECharts filters a data item only when ALL its x-dimensions are on the same side
+        // of the visible window.  With dims 0=0 and 1=lastBar the item always straddles
+        // the viewport, so renderItem fires exactly once regardless of scroll position.
+        // Dims 2/3 are yMin/yMax for axis scaling.
+        const totalBars = (context.candlestickData?.length || 0) + offset;
+        const lastBarIndex = Math.max(0, totalBars - 1);
+
         return {
             name: seriesName,
             type: 'custom',
             xAxisIndex,
             yAxisIndex,
             renderItem: (params: any, api: any) => {
-                const idx = params.dataIndex;
-                const lf = fillObjects[idx];
-                if (!lf || lf._deleted) return;
-
-                const line1 = lf.line1;
-                const line2 = lf.line2;
-                if (!line1 || !line2 || line1._deleted || line2._deleted) return;
-
-                // Get data values: line1 start, line1 end, line2 start, line2 end
-                const l1x1 = api.value(0);
-                const l1y1 = api.value(1);
-                const l1x2 = api.value(2);
-                const l1y2 = api.value(3);
-                const l2x1 = api.value(4);
-                const l2y1 = api.value(5);
-                const l2x2 = api.value(6);
-                const l2y2 = api.value(7);
-
-                // Convert to pixel coordinates
-                let p1Start = api.coord([l1x1, l1y1]);
-                let p1End = api.coord([l1x2, l1y2]);
-                let p2Start = api.coord([l2x1, l2y1]);
-                let p2End = api.coord([l2x2, l2y2]);
-
-                // Handle line extensions — if lines are extended, extend the fill too
-                const extend1 = line1.extend || 'none';
-                const extend2 = line2.extend || 'none';
-                if (extend1 !== 'none' || extend2 !== 'none') {
-                    const cs = params.coordSys;
-                    const left = cs.x;
-                    const right = cs.x + cs.width;
-                    const top = cs.y;
-                    const bottom = cs.y + cs.height;
-
-                    if (extend1 !== 'none') {
-                        [p1Start, p1End] = this.extendLine(p1Start, p1End, extend1, left, right, top, bottom);
-                    }
-                    if (extend2 !== 'none') {
-                        [p2Start, p2End] = this.extendLine(p2Start, p2End, extend2, left, right, top, bottom);
+                const children: any[] = [];
+
+                for (const lf of fillObjects) {
+                    if (lf._deleted) continue;
+                    const line1 = lf.line1;
+                    const line2 = lf.line2;
+                    if (!line1 || !line2 || line1._deleted || line2._deleted) continue;
+
+                    const xOff1 = (line1.xloc === 'bar_index' || line1.xloc === 'bi') ? offset : 0;
+                    const xOff2 = (line2.xloc === 'bar_index' || line2.xloc === 'bi') ? offset : 0;
+
+                    let p1Start = api.coord([line1.x1 + xOff1, line1.y1]);
+                    let p1End = api.coord([line1.x2 + xOff1, line1.y2]);
+                    let p2Start = api.coord([line2.x1 + xOff2, line2.y1]);
+                    let p2End = api.coord([line2.x2 + xOff2, line2.y2]);
+
+                    // Handle line extensions
+                    const extend1 = line1.extend || 'none';
+                    const extend2 = line2.extend || 'none';
+                    if (extend1 !== 'none' || extend2 !== 'none') {
+                        const cs = params.coordSys;
+                        const csLeft = cs.x, csRight = cs.x + cs.width;
+                        const csTop = cs.y, csBottom = cs.y + cs.height;
+                        if (extend1 !== 'none') {
+                            [p1Start, p1End] = this.extendLine(p1Start, p1End, extend1, csLeft, csRight, csTop, csBottom);
+                        }
+                        if (extend2 !== 'none') {
+                            [p2Start, p2End] = this.extendLine(p2Start, p2End, extend2, csLeft, csRight, csTop, csBottom);
+                        }
                     }
+
+                    const { color: fillColor, opacity: fillOpacity } = ColorUtils.parseColor(lf.color || 'rgba(128, 128, 128, 0.2)');
+
+                    children.push({
+                        type: 'polygon',
+                        shape: { points: [p1Start, p1End, p2End, p2Start] },
+                        style: { fill: fillColor, opacity: fillOpacity },
+                        silent: true,
+                    });
                 }
 
-                // Parse color
-                const { color: fillColor, opacity: fillOpacity } = ColorUtils.parseColor(lf.color || 'rgba(128, 128, 128, 0.2)');
-
-                // Create a polygon: line1.start → line1.end → line2.end → line2.start
-                return {
-                    type: 'polygon',
-                    shape: {
-                        points: [
-                            p1Start,
-                            p1End,
-                            p2End,
-                            p2Start,
-                        ],
-                    },
-                    style: {
-                        fill: fillColor,
-                        opacity: fillOpacity,
-                    },
-                    silent: true,
-                };
+                return { type: 'group', children };
             },
-            data: fillData,
+            data: [[0, lastBarIndex, yMin, yMax]],
+            clip: true,
+            encode: { x: [0, 1], y: [2, 3] },
             z: 10, // Behind lines (z=15) but above other elements
             silent: true,
             emphasis: { disabled: true },

package/src/components/renderers/PolylineRenderer.ts

@@ -0,0 +1,197 @@
+import { SeriesRenderer, RenderContext } from './SeriesRenderer';
+import { ColorUtils } from '../../utils/ColorUtils';
+
+/**
+ * Renderer for Pine Script polyline.* drawing objects.
+ * Each polyline is defined by an array of chart.point objects, connected
+ * sequentially with straight or curved segments, optionally closed and filled.
+ *
+ * Style name: 'drawing_polyline'
+ */
+export class PolylineRenderer implements SeriesRenderer {
+    render(context: RenderContext): any {
+        const { seriesName, xAxisIndex, yAxisIndex, dataArray, dataIndexOffset } = context;
+        const offset = dataIndexOffset || 0;
+
+        // Collect all non-deleted polyline objects from the sparse dataArray.
+        // Same aggregation pattern as DrawingLineRenderer — objects are stored
+        // as an array in a single data entry.
+        const polyObjects: any[] = [];
+
+        for (let i = 0; i < dataArray.length; i++) {
+            const val = dataArray[i];
+            if (!val) continue;
+
+            const items = Array.isArray(val) ? val : [val];
+            for (const pl of items) {
+                if (pl && typeof pl === 'object' && !pl._deleted && pl.points && pl.points.length >= 2) {
+                    polyObjects.push(pl);
+                }
+            }
+        }
+
+        if (polyObjects.length === 0) {
+            return { name: seriesName, type: 'custom', xAxisIndex, yAxisIndex, data: [], silent: true };
+        }
+
+        // Compute y-range across all polylines for axis scaling
+        let yMin = Infinity, yMax = -Infinity;
+        for (const pl of polyObjects) {
+            for (const pt of pl.points) {
+                const p = pt.price ?? 0;
+                if (p < yMin) yMin = p;
+                if (p > yMax) yMax = p;
+            }
+        }
+
+        // Use a SINGLE data entry spanning the full x-range so renderItem is always called.
+        // ECharts filters a data item only when ALL its x-dimensions are on the same side
+        // of the visible window.  With dims 0=0 and 1=lastBar the item always straddles
+        // the viewport, so renderItem fires exactly once regardless of scroll position.
+        // Dims 2/3 are yMin/yMax for axis scaling.
+        const totalBars = (context.candlestickData?.length || 0) + offset;
+        const lastBarIndex = Math.max(0, totalBars - 1);
+
+        return {
+            name: seriesName,
+            type: 'custom',
+            xAxisIndex,
+            yAxisIndex,
+            renderItem: (params: any, api: any) => {
+                const children: any[] = [];
+
+                for (const pl of polyObjects) {
+                    if (pl._deleted) continue;
+                    const points = pl.points;
+                    if (!points || points.length < 2) continue;
+
+                    const useBi = pl.xloc === 'bi' || pl.xloc === 'bar_index';
+                    const xOff = useBi ? offset : 0;
+
+                    // Convert chart.point objects to pixel coordinates
+                    const pixelPoints: number[][] = [];
+                    for (const pt of points) {
+                        const x = useBi ? (pt.index ?? 0) + xOff : (pt.time ?? 0);
+                        const y = pt.price ?? 0;
+                        pixelPoints.push(api.coord([x, y]));
+                    }
+
+                    if (pixelPoints.length < 2) continue;
+
+                    const lineColor = pl.line_color || '#2962ff';
+                    const lineWidth = pl.line_width || 1;
+                    const dashPattern = this.getDashPattern(pl.line_style);
+
+                    // Fill shape (rendered behind stroke)
+                    if (pl.fill_color && pl.fill_color !== '' && pl.fill_color !== 'na') {
+                        const { color: fillColor, opacity: fillOpacity } = ColorUtils.parseColor(pl.fill_color);
+
+                        if (pl.curved) {
+                            const pathData = this.buildCurvedPath(pixelPoints, pl.closed);
+                            children.push({
+                                type: 'path',
+                                shape: { pathData: pathData + ' Z' },
+                                style: { fill: fillColor, opacity: fillOpacity, stroke: 'none' },
+                                silent: true,
+                            });
+                        } else {
+                            children.push({
+                                type: 'polygon',
+                                shape: { points: pixelPoints },
+                                style: { fill: fillColor, opacity: fillOpacity, stroke: 'none' },
+                                silent: true,
+                            });
+                        }
+                    }
+
+                    // Stroke (line segments)
+                    if (pl.curved) {
+                        const pathData = this.buildCurvedPath(pixelPoints, pl.closed);
+                        children.push({
+                            type: 'path',
+                            shape: { pathData },
+                            style: { fill: 'none', stroke: lineColor, lineWidth, lineDash: dashPattern },
+                            silent: true,
+                        });
+                    } else {
+                        const allPoints = pl.closed ? [...pixelPoints, pixelPoints[0]] : pixelPoints;
+                        children.push({
+                            type: 'polyline',
+                            shape: { points: allPoints },
+                            style: { fill: 'none', stroke: lineColor, lineWidth, lineDash: dashPattern },
+                            silent: true,
+                        });
+                    }
+                }
+
+                return { type: 'group', children };
+            },
+            data: [[0, lastBarIndex, yMin, yMax]],
+            clip: true,
+            encode: { x: [0, 1], y: [2, 3] },
+            z: 12,
+            silent: true,
+            emphasis: { disabled: true },
+        };
+    }
+
+    /**
+     * Build an SVG path string for a smooth curve through all points
+     * using Catmull-Rom → cubic bezier conversion.
+     */
+    private buildCurvedPath(points: number[][], closed: boolean): string {
+        const n = points.length;
+        if (n < 2) return '';
+        if (n === 2) {
+            return `M ${points[0][0]} ${points[0][1]} L ${points[1][0]} ${points[1][1]}`;
+        }
+
+        // Catmull-Rom tension (0.5 = centripetal)
+        const tension = 0.5;
+        let path = `M ${points[0][0]} ${points[0][1]}`;
+
+        // For closed curves, wrap around; for open, duplicate first/last
+        const getPoint = (i: number): number[] => {
+            if (closed) {
+                return points[((i % n) + n) % n];
+            }
+            if (i < 0) return points[0];
+            if (i >= n) return points[n - 1];
+            return points[i];
+        };
+
+        const segmentCount = closed ? n : n - 1;
+
+        for (let i = 0; i < segmentCount; i++) {
+            const p0 = getPoint(i - 1);
+            const p1 = getPoint(i);
+            const p2 = getPoint(i + 1);
+            const p3 = getPoint(i + 2);
+
+            // Convert Catmull-Rom to cubic bezier control points
+            const cp1x = p1[0] + (p2[0] - p0[0]) * tension / 3;
+            const cp1y = p1[1] + (p2[1] - p0[1]) * tension / 3;
+            const cp2x = p2[0] - (p3[0] - p1[0]) * tension / 3;
+            const cp2y = p2[1] - (p3[1] - p1[1]) * tension / 3;
+
+            path += ` C ${cp1x} ${cp1y}, ${cp2x} ${cp2y}, ${p2[0]} ${p2[1]}`;
+        }
+
+        if (closed) {
+            path += ' Z';
+        }
+
+        return path;
+    }
+
+    private getDashPattern(style: string): number[] | undefined {
+        switch (style) {
+            case 'style_dotted':
+                return [2, 2];
+            case 'style_dashed':
+                return [6, 4];
+            default:
+                return undefined;
+        }
+    }
+}