@qfo/qfchart 0.8.2 → 0.8.5

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

package/src/components/renderers/StepRenderer.ts

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

package/src/utils/ShapeUtils.ts

@@ -47,6 +47,11 @@ export class ShapeUtils {
             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 'labelcenter':
+            case 'shape_label_center':
+                // Rounded rectangle with no pointer — centered at anchor
+                return 'path://M1 1h22a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1h-22a1 1 0 0 1-1-1v-16a1 1 0 0 1 1-1z';
+
             case 'square':
             case 'shape_square':
                 return 'rect';