hyperprop-charting-library 0.1.79 → 0.1.81

package/dist/hyperprop-charting-library.cjs

@@ -961,6 +961,13 @@ function createChart(element, options = {}) {
     style: drawing.style ?? "dotted",
     width: Math.max(1, Number(drawing.width) || 1),
     locked: drawing.locked ?? false,
+    accountSize: Number(drawing.accountSize) || 0,
+    lotSize: Number(drawing.lotSize) || 1,
+    risk: Number(drawing.risk) || 0,
+    riskMode: drawing.riskMode === "amount" ? "amount" : "percent",
+    leverage: Number(drawing.leverage) || 1,
+    pointValue: Number(drawing.pointValue) || 1,
+    qtyPrecision: Number.isFinite(drawing.qtyPrecision) ? Math.max(0, Math.floor(Number(drawing.qtyPrecision))) : 0,
     ...drawing.label === void 0 ? {} : { label: drawing.label }
   });
   const serializeDrawing = (drawing) => ({
@@ -973,6 +980,13 @@ function createChart(element, options = {}) {
     style: drawing.style,
     width: drawing.width,
     locked: drawing.locked,
+    accountSize: drawing.accountSize,
+    lotSize: drawing.lotSize,
+    risk: drawing.risk,
+    riskMode: drawing.riskMode,
+    leverage: drawing.leverage,
+    pointValue: drawing.pointValue,
+    qtyPrecision: drawing.qtyPrecision,
     ...drawing.label === void 0 ? {} : { label: drawing.label }
   });
   let indicators = (options.indicators ?? []).map((indicator) => normalizeIndicatorState(indicator));
@@ -982,6 +996,7 @@ function createChart(element, options = {}) {
   let drawingDragState = null;
   let drawingsChangeHandler = null;
   let drawingSelectHandler = null;
+  let drawingDoubleClickHandler = null;
   let drawingHoverHandler = null;
   let lastHoveredDrawingId = null;
   let selectedDrawingId = null;
@@ -2429,20 +2444,6 @@ function createChart(element, options = {}) {
           ctx.fillStyle = lossFill;
           ctx.fillRect(boxX0, Math.min(entryY, stopY), boxW, Math.abs(stopY - entryY));
           ctx.restore();
-          if (data.length > 0) {
-            const nowX = xFromDrawingPoint({ index: data.length - 1, price: 0 });
-            const darkRight = clamp(nowX, boxX0, boxX1);
-            if (darkRight - boxX0 > 0.5) {
-              const darkW = darkRight - boxX0;
-              ctx.save();
-              ctx.globalAlpha = draft ? 0.5 : 1;
-              ctx.fillStyle = hexToRgba(profitColor, 0.18);
-              ctx.fillRect(boxX0, Math.min(entryY, targetY), darkW, Math.abs(targetY - entryY));
-              ctx.fillStyle = hexToRgba(lossColor, 0.18);
-              ctx.fillRect(boxX0, Math.min(entryY, stopY), darkW, Math.abs(stopY - entryY));
-              ctx.restore();
-            }
-          }
           if (isSelected) {
             ctx.save();
             ctx.setLineDash([]);
@@ -2477,6 +2478,14 @@ function createChart(element, options = {}) {
             const stopDist = Math.abs(entry.price - stop.price);
             const rr = stopDist > 0 ? targetDist / stopDist : 0;
             const cx = (boxX0 + boxX1) / 2;
+            const effectivePointValue = (drawing.pointValue > 0 ? drawing.pointValue : 1) * (drawing.lotSize > 0 ? drawing.lotSize : 1);
+            const riskAmount = drawing.riskMode === "amount" ? drawing.risk : drawing.accountSize * (drawing.risk / 100);
+            const qtyRaw = riskAmount > 0 && stopDist > 0 ? riskAmount / (stopDist * effectivePointValue) : 0;
+            const hasMoney = qtyRaw > 0 && Number.isFinite(qtyRaw);
+            const qtyText = hasMoney ? qtyRaw.toFixed(Math.max(0, drawing.qtyPrecision)) : "";
+            const formatAmount = (value) => Math.abs(value) >= 1e3 ? value.toFixed(0) : value.toFixed(2);
+            const targetAmountText = hasMoney ? `, Amount: ${formatAmount(qtyRaw * targetDist * effectivePointValue)}` : "";
+            const stopAmountText = hasMoney ? `, Amount: ${formatAmount(qtyRaw * stopDist * effectivePointValue)}` : "";
             const drawPositionPill = (text, centerX, centerY, bg) => {
               const prevFont = ctx.font;
               ctx.font = `500 11px ${mergedOptions.fontFamily}`;
@@ -2494,9 +2503,14 @@ function createChart(element, options = {}) {
               ctx.fillText(text, centerX, pillY + pillH / 2);
               ctx.font = prevFont;
             };
-            drawPositionPill(`Target ${formatPrice(target.price)} (${pctOf(target.price)})${ticksOf(target.price)}`, cx, targetY, profitLine);
-            drawPositionPill(`Stop ${formatPrice(stop.price)} (${pctOf(stop.price)})${ticksOf(stop.price)}`, cx, stopY, lossLine);
-            drawPositionPill(`Entry ${formatPrice(entry.price)}  RR ${rr.toFixed(2)}`, cx, entryY, hexToRgba(drawing.color, 0.92));
+            drawPositionPill(`Target ${formatPrice(target.price)} (${pctOf(target.price)})${ticksOf(target.price)}${targetAmountText}`, cx, targetY, profitLine);
+            drawPositionPill(`Stop ${formatPrice(stop.price)} (${pctOf(stop.price)})${ticksOf(stop.price)}${stopAmountText}`, cx, stopY, lossLine);
+            drawPositionPill(
+              hasMoney ? `Entry ${formatPrice(entry.price)}  Qty ${qtyText}  RR ${rr.toFixed(2)}` : `Entry ${formatPrice(entry.price)}  RR ${rr.toFixed(2)}`,
+              cx,
+              entryY,
+              hexToRgba(drawing.color, 0.92)
+            );
             if (drawing.label) {
               drawDrawingLabel(drawing.label, cx, Math.min(targetY, stopY) - 4, drawing.color);
             }
@@ -3959,7 +3973,14 @@ function createChart(element, options = {}) {
           color: defaults.color ?? (isLong ? "#26a69a" : "#ef5350"),
           colors: defaults.colors ?? POSITION_DEFAULT_COLORS,
           style: defaults.style ?? "solid",
-          width: defaults.width ?? 1
+          width: defaults.width ?? 1,
+          ...defaults.accountSize === void 0 ? {} : { accountSize: defaults.accountSize },
+          ...defaults.lotSize === void 0 ? {} : { lotSize: defaults.lotSize },
+          ...defaults.risk === void 0 ? {} : { risk: defaults.risk },
+          ...defaults.riskMode === void 0 ? {} : { riskMode: defaults.riskMode },
+          ...defaults.leverage === void 0 ? {} : { leverage: defaults.leverage },
+          ...defaults.pointValue === void 0 ? {} : { pointValue: defaults.pointValue },
+          ...defaults.qtyPrecision === void 0 ? {} : { qtyPrecision: defaults.qtyPrecision }
         })
       );
       emitDrawingsChange();
@@ -4529,6 +4550,20 @@ function createChart(element, options = {}) {
     if (region === "outside") {
       return;
     }
+    if (region === "plot" && !activeDrawingTool) {
+      const drawingHit = getDrawingHit(point.x, point.y);
+      if (drawingHit) {
+        selectedDrawingId = drawingHit.drawing.id;
+        drawingDoubleClickHandler?.({
+          drawing: serializeDrawing(drawingHit.drawing),
+          target: drawingHit.target,
+          ...drawingHit.pointIndex === void 0 ? {} : { pointIndex: drawingHit.pointIndex },
+          x: point.x,
+          y: point.y
+        });
+        return;
+      }
+    }
     if (doubleClickAction === "placeLimitOrder") {
       if (region !== "plot") {
         return;
@@ -4839,6 +4874,9 @@ function createChart(element, options = {}) {
   const onDrawingSelect = (handler) => {
     drawingSelectHandler = handler;
   };
+  const onDrawingDoubleClick = (handler) => {
+    drawingDoubleClickHandler = handler;
+  };
   const onDrawingHover = (handler) => {
     drawingHoverHandler = handler;
   };
@@ -4896,6 +4934,7 @@ function createChart(element, options = {}) {
     clearDrawings,
     onDrawingsChange,
     onDrawingSelect,
+    onDrawingDoubleClick,
     setSelectedDrawing,
     onDrawingHover,
     setDrawingDefaults,

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

@@ -66,6 +66,13 @@ interface DrawingObjectOptions {
     width?: number;
     label?: string;
     locked?: boolean;
+    accountSize?: number;
+    lotSize?: number;
+    risk?: number;
+    riskMode?: "percent" | "amount";
+    leverage?: number;
+    pointValue?: number;
+    qtyPrecision?: number;
 }
 /** Default colors for position tools: [profit, loss, label text]. */
 declare const POSITION_DEFAULT_COLORS: string[];
@@ -84,7 +91,7 @@ interface DrawingHoverEvent {
     x: number;
     y: number;
 }
-type DrawingDefaults = Partial<Pick<DrawingObjectOptions, "color" | "colors" | "style" | "width">>;
+type DrawingDefaults = Partial<Pick<DrawingObjectOptions, "color" | "colors" | "style" | "width" | "accountSize" | "lotSize" | "risk" | "riskMode" | "leverage" | "pointValue" | "qtyPrecision">>;
 interface IndicatorInstanceOptions<TInputs extends Record<string, unknown> = Record<string, unknown>> {
     id?: string;
     type: string;
@@ -420,6 +427,7 @@ interface ChartInstance {
     clearDrawings: () => void;
     onDrawingsChange: (handler: ((drawings: DrawingObjectOptions[]) => void) | null) => void;
     onDrawingSelect: (handler: ((event: DrawingSelectEvent) => void) | null) => void;
+    onDrawingDoubleClick: (handler: ((event: DrawingSelectEvent) => void) | null) => void;
     onDrawingHover: (handler: ((event: DrawingHoverEvent) => void) | null) => void;
     setDrawingDefaults: (tool: DrawingToolType, defaults: DrawingDefaults | null) => void;
     setSelectedDrawing: (id: string | null) => void;

package/dist/hyperprop-charting-library.js

@@ -935,6 +935,13 @@ function createChart(element, options = {}) {
     style: drawing.style ?? "dotted",
     width: Math.max(1, Number(drawing.width) || 1),
     locked: drawing.locked ?? false,
+    accountSize: Number(drawing.accountSize) || 0,
+    lotSize: Number(drawing.lotSize) || 1,
+    risk: Number(drawing.risk) || 0,
+    riskMode: drawing.riskMode === "amount" ? "amount" : "percent",
+    leverage: Number(drawing.leverage) || 1,
+    pointValue: Number(drawing.pointValue) || 1,
+    qtyPrecision: Number.isFinite(drawing.qtyPrecision) ? Math.max(0, Math.floor(Number(drawing.qtyPrecision))) : 0,
     ...drawing.label === void 0 ? {} : { label: drawing.label }
   });
   const serializeDrawing = (drawing) => ({
@@ -947,6 +954,13 @@ function createChart(element, options = {}) {
     style: drawing.style,
     width: drawing.width,
     locked: drawing.locked,
+    accountSize: drawing.accountSize,
+    lotSize: drawing.lotSize,
+    risk: drawing.risk,
+    riskMode: drawing.riskMode,
+    leverage: drawing.leverage,
+    pointValue: drawing.pointValue,
+    qtyPrecision: drawing.qtyPrecision,
     ...drawing.label === void 0 ? {} : { label: drawing.label }
   });
   let indicators = (options.indicators ?? []).map((indicator) => normalizeIndicatorState(indicator));
@@ -956,6 +970,7 @@ function createChart(element, options = {}) {
   let drawingDragState = null;
   let drawingsChangeHandler = null;
   let drawingSelectHandler = null;
+  let drawingDoubleClickHandler = null;
   let drawingHoverHandler = null;
   let lastHoveredDrawingId = null;
   let selectedDrawingId = null;
@@ -2403,20 +2418,6 @@ function createChart(element, options = {}) {
           ctx.fillStyle = lossFill;
           ctx.fillRect(boxX0, Math.min(entryY, stopY), boxW, Math.abs(stopY - entryY));
           ctx.restore();
-          if (data.length > 0) {
-            const nowX = xFromDrawingPoint({ index: data.length - 1, price: 0 });
-            const darkRight = clamp(nowX, boxX0, boxX1);
-            if (darkRight - boxX0 > 0.5) {
-              const darkW = darkRight - boxX0;
-              ctx.save();
-              ctx.globalAlpha = draft ? 0.5 : 1;
-              ctx.fillStyle = hexToRgba(profitColor, 0.18);
-              ctx.fillRect(boxX0, Math.min(entryY, targetY), darkW, Math.abs(targetY - entryY));
-              ctx.fillStyle = hexToRgba(lossColor, 0.18);
-              ctx.fillRect(boxX0, Math.min(entryY, stopY), darkW, Math.abs(stopY - entryY));
-              ctx.restore();
-            }
-          }
           if (isSelected) {
             ctx.save();
             ctx.setLineDash([]);
@@ -2451,6 +2452,14 @@ function createChart(element, options = {}) {
             const stopDist = Math.abs(entry.price - stop.price);
             const rr = stopDist > 0 ? targetDist / stopDist : 0;
             const cx = (boxX0 + boxX1) / 2;
+            const effectivePointValue = (drawing.pointValue > 0 ? drawing.pointValue : 1) * (drawing.lotSize > 0 ? drawing.lotSize : 1);
+            const riskAmount = drawing.riskMode === "amount" ? drawing.risk : drawing.accountSize * (drawing.risk / 100);
+            const qtyRaw = riskAmount > 0 && stopDist > 0 ? riskAmount / (stopDist * effectivePointValue) : 0;
+            const hasMoney = qtyRaw > 0 && Number.isFinite(qtyRaw);
+            const qtyText = hasMoney ? qtyRaw.toFixed(Math.max(0, drawing.qtyPrecision)) : "";
+            const formatAmount = (value) => Math.abs(value) >= 1e3 ? value.toFixed(0) : value.toFixed(2);
+            const targetAmountText = hasMoney ? `, Amount: ${formatAmount(qtyRaw * targetDist * effectivePointValue)}` : "";
+            const stopAmountText = hasMoney ? `, Amount: ${formatAmount(qtyRaw * stopDist * effectivePointValue)}` : "";
             const drawPositionPill = (text, centerX, centerY, bg) => {
               const prevFont = ctx.font;
               ctx.font = `500 11px ${mergedOptions.fontFamily}`;
@@ -2468,9 +2477,14 @@ function createChart(element, options = {}) {
               ctx.fillText(text, centerX, pillY + pillH / 2);
               ctx.font = prevFont;
             };
-            drawPositionPill(`Target ${formatPrice(target.price)} (${pctOf(target.price)})${ticksOf(target.price)}`, cx, targetY, profitLine);
-            drawPositionPill(`Stop ${formatPrice(stop.price)} (${pctOf(stop.price)})${ticksOf(stop.price)}`, cx, stopY, lossLine);
-            drawPositionPill(`Entry ${formatPrice(entry.price)}  RR ${rr.toFixed(2)}`, cx, entryY, hexToRgba(drawing.color, 0.92));
+            drawPositionPill(`Target ${formatPrice(target.price)} (${pctOf(target.price)})${ticksOf(target.price)}${targetAmountText}`, cx, targetY, profitLine);
+            drawPositionPill(`Stop ${formatPrice(stop.price)} (${pctOf(stop.price)})${ticksOf(stop.price)}${stopAmountText}`, cx, stopY, lossLine);
+            drawPositionPill(
+              hasMoney ? `Entry ${formatPrice(entry.price)}  Qty ${qtyText}  RR ${rr.toFixed(2)}` : `Entry ${formatPrice(entry.price)}  RR ${rr.toFixed(2)}`,
+              cx,
+              entryY,
+              hexToRgba(drawing.color, 0.92)
+            );
             if (drawing.label) {
               drawDrawingLabel(drawing.label, cx, Math.min(targetY, stopY) - 4, drawing.color);
             }
@@ -3933,7 +3947,14 @@ function createChart(element, options = {}) {
           color: defaults.color ?? (isLong ? "#26a69a" : "#ef5350"),
           colors: defaults.colors ?? POSITION_DEFAULT_COLORS,
           style: defaults.style ?? "solid",
-          width: defaults.width ?? 1
+          width: defaults.width ?? 1,
+          ...defaults.accountSize === void 0 ? {} : { accountSize: defaults.accountSize },
+          ...defaults.lotSize === void 0 ? {} : { lotSize: defaults.lotSize },
+          ...defaults.risk === void 0 ? {} : { risk: defaults.risk },
+          ...defaults.riskMode === void 0 ? {} : { riskMode: defaults.riskMode },
+          ...defaults.leverage === void 0 ? {} : { leverage: defaults.leverage },
+          ...defaults.pointValue === void 0 ? {} : { pointValue: defaults.pointValue },
+          ...defaults.qtyPrecision === void 0 ? {} : { qtyPrecision: defaults.qtyPrecision }
         })
       );
       emitDrawingsChange();
@@ -4503,6 +4524,20 @@ function createChart(element, options = {}) {
     if (region === "outside") {
       return;
     }
+    if (region === "plot" && !activeDrawingTool) {
+      const drawingHit = getDrawingHit(point.x, point.y);
+      if (drawingHit) {
+        selectedDrawingId = drawingHit.drawing.id;
+        drawingDoubleClickHandler?.({
+          drawing: serializeDrawing(drawingHit.drawing),
+          target: drawingHit.target,
+          ...drawingHit.pointIndex === void 0 ? {} : { pointIndex: drawingHit.pointIndex },
+          x: point.x,
+          y: point.y
+        });
+        return;
+      }
+    }
     if (doubleClickAction === "placeLimitOrder") {
       if (region !== "plot") {
         return;
@@ -4813,6 +4848,9 @@ function createChart(element, options = {}) {
   const onDrawingSelect = (handler) => {
     drawingSelectHandler = handler;
   };
+  const onDrawingDoubleClick = (handler) => {
+    drawingDoubleClickHandler = handler;
+  };
   const onDrawingHover = (handler) => {
     drawingHoverHandler = handler;
   };
@@ -4870,6 +4908,7 @@ function createChart(element, options = {}) {
     clearDrawings,
     onDrawingsChange,
     onDrawingSelect,
+    onDrawingDoubleClick,
     setSelectedDrawing,
     onDrawingHover,
     setDrawingDefaults,

package/dist/index.cjs

@@ -961,6 +961,13 @@ function createChart(element, options = {}) {
     style: drawing.style ?? "dotted",
     width: Math.max(1, Number(drawing.width) || 1),
     locked: drawing.locked ?? false,
+    accountSize: Number(drawing.accountSize) || 0,
+    lotSize: Number(drawing.lotSize) || 1,
+    risk: Number(drawing.risk) || 0,
+    riskMode: drawing.riskMode === "amount" ? "amount" : "percent",
+    leverage: Number(drawing.leverage) || 1,
+    pointValue: Number(drawing.pointValue) || 1,
+    qtyPrecision: Number.isFinite(drawing.qtyPrecision) ? Math.max(0, Math.floor(Number(drawing.qtyPrecision))) : 0,
     ...drawing.label === void 0 ? {} : { label: drawing.label }
   });
   const serializeDrawing = (drawing) => ({
@@ -973,6 +980,13 @@ function createChart(element, options = {}) {
     style: drawing.style,
     width: drawing.width,
     locked: drawing.locked,
+    accountSize: drawing.accountSize,
+    lotSize: drawing.lotSize,
+    risk: drawing.risk,
+    riskMode: drawing.riskMode,
+    leverage: drawing.leverage,
+    pointValue: drawing.pointValue,
+    qtyPrecision: drawing.qtyPrecision,
     ...drawing.label === void 0 ? {} : { label: drawing.label }
   });
   let indicators = (options.indicators ?? []).map((indicator) => normalizeIndicatorState(indicator));
@@ -982,6 +996,7 @@ function createChart(element, options = {}) {
   let drawingDragState = null;
   let drawingsChangeHandler = null;
   let drawingSelectHandler = null;
+  let drawingDoubleClickHandler = null;
   let drawingHoverHandler = null;
   let lastHoveredDrawingId = null;
   let selectedDrawingId = null;
@@ -2429,20 +2444,6 @@ function createChart(element, options = {}) {
           ctx.fillStyle = lossFill;
           ctx.fillRect(boxX0, Math.min(entryY, stopY), boxW, Math.abs(stopY - entryY));
           ctx.restore();
-          if (data.length > 0) {
-            const nowX = xFromDrawingPoint({ index: data.length - 1, price: 0 });
-            const darkRight = clamp(nowX, boxX0, boxX1);
-            if (darkRight - boxX0 > 0.5) {
-              const darkW = darkRight - boxX0;
-              ctx.save();
-              ctx.globalAlpha = draft ? 0.5 : 1;
-              ctx.fillStyle = hexToRgba(profitColor, 0.18);
-              ctx.fillRect(boxX0, Math.min(entryY, targetY), darkW, Math.abs(targetY - entryY));
-              ctx.fillStyle = hexToRgba(lossColor, 0.18);
-              ctx.fillRect(boxX0, Math.min(entryY, stopY), darkW, Math.abs(stopY - entryY));
-              ctx.restore();
-            }
-          }
           if (isSelected) {
             ctx.save();
             ctx.setLineDash([]);
@@ -2477,6 +2478,14 @@ function createChart(element, options = {}) {
             const stopDist = Math.abs(entry.price - stop.price);
             const rr = stopDist > 0 ? targetDist / stopDist : 0;
             const cx = (boxX0 + boxX1) / 2;
+            const effectivePointValue = (drawing.pointValue > 0 ? drawing.pointValue : 1) * (drawing.lotSize > 0 ? drawing.lotSize : 1);
+            const riskAmount = drawing.riskMode === "amount" ? drawing.risk : drawing.accountSize * (drawing.risk / 100);
+            const qtyRaw = riskAmount > 0 && stopDist > 0 ? riskAmount / (stopDist * effectivePointValue) : 0;
+            const hasMoney = qtyRaw > 0 && Number.isFinite(qtyRaw);
+            const qtyText = hasMoney ? qtyRaw.toFixed(Math.max(0, drawing.qtyPrecision)) : "";
+            const formatAmount = (value) => Math.abs(value) >= 1e3 ? value.toFixed(0) : value.toFixed(2);
+            const targetAmountText = hasMoney ? `, Amount: ${formatAmount(qtyRaw * targetDist * effectivePointValue)}` : "";
+            const stopAmountText = hasMoney ? `, Amount: ${formatAmount(qtyRaw * stopDist * effectivePointValue)}` : "";
             const drawPositionPill = (text, centerX, centerY, bg) => {
               const prevFont = ctx.font;
               ctx.font = `500 11px ${mergedOptions.fontFamily}`;
@@ -2494,9 +2503,14 @@ function createChart(element, options = {}) {
               ctx.fillText(text, centerX, pillY + pillH / 2);
               ctx.font = prevFont;
             };
-            drawPositionPill(`Target ${formatPrice(target.price)} (${pctOf(target.price)})${ticksOf(target.price)}`, cx, targetY, profitLine);
-            drawPositionPill(`Stop ${formatPrice(stop.price)} (${pctOf(stop.price)})${ticksOf(stop.price)}`, cx, stopY, lossLine);
-            drawPositionPill(`Entry ${formatPrice(entry.price)}  RR ${rr.toFixed(2)}`, cx, entryY, hexToRgba(drawing.color, 0.92));
+            drawPositionPill(`Target ${formatPrice(target.price)} (${pctOf(target.price)})${ticksOf(target.price)}${targetAmountText}`, cx, targetY, profitLine);
+            drawPositionPill(`Stop ${formatPrice(stop.price)} (${pctOf(stop.price)})${ticksOf(stop.price)}${stopAmountText}`, cx, stopY, lossLine);
+            drawPositionPill(
+              hasMoney ? `Entry ${formatPrice(entry.price)}  Qty ${qtyText}  RR ${rr.toFixed(2)}` : `Entry ${formatPrice(entry.price)}  RR ${rr.toFixed(2)}`,
+              cx,
+              entryY,
+              hexToRgba(drawing.color, 0.92)
+            );
             if (drawing.label) {
               drawDrawingLabel(drawing.label, cx, Math.min(targetY, stopY) - 4, drawing.color);
             }
@@ -3959,7 +3973,14 @@ function createChart(element, options = {}) {
           color: defaults.color ?? (isLong ? "#26a69a" : "#ef5350"),
           colors: defaults.colors ?? POSITION_DEFAULT_COLORS,
           style: defaults.style ?? "solid",
-          width: defaults.width ?? 1
+          width: defaults.width ?? 1,
+          ...defaults.accountSize === void 0 ? {} : { accountSize: defaults.accountSize },
+          ...defaults.lotSize === void 0 ? {} : { lotSize: defaults.lotSize },
+          ...defaults.risk === void 0 ? {} : { risk: defaults.risk },
+          ...defaults.riskMode === void 0 ? {} : { riskMode: defaults.riskMode },
+          ...defaults.leverage === void 0 ? {} : { leverage: defaults.leverage },
+          ...defaults.pointValue === void 0 ? {} : { pointValue: defaults.pointValue },
+          ...defaults.qtyPrecision === void 0 ? {} : { qtyPrecision: defaults.qtyPrecision }
         })
       );
       emitDrawingsChange();
@@ -4529,6 +4550,20 @@ function createChart(element, options = {}) {
     if (region === "outside") {
       return;
     }
+    if (region === "plot" && !activeDrawingTool) {
+      const drawingHit = getDrawingHit(point.x, point.y);
+      if (drawingHit) {
+        selectedDrawingId = drawingHit.drawing.id;
+        drawingDoubleClickHandler?.({
+          drawing: serializeDrawing(drawingHit.drawing),
+          target: drawingHit.target,
+          ...drawingHit.pointIndex === void 0 ? {} : { pointIndex: drawingHit.pointIndex },
+          x: point.x,
+          y: point.y
+        });
+        return;
+      }
+    }
     if (doubleClickAction === "placeLimitOrder") {
       if (region !== "plot") {
         return;
@@ -4839,6 +4874,9 @@ function createChart(element, options = {}) {
   const onDrawingSelect = (handler) => {
     drawingSelectHandler = handler;
   };
+  const onDrawingDoubleClick = (handler) => {
+    drawingDoubleClickHandler = handler;
+  };
   const onDrawingHover = (handler) => {
     drawingHoverHandler = handler;
   };
@@ -4896,6 +4934,7 @@ function createChart(element, options = {}) {
     clearDrawings,
     onDrawingsChange,
     onDrawingSelect,
+    onDrawingDoubleClick,
     setSelectedDrawing,
     onDrawingHover,
     setDrawingDefaults,

package/dist/index.d.cts

@@ -66,6 +66,13 @@ interface DrawingObjectOptions {
     width?: number;
     label?: string;
     locked?: boolean;
+    accountSize?: number;
+    lotSize?: number;
+    risk?: number;
+    riskMode?: "percent" | "amount";
+    leverage?: number;
+    pointValue?: number;
+    qtyPrecision?: number;
 }
 /** Default colors for position tools: [profit, loss, label text]. */
 declare const POSITION_DEFAULT_COLORS: string[];
@@ -84,7 +91,7 @@ interface DrawingHoverEvent {
     x: number;
     y: number;
 }
-type DrawingDefaults = Partial<Pick<DrawingObjectOptions, "color" | "colors" | "style" | "width">>;
+type DrawingDefaults = Partial<Pick<DrawingObjectOptions, "color" | "colors" | "style" | "width" | "accountSize" | "lotSize" | "risk" | "riskMode" | "leverage" | "pointValue" | "qtyPrecision">>;
 interface IndicatorInstanceOptions<TInputs extends Record<string, unknown> = Record<string, unknown>> {
     id?: string;
     type: string;
@@ -420,6 +427,7 @@ interface ChartInstance {
     clearDrawings: () => void;
     onDrawingsChange: (handler: ((drawings: DrawingObjectOptions[]) => void) | null) => void;
     onDrawingSelect: (handler: ((event: DrawingSelectEvent) => void) | null) => void;
+    onDrawingDoubleClick: (handler: ((event: DrawingSelectEvent) => void) | null) => void;
     onDrawingHover: (handler: ((event: DrawingHoverEvent) => void) | null) => void;
     setDrawingDefaults: (tool: DrawingToolType, defaults: DrawingDefaults | null) => void;
     setSelectedDrawing: (id: string | null) => void;

package/dist/index.d.ts

@@ -66,6 +66,13 @@ interface DrawingObjectOptions {
     width?: number;
     label?: string;
     locked?: boolean;
+    accountSize?: number;
+    lotSize?: number;
+    risk?: number;
+    riskMode?: "percent" | "amount";
+    leverage?: number;
+    pointValue?: number;
+    qtyPrecision?: number;
 }
 /** Default colors for position tools: [profit, loss, label text]. */
 declare const POSITION_DEFAULT_COLORS: string[];
@@ -84,7 +91,7 @@ interface DrawingHoverEvent {
     x: number;
     y: number;
 }
-type DrawingDefaults = Partial<Pick<DrawingObjectOptions, "color" | "colors" | "style" | "width">>;
+type DrawingDefaults = Partial<Pick<DrawingObjectOptions, "color" | "colors" | "style" | "width" | "accountSize" | "lotSize" | "risk" | "riskMode" | "leverage" | "pointValue" | "qtyPrecision">>;
 interface IndicatorInstanceOptions<TInputs extends Record<string, unknown> = Record<string, unknown>> {
     id?: string;
     type: string;
@@ -420,6 +427,7 @@ interface ChartInstance {
     clearDrawings: () => void;
     onDrawingsChange: (handler: ((drawings: DrawingObjectOptions[]) => void) | null) => void;
     onDrawingSelect: (handler: ((event: DrawingSelectEvent) => void) | null) => void;
+    onDrawingDoubleClick: (handler: ((event: DrawingSelectEvent) => void) | null) => void;
     onDrawingHover: (handler: ((event: DrawingHoverEvent) => void) | null) => void;
     setDrawingDefaults: (tool: DrawingToolType, defaults: DrawingDefaults | null) => void;
     setSelectedDrawing: (id: string | null) => void;

package/dist/index.js

@@ -935,6 +935,13 @@ function createChart(element, options = {}) {
     style: drawing.style ?? "dotted",
     width: Math.max(1, Number(drawing.width) || 1),
     locked: drawing.locked ?? false,
+    accountSize: Number(drawing.accountSize) || 0,
+    lotSize: Number(drawing.lotSize) || 1,
+    risk: Number(drawing.risk) || 0,
+    riskMode: drawing.riskMode === "amount" ? "amount" : "percent",
+    leverage: Number(drawing.leverage) || 1,
+    pointValue: Number(drawing.pointValue) || 1,
+    qtyPrecision: Number.isFinite(drawing.qtyPrecision) ? Math.max(0, Math.floor(Number(drawing.qtyPrecision))) : 0,
     ...drawing.label === void 0 ? {} : { label: drawing.label }
   });
   const serializeDrawing = (drawing) => ({
@@ -947,6 +954,13 @@ function createChart(element, options = {}) {
     style: drawing.style,
     width: drawing.width,
     locked: drawing.locked,
+    accountSize: drawing.accountSize,
+    lotSize: drawing.lotSize,
+    risk: drawing.risk,
+    riskMode: drawing.riskMode,
+    leverage: drawing.leverage,
+    pointValue: drawing.pointValue,
+    qtyPrecision: drawing.qtyPrecision,
     ...drawing.label === void 0 ? {} : { label: drawing.label }
   });
   let indicators = (options.indicators ?? []).map((indicator) => normalizeIndicatorState(indicator));
@@ -956,6 +970,7 @@ function createChart(element, options = {}) {
   let drawingDragState = null;
   let drawingsChangeHandler = null;
   let drawingSelectHandler = null;
+  let drawingDoubleClickHandler = null;
   let drawingHoverHandler = null;
   let lastHoveredDrawingId = null;
   let selectedDrawingId = null;
@@ -2403,20 +2418,6 @@ function createChart(element, options = {}) {
           ctx.fillStyle = lossFill;
           ctx.fillRect(boxX0, Math.min(entryY, stopY), boxW, Math.abs(stopY - entryY));
           ctx.restore();
-          if (data.length > 0) {
-            const nowX = xFromDrawingPoint({ index: data.length - 1, price: 0 });
-            const darkRight = clamp(nowX, boxX0, boxX1);
-            if (darkRight - boxX0 > 0.5) {
-              const darkW = darkRight - boxX0;
-              ctx.save();
-              ctx.globalAlpha = draft ? 0.5 : 1;
-              ctx.fillStyle = hexToRgba(profitColor, 0.18);
-              ctx.fillRect(boxX0, Math.min(entryY, targetY), darkW, Math.abs(targetY - entryY));
-              ctx.fillStyle = hexToRgba(lossColor, 0.18);
-              ctx.fillRect(boxX0, Math.min(entryY, stopY), darkW, Math.abs(stopY - entryY));
-              ctx.restore();
-            }
-          }
           if (isSelected) {
             ctx.save();
             ctx.setLineDash([]);
@@ -2451,6 +2452,14 @@ function createChart(element, options = {}) {
             const stopDist = Math.abs(entry.price - stop.price);
             const rr = stopDist > 0 ? targetDist / stopDist : 0;
             const cx = (boxX0 + boxX1) / 2;
+            const effectivePointValue = (drawing.pointValue > 0 ? drawing.pointValue : 1) * (drawing.lotSize > 0 ? drawing.lotSize : 1);
+            const riskAmount = drawing.riskMode === "amount" ? drawing.risk : drawing.accountSize * (drawing.risk / 100);
+            const qtyRaw = riskAmount > 0 && stopDist > 0 ? riskAmount / (stopDist * effectivePointValue) : 0;
+            const hasMoney = qtyRaw > 0 && Number.isFinite(qtyRaw);
+            const qtyText = hasMoney ? qtyRaw.toFixed(Math.max(0, drawing.qtyPrecision)) : "";
+            const formatAmount = (value) => Math.abs(value) >= 1e3 ? value.toFixed(0) : value.toFixed(2);
+            const targetAmountText = hasMoney ? `, Amount: ${formatAmount(qtyRaw * targetDist * effectivePointValue)}` : "";
+            const stopAmountText = hasMoney ? `, Amount: ${formatAmount(qtyRaw * stopDist * effectivePointValue)}` : "";
             const drawPositionPill = (text, centerX, centerY, bg) => {
               const prevFont = ctx.font;
               ctx.font = `500 11px ${mergedOptions.fontFamily}`;
@@ -2468,9 +2477,14 @@ function createChart(element, options = {}) {
               ctx.fillText(text, centerX, pillY + pillH / 2);
               ctx.font = prevFont;
             };
-            drawPositionPill(`Target ${formatPrice(target.price)} (${pctOf(target.price)})${ticksOf(target.price)}`, cx, targetY, profitLine);
-            drawPositionPill(`Stop ${formatPrice(stop.price)} (${pctOf(stop.price)})${ticksOf(stop.price)}`, cx, stopY, lossLine);
-            drawPositionPill(`Entry ${formatPrice(entry.price)}  RR ${rr.toFixed(2)}`, cx, entryY, hexToRgba(drawing.color, 0.92));
+            drawPositionPill(`Target ${formatPrice(target.price)} (${pctOf(target.price)})${ticksOf(target.price)}${targetAmountText}`, cx, targetY, profitLine);
+            drawPositionPill(`Stop ${formatPrice(stop.price)} (${pctOf(stop.price)})${ticksOf(stop.price)}${stopAmountText}`, cx, stopY, lossLine);
+            drawPositionPill(
+              hasMoney ? `Entry ${formatPrice(entry.price)}  Qty ${qtyText}  RR ${rr.toFixed(2)}` : `Entry ${formatPrice(entry.price)}  RR ${rr.toFixed(2)}`,
+              cx,
+              entryY,
+              hexToRgba(drawing.color, 0.92)
+            );
             if (drawing.label) {
               drawDrawingLabel(drawing.label, cx, Math.min(targetY, stopY) - 4, drawing.color);
             }
@@ -3933,7 +3947,14 @@ function createChart(element, options = {}) {
           color: defaults.color ?? (isLong ? "#26a69a" : "#ef5350"),
           colors: defaults.colors ?? POSITION_DEFAULT_COLORS,
           style: defaults.style ?? "solid",
-          width: defaults.width ?? 1
+          width: defaults.width ?? 1,
+          ...defaults.accountSize === void 0 ? {} : { accountSize: defaults.accountSize },
+          ...defaults.lotSize === void 0 ? {} : { lotSize: defaults.lotSize },
+          ...defaults.risk === void 0 ? {} : { risk: defaults.risk },
+          ...defaults.riskMode === void 0 ? {} : { riskMode: defaults.riskMode },
+          ...defaults.leverage === void 0 ? {} : { leverage: defaults.leverage },
+          ...defaults.pointValue === void 0 ? {} : { pointValue: defaults.pointValue },
+          ...defaults.qtyPrecision === void 0 ? {} : { qtyPrecision: defaults.qtyPrecision }
         })
       );
       emitDrawingsChange();
@@ -4503,6 +4524,20 @@ function createChart(element, options = {}) {
     if (region === "outside") {
       return;
     }
+    if (region === "plot" && !activeDrawingTool) {
+      const drawingHit = getDrawingHit(point.x, point.y);
+      if (drawingHit) {
+        selectedDrawingId = drawingHit.drawing.id;
+        drawingDoubleClickHandler?.({
+          drawing: serializeDrawing(drawingHit.drawing),
+          target: drawingHit.target,
+          ...drawingHit.pointIndex === void 0 ? {} : { pointIndex: drawingHit.pointIndex },
+          x: point.x,
+          y: point.y
+        });
+        return;
+      }
+    }
     if (doubleClickAction === "placeLimitOrder") {
       if (region !== "plot") {
         return;
@@ -4813,6 +4848,9 @@ function createChart(element, options = {}) {
   const onDrawingSelect = (handler) => {
     drawingSelectHandler = handler;
   };
+  const onDrawingDoubleClick = (handler) => {
+    drawingDoubleClickHandler = handler;
+  };
   const onDrawingHover = (handler) => {
     drawingHoverHandler = handler;
   };
@@ -4870,6 +4908,7 @@ function createChart(element, options = {}) {
     clearDrawings,
     onDrawingsChange,
     onDrawingSelect,
+    onDrawingDoubleClick,
     setSelectedDrawing,
     onDrawingHover,
     setDrawingDefaults,

package/docs/API.md

@@ -422,7 +422,7 @@ Drawings are user-created chart tools, separate from indicators. They are intera
   - `ray`: two-point line that extends infinitely past the second point
   - `fib-retracement`: two-point retracement with levels/bands
   - `fib-extension`: trend-based three-point extension (click trend start, trend end, then the projection origin); levels project from the third point by the first→second move
-  - `long-position` / `short-position`: risk/reward forecasting box (single click drops a default box). Points are `[entry, target, stop, rightEdge]`; anchors are target/entry/stop on the left and a time-width handle on the right. Labels show price, % move, ticks, and risk/reward ratio. `color` sets the entry line; `colors` is `[profitColor, lossColor, labelTextColor]` (defaults `POSITION_DEFAULT_COLORS`).
+  - `long-position` / `short-position`: risk/reward forecasting box (single click drops a default box). Points are `[entry, target, stop, rightEdge]`; anchors are target/entry/stop on the left and a time-width handle on the right. Labels show price, % move, ticks, and risk/reward ratio. `color` sets the entry line; `colors` is `[profitColor, lossColor, labelTextColor]` (defaults `POSITION_DEFAULT_COLORS`). Sizing inputs `accountSize`, `lotSize`, `risk`, `riskMode` (`"percent"|"amount"`), `leverage`, `pointValue`, `qtyPrecision` drive the Qty/Amount labels — set `pointValue` (contract $/point) from your app for real money values.
 - `points: DrawingPoint[]`
 - `visible?: boolean`
 - `color?: string`
@@ -482,6 +482,7 @@ Use `getDrawings()` / `setDrawings()` for persistence.
 - `fitContent(): void` (x-only fit, keeps y zoom)
 - `resetViewport(): void` (fit x + reset y auto-scale)
 - `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)
 - `setActiveDrawingTool(tool: DrawingToolType | null): void` (`DrawingToolType` = `"horizontal-line" | "vertical-line" | "trendline" | "ray" | "fib-retracement"`)
 - `getActiveDrawingTool(): DrawingToolType | null`
 - `setDrawings(drawings: DrawingObjectOptions[]): void`

package/package.json

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