@qfo/qfchart 0.6.8 → 0.7.2

package/src/components/SeriesBuilder.ts

@@ -158,6 +158,7 @@ export class SeriesBuilder {
                 // Prepare data arrays
                 // For 'fill' style, we don't use plot.data directly in the same way, but we initialize generic arrays
                 const dataArray = new Array(totalDataLength).fill(null);
+                const rawDataArray = new Array(totalDataLength).fill(null); // Unmodified values for fill references
                 const colorArray = new Array(totalDataLength).fill(null);
                 const optionsArray = new Array(totalDataLength).fill(null); // Store per-point options
 
@@ -171,27 +172,35 @@ export class SeriesBuilder {
                             let value = point.value;
                             const pointColor = point.options?.color;
 
-                            // TradingView compatibility: if color is 'na' (NaN, null, or "na"), break the line
+                            // Always store the raw value for fill plots to reference
+                            // (fills need the actual data even when the line is invisible via color=na)
+                            rawDataArray[offsetIndex] = value;
+
+                            // TradingView compatibility: if color is 'na' (NaN, null, undefined, or "na"), break the line
+                            // When the options object explicitly has a 'color' key set to undefined,
+                            // this means PineTS evaluated the color expression to na (hidden segment).
+                            const hasExplicitColorKey = point.options != null && 'color' in point.options;
                             const isNaColor =
                                 pointColor === null ||
                                 pointColor === 'na' ||
                                 pointColor === 'NaN' ||
-                                (typeof pointColor === 'number' && isNaN(pointColor));
+                                (typeof pointColor === 'number' && isNaN(pointColor)) ||
+                                (hasExplicitColorKey && pointColor === undefined);
 
                             if (isNaColor) {
                                 value = null;
                             }
 
                             dataArray[offsetIndex] = value;
-                            colorArray[offsetIndex] = pointColor || plot.options.color || SeriesBuilder.DEFAULT_COLOR;
+                            colorArray[offsetIndex] = isNaColor ? null : (pointColor || plot.options.color || SeriesBuilder.DEFAULT_COLOR);
                             optionsArray[offsetIndex] = point.options || {};
                         }
                     }
                 });
 
