hyperprop-charting-library 0.1.100 → 0.1.102

package/dist/hyperprop-charting-library.cjs

@@ -991,6 +991,7 @@ function createChart(element, options = {}) {
     fontSize: drawing.fontSize,
     ...drawing.label === void 0 ? {} : { label: drawing.label }
   });
+  let tradeMarkers = [];
   let indicators = (options.indicators ?? []).map((indicator) => normalizeIndicatorState(indicator));
   let drawings = (options.drawings ?? []).map((drawing) => normalizeDrawingState(drawing));
   let activeDrawingTool = null;
@@ -2897,6 +2898,73 @@ function createChart(element, options = {}) {
     if (draftDrawing) {
       drawDrawing(draftDrawing, true);
     }
+    if (tradeMarkers.length > 0 && data.length > 0) {
+      const visibleStart = Math.floor(xStart) - 1;
+      const visibleEnd = Math.ceil(xStart + xSpan) + 1;
+      const indexForTime = (ms) => {
+        let lo = 0;
+        let hi = data.length - 1;
+        if (ms < data[0].time.getTime()) return null;
+        if (ms >= data[hi].time.getTime()) return hi;
+        while (lo < hi) {
+          const mid = lo + hi + 1 >> 1;
+          if (data[mid].time.getTime() <= ms) lo = mid;
+          else hi = mid - 1;
+        }
+        return lo;
+      };
+      const prevFont = ctx.font;
+      const prevAlign = ctx.textAlign;
+      const prevBaseline = ctx.textBaseline;
+      ctx.font = `500 10px ${mergedOptions.fontFamily}`;
+      ctx.textAlign = "center";
+      ctx.textBaseline = "middle";
+      const arrowHalf = 5;
+      const arrowH = 8;
+      const gap = 5;
+      const labelOffset = arrowH + 8;
+      for (const marker of tradeMarkers) {
+        const ms = typeof marker.time === "number" ? marker.time : Date.parse(String(marker.time));
+        if (!Number.isFinite(ms)) continue;
+        const index = indexForTime(ms);
+        if (index === null || index < visibleStart || index > visibleEnd) continue;
+        const bar = data[index];
+        if (!bar) continue;
+        const x = chartLeft + (index + 0.5 - xStart) / xSpan * chartWidth;
+        if (x < chartLeft - 20 || x > chartRight + 20) continue;
+        const isBuy = marker.side === "buy";
+        const arrowColor = marker.color ?? (isBuy ? "#2962ff" : "#f23645");
+        const textColor = marker.textColor ?? "#d1d4dc";
+        const label = marker.text ?? `${marker.qty ?? ""}${marker.qty != null ? " @ " : ""}${formatPrice(marker.price)}`.trim();
+        ctx.save();
+        ctx.fillStyle = arrowColor;
+        if (isBuy) {
+          const tipY = yFromPrice(bar.l) + gap;
+          ctx.beginPath();
+          ctx.moveTo(x, tipY);
+          ctx.lineTo(x - arrowHalf, tipY + arrowH);
+          ctx.lineTo(x + arrowHalf, tipY + arrowH);
+          ctx.closePath();
+          ctx.fill();
+          ctx.fillStyle = textColor;
+          ctx.fillText(label, Math.round(x), Math.round(tipY + labelOffset));
+        } else {
+          const tipY = yFromPrice(bar.h) - gap;
+          ctx.beginPath();
+          ctx.moveTo(x, tipY);
+          ctx.lineTo(x - arrowHalf, tipY - arrowH);
+          ctx.lineTo(x + arrowHalf, tipY - arrowH);
+          ctx.closePath();
+          ctx.fill();
+          ctx.fillStyle = textColor;
+          ctx.fillText(label, Math.round(x), Math.round(tipY - labelOffset));
+        }
+        ctx.restore();
+      }
+      ctx.font = prevFont;
+      ctx.textAlign = prevAlign;
+      ctx.textBaseline = prevBaseline;
+    }
     const crosshair = { ...DEFAULT_CROSSHAIR_OPTIONS, ...mergedOptions.crosshair ?? {} };
     if (crosshair.visible && crosshairPoint) {
       const cx = clamp(crosshairPoint.x, chartLeft, chartRight);
@@ -5158,6 +5226,10 @@ function createChart(element, options = {}) {
     }
     return false;
   };
+  const setTradeMarkers = (markers) => {
+    tradeMarkers = Array.isArray(markers) ? markers.slice() : [];
+    draw();
+  };
   const setMagnetMode = (mode) => {
     magnetMode = mode;
   };
@@ -5278,6 +5350,7 @@ function createChart(element, options = {}) {
     setMagnetMode,
     getMagnetMode,
     cancelDrawing,
+    setTradeMarkers,
     setSelectedDrawing,
     onDrawingHover,
     setDrawingDefaults,

package/dist/hyperprop-charting-library.d.ts

@@ -79,6 +79,21 @@ interface DrawingObjectOptions {
 declare const POSITION_DEFAULT_COLORS: string[];
 /** Default multi-color palette for fib-retracement levels. */
 declare const FIB_DEFAULT_PALETTE: string[];
+/** A trade execution marker (arrow + label) drawn on the candle of its time. */
+interface TradeMarkerOptions {
+    id?: string;
+    /** Execution time as epoch ms or ISO string; resolved to the bar it falls on. */
+    time: number | string;
+    price: number;
+    side: "buy" | "sell";
+    qty?: number;
+    /** Override label text (defaults to `${qty} @ ${price}`). */
+    text?: string;
+    /** Arrow color (defaults: buy #2962ff, sell #f23645). */
+    color?: string;
+    /** Label text color (default #d1d4dc). */
+    textColor?: string;
+}
 interface DrawingSelectEvent {
     drawing: DrawingObjectOptions;
     target: "line" | "handle";
@@ -433,6 +448,7 @@ interface ChartInstance {
     setMagnetMode: (mode: "none" | "weak" | "strong") => void;
     getMagnetMode: () => "none" | "weak" | "strong";
     cancelDrawing: () => boolean;
+    setTradeMarkers: (markers: TradeMarkerOptions[]) => void;
     onDrawingHover: (handler: ((event: DrawingHoverEvent) => void) | null) => void;
     setDrawingDefaults: (tool: DrawingToolType, defaults: DrawingDefaults | null) => void;
     setSelectedDrawing: (id: string | null) => void;
@@ -471,4 +487,4 @@ interface ViewportState {
 }
 declare function createChart(element: HTMLElement, options?: ChartOptions): ChartInstance;
 
-export { type AxisOptions, type BuiltInIndicatorInfo, type ChartClickEvent, type ChartInstance, type ChartOptions, type CrosshairMoveEvent, type CrosshairOptions, type CrosshairPriceActionEvent, type DashPatternOptions, type DrawingDefaults, type DrawingHoverEvent, type DrawingObjectOptions, type DrawingPoint, type DrawingSelectEvent, type DrawingToolType, FIB_DEFAULT_PALETTE, type GridOptions, type IndicatorInstanceOptions, type IndicatorPane, type IndicatorPaneAxisOptions, type IndicatorPaneGuideLine, type IndicatorPaneRenderInfo, type IndicatorPaneValue, type IndicatorPaneValueLabel, type IndicatorPlugin, type IndicatorRenderContext, type LabelsOptions, type OhlcDataPoint, type OrderActionButton, type OrderActionEvent, type OrderLineOptions, POSITION_DEFAULT_COLORS, type PriceLineOptions, type TickerLineOptions, type ViewportState, type WatermarkOptions, createChart };
+export { type AxisOptions, type BuiltInIndicatorInfo, type ChartClickEvent, type ChartInstance, type ChartOptions, type CrosshairMoveEvent, type CrosshairOptions, type CrosshairPriceActionEvent, type DashPatternOptions, type DrawingDefaults, type DrawingHoverEvent, type DrawingObjectOptions, type DrawingPoint, type DrawingSelectEvent, type DrawingToolType, FIB_DEFAULT_PALETTE, type GridOptions, type IndicatorInstanceOptions, type IndicatorPane, type IndicatorPaneAxisOptions, type IndicatorPaneGuideLine, type IndicatorPaneRenderInfo, type IndicatorPaneValue, type IndicatorPaneValueLabel, type IndicatorPlugin, type IndicatorRenderContext, type LabelsOptions, type OhlcDataPoint, type OrderActionButton, type OrderActionEvent, type OrderLineOptions, POSITION_DEFAULT_COLORS, type PriceLineOptions, type TickerLineOptions, type TradeMarkerOptions, type ViewportState, type WatermarkOptions, createChart };

package/dist/hyperprop-charting-library.js

@@ -965,6 +965,7 @@ function createChart(element, options = {}) {
     fontSize: drawing.fontSize,
     ...drawing.label === void 0 ? {} : { label: drawing.label }
   });
+  let tradeMarkers = [];
   let indicators = (options.indicators ?? []).map((indicator) => normalizeIndicatorState(indicator));
   let drawings = (options.drawings ?? []).map((drawing) => normalizeDrawingState(drawing));
   let activeDrawingTool = null;
@@ -2871,6 +2872,73 @@ function createChart(element, options = {}) {
     if (draftDrawing) {
       drawDrawing(draftDrawing, true);
     }
+    if (tradeMarkers.length > 0 && data.length > 0) {
+      const visibleStart = Math.floor(xStart) - 1;
+      const visibleEnd = Math.ceil(xStart + xSpan) + 1;
+      const indexForTime = (ms) => {
+        let lo = 0;
+        let hi = data.length - 1;
+        if (ms < data[0].time.getTime()) return null;
+        if (ms >= data[hi].time.getTime()) return hi;
+        while (lo < hi) {
+          const mid = lo + hi + 1 >> 1;
+          if (data[mid].time.getTime() <= ms) lo = mid;
+          else hi = mid - 1;
+        }
+        return lo;
+      };
+      const prevFont = ctx.font;
+      const prevAlign = ctx.textAlign;
+      const prevBaseline = ctx.textBaseline;
+      ctx.font = `500 10px ${mergedOptions.fontFamily}`;
+      ctx.textAlign = "center";
+      ctx.textBaseline = "middle";
+      const arrowHalf = 5;
+      const arrowH = 8;
+      const gap = 5;
+      const labelOffset = arrowH + 8;
+      for (const marker of tradeMarkers) {
+        const ms = typeof marker.time === "number" ? marker.time : Date.parse(String(marker.time));
+        if (!Number.isFinite(ms)) continue;
+        const index = indexForTime(ms);
+        if (index === null || index < visibleStart || index > visibleEnd) continue;
+        const bar = data[index];
+        if (!bar) continue;
+        const x = chartLeft + (index + 0.5 - xStart) / xSpan * chartWidth;
+        if (x < chartLeft - 20 || x > chartRight + 20) continue;
+        const isBuy = marker.side === "buy";
+        const arrowColor = marker.color ?? (isBuy ? "#2962ff" : "#f23645");
+        const textColor = marker.textColor ?? "#d1d4dc";
+        const label = marker.text ?? `${marker.qty ?? ""}${marker.qty != null ? " @ " : ""}${formatPrice(marker.price)}`.trim();
+        ctx.save();
+        ctx.fillStyle = arrowColor;
+        if (isBuy) {
+          const tipY = yFromPrice(bar.l) + gap;
+          ctx.beginPath();
+          ctx.moveTo(x, tipY);
+          ctx.lineTo(x - arrowHalf, tipY + arrowH);
+          ctx.lineTo(x + arrowHalf, tipY + arrowH);
+          ctx.closePath();
+          ctx.fill();
+          ctx.fillStyle = textColor;
+          ctx.fillText(label, Math.round(x), Math.round(tipY + labelOffset));
+        } else {
+          const tipY = yFromPrice(bar.h) - gap;
+          ctx.beginPath();
+          ctx.moveTo(x, tipY);
+          ctx.lineTo(x - arrowHalf, tipY - arrowH);
+          ctx.lineTo(x + arrowHalf, tipY - arrowH);
+          ctx.closePath();
+          ctx.fill();
+          ctx.fillStyle = textColor;
+          ctx.fillText(label, Math.round(x), Math.round(tipY - labelOffset));
+        }
+        ctx.restore();
+      }
+      ctx.font = prevFont;
+      ctx.textAlign = prevAlign;
+      ctx.textBaseline = prevBaseline;
+    }
     const crosshair = { ...DEFAULT_CROSSHAIR_OPTIONS, ...mergedOptions.crosshair ?? {} };
     if (crosshair.visible && crosshairPoint) {
       const cx = clamp(crosshairPoint.x, chartLeft, chartRight);
@@ -5132,6 +5200,10 @@ function createChart(element, options = {}) {
     }
     return false;
   };
+  const setTradeMarkers = (markers) => {
+    tradeMarkers = Array.isArray(markers) ? markers.slice() : [];
+    draw();
+  };
   const setMagnetMode = (mode) => {
     magnetMode = mode;
   };
@@ -5252,6 +5324,7 @@ function createChart(element, options = {}) {
     setMagnetMode,
     getMagnetMode,
     cancelDrawing,
+    setTradeMarkers,
     setSelectedDrawing,
     onDrawingHover,
     setDrawingDefaults,

package/dist/index.cjs

@@ -991,6 +991,7 @@ function createChart(element, options = {}) {
     fontSize: drawing.fontSize,
     ...drawing.label === void 0 ? {} : { label: drawing.label }
   });
+  let tradeMarkers = [];
   let indicators = (options.indicators ?? []).map((indicator) => normalizeIndicatorState(indicator));
   let drawings = (options.drawings ?? []).map((drawing) => normalizeDrawingState(drawing));
   let activeDrawingTool = null;
@@ -2897,6 +2898,73 @@ function createChart(element, options = {}) {
     if (draftDrawing) {
       drawDrawing(draftDrawing, true);
     }
+    if (tradeMarkers.length > 0 && data.length > 0) {
+      const visibleStart = Math.floor(xStart) - 1;
+      const visibleEnd = Math.ceil(xStart + xSpan) + 1;
+      const indexForTime = (ms) => {
+        let lo = 0;
+        let hi = data.length - 1;
+        if (ms < data[0].time.getTime()) return null;
+        if (ms >= data[hi].time.getTime()) return hi;
+        while (lo < hi) {
+          const mid = lo + hi + 1 >> 1;
+          if (data[mid].time.getTime() <= ms) lo = mid;
+          else hi = mid - 1;
+        }
+        return lo;
+      };
+      const prevFont = ctx.font;
+      const prevAlign = ctx.textAlign;
+      const prevBaseline = ctx.textBaseline;
+      ctx.font = `500 10px ${mergedOptions.fontFamily}`;
+      ctx.textAlign = "center";
+      ctx.textBaseline = "middle";
+      const arrowHalf = 5;
+      const arrowH = 8;
+      const gap = 5;
+      const labelOffset = arrowH + 8;
+      for (const marker of tradeMarkers) {
+        const ms = typeof marker.time === "number" ? marker.time : Date.parse(String(marker.time));
+        if (!Number.isFinite(ms)) continue;
+        const index = indexForTime(ms);
+        if (index === null || index < visibleStart || index > visibleEnd) continue;
+        const bar = data[index];
+        if (!bar) continue;
+        const x = chartLeft + (index + 0.5 - xStart) / xSpan * chartWidth;
+        if (x < chartLeft - 20 || x > chartRight + 20) continue;
+        const isBuy = marker.side === "buy";
+        const arrowColor = marker.color ?? (isBuy ? "#2962ff" : "#f23645");
+        const textColor = marker.textColor ?? "#d1d4dc";
+        const label = marker.text ?? `${marker.qty ?? ""}${marker.qty != null ? " @ " : ""}${formatPrice(marker.price)}`.trim();
+        ctx.save();
+        ctx.fillStyle = arrowColor;
+        if (isBuy) {
+          const tipY = yFromPrice(bar.l) + gap;
+          ctx.beginPath();
+          ctx.moveTo(x, tipY);
+          ctx.lineTo(x - arrowHalf, tipY + arrowH);
+          ctx.lineTo(x + arrowHalf, tipY + arrowH);
+          ctx.closePath();
+          ctx.fill();
+          ctx.fillStyle = textColor;
+          ctx.fillText(label, Math.round(x), Math.round(tipY + labelOffset));
+        } else {
+          const tipY = yFromPrice(bar.h) - gap;
+          ctx.beginPath();
+          ctx.moveTo(x, tipY);
+          ctx.lineTo(x - arrowHalf, tipY - arrowH);
+          ctx.lineTo(x + arrowHalf, tipY - arrowH);
+          ctx.closePath();
+          ctx.fill();
+          ctx.fillStyle = textColor;
+          ctx.fillText(label, Math.round(x), Math.round(tipY - labelOffset));
+        }
+        ctx.restore();
+      }
+      ctx.font = prevFont;
+      ctx.textAlign = prevAlign;
+      ctx.textBaseline = prevBaseline;
+    }
     const crosshair = { ...DEFAULT_CROSSHAIR_OPTIONS, ...mergedOptions.crosshair ?? {} };
     if (crosshair.visible && crosshairPoint) {
       const cx = clamp(crosshairPoint.x, chartLeft, chartRight);
@@ -5158,6 +5226,10 @@ function createChart(element, options = {}) {
     }
     return false;
   };
+  const setTradeMarkers = (markers) => {
+    tradeMarkers = Array.isArray(markers) ? markers.slice() : [];
+    draw();
+  };
   const setMagnetMode = (mode) => {
     magnetMode = mode;
   };
@@ -5278,6 +5350,7 @@ function createChart(element, options = {}) {
     setMagnetMode,
     getMagnetMode,
     cancelDrawing,
+    setTradeMarkers,
     setSelectedDrawing,
     onDrawingHover,
     setDrawingDefaults,

package/dist/index.d.cts

@@ -79,6 +79,21 @@ interface DrawingObjectOptions {
 declare const POSITION_DEFAULT_COLORS: string[];
 /** Default multi-color palette for fib-retracement levels. */
 declare const FIB_DEFAULT_PALETTE: string[];
+/** A trade execution marker (arrow + label) drawn on the candle of its time. */
+interface TradeMarkerOptions {
+    id?: string;
+    /** Execution time as epoch ms or ISO string; resolved to the bar it falls on. */
+    time: number | string;
+    price: number;
+    side: "buy" | "sell";
+    qty?: number;
+    /** Override label text (defaults to `${qty} @ ${price}`). */
+    text?: string;
+    /** Arrow color (defaults: buy #2962ff, sell #f23645). */
+    color?: string;
+    /** Label text color (default #d1d4dc). */
+    textColor?: string;
+}
 interface DrawingSelectEvent {
     drawing: DrawingObjectOptions;
     target: "line" | "handle";
@@ -433,6 +448,7 @@ interface ChartInstance {
     setMagnetMode: (mode: "none" | "weak" | "strong") => void;
     getMagnetMode: () => "none" | "weak" | "strong";
     cancelDrawing: () => boolean;
+    setTradeMarkers: (markers: TradeMarkerOptions[]) => void;
     onDrawingHover: (handler: ((event: DrawingHoverEvent) => void) | null) => void;
     setDrawingDefaults: (tool: DrawingToolType, defaults: DrawingDefaults | null) => void;
     setSelectedDrawing: (id: string | null) => void;
@@ -471,4 +487,4 @@ interface ViewportState {
 }
 declare function createChart(element: HTMLElement, options?: ChartOptions): ChartInstance;
 
-export { type AxisOptions, type BuiltInIndicatorInfo, type ChartClickEvent, type ChartInstance, type ChartOptions, type CrosshairMoveEvent, type CrosshairOptions, type CrosshairPriceActionEvent, type DashPatternOptions, type DrawingDefaults, type DrawingHoverEvent, type DrawingObjectOptions, type DrawingPoint, type DrawingSelectEvent, type DrawingToolType, FIB_DEFAULT_PALETTE, type GridOptions, type IndicatorInstanceOptions, type IndicatorPane, type IndicatorPaneAxisOptions, type IndicatorPaneGuideLine, type IndicatorPaneRenderInfo, type IndicatorPaneValue, type IndicatorPaneValueLabel, type IndicatorPlugin, type IndicatorRenderContext, type LabelsOptions, type OhlcDataPoint, type OrderActionButton, type OrderActionEvent, type OrderLineOptions, POSITION_DEFAULT_COLORS, type PriceLineOptions, type TickerLineOptions, type ViewportState, type WatermarkOptions, createChart };
+export { type AxisOptions, type BuiltInIndicatorInfo, type ChartClickEvent, type ChartInstance, type ChartOptions, type CrosshairMoveEvent, type CrosshairOptions, type CrosshairPriceActionEvent, type DashPatternOptions, type DrawingDefaults, type DrawingHoverEvent, type DrawingObjectOptions, type DrawingPoint, type DrawingSelectEvent, type DrawingToolType, FIB_DEFAULT_PALETTE, type GridOptions, type IndicatorInstanceOptions, type IndicatorPane, type IndicatorPaneAxisOptions, type IndicatorPaneGuideLine, type IndicatorPaneRenderInfo, type IndicatorPaneValue, type IndicatorPaneValueLabel, type IndicatorPlugin, type IndicatorRenderContext, type LabelsOptions, type OhlcDataPoint, type OrderActionButton, type OrderActionEvent, type OrderLineOptions, POSITION_DEFAULT_COLORS, type PriceLineOptions, type TickerLineOptions, type TradeMarkerOptions, type ViewportState, type WatermarkOptions, createChart };

package/dist/index.d.ts

@@ -79,6 +79,21 @@ interface DrawingObjectOptions {
 declare const POSITION_DEFAULT_COLORS: string[];
 /** Default multi-color palette for fib-retracement levels. */
 declare const FIB_DEFAULT_PALETTE: string[];
+/** A trade execution marker (arrow + label) drawn on the candle of its time. */
+interface TradeMarkerOptions {
+    id?: string;
+    /** Execution time as epoch ms or ISO string; resolved to the bar it falls on. */
+    time: number | string;
+    price: number;
+    side: "buy" | "sell";
+    qty?: number;
+    /** Override label text (defaults to `${qty} @ ${price}`). */
+    text?: string;
+    /** Arrow color (defaults: buy #2962ff, sell #f23645). */
+    color?: string;
+    /** Label text color (default #d1d4dc). */
+    textColor?: string;
+}
 interface DrawingSelectEvent {
     drawing: DrawingObjectOptions;
     target: "line" | "handle";
@@ -433,6 +448,7 @@ interface ChartInstance {
     setMagnetMode: (mode: "none" | "weak" | "strong") => void;
     getMagnetMode: () => "none" | "weak" | "strong";
     cancelDrawing: () => boolean;
+    setTradeMarkers: (markers: TradeMarkerOptions[]) => void;
     onDrawingHover: (handler: ((event: DrawingHoverEvent) => void) | null) => void;
     setDrawingDefaults: (tool: DrawingToolType, defaults: DrawingDefaults | null) => void;
     setSelectedDrawing: (id: string | null) => void;
@@ -471,4 +487,4 @@ interface ViewportState {
 }
 declare function createChart(element: HTMLElement, options?: ChartOptions): ChartInstance;
 
-export { type AxisOptions, type BuiltInIndicatorInfo, type ChartClickEvent, type ChartInstance, type ChartOptions, type CrosshairMoveEvent, type CrosshairOptions, type CrosshairPriceActionEvent, type DashPatternOptions, type DrawingDefaults, type DrawingHoverEvent, type DrawingObjectOptions, type DrawingPoint, type DrawingSelectEvent, type DrawingToolType, FIB_DEFAULT_PALETTE, type GridOptions, type IndicatorInstanceOptions, type IndicatorPane, type IndicatorPaneAxisOptions, type IndicatorPaneGuideLine, type IndicatorPaneRenderInfo, type IndicatorPaneValue, type IndicatorPaneValueLabel, type IndicatorPlugin, type IndicatorRenderContext, type LabelsOptions, type OhlcDataPoint, type OrderActionButton, type OrderActionEvent, type OrderLineOptions, POSITION_DEFAULT_COLORS, type PriceLineOptions, type TickerLineOptions, type ViewportState, type WatermarkOptions, createChart };
+export { type AxisOptions, type BuiltInIndicatorInfo, type ChartClickEvent, type ChartInstance, type ChartOptions, type CrosshairMoveEvent, type CrosshairOptions, type CrosshairPriceActionEvent, type DashPatternOptions, type DrawingDefaults, type DrawingHoverEvent, type DrawingObjectOptions, type DrawingPoint, type DrawingSelectEvent, type DrawingToolType, FIB_DEFAULT_PALETTE, type GridOptions, type IndicatorInstanceOptions, type IndicatorPane, type IndicatorPaneAxisOptions, type IndicatorPaneGuideLine, type IndicatorPaneRenderInfo, type IndicatorPaneValue, type IndicatorPaneValueLabel, type IndicatorPlugin, type IndicatorRenderContext, type LabelsOptions, type OhlcDataPoint, type OrderActionButton, type OrderActionEvent, type OrderLineOptions, POSITION_DEFAULT_COLORS, type PriceLineOptions, type TickerLineOptions, type TradeMarkerOptions, type ViewportState, type WatermarkOptions, createChart };

package/dist/index.js

@@ -965,6 +965,7 @@ function createChart(element, options = {}) {
     fontSize: drawing.fontSize,
     ...drawing.label === void 0 ? {} : { label: drawing.label }
   });
+  let tradeMarkers = [];
   let indicators = (options.indicators ?? []).map((indicator) => normalizeIndicatorState(indicator));
   let drawings = (options.drawings ?? []).map((drawing) => normalizeDrawingState(drawing));
   let activeDrawingTool = null;
@@ -2871,6 +2872,73 @@ function createChart(element, options = {}) {
     if (draftDrawing) {
       drawDrawing(draftDrawing, true);
     }
+    if (tradeMarkers.length > 0 && data.length > 0) {
+      const visibleStart = Math.floor(xStart) - 1;
+      const visibleEnd = Math.ceil(xStart + xSpan) + 1;
+      const indexForTime = (ms) => {
+        let lo = 0;
+        let hi = data.length - 1;
+        if (ms < data[0].time.getTime()) return null;
+        if (ms >= data[hi].time.getTime()) return hi;
+        while (lo < hi) {
+          const mid = lo + hi + 1 >> 1;
+          if (data[mid].time.getTime() <= ms) lo = mid;
+          else hi = mid - 1;
+        }
+        return lo;
+      };
+      const prevFont = ctx.font;
+      const prevAlign = ctx.textAlign;
+      const prevBaseline = ctx.textBaseline;
+      ctx.font = `500 10px ${mergedOptions.fontFamily}`;
+      ctx.textAlign = "center";
+      ctx.textBaseline = "middle";
+      const arrowHalf = 5;
+      const arrowH = 8;
+      const gap = 5;
+      const labelOffset = arrowH + 8;
+      for (const marker of tradeMarkers) {
+        const ms = typeof marker.time === "number" ? marker.time : Date.parse(String(marker.time));
+        if (!Number.isFinite(ms)) continue;
+        const index = indexForTime(ms);
+        if (index === null || index < visibleStart || index > visibleEnd) continue;
+        const bar = data[index];
+        if (!bar) continue;
+        const x = chartLeft + (index + 0.5 - xStart) / xSpan * chartWidth;
+        if (x < chartLeft - 20 || x > chartRight + 20) continue;
+        const isBuy = marker.side === "buy";
+        const arrowColor = marker.color ?? (isBuy ? "#2962ff" : "#f23645");
+        const textColor = marker.textColor ?? "#d1d4dc";
+        const label = marker.text ?? `${marker.qty ?? ""}${marker.qty != null ? " @ " : ""}${formatPrice(marker.price)}`.trim();
+        ctx.save();
+        ctx.fillStyle = arrowColor;
+        if (isBuy) {
+          const tipY = yFromPrice(bar.l) + gap;
+          ctx.beginPath();
+          ctx.moveTo(x, tipY);
+          ctx.lineTo(x - arrowHalf, tipY + arrowH);
+          ctx.lineTo(x + arrowHalf, tipY + arrowH);
+          ctx.closePath();
+          ctx.fill();
+          ctx.fillStyle = textColor;
+          ctx.fillText(label, Math.round(x), Math.round(tipY + labelOffset));
+        } else {
+          const tipY = yFromPrice(bar.h) - gap;
+          ctx.beginPath();
+          ctx.moveTo(x, tipY);
+          ctx.lineTo(x - arrowHalf, tipY - arrowH);
+          ctx.lineTo(x + arrowHalf, tipY - arrowH);
+          ctx.closePath();
+          ctx.fill();
+          ctx.fillStyle = textColor;
+          ctx.fillText(label, Math.round(x), Math.round(tipY - labelOffset));
+        }
+        ctx.restore();
+      }
+      ctx.font = prevFont;
+      ctx.textAlign = prevAlign;
+      ctx.textBaseline = prevBaseline;
+    }
     const crosshair = { ...DEFAULT_CROSSHAIR_OPTIONS, ...mergedOptions.crosshair ?? {} };
     if (crosshair.visible && crosshairPoint) {
       const cx = clamp(crosshairPoint.x, chartLeft, chartRight);
@@ -5132,6 +5200,10 @@ function createChart(element, options = {}) {
     }
     return false;
   };
+  const setTradeMarkers = (markers) => {
+    tradeMarkers = Array.isArray(markers) ? markers.slice() : [];
+    draw();
+  };
   const setMagnetMode = (mode) => {
     magnetMode = mode;
   };
@@ -5252,6 +5324,7 @@ function createChart(element, options = {}) {
     setMagnetMode,
     getMagnetMode,
     cancelDrawing,
+    setTradeMarkers,
     setSelectedDrawing,
     onDrawingHover,
     setDrawingDefaults,

package/docs/API.md

@@ -484,6 +484,7 @@ Use `getDrawings()` / `setDrawings()` for persistence.
 - `setSelectedDrawing(id: string | null): void` (marks a drawing selected; only the selected/drafted drawing renders its handles, and position tools render their lines/labels only while selected)
 - `onDrawingDoubleClick(handler): void` (fires when a drawing is double-clicked; use it to open a settings dialog, e.g. for position tools)
 - `onDrawingEditText(handler): void` (fires when a `text`/`note` tool is placed or double-clicked; use it to show an inline text editor at `{x, y}` and write the result back via `updateDrawing(id, { label })`). `text`/`note` drawings store their content in `label` and size in `fontSize`.
+- `setTradeMarkers(markers: TradeMarkerOptions[]): void` — draw trade execution markers (arrow + `qty @ price` label) on the candle of each fill's `time`. Buy = arrow below the low pointing up; sell = arrow above the high pointing down. Each marker: `{ time (ms|ISO), price, side: "buy"|"sell", qty?, text?, color?, textColor? }` (defaults: buy `#2962ff`, sell `#f23645`, text `#d1d4dc`). Markers resolve to bars by time, so they persist across timeframe switches and scrolling. Pass `[]` to clear.
 - `cancelDrawing(): boolean` — abort an in-progress multi-click drawing (between the first click and the final point, e.g. a half-drawn trendline/ray/fib). Returns `true` if a draft was cancelled. Wire it to Escape.
 - `setMagnetMode(mode): void` / `getMagnetMode()` — magnet/snap for all drawing tools. `"none"` off, `"weak"` snaps to a candle's OHLC only when the cursor is near a value, `"strong"` always snaps to the nearest OHLC of the bar under the cursor. Holding Cmd/Ctrl while drawing/dragging forces strong snapping regardless of the mode.
 - `setActiveDrawingTool(tool: DrawingToolType | null): void` (`DrawingToolType` = `"horizontal-line" | "vertical-line" | "trendline" | "ray" | "fib-retracement"`)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hyperprop-charting-library",
-  "version": "0.1.100",
+  "version": "0.1.102",
   "description": "Lightweight TypeScript charting core",
   "type": "module",
   "main": "./dist/hyperprop-charting-library.cjs",