@qfo/qfchart 0.8.2 → 0.8.4

package/src/components/renderers/ScatterRenderer.ts

@@ -1,54 +1,92 @@
-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,
-        };
-    }
-}
+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'
+
+        // plotchar: render the Unicode character at the data point
+        if (style === 'char') {
+            const { optionsArray, candlestickData } = context;
+            const defaultChar = plotOptions.char || '•';
+            const defaultLocation = plotOptions.location || 'abovebar';
+
+            const charData = dataArray
+                .map((val, i) => {
+                    if (val === null || val === undefined || (typeof val === 'number' && isNaN(val))) return null;
+
+                    const pointOpts = optionsArray?.[i] || {};
+                    const char = pointOpts.char || defaultChar;
+                    const color = pointOpts.color || colorArray[i] || plotOptions.color || defaultColor;
+                    const location = pointOpts.location || defaultLocation;
+                    const size = pointOpts.size || plotOptions.size || 'normal';
+
+                    // Positioning based on location
+                    let yValue = val;
+                    let symbolOffset: (string | number)[] = [0, 0];
+
+                    if (location === 'abovebar' || location === 'AboveBar' || location === 'ab') {
+                        if (candlestickData && candlestickData[i]) yValue = candlestickData[i].high;
+                        symbolOffset = [0, '-150%'];
+                    } else if (location === 'belowbar' || location === 'BelowBar' || location === 'bl') {
+                        if (candlestickData && candlestickData[i]) yValue = candlestickData[i].low;
+                        symbolOffset = [0, '150%'];
+                    }
+                    // absolute / top / bottom: yValue stays as-is
+
+                    // Size mapping — matches TradingView's plotchar sizing
+                    const sizeMap: Record<string, string> = {
+                        tiny: '18px', small: '26px', normal: '34px', large: '42px', huge: '54px', auto: '28px',
+                    };
+                    const fontSize = sizeMap[size] || '34px';
+
+                    return {
+                        value: [i, yValue],
+                        symbol: `image://${textToBase64Image(char, color, fontSize)}`,
+                        symbolSize: parseInt(fontSize) + 8,
+                        symbolOffset: symbolOffset,
+                    };
+                })
+                .filter((item) => item !== null);
+
+            return {
+                name: seriesName,
+                type: 'scatter',
+                xAxisIndex: xAxisIndex,
+                yAxisIndex: yAxisIndex,
+                z: 10, // Render in front of candles
+                data: charData,
+            };
+        }
+
+        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/ShapeRenderer.ts

@@ -40,6 +40,8 @@ export class ShapeRenderer implements SeriesRenderer {
                 // Positioning based on location
                 let yValue = val; // Default to absolute value
                 let symbolOffset: (string | number)[] = [0, 0];
+                const isLabelUp = shape.includes('label_up') || shape === 'labelup';
+                const isLabelDown = shape.includes('label_down') || shape === 'labeldown';
 
                 if (location === 'abovebar' || location === 'AboveBar' || location === 'ab') {
                     // Shape above the candle
@@ -83,6 +85,15 @@ export class ShapeRenderer implements SeriesRenderer {
                     }
                 }
 
+                // Anchor labelup/labeldown so the arrow tip sits at the data point.
+                // labelup: arrow tip points up (at top of shape) → shift shape down
+                // labeldown: arrow tip points down (at bottom of shape) → shift shape up
+                if (isLabelUp) {
+                    symbolOffset = [symbolOffset[0], '50%'];
+                } else if (isLabelDown) {
+                    symbolOffset = [symbolOffset[0], '-50%'];
+                }
+
                 // Get label configuration based on location
                 const labelConfig = ShapeUtils.getLabelConfig(shape, location);
 
@@ -115,6 +126,7 @@ export class ShapeRenderer implements SeriesRenderer {
             type: 'scatter',
             xAxisIndex: xAxisIndex,
             yAxisIndex: yAxisIndex,
+            z: 10, // Render shapes in front of candles (z: 5)
             data: shapeData,
         };
     }