@qfo/qfchart 0.6.6 → 0.6.8

package/src/components/renderers/DrawingLineRenderer.ts

@@ -0,0 +1,188 @@
+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[] = [];
+        const lineData: number[][] = [];
+
+        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);
+                    // 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) {
+            return { name: seriesName, type: 'custom', xAxisIndex, yAxisIndex, data: [], silent: true };
+        }
+
+        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);
+                }
+
+                return { type: 'group', children };
+            },
+            data: lineData,
+            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

@@ -0,0 +1,274 @@
+import { SeriesRenderer, RenderContext } from './SeriesRenderer';
+import { ShapeUtils } from '../../utils/ShapeUtils';
+
+export class LabelRenderer implements SeriesRenderer {
+    render(context: RenderContext): any {
+        const { seriesName, xAxisIndex, yAxisIndex, dataArray, candlestickData, dataIndexOffset } = context;
+        const offset = dataIndexOffset || 0;
+
+        // 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';
+                const yloc = lbl.yloc || 'price';
+                const styleRaw = lbl.style || 'style_label_down';
+                const size = lbl.size || 'normal';
+                const textalign = lbl.textalign || 'align_center';
+                const tooltip = lbl.tooltip || '';
+
+                // 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.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[xPos]) {
+                        yValue = candlestickData[xPos].high;
+                    }
+                    symbolOffset = [0, '-150%'];
+                } else if (yloc === 'belowbar') {
+                    if (candlestickData && candlestickData[xPos]) {
+                        yValue = candlestickData[xPos].low;
+                    }
+                    symbolOffset = [0, '150%'];
+                }
+
+                // Get symbol from ShapeUtils
+                const symbol = ShapeUtils.getShapeSymbol(shape);
+                const symbolSize = ShapeUtils.getShapeSize(size);
+
+                // Compute font size for this label
+                const fontSize = this.getSizePx(size);
+
+                // Dynamically size the bubble to fit text content
+                let finalSize: number | number[];
+                const isBubble = shape === 'labeldown' || shape === 'labelup' ||
+                    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;
+
+                    // 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 {
+                        // 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;
+                } else {
+                    if (Array.isArray(symbolSize)) {
+                        finalSize = [symbolSize[0] * 1.5, symbolSize[1] * 1.5];
+                    } else {
+                        finalSize = symbolSize * 1.5;
+                    }
+                }
+
+                // Determine label position based on style direction
+                const labelPosition = this.getLabelPosition(styleRaw, yloc);
+                const isInsideLabel = labelPosition === 'inside' ||
+                    labelPosition.startsWith('inside');
+
+                const item: any = {
+                    value: [xPos, yValue],
+                    symbol: symbol,
+                    symbolSize: finalSize,
+                    symbolOffset: symbolOffset,
+                    itemStyle: {
+                        color: color,
+                    },
+                    label: {
+                        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'
+                            : 'center',
+                        verticalAlign: 'middle',
+                        padding: [2, 6],
+                    },
+                };
+
+                if (tooltip) {
+                    item.tooltip = { formatter: tooltip };
+                }
+
+                return item;
+            })
+            .filter((item) => item !== null);
+
+        return {
+            name: seriesName,
+            type: 'scatter',
+            xAxisIndex: xAxisIndex,
+            yAxisIndex: yAxisIndex,
+            data: labelData,
+            z: 20,
+        };
+    }
+
+    private styleToShape(style: string): string {
+        // Strip 'style_' prefix
+        const s = style.startsWith('style_') ? style.substring(6) : style;
+
+        switch (s) {
+            case 'label_down':
+                return 'labeldown';
+            case 'label_up':
+                return 'labelup';
+            case 'label_left':
+                return 'labelleft';
+            case 'label_right':
+                return 'labelright';
+            case 'label_lower_left':
+                return 'labeldown';
+            case 'label_lower_right':
+                return 'labeldown';
+            case 'label_upper_left':
+                return 'labelup';
+            case 'label_upper_right':
+                return 'labelup';
+            case 'label_center':
+                return 'labeldown';
+            case 'circle':
+                return 'circle';
+            case 'square':
+                return 'square';
+            case 'diamond':
+                return 'diamond';
+            case 'flag':
+                return 'flag';
+            case 'arrowup':
+                return 'arrowup';
+            case 'arrowdown':
+                return 'arrowdown';
+            case 'cross':
+                return 'cross';
+            case 'xcross':
+                return 'xcross';
+            case 'triangleup':
+                return 'triangleup';
+            case 'triangledown':
+                return 'triangledown';
+            case 'text_outline':
+                return 'none';
+            case 'none':
+                return 'none';
+            default:
+                return 'labeldown';
+        }
+    }
+
+    private getLabelPosition(style: string, yloc: string): string {
+        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':
+            case 'label_up':
+            case 'label_left':
+            case 'label_right':
+            case 'label_lower_left':
+            case 'label_lower_right':
+            case 'label_upper_left':
+            case 'label_upper_right':
+            case 'label_center':
+                return 'inside';
+            case 'text_outline':
+            case 'none':
+                // Text only, positioned based on yloc
+                return yloc === 'abovebar' ? 'top' : yloc === 'belowbar' ? 'bottom' : 'top';
+            default:
+                // For simple shapes (circle, diamond, etc.), text goes outside
+                return yloc === 'belowbar' ? 'bottom' : 'top';
+        }
+    }
+
+    private getSizePx(size: string): number {
+        switch (size) {
+            case 'tiny':
+                return 8;
+            case 'small':
+                return 9;
+            case 'normal':
+            case 'auto':
+                return 10;
+            case 'large':
+                return 12;
+            case 'huge':
+                return 14;
+            default:
+                return 10;
+        }
+    }
+}