@qfo/qfchart 0.6.7 → 0.7.1

package/src/components/renderers/LinefillRenderer.ts

@@ -0,0 +1,155 @@
+import { SeriesRenderer, RenderContext } from './SeriesRenderer';
+import { ColorUtils } from '../../utils/ColorUtils';
+
+/**
+ * Renderer for Pine Script linefill.* drawing objects.
+ * Each linefill fills the area between two line objects as a polygon.
+ *
+ * Style name: 'linefill'
+ */
+export class LinefillRenderer implements SeriesRenderer {
+    render(context: RenderContext): any {
+        const { seriesName, xAxisIndex, yAxisIndex, dataArray, dataIndexOffset } = context;
+        const offset = dataIndexOffset || 0;
+
+        // Collect all non-deleted linefill objects from the sparse dataArray.
+        // Same aggregation pattern as DrawingLineRenderer — objects are stored
+        // as an array in a single data entry.
+        const fillObjects: 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 lf of items) {
+                if (!lf || typeof lf !== 'object' || lf._deleted) continue;
+
+                const line1 = lf.line1;
+                const line2 = lf.line2;
+                if (!line1 || !line2 || line1._deleted || line2._deleted) continue;
+
+                fillObjects.push(lf);
+            }
+        }
+
+        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 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,
+                    });
+                }
+
+                return { type: 'group', children };
+            },
+            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 },
+        };
+    }
+
+    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];
+    }
+}

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;
+        }
+    }
+}

package/src/components/renderers/SeriesRenderer.ts

@@ -1,20 +1,21 @@
-import { IndicatorPlot, OHLCV } from '../../types';
-
-export interface RenderContext {
-    seriesName: string;
-    xAxisIndex: number;
-    yAxisIndex: number;
-    dataArray: any[];
-    colorArray: any[];
-    optionsArray: any[];
-    plotOptions: any;
-    candlestickData?: OHLCV[]; // For shape positioning
-    plotDataArrays?: Map<string, number[]>; // For fill plots
-    indicatorId?: string;
-    plotName?: string;
-    indicator?: any; // Reference to parent indicator object if needed
-}
-
-export interface SeriesRenderer {
-    render(context: RenderContext): any;
-}
+import { IndicatorPlot, OHLCV } from '../../types';
+
+export interface RenderContext {
+    seriesName: string;
+    xAxisIndex: number;
+    yAxisIndex: number;
+    dataArray: any[];
+    colorArray: any[];
+    optionsArray: any[];
+    plotOptions: any;
+    candlestickData?: OHLCV[]; // For shape positioning
+    plotDataArrays?: Map<string, number[]>; // For fill plots
+    indicatorId?: string;
+    plotName?: string;
+    indicator?: any; // Reference to parent indicator object if needed
+    dataIndexOffset?: number; // Padding offset for converting bar_index to ECharts index
+}
+
+export interface SeriesRenderer {
+    render(context: RenderContext): any;
+}

package/src/components/renderers/ShapeRenderer.ts

