@qfo/qfchart 0.6.4 → 0.6.6

package/src/components/SeriesRendererFactory.ts

@@ -0,0 +1,36 @@
+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
+    }
+}

package/src/components/renderers/BackgroundRenderer.ts

@@ -0,0 +1,47 @@
+import { SeriesRenderer, RenderContext } from './SeriesRenderer';
+
+export class BackgroundRenderer implements SeriesRenderer {
+    render(context: RenderContext): any {
+        const { seriesName, xAxisIndex, yAxisIndex, dataArray, colorArray } = context;
+
+        return {
+            name: seriesName,
+            type: 'custom',
+            xAxisIndex: xAxisIndex,
+            yAxisIndex: yAxisIndex,
+            z: -10,
+            renderItem: (params: any, api: any) => {
+                const xVal = api.value(0);
+                if (isNaN(xVal)) return;
+
+                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;
+                const x = start[0] - width / 2;
+                const barColor = colorArray[params.dataIndex];
+                const val = api.value(1);
+
+                if (!barColor || val === null || val === undefined || isNaN(val)) return;
+
+                return {
+                    type: 'rect',
+                    shape: {
+                        x: x,
+                        y: sys.y,
+                        width: width,
+                        height: sys.height,
+                    },
+                    style: {
+                        fill: barColor,
+                        opacity: 0.3,
+                    },
+                    silent: true,
+                };
+            },
+            // 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/FillRenderer.ts

@@ -0,0 +1,99 @@
+import { SeriesRenderer, RenderContext } from './SeriesRenderer';
+import { ColorUtils } from '../../utils/ColorUtils';
+
+export class FillRenderer implements SeriesRenderer {
+    render(context: RenderContext): any {
+        const { seriesName, xAxisIndex, yAxisIndex, plotOptions, plotDataArrays, indicatorId, plotName } = context;
+        const totalDataLength = context.dataArray.length; // Use length from dataArray placeholder
+
+        // Fill plots reference other plots to fill the area between them
+        const plot1Key = plotOptions.plot1 ? `${indicatorId}::${plotOptions.plot1}` : null;
+        const plot2Key = plotOptions.plot2 ? `${indicatorId}::${plotOptions.plot2}` : null;
+
+        if (!plot1Key || !plot2Key) {
+            console.warn(`Fill plot "${plotName}" missing plot1 or plot2 reference`);
+            return null;
+        }
+
+        const plot1Data = plotDataArrays?.get(plot1Key);
+        const plot2Data = plotDataArrays?.get(plot2Key);
+
+        if (!plot1Data || !plot2Data) {
+            console.warn(`Fill plot "${plotName}" references non-existent plots: ${plotOptions.plot1}, ${plotOptions.plot2}`);
+            return null;
+        }
+
+        // Parse color to extract opacity
+        const { color: fillColor, opacity: fillOpacity } = ColorUtils.parseColor(plotOptions.color || 'rgba(128, 128, 128, 0.2)');
+
+        // Create fill data with previous values for smooth polygon rendering
+        const fillDataWithPrev: 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]);
+        }
+
+        // Add fill series with smooth area rendering
+        return {
+            name: seriesName,
+            type: 'custom',
+            xAxisIndex: xAxisIndex,
+            yAxisIndex: yAxisIndex,
+            z: -5, // Render behind lines but above background
+            renderItem: (params: any, api: any) => {
+                const index = params.dataIndex;
+
+                // Skip first point (no previous to connect to)
+                if (index === 0) return null;
+
+                const y1 = api.value(1); // Current upper
+                const y2 = api.value(2); // Current lower
+                const prevY1 = api.value(3); // Previous upper
+                const prevY2 = api.value(4); // Previous lower
+
+                // Skip if any value is null/NaN
+                if (
+                    y1 === null ||
+                    y2 === null ||
+                    prevY1 === null ||
+                    prevY2 === null ||
+                    isNaN(y1) ||
+                    isNaN(y2) ||
+                    isNaN(prevY1) ||
+                    isNaN(prevY2)
+                ) {
+                    return null;
+                }
+
+                // Get pixel coordinates for all 4 points
+                const p1Prev = api.coord([index - 1, prevY1]); // Previous upper
+                const p1Curr = api.coord([index, y1]); // Current upper
+                const p2Curr = api.coord([index, y2]); // Current lower
+                const p2Prev = api.coord([index - 1, prevY2]); // Previous lower
+
+                // Create a smooth polygon connecting the segments
+                return {
+                    type: 'polygon',
+                    shape: {
+                        points: [
+                            p1Prev, // Top-left
+                            p1Curr, // Top-right
+                            p2Curr, // Bottom-right
+                            p2Prev, // Bottom-left
+                        ],
+                    },
+                    style: {
+                        fill: fillColor,
+                        opacity: fillOpacity,
+                    },
+                    silent: true,
+                };
+            },
+            data: fillDataWithPrev,
+        };
+    }
+}

