@qfo/qfchart 0.6.7 → 0.7.1

package/src/components/renderers/DrawingLineRenderer.ts

@@ -0,0 +1,194 @@
+import { SeriesRenderer, RenderContext } from './SeriesRenderer';
+
+/**
+ * Renderer for Pine Script line.* drawing objects.
+ * Each line is defined by two endpoints (x1,y1) → (x2,y2) with optional
+ * extend, dash style, and arrow heads.
+ *
+ * Style name: 'drawing_line' (distinct from 'line' used by plot()).
+ */
+export class DrawingLineRenderer implements SeriesRenderer {
+    render(context: RenderContext): any {
+        const { seriesName, xAxisIndex, yAxisIndex, dataArray, dataIndexOffset } = context;
+        const offset = dataIndexOffset || 0;
+        const defaultColor = '#2962ff';
+
+        // Collect all non-null, non-deleted line objects from the sparse dataArray.
+        // Drawing objects are stored as an array of all lines in a single data entry
+        // (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[] = [];
+
+        for (let i = 0; i < dataArray.length; i++) {
+            const val = dataArray[i];
+            if (!val) continue;
+
+            const items = Array.isArray(val) ? val : [val];
+            for (const ln of items) {
+                if (ln && typeof ln === 'object' && !ln._deleted) {
+                    lineObjects.push(ln);
+                }
+            }
+        }
+
+        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 children: any[] = [];
+
+                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: [[0, lastBarIndex, yMin, yMax]],
+            clip: true,
+            encode: { x: [0, 1], y: [2, 3] },
+            z: 15,
+            silent: true,
+            emphasis: { disabled: true },
+        };
+    }
+
+    private getDashPattern(style: string): number[] | undefined {
+        switch (style) {
+            case 'style_dotted':
+                return [2, 2];
+            case 'style_dashed':
+                return [6, 4];
+            default:
+                return undefined;
+        }
+    }
+
+    private extendLine(
+        p1: number[],
+        p2: number[],
+        extend: string,
+        left: number,
+        right: number,
+        top: number,
+        bottom: number,
+    ): [number[], number[]] {
+        const dx = p2[0] - p1[0];
+        const dy = p2[1] - p1[1];
+
+        if (dx === 0 && dy === 0) return [p1, p2];
+
+        const extendPoint = (origin: number[], dir: number[]): number[] => {
+            let tMax = Infinity;
+            if (dir[0] !== 0) {
+                const tx = dir[0] > 0 ? (right - origin[0]) / dir[0] : (left - origin[0]) / dir[0];
+                tMax = Math.min(tMax, tx);
+            }
+            if (dir[1] !== 0) {
+                const ty = dir[1] > 0 ? (bottom - origin[1]) / dir[1] : (top - origin[1]) / dir[1];
+                tMax = Math.min(tMax, ty);
+            }
+            if (!isFinite(tMax)) tMax = 0;
+            return [origin[0] + tMax * dir[0], origin[1] + tMax * dir[1]];
+        };
+
+        let newP1 = p1;
+        let newP2 = p2;
+
+        if (extend === 'right' || extend === 'both') {
+            newP2 = extendPoint(p1, [dx, dy]);
+        }
+        if (extend === 'left' || extend === 'both') {
+            newP1 = extendPoint(p2, [-dx, -dy]);
+        }
+
+        return [newP1, newP2];
+    }
+
+    private arrowHead(from: number[], to: number[], lineWidth: number, color: string): any {
+        const dx = to[0] - from[0];
+        const dy = to[1] - from[1];
+        const len = Math.sqrt(dx * dx + dy * dy);
+        if (len < 1) return null;
+
+        const size = Math.max(8, lineWidth * 4);
+        const nx = dx / len;
+        const ny = dy / len;
+
+        // Arrow tip at `to`, base offset back by `size`
+        const bx = to[0] - nx * size;
+        const by = to[1] - ny * size;
+
+        // Perpendicular offset for arrowhead width
+        const px = -ny * size * 0.4;
+        const py = nx * size * 0.4;
+
+        return {
+            type: 'polygon',
+            shape: {
+                points: [
+                    [to[0], to[1]],
+                    [bx + px, by + py],
+                    [bx - px, by - py],
+                ],
+            },
+            style: { fill: color },
+        };
+    }
+}

