@qfo/qfchart 0.6.8 → 0.7.1

package/src/components/renderers/ShapeRenderer.ts

@@ -1,121 +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,
-        };
-    }
-}
+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' && 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' || location === 'AboveBar' || location === 'ab') {
+                    // Shape above the candle
+                    if (candlestickData && candlestickData[i]) {
+                        yValue = candlestickData[i].high;
+                    }
+                    symbolOffset = [0, '-150%']; // Shift up
+                } else if (location === 'belowbar' || location === 'BelowBar' || location === 'bl') {
+                    // Shape below the candle
+                    if (candlestickData && candlestickData[i]) {
+                        yValue = candlestickData[i].low;
+                    }
+                    symbolOffset = [0, '150%']; // Shift down
+                } else if (location === 'top' || 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' || 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/utils/ShapeUtils.ts

@@ -8,56 +8,59 @@ export class ShapeUtils {
 
         switch (shape) {
             case 'arrowdown':
-                // Blocky arrow down
+            case 'shape_arrow_down':
                 return 'path://M12 24l-12-12h8v-12h8v12h8z';
 
             case 'arrowup':
-                // Blocky arrow up
+            case 'shape_arrow_up':
                 return 'path://M12 0l12 12h-8v12h-8v-12h-8z';
 
             case 'circle':
+            case 'shape_circle':
                 return 'circle';
 
             case 'cross':
-                // Plus sign (+)
+            case 'shape_cross':
                 return 'path://M11 2h2v9h9v2h-9v9h-2v-9h-9v-2h9z';
 
             case 'diamond':
-                return 'diamond'; // Built-in
+            case 'shape_diamond':
+                return 'diamond';
 
             case 'flag':
-                // Flag on a pole
+            case 'shape_flag':
                 return 'path://M6 2v20h2v-8h12l-2-6 2-6h-12z';
 
             case 'labeldown':
-                // Bubble pointing down: rect with small triangle at bottom center
+            case 'shape_label_down':
                 return 'path://M2 1h20a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-8l-2 3-2-3h-8a1 1 0 0 1-1-1v-14a1 1 0 0 1 1-1z';
 
             case 'labelleft':
-                // Bubble with small pointer on the left side (pointing left)
+            case 'shape_label_left':
                 return 'path://M0 10l3-3v-5a1 1 0 0 1 1-1h18a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1h-18a1 1 0 0 1-1-1v-5z';
 
             case 'labelright':
-                // Bubble with small pointer on the right side (pointing right)
+            case 'shape_label_right':
                 return 'path://M24 10l-3-3v-5a1 1 0 0 0-1-1h-18a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1v-5z';
 
             case 'labelup':
-                // Bubble pointing up: small triangle at top, rect below
+            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 'square':
+            case 'shape_square':
                 return 'rect';
 
             case 'triangledown':
-                // Pointing down
+            case 'shape_triangle_down':
                 return 'path://M12 21l-10-18h20z';
 
             case 'triangleup':
-                // Pointing up
-                return 'triangle'; // Built-in is pointing up
+            case 'shape_triangle_up':
+                return 'triangle';
 
             case 'xcross':
-                // 'X' shape
+            case 'shape_xcross':
                 return 'path://M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z';
 
             default:
@@ -120,25 +123,30 @@ export class ShapeUtils {
 
         switch (location) {
             case 'abovebar':
+            case 'AboveBar':
                 // Shape is above the candle, text should be above the shape
                 return { position: 'top', distance: 5 };
 
             case 'belowbar':
+            case 'BelowBar':
                 // Shape is below the candle, text should be below the shape
                 return { position: 'bottom', distance: 5 };
 
             case 'top':
+            case 'Top':
                 // Shape at top of chart, text below it
                 return { position: 'bottom', distance: 5 };
 
             case 'bottom':
+            case 'Bottom':
                 // Shape at bottom of chart, text above it
                 return { position: 'top', distance: 5 };
 
             case 'absolute':
+            case 'Absolute':
             default:
                 // For labelup/down, text is INSIDE the shape
-                if (shape === 'labelup' || shape === 'labeldown') {
+                if (shape === 'labelup' || shape === 'labeldown' || shape === 'shape_label_up' || shape === 'shape_label_down') {
                     return { position: 'inside', distance: 0 };
                 }
                 // For other shapes, text above by default