@qfo/qfchart 0.6.7 → 0.6.8

package/src/components/renderers/LinefillRenderer.ts

@@ -0,0 +1,167 @@
+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[] = [];
+        const fillData: 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 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);
+
+                // Store all 8 coordinates for the two lines
+                const xOff1 = line1.xloc === 'bar_index' ? offset : 0;
+                const xOff2 = line2.xloc === 'bar_index' ? offset : 0;
+                fillData.push([
+                    line1.x1 + xOff1, line1.y1,
+                    line1.x2 + xOff1, line1.y2,
+                    line2.x1 + xOff2, line2.y1,
+                    line2.x2 + xOff2, line2.y2,
+                ]);
+            }
+        }
+
+        if (fillData.length === 0) {
+            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 lf = fillObjects[idx];
+                if (!lf || lf._deleted) return;
+
+                const line1 = lf.line1;
+                const line2 = lf.line2;
+                if (!line1 || !line2 || line1._deleted || line2._deleted) return;
+
+                // Get data values: line1 start, line1 end, line2 start, line2 end
+                const l1x1 = api.value(0);
+                const l1y1 = api.value(1);
+                const l1x2 = api.value(2);
+                const l1y2 = api.value(3);
+                const l2x1 = api.value(4);
+                const l2y1 = api.value(5);
+                const l2x2 = api.value(6);
+                const l2y2 = api.value(7);
+
+                // Convert to pixel coordinates
+                let p1Start = api.coord([l1x1, l1y1]);
+                let p1End = api.coord([l1x2, l1y2]);
+                let p2Start = api.coord([l2x1, l2y1]);
+                let p2End = api.coord([l2x2, l2y2]);
+
+                // Handle line extensions — if lines are extended, extend the fill too
+                const extend1 = line1.extend || 'none';
+                const extend2 = line2.extend || 'none';
+                if (extend1 !== 'none' || extend2 !== 'none') {
+                    const cs = params.coordSys;
+                    const left = cs.x;
+                    const right = cs.x + cs.width;
+                    const top = cs.y;
+                    const bottom = cs.y + cs.height;
+
+                    if (extend1 !== 'none') {
+                        [p1Start, p1End] = this.extendLine(p1Start, p1End, extend1, left, right, top, bottom);
+                    }
+                    if (extend2 !== 'none') {
+                        [p2Start, p2End] = this.extendLine(p2Start, p2End, extend2, left, right, top, bottom);
+                    }
+                }
+
+                // Parse color
+                const { color: fillColor, opacity: fillOpacity } = ColorUtils.parseColor(lf.color || 'rgba(128, 128, 128, 0.2)');
+
+                // Create a polygon: line1.start → line1.end → line2.end → line2.start
+                return {
+                    type: 'polygon',
+                    shape: {
+                        points: [
+                            p1Start,
+                            p1End,
+                            p2End,
+                            p2Start,
+                        ],
+                    },
+                    style: {
+                        fill: fillColor,
+                        opacity: fillOpacity,
+                    },
+                    silent: true,
+                };
+            },
+            data: fillData,
+            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/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/types.ts

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

package/src/utils/ShapeUtils.ts