package/src/components/renderers/HistogramRenderer.ts

@@ -0,0 +1,20 @@
+import { SeriesRenderer, RenderContext } from './SeriesRenderer';
+
+export class HistogramRenderer implements SeriesRenderer {
+    render(context: RenderContext): any {
+        const { seriesName, xAxisIndex, yAxisIndex, dataArray, colorArray, plotOptions } = context;
+        const defaultColor = '#2962ff';
+
+        return {
+            name: seriesName,
+            type: 'bar',
+            xAxisIndex: xAxisIndex,
+            yAxisIndex: yAxisIndex,
+            data: dataArray.map((val, i) => ({
+                value: val,
+                itemStyle: colorArray[i] ? { color: colorArray[i] } : undefined,
+            })),
+            itemStyle: { color: plotOptions.color || defaultColor },
+        };
+    }
+}

package/src/components/renderers/LineRenderer.ts

@@ -0,0 +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]),
+        };
+    }
+}

package/src/components/renderers/OHLCBarRenderer.ts

@@ -0,0 +1,161 @@
+import { SeriesRenderer, RenderContext } from './SeriesRenderer';
+
+export class OHLCBarRenderer implements SeriesRenderer {
+    render(context: RenderContext): any {
+        const { seriesName, xAxisIndex, yAxisIndex, dataArray, colorArray, optionsArray, plotOptions } = context;
+        const defaultColor = '#2962ff';
+        const isCandle = plotOptions.style === 'candle';
+
+        const ohlcData = dataArray
+            .map((val, i) => {
+                if (val === null || !Array.isArray(val) || val.length !== 4) return null;
+
+                const [open, high, low, close] = val;
+                const pointOpts = optionsArray[i] || {};
+                const color = pointOpts.color || colorArray[i] || plotOptions.color || defaultColor;
+                const wickColor = pointOpts.wickcolor || plotOptions.wickcolor || color;
+                const borderColor = pointOpts.bordercolor || plotOptions.bordercolor || wickColor;
+
+                // Store colors in value array at positions 5, 6, and 7 for access in renderItem
+                return [i, open, close, low, high, color, wickColor, borderColor];
+            })
+            .filter((item) => item !== null);
+
+        return {
+            name: seriesName,
+            type: 'custom',
+            xAxisIndex: xAxisIndex,
+            yAxisIndex: yAxisIndex,
+            renderItem: (params: any, api: any) => {
+                const xValue = api.value(0);
+                const openValue = api.value(1);
+                const closeValue = api.value(2);
+                const lowValue = api.value(3);
+                const highValue = api.value(4);
+                const color = api.value(5);
+                const wickColor = api.value(6);
+                const borderColor = api.value(7);
+
+                if (isNaN(openValue) || isNaN(closeValue) || isNaN(lowValue) || isNaN(highValue)) {
+                    return null;
+                }
+
+                const xPos = api.coord([xValue, 0])[0];
+                const openPos = api.coord([xValue, openValue])[1];
+                const closePos = api.coord([xValue, closeValue])[1];
+                const lowPos = api.coord([xValue, lowValue])[1];
+                const highPos = api.coord([xValue, highValue])[1];
+
+                const barWidth = api.size([1, 0])[0] * 0.6;
+
+                if (isCandle) {
+                    // Classic candlestick rendering
+                    const bodyTop = Math.min(openPos, closePos);
+                    const bodyBottom = Math.max(openPos, closePos);
+                    const bodyHeight = Math.abs(closePos - openPos);
+
+                    return {
+                        type: 'group',
+                        children: [
+                            // Upper wick
+                            {
+                                type: 'line',
+                                shape: {
+                                    x1: xPos,
+                                    y1: highPos,
+                                    x2: xPos,
+                                    y2: bodyTop,
+                                },
+                                style: {
+                                    stroke: wickColor,
+                                    lineWidth: 1,
+                                },
+                            },
+                            // Lower wick
+                            {
+                                type: 'line',
+                                shape: {
+                                    x1: xPos,
+                                    y1: bodyBottom,
+                                    x2: xPos,
+                                    y2: lowPos,
+                                },
+                                style: {
+                                    stroke: wickColor,
+                                    lineWidth: 1,
+                                },
+                            },
+                            // Body
+                            {
+                                type: 'rect',
+                                shape: {
+                                    x: xPos - barWidth / 2,
+                                    y: bodyTop,
+                                    width: barWidth,
+                                    height: bodyHeight || 1, // Minimum height for doji
+                                },
+                                style: {
+                                    fill: color,
+                                    stroke: borderColor,
+                                    lineWidth: 1,
+                                },
+                            },
+                        ],
+                    };
+                } else {
+                    // Bar style (OHLC bar)
+                    const tickWidth = barWidth * 0.5;
+
+                    return {
+                        type: 'group',
+                        children: [
+                            // Vertical line (low to high)
+                            {
+                                type: 'line',
+                                shape: {
+                                    x1: xPos,
+                                    y1: lowPos,
+                                    x2: xPos,
+                                    y2: highPos,
+                                },
+                                style: {
+                                    stroke: color,
+                                    lineWidth: 1,
+                                },
+                            },
+                            // Open tick (left)
+                            {
+                                type: 'line',
+                                shape: {
+                                    x1: xPos - tickWidth,
+                                    y1: openPos,
+                                    x2: xPos,
+                                    y2: openPos,
+                                },
+                                style: {
+                                    stroke: color,
+                                    lineWidth: 1,
+                                },
+                            },
+                            // Close tick (right)
+                            {
+                                type: 'line',
+                                shape: {
+                                    x1: xPos,
+                                    y1: closePos,
+                                    x2: xPos + tickWidth,
+                                    y2: closePos,
+                                },
+                                style: {
+                                    stroke: color,
+                                    lineWidth: 1,
+                                },
+                            },
+                        ],
+                    };
+                }
+            },
+            data: ohlcData,
+        };
+    }
+}

