@qfo/qfchart 0.7.2 → 0.8.0

package/src/components/renderers/FillRenderer.ts

@@ -1,6 +1,15 @@
 import { SeriesRenderer, RenderContext } from './SeriesRenderer';
 import { ColorUtils } from '../../utils/ColorUtils';
 
+/**
+ * Configuration for a single fill band within a batched render.
+ */
+export interface BatchedFillEntry {
+    plot1Data: (number | null)[];
+    plot2Data: (number | null)[];
+    barColors: { color: string; opacity: number }[];
+}
+
 export class FillRenderer implements SeriesRenderer {
     render(context: RenderContext): any {
         const { seriesName, xAxisIndex, yAxisIndex, plotOptions, plotDataArrays, indicatorId, plotName, optionsArray } = context;
@@ -34,8 +43,25 @@ export class FillRenderer implements SeriesRenderer {
             );
         }
 
-        // --- Simple (solid color) fill ---
-        const { color: fillColor, opacity: fillOpacity } = ColorUtils.parseColor(plotOptions.color || 'rgba(128, 128, 128, 0.2)');
+        // --- Simple fill (supports per-bar color when color is a series) ---
+        const { color: defaultFillColor, opacity: defaultFillOpacity } = ColorUtils.parseColor(plotOptions.color || 'rgba(128, 128, 128, 0.2)');
+
+        // Check if we have per-bar color data in optionsArray
+        const hasPerBarColor = optionsArray?.some((o: any) => o && o.color !== undefined);
+
+        // Pre-parse per-bar colors for efficiency
+        let barColors: { color: string; opacity: number }[] | null = null;
+        if (hasPerBarColor) {
+            barColors = [];
+            for (let i = 0; i < totalDataLength; i++) {
+                const opts = optionsArray?.[i];
+                if (opts && opts.color !== undefined) {
+                    barColors[i] = ColorUtils.parseColor(opts.color);
+                } else {
+                    barColors[i] = { color: defaultFillColor, opacity: defaultFillOpacity };
+                }
+            }
+        }
 
         // Create fill data with previous values for smooth polygon rendering
         const fillDataWithPrev: any[] = [];
@@ -54,6 +80,9 @@ export class FillRenderer implements SeriesRenderer {
             xAxisIndex: xAxisIndex,
             yAxisIndex: yAxisIndex,
             z: 1,
+            clip: true,
+            encode: { x: 0 },
+            animation: false,
             renderItem: (params: any, api: any) => {
                 const index = params.dataIndex;
                 if (index === 0) return null;
@@ -70,6 +99,12 @@ export class FillRenderer implements SeriesRenderer {
                     return null;
                 }
 
+                const fc = barColors ? barColors[index] : null;
+
+                // Skip fully transparent fills
+                const fillOpacity = fc ? fc.opacity : defaultFillOpacity;
+                if (fillOpacity < 0.01) return null;
+
                 const p1Prev = api.coord([index - 1, prevY1]);
                 const p1Curr = api.coord([index, y1]);
                 const p2Curr = api.coord([index, y2]);
@@ -81,13 +116,86 @@ export class FillRenderer implements SeriesRenderer {
                         points: [p1Prev, p1Curr, p2Curr, p2Prev],
                     },
                     style: {
-                        fill: fillColor,
+                        fill: fc ? fc.color : defaultFillColor,
                         opacity: fillOpacity,
                     },
                     silent: true,
                 };
             },
             data: fillDataWithPrev,
+            silent: true,
+        };
+    }
+
+    /**
+     * Batch-render multiple fill bands as a single ECharts custom series.
+     * Instead of N separate series (one per fill), this creates ONE series
+     * where each renderItem call draws all fill bands as a group of children.
+     *
+     * Performance: reduces series count from N to 1, eliminates per-series
+     * ECharts overhead, and enables viewport culling via clip + encode.
+     */
+    renderBatched(
+        seriesName: string,
+        xAxisIndex: number,
+        yAxisIndex: number,
+        totalDataLength: number,
+        fills: BatchedFillEntry[]
+    ): any {
+        // Simple index-only data for ECharts — encode: {x:0} enables dataZoom filtering
+        const data = Array.from({ length: totalDataLength }, (_, i) => [i]);
+
+        return {
+            name: seriesName,
+            type: 'custom',
+            xAxisIndex,
+            yAxisIndex,
+            z: 1,
+            clip: true,
+            encode: { x: 0 },
+            animation: false,
+            renderItem: (params: any, api: any) => {
+                const index = params.dataIndex;
+                if (index === 0) return null;
+
+                const children: any[] = [];
+
+                for (let f = 0; f < fills.length; f++) {
+                    const fill = fills[f];
+                    const y1 = fill.plot1Data[index];
+                    const y2 = fill.plot2Data[index];
+                    const prevY1 = fill.plot1Data[index - 1];
+                    const prevY2 = fill.plot2Data[index - 1];
+
+                    if (
+                        y1 == null || y2 == null || prevY1 == null || prevY2 == null ||
+                        isNaN(y1 as number) || isNaN(y2 as number) ||
+                        isNaN(prevY1 as number) || isNaN(prevY2 as number)
+                    ) {
+                        continue;
+                    }
+
+                    // Skip fully transparent fills
+                    const fc = fill.barColors[index];
+                    if (!fc || fc.opacity < 0.01) continue;
+
+                    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]);
+
+                    children.push({
+                        type: 'polygon',
+                        shape: { points: [p1Prev, p1Curr, p2Curr, p2Prev] },
+                        style: { fill: fc.color, opacity: fc.opacity },
+                        silent: true,
+                    });
+                }
+
+                return children.length > 0 ? { type: 'group', children, silent: true } : null;
+            },
+            data,
+            silent: true,
         };
     }
 
