@qfo/qfchart 0.7.3 → 0.8.1

package/src/components/LayoutManager.ts

@@ -15,9 +15,9 @@ 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
+    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 {
@@ -40,7 +40,7 @@ export class LayoutManager {
         isMainCollapsed: boolean = false,
         maximizedPaneId: string | null = null,
         marketData?: import('../types').OHLCV[],
-        mainHeightOverride?: number
+        mainHeightOverride?: number,
     ): LayoutResult & { overlayYAxisMap: Map<string, number>; separatePaneYAxisOffset: number } {
         // Calculate pixelToPercent early for maximized logic
         let pixelToPercent = 0;
@@ -51,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)
@@ -122,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,
@@ -141,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 },
                     },
                 });
 
@@ -184,15 +195,16 @@ export class LayoutManager {
                             if (options.yAxisLabelFormatter) {
                                 return options.yAxisLabelFormatter(value);
                             }
-                            const decimals = options.yAxisDecimalPlaces !== undefined
-                                ? options.yAxisDecimalPlaces
-                                : AxisUtils.autoDetectDecimals(marketData as OHLCV[]);
+                            const decimals =
+                                options.yAxisDecimalPlaces !== undefined
+                                    ? options.yAxisDecimalPlaces
+                                    : AxisUtils.autoDetectDecimals(marketData as OHLCV[]);
                             return AxisUtils.formatValue(value, decimals);
                         },
                     },
                     splitLine: {
-                        show: isTarget,
-                        lineStyle: { color: '#334155', opacity: 0.5 },
+                        show: isTarget && gridShow,
+                        lineStyle: { color: gridLineColor, opacity: gridLineOpacity },
                     },
                 });
 
@@ -349,8 +361,8 @@ export class LayoutManager {
         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
@@ -359,8 +371,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,
@@ -381,12 +393,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,
@@ -396,9 +408,8 @@ export class LayoutManager {
                     if (options.yAxisLabelFormatter) {
                         return options.yAxisLabelFormatter(value);
                     }
-                    const decimals = options.yAxisDecimalPlaces !== undefined
-                        ? options.yAxisDecimalPlaces
-                        : AxisUtils.autoDetectDecimals(marketData as OHLCV[]);
+                    const decimals =
+                        options.yAxisDecimalPlaces !== undefined ? options.yAxisDecimalPlaces : AxisUtils.autoDetectDecimals(marketData as OHLCV[]);
                     return AxisUtils.formatValue(value, decimals);
                 },
             },
@@ -420,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: {
@@ -460,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',
@@ -472,9 +483,8 @@ export class LayoutManager {
                     if (options.yAxisLabelFormatter) {
                         return options.yAxisLabelFormatter(value);
                     }
-                    const decimals = options.yAxisDecimalPlaces !== undefined
-                        ? options.yAxisDecimalPlaces
-                        : AxisUtils.autoDetectDecimals(marketData as OHLCV[]);
+                    const decimals =
+                        options.yAxisDecimalPlaces !== undefined ? options.yAxisDecimalPlaces : AxisUtils.autoDetectDecimals(marketData as OHLCV[]);
                     return AxisUtils.formatValue(value, decimals);
                 },
             },
@@ -510,7 +520,11 @@ export class LayoutManager {
 
                         // Check if this is a shape with price-relative positioning
                         const isShapeWithPriceLocation =
-                            plot.options.style === 'shape' && (plot.options.location === 'abovebar' || plot.options.location === 'AboveBar' || plot.options.location === 'belowbar' || plot.options.location === 'BelowBar');
+                            plot.options.style === 'shape' &&
+                            (plot.options.location === 'abovebar' ||
+                                plot.options.location === 'AboveBar' ||
+                                plot.options.location === 'belowbar' ||
+                                plot.options.location === 'BelowBar');
 
                         if (visualOnlyStyles.includes(plot.options.style)) {
                             // Assign these to a separate Y-axis so they don't affect price scale
@@ -571,7 +585,7 @@ export class LayoutManager {
         // Create Y-axes for incompatible plots
         // nextYAxisIndex already incremented in the loop above, so we know how many axes we need
         const numOverlayAxes = overlayYAxisMap.size > 0 ? nextYAxisIndex - 1 : 0;
-        
+
         // Track which overlay axes are for visual-only plots (background, barcolor, etc.)
         const visualOnlyAxes = new Set<number>();
         overlayYAxisMap.forEach((yAxisIdx, plotKey) => {
@@ -585,11 +599,11 @@ export class LayoutManager {
                 });
             });
         });
