@qfo/qfchart 0.7.1 → 0.7.3

package/src/components/renderers/FillRenderer.ts

@@ -3,7 +3,7 @@ import { ColorUtils } from '../../utils/ColorUtils';
 
 export class FillRenderer implements SeriesRenderer {
     render(context: RenderContext): any {
-        const { seriesName, xAxisIndex, yAxisIndex, plotOptions, plotDataArrays, indicatorId, plotName } = context;
+        const { seriesName, xAxisIndex, yAxisIndex, plotOptions, plotDataArrays, indicatorId, plotName, optionsArray } = context;
         const totalDataLength = context.dataArray.length; // Use length from dataArray placeholder
 
         // Fill plots reference other plots to fill the area between them
@@ -23,7 +23,18 @@ export class FillRenderer implements SeriesRenderer {
             return null;
         }
 
-        // Parse color to extract opacity
+        // Detect gradient fill mode
+        const isGradient = plotOptions.gradient === true;
+
+        if (isGradient) {
+            return this.renderGradientFill(
+                seriesName, xAxisIndex, yAxisIndex,
+                plot1Data, plot2Data, totalDataLength,
+                optionsArray, plotOptions
+            );
+        }
+
+        // --- Simple (solid color) fill ---
         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
@@ -37,54 +48,37 @@ export class FillRenderer implements SeriesRenderer {
             fillDataWithPrev.push([i, y1, y2, prevY1, prevY2]);
         }
 
-        // Add fill series with smooth area rendering
         return {
             name: seriesName,
             type: 'custom',
             xAxisIndex: xAxisIndex,
             yAxisIndex: yAxisIndex,
-            z: 1, // Behind plot lines (z=2) and candles (z=5), above grid background
+            z: 1,
             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
+                const y1 = api.value(1);
+                const y2 = api.value(2);
+                const prevY1 = api.value(3);
+                const prevY2 = api.value(4);
 
-                // Skip if any value is null/NaN
                 if (
-                    y1 === null ||
-                    y2 === null ||
-                    prevY1 === null ||
-                    prevY2 === null ||
-                    isNaN(y1) ||
-                    isNaN(y2) ||
-                    isNaN(prevY1) ||
-                    isNaN(prevY2)
+                    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
+                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]);
 
-                // Create a smooth polygon connecting the segments
                 return {
                     type: 'polygon',
                     shape: {
-                        points: [
-                            p1Prev, // Top-left
-                            p1Curr, // Top-right
-                            p2Curr, // Bottom-right
-                            p2Prev, // Bottom-left
-                        ],
+                        points: [p1Prev, p1Curr, p2Curr, p2Prev],
                     },
                     style: {
                         fill: fillColor,
@@ -96,4 +90,117 @@ export class FillRenderer implements SeriesRenderer {
             data: fillDataWithPrev,
         };
     }
+
+    /**
+     * 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.
+     */
+    private renderGradientFill(
+        seriesName: string,
+        xAxisIndex: number,
+        yAxisIndex: number,
+        plot1Data: (number | null)[],
+        plot2Data: (number | null)[],
+        totalDataLength: number,
+        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 }[] = [];
+
+        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,
+                };
+            } 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,
+                };
+            }
+        }
+
+        // Create fill data with previous values
+        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]);
+        }
+
+        return {
+            name: seriesName,
+            type: 'custom',
+            xAxisIndex: xAxisIndex,
+            yAxisIndex: yAxisIndex,
+            z: 1,
+            renderItem: (params: any, api: any) => {
+                const index = params.dataIndex;
+                if (index === 0) return null;
+
+                const y1 = api.value(1);
+                const y2 = api.value(2);
+                const prevY1 = api.value(3);
+                const prevY2 = api.value(4);
+
+                if (
+                    y1 === null || y2 === null || prevY1 === null || prevY2 === null ||
+                    isNaN(y1) || isNaN(y2) || isNaN(prevY1) || isNaN(prevY2)
+                ) {
+                    return null;
+                }
+
+                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;
+
+                // 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;
+
+                return {
+                    type: 'polygon',
+                    shape: {
+                        points: [p1Prev, p1Curr, p2Curr, p2Prev],
+                    },
+                    style: {
+                        fill: {
+                            type: 'linear',
+                            x: 0, y: 0, x2: 0, y2: 1, // vertical gradient
+                            colorStops: [
+                                { offset: 0, color: plot1IsAbove ? topRgba : bottomRgba },
+                                { offset: 1, color: plot1IsAbove ? bottomRgba : topRgba },
+                            ],
+                        },
+                    },
+                    silent: true,
+                };
+            },
+            data: fillDataWithPrev,
+        };
+    }
+
 }

package/src/components/renderers/HistogramRenderer.ts