@@ -148,6 +256,9 @@ export class FillRenderer implements SeriesRenderer {
             xAxisIndex: xAxisIndex,
             yAxisIndex: yAxisIndex,
             z: 1,
+            clip: true,
+            encode: { x: 0 },
+            animation: false,
             renderItem: (params: any, api: any) => {
                 const index = params.dataIndex;
                 if (index === 0) return null;
@@ -173,6 +284,9 @@ export class FillRenderer implements SeriesRenderer {
                 const gc = gradientColors[index] || gradientColors[index - 1];
                 if (!gc) return null;
 
+                // Skip fully transparent gradient fills
+                if (gc.topOpacity < 0.01 && gc.bottomOpacity < 0.01) 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);
@@ -200,6 +314,7 @@ export class FillRenderer implements SeriesRenderer {
                 };
             },
             data: fillDataWithPrev,
+            silent: true,
         };
     }
 

package/src/components/renderers/HistogramRenderer.ts

@@ -1,20 +1,67 @@
-import { SeriesRenderer, RenderContext } from './SeriesRenderer';
-
-export class HistogramRenderer implements SeriesRenderer {
-    render(context: RenderContext): any {
-        const { seriesName, xAxisIndex, yAxisIndex, dataArray, colorArray, plotOptions } = context;
-        const defaultColor = '#2962ff';
-
-        return {
-            name: seriesName,
-            type: 'bar',
-            xAxisIndex: xAxisIndex,
-            yAxisIndex: yAxisIndex,
-            data: dataArray.map((val, i) => ({
-                value: val,
-                itemStyle: colorArray[i] ? { color: colorArray[i] } : undefined,
-            })),
-            itemStyle: { color: plotOptions.color || defaultColor },
-        };
-    }
-}
+import { SeriesRenderer, RenderContext } from './SeriesRenderer';
+
+export class HistogramRenderer implements SeriesRenderer {
+    render(context: RenderContext): any {
+        const { seriesName, xAxisIndex, yAxisIndex, dataArray, colorArray, plotOptions } = context;
+        const defaultColor = '#2962ff';
+        const histbase: number = plotOptions.histbase ?? 0;
+        const isColumns = plotOptions.style === 'columns';
+        const linewidth: number = plotOptions.linewidth ?? 1;
+
+        // Build data array: [index, value, color]
+        const customData = dataArray.map((val: number | null, i: number) => {
+            if (val === null || val === undefined || (typeof val === 'number' && isNaN(val))) return null;
+            return [i, val, colorArray[i] || plotOptions.color || defaultColor];
+        });
+
+        return {
+            name: seriesName,
+            type: 'custom',
+            xAxisIndex: xAxisIndex,
+            yAxisIndex: yAxisIndex,
+            renderItem: (params: any, api: any) => {
+                const idx = api.value(0);
+                const value = api.value(1);
+                const color = api.value(2);
+
+                if (value === null || value === undefined || isNaN(value)) {
+                    return null;
+                }
+
+                const basePos = api.coord([idx, histbase]);
+                const valuePos = api.coord([idx, value]);
+                const candleWidth = api.size([1, 0])[0];
+
+                // Columns: thick bars (60% of candle width)
+                // Histogram: thin bars — scale with linewidth (like TradingView)
+                let barWidth: number;
+                if (isColumns) {
+                    barWidth = candleWidth * 0.6;
+                } else {
+                    // Thin line-like bars: linewidth controls pixel width (min 1px)
+                    barWidth = Math.max(1, linewidth);
+                }
+
+                const x = basePos[0];
+                const yBase = basePos[1];
+                const yValue = valuePos[1];
+                const top = Math.min(yBase, yValue);
+                const height = Math.abs(yValue - yBase);
+
+                return {
+                    type: 'rect',
+                    shape: {
+                        x: x - barWidth / 2,
+                        y: top,
+                        width: barWidth,
+                        height: height || 1, // Minimum 1px for zero-height bars
+                    },
+                    style: {
+                        fill: color,
+                    },
+                };
+            },
+            data: customData.filter((d: any) => d !== null),
+        };
+    }
+}