package/src/components/renderers/ScatterRenderer.ts

@@ -0,0 +1,54 @@
+import { SeriesRenderer, RenderContext } from './SeriesRenderer';
+import { textToBase64Image } from '../../utils/CanvasUtils';
+
+export class ScatterRenderer implements SeriesRenderer {
+    render(context: RenderContext): any {
+        const { seriesName, xAxisIndex, yAxisIndex, dataArray, colorArray, plotOptions } = context;
+        const defaultColor = '#2962ff';
+        const style = plotOptions.style; // 'circles', 'cross', 'char'
+
+        // Special handling for invisible 'char' style
+        if (style === 'char') {
+            return {
+                name: seriesName,
+                type: 'scatter',
+                xAxisIndex: xAxisIndex,
+                yAxisIndex: yAxisIndex,
+                symbolSize: 0, // Invisible
+                data: dataArray.map((val, i) => ({
+                    value: [i, val],
+                    itemStyle: { opacity: 0 },
+                })),
+                silent: true, // No interaction
+            };
+        }
+
+        const scatterData = dataArray
+            .map((val, i) => {
+                if (val === null) return null;
+                const pointColor = colorArray[i] || plotOptions.color || defaultColor;
+                const item: any = {
+                    value: [i, val],
+                    itemStyle: { color: pointColor },
+                };
+
+                if (style === 'cross') {
+                    item.symbol = `image://${textToBase64Image('+', pointColor, '24px')}`;
+                    item.symbolSize = 16;
+                } else {
+                    item.symbol = 'circle';
+                    item.symbolSize = 6;
+                }
+                return item;
+            })
+            .filter((item) => item !== null);
+
+        return {
+            name: seriesName,
+            type: 'scatter',
+            xAxisIndex: xAxisIndex,
+            yAxisIndex: yAxisIndex,
+            data: scatterData,
+        };
+    }
+}

package/src/components/renderers/SeriesRenderer.ts

@@ -0,0 +1,20 @@
+import { IndicatorPlot, OHLCV } from '../../types';
+
+export interface RenderContext {
+    seriesName: string;
+    xAxisIndex: number;
+    yAxisIndex: number;
+    dataArray: any[];
+    colorArray: any[];
+    optionsArray: any[];
+    plotOptions: any;
+    candlestickData?: OHLCV[]; // For shape positioning
+    plotDataArrays?: Map<string, number[]>; // For fill plots
+    indicatorId?: string;
+    plotName?: string;
+    indicator?: any; // Reference to parent indicator object if needed
+}
+
+export interface SeriesRenderer {
+    render(context: RenderContext): any;
+}

package/src/components/renderers/ShapeRenderer.ts

