@qfo/qfchart 0.8.4 → 0.8.5

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;
+}

package/src/components/renderers/StepRenderer.ts

@@ -1,39 +1,39 @@
-import { SeriesRenderer, RenderContext } from './SeriesRenderer';
-
-export class StepRenderer 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 x = api.value(0);
-                const y = api.value(1);
-                if (isNaN(y) || y === null) return;
-
-                const coords = api.coord([x, y]);
-                const width = api.size([1, 0])[0];
-
-                return {
-                    type: 'line',
-                    shape: {
-                        x1: coords[0] - width / 2,
-                        y1: coords[1],
-                        x2: coords[0] + width / 2,
-                        y2: coords[1],
-                    },
-                    style: {
-                        stroke: colorArray[params.dataIndex] || plotOptions.color || defaultColor,
-                        lineWidth: plotOptions.linewidth || 1,
-                    },
-                    silent: true,
-                };
-            },
-            data: dataArray.map((val, i) => [i, val]),
-        };
-    }
-}
+import { SeriesRenderer, RenderContext } from './SeriesRenderer';
+
+export class StepRenderer 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 x = api.value(0);
+                const y = api.value(1);
+                if (isNaN(y) || y === null) return;
+
+                const coords = api.coord([x, y]);
+                const width = api.size([1, 0])[0];
+
+                return {
+                    type: 'line',
+                    shape: {
+                        x1: coords[0] - width / 2,
+                        y1: coords[1],
+                        x2: coords[0] + width / 2,
+                        y2: coords[1],
+                    },
+                    style: {
+                        stroke: colorArray[params.dataIndex] || plotOptions.color || defaultColor,
+                        lineWidth: plotOptions.linewidth || 1,
+                    },
+                    silent: true,
+                };
+            },
+            data: dataArray.map((val, i) => [i, val]),
+        };
+    }
+}

package/src/utils/ShapeUtils.ts

@@ -47,6 +47,11 @@ export class ShapeUtils {
             case 'shape_label_up':
                 return 'path://M12 1l2 3h8a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-20a1 1 0 0 1-1-1v-14a1 1 0 0 1 1-1h8z';
 
+            case 'labelcenter':
+            case 'shape_label_center':
+                // Rounded rectangle with no pointer — centered at anchor
+                return 'path://M1 1h22a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1h-22a1 1 0 0 1-1-1v-16a1 1 0 0 1 1-1z';
+
             case 'square':
             case 'shape_square':
                 return 'rect';