@funnest/charts 0.6.4 → 0.6.6

package/dist/index.js

@@ -1554,6 +1554,10 @@ var Painter = class {
    * A row of joined label segments ("pill") centered vertically on `y`.
    * Returns each segment's rect for hit testing (e.g. an order's cancel button).
    */
+  /** Width `pill` will take for these segments. */
+  pillWidth(segments) {
+    return segments.reduce((w, seg) => w + Math.ceil(this.measure(seg.text)) + (seg.padding ?? 8) * 2, 0);
+  }
   pill(segments, x, y, height = 20, radius = 4) {
     const { ctx } = this;
     const rects = [];
@@ -1581,6 +1585,7 @@ var inRect = (r, x, y, pad = 0) => x >= r.x - pad && x <= r.x + r.w + pad && y >
 // src/objects/trading.ts
 var LABEL_X = 12;
 var LABEL_HEIGHT = 20;
+var LABEL_GAP = 6;
 var ORDER_DASH = [6, 4];
 var ALERT_DASH = [2, 3];
 var TradingLayer = class {
@@ -1738,6 +1743,22 @@ var TradingLayer = class {
       ctx.fill();
       if (g.count > 1) p.text(String(g.count), g.x + 7, g.y, buy ? palette.up : palette.down, "left", "middle");
     }
+    const placed = [];
+    const placeX = (width, y) => {
+      let x = LABEL_X;
+      for (let moved = true; moved; ) {
+        moved = false;
+        for (const r of placed) {
+          const overlapsY = Math.abs(r.y + LABEL_HEIGHT / 2 - y) < LABEL_HEIGHT + 2;
+          if (overlapsY && x < r.x + r.w + LABEL_GAP && x + width > r.x - LABEL_GAP) {
+            x = r.x + r.w + LABEL_GAP;
+            moved = true;
+          }
+        }
+      }
+      placed.push({ x, y: y - LABEL_HEIGHT / 2, w: width, h: LABEL_HEIGHT });
+      return x;
+    };
     for (const pos of this.positions.values()) {
       const y = c.priceToY(pos.price);
       badges.push({ y, text: c.formatPrice(pos.price), bg: palette.text, fg: palette.background });
@@ -1756,7 +1777,7 @@ var TradingLayer = class {
           fg: "#FFFFFF"
         });
       }
-      p.pill(segments, LABEL_X, y, LABEL_HEIGHT);
+      p.pill(segments, placeX(p.pillWidth(segments), y), y, LABEL_HEIGHT);
     }
     for (const [id, order] of this.orders) {
       const price = this.drag?.id === id ? this.drag.price : order.price;
@@ -1768,7 +1789,7 @@ var TradingLayer = class {
       const main = order.alert ? order.label ?? labels.alert : [order.side === "buy" ? labels.buy : labels.sell, order.label, String(order.quantity)].filter(Boolean).join(" ");
       const segments = [{ text: main, bg: color, fg: "#FFFFFF" }];
       if (order.onCancel) segments.push({ text: "\xD7", bg: color, fg: "#FFFFFF", padding: 7 });
-      const rects = p.pill(segments, LABEL_X, y, LABEL_HEIGHT);
+      const rects = p.pill(segments, placeX(p.pillWidth(segments), y), y, LABEL_HEIGHT);
       if (order.onCancel && rects[1]) p.vLine(rects[1].x, y - 6, y + 6, "rgba(255,255,255,0.4)");
       this.labelRects.set(id, {
         label: { x: rects[0].x, y: rects[0].y, w: rects.reduce((w, r) => w + r.w, 0), h: LABEL_HEIGHT },

package/dist/render/painter.d.ts

@@ -21,6 +21,8 @@ export declare class Painter {
      * A row of joined label segments ("pill") centered vertically on `y`.
      * Returns each segment's rect for hit testing (e.g. an order's cancel button).
      */
+    /** Width `pill` will take for these segments. */
+    pillWidth(segments: readonly PillSegment[]): number;
     pill(segments: readonly PillSegment[], x: number, y: number, height?: number, radius?: number): Rect[];
 }
 export interface Rect {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@funnest/charts",
-  "version": "0.6.4",
+  "version": "0.6.6",
   "description": "Canvas charting engine for financial charts",
   "keywords": [
     "chart",