package/src/components/renderers/FillRenderer.ts

@@ -1,99 +1,99 @@
-import { SeriesRenderer, RenderContext } from './SeriesRenderer';
-import { ColorUtils } from '../../utils/ColorUtils';
-
-export class FillRenderer implements SeriesRenderer {
-    render(context: RenderContext): any {
-        const { seriesName, xAxisIndex, yAxisIndex, plotOptions, plotDataArrays, indicatorId, plotName } = context;
-        const totalDataLength = context.dataArray.length; // Use length from dataArray placeholder
-
-        // Fill plots reference other plots to fill the area between them
-        const plot1Key = plotOptions.plot1 ? `${indicatorId}::${plotOptions.plot1}` : null;
-        const plot2Key = plotOptions.plot2 ? `${indicatorId}::${plotOptions.plot2}` : null;
-
-        if (!plot1Key || !plot2Key) {
-            console.warn(`Fill plot "${plotName}" missing plot1 or plot2 reference`);
-            return null;
-        }
-
-        const plot1Data = plotDataArrays?.get(plot1Key);
-        const plot2Data = plotDataArrays?.get(plot2Key);
-
-        if (!plot1Data || !plot2Data) {
-            console.warn(`Fill plot "${plotName}" references non-existent plots: ${plotOptions.plot1}, ${plotOptions.plot2}`);
-            return null;
-        }
-
-        // Parse color to extract opacity
-        const { color: fillColor, opacity: fillOpacity } = ColorUtils.parseColor(plotOptions.color || 'rgba(128, 128, 128, 0.2)');
-
-        // Create fill data with previous values for smooth polygon rendering
-        const fillDataWithPrev: any[] = [];
-        for (let i = 0; i < totalDataLength; i++) {
-            const y1 = plot1Data[i];
-            const y2 = plot2Data[i];
-            const prevY1 = i > 0 ? plot1Data[i - 1] : null;
-            const prevY2 = i > 0 ? plot2Data[i - 1] : null;
-
-            fillDataWithPrev.push([i, y1, y2, prevY1, prevY2]);
-        }
-
-        // Add fill series with smooth area rendering
-        return {
-            name: seriesName,
-            type: 'custom',
-            xAxisIndex: xAxisIndex,
-            yAxisIndex: yAxisIndex,
-            z: -5, // Render behind lines but above background
-            renderItem: (params: any, api: any) => {
-                const index = params.dataIndex;
-
-                // Skip first point (no previous to connect to)
-                if (index === 0) return null;
-
-                const y1 = api.value(1); // Current upper
-                const y2 = api.value(2); // Current lower
-                const prevY1 = api.value(3); // Previous upper
-                const prevY2 = api.value(4); // Previous lower
-
-                // Skip if any value is null/NaN
-                if (
-                    y1 === null ||
-                    y2 === null ||
-                    prevY1 === null ||
-                    prevY2 === null ||
-                    isNaN(y1) ||
-                    isNaN(y2) ||
-                    isNaN(prevY1) ||
-                    isNaN(prevY2)
-                ) {
-                    return null;
-                }
-
-                // Get pixel coordinates for all 4 points
-                const p1Prev = api.coord([index - 1, prevY1]); // Previous upper
-                const p1Curr = api.coord([index, y1]); // Current upper
-                const p2Curr = api.coord([index, y2]); // Current lower
-                const p2Prev = api.coord([index - 1, prevY2]); // Previous lower
-
-                // Create a smooth polygon connecting the segments
-                return {
-                    type: 'polygon',
-                    shape: {
-                        points: [
-                            p1Prev, // Top-left
-                            p1Curr, // Top-right
-                            p2Curr, // Bottom-right
-                            p2Prev, // Bottom-left
-                        ],
-                    },
-                    style: {
-                        fill: fillColor,
-                        opacity: fillOpacity,
-                    },
-                    silent: true,
-                };
-            },
-            data: fillDataWithPrev,
-        };
-    }
-}
+import { SeriesRenderer, RenderContext } from './SeriesRenderer';
+import { ColorUtils } from '../../utils/ColorUtils';
+
+export class FillRenderer implements SeriesRenderer {
+    render(context: RenderContext): any {
+        const { seriesName, xAxisIndex, yAxisIndex, plotOptions, plotDataArrays, indicatorId, plotName } = context;
+        const totalDataLength = context.dataArray.length; // Use length from dataArray placeholder
+
+        // Fill plots reference other plots to fill the area between them
+        const plot1Key = plotOptions.plot1 ? `${indicatorId}::${plotOptions.plot1}` : null;
+        const plot2Key = plotOptions.plot2 ? `${indicatorId}::${plotOptions.plot2}` : null;
+
+        if (!plot1Key || !plot2Key) {
+            console.warn(`Fill plot "${plotName}" missing plot1 or plot2 reference`);
+            return null;
+        }
+
+        const plot1Data = plotDataArrays?.get(plot1Key);
+        const plot2Data = plotDataArrays?.get(plot2Key);
+
+        if (!plot1Data || !plot2Data) {
+            console.warn(`Fill plot "${plotName}" references non-existent plots: ${plotOptions.plot1}, ${plotOptions.plot2}`);
+            return null;
+        }
+
+        // Parse color to extract opacity
+        const { color: fillColor, opacity: fillOpacity } = ColorUtils.parseColor(plotOptions.color || 'rgba(128, 128, 128, 0.2)');
+
+        // Create fill data with previous values for smooth polygon rendering
+        const fillDataWithPrev: any[] = [];
+        for (let i = 0; i < totalDataLength; i++) {
+            const y1 = plot1Data[i];
+            const y2 = plot2Data[i];
+            const prevY1 = i > 0 ? plot1Data[i - 1] : null;
+            const prevY2 = i > 0 ? plot2Data[i - 1] : null;
+
+            fillDataWithPrev.push([i, y1, y2, prevY1, prevY2]);
+        }
+
+        // Add fill series with smooth area rendering
+        return {
+            name: seriesName,
+            type: 'custom',
+            xAxisIndex: xAxisIndex,
+            yAxisIndex: yAxisIndex,
+            z: 1, // Behind plot lines (z=2) and candles (z=5), above grid background
+            renderItem: (params: any, api: any) => {
+                const index = params.dataIndex;
+
+                // Skip first point (no previous to connect to)
+                if (index === 0) return null;
+
+                const y1 = api.value(1); // Current upper
+                const y2 = api.value(2); // Current lower
+                const prevY1 = api.value(3); // Previous upper
+                const prevY2 = api.value(4); // Previous lower
+
+                // Skip if any value is null/NaN
+                if (
+                    y1 === null ||
+                    y2 === null ||
+                    prevY1 === null ||
+                    prevY2 === null ||
+                    isNaN(y1) ||
+                    isNaN(y2) ||
+                    isNaN(prevY1) ||
+                    isNaN(prevY2)
+                ) {
+                    return null;
+                }
+
+                // Get pixel coordinates for all 4 points
+                const p1Prev = api.coord([index - 1, prevY1]); // Previous upper
+                const p1Curr = api.coord([index, y1]); // Current upper
+                const p2Curr = api.coord([index, y2]); // Current lower
+                const p2Prev = api.coord([index - 1, prevY2]); // Previous lower
+
+                // Create a smooth polygon connecting the segments
+                return {
+                    type: 'polygon',
+                    shape: {
+                        points: [
+                            p1Prev, // Top-left
+                            p1Curr, // Top-right
+                            p2Curr, // Bottom-right
+                            p2Prev, // Bottom-left
+                        ],
+                    },
+                    style: {
+                        fill: fillColor,
+                        opacity: fillOpacity,
+                    },
+                    silent: true,
+                };
+            },
+            data: fillDataWithPrev,
+        };
+    }
+}