@@ -1,20 +1,67 @@
-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 },
-        };
-    }
-}
+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';
+        const histbase: number = plotOptions.histbase ?? 0;
+        const isColumns = plotOptions.style === 'columns';
+        const linewidth: number = plotOptions.linewidth ?? 1;
+
+        // Build data array: [index, value, color]
+        const customData = dataArray.map((val: number | null, i: number) => {
+            if (val === null || val === undefined || (typeof val === 'number' && isNaN(val))) return null;
+            return [i, val, colorArray[i] || plotOptions.color || defaultColor];
+        });
+
+        return {
+            name: seriesName,
+            type: 'custom',
+            xAxisIndex: xAxisIndex,
+            yAxisIndex: yAxisIndex,
+            renderItem: (params: any, api: any) => {
+                const idx = api.value(0);
+                const value = api.value(1);
+                const color = api.value(2);
+
+                if (value === null || value === undefined || isNaN(value)) {
+                    return null;
+                }
+
+                const basePos = api.coord([idx, histbase]);
+                const valuePos = api.coord([idx, value]);
+                const candleWidth = api.size([1, 0])[0];
+
+                // Columns: thick bars (60% of candle width)
+                // Histogram: thin bars — scale with linewidth (like TradingView)
+                let barWidth: number;
+                if (isColumns) {
+                    barWidth = candleWidth * 0.6;
+                } else {
+                    // Thin line-like bars: linewidth controls pixel width (min 1px)
+                    barWidth = Math.max(1, linewidth);
+                }
+
+                const x = basePos[0];
+                const yBase = basePos[1];
+                const yValue = valuePos[1];
+                const top = Math.min(yBase, yValue);
+                const height = Math.abs(yValue - yBase);
+
+                return {
+                    type: 'rect',
+                    shape: {
+                        x: x - barWidth / 2,
+                        y: top,
+                        width: barWidth,
+                        height: height || 1, // Minimum 1px for zero-height bars
+                    },
+                    style: {
+                        fill: color,
+                    },
+                };
+            },
+            data: customData.filter((d: any) => d !== null),
+        };
+    }
+}

package/src/components/renderers/LinefillRenderer.ts

@@ -37,20 +37,12 @@ export class LinefillRenderer implements SeriesRenderer {
             return { name: seriesName, type: 'custom', xAxisIndex, yAxisIndex, data: [], silent: true };
         }
 
-        // Compute y-range for axis scaling
-        let yMin = Infinity, yMax = -Infinity;
-        for (const lf of fillObjects) {
-            for (const y of [lf.line1.y1, lf.line1.y2, lf.line2.y1, lf.line2.y2]) {
-                if (y < yMin) yMin = y;
-                if (y > yMax) yMax = y;
-            }
-        }
-
         // Use a SINGLE data entry spanning the full x-range so renderItem is always called.
         // ECharts filters a data item only when ALL its x-dimensions are on the same side
         // of the visible window.  With dims 0=0 and 1=lastBar the item always straddles
         // the viewport, so renderItem fires exactly once regardless of scroll position.
-        // Dims 2/3 are yMin/yMax for axis scaling.
+        // Note: We do NOT encode y-dimensions — drawing objects should not influence the
+        // y-axis auto-scaling.
         const totalBars = (context.candlestickData?.length || 0) + offset;
         const lastBarIndex = Math.max(0, totalBars - 1);
 
@@ -103,9 +95,9 @@ export class LinefillRenderer implements SeriesRenderer {
 
                 return { type: 'group', children };
             },
-            data: [[0, lastBarIndex, yMin, yMax]],
+            data: [[0, lastBarIndex]],
             clip: true,
-            encode: { x: [0, 1], y: [2, 3] },
+            encode: { x: [0, 1] },
             z: 10, // Behind lines (z=15) but above other elements
             silent: true,
             emphasis: { disabled: true },

package/src/components/renderers/PolylineRenderer.ts

@@ -34,21 +34,12 @@ export class PolylineRenderer implements SeriesRenderer {
             return { name: seriesName, type: 'custom', xAxisIndex, yAxisIndex, data: [], silent: true };
         }
 
-        // Compute y-range across all polylines for axis scaling
-        let yMin = Infinity, yMax = -Infinity;
-        for (const pl of polyObjects) {
-            for (const pt of pl.points) {
-                const p = pt.price ?? 0;
-                if (p < yMin) yMin = p;
-                if (p > yMax) yMax = p;
-            }
-        }
-
         // Use a SINGLE data entry spanning the full x-range so renderItem is always called.
         // ECharts filters a data item only when ALL its x-dimensions are on the same side
         // of the visible window.  With dims 0=0 and 1=lastBar the item always straddles
         // the viewport, so renderItem fires exactly once regardless of scroll position.