-        
+
         for (let i = 0; i < numOverlayAxes; i++) {
             const yAxisIndex = i + 1; // Y-axis indices start at 1 for overlays
             const isVisualOnly = visualOnlyAxes.has(yAxisIndex);
-            
+
             yAxis.push({
                 position: 'left',
                 scale: !isVisualOnly, // Disable scaling for visual-only plots
@@ -613,8 +627,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,
@@ -625,31 +639,34 @@ export class LayoutManager {
                         if (options.yAxisLabelFormatter) {
                             return options.yAxisLabelFormatter(value);
                         }
-                        const decimals = options.yAxisDecimalPlaces !== undefined
-                            ? options.yAxisDecimalPlaces
-                            : AxisUtils.autoDetectDecimals(marketData as OHLCV[]);
+                        const decimals =
+                            options.yAxisDecimalPlaces !== undefined
+                                ? options.yAxisDecimalPlaces
+                                : AxisUtils.autoDetectDecimals(marketData as OHLCV[]);
                         return AxisUtils.formatValue(value, decimals);
                     },
                 },
-                axisLine: { show: !pane.isCollapsed, lineStyle: { color: '#334155' } },
+                axisLine: { show: !pane.isCollapsed && gridBorderShow, lineStyle: { color: gridBorderColor } },
             });
         });
 
         // --- Generate DataZoom ---
         const dataZoom: any[] = [];
-        if (dzVisible) {
-            // Add 'inside' zoom (pan/drag) only if zoomOnTouch is enabled (default true)
-            const zoomOnTouch = options.dataZoom?.zoomOnTouch ?? true;
-            if (zoomOnTouch) {
-                dataZoom.push({
-                    type: 'inside',
-                    xAxisIndex: allXAxisIndices,
-                    start: dzStart,
-                    end: dzEnd,
-                    filterMode: 'weakFilter',
-                });
-            }
+        const zoomOnTouch = options.dataZoom?.zoomOnTouch ?? true;
+        const pannable = options.dataZoom?.pannable ?? true;
+
+        // 'inside' zoom provides pan/drag — enabled independently of slider visibility
+        if (zoomOnTouch && pannable) {
+            dataZoom.push({
+                type: 'inside',
+                xAxisIndex: allXAxisIndices,
+                start: dzStart,
+                end: dzEnd,
+                filterMode: 'weakFilter',
+            });
+        }
 
+        if (dzVisible) {
             if (dzPosition === 'top') {
                 dataZoom.push({
                     type: 'slider',
@@ -697,7 +714,7 @@ export class LayoutManager {
     private static calculateMaximized(
         containerHeight: number,
         options: QFChartOptions,
-        targetPaneIndex: number // 0 for main, 1+ for indicators
+        targetPaneIndex: number, // 0 for main, 1+ for indicators
     ): LayoutResult {
         return {
             grid: [],

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';
@@ -33,9 +35,7 @@ export class SeriesBuilder {
             if (lineStyleType.startsWith('linestyle_')) {
                 lineStyleType = lineStyleType.replace('linestyle_', '') as any;
             }
-            const decimals = options.yAxisDecimalPlaces !== undefined
-                ? options.yAxisDecimalPlaces
-                : AxisUtils.autoDetectDecimals(marketData);
+            const decimals = options.yAxisDecimalPlaces !== undefined ? options.yAxisDecimalPlaces : AxisUtils.autoDetectDecimals(marketData);
 
             markLine = {
                 symbol: ['none', 'none'],
@@ -75,7 +75,8 @@ export class SeriesBuilder {
 
         return {
             type: 'candlestick',
-            name: options.title || 'Market',
+            id: '__candlestick__',
+            name: options.title,
             data: data,
             itemStyle: {
                 color: upColor,
@@ -98,7 +99,7 @@ export class SeriesBuilder {
         dataIndexOffset: number = 0,
         candlestickData?: OHLCV[], // Add candlestick data to access High/Low for positioning
         overlayYAxisMap?: Map<string, number>, // Map of overlay indicator IDs to their Y-axis indices
-        separatePaneYAxisOffset: number = 1 // Offset for separate pane Y-axes (accounts for overlay axes)
+        separatePaneYAxisOffset: number = 1, // Offset for separate pane Y-axes (accounts for overlay axes)
     ): { series: any[]; barColors: (string | null)[] } {
         const series: any[] = [];
         const barColors: (string | null)[] = new Array(totalDataLength).fill(null);
@@ -121,8 +122,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
@@ -209,7 +219,7 @@ export class SeriesBuilder {
                             }
 
                             dataArray[offsetIndex] = value;
-                            colorArray[offsetIndex] = isNaColor ? null : (pointColor || plot.options.color || SeriesBuilder.DEFAULT_COLOR);
+                            colorArray[offsetIndex] = isNaColor ? null : pointColor || plot.options.color || SeriesBuilder.DEFAULT_COLOR;
                             optionsArray[offsetIndex] = point.options || {};
                         }
                     }
@@ -219,6 +229,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;
                 }
@@ -254,6 +267,65 @@ 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({
@@ -275,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 };