package/src/components/renderers/LabelRenderer.ts

@@ -24,14 +24,19 @@ export class LabelRenderer implements SeriesRenderer {
 
         const labelData = labelObjects
             .map((lbl) => {
-                const text = lbl.text || '';
-                const color = lbl.color || '#2962ff';
-                const textcolor = lbl.textcolor || '#ffffff';
-                const yloc = lbl.yloc || 'price';
-                const styleRaw = lbl.style || 'style_label_down';
-                const size = lbl.size || 'normal';
-                const textalign = lbl.textalign || 'align_center';
-                const tooltip = lbl.tooltip || '';
+                // Resolve any function/Series values that may not have been
+                // resolved at PineTS level (e.g. setters that skip _resolve()).
+                const resolve = (v: any) => typeof v === 'function' ? v() : v;
+
+                const text = resolve(lbl.text) || '';
+                const rawColor = resolve(lbl.color);
+                const color = (rawColor != null && rawColor !== '') ? rawColor : 'transparent';
+                const textcolor = resolve(lbl.textcolor) || '#ffffff';
+                const yloc = resolve(lbl.yloc) || 'price';
+                const styleRaw = resolve(lbl.style) || 'style_label_down';
+                const size = resolve(lbl.size) || 'normal';
+                const textalign = resolve(lbl.textalign) || 'align_center';
+                const tooltip = resolve(lbl.tooltip) || '';
 
                 // Map Pine style string to shape name for ShapeUtils
                 const shape = this.styleToShape(styleRaw);
@@ -160,7 +165,24 @@ export class LabelRenderer implements SeriesRenderer {
                 };
 
                 if (tooltip) {
-                    item.tooltip = { formatter: tooltip };
+                    // Store tooltip text for the custom tooltip overlay in QFChart.ts.
+                    // ECharts mouseover event can read this from params.data._tooltipText.
+                    item._tooltipText = tooltip;
+                    // Enable emphasis for this item so ECharts fires mouseover/mouseout
+                    // events, but prevent any visual change by mirroring normal styles.
+                    item.emphasis = {
+                        scale: false,
+                        itemStyle: { color: color },
+                        label: {
+                            show: item.label.show,
+                            color: textcolor,
+                            fontSize: fontSize,
+                            fontWeight: 'bold',
+                        },
+                    };
+                } else {
+                    // No tooltip: fully disable emphasis (no hover interaction)
+                    item.emphasis = { disabled: true };
                 }
 
                 return item;
@@ -174,6 +196,10 @@ export class LabelRenderer implements SeriesRenderer {
             yAxisIndex: yAxisIndex,
             data: labelData,
             z: 20,
+            // Per-item emphasis: disabled for labels without tooltips,
+            // scale:false for labels with tooltips (allows hover for custom tooltip).
+            animation: false,               // Prevent labels disappearing on zoom
+            clip: false,                    // Keep labels visible when partially outside viewport
         };
     }
 

package/src/components/renderers/LinefillRenderer.ts

@@ -37,20 +37,12 @@ export class LinefillRenderer implements SeriesRenderer {
             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.
+        // Note: We do NOT encode y-dimensions — drawing objects should not influence the
+        // y-axis auto-scaling.
         const totalBars = (context.candlestickData?.length || 0) + offset;
         const lastBarIndex = Math.max(0, totalBars - 1);
 
@@ -103,9 +95,9 @@ export class LinefillRenderer implements SeriesRenderer {
 
                 return { type: 'group', children };
             },
-            data: [[0, lastBarIndex, yMin, yMax]],
+            data: [[0, lastBarIndex]],
             clip: true,
-            encode: { x: [0, 1], y: [2, 3] },
+            encode: { x: [0, 1] },
             z: 10, // Behind lines (z=15) but above other elements
             silent: true,
             emphasis: { disabled: true },