@qfo/qfchart 0.8.4 → 0.8.6

package/src/components/renderers/FillRenderer.ts

@@ -105,6 +105,33 @@ export class FillRenderer implements SeriesRenderer {
                 const fillOpacity = fc ? fc.opacity : defaultFillOpacity;
                 if (fillOpacity < 0.01) return null;
 
+                const fillColor = fc ? fc.color : defaultFillColor;
+
+                // Check if plots cross between bars
+                const diff1Prev = prevY1 - prevY2;
+                const diff1Curr = y1 - y2;
+                const plotsCross = (diff1Prev > 0 && diff1Curr < 0) || (diff1Prev < 0 && diff1Curr > 0);
+
+                if (plotsCross) {
+                    const t = diff1Prev / (diff1Prev - diff1Curr);
+                    const crossX = index - 1 + t;
+                    const crossY = prevY1 + t * (y1 - prevY1);
+                    const pCross = api.coord([crossX, crossY]);
+                    const p1Prev = api.coord([index - 1, prevY1]);
+                    const p1Curr = api.coord([index, y1]);
+                    const p2Curr = api.coord([index, y2]);
+                    const p2Prev = api.coord([index - 1, prevY2]);
+
+                    return {
+                        type: 'group',
+                        children: [
+                            { type: 'polygon', shape: { points: [p1Prev, pCross, p2Prev] }, style: { fill: fillColor, opacity: fillOpacity }, silent: true },
+                            { type: 'polygon', shape: { points: [pCross, p1Curr, p2Curr] }, style: { fill: fillColor, opacity: fillOpacity }, silent: true },
+                        ],
+                        silent: true,
+                    };
+                }
+
                 const p1Prev = api.coord([index - 1, prevY1]);
                 const p1Curr = api.coord([index, y1]);
                 const p2Curr = api.coord([index, y2]);
@@ -116,7 +143,7 @@ export class FillRenderer implements SeriesRenderer {
                         points: [p1Prev, p1Curr, p2Curr, p2Prev],
                     },
                     style: {
-                        fill: fc ? fc.color : defaultFillColor,
+                        fill: fillColor,
                         opacity: fillOpacity,
                     },
                     silent: true,
@@ -179,17 +206,36 @@ export class FillRenderer implements SeriesRenderer {
                     const fc = fill.barColors[index];
                     if (!fc || fc.opacity < 0.01) continue;
 
-                    const p1Prev = api.coord([index - 1, prevY1]);
-                    const p1Curr = api.coord([index, y1]);
-                    const p2Curr = api.coord([index, y2]);
-                    const p2Prev = api.coord([index - 1, prevY2]);
-
-                    children.push({
-                        type: 'polygon',
-                        shape: { points: [p1Prev, p1Curr, p2Curr, p2Prev] },
-                        style: { fill: fc.color, opacity: fc.opacity },
-                        silent: true,
-                    });
+                    const fillStyle = { fill: fc.color, opacity: fc.opacity };
+
+                    // Check if plots cross between bars
+                    const dPrev = (prevY1 as number) - (prevY2 as number);
+                    const dCurr = (y1 as number) - (y2 as number);
+                    const crosses = (dPrev > 0 && dCurr < 0) || (dPrev < 0 && dCurr > 0);
+
+                    if (crosses) {
+                        const t = dPrev / (dPrev - dCurr);
+                        const crossX = index - 1 + t;
+                        const crossY = (prevY1 as number) + t * ((y1 as number) - (prevY1 as number));
+                        const pCross = api.coord([crossX, crossY]);
+                        const p1Prev = api.coord([index - 1, prevY1]);
+                        const p1Curr = api.coord([index, y1]);
+                        const p2Curr = api.coord([index, y2]);
+                        const p2Prev = api.coord([index - 1, prevY2]);
+                        children.push({ type: 'polygon', shape: { points: [p1Prev, pCross, p2Prev] }, style: fillStyle, silent: true });
+                        children.push({ type: 'polygon', shape: { points: [pCross, p1Curr, p2Curr] }, style: fillStyle, silent: true });
+                    } else {
+                        const p1Prev = api.coord([index - 1, prevY1]);
+                        const p1Curr = api.coord([index, y1]);
+                        const p2Curr = api.coord([index, y2]);
+                        const p2Prev = api.coord([index - 1, prevY2]);
+                        children.push({
+                            type: 'polygon',
+                            shape: { points: [p1Prev, p1Curr, p2Curr, p2Prev] },
+                            style: fillStyle,
+                            silent: true,
+                        });
+                    }
                 }
 
                 return children.length > 0 ? { type: 'group', children, silent: true } : null;
@@ -201,8 +247,15 @@ export class FillRenderer implements SeriesRenderer {
 
     /**
      * Render a gradient fill between two plots.
-     * Uses a vertical linear gradient from top_color (at the upper boundary)
-     * to bottom_color (at the lower boundary) for each polygon segment.
+     *
+     * TradingView gradient fill semantics:
+     * - The polygon is ALWAYS clipped to the area between plot1 and plot2
+     * - top_value / bottom_value define the COLOR GRADIENT RANGE, not the polygon bounds
+     * - top_color maps to top_value, bottom_color maps to bottom_value
+     * - When top_color or bottom_color is na, that bar is hidden
+     *
+     * So the polygon shape uses plot1/plot2 data, but the gradient color ramp
+     * is mapped based on where the plot values fall within [bottom_value, top_value].
      */
     private renderGradientFill(
         seriesName: string,
@@ -214,40 +267,72 @@ export class FillRenderer implements SeriesRenderer {
         optionsArray: any[],
         plotOptions: any
     ): any {
-        // Build per-bar gradient color arrays from optionsArray
-        // Each entry in optionsArray has: { top_value, bottom_value, top_color, bottom_color }
-        const gradientColors: { topColor: string; topOpacity: number; bottomColor: string; bottomOpacity: number }[] = [];
+        // Build per-bar gradient info
+        interface GradientBar {
+            topValue: number;       // Color gradient range top
+            bottomValue: number;    // Color gradient range bottom
+            topColor: string;
+            topOpacity: number;
+            bottomColor: string;
+            bottomOpacity: number;
+            topIsNa: boolean;
+            btmIsNa: boolean;
+        }
+        const gradientBars: (GradientBar | null)[] = [];
+
+        const isNaColor = (c: any): boolean => {
+            if (c === null || c === undefined) return true;
+            if (typeof c === 'number' && isNaN(c)) return true;
+            if (c === 'na' || c === 'NaN' || c === '') return true;
+            return false;
+        };
 
         for (let i = 0; i < totalDataLength; i++) {
             const opts = optionsArray?.[i];
-            if (opts && opts.top_color !== undefined) {
-                const top = ColorUtils.parseColor(opts.top_color);
-                const bottom = ColorUtils.parseColor(opts.bottom_color);
-                gradientColors[i] = {
-                    topColor: top.color,
-                    topOpacity: top.opacity,
-                    bottomColor: bottom.color,
-                    bottomOpacity: bottom.opacity,
+            if (opts && (opts.top_color !== undefined || opts.bottom_color !== undefined)) {
+                const topIsNa = isNaColor(opts.top_color);
+                const btmIsNa = isNaColor(opts.bottom_color);
+
+                if (topIsNa && btmIsNa) {
+                    gradientBars[i] = null;
+                    continue;
+                }
+
+                const topC = topIsNa ? { color: 'rgba(0,0,0,0)', opacity: 0 } : ColorUtils.parseColor(opts.top_color);
+                const btmC = btmIsNa ? { color: 'rgba(0,0,0,0)', opacity: 0 } : ColorUtils.parseColor(opts.bottom_color);
+
+                const tv = opts.top_value;
+                const bv = opts.bottom_value;
+                const topVal = (tv == null || (typeof tv === 'number' && isNaN(tv))) ? null : tv;
+                const btmVal = (bv == null || (typeof bv === 'number' && isNaN(bv))) ? null : bv;
+                if (topVal == null || btmVal == null) {
+                    gradientBars[i] = null;
+                    continue;
+                }
+
+                gradientBars[i] = {
+                    topValue: topVal,
+                    bottomValue: btmVal,
+                    topColor: topC.color,
+                    topOpacity: topC.opacity,
+                    bottomColor: btmC.color,
+                    bottomOpacity: btmC.opacity,
+                    topIsNa,
+                    btmIsNa,
                 };
             } else {
-                // Fallback: use a default semi-transparent fill
-                gradientColors[i] = {
-                    topColor: 'rgba(128,128,128,0.2)',
-                    topOpacity: 0.2,
-                    bottomColor: 'rgba(128,128,128,0.2)',
-                    bottomOpacity: 0.2,
-                };
+                gradientBars[i] = null;
             }
         }
 
-        // Create fill data with previous values
-        const fillDataWithPrev: any[] = [];
+        // Build fill data using PLOT values as polygon boundaries
+        const fillData: any[] = [];
         for (let i = 0; i < totalDataLength; i++) {
             const y1 = plot1Data[i];
             const y2 = plot2Data[i];
             const prevY1 = i > 0 ? plot1Data[i - 1] : null;
             const prevY2 = i > 0 ? plot2Data[i - 1] : null;
-            fillDataWithPrev.push([i, y1, y2, prevY1, prevY2]);
+            fillData.push([i, y1, y2, prevY1, prevY2]);
         }
 
         return {
@@ -269,51 +354,95 @@ export class FillRenderer implements SeriesRenderer {
                 const prevY2 = api.value(4);
 
                 if (
-                    y1 === null || y2 === null || prevY1 === null || prevY2 === null ||
+                    y1 == null || y2 == null || prevY1 == null || prevY2 == null ||
                     isNaN(y1) || isNaN(y2) || isNaN(prevY1) || isNaN(prevY2)
                 ) {
                     return null;
                 }
 
+                const gb = gradientBars[index];
+                if (!gb) return null;
+
+                const gradRange = gb.topValue - gb.bottomValue;
+                const hasNaSide = gb.topIsNa || gb.btmIsNa;
+
+                // Compute gradient color stops for the polygon's y-range
+                const colorAtY = (yVal: number): string => {
+                    let t: number;
+                    if (Math.abs(gradRange) < 1e-10) { t = 0.5; }
+                    else { t = 1 - (yVal - gb.bottomValue) / gradRange; }
+                    t = Math.max(0, Math.min(1, t));
+
+                    if (gb.topIsNa) {
+                        return ColorUtils.toRgba(gb.bottomColor, gb.bottomOpacity * t);
+                    }
+                    if (gb.btmIsNa) {
+                        return ColorUtils.toRgba(gb.topColor, gb.topOpacity * (1 - t));
+                    }
+                    return ColorUtils.interpolateColor(gb.topColor, gb.topOpacity, gb.bottomColor, gb.bottomOpacity, t);
+                };
+
+                // Build polygon between the two plot lines
                 const p1Prev = api.coord([index - 1, prevY1]);
                 const p1Curr = api.coord([index, y1]);
                 const p2Curr = api.coord([index, y2]);
                 const p2Prev = api.coord([index - 1, prevY2]);
 
-                // Get gradient colors for this bar
-                const gc = gradientColors[index] || gradientColors[index - 1];
-                if (!gc) return null;
-
-                // Skip fully transparent gradient fills
-                if (gc.topOpacity < 0.01 && gc.bottomOpacity < 0.01) return null;
-
-                // Convert colors to rgba strings with their opacities
-                const topRgba = ColorUtils.toRgba(gc.topColor, gc.topOpacity);
-                const bottomRgba = ColorUtils.toRgba(gc.bottomColor, gc.bottomOpacity);
-
-                // Determine if plot1 is above plot2 (in value space, higher value = higher on chart)
-                // We want top_color at the higher value, bottom_color at the lower value
-                const plot1IsAbove = y1 >= y2;
+                // Vertical gradient: top of polygon to bottom of polygon
+                const polyTop = Math.max(y1, y2, prevY1, prevY2);
+                const polyBot = Math.min(y1, y2, prevY1, prevY2);
 
-                return {
+                const polygon: any = {
                     type: 'polygon',
-                    shape: {
-                        points: [p1Prev, p1Curr, p2Curr, p2Prev],
-                    },
+                    shape: { points: [p1Prev, p1Curr, p2Curr, p2Prev] },
                     style: {
                         fill: {
                             type: 'linear',
-                            x: 0, y: 0, x2: 0, y2: 1, // vertical gradient
+                            x: 0, y: 0, x2: 0, y2: 1,
                             colorStops: [
-                                { offset: 0, color: plot1IsAbove ? topRgba : bottomRgba },
-                                { offset: 1, color: plot1IsAbove ? bottomRgba : topRgba },
+                                { offset: 0, color: colorAtY(polyTop) },
+                                { offset: 1, color: colorAtY(polyBot) },
                             ],
                         },
                     },
                     silent: true,
                 };
+
+                // When one color is na, clip the polygon to only the valid side of plot2.
+                if (hasNaSide) {
+                    const cs = params.coordSys;
+                    const zeroPixelPrev = api.coord([index - 1, prevY2])[1];
+                    const zeroPixelCurr = api.coord([index, y2])[1];
+                    // Use the average zero-line pixel position for this segment
+                    const zeroPixelY = (zeroPixelPrev + zeroPixelCurr) / 2;
+
+                    let clipY: number, clipH: number;
+                    if (gb.btmIsNa) {
+                        // Only draw above plot2
+                        clipY = cs.y;
+                        clipH = zeroPixelY - cs.y;
+                    } else {
+                        // Only draw below plot2
+                        clipY = zeroPixelY;
+                        clipH = cs.y + cs.height - zeroPixelY;
+                    }
+
+                    if (clipH <= 0) return null;
+
+                    return {
+                        type: 'group',
+                        children: [polygon],
+                        clipPath: {
+                            type: 'rect',
+                            shape: { x: cs.x, y: clipY, width: cs.width, height: clipH },
+                        },
+                        silent: true,
+                    };
+                }
+
+                return polygon;
             },
-            data: fillDataWithPrev,
+            data: fillData,
             silent: true,
         };
     }

package/src/components/renderers/LabelRenderer.ts

@@ -1,9 +1,9 @@
-import { SeriesRenderer, RenderContext } from './SeriesRenderer';
+import { SeriesRenderer, RenderContext, resolveXCoord } from './SeriesRenderer';
 import { ShapeUtils } from '../../utils/ShapeUtils';
 
 export class LabelRenderer implements SeriesRenderer {
     render(context: RenderContext): any {
-        const { seriesName, xAxisIndex, yAxisIndex, dataArray, candlestickData, dataIndexOffset } = context;
+        const { seriesName, xAxisIndex, yAxisIndex, dataArray, candlestickData, dataIndexOffset, timeToIndex, marketData } = context;
         const offset = dataIndexOffset || 0;
 
         // Collect all non-null, non-deleted label objects from the sparse dataArray.
@@ -42,7 +42,8 @@ export class LabelRenderer implements SeriesRenderer {
                 const shape = this.styleToShape(styleRaw);
 
                 // Determine X position using label's own x coordinate
-                const xPos = (lbl.xloc === 'bar_index' || lbl.xloc === 'bi') ? (lbl.x + offset) : lbl.x;
+                const xPos = resolveXCoord(lbl.x, lbl.xloc, offset, timeToIndex, marketData);
+                if (isNaN(xPos)) return null;
 
                 // Determine Y value based on yloc
                 let yValue = lbl.y;
@@ -126,6 +127,18 @@ export class LabelRenderer implements SeriesRenderer {
                             labelTextOffset = [0, totalHeight * pointerRatio * 0.5];
                         }
                     }
+                } else if (shape === 'labelcenter') {
+                    // label_center: no pointer, centered at exact coordinate.
+                    // Size the bubble body to fit text but apply NO offset.
+                    const lines = text.split('\n');
+                    const longestLine = lines.reduce((a: string, b: string) => a.length > b.length ? a : b, '');
+                    const textWidth = longestLine.length * fontSize * 0.65;
+                    const minWidth = fontSize * 2.5;
+                    const bubbleWidth = Math.max(minWidth, textWidth + fontSize * 1.6);
+                    const lineHeight = fontSize * 1.4;
+                    const bubbleHeight = Math.max(fontSize * 2.8, lines.length * lineHeight + fontSize * 1.2);
+                    finalSize = [bubbleWidth, bubbleHeight];
+                    // No symbolOffset — center exactly at the coordinate
                 } else if (shape === 'none') {
                     finalSize = 0;
                 } else {
@@ -228,7 +241,7 @@ export class LabelRenderer implements SeriesRenderer {
             case 'label_upper_right':
                 return 'labelup';
             case 'label_center':
-                return 'labeldown';
+                return 'labelcenter';
             case 'circle':
                 return 'circle';
             case 'square':
@@ -289,16 +302,16 @@ export class LabelRenderer implements SeriesRenderer {
             case 'tiny':
                 return 8;
             case 'small':
-                return 9;
+                return 11;
             case 'normal':
             case 'auto':
-                return 10;
+                return 14;
             case 'large':
-                return 12;
+                return 20;
             case 'huge':
-                return 14;
+                return 36;
             default:
-                return 10;
+                return 14;
         }
     }
 }

package/src/components/renderers/LineRenderer.ts

@@ -1,44 +1,44 @@
-import { SeriesRenderer, RenderContext } from './SeriesRenderer';
-
-export class LineRenderer implements SeriesRenderer {
-    render(context: RenderContext): any {
-        const { seriesName, xAxisIndex, yAxisIndex, dataArray, colorArray, plotOptions } = context;
-        const defaultColor = '#2962ff';
-
-        return {
-            name: seriesName,
-            type: 'custom',
-            xAxisIndex: xAxisIndex,
-            yAxisIndex: yAxisIndex,
-            renderItem: (params: any, api: any) => {
-                const index = params.dataIndex;
-                if (index === 0) return; // Need at least two points for a line segment
-
-                const y2 = api.value(1);
-                const y1 = api.value(2); // We'll store prevValue in the data
-
-                if (y2 === null || isNaN(y2) || y1 === null || isNaN(y1)) return;
-
-                const p1 = api.coord([index - 1, y1]);
-                const p2 = api.coord([index, y2]);
-
-                return {
-                    type: 'line',
-                    shape: {
-                        x1: p1[0],
-                        y1: p1[1],
-                        x2: p2[0],
-                        y2: p2[1],
-                    },
-                    style: {
-                        stroke: colorArray[index] || plotOptions.color || defaultColor,
-                        lineWidth: plotOptions.linewidth || 1,
-                    },
-                    silent: true,
-                };
-            },
-            // Data format: [index, value, prevValue]
-            data: dataArray.map((val, i) => [i, val, i > 0 ? dataArray[i - 1] : null]),
-        };
-    }
-}
+import { SeriesRenderer, RenderContext } from './SeriesRenderer';
+
+export class LineRenderer implements SeriesRenderer {
+    render(context: RenderContext): any {
+        const { seriesName, xAxisIndex, yAxisIndex, dataArray, colorArray, plotOptions } = context;
+        const defaultColor = '#2962ff';
+
+        return {
+            name: seriesName,
+            type: 'custom',
+            xAxisIndex: xAxisIndex,
+            yAxisIndex: yAxisIndex,
+            renderItem: (params: any, api: any) => {
+                const index = params.dataIndex;
+                if (index === 0) return; // Need at least two points for a line segment
+
+                const y2 = api.value(1);
+                const y1 = api.value(2); // We'll store prevValue in the data
+
+                if (y2 === null || isNaN(y2) || y1 === null || isNaN(y1)) return;
+
+                const p1 = api.coord([index - 1, y1]);
+                const p2 = api.coord([index, y2]);
+
+                return {
+                    type: 'line',
+                    shape: {
+                        x1: p1[0],
+                        y1: p1[1],
+                        x2: p2[0],
+                        y2: p2[1],
+                    },
+                    style: {
+                        stroke: colorArray[index] || plotOptions.color || defaultColor,
+                        lineWidth: plotOptions.linewidth || 1,
+                    },
+                    silent: true,
+                };
+            },
+            // Data format: [index, value, prevValue]
+            data: dataArray.map((val, i) => [i, val, i > 0 ? dataArray[i - 1] : null]),
+        };
+    }
+}

package/src/components/renderers/LinefillRenderer.ts

@@ -1,4 +1,4 @@
-import { SeriesRenderer, RenderContext } from './SeriesRenderer';
+import { SeriesRenderer, RenderContext, resolveXCoord } from './SeriesRenderer';
 import { ColorUtils } from '../../utils/ColorUtils';
 
 /**
@@ -9,7 +9,7 @@ import { ColorUtils } from '../../utils/ColorUtils';
  */
 export class LinefillRenderer implements SeriesRenderer {
     render(context: RenderContext): any {
-        const { seriesName, xAxisIndex, yAxisIndex, dataArray, dataIndexOffset } = context;
+        const { seriesName, xAxisIndex, yAxisIndex, dataArray, dataIndexOffset, timeToIndex, marketData } = context;
         const offset = dataIndexOffset || 0;
 
         // Collect all non-deleted linefill objects from the sparse dataArray.
@@ -60,13 +60,16 @@ export class LinefillRenderer implements SeriesRenderer {
                     const line2 = lf.line2;
                     if (!line1 || !line2 || line1._deleted || line2._deleted) continue;
 
-                    const xOff1 = (line1.xloc === 'bar_index' || line1.xloc === 'bi') ? offset : 0;
-                    const xOff2 = (line2.xloc === 'bar_index' || line2.xloc === 'bi') ? offset : 0;
+                    const l1x1 = resolveXCoord(line1.x1, line1.xloc, offset, timeToIndex, marketData);
+                    const l1x2 = resolveXCoord(line1.x2, line1.xloc, offset, timeToIndex, marketData);
+                    const l2x1 = resolveXCoord(line2.x1, line2.xloc, offset, timeToIndex, marketData);
+                    const l2x2 = resolveXCoord(line2.x2, line2.xloc, offset, timeToIndex, marketData);
+                    if (isNaN(l1x1) || isNaN(l1x2) || isNaN(l2x1) || isNaN(l2x2)) continue;
 
-                    let p1Start = api.coord([line1.x1 + xOff1, line1.y1]);
-                    let p1End = api.coord([line1.x2 + xOff1, line1.y2]);
-                    let p2Start = api.coord([line2.x1 + xOff2, line2.y1]);
-                    let p2End = api.coord([line2.x2 + xOff2, line2.y2]);
+                    let p1Start = api.coord([l1x1, line1.y1]);
+                    let p1End = api.coord([l1x2, line1.y2]);
+                    let p2Start = api.coord([l2x1, line2.y1]);
+                    let p2End = api.coord([l2x2, line2.y2]);
 
                     // Handle line extensions
                     const extend1 = line1.extend || 'none';

package/src/components/renderers/PolylineRenderer.ts

@@ -1,4 +1,4 @@
-import { SeriesRenderer, RenderContext } from './SeriesRenderer';
+import { SeriesRenderer, RenderContext, resolveXCoord } from './SeriesRenderer';
 import { ColorUtils } from '../../utils/ColorUtils';
 
 /**
@@ -10,7 +10,7 @@ import { ColorUtils } from '../../utils/ColorUtils';
  */
 export class PolylineRenderer implements SeriesRenderer {
     render(context: RenderContext): any {
-        const { seriesName, xAxisIndex, yAxisIndex, dataArray, dataIndexOffset } = context;
+        const { seriesName, xAxisIndex, yAxisIndex, dataArray, dataIndexOffset, timeToIndex, marketData } = context;
         const offset = dataIndexOffset || 0;
 
         // Collect all non-deleted polyline objects from the sparse dataArray.
@@ -57,15 +57,22 @@ export class PolylineRenderer implements SeriesRenderer {
                     if (!points || points.length < 2) continue;
 
                     const useBi = pl.xloc === 'bi' || pl.xloc === 'bar_index';
-                    const xOff = useBi ? offset : 0;
 
                     // Convert chart.point objects to pixel coordinates
                     const pixelPoints: number[][] = [];
+                    let skipPoly = false;
                     for (const pt of points) {
-                        const x = useBi ? (pt.index ?? 0) + xOff : (pt.time ?? 0);
+                        let x: number;
+                        if (useBi) {
+                            x = (pt.index ?? 0) + offset;
+                        } else {
+                            x = resolveXCoord(pt.time ?? 0, 'bt', offset, timeToIndex, marketData);
+                            if (isNaN(x)) { skipPoly = true; break; }
+                        }
                         const y = pt.price ?? 0;
                         pixelPoints.push(api.coord([x, y]));
                     }
+                    if (skipPoly) continue;
 
                     if (pixelPoints.length < 2) continue;
 

package/src/components/renderers/SeriesRenderer.ts

@@ -14,8 +14,86 @@ export interface RenderContext {
     plotName?: string;
     indicator?: any; // Reference to parent indicator object if needed
     dataIndexOffset?: number; // Padding offset for converting bar_index to ECharts index
+    timeToIndex?: Map<number, number>; // Map timestamp → real data index (for xloc.bar_time)
+    marketData?: OHLCV[]; // Raw market data (for interpolating future timestamps)
 }
 
 export interface SeriesRenderer {
     render(context: RenderContext): any;
 }
+
+/**
+ * Convert an x-coordinate from a drawing object to an ECharts padded bar index.
+ * Handles both xloc modes:
+ *   - 'bar_index' / 'bi': x is already a bar index, just add padding offset
+ *   - 'bar_time' / 'bt': x is a timestamp, look up in timeToIndex or interpolate
+ *
+ * For future timestamps (beyond the last candle), extrapolates position using
+ * the average bar duration from market data.
+ *
+ * Returns NaN if the coordinate cannot be resolved.
+ */
+export function resolveXCoord(
+    x: number,
+    xloc: string | undefined,
+    offset: number,
+    timeToIndex?: Map<number, number>,
+    marketData?: OHLCV[],
+): number {
+    if (!xloc || xloc === 'bar_index' || xloc === 'bi') {
+        return x + offset;
+    }
+
+    // xloc is 'bar_time' / 'bt' — x is a timestamp
+    if (timeToIndex) {
+        const idx = timeToIndex.get(x);
+        if (idx !== undefined) {
+            return idx + offset;
+        }
+    }
+
+    // Timestamp not in the map — interpolate (likely a future timestamp)
+    if (marketData && marketData.length >= 2) {
+        const lastTime = marketData[marketData.length - 1].time;
+        const lastIndex = marketData.length - 1;
+
+        if (x > lastTime) {
+            // Future timestamp: extrapolate using average bar duration
+            // Use the last bar's interval as representative
+            const prevTime = marketData[marketData.length - 2].time;
+            const barDuration = lastTime - prevTime;
+            if (barDuration > 0) {
+                const barsAhead = (x - lastTime) / barDuration;
+                return lastIndex + barsAhead + offset;
+            }
+        } else if (x < marketData[0].time) {
+            // Past timestamp before data start: extrapolate backwards
+            const firstTime = marketData[0].time;
+            const secondTime = marketData[1].time;
+            const barDuration = secondTime - firstTime;
+            if (barDuration > 0) {
+                const barsBehind = (firstTime - x) / barDuration;
+                return 0 - barsBehind + offset;
+            }
+        } else {
+            // Timestamp within data range but not an exact match — find nearest
+            // Binary search for the closest bar
+            let lo = 0, hi = marketData.length - 1;
+            while (lo < hi) {
+                const mid = (lo + hi) >> 1;
+                if (marketData[mid].time < x) lo = mid + 1;
+                else hi = mid;
+            }
+            // Interpolate between lo-1 and lo
+            if (lo > 0) {
+                const t0 = marketData[lo - 1].time;
+                const t1 = marketData[lo].time;
+                const frac = (x - t0) / (t1 - t0);
+                return (lo - 1) + frac + offset;
+            }
+            return lo + offset;
+        }
+    }
+
+    return NaN;
+}