@qfo/qfchart 0.6.5 → 0.6.7

package/src/components/LayoutManager.ts

@@ -1,4 +1,4 @@
-import { QFChartOptions, Indicator as IndicatorType } from '../types';
+import { QFChartOptions, Indicator as IndicatorType, OHLCV } from '../types';
 import { AxisUtils } from '../utils/AxisUtils';
 
 export interface PaneConfiguration {
@@ -176,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: {
@@ -367,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 },
@@ -444,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);
                 },
             },
         });
@@ -544,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: AxisUtils.createMinFunction(yAxisPaddingPercent),
-                max: AxisUtils.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 },
@@ -580,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' } },

package/src/components/SeriesBuilder.ts

@@ -1,6 +1,7 @@
 import { OHLCV, Indicator as IndicatorType, QFChartOptions, IndicatorPlot, IndicatorStyle } from '../types';
 import { PaneConfiguration } from './LayoutManager';
 import { SeriesRendererFactory } from './SeriesRendererFactory';
+import { AxisUtils } from '../utils/AxisUtils';
 
 export class SeriesBuilder {
     private static readonly DEFAULT_COLOR = '#2962ff';
@@ -32,8 +33,13 @@ export class SeriesBuilder {
             if (lineStyleType.startsWith('linestyle_')) {
                 lineStyleType = lineStyleType.replace('linestyle_', '') as any;
             }
+            const decimals = options.yAxisDecimalPlaces !== undefined
+                ? options.yAxisDecimalPlaces
+                : AxisUtils.autoDetectDecimals(marketData);
+
             markLine = {
                 symbol: ['none', 'none'],
+                precision: decimals, // Ensure line position is precise enough for small values
                 data: [
                     {
                         yAxis: lastClose,
@@ -45,8 +51,7 @@ export class SeriesBuilder {
                                 if (options.yAxisLabelFormatter) {
                                     return options.yAxisLabelFormatter(params.value);
                                 }
-                                const decimals = options.yAxisDecimalPlaces !== undefined ? options.yAxisDecimalPlaces : 2;
-                                return typeof params.value === 'number' ? params.value.toFixed(decimals) : params.value;
+                                return AxisUtils.formatValue(params.value, decimals);
                             },
                             color: '#fff',
                             backgroundColor: lineColor,
@@ -125,8 +130,11 @@ export class SeriesBuilder {
                 let yAxisIndex = 0;
 
                 // Check plot-level overlay setting (overrides indicator-level setting)
+                // 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;
-                const isPlotOverlay = plotOverlay !== undefined ? plotOverlay : indicator.paneIndex === 0;
+                const isPlotOverlay = indicator.paneIndex === 0 || plotOverlay === true;
 
                 if (isPlotOverlay) {
                     // Plot should be on main chart (overlay)

package/src/components/SeriesRendererFactory.ts

@@ -1,36 +1,38 @@
-import { SeriesRenderer } from './renderers/SeriesRenderer';
-import { LineRenderer } from './renderers/LineRenderer';
-import { StepRenderer } from './renderers/StepRenderer';
-import { HistogramRenderer } from './renderers/HistogramRenderer';
-import { ScatterRenderer } from './renderers/ScatterRenderer';
-import { OHLCBarRenderer } from './renderers/OHLCBarRenderer';
-import { ShapeRenderer } from './renderers/ShapeRenderer';
-import { BackgroundRenderer } from './renderers/BackgroundRenderer';
-import { FillRenderer } from './renderers/FillRenderer';
-
-export class SeriesRendererFactory {
-    private static renderers: Map<string, SeriesRenderer> = new Map();
-
-    static {
-        this.register('line', new LineRenderer());
-        this.register('step', new StepRenderer());
-        this.register('histogram', new HistogramRenderer());
-        this.register('columns', new HistogramRenderer());
-        this.register('circles', new ScatterRenderer());
-        this.register('cross', new ScatterRenderer());
-        this.register('char', new ScatterRenderer());
-        this.register('bar', new OHLCBarRenderer());
-        this.register('candle', new OHLCBarRenderer());
-        this.register('shape', new ShapeRenderer());
-        this.register('background', new BackgroundRenderer());
-        this.register('fill', new FillRenderer());
-    }
-
-    public static register(style: string, renderer: SeriesRenderer) {
-        this.renderers.set(style, renderer);
-    }
-
-    public static get(style: string): SeriesRenderer {
-        return this.renderers.get(style) || this.renderers.get('line')!; // Default to line
-    }
-}
+import { SeriesRenderer } from './renderers/SeriesRenderer';
+import { LineRenderer } from './renderers/LineRenderer';
+import { StepRenderer } from './renderers/StepRenderer';
+import { HistogramRenderer } from './renderers/HistogramRenderer';
+import { ScatterRenderer } from './renderers/ScatterRenderer';
+import { OHLCBarRenderer } from './renderers/OHLCBarRenderer';
+import { ShapeRenderer } from './renderers/ShapeRenderer';
+import { BackgroundRenderer } from './renderers/BackgroundRenderer';
+import { FillRenderer } from './renderers/FillRenderer';
+import { LabelRenderer } from './renderers/LabelRenderer';
+
+export class SeriesRendererFactory {
+    private static renderers: Map<string, SeriesRenderer> = new Map();
+
+    static {
+        this.register('line', new LineRenderer());
+        this.register('step', new StepRenderer());
+        this.register('histogram', new HistogramRenderer());
+        this.register('columns', new HistogramRenderer());
+        this.register('circles', new ScatterRenderer());
+        this.register('cross', new ScatterRenderer());
+        this.register('char', new ScatterRenderer());
+        this.register('bar', new OHLCBarRenderer());
+        this.register('candle', new OHLCBarRenderer());
+        this.register('shape', new ShapeRenderer());
+        this.register('background', new BackgroundRenderer());
+        this.register('fill', new FillRenderer());
+        this.register('label', new LabelRenderer());
+    }
+
+    public static register(style: string, renderer: SeriesRenderer) {
+        this.renderers.set(style, renderer);
+    }
+
+    public static get(style: string): SeriesRenderer {
+        return this.renderers.get(style) || this.renderers.get('line')!; // Default to line
+    }
+}

package/src/components/renderers/BackgroundRenderer.ts

@@ -14,7 +14,7 @@ export class BackgroundRenderer implements SeriesRenderer {
                 const xVal = api.value(0);
                 if (isNaN(xVal)) return;
 
-                const start = api.coord([xVal, 0]);
+                const start = api.coord([xVal, 0.5]); // Use 0.5 as a fixed Y-value within [0,1] range
                 const size = api.size([1, 0]);
                 const width = size[0];
                 const sys = params.coordSys;
@@ -39,7 +39,9 @@ export class BackgroundRenderer implements SeriesRenderer {
                     silent: true,
                 };
             },
-            data: dataArray.map((val, i) => [i, val]),
+            // Normalize data values to 0.5 (middle of [0,1] range) to prevent Y-axis scaling issues
+            // The actual value is only used to check if the background should render (non-null/non-NaN)
+            data: dataArray.map((val, i) => [i, val !== null && val !== undefined && !isNaN(val) ? 0.5 : null]),
         };
     }
 }

package/src/components/renderers/LabelRenderer.ts

@@ -0,0 +1,231 @@
+import { SeriesRenderer, RenderContext } from './SeriesRenderer';
+import { ShapeUtils } from '../../utils/ShapeUtils';
+
+export class LabelRenderer implements SeriesRenderer {
+    render(context: RenderContext): any {
+        const { seriesName, xAxisIndex, yAxisIndex, dataArray, candlestickData } = context;
+
+        const labelData = dataArray
+            .map((val, i) => {
+                if (val === null || val === undefined) return null;
+
+                // val is a label object: {id, x, y, text, xloc, yloc, color, style, textcolor, size, textalign, tooltip}
+                const lbl = typeof val === 'object' ? val : null;
+                if (!lbl) return null;
+
+                const text = lbl.text || '';
+                const color = lbl.color || '#2962ff';
+                const textcolor = lbl.textcolor || '#ffffff';
+                const yloc = lbl.yloc || 'price';
+                const styleRaw = lbl.style || 'style_label_down';
+                const size = lbl.size || 'normal';
+                const textalign = lbl.textalign || 'align_center';
+                const tooltip = lbl.tooltip || '';
+
+                // Map Pine style string to shape name for ShapeUtils
+                const shape = this.styleToShape(styleRaw);
+
+                // Determine Y value based on yloc
+                let yValue = lbl.y;
+                let symbolOffset: (string | number)[] = [0, 0];
+
+                if (yloc === 'abovebar') {
+                    if (candlestickData && candlestickData[i]) {
+                        yValue = candlestickData[i].high;
+                    }
+                    symbolOffset = [0, '-150%'];
+                } else if (yloc === 'belowbar') {
+                    if (candlestickData && candlestickData[i]) {
+                        yValue = candlestickData[i].low;
+                    }
+                    symbolOffset = [0, '150%'];
+                }
+
+                // Get symbol from ShapeUtils
+                const symbol = ShapeUtils.getShapeSymbol(shape);
+                const symbolSize = ShapeUtils.getShapeSize(size);
+
+                // Compute font size for this label
+                const fontSize = this.getSizePx(size);
+
+                // Dynamically size the bubble to fit text content
+                let finalSize: number | number[];
+                if (shape === 'labeldown' || shape === 'labelup') {
+                    // Approximate text width: chars * fontSize * avgCharWidthRatio (bold)
+                    const textWidth = text.length * fontSize * 0.65;
+                    const minWidth = fontSize * 2.5;
+                    const bubbleWidth = Math.max(minWidth, textWidth + fontSize * 1.6);
+                    const bubbleHeight = fontSize * 2.8;
+                    finalSize = [bubbleWidth, bubbleHeight];
+
+                    // Offset bubble so the pointer tip sits at the anchor price.
+                    // The SVG path pointer is ~20% of total height.
+                    if (shape === 'labeldown') {
+                        symbolOffset = [symbolOffset[0], typeof symbolOffset[1] === 'string'
+                            ? symbolOffset[1]
+                            : (symbolOffset[1] as number) - bubbleHeight * 0.35];
+                    } else {
+                        symbolOffset = [symbolOffset[0], typeof symbolOffset[1] === 'string'
+                            ? symbolOffset[1]
+                            : (symbolOffset[1] as number) + bubbleHeight * 0.35];
+                    }
+                } else if (shape === 'none') {
+                    finalSize = 0;
+                } else {
+                    if (Array.isArray(symbolSize)) {
+                        finalSize = [symbolSize[0] * 1.5, symbolSize[1] * 1.5];
+                    } else {
+                        finalSize = symbolSize * 1.5;
+                    }
+                }
+
+                // Determine label position based on style direction
+                const labelPosition = this.getLabelPosition(styleRaw, yloc);
+                const isInsideLabel = labelPosition === 'inside' ||
+                    labelPosition.startsWith('inside');
+
+                const item: any = {
+                    value: [i, yValue],
+                    symbol: symbol,
+                    symbolSize: finalSize,
+                    symbolOffset: symbolOffset,
+                    itemStyle: {
+                        color: color,
+                    },
+                    label: {
+                        show: !!text,
+                        position: labelPosition,
+                        distance: isInsideLabel ? 0 : 5,
+                        formatter: text,
+                        color: textcolor,
+                        fontSize: fontSize,
+                        fontWeight: 'bold',
+                        align: isInsideLabel ? 'center'
+                            : textalign === 'align_left' ? 'left'
+                            : textalign === 'align_right' ? 'right'
+                            : 'center',
+                        verticalAlign: 'middle',
+                        padding: [2, 6],
+                    },
+                };
+
+                if (tooltip) {
+                    item.tooltip = { formatter: tooltip };
+                }
+
+                return item;
+            })
+            .filter((item) => item !== null);
+
+        return {
+            name: seriesName,
+            type: 'scatter',
+            xAxisIndex: xAxisIndex,
+            yAxisIndex: yAxisIndex,
+            data: labelData,
+            z: 20,
+        };
+    }
+
+    private styleToShape(style: string): string {
+        // Strip 'style_' prefix
+        const s = style.startsWith('style_') ? style.substring(6) : style;
+
+        switch (s) {
+            case 'label_down':
+                return 'labeldown';
+            case 'label_up':
+                return 'labelup';
+            case 'label_left':
+                return 'labeldown'; // Use labeldown shape, position text left
+            case 'label_right':
+                return 'labeldown'; // Use labeldown shape, position text right
+            case 'label_lower_left':
+                return 'labeldown';
+            case 'label_lower_right':
+                return 'labeldown';
+            case 'label_upper_left':
+                return 'labelup';
+            case 'label_upper_right':
+                return 'labelup';
+            case 'label_center':
+                return 'labeldown';
+            case 'circle':
+                return 'circle';
+            case 'square':
+                return 'square';
+            case 'diamond':
+                return 'diamond';
+            case 'flag':
+                return 'flag';
+            case 'arrowup':
+                return 'arrowup';
+            case 'arrowdown':
+                return 'arrowdown';
+            case 'cross':
+                return 'cross';
+            case 'xcross':
+                return 'xcross';
+            case 'triangleup':
+                return 'triangleup';
+            case 'triangledown':
+                return 'triangledown';
+            case 'text_outline':
+                return 'none';
+            case 'none':
+                return 'none';
+            default:
+                return 'labeldown';
+        }
+    }
+
+    private getLabelPosition(style: string, yloc: string): string {
+        const s = style.startsWith('style_') ? style.substring(6) : style;
+
+        switch (s) {
+            case 'label_down':
+                return 'inside';
+            case 'label_up':
+                return 'inside';
+            case 'label_left':
+                return 'left';
+            case 'label_right':
+                return 'right';
+            case 'label_lower_left':
+                return 'insideBottomLeft';
+            case 'label_lower_right':
+                return 'insideBottomRight';
+            case 'label_upper_left':
+                return 'insideTopLeft';
+            case 'label_upper_right':
+                return 'insideTopRight';
+            case 'label_center':
+                return 'inside';
+            case 'text_outline':
+            case 'none':
+                // Text only, positioned based on yloc
+                return yloc === 'abovebar' ? 'top' : yloc === 'belowbar' ? 'bottom' : 'top';
+            default:
+                // For simple shapes (circle, diamond, etc.), text goes outside
+                return yloc === 'belowbar' ? 'bottom' : 'top';
+        }
+    }
+
+    private getSizePx(size: string): number {
+        switch (size) {
+            case 'tiny':
+                return 8;
+            case 'small':
+                return 9;
+            case 'normal':
+            case 'auto':
+                return 10;
+            case 'large':
+                return 12;
+            case 'huge':
+                return 14;
+            default:
+                return 10;
+        }
+    }
+}