@qfo/qfchart 0.8.4 → 0.8.5

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@qfo/qfchart",
-    "version": "0.8.4",
+    "version": "0.8.5",
     "description": "Professional financial charting library built on Apache ECharts with candlestick charts, technical indicators, and interactive drawing tools",
     "keywords": [
         "chart",

package/src/components/GraphicBuilder.ts

@@ -184,6 +184,50 @@ export class GraphicBuilder {
             }
         }
 
+        // Pane Separator Lines (between main chart and indicator panes, and between indicators)
+        // Offset upward from center so the line doesn't overlap the lower pane's y-axis labels
+        if (!maximizedPaneId && layout.paneBoundaries.length > 0) {
+            const sepOffset = -8 * pixelToPercent; // shift 8px up from gap center
+            for (const boundary of layout.paneBoundaries) {
+                graphic.push({
+                    type: 'group',
+                    left: '10%',
+                    top: (boundary.yPercent + sepOffset) + '%',
+                    children: [
+                        // Invisible wide hit target for easier hover/drag
+                        {
+                            type: 'rect',
+                            shape: { width: 5000, height: 12, y: -6 },
+                            style: { fill: 'transparent' },
+                            cursor: 'row-resize',
+                        },
+                        // Visible line — moderately visible default, bright on hover
+                        {
+                            type: 'rect',
+                            shape: { width: 5000, height: 2, y: -1 },
+                            style: { fill: '#475569', opacity: 0.7 },
+                            cursor: 'row-resize',
+                        },
+                    ],
+                    z: 50,
+                    onmouseover: function () {
+                        const line = this.children()[1];
+                        if (line) {
+                            line.setStyle({ fill: '#94a3b8', opacity: 1.0 });
+                            line.setShape({ height: 3, y: -1.5 });
+                        }
+                    },
+                    onmouseout: function () {
+                        const line = this.children()[1];
+                        if (line) {
+                            line.setStyle({ fill: '#475569', opacity: 0.7 });
+                            line.setShape({ height: 2, y: -1 });
+                        }
+                    },
+                });
+            }
+        }
+
         // Indicator Panes
         layout.paneLayout.forEach((pane) => {
             // If maximizedPaneId is set, and this is NOT the maximized pane, skip rendering its controls

package/src/components/Indicator.ts

@@ -1,106 +1,106 @@
-import { Indicator as IndicatorInterface, IndicatorPlot, IndicatorPoint } from '../types';
-
-export class Indicator implements IndicatorInterface {
-    public id: string;
-    public plots: { [name: string]: IndicatorPlot };
-    public paneIndex: number;
-    public height?: number;
-    public collapsed: boolean;
-    public titleColor?: string;
-    public controls?: { collapse?: boolean; maximize?: boolean };
-
-    constructor(
-        id: string,
-        plots: { [name: string]: IndicatorPlot },
-        paneIndex: number,
-        options: {
-            height?: number;
-            collapsed?: boolean;
-            titleColor?: string;
-            controls?: { collapse?: boolean; maximize?: boolean };
-        } = {}
-    ) {
-        this.id = id;
-        this.plots = plots;
-        this.paneIndex = paneIndex;
-        this.height = options.height;
-        this.collapsed = options.collapsed || false;
-        this.titleColor = options.titleColor;
-        this.controls = options.controls;
-    }
-
-    public toggleCollapse(): void {
-        this.collapsed = !this.collapsed;
-    }
-
-    public isVisible(): boolean {
-        return !this.collapsed;
-    }
-
-    /**
-     * Update indicator data incrementally by merging new points
-     *
-     * @param plots - New plots data to merge (same structure as constructor)
-     *
-     * @remarks
-     * This method merges new indicator data with existing data by timestamp.
-     * - New timestamps are added
-     * - Existing timestamps are updated with new values
-     * - All data is automatically sorted by time after merge
-     *
-     * **Important**: This method only updates the indicator's internal data structure.
-     * To see the changes reflected in the chart, you MUST call `chart.updateData()`
-     * after updating indicator data.
-     *
-     * **Usage Pattern**:
-     * ```typescript
-     * // 1. Update indicator data first
-     * indicator.updateData({
-     *   macd: { data: [{ time: 1234567890, value: 150 }], options: { style: 'line', color: '#2962FF' } }
-     * });
-     *
-     * // 2. Then update chart data to trigger re-render
-     * chart.updateData([
-     *   { time: 1234567890, open: 100, high: 105, low: 99, close: 103, volume: 1000 }
-     * ]);
-     * ```
-     *
-     * **Note**: If you update indicator data without corresponding market data changes,
-     * this typically indicates a recalculation scenario. In normal workflows, indicator
-     * values are derived from market data, so indicator updates should correspond to
-     * new or modified market bars.
-     */
-    public updateData(plots: { [name: string]: IndicatorPlot }): void {
-        Object.keys(plots).forEach((plotName) => {
-            if (!this.plots[plotName]) {
-                // New plot - add it
-                this.plots[plotName] = plots[plotName];
-            } else {
-                // Existing plot - merge data points
-                const existingPlot = this.plots[plotName];
-                const newPlot = plots[plotName];
-
-                if (!existingPlot.data) return;
-
-                // Update options if provided
-                if (newPlot.options) {
-                    existingPlot.options = { ...existingPlot.options, ...newPlot.options };
-                }
-
-                // Merge data points by time
-                const existingTimeMap = new Map<number, IndicatorPoint>();
-                existingPlot.data?.forEach((point) => {
-                    existingTimeMap.set(point.time, point);
-                });
-
-                // Update or add new points
-                newPlot.data?.forEach((point) => {
-                    existingTimeMap.set(point.time, point);
-                });
-
-                // Rebuild data array sorted by time
-                existingPlot.data = Array.from(existingTimeMap.values()).sort((a, b) => a.time - b.time);
-            }
-        });
-    }
-}
+import { Indicator as IndicatorInterface, IndicatorPlot, IndicatorPoint } from '../types';
+
+export class Indicator implements IndicatorInterface {
+    public id: string;
+    public plots: { [name: string]: IndicatorPlot };
+    public paneIndex: number;
+    public height?: number;
+    public collapsed: boolean;
+    public titleColor?: string;
+    public controls?: { collapse?: boolean; maximize?: boolean };
+
+    constructor(
+        id: string,
+        plots: { [name: string]: IndicatorPlot },
+        paneIndex: number,
+        options: {
+            height?: number;
+            collapsed?: boolean;
+            titleColor?: string;
+            controls?: { collapse?: boolean; maximize?: boolean };
+        } = {}
+    ) {
+        this.id = id;
+        this.plots = plots;
+        this.paneIndex = paneIndex;
+        this.height = options.height;
+        this.collapsed = options.collapsed || false;
+        this.titleColor = options.titleColor;
+        this.controls = options.controls;
+    }
+
+    public toggleCollapse(): void {
+        this.collapsed = !this.collapsed;
+    }
+
+    public isVisible(): boolean {
+        return !this.collapsed;
+    }
+
+    /**
+     * Update indicator data incrementally by merging new points
+     *
+     * @param plots - New plots data to merge (same structure as constructor)
+     *
+     * @remarks
+     * This method merges new indicator data with existing data by timestamp.
+     * - New timestamps are added
+     * - Existing timestamps are updated with new values
+     * - All data is automatically sorted by time after merge
+     *
+     * **Important**: This method only updates the indicator's internal data structure.
+     * To see the changes reflected in the chart, you MUST call `chart.updateData()`
+     * after updating indicator data.
+     *
+     * **Usage Pattern**:
+     * ```typescript
+     * // 1. Update indicator data first
+     * indicator.updateData({
+     *   macd: { data: [{ time: 1234567890, value: 150 }], options: { style: 'line', color: '#2962FF' } }
+     * });
+     *
+     * // 2. Then update chart data to trigger re-render
+     * chart.updateData([
+     *   { time: 1234567890, open: 100, high: 105, low: 99, close: 103, volume: 1000 }
+     * ]);
+     * ```
+     *
+     * **Note**: If you update indicator data without corresponding market data changes,
+     * this typically indicates a recalculation scenario. In normal workflows, indicator
+     * values are derived from market data, so indicator updates should correspond to
+     * new or modified market bars.
+     */
+    public updateData(plots: { [name: string]: IndicatorPlot }): void {
+        Object.keys(plots).forEach((plotName) => {
+            if (!this.plots[plotName]) {
+                // New plot - add it
+                this.plots[plotName] = plots[plotName];
+            } else {
+                // Existing plot - merge data points
+                const existingPlot = this.plots[plotName];
+                const newPlot = plots[plotName];
+
+                if (!existingPlot.data) return;
+
+                // Update options if provided
+                if (newPlot.options) {
+                    existingPlot.options = { ...existingPlot.options, ...newPlot.options };
+                }
+
+                // Merge data points by time
+                const existingTimeMap = new Map<number, IndicatorPoint>();
+                existingPlot.data?.forEach((point) => {
+                    existingTimeMap.set(point.time, point);
+                });
+
+                // Update or add new points
+                newPlot.data?.forEach((point) => {
+                    existingTimeMap.set(point.time, point);
+                });
+
+                // Rebuild data array sorted by time
+                existingPlot.data = Array.from(existingTimeMap.values()).sort((a, b) => a.time - b.time);
+            }
+        });
+    }
+}

package/src/components/SeriesBuilder.ts

@@ -104,6 +104,9 @@ export class SeriesBuilder {
         const series: any[] = [];
         const barColors: (string | null)[] = new Array(totalDataLength).fill(null);
 
+        // Extract raw (non-null) market data for resolving xloc.bar_time coordinates
+        const rawMarketData = candlestickData?.filter((d): d is OHLCV => d != null && d.time !== undefined);
+
         // Store plot data arrays for fill plots to reference
         const plotDataArrays = new Map<string, number[]>();
 
@@ -348,6 +351,8 @@ export class SeriesBuilder {
                     indicatorId: id,
                     plotName: plotName,
                     dataIndexOffset,
+                    timeToIndex,
+                    marketData: rawMarketData,
                 });
 
                 if (seriesConfig) {

package/src/components/renderers/BoxRenderer.ts

@@ -1,4 +1,4 @@
-import { SeriesRenderer, RenderContext } from './SeriesRenderer';
+import { SeriesRenderer, RenderContext, resolveXCoord } from './SeriesRenderer';
 
 /**
  * Convert any color string to a format ECharts canvas can render with opacity.
@@ -60,7 +60,7 @@ function luminance(r: number, g: number, b: number): number {
  */
 export class BoxRenderer implements SeriesRenderer {
     render(context: RenderContext): any {
-        const { seriesName, xAxisIndex, yAxisIndex, dataArray, dataIndexOffset } = context;
+        const { seriesName, xAxisIndex, yAxisIndex, dataArray, dataIndexOffset, timeToIndex, marketData } = context;
         const offset = dataIndexOffset || 0;
 
         // Collect all non-deleted box objects from the sparse dataArray.
@@ -103,9 +103,11 @@ export class BoxRenderer implements SeriesRenderer {
                 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]);
+                    const leftX = resolveXCoord(bx.left, bx.xloc, offset, timeToIndex, marketData);
+                    const rightX = resolveXCoord(bx.right, bx.xloc, offset, timeToIndex, marketData);
+                    if (isNaN(leftX) || isNaN(rightX)) continue;
+                    const pTopLeft = api.coord([leftX, bx.top]);
+                    const pBottomRight = api.coord([rightX, bx.bottom]);
 
                     let x = pTopLeft[0];
                     let y = pTopLeft[1];

package/src/components/renderers/DrawingLineRenderer.ts

@@ -1,4 +1,4 @@
-import { SeriesRenderer, RenderContext } from './SeriesRenderer';
+import { SeriesRenderer, RenderContext, resolveXCoord } from './SeriesRenderer';
 
 /**
  * Renderer for Pine Script line.* drawing objects.
@@ -9,7 +9,7 @@ import { SeriesRenderer, RenderContext } from './SeriesRenderer';
  */
 export class DrawingLineRenderer implements SeriesRenderer {
     render(context: RenderContext): any {
-        const { seriesName, xAxisIndex, yAxisIndex, dataArray, dataIndexOffset } = context;
+        const { seriesName, xAxisIndex, yAxisIndex, dataArray, dataIndexOffset, timeToIndex, marketData } = context;
         const offset = dataIndexOffset || 0;
         const defaultColor = '#2962ff';
 
@@ -55,10 +55,12 @@ export class DrawingLineRenderer implements SeriesRenderer {
 
                 for (const ln of lineObjects) {
                     if (ln._deleted) continue;
-                    const xOff = (ln.xloc === 'bar_index' || ln.xloc === 'bi') ? offset : 0;
+                    const x1Resolved = resolveXCoord(ln.x1, ln.xloc, offset, timeToIndex, marketData);
+                    const x2Resolved = resolveXCoord(ln.x2, ln.xloc, offset, timeToIndex, marketData);
+                    if (isNaN(x1Resolved) || isNaN(x2Resolved)) continue;
 
-                    let p1 = api.coord([ln.x1 + xOff, ln.y1]);
-                    let p2 = api.coord([ln.x2 + xOff, ln.y2]);
+                    let p1 = api.coord([x1Resolved, ln.y1]);
+                    let p2 = api.coord([x2Resolved, ln.y2]);
 
                     // Handle extend (none/n | left/l | right/r | both/b)
                     const extend = ln.extend || 'none';

package/src/components/renderers/FillRenderer.ts

@@ -201,8 +201,9 @@ export class FillRenderer implements SeriesRenderer {
 
     /**
      * 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.
+     * Uses per-bar top_value/bottom_value as the actual Y boundaries (not the raw plot values).
+     * A vertical linear gradient goes from top_color (at top_value) to bottom_color (at bottom_value).
+     * When top_value or bottom_value is na/NaN, the fill is hidden for that bar.
      */
     private renderGradientFill(
         seriesName: string,
@@ -214,40 +215,52 @@ export class FillRenderer implements SeriesRenderer {
         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 }[] = [];
+        // Build per-bar gradient data from optionsArray
+        // Each entry has: { top_value, bottom_value, top_color, bottom_color }
+        interface GradientBar {
+            topValue: number | null;
+            bottomValue: number | null;
+            topColor: string;
+            topOpacity: number;
+            bottomColor: string;
+            bottomOpacity: number;
+        }
+        const gradientBars: (GradientBar | null)[] = [];
 
         for (let i = 0; i < totalDataLength; i++) {
             const opts = optionsArray?.[i];
             if (opts && opts.top_color !== undefined) {
+                const tv = opts.top_value;
+                const bv = opts.bottom_value;
+                // na/NaN/null/undefined → null (hidden bar)
+                const topVal = (tv == null || (typeof tv === 'number' && isNaN(tv))) ? null : tv;
+                const btmVal = (bv == null || (typeof bv === 'number' && isNaN(bv))) ? null : bv;
+
                 const top = ColorUtils.parseColor(opts.top_color);
                 const bottom = ColorUtils.parseColor(opts.bottom_color);
-                gradientColors[i] = {
+                gradientBars[i] = {
+                    topValue: topVal,
+                    bottomValue: btmVal,
                     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,
-                };
+                gradientBars[i] = null;
             }
         }
 
-        // Create fill data with previous values
-        const fillDataWithPrev: any[] = [];
+        // Create fill data using top_value/bottom_value as Y boundaries
+        const fillData: 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]);
+            const gb = gradientBars[i];
+            const prevGb = i > 0 ? gradientBars[i - 1] : null;
+            const topY = gb?.topValue ?? null;
+            const btmY = gb?.bottomValue ?? null;
+            const prevTopY = prevGb?.topValue ?? null;
+            const prevBtmY = prevGb?.bottomValue ?? null;
+            fillData.push([i, topY, btmY, prevTopY, prevBtmY]);
         }
 
         return {
@@ -263,57 +276,53 @@ export class FillRenderer implements SeriesRenderer {
                 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);
+                const topY = api.value(1);
+                const btmY = api.value(2);
+                const prevTopY = api.value(3);
+                const prevBtmY = api.value(4);
 
+                // Skip when any boundary is na (hidden bar)
                 if (
-                    y1 === null || y2 === null || prevY1 === null || prevY2 === null ||
-                    isNaN(y1) || isNaN(y2) || isNaN(prevY1) || isNaN(prevY2)
+                    topY == null || btmY == null || prevTopY == null || prevBtmY == null ||
+                    isNaN(topY) || isNaN(btmY) || isNaN(prevTopY) || isNaN(prevBtmY)
                 ) {
                     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;
+                const gb = gradientBars[index];
+                if (!gb) return null;
 
                 // Skip fully transparent gradient fills
-                if (gc.topOpacity < 0.01 && gc.bottomOpacity < 0.01) return null;
+                if (gb.topOpacity < 0.01 && gb.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);
+                const topRgba = ColorUtils.toRgba(gb.topColor, gb.topOpacity);
+                const bottomRgba = ColorUtils.toRgba(gb.bottomColor, gb.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;
+                const pTopPrev = api.coord([index - 1, prevTopY]);
+                const pTopCurr = api.coord([index, topY]);
+                const pBtmCurr = api.coord([index, btmY]);
+                const pBtmPrev = api.coord([index - 1, prevBtmY]);
 
                 return {
                     type: 'polygon',
                     shape: {
-                        points: [p1Prev, p1Curr, p2Curr, p2Prev],
+                        points: [pTopPrev, pTopCurr, pBtmCurr, pBtmPrev],
                     },
                     style: {
                         fill: {
                             type: 'linear',
-                            x: 0, y: 0, x2: 0, y2: 1, // vertical gradient
+                            x: 0, y: 0, x2: 0, y2: 1,
                             colorStops: [
-                                { offset: 0, color: plot1IsAbove ? topRgba : bottomRgba },
-                                { offset: 1, color: plot1IsAbove ? bottomRgba : topRgba },
+                                { offset: 0, color: topRgba },
+                                { offset: 1, color: bottomRgba },
                             ],
                         },
                     },
                     silent: true,
                 };
             },
-            data: fillDataWithPrev,
+            data: fillData,
             silent: true,
         };
     }

package/src/components/renderers/LabelRenderer.ts

@@ -1,9 +1,9 @@
-import { SeriesRenderer, RenderContext } from './SeriesRenderer';
+import { SeriesRenderer, RenderContext, resolveXCoord } from './SeriesRenderer';
 import { ShapeUtils } from '../../utils/ShapeUtils';
 
 export class LabelRenderer implements SeriesRenderer {
     render(context: RenderContext): any {
-        const { seriesName, xAxisIndex, yAxisIndex, dataArray, candlestickData, dataIndexOffset } = context;
+        const { seriesName, xAxisIndex, yAxisIndex, dataArray, candlestickData, dataIndexOffset, timeToIndex, marketData } = context;
         const offset = dataIndexOffset || 0;
 
         // Collect all non-null, non-deleted label objects from the sparse dataArray.
@@ -42,7 +42,8 @@ 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.xloc === 'bi') ? (lbl.x + offset) : lbl.x;
+                const xPos = resolveXCoord(lbl.x, lbl.xloc, offset, timeToIndex, marketData);
+                if (isNaN(xPos)) return null;
 
                 // Determine Y value based on yloc
                 let yValue = lbl.y;
@@ -126,6 +127,18 @@ export class LabelRenderer implements SeriesRenderer {
                             labelTextOffset = [0, totalHeight * pointerRatio * 0.5];
                         }
                     }
+                } else if (shape === 'labelcenter') {
+                    // label_center: no pointer, centered at exact coordinate.
+                    // Size the bubble body to fit text but apply NO offset.
+                    const lines = text.split('\n');
+                    const longestLine = lines.reduce((a: string, b: string) => a.length > b.length ? a : b, '');
+                    const textWidth = longestLine.length * fontSize * 0.65;
+                    const minWidth = fontSize * 2.5;
+                    const bubbleWidth = Math.max(minWidth, textWidth + fontSize * 1.6);
+                    const lineHeight = fontSize * 1.4;
+                    const bubbleHeight = Math.max(fontSize * 2.8, lines.length * lineHeight + fontSize * 1.2);
+                    finalSize = [bubbleWidth, bubbleHeight];
+                    // No symbolOffset — center exactly at the coordinate
                 } else if (shape === 'none') {
                     finalSize = 0;
                 } else {
@@ -228,7 +241,7 @@ export class LabelRenderer implements SeriesRenderer {
             case 'label_upper_right':
                 return 'labelup';
             case 'label_center':
-                return 'labeldown';
+                return 'labelcenter';
             case 'circle':
                 return 'circle';
             case 'square':
@@ -289,16 +302,16 @@ export class LabelRenderer implements SeriesRenderer {
             case 'tiny':
                 return 8;
             case 'small':
-                return 9;
+                return 11;
             case 'normal':
             case 'auto':
-                return 10;
+                return 14;
             case 'large':
-                return 12;
+                return 20;
             case 'huge':
-                return 14;
+                return 36;
             default:
-                return 10;
+                return 14;
         }
     }
 }