-        // Dims 2/3 are yMin/yMax for axis scaling.
+        // Note: We do NOT encode y-dimensions — drawing objects should not influence the
+        // y-axis auto-scaling.
         const totalBars = (context.candlestickData?.length || 0) + offset;
         const lastBarIndex = Math.max(0, totalBars - 1);
 
@@ -126,9 +117,11 @@ export class PolylineRenderer implements SeriesRenderer {
 
                 return { type: 'group', children };
             },
-            data: [[0, lastBarIndex, yMin, yMax]],
+            data: [[0, lastBarIndex]],
             clip: true,
-            encode: { x: [0, 1], y: [2, 3] },
+            encode: { x: [0, 1] },
+            // Prevent ECharts visual system from overriding element colors with palette
+            itemStyle: { color: 'transparent', borderColor: 'transparent' },
             z: 12,
             silent: true,
             emphasis: { disabled: true },

package/src/utils/ColorUtils.ts

@@ -1,32 +1,77 @@
-export class ColorUtils {
-    /**
-     * Parse color string and extract opacity
-     * Supports: hex (#RRGGBB), named colors (green, red), rgba(r,g,b,a), rgb(r,g,b)
-     */
-    public static parseColor(colorStr: string): { color: string; opacity: number } {
-        if (!colorStr) {
-            return { color: '#888888', opacity: 0.2 };
-        }
-
-        // Check for rgba format
-        const rgbaMatch = colorStr.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/);
-        if (rgbaMatch) {
-            const r = rgbaMatch[1];
-            const g = rgbaMatch[2];
-            const b = rgbaMatch[3];
-            const a = rgbaMatch[4] ? parseFloat(rgbaMatch[4]) : 1;
-
-            // Return rgb color and separate opacity
-            return {
-                color: `rgb(${r},${g},${b})`,
-                opacity: a,
-            };
-        }
-
-        // For hex or named colors, default opacity to 0.3 for fill areas
-        return {
-            color: colorStr,
-            opacity: 0.3,
-        };
-    }
-}
+export class ColorUtils {
+    /**
+     * Parse color string and extract opacity
+     * Supports: hex (#RRGGBB, #RRGGBBAA), named colors (green, red), rgba(r,g,b,a), rgb(r,g,b)
+     */
+    public static parseColor(colorStr: string): { color: string; opacity: number } {
+        if (!colorStr) {
+            return { color: '#888888', opacity: 0.2 };
+        }
+
+        // Check for rgba format
+        const rgbaMatch = colorStr.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/);
+        if (rgbaMatch) {
+            const r = rgbaMatch[1];
+            const g = rgbaMatch[2];
+            const b = rgbaMatch[3];
+            const a = rgbaMatch[4] ? parseFloat(rgbaMatch[4]) : 1;
+
+            // Return rgb color and separate opacity
+            return {
+                color: `rgb(${r},${g},${b})`,
+                opacity: a,
+            };
+        }
+
+        // Check for 8-digit hex with alpha (#RRGGBBAA)
+        const hex8Match = colorStr.match(/^#([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/);
+        if (hex8Match) {
+            const r = parseInt(hex8Match[1], 16);
+            const g = parseInt(hex8Match[2], 16);
+            const b = parseInt(hex8Match[3], 16);
+            const a = parseInt(hex8Match[4], 16) / 255;
+            return {
+                color: `rgb(${r},${g},${b})`,
+                opacity: a,
+            };
+        }
+
+        // For 6-digit hex or named colors, default opacity to 0.3 for fill areas
+        return {
+            color: colorStr,
+            opacity: 0.3,
+        };
+    }
+
+    /**
+     * Convert a parsed color + opacity to an rgba string.
+     */
+    public static toRgba(color: string, opacity: number): string {
+        // If already rgba/rgb format
+        const rgbMatch = color.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
+        if (rgbMatch) {
+            return `rgba(${rgbMatch[1]},${rgbMatch[2]},${rgbMatch[3]},${opacity})`;
+        }
+
+        // Handle 6-digit hex colors
+        const hexMatch = color.match(/^#([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/);
+        if (hexMatch) {
+            const r = parseInt(hexMatch[1], 16);
+            const g = parseInt(hexMatch[2], 16);
+            const b = parseInt(hexMatch[3], 16);
+            return `rgba(${r},${g},${b},${opacity})`;
+        }
+
+        // Handle 8-digit hex colors (#RRGGBBAA) — use alpha from hex, override with opacity
+        const hex8Match = color.match(/^#([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/);
+        if (hex8Match) {
+            const r = parseInt(hex8Match[1], 16);
+            const g = parseInt(hex8Match[2], 16);
+            const b = parseInt(hex8Match[3], 16);
+            return `rgba(${r},${g},${b},${opacity})`;
+        }
+
+        // Fallback: return color as-is
+        return color;
+    }
+}