@@ -1,140 +1,148 @@
-export class ShapeUtils {
-    public static getShapeSymbol(shape: string): string {
-        // SVG Paths need to be:
-        // 1. Valid SVG path data strings
-        // 2. Ideally centered around the origin or a standard box (e.g., 0 0 24 24)
-        // 3. ECharts path:// format expects just the path data usually, but complex shapes might need 'image://' or better paths.
-        // For simple shapes, standard ECharts symbols or simple paths work.
-
-        switch (shape) {
-            case 'arrowdown':
-                // Blocky arrow down
-                return 'path://M12 24l-12-12h8v-12h8v12h8z';
-
-            case 'arrowup':
-                // Blocky arrow up
-                return 'path://M12 0l12 12h-8v12h-8v-12h-8z';
-
-            case 'circle':
-                return 'circle';
-
-            case 'cross':
-                // Plus sign (+)
-                return 'path://M11 2h2v9h9v2h-9v9h-2v-9h-9v-2h9z';
-
-            case 'diamond':
-                return 'diamond'; // Built-in
-
-            case 'flag':
-                // Flag on a pole
-                return 'path://M6 2v20h2v-8h12l-2-6 2-6h-12z';
-
-            case 'labeldown':
-                // Bubble pointing down: Rounded rect with a triangle at bottom
-                return 'path://M4 2h16a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-6l-2 4l-2 -4h-6a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2z';
-
-            case 'labelup':
-                // Bubble pointing up: Rounded rect with triangle at top
-                return 'path://M12 2l2 4h6a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-16a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h6z';
-
-            case 'square':
-                return 'rect';
-
-            case 'triangledown':
-                // Pointing down
-                return 'path://M12 21l-10-18h20z';
-
-            case 'triangleup':
-                // Pointing up
-                return 'triangle'; // Built-in is pointing up
-
-            case 'xcross':
-                // 'X' shape
-                return 'path://M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z';
-
-            default:
-                return 'circle';
-        }
-    }
-
-    public static getShapeRotation(shape: string): number {
-        // With custom paths defined above, we might not need rotation unless we reuse shapes.
-        // Built-in triangle is UP.
-        return 0;
-    }
-
-    public static getShapeSize(size: string, width?: number, height?: number): number | number[] {
-        // If both width and height are specified, use them directly
-        if (width !== undefined && height !== undefined) {
-            return [width, height];
-        }
-
-        // Base size from the size parameter
-        let baseSize: number;
-        switch (size) {
-            case 'tiny':
-                baseSize = 8;
-                break;
-            case 'small':
-                baseSize = 12;
-                break;
-            case 'normal':
-            case 'auto':
-                baseSize = 16;
-                break;
-            case 'large':
-                baseSize = 24;
-                break;
-            case 'huge':
-                baseSize = 32;
-                break;
-            default:
-                baseSize = 16;
-        }
-
-        // If only width is specified, preserve aspect ratio (assume square default)
-        if (width !== undefined) {
-            return [width, width];
-        }
-
-        // If only height is specified, preserve aspect ratio (assume square default)
-        if (height !== undefined) {
-            return [height, height];
-        }
-
-        // Default uniform size
-        return baseSize;
-    }
-
-    // Helper to determine label position and distance relative to shape BASED ON LOCATION
-    public static getLabelConfig(shape: string, location: string): { position: string; distance: number } {
-        // Text position should be determined by location, not shape direction
-
-        switch (location) {
-            case 'abovebar':
-                // Shape is above the candle, text should be above the shape
-                return { position: 'top', distance: 5 };
-
-            case 'belowbar':
-                // Shape is below the candle, text should be below the shape
-                return { position: 'bottom', distance: 5 };
-
-            case 'top':
-                // Shape at top of chart, text below it
-                return { position: 'bottom', distance: 5 };
-
-            case 'bottom':
-                // Shape at bottom of chart, text above it
-                return { position: 'top', distance: 5 };
-
-            case 'absolute':
-            default:
-                // For labelup/down, text is INSIDE the shape
-                if (shape === 'labelup' || shape === 'labeldown') {
-                    return { position: 'inside', distance: 0 };
-                }
-                // For other shapes, text above by default
-                return { position: 'top', distance: 5 };
-        }
-    }
-}
+export class ShapeUtils {
+    public static getShapeSymbol(shape: string): string {
+        // SVG Paths need to be:
+        // 1. Valid SVG path data strings
+        // 2. Ideally centered around the origin or a standard box (e.g., 0 0 24 24)
+        // 3. ECharts path:// format expects just the path data usually, but complex shapes might need 'image://' or better paths.
+        // For simple shapes, standard ECharts symbols or simple paths work.
+
+        switch (shape) {
+            case 'arrowdown':
+                // Blocky arrow down
+                return 'path://M12 24l-12-12h8v-12h8v12h8z';
+
+            case 'arrowup':
+                // Blocky arrow up
+                return 'path://M12 0l12 12h-8v12h-8v-12h-8z';
+
+            case 'circle':
+                return 'circle';
+
+            case 'cross':
+                // Plus sign (+)
+                return 'path://M11 2h2v9h9v2h-9v9h-2v-9h-9v-2h9z';
+
+            case 'diamond':
+                return 'diamond'; // Built-in
+
+            case 'flag':
+                // Flag on a pole
+                return 'path://M6 2v20h2v-8h12l-2-6 2-6h-12z';
+
+            case 'labeldown':
+                // Bubble pointing down: rect with small triangle at bottom center
+                return 'path://M2 1h20a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-8l-2 3-2-3h-8a1 1 0 0 1-1-1v-14a1 1 0 0 1 1-1z';
+
+            case 'labelleft':
+                // Bubble with small pointer on the left side (pointing left)
+                return 'path://M0 10l3-3v-5a1 1 0 0 1 1-1h18a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1h-18a1 1 0 0 1-1-1v-5z';
+
+            case 'labelright':
+                // Bubble with small pointer on the right side (pointing right)
+                return 'path://M24 10l-3-3v-5a1 1 0 0 0-1-1h-18a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1v-5z';
+
+            case 'labelup':
+                // Bubble pointing up: small triangle at top, rect below
+                return 'path://M12 1l2 3h8a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-20a1 1 0 0 1-1-1v-14a1 1 0 0 1 1-1h8z';
+
+            case 'square':
+                return 'rect';
+
+            case 'triangledown':
+                // Pointing down
+                return 'path://M12 21l-10-18h20z';
+
+            case 'triangleup':
+                // Pointing up
+                return 'triangle'; // Built-in is pointing up
+
+            case 'xcross':
+                // 'X' shape
+                return 'path://M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z';
+
+            default:
+                return 'circle';
+        }
+    }
+
+    public static getShapeRotation(shape: string): number {
+        // With custom paths defined above, we might not need rotation unless we reuse shapes.
+        // Built-in triangle is UP.
+        return 0;
+    }
+
+    public static getShapeSize(size: string, width?: number, height?: number): number | number[] {
+        // If both width and height are specified, use them directly
+        if (width !== undefined && height !== undefined) {
+            return [width, height];
+        }
+
+        // Base size from the size parameter
+        let baseSize: number;
+        switch (size) {
+            case 'tiny':
+                baseSize = 8;
+                break;
+            case 'small':
+                baseSize = 12;
+                break;
+            case 'normal':
+            case 'auto':
+                baseSize = 16;
+                break;
+            case 'large':
+                baseSize = 24;
+                break;
+            case 'huge':
+                baseSize = 32;
+                break;
+            default:
+                baseSize = 16;
+        }
+
+        // If only width is specified, preserve aspect ratio (assume square default)
+        if (width !== undefined) {
+            return [width, width];
+        }
+
+        // If only height is specified, preserve aspect ratio (assume square default)
+        if (height !== undefined) {
+            return [height, height];
+        }
+
+        // Default uniform size
+        return baseSize;
+    }
+
+    // Helper to determine label position and distance relative to shape BASED ON LOCATION
+    public static getLabelConfig(shape: string, location: string): { position: string; distance: number } {
+        // Text position should be determined by location, not shape direction
+
+        switch (location) {
+            case 'abovebar':
+                // Shape is above the candle, text should be above the shape
+                return { position: 'top', distance: 5 };
+
+            case 'belowbar':
+                // Shape is below the candle, text should be below the shape
+                return { position: 'bottom', distance: 5 };
+
+            case 'top':
+                // Shape at top of chart, text below it
+                return { position: 'bottom', distance: 5 };
+
+            case 'bottom':
+                // Shape at bottom of chart, text above it
+                return { position: 'top', distance: 5 };
+
+            case 'absolute':
+            default:
+                // For labelup/down, text is INSIDE the shape
+                if (shape === 'labelup' || shape === 'labeldown') {
+                    return { position: 'inside', distance: 0 };
+                }
+                // For other shapes, text above by default
+                return { position: 'top', distance: 5 };
+        }
+    }
+}