@qfo/qfchart 0.7.2 → 0.8.0

package/src/components/LayoutManager.ts

@@ -14,6 +14,12 @@ export interface PaneConfiguration {
     };
 }
 
+export interface PaneBoundary {
+    yPercent: number;           // Y position in %, center of the gap between panes
+    aboveId: string | 'main';   // pane above (main chart or indicator id)
+    belowId: string;            // indicator id below
+}
+
 export interface LayoutResult {
     grid: any[];
     xAxis: any[];
@@ -23,6 +29,7 @@ export interface LayoutResult {
     mainPaneHeight: number;
     mainPaneTop: number;
     pixelToPercent: number;
+    paneBoundaries: PaneBoundary[];
 }
 
 export class LayoutManager {
@@ -32,7 +39,8 @@ export class LayoutManager {
         options: QFChartOptions,
         isMainCollapsed: boolean = false,
         maximizedPaneId: string | null = null,
-        marketData?: import('../types').OHLCV[]
+        marketData?: import('../types').OHLCV[],
+        mainHeightOverride?: number
     ): LayoutResult & { overlayYAxisMap: Map<string, number>; separatePaneYAxisOffset: number } {
         // Calculate pixelToPercent early for maximized logic
         let pixelToPercent = 0;
@@ -43,6 +51,17 @@ export class LayoutManager {
         // Get Y-axis padding percentage (default 5%)
         const yAxisPaddingPercent = options.yAxisPadding !== undefined ? options.yAxisPadding : 5;
 
+        // Grid styling options
+        const gridShow = options.grid?.show === true;               // default false
+        const gridLineColor = options.grid?.lineColor ?? '#334155';
+        const gridLineOpacity = options.grid?.lineOpacity ?? 0.5;
+        const gridBorderColor = options.grid?.borderColor ?? '#334155';
+        const gridBorderShow = options.grid?.borderShow === true;    // default false
+
+        // Layout margin options
+        const layoutLeft = options.layout?.left ?? '10%';
+        const layoutRight = options.layout?.right ?? '10%';
+
         // Identify unique separate panes (indices > 0) and sort them
         const separatePaneIndices = Array.from(indicators.values())
             .map((ind) => ind.paneIndex)
@@ -114,8 +133,8 @@ export class LayoutManager {
 
                 // Grid
                 grid.push({
-                    left: '10%',
-                    right: '10%',
+                    left: layoutLeft,
+                    right: layoutRight,
                     top: isTarget ? '5%' : '0%',
                     height: isTarget ? '90%' : '0%',
                     show: isTarget,
@@ -133,10 +152,10 @@ export class LayoutManager {
                         color: '#94a3b8',
                         fontFamily: options.fontFamily,
                     },
-                    axisLine: { show: isTarget, lineStyle: { color: '#334155' } },
+                    axisLine: { show: isTarget && gridBorderShow, lineStyle: { color: gridBorderColor } },
                     splitLine: {
-                        show: isTarget,
-                        lineStyle: { color: '#334155', opacity: 0.5 },
+                        show: isTarget && gridShow,
+                        lineStyle: { color: gridLineColor, opacity: gridLineOpacity },
                     },
                 });
 
@@ -183,8 +202,8 @@ export class LayoutManager {
                         },
                     },
                     splitLine: {
-                        show: isTarget,
-                        lineStyle: { color: '#334155', opacity: 0.5 },
+                        show: isTarget && gridShow,
+                        lineStyle: { color: gridLineColor, opacity: gridLineOpacity },
                     },
                 });
 
@@ -283,7 +302,10 @@ export class LayoutManager {
             const totalAvailable = chartAreaBottom - mainPaneTop;
             mainHeightVal = totalAvailable - totalBottomSpace;
 
-            if (isMainCollapsed) {
+            // Apply user-dragged main height override
+            if (mainHeightOverride !== undefined && mainHeightOverride > 0 && !isMainCollapsed) {
+                mainHeightVal = mainHeightOverride;
+            } else if (isMainCollapsed) {
                 mainHeightVal = 3;
             } else {
                 // Safety check: ensure main chart has at least some space (e.g. 20%)
@@ -315,12 +337,31 @@ export class LayoutManager {
             }
         }
 
+        // --- Build pane boundaries for drag-resize ---
+        const paneBoundaries: PaneBoundary[] = [];
+        if (paneConfigs.length > 0) {
+            // Boundary between main chart and first indicator
+            paneBoundaries.push({
+                yPercent: mainPaneTop + mainHeightVal + gapPercent / 2,
+                aboveId: 'main',
+                belowId: paneConfigs[0].indicatorId || '',
+            });
+            // Boundaries between consecutive indicators
+            for (let i = 0; i < paneConfigs.length - 1; i++) {
+                paneBoundaries.push({
+                    yPercent: paneConfigs[i].top + paneConfigs[i].height + gapPercent / 2,
+                    aboveId: paneConfigs[i].indicatorId || '',
+                    belowId: paneConfigs[i + 1].indicatorId || '',
+                });
+            }
+        }
+
         // --- Generate Grids ---
         const grid: any[] = [];
         // Main Grid (index 0)
         grid.push({
-            left: '10%',
-            right: '10%',
+            left: layoutLeft,
+            right: layoutRight,
             top: mainPaneTop + '%',
             height: mainHeightVal + '%',
             containLabel: false, // We handle margins explicitly
@@ -329,8 +370,8 @@ export class LayoutManager {
         // Separate Panes Grids
         paneConfigs.forEach((pane) => {
             grid.push({
-                left: '10%',
-                right: '10%',
+                left: layoutLeft,
+                right: layoutRight,
                 top: pane.top + '%',
                 height: pane.height + '%',
                 containLabel: false,
@@ -351,12 +392,12 @@ export class LayoutManager {
             // boundaryGap will be set in QFChart.ts based on padding option
             axisLine: {
                 onZero: false,
-                show: !isMainCollapsed,
-                lineStyle: { color: '#334155' },
+                show: !isMainCollapsed && gridBorderShow,
+                lineStyle: { color: gridBorderColor },
             },
             splitLine: {
-                show: !isMainCollapsed,
-                lineStyle: { color: '#334155', opacity: 0.5 },
+                show: !isMainCollapsed && gridShow,
+                lineStyle: { color: gridLineColor, opacity: gridLineOpacity },
             },
             axisLabel: {
                 show: !isMainCollapsed,
@@ -390,7 +431,7 @@ export class LayoutManager {
                 gridIndex: i + 1, // 0 is main
                 data: [], // Shared data
                 axisLabel: { show: false }, // Hide labels on indicator panes
-                axisLine: { show: !pane.isCollapsed, lineStyle: { color: '#334155' } },
+                axisLine: { show: !pane.isCollapsed && gridBorderShow, lineStyle: { color: gridBorderColor } },
                 axisTick: { show: false },
                 splitLine: { show: false },
                 axisPointer: {
@@ -430,10 +471,10 @@ export class LayoutManager {
             max: mainYAxisMax,
             gridIndex: 0,
             splitLine: {
-                show: !isMainCollapsed,
-                lineStyle: { color: '#334155', opacity: 0.5 },
+                show: !isMainCollapsed && gridShow,
+                lineStyle: { color: gridLineColor, opacity: gridLineOpacity },
             },
-            axisLine: { show: !isMainCollapsed, lineStyle: { color: '#334155' } },
+            axisLine: { show: !isMainCollapsed && gridBorderShow, lineStyle: { color: gridBorderColor } },
             axisLabel: {
                 show: !isMainCollapsed,
                 color: '#94a3b8',
@@ -583,8 +624,8 @@ export class LayoutManager {
                 max: AxisUtils.createMaxFunction(yAxisPaddingPercent),
                 gridIndex: i + 1,
                 splitLine: {
-                    show: !pane.isCollapsed,
-                    lineStyle: { color: '#334155', opacity: 0.3 },
+                    show: !pane.isCollapsed && gridShow,
+                    lineStyle: { color: gridLineColor, opacity: gridLineOpacity * 0.6 },
                 },
                 axisLabel: {
                     show: !pane.isCollapsed,
@@ -601,7 +642,7 @@ export class LayoutManager {
                         return AxisUtils.formatValue(value, decimals);
                     },
                 },
-                axisLine: { show: !pane.isCollapsed, lineStyle: { color: '#334155' } },
+                axisLine: { show: !pane.isCollapsed && gridBorderShow, lineStyle: { color: gridBorderColor } },
             });
         });
 
@@ -658,6 +699,7 @@ export class LayoutManager {
             mainPaneHeight: mainHeightVal,
             mainPaneTop,
             pixelToPercent,
+            paneBoundaries,
             overlayYAxisMap,
             separatePaneYAxisOffset,
         };
@@ -677,6 +719,7 @@ export class LayoutManager {
             mainPaneHeight: 0,
             mainPaneTop: 0,
             pixelToPercent: 0,
+            paneBoundaries: [],
         } as any;
     }
 }

package/src/components/SeriesBuilder.ts

@@ -2,6 +2,8 @@ import { OHLCV, Indicator as IndicatorType, QFChartOptions, IndicatorPlot, Indic
 import { PaneConfiguration } from './LayoutManager';
 import { SeriesRendererFactory } from './SeriesRendererFactory';
 import { AxisUtils } from '../utils/AxisUtils';
+import { FillRenderer, BatchedFillEntry } from './renderers/FillRenderer';
+import { ColorUtils } from '../utils/ColorUtils';
 
 export class SeriesBuilder {
     private static readonly DEFAULT_COLOR = '#2962ff';
@@ -121,8 +123,17 @@ export class SeriesBuilder {
                 return 0;
             });
 
+            // Collect non-gradient fill plots for batching (performance: N series → 1 series)
+            // Keyed by "xAxisIndex:yAxisIndex" to batch fills on the same axis pair
+            const pendingFills = new Map<string, { entries: BatchedFillEntry[]; xAxisIndex: number; yAxisIndex: number }>();
+
             sortedPlots.forEach((plotName) => {
                 const plot = indicator.plots[plotName];
+
+                // display.none: don't render visually, but still populate data arrays
+                // so that fill() plots referencing this plot can find the data.
+                const isDisplayNone = plot.options.display === 'none';
+
                 const seriesName = `${id}::${plotName}`;
 
                 // Find axis index for THIS SPECIFIC PLOT
@@ -133,7 +144,24 @@ export class SeriesBuilder {
                 // IMPORTANT: If indicator is overlay (paneIndex === 0), treat all plots as overlays
                 // This allows visual-only plots (background, barcolor) to have separate Y-axes while
                 // still being on the main chart pane
-                const plotOverlay = plot.options.overlay;
+                let plotOverlay = plot.options.overlay;
+
+                // Fill plots inherit overlay from their referenced plots.
+                // If both referenced plots are overlay, the fill should render on the
+                // overlay pane too — otherwise its price-scale data stretches the
+                // indicator sub-pane's y-axis to extreme ranges.
+                if (plot.options.style === 'fill' && plotOverlay === undefined) {
+                    const p1Name = plot.options.plot1;
+                    const p2Name = plot.options.plot2;
+                    if (p1Name && p2Name) {
+                        const p1 = indicator.plots[p1Name];
+                        const p2 = indicator.plots[p2Name];
+                        if (p1?.options?.overlay === true && p2?.options?.overlay === true) {
+                            plotOverlay = true;
+                        }
+                    }
+                }
+
                 const isPlotOverlay = indicator.paneIndex === 0 || plotOverlay === true;
 
                 if (isPlotOverlay) {
@@ -202,6 +230,9 @@ export class SeriesBuilder {
                 // Fill plots need the actual numeric values even when the referenced plot is invisible (color=na)
                 plotDataArrays.set(`${id}::${plotName}`, rawDataArray);
 
+                // display.none plots: data is now stored for fill references, skip rendering
+                if (isDisplayNone) return;
+
                 if (plot.options?.style?.startsWith('style_')) {
                     plot.options.style = plot.options.style.replace('style_', '') as IndicatorStyle;
                 }
@@ -237,6 +268,64 @@ export class SeriesBuilder {
                     return;
                 }
 
+                // Batch non-gradient fill plots for performance
+                // Instead of creating N separate ECharts custom series (one per fill),
+                // collect them and render as a single batched series per axis pair.
+                if (plot.options.style === 'fill' && plot.options.gradient !== true) {
+                    const plot1Key = plot.options.plot1 ? `${id}::${plot.options.plot1}` : null;
+                    const plot2Key = plot.options.plot2 ? `${id}::${plot.options.plot2}` : null;
+
+                    if (plot1Key && plot2Key) {
+                        const plot1Data = plotDataArrays.get(plot1Key);
+                        const plot2Data = plotDataArrays.get(plot2Key);
+
+                        if (plot1Data && plot2Data) {
+                            // Parse per-bar colors
+                            const { color: defaultColor, opacity: defaultOpacity } =
+                                ColorUtils.parseColor(plot.options.color || 'rgba(128, 128, 128, 0.2)');
+                            const hasPerBarColor = optionsArray.some((o: any) => o && o.color !== undefined);
+
+                            const fillBarColors: { color: string; opacity: number }[] = [];
+                            for (let i = 0; i < totalDataLength; i++) {
+                                const opts = optionsArray[i];
+                                if (hasPerBarColor && opts && opts.color !== undefined) {
+                                    fillBarColors[i] = ColorUtils.parseColor(opts.color);
+                                } else {
+                                    fillBarColors[i] = { color: defaultColor, opacity: defaultOpacity };
+                                }
+                            }
+
+                            const axisKey = `${xAxisIndex}:${yAxisIndex}`;
+                            if (!pendingFills.has(axisKey)) {
+                                pendingFills.set(axisKey, { entries: [], xAxisIndex, yAxisIndex });
+                            }
+                            pendingFills.get(axisKey)!.entries.push({
+                                plot1Data,
+                                plot2Data,
+                                barColors: fillBarColors,
+                            });
+                            return; // Defer series creation to batch step below
+                        }
+                    }
+                }
+
+                // Skip fully transparent plots — they exist only as data sources for fills.
+                // Their data is already stored in plotDataArrays for fill references.
+                if (plot.options.color && typeof plot.options.color === 'string') {
+                    const parsed = ColorUtils.parseColor(plot.options.color);
+                    if (parsed.opacity < 0.01) {
+                        // Check that ALL per-bar colors are also transparent (or absent)
+                        const hasVisibleBarColor = colorArray.some((c: any) => {
+                            if (c == null) return false;
+                            const pc = ColorUtils.parseColor(c);
+                            return pc.opacity >= 0.01;
+                        });
+                        if (!hasVisibleBarColor) {
+                            return; // Skip rendering — data already in plotDataArrays for fills
+                        }
+                    }
+                }
+
                 // Use Factory to get appropriate renderer
                 const renderer = SeriesRendererFactory.get(plot.options.style);
                 const seriesConfig = renderer.render({
@@ -258,6 +347,38 @@ export class SeriesBuilder {
                     series.push(seriesConfig);
                 }
             });
+
+            // Batch pending fills: merge multiple fill series into single batched series per axis pair
+            if (pendingFills.size > 0) {
+                const fillRenderer = new FillRenderer();
+                pendingFills.forEach(({ entries, xAxisIndex, yAxisIndex }, axisKey) => {
+                    if (entries.length >= 2) {
+                        // Batch multiple fills into a single ECharts custom series
+                        const batchedConfig = fillRenderer.renderBatched(
+                            `${id}::fills_batch_${axisKey}`,
+                            xAxisIndex,
+                            yAxisIndex,
+                            totalDataLength,
+                            entries
+                        );
+                        if (batchedConfig) {
+                            series.push(batchedConfig);
+                        }
+                    } else if (entries.length === 1) {
+                        // Single fill — still use batched renderer for consistency (clip + encode)
+                        const batchedConfig = fillRenderer.renderBatched(
+                            `${id}::fills_batch_${axisKey}`,
+                            xAxisIndex,
+                            yAxisIndex,
+                            totalDataLength,
+                            entries
+                        );
+                        if (batchedConfig) {
+                            series.push(batchedConfig);
+                        }
+                    }
+                });
+            }
         });
 
         return { series, barColors };