@qfo/qfchart 0.6.4 → 0.6.6

package/src/components/LayoutManager.ts

@@ -1,4 +1,5 @@
-import { QFChartOptions, Indicator as IndicatorType } from '../types';
+import { QFChartOptions, Indicator as IndicatorType, OHLCV } from '../types';
+import { AxisUtils } from '../utils/AxisUtils';
 
 export interface PaneConfiguration {
     index: number;
@@ -42,23 +43,6 @@ export class LayoutManager {
         // Get Y-axis padding percentage (default 5%)
         const yAxisPaddingPercent = options.yAxisPadding !== undefined ? options.yAxisPadding : 5;
 
-        // Create min/max functions that apply padding
-        const createMinFunction = (paddingPercent: number) => {
-            return (value: any) => {
-                const range = value.max - value.min;
-                const padding = range * (paddingPercent / 100);
-                return value.min - padding;
-            };
-        };
-
-        const createMaxFunction = (paddingPercent: number) => {
-            return (value: any) => {
-                const range = value.max - value.min;
-                const padding = range * (paddingPercent / 100);
-                return value.max + padding;
-            };
-        };
-
         // Identify unique separate panes (indices > 0) and sort them
         const separatePaneIndices = Array.from(indicators.values())
             .map((ind) => ind.paneIndex)
@@ -163,12 +147,18 @@ export class LayoutManager {
 
                 if (i === 0 && maximizeTargetIndex === 0) {
                     // Main pane is maximized, use custom values if provided
-                    yMin = options.yAxisMin !== undefined && options.yAxisMin !== 'auto' ? options.yAxisMin : createMinFunction(yAxisPaddingPercent);
-                    yMax = options.yAxisMax !== undefined && options.yAxisMax !== 'auto' ? options.yAxisMax : createMaxFunction(yAxisPaddingPercent);
+                    yMin =
+                        options.yAxisMin !== undefined && options.yAxisMin !== 'auto'
+                            ? options.yAxisMin
+                            : AxisUtils.createMinFunction(yAxisPaddingPercent);
+                    yMax =
+                        options.yAxisMax !== undefined && options.yAxisMax !== 'auto'
+                            ? options.yAxisMax
+                            : AxisUtils.createMaxFunction(yAxisPaddingPercent);
                 } else {
                     // Separate panes always use dynamic scaling
-                    yMin = createMinFunction(yAxisPaddingPercent);
-                    yMax = createMaxFunction(yAxisPaddingPercent);
+                    yMin = AxisUtils.createMinFunction(yAxisPaddingPercent);
+                    yMax = AxisUtils.createMaxFunction(yAxisPaddingPercent);
                 }
 
                 yAxis.push({
@@ -186,11 +176,10 @@ export class LayoutManager {
                             if (options.yAxisLabelFormatter) {
                                 return options.yAxisLabelFormatter(value);
                             }
-                            const decimals = options.yAxisDecimalPlaces !== undefined ? options.yAxisDecimalPlaces : 2;
-                            if (typeof value === 'number') {
-                                return value.toFixed(decimals);
-                            }
-                            return String(value);
+                            const decimals = options.yAxisDecimalPlaces !== undefined
+                                ? options.yAxisDecimalPlaces
+                                : AxisUtils.autoDetectDecimals(marketData as OHLCV[]);
+                            return AxisUtils.formatValue(value, decimals);
                         },
                     },
                     splitLine: {
@@ -377,11 +366,10 @@ export class LayoutManager {
                     if (options.yAxisLabelFormatter) {
                         return options.yAxisLabelFormatter(value);
                     }
-                    const decimals = options.yAxisDecimalPlaces !== undefined ? options.yAxisDecimalPlaces : 2;
-                    if (typeof value === 'number') {
-                        return value.toFixed(decimals);
-                    }
-                    return String(value);
+                    const decimals = options.yAxisDecimalPlaces !== undefined
+                        ? options.yAxisDecimalPlaces
+                        : AxisUtils.autoDetectDecimals(marketData as OHLCV[]);
+                    return AxisUtils.formatValue(value, decimals);
                 },
             },
             axisTick: { show: !isMainCollapsed },
@@ -425,13 +413,13 @@ export class LayoutManager {
         if (options.yAxisMin !== undefined && options.yAxisMin !== 'auto') {
             mainYAxisMin = options.yAxisMin;
         } else {
-            mainYAxisMin = createMinFunction(yAxisPaddingPercent);
+            mainYAxisMin = AxisUtils.createMinFunction(yAxisPaddingPercent);
         }
 
         if (options.yAxisMax !== undefined && options.yAxisMax !== 'auto') {
             mainYAxisMax = options.yAxisMax;
         } else {
-            mainYAxisMax = createMaxFunction(yAxisPaddingPercent);
+            mainYAxisMax = AxisUtils.createMaxFunction(yAxisPaddingPercent);
         }
 
         // Main Y-Axis (for candlesticks)
@@ -454,11 +442,10 @@ export class LayoutManager {
                     if (options.yAxisLabelFormatter) {
                         return options.yAxisLabelFormatter(value);
                     }
-                    const decimals = options.yAxisDecimalPlaces !== undefined ? options.yAxisDecimalPlaces : 2;
-                    if (typeof value === 'number') {
-                        return value.toFixed(decimals);
-                    }
-                    return String(value);
+                    const decimals = options.yAxisDecimalPlaces !== undefined
+                        ? options.yAxisDecimalPlaces
+                        : AxisUtils.autoDetectDecimals(marketData as OHLCV[]);
+                    return AxisUtils.formatValue(value, decimals);
                 },
             },
         });
@@ -554,12 +541,30 @@ 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) => {
+            // Check if this plot is visual-only by looking at the original indicator
+            indicators.forEach((indicator) => {
+                Object.entries(indicator.plots).forEach(([plotName, plot]) => {
+                    const key = `${indicator.id}::${plotName}`;
+                    if (key === plotKey && ['background', 'barcolor', 'char'].includes(plot.options.style)) {
+                        visualOnlyAxes.add(yAxisIdx);
+                    }
+                });
+            });
+        });
+        
         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: true,