package/src/components/renderers/LabelRenderer.ts

@@ -3,16 +3,27 @@ import { ShapeUtils } from '../../utils/ShapeUtils';
 
 export class LabelRenderer implements SeriesRenderer {
     render(context: RenderContext): any {
-        const { seriesName, xAxisIndex, yAxisIndex, dataArray, candlestickData } = context;
+        const { seriesName, xAxisIndex, yAxisIndex, dataArray, candlestickData, dataIndexOffset } = context;
+        const offset = dataIndexOffset || 0;
 
-        const labelData = dataArray
-            .map((val, i) => {
-                if (val === null || val === undefined) return null;
-
-                // val is a label object: {id, x, y, text, xloc, yloc, color, style, textcolor, size, textalign, tooltip}
-                const lbl = typeof val === 'object' ? val : null;
-                if (!lbl) return null;
+        // Collect all non-null, non-deleted label objects from the sparse dataArray.
+        // Drawing objects are stored as an array of all labels in a single data entry
+        // (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 labelObjects: 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 lbl of items) {
+                if (lbl && typeof lbl === 'object' && !lbl._deleted) {
+                    labelObjects.push(lbl);
+                }
+            }
+        }
 
+        const labelData = labelObjects
+            .map((lbl) => {
                 const text = lbl.text || '';
                 const color = lbl.color || '#2962ff';
                 const textcolor = lbl.textcolor || '#ffffff';
@@ -25,18 +36,21 @@ export class LabelRenderer implements SeriesRenderer {
                 // Map Pine style string to shape name for ShapeUtils
                 const shape = this.styleToShape(styleRaw);
 
+                // Determine X position using label's own x coordinate
+                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 (candlestickData && candlestickData[i]) {
-                        yValue = candlestickData[i].high;
+                if (yloc === 'abovebar' || yloc === 'AboveBar' || yloc === 'ab') {
+                    if (candlestickData && candlestickData[xPos]) {
+                        yValue = candlestickData[xPos].high;
                     }
                     symbolOffset = [0, '-150%'];
-                } else if (yloc === 'belowbar') {
-                    if (candlestickData && candlestickData[i]) {
-                        yValue = candlestickData[i].low;
+                } else if (yloc === 'belowbar' || yloc === 'BelowBar' || yloc === 'bl') {
+                    if (candlestickData && candlestickData[xPos]) {
+                        yValue = candlestickData[xPos].low;
                     }
                     symbolOffset = [0, '150%'];
                 }
@@ -50,24 +64,59 @@ export class LabelRenderer implements SeriesRenderer {
 
                 // Dynamically size the bubble to fit text content
                 let finalSize: number | number[];
-                if (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)
+                let labelTextOffset: [number, number] = [0, 0];
+
+                if (isBubble) {
                     // Approximate text width: chars * fontSize * avgCharWidthRatio (bold)
                     const textWidth = text.length * fontSize * 0.65;
                     const minWidth = fontSize * 2.5;
                     const bubbleWidth = Math.max(minWidth, textWidth + fontSize * 1.6);
                     const bubbleHeight = fontSize * 2.8;
-                    finalSize = [bubbleWidth, bubbleHeight];
-
-                    // Offset bubble so the pointer tip sits at the anchor price.
-                    // The SVG path pointer is ~20% of total height.
-                    if (shape === 'labeldown') {
-                        symbolOffset = [symbolOffset[0], typeof symbolOffset[1] === 'string'
-                            ? symbolOffset[1]
-                            : (symbolOffset[1] as number) - bubbleHeight * 0.35];
+
+                    // SVG pointer takes 3/24 = 12.5% of the path dimension
+                    const pointerRatio = 3 / 24;
+
+                    if (shape === 'labelleft' || shape === 'labelright') {
+                        // Add extra width for the pointer
+                        const totalWidth = bubbleWidth / (1 - pointerRatio);
+                        finalSize = [totalWidth, bubbleHeight];
+
+                        // Offset so the pointer tip sits at the anchor x position.
+                        const xOff = typeof symbolOffset[0] === 'string' ? 0
+                            : (symbolOffset[0] as number);
+                        if (shape === 'labelleft') {
+                            // Pointer on left → shift bubble body to the right
+                            symbolOffset = [xOff + totalWidth * 0.42, symbolOffset[1]];
+                            // Shift text right to center within body (not pointer)
+                            labelTextOffset = [totalWidth * pointerRatio * 0.5, 0];
+                        } else {
+                            // Pointer on right → shift bubble body to the left
+                            symbolOffset = [xOff - totalWidth * 0.42, symbolOffset[1]];
+                            // Shift text left to center within body
+                            labelTextOffset = [-totalWidth * pointerRatio * 0.5, 0];
+                        }
                     } else {
-                        symbolOffset = [symbolOffset[0], typeof symbolOffset[1] === 'string'
-                            ? symbolOffset[1]
-                            : (symbolOffset[1] as number) + bubbleHeight * 0.35];
+                        // Vertical pointer (up/down)
+                        const totalHeight = bubbleHeight / (1 - pointerRatio);
+                        finalSize = [bubbleWidth, totalHeight];
+
+                        // Offset bubble so the pointer tip sits at the anchor price.
+                        if (shape === 'labeldown') {
+                            symbolOffset = [symbolOffset[0], typeof symbolOffset[1] === 'string'
+                                ? symbolOffset[1]
+                                : (symbolOffset[1] as number) - totalHeight * 0.42];
+                            labelTextOffset = [0, -totalHeight * pointerRatio * 0.5];
+                        } else {
+                            symbolOffset = [symbolOffset[0], typeof symbolOffset[1] === 'string'
+                                ? symbolOffset[1]
+                                : (symbolOffset[1] as number) + totalHeight * 0.42];
+                            labelTextOffset = [0, totalHeight * pointerRatio * 0.5];
+                        }
                     }
                 } else if (shape === 'none') {
                     finalSize = 0;
@@ -85,7 +134,7 @@ export class LabelRenderer implements SeriesRenderer {
                     labelPosition.startsWith('inside');
 
                 const item: any = {
-                    value: [i, yValue],
+                    value: [xPos, yValue],
                     symbol: symbol,
                     symbolSize: finalSize,
                     symbolOffset: symbolOffset,
@@ -96,13 +145,14 @@ export class LabelRenderer implements SeriesRenderer {
                         show: !!text,
                         position: labelPosition,
                         distance: isInsideLabel ? 0 : 5,
+                        offset: labelTextOffset,
                         formatter: text,
                         color: textcolor,
                         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],
@@ -137,9 +187,9 @@ export class LabelRenderer implements SeriesRenderer {
             case 'label_up':
                 return 'labelup';
             case 'label_left':
-                return 'labeldown'; // Use labeldown shape, position text left
+                return 'labelleft';
             case 'label_right':
-                return 'labeldown'; // Use labeldown shape, position text right
+                return 'labelright';
             case 'label_lower_left':
                 return 'labeldown';
             case 'label_lower_right':
@@ -183,31 +233,25 @@ export class LabelRenderer implements SeriesRenderer {
         const s = style.startsWith('style_') ? style.substring(6) : style;
 
         switch (s) {
+            // All label_* styles render text INSIDE the bubble (TradingView behavior).
+            // The left/right/up/down refers to the pointer direction, not text position.
             case 'label_down':
-                return 'inside';
             case 'label_up':
-                return 'inside';
             case 'label_left':
-                return 'left';
             case 'label_right':
-                return 'right';
             case 'label_lower_left':
-                return 'insideBottomLeft';
             case 'label_lower_right':
-                return 'insideBottomRight';
             case 'label_upper_left':
-                return 'insideTopLeft';
             case 'label_upper_right':
-                return 'insideTopRight';
             case 'label_center':
                 return 'inside';
             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';
         }
     }