@qfo/qfchart 0.8.2 → 0.8.5

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@qfo/qfchart",
-    "version": "0.8.2",
+    "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/QFChart.ts

@@ -984,6 +984,9 @@ export class QFChart implements ChartContext {
             return candle;
         });
 
+        // Build drawing range hints for Y-axis scaling
+        const updateDrawingRangeHints = this._buildDrawingRangeHints(layout, paddingPoints);
+
         // Update only the data arrays in the option, not the full config
         const updateOption: any = {
             xAxis: currentOption.xAxis.map((axis: any, index: number) => ({
@@ -995,6 +998,7 @@ export class QFChart implements ChartContext {
                     markLine: candlestickSeries.markLine, // Ensure markLine is updated
                 },
                 ...indicatorSeries,
+                ...updateDrawingRangeHints,
             ],
         };
 
@@ -1232,6 +1236,132 @@ export class QFChart implements ChartContext {
         this._renderTableOverlays();
     }
 
+    /**
+     * Build invisible "scatter" series that carry the min/max Y values of Pine
+     * Script drawing objects (lines, boxes, labels, polylines).  ECharts includes
+     * these points in its automatic Y-axis range calculation so drawings below
+     * or above the candlestick range are no longer clipped.
+     *
+     * Returns one hidden series per pane that has drawing objects with Y-values
+     * outside the default data range.
+     */
+    private _buildDrawingRangeHints(layout: any, paddingPoints: number): any[] {
+        const hintSeries: any[] = [];
+
+        // Collect Y-value bounds per pane from all indicator drawing objects
+        const boundsPerPane = new Map<number, { yMin: number; yMax: number }>();
+
+        for (const indicator of this.indicators) {
+            if (!indicator.plots) continue;
+            const paneIndex = indicator.paneIndex ?? 0;
+            if (!boundsPerPane.has(paneIndex)) {
+                boundsPerPane.set(paneIndex, { yMin: Infinity, yMax: -Infinity });
+            }
+            const bounds = boundsPerPane.get(paneIndex)!;
+
+            for (const [plotName, plot] of Object.entries(indicator.plots as Record<string, any>)) {
+                if (!plot || !plot.options) continue;
+                const style = plot.options?.style;
+
+                // Lines: y1, y2
+                if (style === 'drawing_line' && plot.data) {
+                    for (const entry of plot.data) {
+                        const items = entry?.value ? (Array.isArray(entry.value) ? entry.value : [entry.value]) : [];
+                        for (const ln of items) {
+                            if (!ln || ln._deleted) continue;
+                            if (typeof ln.y1 === 'number' && isFinite(ln.y1)) {
+                                bounds.yMin = Math.min(bounds.yMin, ln.y1);
+                                bounds.yMax = Math.max(bounds.yMax, ln.y1);
+                            }
+                            if (typeof ln.y2 === 'number' && isFinite(ln.y2)) {
+                                bounds.yMin = Math.min(bounds.yMin, ln.y2);
+                                bounds.yMax = Math.max(bounds.yMax, ln.y2);
+                            }
+                        }
+                    }
+                }
+
+                // Boxes: top, bottom
+                if (style === 'drawing_box' && plot.data) {
+                    for (const entry of plot.data) {
+                        const items = entry?.value ? (Array.isArray(entry.value) ? entry.value : [entry.value]) : [];
+                        for (const bx of items) {
+                            if (!bx || bx._deleted) continue;
+                            if (typeof bx.top === 'number' && isFinite(bx.top)) {
+                                bounds.yMin = Math.min(bounds.yMin, bx.top);
+                                bounds.yMax = Math.max(bounds.yMax, bx.top);
+                            }
+                            if (typeof bx.bottom === 'number' && isFinite(bx.bottom)) {
+                                bounds.yMin = Math.min(bounds.yMin, bx.bottom);
+                                bounds.yMax = Math.max(bounds.yMax, bx.bottom);
+                            }
+                        }
+                    }
+                }
+
+                // Labels: y
+                if (style === 'label' && plot.data) {
+                    for (const entry of plot.data) {
+                        const items = entry?.value ? (Array.isArray(entry.value) ? entry.value : [entry.value]) : [];
+                        for (const lbl of items) {
+                            if (!lbl || lbl._deleted) continue;
+                            if (typeof lbl.y === 'number' && isFinite(lbl.y)) {
+                                bounds.yMin = Math.min(bounds.yMin, lbl.y);
+                                bounds.yMax = Math.max(bounds.yMax, lbl.y);
+                            }
+                        }
+                    }
+                }
+
+                // Polylines: points[].price
+                if (style === 'drawing_polyline' && plot.data) {
+                    for (const entry of plot.data) {
+                        const items = entry?.value ? (Array.isArray(entry.value) ? entry.value : [entry.value]) : [];
+                        for (const pl of items) {
+                            if (!pl || pl._deleted || !pl._points) continue;
+                            for (const pt of pl._points) {
+                                if (typeof pt?.price === 'number' && isFinite(pt.price)) {
+                                    bounds.yMin = Math.min(bounds.yMin, pt.price);
+                                    bounds.yMax = Math.max(bounds.yMax, pt.price);
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        // Create a hidden scatter series per pane with min/max Y values
+        const midIndex = paddingPoints + Math.floor((this.marketData?.length || 0) / 2);
+        boundsPerPane.forEach((bounds, paneIndex) => {
+            if (!isFinite(bounds.yMin) || !isFinite(bounds.yMax)) return;
+
+            // Determine Y-axis index for this pane
+            const yAxisIndex = paneIndex === 0
+                ? 0
+                : (layout.separatePaneYAxisOffset || 1) + (paneIndex - 1);
+
+            hintSeries.push({
+                name: `_drawingRange_pane${paneIndex}`,
+                type: 'scatter',
+                xAxisIndex: paneIndex,
+                yAxisIndex,
+                symbol: 'none',
+                symbolSize: 0,
+                silent: true,
+                animation: false,
+                // Two invisible points at min and max Y — ECharts includes them in axis scaling
+                data: [
+                    [midIndex, bounds.yMin],
+                    [midIndex, bounds.yMax],
+                ],
+                tooltip: { show: false },
+            });
+        });
+
+        return hintSeries;
+    }
+
     /**
      * Build table canvas graphic elements from the current _lastTables.
      * Must be called AFTER setOption so grid rects are available from ECharts.
@@ -1602,6 +1732,10 @@ export class QFChart implements ChartContext {
             layout.separatePaneYAxisOffset, // Pass Y-axis offset for separate panes
         );
 
+        // Create hidden range-hint series so Pine Script drawing objects
+        // (lines, boxes, labels, polylines) contribute to Y-axis auto-scaling.
+        const drawingRangeHints = this._buildDrawingRangeHints(layout, paddingPoints);
+
         // Apply barColors (TradingView: barcolor() only changes body fill, borders/wicks stay default)
         candlestickSeries.data = candlestickSeries.data.map((candle: any, i: number) => {
             if (barColors[i]) {
@@ -1770,7 +1904,7 @@ export class QFChart implements ChartContext {
             xAxis: layout.xAxis,
             yAxis: layout.yAxis,
             dataZoom: layout.dataZoom,
-            series: [candlestickSeries, ...indicatorSeries, ...drawingSeriesList],
+            series: [candlestickSeries, ...indicatorSeries, ...drawingRangeHints, ...drawingSeriesList],
         };
 
         this.chart.setOption(option, true); // true = not merge, replace.

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/LayoutManager.ts

@@ -418,7 +418,10 @@ export class LayoutManager {
         const xAxis: any[] = [];
 
         // Main X-Axis
+        // Hide date labels on the main chart when indicator panes exist below —
+        // the bottom-most pane's x-axis will show them instead.
         const isMainBottom = paneConfigs.length === 0;
+        const showMainXLabels = !isMainCollapsed && isMainBottom;
         xAxis.push({
             type: 'category',
             data: [], // Will be filled by SeriesBuilder or QFChart
@@ -435,7 +438,7 @@ export class LayoutManager {
                 lineStyle: { color: gridLineColor, opacity: gridLineOpacity },
             },
             axisLabel: {
-                show: !isMainCollapsed,
+                show: showMainXLabels,
                 color: '#94a3b8',
                 fontFamily: options.fontFamily || 'sans-serif',
                 formatter: (value: number) => {
@@ -447,7 +450,7 @@ export class LayoutManager {
                     return AxisUtils.formatValue(value, decimals);
                 },
             },
-            axisTick: { show: !isMainCollapsed },
+            axisTick: { show: showMainXLabels },
             axisPointer: {
                 label: {
                     show: isMainBottom,
@@ -458,15 +461,21 @@ export class LayoutManager {
         });
 
         // Separate Panes X-Axes
+        // Show date labels only on the bottom-most pane
         paneConfigs.forEach((pane, i) => {
             const isBottom = i === paneConfigs.length - 1;
+            const showLabels = isBottom && !pane.isCollapsed;
             xAxis.push({
                 type: 'category',
                 gridIndex: i + 1, // 0 is main
                 data: [], // Shared data
-                axisLabel: { show: false }, // Hide labels on indicator panes
+                axisLabel: {
+                    show: showLabels,
+                    color: '#94a3b8',
+                    fontFamily: options.fontFamily || 'sans-serif',
+                },
                 axisLine: { show: !pane.isCollapsed && gridBorderShow, lineStyle: { color: gridBorderColor } },
-                axisTick: { show: false },
+                axisTick: { show: showLabels },
                 splitLine: { show: false },
                 axisPointer: {
                     label: {
@@ -549,16 +558,21 @@ export class LayoutManager {
                         const plotKey = `${id}::${plotName}`;
 
                         // Skip visual-only plot types that should never affect Y-axis scaling
-                        // EXCEPTION: shapes with abovebar/belowbar must stay on main Y-axis
-                        const visualOnlyStyles = ['background', 'barcolor', 'char'];
+                        // EXCEPTION: shapes/chars with price-relative locations must stay on main Y-axis
+                        const visualOnlyStyles = ['background', 'barcolor'];
 
-                        // Check if this is a shape with price-relative positioning
+                        // Check if this is a shape/char with price-relative positioning
+                        // Includes abovebar/belowbar (relative to candle) and absolute (exact Y value)
                         const isShapeWithPriceLocation =
-                            plot.options.style === 'shape' &&
+                            (plot.options.style === 'shape' || plot.options.style === 'char') &&
                             (plot.options.location === 'abovebar' ||
                                 plot.options.location === 'AboveBar' ||
+                                plot.options.location === 'ab' ||
                                 plot.options.location === 'belowbar' ||
-                                plot.options.location === 'BelowBar');
+                                plot.options.location === 'BelowBar' ||
+                                plot.options.location === 'bl' ||
+                                plot.options.location === 'absolute' ||
+                                plot.options.location === 'Absolute');
 
                         if (visualOnlyStyles.includes(plot.options.style)) {
                             // Assign these to a separate Y-axis so they don't affect price scale
@@ -569,8 +583,8 @@ export class LayoutManager {
                             return; // Skip further processing for this plot
                         }
 
-                        // If it's a shape but NOT with price-relative positioning, treat as visual-only
-                        if (plot.options.style === 'shape' && !isShapeWithPriceLocation) {
+                        // If it's a shape/char but NOT with price-relative positioning, treat as visual-only
+                        if ((plot.options.style === 'shape' || plot.options.style === 'char') && !isShapeWithPriceLocation) {
                             if (!overlayYAxisMap.has(plotKey)) {
                                 overlayYAxisMap.set(plotKey, nextYAxisIndex);
                                 nextYAxisIndex++;