-                min: createMinFunction(yAxisPaddingPercent),
-                max: createMaxFunction(yAxisPaddingPercent),
+                scale: !isVisualOnly, // Disable scaling for visual-only plots
+                min: isVisualOnly ? 0 : AxisUtils.createMinFunction(yAxisPaddingPercent), // Fixed range for visual plots
+                max: isVisualOnly ? 1 : AxisUtils.createMaxFunction(yAxisPaddingPercent), // Fixed range for visual plots
                 gridIndex: 0,
                 show: false, // Hide the axis visual elements
                 splitLine: { show: false },
@@ -574,8 +579,8 @@ export class LayoutManager {
             yAxis.push({
                 position: 'right',
                 scale: true,
-                min: createMinFunction(yAxisPaddingPercent),
-                max: createMaxFunction(yAxisPaddingPercent),
+                min: AxisUtils.createMinFunction(yAxisPaddingPercent),
+                max: AxisUtils.createMaxFunction(yAxisPaddingPercent),
                 gridIndex: i + 1,
                 splitLine: {
                     show: !pane.isCollapsed,
@@ -590,11 +595,10 @@ export class LayoutManager {
                         if (options.yAxisLabelFormatter) {
                             return options.yAxisLabelFormatter(value);
                         }
-                        const decimals = options.yAxisDecimalPlaces !== undefined ? options.yAxisDecimalPlaces : 2;
-                        if (typeof value === 'number') {
-                            return value.toFixed(decimals);
-                        }
-                        return String(value);
+                        const decimals = options.yAxisDecimalPlaces !== undefined
+                            ? options.yAxisDecimalPlaces
+                            : AxisUtils.autoDetectDecimals(marketData as OHLCV[]);
+                        return AxisUtils.formatValue(value, decimals);
                     },
                 },
                 axisLine: { show: !pane.isCollapsed, lineStyle: { color: '#334155' } },