@funnest/charts 0.6.5 → 0.6.7

package/dist/chart.d.ts

@@ -3,7 +3,7 @@ import { TimeScale, type IndexRange, type TimeScaleOptions } from './model/time-
 import type { IndicatorDefinition, IndicatorParams, IndicatorType } from './indicators/definitions';
 import { type IndicatorConfig, type IndicatorPatch } from './indicators/manager';
 import { type Drawing, type DrawingDefinition, type DrawingType } from './objects/drawings';
-import { type AlertLineOptions, type ExecutionMarker, type LineHandle, type OrderLineOptions, type PositionLineOptions } from './objects/trading';
+import { type AlertLineOptions, type ExecutionMarker, type LineHandle, type OrderLineOptions, type PositionLineOptions, type TradingLabelOptions } from './objects/trading';
 import { type ChartSettings, type ChartState } from './settings';
 import { type TradingAdapter } from './objects/trading-sync';
 import { type ChartType, type CrosshairInfo, type PaneId } from './render/renderer';
@@ -411,8 +411,11 @@ export declare class Chart {
     addOrderLine(options: OrderLineOptions): LineHandle<OrderLineOptions>;
     /** Price alert line (dotted, gray, "알림" label). Pass `onMove` to make it draggable and `onCancel` for an ×. */
     addAlertLine(options: AlertLineOptions): LineHandle<AlertLineOptions>;
-    /** Fill markers (▲ buy under the bar, ▼ sell above). Replaces the previous set. */
+    /** Fill markers (▲ buy under the bar, ▼ sell above; ⚡ at the price for liquidations). Replaces the previous set. */
     setExecutions(markers: readonly ExecutionMarker[]): void;
+    /** What position/order/alert line labels show and where (direction, price, size, P&L, ×, alignment, line width). */
+    setTradingLabels(patch: Partial<TradingLabelOptions>): void;
+    get tradingLabels(): TradingLabelOptions;
     setTheme(theme: Partial<ThemeTokens>): void;
     /** Re-reads CSS variables used by the theme (call after changing them outside of class/style attributes). */
     refreshTheme(): void;

package/dist/index.d.ts

@@ -19,7 +19,8 @@ export type { PaneCoords } from './objects/types';
 export type { Painter } from './render/painter';
 export type { Palette } from './render/renderer';
 export { snapToOhlc } from './objects/magnet';
-export type { AlertLineOptions, ExecutionGroup, ExecutionMarker, LineHandle, OrderLineOptions, PositionLineOptions } from './objects/trading';
+export { DEFAULT_TRADING_LABEL_OPTIONS } from './objects/trading';
+export type { AlertLineOptions, ExecutionGroup, ExecutionMarker, LineHandle, OrderLineOptions, PositionLineOptions, TradingLabelOptions } from './objects/trading';
 export type { Execution, OrderInfo, PositionInfo, TradingAdapter, TradingCallbacks } from './objects/trading-sync';
 export { bucketStart, TickAggregator, timeZoneOffset } from './realtime';
 export type { Tick } from './realtime';

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 = [];
@@ -1579,8 +1583,18 @@ var Painter = class {
 var inRect = (r, x, y, pad = 0) => x >= r.x - pad && x <= r.x + r.w + pad && y >= r.y - pad && y <= r.y + r.h + pad;
 
 // src/objects/trading.ts
+var DEFAULT_TRADING_LABEL_OPTIONS = {
+  side: true,
+  price: false,
+  quantity: true,
+  pnl: true,
+  buttons: true,
+  align: "left",
+  fullWidth: true
+};
 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 {
@@ -1595,6 +1609,14 @@ var TradingLayer = class {
   labelRects = /* @__PURE__ */ new Map();
   drag = null;
   groups = [];
+  labelOptions = { ...DEFAULT_TRADING_LABEL_OPTIONS };
+  get labelSettings() {
+    return { ...this.labelOptions };
+  }
+  setLabelOptions(patch) {
+    this.labelOptions = { ...this.labelOptions, ...patch };
+    this.onChange();
+  }
   addPosition(options) {
     const id = newId("pos");
     this.positions.set(id, { ...options });
@@ -1699,19 +1721,21 @@ var TradingLayer = class {
       const index = barIndexAt(e.time);
       const bar = bars[index];
       if (!bar) continue;
-      const key = `${bar.time}:${e.side}`;
+      const liquidation = e.kind === "liquidation";
+      const key = `${bar.time}:${liquidation ? "liq" : e.side}`;
       let g = byKey.get(key);
       if (!g) {
         const buy = e.side === "buy";
         g = {
           key,
           side: e.side,
+          kind: liquidation ? "liquidation" : "fill",
           count: 0,
           quantity: 0,
           averagePrice: 0,
           time: e.time,
           x: indexToX(index),
-          y: buy ? c.priceToY(bar.low) + 10 : c.priceToY(bar.high) - 10,
+          y: liquidation ? c.priceToY(e.price) : buy ? c.priceToY(bar.low) + 10 : c.priceToY(bar.high) - 10,
           weighted: 0,
           weight: 0
         };
@@ -1728,6 +1752,23 @@ var TradingLayer = class {
     const { ctx } = p;
     for (const g of this.groups) {
       if (g.x < -10 || g.x > c.plotWidth + 10) continue;
+      if (g.kind === "liquidation") {
+        ctx.beginPath();
+        ctx.arc(g.x, g.y, 8, 0, Math.PI * 2);
+        ctx.fillStyle = palette.down;
+        ctx.fill();
+        ctx.beginPath();
+        ctx.moveTo(g.x + 1.5, g.y - 5.5);
+        ctx.lineTo(g.x - 3.5, g.y + 1);
+        ctx.lineTo(g.x - 0.2, g.y + 1);
+        ctx.lineTo(g.x - 1.5, g.y + 5.5);
+        ctx.lineTo(g.x + 3.5, g.y - 1);
+        ctx.lineTo(g.x + 0.2, g.y - 1);
+        ctx.closePath();
+        ctx.fillStyle = "#FFFFFF";
+        ctx.fill();
+        continue;
+      }
       const buy = g.side === "buy";
       ctx.beginPath();
       ctx.moveTo(g.x, buy ? g.y - 5 : g.y + 5);
@@ -1738,15 +1779,41 @@ 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 opts = this.labelOptions;
+    const placed = [];
+    const placeX = (width, y) => {
+      const toLeft = opts.align === "right";
+      let x = opts.align === "left" ? LABEL_X : toLeft ? c.plotWidth - width - LABEL_X : (c.plotWidth - width) / 2;
+      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 = toLeft ? r.x - width - LABEL_GAP : r.x + r.w + LABEL_GAP;
+            moved = true;
+          }
+        }
+      }
+      placed.push({ x, y: y - LABEL_HEIGHT / 2, w: width, h: LABEL_HEIGHT });
+      return x;
+    };
+    const drawLine = (y, color, segments, dash) => {
+      if (segments.length === 0) {
+        p.hLine(y, 0, c.plotWidth, color, dash);
+        return null;
+      }
+      const x = placeX(p.pillWidth(segments), y);
+      const from = opts.fullWidth ? 0 : Math.min(x + p.pillWidth(segments), c.plotWidth);
+      p.hLine(y, from, c.plotWidth, color, dash);
+      return p.pill(segments, x, y, LABEL_HEIGHT);
+    };
     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 });
       if (!visible(y)) continue;
-      p.hLine(y, 0, c.plotWidth, palette.text);
-      const segments = [
-        { text: `${pos.label ?? labels.position} \xB7 ${pos.quantity}`, bg: palette.text, fg: palette.background }
-      ];
-      if (last) {
+      const main = [opts.side ? pos.label ?? labels.position : "", opts.price ? c.formatPrice(pos.price) : "", opts.quantity ? String(pos.quantity) : ""].filter(Boolean).join(" \xB7 ");
+      const segments = main ? [{ text: main, bg: palette.text, fg: palette.background }] : [];
+      if (last && opts.pnl) {
         const pnl = (last.close - pos.price) * pos.quantity * (pos.side === "long" ? 1 : -1);
         const pct = pos.price ? (last.close - pos.price) / pos.price * 100 * (pos.side === "long" ? 1 : -1) : 0;
         const sign = pnl > 0 ? "+" : "";
@@ -1756,7 +1823,7 @@ var TradingLayer = class {
           fg: "#FFFFFF"
         });
       }
-      p.pill(segments, LABEL_X, y, LABEL_HEIGHT);
+      drawLine(y, palette.text, segments);
     }
     for (const [id, order] of this.orders) {
       const price = this.drag?.id === id ? this.drag.price : order.price;
@@ -1764,15 +1831,15 @@ var TradingLayer = class {
       const color = order.alert ? palette.textSecondary : order.side === "buy" ? palette.up : palette.down;
       badges.push({ y, text: c.formatPrice(price), bg: color, fg: "#FFFFFF" });
       if (!visible(y)) continue;
-      p.hLine(y, 0, c.plotWidth, color, order.alert ? ALERT_DASH : ORDER_DASH);
-      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);
-      if (order.onCancel && rects[1]) p.vLine(rects[1].x, y - 6, y + 6, "rgba(255,255,255,0.4)");
+      const main = (order.alert ? [order.label ?? labels.alert, opts.price ? c.formatPrice(price) : ""] : [opts.side ? order.side === "buy" ? labels.buy : labels.sell : "", order.label, opts.price ? c.formatPrice(price) : "", opts.quantity ? String(order.quantity) : ""]).filter(Boolean).join(" ");
+      const cancellable = !!order.onCancel && opts.buttons;
+      const segments = [{ text: main || c.formatPrice(price), bg: color, fg: "#FFFFFF" }];
+      if (cancellable) segments.push({ text: "\xD7", bg: color, fg: "#FFFFFF", padding: 7 });
+      const rects = drawLine(y, color, segments, order.alert ? ALERT_DASH : ORDER_DASH);
+      if (cancellable && 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 },
-        cancel: order.onCancel ? rects[1] : null
+        cancel: cancellable ? rects[1] : null
       });
     }
   }
