@qfo/qfchart 0.6.8 → 0.7.2

package/src/components/renderers/DrawingLineRenderer.ts

@@ -18,7 +18,6 @@ export class DrawingLineRenderer implements SeriesRenderer {
         // (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];
@@ -28,75 +27,82 @@ export class DrawingLineRenderer implements SeriesRenderer {
             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) {
+        if (lineObjects.length === 0) {
             return { name: seriesName, type: 'custom', xAxisIndex, yAxisIndex, data: [], silent: true };
         }
 
+        // Compute y-range for axis scaling
+        let yMin = Infinity, yMax = -Infinity;
+        for (const ln of lineObjects) {
+            if (ln.y1 < yMin) yMin = ln.y1;
+            if (ln.y1 > yMax) yMax = ln.y1;
+            if (ln.y2 < yMin) yMin = ln.y2;
+            if (ln.y2 > yMax) yMax = ln.y2;
+        }
+
+        // Use a SINGLE data entry spanning the full x-range so renderItem is always called.
+        // ECharts filters a data item only when ALL its x-dimensions are on the same side
+        // of the visible window.  With dims 0=0 and 1=lastBar the item always straddles
+        // the viewport, so renderItem fires exactly once regardless of scroll position.
+        // Dims 2/3 are yMin/yMax for axis scaling.
+        const totalBars = (context.candlestickData?.length || 0) + offset;
+        const lastBarIndex = Math.max(0, totalBars - 1);
+
         return {
             name: seriesName,
             type: 'custom',
             xAxisIndex,
             yAxisIndex,
             renderItem: (params: any, api: any) => {
-                const 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);
+
+                for (const ln of lineObjects) {
+                    if (ln._deleted) continue;
+                    const xOff = (ln.xloc === 'bar_index' || ln.xloc === 'bi') ? offset : 0;
+
+                    let p1 = api.coord([ln.x1 + xOff, ln.y1]);
+                    let p2 = api.coord([ln.x2 + xOff, ln.y2]);
+
+                    // Handle extend (none | left | right | both)
+                    const extend = ln.extend || 'none';
+                    if (extend !== 'none') {
+                        const cs = params.coordSys;
+                        [p1, p2] = this.extendLine(p1, p2, extend, cs.x, cs.x + cs.width, cs.y, cs.y + cs.height);
+                    }
+
+                    const color = ln.color || defaultColor;
+                    const lineWidth = ln.width || 1;
+
+                    children.push({
+                        type: 'line',
+                        shape: { x1: p1[0], y1: p1[1], x2: p2[0], y2: p2[1] },
+                        style: {
+                            stroke: color,
+                            lineWidth,
+                            lineDash: this.getDashPattern(ln.style),
+                        },
+                    });
+
+                    const style = ln.style || 'style_solid';
+                    if (style === 'style_arrow_left' || style === 'style_arrow_both') {
+                        const arrow = this.arrowHead(p2, p1, lineWidth, color);
+                        if (arrow) children.push(arrow);
+                    }
+                    if (style === 'style_arrow_right' || style === 'style_arrow_both') {
+                        const arrow = this.arrowHead(p1, p2, lineWidth, color);
+                        if (arrow) children.push(arrow);
+                    }
                 }
 
                 return { type: 'group', children };
             },
-            data: lineData,
+            data: [[0, lastBarIndex, yMin, yMax]],
+            clip: true,
+            encode: { x: [0, 1], y: [2, 3] },
             z: 15,
             silent: true,
             emphasis: { disabled: true },

package/src/components/renderers/FillRenderer.ts

@@ -3,7 +3,7 @@ import { ColorUtils } from '../../utils/ColorUtils';
 
 export class FillRenderer implements SeriesRenderer {
     render(context: RenderContext): any {
-        const { seriesName, xAxisIndex, yAxisIndex, plotOptions, plotDataArrays, indicatorId, plotName } = context;
+        const { seriesName, xAxisIndex, yAxisIndex, plotOptions, plotDataArrays, indicatorId, plotName, optionsArray } = context;
         const totalDataLength = context.dataArray.length; // Use length from dataArray placeholder
 
         // Fill plots reference other plots to fill the area between them
@@ -23,7 +23,18 @@ export class FillRenderer implements SeriesRenderer {
             return null;
         }
 
-        // Parse color to extract opacity
+        // Detect gradient fill mode
+        const isGradient = plotOptions.gradient === true;
+
+        if (isGradient) {
+            return this.renderGradientFill(
+                seriesName, xAxisIndex, yAxisIndex,
+                plot1Data, plot2Data, totalDataLength,
+                optionsArray, plotOptions
+            );
+        }
+
+        // --- Simple (solid color) fill ---
         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
@@ -37,54 +48,37 @@ export class FillRenderer implements SeriesRenderer {
             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
+            z: 1,
             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
+                const y1 = api.value(1);
+                const y2 = api.value(2);
+                const prevY1 = api.value(3);
+                const prevY2 = api.value(4);
 
-                // Skip if any value is null/NaN
                 if (
-                    y1 === null ||
-                    y2 === null ||
-                    prevY1 === null ||
-                    prevY2 === null ||
-                    isNaN(y1) ||
-                    isNaN(y2) ||
-                    isNaN(prevY1) ||
-                    isNaN(prevY2)
+                    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
+                const p1Prev = api.coord([index - 1, prevY1]);
+                const p1Curr = api.coord([index, y1]);
+                const p2Curr = api.coord([index, y2]);
+                const p2Prev = api.coord([index - 1, prevY2]);
 
-                // Create a smooth polygon connecting the segments
                 return {
                     type: 'polygon',
                     shape: {
-                        points: [
-                            p1Prev, // Top-left
-                            p1Curr, // Top-right
-                            p2Curr, // Bottom-right
-                            p2Prev, // Bottom-left
-                        ],
+                        points: [p1Prev, p1Curr, p2Curr, p2Prev],
                     },
                     style: {
                         fill: fillColor,
@@ -96,4 +90,117 @@ export class FillRenderer implements SeriesRenderer {
             data: fillDataWithPrev,
         };
     }
+
+    /**
+     * Render a gradient fill between two plots.
+     * Uses a vertical linear gradient from top_color (at the upper boundary)
+     * to bottom_color (at the lower boundary) for each polygon segment.
+     */
+    private renderGradientFill(
+        seriesName: string,
+        xAxisIndex: number,
+        yAxisIndex: number,
+        plot1Data: (number | null)[],
+        plot2Data: (number | null)[],
+        totalDataLength: number,
+        optionsArray: any[],
+        plotOptions: any
+    ): any {
+        // Build per-bar gradient color arrays from optionsArray
+        // Each entry in optionsArray has: { top_value, bottom_value, top_color, bottom_color }
+        const gradientColors: { topColor: string; topOpacity: number; bottomColor: string; bottomOpacity: number }[] = [];
+
+        for (let i = 0; i < totalDataLength; i++) {
+            const opts = optionsArray?.[i];
+            if (opts && opts.top_color !== undefined) {
+                const top = ColorUtils.parseColor(opts.top_color);
+                const bottom = ColorUtils.parseColor(opts.bottom_color);
+                gradientColors[i] = {
+                    topColor: top.color,
+                    topOpacity: top.opacity,
+                    bottomColor: bottom.color,
+                    bottomOpacity: bottom.opacity,
+                };
+            } else {
+                // Fallback: use a default semi-transparent fill
+                gradientColors[i] = {
+                    topColor: 'rgba(128,128,128,0.2)',
+                    topOpacity: 0.2,
+                    bottomColor: 'rgba(128,128,128,0.2)',
+                    bottomOpacity: 0.2,
+                };
+            }
+        }
+
+        // Create fill data with previous values
+        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]);
+        }
+
+        return {
+            name: seriesName,
+            type: 'custom',
+            xAxisIndex: xAxisIndex,
+            yAxisIndex: yAxisIndex,
+            z: 1,
+            renderItem: (params: any, api: any) => {
+                const index = params.dataIndex;
+                if (index === 0) return null;
+
+                const y1 = api.value(1);
+                const y2 = api.value(2);
+                const prevY1 = api.value(3);
+                const prevY2 = api.value(4);
+
+                if (
+                    y1 === null || y2 === null || prevY1 === null || prevY2 === null ||
+                    isNaN(y1) || isNaN(y2) || isNaN(prevY1) || isNaN(prevY2)
+                ) {
+                    return null;
+                }
+
+                const p1Prev = api.coord([index - 1, prevY1]);
+                const p1Curr = api.coord([index, y1]);
+                const p2Curr = api.coord([index, y2]);
+                const p2Prev = api.coord([index - 1, prevY2]);
+
+                // Get gradient colors for this bar
+                const gc = gradientColors[index] || gradientColors[index - 1];
+                if (!gc) return null;
+
+                // Convert colors to rgba strings with their opacities
+                const topRgba = ColorUtils.toRgba(gc.topColor, gc.topOpacity);
+                const bottomRgba = ColorUtils.toRgba(gc.bottomColor, gc.bottomOpacity);
+
+                // Determine if plot1 is above plot2 (in value space, higher value = higher on chart)
+                // We want top_color at the higher value, bottom_color at the lower value
+                const plot1IsAbove = y1 >= y2;
+
+                return {
+                    type: 'polygon',
+                    shape: {
+                        points: [p1Prev, p1Curr, p2Curr, p2Prev],
+                    },
+                    style: {
+                        fill: {
+                            type: 'linear',
+                            x: 0, y: 0, x2: 0, y2: 1, // vertical gradient
+                            colorStops: [
+                                { offset: 0, color: plot1IsAbove ? topRgba : bottomRgba },
+                                { offset: 1, color: plot1IsAbove ? bottomRgba : topRgba },
+                            ],
+                        },
+                    },
+                    silent: true,
+                };
+            },
+            data: fillDataWithPrev,
+        };
+    }
+
 }

package/src/components/renderers/LabelRenderer.ts

@@ -37,18 +37,18 @@ export class LabelRenderer implements SeriesRenderer {
                 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;
+                const xPos = (lbl.xloc === 'bar_index' || lbl.xloc === 'bi') ? (lbl.x + offset) : lbl.x;
 
                 // Determine Y value based on yloc
                 let yValue = lbl.y;
                 let symbolOffset: (string | number)[] = [0, 0];
 
-                if (yloc === 'abovebar') {
+                if (yloc === 'abovebar' || yloc === 'AboveBar' || yloc === 'ab') {
                     if (candlestickData && candlestickData[xPos]) {
                         yValue = candlestickData[xPos].high;
                     }
                     symbolOffset = [0, '-150%'];
-                } else if (yloc === 'belowbar') {
+                } else if (yloc === 'belowbar' || yloc === 'BelowBar' || yloc === 'bl') {
                     if (candlestickData && candlestickData[xPos]) {
                         yValue = candlestickData[xPos].low;
                     }
@@ -64,7 +64,8 @@ export class LabelRenderer implements SeriesRenderer {
 
                 // Dynamically size the bubble to fit text content
                 let finalSize: number | number[];
-                const isBubble = shape === 'labeldown' || shape === 'labelup' ||
+                const isBubble = shape === 'labeldown' || shape === 'shape_label_down' ||
+                    shape === 'labelup' || shape === 'shape_label_up' ||
                     shape === 'labelleft' || shape === 'labelright';
                 // Track label text offset for centering text within the body
                 // (excluding the pointer area)
@@ -150,8 +151,8 @@ export class LabelRenderer implements SeriesRenderer {
                         fontSize: fontSize,
                         fontWeight: 'bold',
                         align: isInsideLabel ? 'center'
-                            : textalign === 'align_left' ? 'left'
-                            : textalign === 'align_right' ? 'right'
+                            : (textalign === 'align_left' || textalign === 'left') ? 'left'
+                            : (textalign === 'align_right' || textalign === 'right') ? 'right'
                             : 'center',
                         verticalAlign: 'middle',
                         padding: [2, 6],
@@ -247,10 +248,10 @@ export class LabelRenderer implements SeriesRenderer {
             case 'text_outline':
             case 'none':
                 // Text only, positioned based on yloc
-                return yloc === 'abovebar' ? 'top' : yloc === 'belowbar' ? 'bottom' : 'top';
+                return (yloc === 'abovebar' || yloc === 'AboveBar' || yloc === 'ab') ? 'top' : (yloc === 'belowbar' || yloc === 'BelowBar' || yloc === 'bl') ? 'bottom' : 'top';
             default:
                 // For simple shapes (circle, diamond, etc.), text goes outside
-                return yloc === 'belowbar' ? 'bottom' : 'top';
+                return (yloc === 'belowbar' || yloc === 'BelowBar' || yloc === 'bl') ? 'bottom' : 'top';
         }
     }
 

package/src/components/renderers/LinefillRenderer.ts

@@ -16,7 +16,6 @@ export class LinefillRenderer implements SeriesRenderer {
         // 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];
@@ -31,93 +30,82 @@ export class LinefillRenderer implements SeriesRenderer {
                 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) {
+        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 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);
+                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,
+                    });
                 }
 
-                // 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,
-                };
+                return { type: 'group', children };
             },
-            data: fillData,
+            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 },