@@ -1,121 +1,121 @@
-import { SeriesRenderer, RenderContext } from './SeriesRenderer';
-import { ShapeUtils } from '../../utils/ShapeUtils';
-
-export class ShapeRenderer implements SeriesRenderer {
-    render(context: RenderContext): any {
-        const { seriesName, xAxisIndex, yAxisIndex, dataArray, colorArray, optionsArray, plotOptions, candlestickData } = context;
-        const defaultColor = '#2962ff';
-
-        const shapeData = dataArray
-            .map((val, i) => {
-                // Merge global options with per-point options to get location first
-                const pointOpts = optionsArray[i] || {};
-                const globalOpts = plotOptions;
-                const location = pointOpts.location || globalOpts.location || 'absolute';
-
-                // For location="absolute", always draw the shape (ignore value)
-                // For other locations, only draw if value is truthy (TradingView behavior)
-                if (location !== 'absolute' && !val) {
-                    return null;
-                }
-
-                // If we get here and val is null/undefined, it means location is absolute
-                // In that case, we still need a valid value for positioning
-                // Use the value if it exists, otherwise we'd need a fallback
-                // But in TradingView, absolute location still expects a value for Y position
-                if (val === null || val === undefined) {
-                    return null; // Can't plot without a Y coordinate
-                }
-
-                const color = pointOpts.color || globalOpts.color || defaultColor;
-                const shape = pointOpts.shape || globalOpts.shape || 'circle';
-                const size = pointOpts.size || globalOpts.size || 'normal';
-                const text = pointOpts.text || globalOpts.text;
-                const textColor = pointOpts.textcolor || globalOpts.textcolor || 'white';
-
-                // NEW: Get width and height
-                const width = pointOpts.width || globalOpts.width;
-                const height = pointOpts.height || globalOpts.height;
-
-                // Positioning based on location
-                let yValue = val; // Default to absolute value
-                let symbolOffset: (string | number)[] = [0, 0];
-
-                if (location === 'abovebar') {
-                    // Shape above the candle
-                    if (candlestickData && candlestickData[i]) {
-                        yValue = candlestickData[i].high;
-                    }
-                    symbolOffset = [0, '-150%']; // Shift up
-                } else if (location === 'belowbar') {
-                    // Shape below the candle
-                    if (candlestickData && candlestickData[i]) {
-                        yValue = candlestickData[i].low;
-                    }
-                    symbolOffset = [0, '150%']; // Shift down
-                } else if (location === 'top') {
-                    // Shape at top of chart - we need to use a very high value
-                    // This would require knowing the y-axis max, which we don't have here easily
-                    // For now, use a placeholder approach - might need to calculate from data
-                    // Or we can use a percentage of the viewport? ECharts doesn't support that directly in scatter.
-                    // Best approach: use a large multiplier of current value or track max
-                    // Simplified: use coordinate system max (will need enhancement)
-                    yValue = val; // For now, keep absolute - would need axis max
-                    symbolOffset = [0, 0];
-                } else if (location === 'bottom') {
-                    // Shape at bottom of chart
-                    yValue = val; // For now, keep absolute - would need axis min
-                    symbolOffset = [0, 0];
-                }
-
-                const symbol = ShapeUtils.getShapeSymbol(shape);
-                const symbolSize = ShapeUtils.getShapeSize(size, width, height);
-                const rotate = ShapeUtils.getShapeRotation(shape);
-
-                // Special handling for labelup/down sizing - they contain text so they should be larger
-                let finalSize: number | number[] = symbolSize;
-                if (shape.includes('label')) {
-                    // If custom size, scale it up for labels
-                    if (Array.isArray(symbolSize)) {
-                        finalSize = [symbolSize[0] * 2.5, symbolSize[1] * 2.5];
-                    } else {
-                        finalSize = symbolSize * 2.5;
-                    }
-                }
-
-                // Get label configuration based on location
-                const labelConfig = ShapeUtils.getLabelConfig(shape, location);
-
-                const item: any = {
-                    value: [i, yValue],
-                    symbol: symbol,
-                    symbolSize: finalSize,
-                    symbolRotate: rotate,
-                    symbolOffset: symbolOffset,
-                    itemStyle: {
-                        color: color,
-                    },
-                    label: {
-                        show: !!text,
-                        position: labelConfig.position,
-                        distance: labelConfig.distance,
-                        formatter: text,
-                        color: textColor,
-                        fontSize: 10,
-                        fontWeight: 'bold',
-                    },
-                };
-
-                return item;
-            })
-            .filter((item) => item !== null);
-
-        return {
-            name: seriesName,
-            type: 'scatter',
-            xAxisIndex: xAxisIndex,
-            yAxisIndex: yAxisIndex,
-            data: shapeData,
-        };
-    }
-}
+import { SeriesRenderer, RenderContext } from './SeriesRenderer';
+import { ShapeUtils } from '../../utils/ShapeUtils';
+
+export class ShapeRenderer implements SeriesRenderer {
+    render(context: RenderContext): any {
+        const { seriesName, xAxisIndex, yAxisIndex, dataArray, colorArray, optionsArray, plotOptions, candlestickData } = context;
+        const defaultColor = '#2962ff';
+
+        const shapeData = dataArray
+            .map((val, i) => {
+                // Merge global options with per-point options to get location first
+                const pointOpts = optionsArray[i] || {};
+                const globalOpts = plotOptions;
+                const location = pointOpts.location || globalOpts.location || 'absolute';
+
+                // For location="absolute", always draw the shape (ignore value)
+                // For other locations, only draw if value is truthy (TradingView behavior)
+                if (location !== 'absolute' && location !== 'Absolute' && !val) {
+                    return null;
+                }
+
+                // If we get here and val is null/undefined, it means location is absolute
+                // In that case, we still need a valid value for positioning
+                // Use the value if it exists, otherwise we'd need a fallback
+                // But in TradingView, absolute location still expects a value for Y position
+                if (val === null || val === undefined) {
+                    return null; // Can't plot without a Y coordinate
+                }
+
+                const color = pointOpts.color || globalOpts.color || defaultColor;
+                const shape = pointOpts.shape || globalOpts.shape || 'circle';
+                const size = pointOpts.size || globalOpts.size || 'normal';
+                const text = pointOpts.text || globalOpts.text;
+                const textColor = pointOpts.textcolor || globalOpts.textcolor || 'white';
+
+                // NEW: Get width and height
+                const width = pointOpts.width || globalOpts.width;
+                const height = pointOpts.height || globalOpts.height;
+
+                // Positioning based on location
+                let yValue = val; // Default to absolute value
+                let symbolOffset: (string | number)[] = [0, 0];
+
+                if (location === 'abovebar' || location === 'AboveBar' || location === 'ab') {
+                    // Shape above the candle
+                    if (candlestickData && candlestickData[i]) {
+                        yValue = candlestickData[i].high;
+                    }
+                    symbolOffset = [0, '-150%']; // Shift up
+                } else if (location === 'belowbar' || location === 'BelowBar' || location === 'bl') {
+                    // Shape below the candle
+                    if (candlestickData && candlestickData[i]) {
+                        yValue = candlestickData[i].low;
+                    }
+                    symbolOffset = [0, '150%']; // Shift down
+                } else if (location === 'top' || location === 'Top') {
+                    // Shape at top of chart - we need to use a very high value
+                    // This would require knowing the y-axis max, which we don't have here easily
+                    // For now, use a placeholder approach - might need to calculate from data
+                    // Or we can use a percentage of the viewport? ECharts doesn't support that directly in scatter.
+                    // Best approach: use a large multiplier of current value or track max
+                    // Simplified: use coordinate system max (will need enhancement)
+                    yValue = val; // For now, keep absolute - would need axis max
+                    symbolOffset = [0, 0];
+                } else if (location === 'bottom' || location === 'Bottom') {
+                    // Shape at bottom of chart
+                    yValue = val; // For now, keep absolute - would need axis min
+                    symbolOffset = [0, 0];
+                }
+
+                const symbol = ShapeUtils.getShapeSymbol(shape);
+                const symbolSize = ShapeUtils.getShapeSize(size, width, height);
+                const rotate = ShapeUtils.getShapeRotation(shape);
+
+                // Special handling for labelup/down sizing - they contain text so they should be larger
+                let finalSize: number | number[] = symbolSize;
+                if (shape.includes('label')) {
+                    // If custom size, scale it up for labels
+                    if (Array.isArray(symbolSize)) {
+                        finalSize = [symbolSize[0] * 2.5, symbolSize[1] * 2.5];
+                    } else {
+                        finalSize = symbolSize * 2.5;
+                    }
+                }
+
+                // Get label configuration based on location
+                const labelConfig = ShapeUtils.getLabelConfig(shape, location);
+
+                const item: any = {
+                    value: [i, yValue],
+                    symbol: symbol,
+                    symbolSize: finalSize,
+                    symbolRotate: rotate,
+                    symbolOffset: symbolOffset,
+                    itemStyle: {
+                        color: color,
+                    },
+                    label: {
+                        show: !!text,
+                        position: labelConfig.position,
+                        distance: labelConfig.distance,
+                        formatter: text,
+                        color: textColor,
+                        fontSize: 10,
+                        fontWeight: 'bold',
+                    },
+                };
+
+                return item;
+            })
+            .filter((item) => item !== null);
+
+        return {
+            name: seriesName,
+            type: 'scatter',
+            xAxisIndex: xAxisIndex,
+            yAxisIndex: yAxisIndex,
+            data: shapeData,
+        };
+    }
+}

package/src/types.ts

@@ -34,7 +34,8 @@ export type IndicatorStyle =
     | 'candle'
     | 'barcolor'
     | 'fill'
-    | 'label';
+    | 'label'
+    | 'drawing_line';
 
 export interface IndicatorOptions {
     style: IndicatorStyle;