@@ -2652,8 +2719,8 @@ function firstFinite(values, from) {
   return Number.NaN;
 }
 var TOOLTIP_LABELS = {
-  ko: { buy: "\uB9E4\uC218", sell: "\uB9E4\uB3C4", fills: (n) => `${n}\uAC74`, price: "\uCCB4\uACB0\uAC00", avg: "\uD3C9\uADE0\uAC00", qty: "\uC218\uB7C9" },
-  en: { buy: "Buy", sell: "Sell", fills: (n) => `${n} fills`, price: "Price", avg: "Avg", qty: "Qty" }
+  ko: { buy: "\uB9E4\uC218", sell: "\uB9E4\uB3C4", liquidation: "\uCCAD\uC0B0", fills: (n) => `${n}\uAC74`, price: "\uCCB4\uACB0\uAC00", avg: "\uD3C9\uADE0\uAC00", qty: "\uC218\uB7C9" },
+  en: { buy: "Buy", sell: "Sell", liquidation: "Liquidation", fills: (n) => `${n} fills`, price: "Price", avg: "Avg", qty: "Qty" }
 };
 function fallbackResolution(requested, supported) {
   if (!supported?.length || supported.includes(requested)) return requested;
@@ -3655,10 +3722,17 @@ var Chart = class {
   addAlertLine(options) {
     return this.trading.addAlert(options);
   }
-  /** Fill markers (▲ buy under the bar, ▼ sell above). Replaces the previous set. */
+  /** Fill markers (▲ buy under the bar, ▼ sell above; ⚡ at the price for liquidations). Replaces the previous set. */
   setExecutions(markers) {
     this.trading.setExecutions(markers);
   }
+  /** What position/order/alert line labels show and where (direction, price, size, P&L, ×, alignment, line width). */
+  setTradingLabels(patch) {
+    this.trading.setLabelOptions(patch);
+  }
+  get tradingLabels() {
+    return this.trading.labelSettings;
+  }
   setTheme(theme) {
     this.theme = { ...this.theme, ...theme };
     this.colors.clear();
@@ -4156,14 +4230,14 @@ var Chart = class {
     const g = this.tooltipKey ? this.trading.executionGroup(this.tooltipKey) : void 0;
     if (!g) return null;
     const t = TOOLTIP_LABELS[this.locale];
-    const side = g.side === "buy" ? t.buy : t.sell;
+    const side = g.kind === "liquidation" ? t.liquidation : g.side === "buy" ? t.buy : t.sell;
     const lines = [
       g.count > 1 ? `${side} ${t.fills(g.count)}` : side,
       `${g.count > 1 ? t.avg : t.price} ${formatPrice(roundToTick(g.averagePrice, this.tickSize), this.pricePrecision)}`
     ];
     if (g.quantity > 0) lines.push(`${t.qty} ${Number(g.quantity.toFixed(8))}`);
     lines.push(this.formatter.crosshairLabel(g.time, true));
-    return { x: g.x, y: g.y, side: g.side, lines };
+    return { x: g.x, y: g.y, side: g.kind === "liquidation" ? "sell" : g.side, lines };
   }
   emitCrosshair(info) {
     const key = info ? `${info.index}|${info.value}|${info.bar.close}|${info.bar.volume ?? ""}` : "";
@@ -4557,6 +4631,7 @@ export {
   CHART_THEMES,
   Chart,
   DEFAULT_CHART_SETTINGS,
+  DEFAULT_TRADING_LABEL_OPTIONS,
   FIB_LEVELS,
   INDICATORS,
   PRICE_SOURCES,

package/dist/objects/trading.d.ts

@@ -37,11 +37,33 @@ export interface ExecutionMarker {
     price: number;
     side: 'buy' | 'sell';
     quantity?: number;
+    /** 'liquidation': a forced close, drawn as a ⚡ badge at its price instead of ▲/▼. Default 'fill'. */
+    kind?: 'fill' | 'liquidation';
 }
+/**
+ * What the labels of position, order and alert lines show, and where (chart settings like
+ * "라벨" in trading terminals). Defaults keep the original look.
+ */
+export interface TradingLabelOptions {
+    /** 매수/매도 and the position name. */
+    side: boolean;
+    /** The line's price inside the label (the price axis always shows it). */
+    price: boolean;
+    quantity: boolean;
+    /** Positions: P&L against the last price. */
+    pnl: boolean;
+    /** The × on cancellable lines. */
+    buttons: boolean;
+    align: 'left' | 'center' | 'right';
+    /** Draw lines across the whole chart; off, only from the label to the price axis. */
+    fullWidth: boolean;
+}
+export declare const DEFAULT_TRADING_LABEL_OPTIONS: TradingLabelOptions;
 /** Fills on the same bar and side, shown as one marker. */
 export interface ExecutionGroup {
     key: string;
     side: 'buy' | 'sell';
+    kind: 'fill' | 'liquidation';
     count: number;
     quantity: number;
     /** Quantity-weighted average price (plain average when quantities are missing). */
@@ -72,7 +94,10 @@ export declare class TradingLayer {
     private labelRects;
     private drag;
     private groups;
+    private labelOptions;
     constructor(onChange: () => void);
+    get labelSettings(): TradingLabelOptions;
+    setLabelOptions(patch: Partial<TradingLabelOptions>): void;
     addPosition(options: PositionLineOptions): LineHandle<PositionLineOptions>;
     addOrder(options: OrderLineOptions): LineHandle<OrderLineOptions>;
     addAlert(options: AlertLineOptions): LineHandle<AlertLineOptions>;

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.5",
+  "version": "0.6.7",
   "description": "Canvas charting engine for financial charts",
   "keywords": [
     "chart",