-                // Store data array for fill plots to reference
-                // Only store for non-fill plots as fill plots don't produce data to be referenced by other fills (usually)
-                plotDataArrays.set(`${id}::${plotName}`, dataArray);
+                // Store raw data array (before na-color nullification) for fill plots to reference
+                // Fill plots need the actual numeric values even when the referenced plot is invisible (color=na)
+                plotDataArrays.set(`${id}::${plotName}`, rawDataArray);
 
                 if (plot.options?.style?.startsWith('style_')) {
                     plot.options.style = plot.options.style.replace('style_', '') as IndicatorStyle;
@@ -223,6 +232,11 @@ export class SeriesBuilder {
                     return; // Skip rendering a series for barcolor
                 }
 
+                // Tables are rendered as DOM overlays, not ECharts series
+                if (plot.options.style === 'table') {
+                    return;
+                }
+
                 // Use Factory to get appropriate renderer
                 const renderer = SeriesRendererFactory.get(plot.options.style);
                 const seriesConfig = renderer.render({

package/src/components/SeriesRendererFactory.ts

@@ -10,6 +10,8 @@ import { FillRenderer } from './renderers/FillRenderer';
 import { LabelRenderer } from './renderers/LabelRenderer';
 import { DrawingLineRenderer } from './renderers/DrawingLineRenderer';
 import { LinefillRenderer } from './renderers/LinefillRenderer';
+import { PolylineRenderer } from './renderers/PolylineRenderer';
+import { BoxRenderer } from './renderers/BoxRenderer';
 
 export class SeriesRendererFactory {
     private static renderers: Map<string, SeriesRenderer> = new Map();
@@ -30,6 +32,8 @@ export class SeriesRendererFactory {
         this.register('label', new LabelRenderer());
         this.register('drawing_line', new DrawingLineRenderer());
         this.register('linefill', new LinefillRenderer());
+        this.register('drawing_polyline', new PolylineRenderer());
+        this.register('drawing_box', new BoxRenderer());
     }
 
     public static register(style: string, renderer: SeriesRenderer) {

package/src/components/TableOverlayRenderer.ts

@@ -0,0 +1,322 @@
+import { ColorUtils } from '../utils/ColorUtils';
+
+/**
+ * Renders Pine Script table objects as HTML DOM overlays positioned
+ * absolutely over the ECharts chart canvas.
+ *
+ * Tables use fixed positions (top_left, bottom_center, etc.) rather
+ * than data coordinates, so they are rendered as HTML elements instead
+ * of ECharts custom series.
+ */
+export class TableOverlayRenderer {
+
+    /**
+     * Parse a color value for table rendering.
+     * Unlike ColorUtils.parseColor (which defaults to 0.3 opacity for fills),
+     * tables treat hex/named colors as fully opaque — only rgba provides opacity.
+     */
+    private static safeParseColor(val: any): { color: string; opacity: number } {
+        if (!val || typeof val !== 'string') {
+            return { color: '#888888', opacity: 1 };
+        }
+        // Extract opacity from rgba(), otherwise assume fully opaque
+        const rgbaMatch = val.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/);
+        if (rgbaMatch) {
+            const a = rgbaMatch[4] ? parseFloat(rgbaMatch[4]) : 1;
+            return { color: `rgb(${rgbaMatch[1]},${rgbaMatch[2]},${rgbaMatch[3]})`, opacity: a };
+        }
+        return { color: val, opacity: 1 };
+    }
+
+    /**
+     * Clear all existing table overlays and render new ones.
+     * @param gridRect The ECharts grid rect {x, y, width, height} in pixels,
+     *                 representing the actual plot area within the container.
+     */
+    static render(container: HTMLElement, tables: any[], gridRect?: { x: number; y: number; width: number; height: number }): void {
+        TableOverlayRenderer.clearAll(container);
+
+        // Pine Script: only the last table at each position is displayed
+        const byPosition = new Map<string, any>();
+        for (const tbl of tables) {
+            if (tbl && !tbl._deleted) {
+                byPosition.set(tbl.position, tbl);
+            }
+        }
+
+        byPosition.forEach((tbl) => {
+            const el = TableOverlayRenderer.buildTable(tbl);
+            TableOverlayRenderer.positionTable(el, tbl.position, gridRect);
+            container.appendChild(el);
+        });
+    }
+
+    static clearAll(container: HTMLElement): void {
+        while (container.firstChild) {
+            container.removeChild(container.firstChild);
+        }
+    }
+
+    private static buildTable(tbl: any): HTMLElement {
+        const table = document.createElement('table');
+        table.style.borderCollapse = 'separate';
+        table.style.borderSpacing = '0';
+        table.style.pointerEvents = 'auto';
+        table.style.fontSize = '14px';
+        table.style.lineHeight = '1.4';
+        table.style.fontFamily = 'sans-serif';
+        table.style.margin = '4px';
+
+        // Table background
+        if (tbl.bgcolor) {
+            const { color, opacity } = TableOverlayRenderer.safeParseColor(tbl.bgcolor);
+            table.style.backgroundColor = color;
+            if (opacity < 1) table.style.opacity = String(opacity);
+        }
+
+        // Frame (outer border)
+        if (tbl.frame_width > 0 && tbl.frame_color) {
+            const { color: fc } = TableOverlayRenderer.safeParseColor(tbl.frame_color);
+            table.style.border = `${tbl.frame_width}px solid ${fc}`;
+        } else if (tbl.frame_width > 0) {
+            table.style.border = `${tbl.frame_width}px solid #999`;
+        }
+
+        // Build merge lookup: for each cell, determine colspan/rowspan
+        const mergeMap = new Map<string, { colspan: number; rowspan: number }>();
+        const mergedCells = new Set<string>();
+
+        if (tbl.merges) {
+            for (const m of tbl.merges) {
+                const key = `${m.startCol},${m.startRow}`;
+                mergeMap.set(key, {
+                    colspan: m.endCol - m.startCol + 1,
+                    rowspan: m.endRow - m.startRow + 1,
+                });
+                // Mark all cells covered by this merge (except the origin)
+                for (let r = m.startRow; r <= m.endRow; r++) {
+                    for (let c = m.startCol; c <= m.endCol; c++) {
+                        if (r === m.startRow && c === m.startCol) continue;
+                        mergedCells.add(`${c},${r}`);
+                    }
+                }
+            }
+        }
+
+        // Build rows
+        const rows = tbl.rows || 0;
+        const cols = tbl.columns || 0;
+
+        for (let r = 0; r < rows; r++) {
+            const tr = document.createElement('tr');
+
+            for (let c = 0; c < cols; c++) {
+                const cellKey = `${c},${r}`;
+
+                // Skip cells that are covered by a merge
+                if (mergedCells.has(cellKey)) continue;
+
+                const td = document.createElement('td');
+
+                // Apply merge attributes
+                const merge = mergeMap.get(cellKey);
+                if (merge) {
+                    if (merge.colspan > 1) td.colSpan = merge.colspan;
+                    if (merge.rowspan > 1) td.rowSpan = merge.rowspan;
+                }
+
+                // Cell borders
+                if (tbl.border_width > 0) {
+                    const bc = tbl.border_color
+                        ? TableOverlayRenderer.safeParseColor(tbl.border_color).color
+                        : '#999';
+                    td.style.border = `${tbl.border_width}px solid ${bc}`;
+                }
+
+                // Get cell data
+                const cellData = tbl.cells?.[r]?.[c];
+                if (cellData && !cellData._merged) {
+                    // Cell text
+                    td.textContent = cellData.text || '';
+
+                    // Cell background
+                    if (cellData.bgcolor) {
+                        const { color: bg, opacity: bgOp } = TableOverlayRenderer.safeParseColor(cellData.bgcolor);
+                        td.style.backgroundColor = bg;
+                        if (bgOp < 1) {
+                            // Use rgba for cell-level opacity to avoid affecting text
+                            td.style.backgroundColor = cellData.bgcolor;
+                        }
+                    }
+
+                    // Text color
+                    if (cellData.text_color) {
+                        const { color: tc } = TableOverlayRenderer.safeParseColor(cellData.text_color);
+                        td.style.color = tc;
+                    }
+
+                    // Text size
+                    td.style.fontSize = TableOverlayRenderer.getSizePixels(cellData.text_size) + 'px';
+
+                    // Text alignment
+                    td.style.textAlign = TableOverlayRenderer.mapHAlign(cellData.text_halign);
+                    td.style.verticalAlign = TableOverlayRenderer.mapVAlign(cellData.text_valign);
+
+                    // Font family
+                    if (cellData.text_font_family === 'monospace') {
+                        td.style.fontFamily = 'monospace';
+                    }
+
+                    // Width/height (% of chart area, 0 = auto)
+                    if (cellData.width > 0) {
+                        td.style.width = cellData.width + '%';
+                    }
+                    if (cellData.height > 0) {
+                        td.style.height = cellData.height + '%';
+                    }
+
+                    // Tooltip
+                    if (cellData.tooltip) {
+                        td.title = cellData.tooltip;
+                    }
+                }
+
+                // Default padding
+                td.style.padding = '4px 6px';
+                td.style.whiteSpace = 'nowrap';
+
+                tr.appendChild(td);
+            }
+
+            table.appendChild(tr);
+        }
+
+        return table;
+    }
+
+    private static positionTable(
+        el: HTMLElement,
+        position: string,
+        gridRect?: { x: number; y: number; width: number; height: number },
+    ): void {
+        el.style.position = 'absolute';
+
+        // Use grid rect (actual plot area) if available, otherwise fall back to container edges.
+        // Inset bottom/right by a few pixels so tables don't touch the axis lines.
+        const PAD = 8;
+        const top = gridRect ? gridRect.y + 'px' : '0';
+        const left = gridRect ? gridRect.x + 'px' : '0';
+        const bottom = gridRect ? (gridRect.y + gridRect.height - PAD) + 'px' : '0';
+        const right = gridRect ? (gridRect.x + gridRect.width - PAD) + 'px' : '0';
+        const centerX = gridRect ? (gridRect.x + gridRect.width / 2) + 'px' : '50%';
+        const centerY = gridRect ? (gridRect.y + gridRect.height / 2) + 'px' : '50%';
+
+        switch (position) {
+            case 'top_left':
+                el.style.top = top;
+                el.style.left = left;
+                break;
+            case 'top_center':
+                el.style.top = top;
+                el.style.left = centerX;
+                el.style.transform = 'translateX(-50%)';
+                break;
+            case 'top_right':
+                el.style.top = top;
+                el.style.left = right;
+                el.style.transform = 'translateX(-100%)';
+                break;
+            case 'middle_left':
+                el.style.top = centerY;
+                el.style.left = left;
+                el.style.transform = 'translateY(-50%)';
+                break;
+            case 'middle_center':
+                el.style.top = centerY;
+                el.style.left = centerX;
+                el.style.transform = 'translate(-50%, -50%)';
+                break;
+            case 'middle_right':
+                el.style.top = centerY;
+                el.style.left = right;
+                el.style.transform = 'translate(-100%, -50%)';
+                break;
+            case 'bottom_left':
+                el.style.top = bottom;
+                el.style.left = left;
+                el.style.transform = 'translateY(-100%)';
+                break;
+            case 'bottom_center':
+                el.style.top = bottom;
+                el.style.left = centerX;
+                el.style.transform = 'translate(-50%, -100%)';
+                break;
+            case 'bottom_right':
+                el.style.top = bottom;
+                el.style.left = right;
+                el.style.transform = 'translate(-100%, -100%)';
+                break;
+            default:
+                el.style.top = top;
+                el.style.left = right;
+                el.style.transform = 'translateX(-100%)';
+                break;
+        }
+    }
+
+    private static getSizePixels(size: string | number): number {
+        if (typeof size === 'number' && size > 0) return size;
+        switch (size) {
+            case 'auto':
+            case 'size.auto':
+                return 12;
+            case 'tiny':
+            case 'size.tiny':
+                return 8;
+            case 'small':
+            case 'size.small':
+                return 10;
+            case 'normal':
+            case 'size.normal':
+                return 14;
+            case 'large':
+            case 'size.large':
+                return 20;
+            case 'huge':
+            case 'size.huge':
+                return 36;
+            default:
+                return 14;
+        }
+    }
+
+    private static mapHAlign(align: string): string {
+        switch (align) {
+            case 'left':
+            case 'text.align_left':
+                return 'left';
+            case 'right':
+            case 'text.align_right':
+                return 'right';
+            case 'center':
+            case 'text.align_center':
+            default:
+                return 'center';
+        }
+    }
+
+    private static mapVAlign(align: string): string {
+        switch (align) {
+            case 'top':
+            case 'text.align_top':
+                return 'top';
+            case 'bottom':
+            case 'text.align_bottom':
+                return 'bottom';
+            case 'center':
+            case 'text.align_center':
+            default:
+                return 'middle';
+        }
+    }
+}

package/src/components/renderers/BoxRenderer.ts

@@ -0,0 +1,258 @@
+import { SeriesRenderer, RenderContext } from './SeriesRenderer';
+
+/**
+ * Convert any color string to a format ECharts canvas can render with opacity.
+ * 8-digit hex (#RRGGBBAA) is not universally supported by canvas — convert to rgba().
+ */
+function normalizeColor(color: string | undefined): string | undefined {
+    if (!color || typeof color !== 'string') return color;
+    if (color.startsWith('#')) {
+        const hex = color.slice(1);
+        if (hex.length === 8) {
+            const r = parseInt(hex.slice(0, 2), 16);
+            const g = parseInt(hex.slice(2, 4), 16);
+            const b = parseInt(hex.slice(4, 6), 16);
+            const a = parseInt(hex.slice(6, 8), 16) / 255;
+            return `rgba(${r},${g},${b},${a.toFixed(3)})`;
+        }
+    }
+    return color;
+}
+
+/**
+ * Renderer for Pine Script box.* drawing objects.
+ * Each box is defined by two corners (left,top) → (right,bottom)
+ * with fill, border, optional text, and optional extend.
+ *
+ * Style name: 'drawing_box' (distinct from other styles).
+ */
+export class BoxRenderer implements SeriesRenderer {
+    render(context: RenderContext): any {
+        const { seriesName, xAxisIndex, yAxisIndex, dataArray, dataIndexOffset } = context;
+        const offset = dataIndexOffset || 0;
+
+        // Collect all non-deleted box objects from the sparse dataArray.
+        const boxObjects: 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 bx of items) {
+                if (bx && typeof bx === 'object' && !bx._deleted) {
+                    boxObjects.push(bx);
+                }
+            }
+        }
+
+        if (boxObjects.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 bx of boxObjects) {
+            if (bx.top < yMin) yMin = bx.top;
+            if (bx.top > yMax) yMax = bx.top;
+            if (bx.bottom < yMin) yMin = bx.bottom;
+            if (bx.bottom > yMax) yMax = bx.bottom;
+        }
+
+        // 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 bx of boxObjects) {
+                    if (bx._deleted) continue;
+
+                    const xOff = (bx.xloc === 'bar_index' || bx.xloc === 'bi') ? offset : 0;
+                    const pTopLeft = api.coord([bx.left + xOff, bx.top]);
+                    const pBottomRight = api.coord([bx.right + xOff, bx.bottom]);
+
+                    let x = pTopLeft[0];
+                    let y = pTopLeft[1];
+                    let w = pBottomRight[0] - pTopLeft[0];
+                    let h = pBottomRight[1] - pTopLeft[1];
+
+                    // Handle extend (horizontal borders)
+                    const extend = bx.extend || 'none';
+                    if (extend !== 'none') {
+                        const cs = params.coordSys;
+                        if (extend === 'left' || extend === 'both') {
+                            x = cs.x;
+                            w = (extend === 'both') ? cs.width : (pBottomRight[0] - cs.x);
+                        }
+                        if (extend === 'right' || extend === 'both') {
+                            if (extend === 'right') {
+                                w = cs.x + cs.width - pTopLeft[0];
+                            }
+                        }
+                    }
+
+                    // Background fill rect
+                    const bgColor = normalizeColor(bx.bgcolor) || '#2962ff';
+                    children.push({
+                        type: 'rect',
+                        shape: { x, y, width: w, height: h },
+                        style: { fill: bgColor },
+                    });
+
+                    // Border rect (on top of fill)
+                    const borderColor = normalizeColor(bx.border_color) || '#2962ff';
+                    const borderWidth = bx.border_width ?? 1;
+                    if (borderWidth > 0) {
+                        children.push({
+                            type: 'rect',
+                            shape: { x, y, width: w, height: h },
+                            style: {
+                                fill: 'none',
+                                stroke: borderColor,
+                                lineWidth: borderWidth,
+                                lineDash: this.getDashPattern(bx.border_style),
+                            },
+                        });
+                    }
+
+                    // Text inside box
+                    if (bx.text) {
+                        const textX = this.getTextX(x, w, bx.text_halign);
+                        const textY = this.getTextY(y, h, bx.text_valign);
+                        children.push({
+                            type: 'text',
+                            style: {
+                                x: textX,
+                                y: textY,
+                                text: bx.text,
+                                fill: normalizeColor(bx.text_color) || '#000000',
+                                fontSize: this.getSizePixels(bx.text_size),
+                                fontFamily: bx.text_font_family === 'monospace' ? 'monospace' : 'sans-serif',
+                                fontWeight: (bx.text_formatting === 'format_bold') ? 'bold' : 'normal',
+                                fontStyle: (bx.text_formatting === 'format_italic') ? 'italic' : 'normal',
+                                textAlign: this.mapHAlign(bx.text_halign),
+                                textVerticalAlign: this.mapVAlign(bx.text_valign),
+                            },
+                        });
+                    }
+                }
+
+                return { type: 'group', children };
+            },
+            data: [[0, lastBarIndex, yMin, yMax]],
+            clip: true,
+            encode: { x: [0, 1], y: [2, 3] },
+            z: 14,
+            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 getSizePixels(size: string | number): number {
+        if (typeof size === 'number' && size > 0) return size;
+        switch (size) {
+            case 'auto':
+            case 'size.auto':
+                return 12;
+            case 'tiny':
+            case 'size.tiny':
+                return 8;
+            case 'small':
+            case 'size.small':
+                return 10;
+            case 'normal':
+            case 'size.normal':
+                return 14;
+            case 'large':
+            case 'size.large':
+                return 20;
+            case 'huge':
+            case 'size.huge':
+                return 36;
+            default:
+                return 12;
+        }
+    }
+
+    private mapHAlign(align: string): string {
+        switch (align) {
+            case 'left':
+            case 'text.align_left':
+                return 'left';
+            case 'right':
+            case 'text.align_right':
+                return 'right';
+            case 'center':
+            case 'text.align_center':
+            default:
+                return 'center';
+        }
+    }
+
+    private mapVAlign(align: string): string {
+        switch (align) {
+            case 'top':
+            case 'text.align_top':
+                return 'top';
+            case 'bottom':
+            case 'text.align_bottom':
+                return 'bottom';
+            case 'center':
+            case 'text.align_center':
+            default:
+                return 'middle';
+        }
+    }
+
+    private getTextX(x: number, w: number, halign: string): number {
+        switch (halign) {
+            case 'left':
+            case 'text.align_left':
+                return x + 4;
+            case 'right':
+            case 'text.align_right':
+                return x + w - 4;
+            case 'center':
+            case 'text.align_center':
+            default:
+                return x + w / 2;
+        }
+    }
+
+    private getTextY(y: number, h: number, valign: string): number {
+        switch (valign) {
+            case 'top':
+            case 'text.align_top':
+                return y + 4;
+            case 'bottom':
+            case 'text.align_bottom':
+                return y + h - 4;
+            case 'center':
+            case 'text.align_center':
+            default:
+                return y + h / 2;
+        }
+    }
+}