@@ -0,0 +1,121 @@
+import { SeriesRenderer, RenderContext } from './SeriesRenderer';
+import { ShapeUtils } from '../../utils/ShapeUtils';
+
+export class ShapeRenderer implements SeriesRenderer {
+    render(context: RenderContext): any {
+        const { seriesName, xAxisIndex, yAxisIndex, dataArray, colorArray, optionsArray, plotOptions, candlestickData } = context;
+        const defaultColor = '#2962ff';
+
+        const shapeData = dataArray
+            .map((val, i) => {
+                // Merge global options with per-point options to get location first
+                const pointOpts = optionsArray[i] || {};
+                const globalOpts = plotOptions;
+                const location = pointOpts.location || globalOpts.location || 'absolute';
+
+                // For location="absolute", always draw the shape (ignore value)
+                // For other locations, only draw if value is truthy (TradingView behavior)
+                if (location !== 'absolute' && !val) {
+                    return null;
+                }
+
+                // If we get here and val is null/undefined, it means location is absolute
+                // In that case, we still need a valid value for positioning
+                // Use the value if it exists, otherwise we'd need a fallback
+                // But in TradingView, absolute location still expects a value for Y position
+                if (val === null || val === undefined) {
+                    return null; // Can't plot without a Y coordinate
+                }
+
+                const color = pointOpts.color || globalOpts.color || defaultColor;
+                const shape = pointOpts.shape || globalOpts.shape || 'circle';
+                const size = pointOpts.size || globalOpts.size || 'normal';
+                const text = pointOpts.text || globalOpts.text;
+                const textColor = pointOpts.textcolor || globalOpts.textcolor || 'white';
+
+                // NEW: Get width and height
+                const width = pointOpts.width || globalOpts.width;
+                const height = pointOpts.height || globalOpts.height;
+
+                // Positioning based on location
+                let yValue = val; // Default to absolute value
+                let symbolOffset: (string | number)[] = [0, 0];
+
+                if (location === 'abovebar') {
+                    // Shape above the candle
+                    if (candlestickData && candlestickData[i]) {
+                        yValue = candlestickData[i].high;
+                    }
+                    symbolOffset = [0, '-150%']; // Shift up
+                } else if (location === 'belowbar') {
+                    // Shape below the candle
+                    if (candlestickData && candlestickData[i]) {
+                        yValue = candlestickData[i].low;
+                    }
+                    symbolOffset = [0, '150%']; // Shift down
+                } else if (location === 'top') {
+                    // Shape at top of chart - we need to use a very high value
+                    // This would require knowing the y-axis max, which we don't have here easily
+                    // For now, use a placeholder approach - might need to calculate from data
+                    // Or we can use a percentage of the viewport? ECharts doesn't support that directly in scatter.
+                    // Best approach: use a large multiplier of current value or track max
+                    // Simplified: use coordinate system max (will need enhancement)
+                    yValue = val; // For now, keep absolute - would need axis max
+                    symbolOffset = [0, 0];
+                } else if (location === 'bottom') {
+                    // Shape at bottom of chart
+                    yValue = val; // For now, keep absolute - would need axis min
+                    symbolOffset = [0, 0];
+                }
+
+                const symbol = ShapeUtils.getShapeSymbol(shape);
+                const symbolSize = ShapeUtils.getShapeSize(size, width, height);
+                const rotate = ShapeUtils.getShapeRotation(shape);
+
+                // Special handling for labelup/down sizing - they contain text so they should be larger
+                let finalSize: number | number[] = symbolSize;
+                if (shape.includes('label')) {
+                    // If custom size, scale it up for labels
+                    if (Array.isArray(symbolSize)) {
+                        finalSize = [symbolSize[0] * 2.5, symbolSize[1] * 2.5];
+                    } else {
+                        finalSize = symbolSize * 2.5;
+                    }
+                }
+
+                // Get label configuration based on location
+                const labelConfig = ShapeUtils.getLabelConfig(shape, location);
+
+                const item: any = {
+                    value: [i, yValue],
+                    symbol: symbol,
+                    symbolSize: finalSize,
+                    symbolRotate: rotate,
+                    symbolOffset: symbolOffset,
+                    itemStyle: {
+                        color: color,
+                    },
+                    label: {
+                        show: !!text,
+                        position: labelConfig.position,
+                        distance: labelConfig.distance,
+                        formatter: text,
+                        color: textColor,
+                        fontSize: 10,
+                        fontWeight: 'bold',
+                    },
+                };
+
+                return item;
+            })
+            .filter((item) => item !== null);
+
+        return {
+            name: seriesName,
+            type: 'scatter',
+            xAxisIndex: xAxisIndex,
+            yAxisIndex: yAxisIndex,
+            data: shapeData,
+        };
+    }
+}

package/src/components/renderers/StepRenderer.ts

@@ -0,0 +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]),
+        };
+    }
+}