@qfo/qfchart 0.7.2 → 0.7.3

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 },