hyperprop-charting-library 0.1.81 → 0.1.82

package/dist/hyperprop-charting-library.cjs

@@ -2444,6 +2444,40 @@ function createChart(element, options = {}) {
           ctx.fillStyle = lossFill;
           ctx.fillRect(boxX0, Math.min(entryY, stopY), boxW, Math.abs(stopY - entryY));
           ctx.restore();
+          const isLongPosition = drawing.type === "long-position";
+          const simStart = Math.max(0, Math.round(Math.min(entry.index, right.index)));
+          const simEnd = Math.min(data.length - 1, Math.round(Math.max(entry.index, right.index)));
+          let positionHit = null;
+          for (let i = simStart; i <= simEnd; i += 1) {
+            const bar = data[i];
+            if (!bar) continue;
+            const targetTouched = isLongPosition ? bar.h >= target.price : bar.l <= target.price;
+            const stopTouched = isLongPosition ? bar.l <= stop.price : bar.h >= stop.price;
+            if (stopTouched) {
+              positionHit = { index: i, price: stop.price, profit: false };
+              break;
+            }
+            if (targetTouched) {
+              positionHit = { index: i, price: target.price, profit: true };
+              break;
+            }
+          }
+          if (positionHit) {
+            const hitX = clamp(xFromDrawingPoint({ index: positionHit.index, price: positionHit.price }), boxX0, boxX1);
+            const exitY = yFromPrice(positionHit.price);
+            ctx.save();
+            ctx.globalAlpha = draft ? 0.6 : 1;
+            ctx.fillStyle = hexToRgba(positionHit.profit ? profitColor : lossColor, 0.2);
+            ctx.fillRect(boxX0, Math.min(entryY, exitY), Math.max(0, hitX - boxX0), Math.abs(exitY - entryY));
+            ctx.setLineDash([5, 4]);
+            ctx.lineWidth = 1;
+            ctx.strokeStyle = hexToRgba("#787b86", 0.9);
+            ctx.beginPath();
+            ctx.moveTo(crisp(boxX0), crisp(entryY));
+            ctx.lineTo(crisp(hitX), crisp(exitY));
+            ctx.stroke();
+            ctx.restore();
+          }
           if (isSelected) {
             ctx.save();
             ctx.setLineDash([]);
@@ -2505,12 +2539,18 @@ function createChart(element, options = {}) {
             };
             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)
-            );
+            let centerText;
+            let centerBg;
+            if (positionHit) {
+              const pnl = positionHit.profit ? qtyRaw * targetDist * effectivePointValue : -(qtyRaw * stopDist * effectivePointValue);
+              const pnlText = hasMoney ? `Closed P&L: ${formatAmount(pnl)}` : `Closed ${positionHit.profit ? "+" : "\u2212"}${formatPrice(Math.abs(positionHit.price - entry.price))}`;
+              centerText = hasMoney ? `${pnlText}, Qty: ${qtyText}  RR ${rr.toFixed(2)}` : `${pnlText}  RR ${rr.toFixed(2)}`;
+              centerBg = positionHit.profit ? profitLine : lossLine;
+            } else {
+              centerText = hasMoney ? `Entry ${formatPrice(entry.price)}  Qty ${qtyText}  RR ${rr.toFixed(2)}` : `Entry ${formatPrice(entry.price)}  RR ${rr.toFixed(2)}`;
+              centerBg = hexToRgba(drawing.color, 0.92);
+            }
+            drawPositionPill(centerText, cx, entryY, centerBg);
             if (drawing.label) {
               drawDrawingLabel(drawing.label, cx, Math.min(targetY, stopY) - 4, drawing.color);
             }

package/dist/hyperprop-charting-library.js

@@ -2418,6 +2418,40 @@ function createChart(element, options = {}) {
           ctx.fillStyle = lossFill;
           ctx.fillRect(boxX0, Math.min(entryY, stopY), boxW, Math.abs(stopY - entryY));
           ctx.restore();
+          const isLongPosition = drawing.type === "long-position";
+          const simStart = Math.max(0, Math.round(Math.min(entry.index, right.index)));
+          const simEnd = Math.min(data.length - 1, Math.round(Math.max(entry.index, right.index)));
+          let positionHit = null;
+          for (let i = simStart; i <= simEnd; i += 1) {
+            const bar = data[i];
+            if (!bar) continue;
+            const targetTouched = isLongPosition ? bar.h >= target.price : bar.l <= target.price;
+            const stopTouched = isLongPosition ? bar.l <= stop.price : bar.h >= stop.price;
+            if (stopTouched) {
+              positionHit = { index: i, price: stop.price, profit: false };
+              break;
+            }
+            if (targetTouched) {
+              positionHit = { index: i, price: target.price, profit: true };
+              break;
+            }
+          }
+          if (positionHit) {
+            const hitX = clamp(xFromDrawingPoint({ index: positionHit.index, price: positionHit.price }), boxX0, boxX1);
+            const exitY = yFromPrice(positionHit.price);
+            ctx.save();
+            ctx.globalAlpha = draft ? 0.6 : 1;
+            ctx.fillStyle = hexToRgba(positionHit.profit ? profitColor : lossColor, 0.2);
+            ctx.fillRect(boxX0, Math.min(entryY, exitY), Math.max(0, hitX - boxX0), Math.abs(exitY - entryY));
+            ctx.setLineDash([5, 4]);
+            ctx.lineWidth = 1;
+            ctx.strokeStyle = hexToRgba("#787b86", 0.9);
+            ctx.beginPath();
+            ctx.moveTo(crisp(boxX0), crisp(entryY));
+            ctx.lineTo(crisp(hitX), crisp(exitY));
+            ctx.stroke();
+            ctx.restore();
+          }
           if (isSelected) {
             ctx.save();
             ctx.setLineDash([]);
@@ -2479,12 +2513,18 @@ function createChart(element, options = {}) {
             };
             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)
-            );
+            let centerText;
+            let centerBg;
+            if (positionHit) {
+              const pnl = positionHit.profit ? qtyRaw * targetDist * effectivePointValue : -(qtyRaw * stopDist * effectivePointValue);
+              const pnlText = hasMoney ? `Closed P&L: ${formatAmount(pnl)}` : `Closed ${positionHit.profit ? "+" : "\u2212"}${formatPrice(Math.abs(positionHit.price - entry.price))}`;
+              centerText = hasMoney ? `${pnlText}, Qty: ${qtyText}  RR ${rr.toFixed(2)}` : `${pnlText}  RR ${rr.toFixed(2)}`;
+              centerBg = positionHit.profit ? profitLine : lossLine;
+            } else {
+              centerText = hasMoney ? `Entry ${formatPrice(entry.price)}  Qty ${qtyText}  RR ${rr.toFixed(2)}` : `Entry ${formatPrice(entry.price)}  RR ${rr.toFixed(2)}`;
+              centerBg = hexToRgba(drawing.color, 0.92);
+            }
+            drawPositionPill(centerText, cx, entryY, centerBg);
             if (drawing.label) {
               drawDrawingLabel(drawing.label, cx, Math.min(targetY, stopY) - 4, drawing.color);
             }

package/dist/index.cjs

@@ -2444,6 +2444,40 @@ function createChart(element, options = {}) {
           ctx.fillStyle = lossFill;
           ctx.fillRect(boxX0, Math.min(entryY, stopY), boxW, Math.abs(stopY - entryY));
           ctx.restore();
+          const isLongPosition = drawing.type === "long-position";
+          const simStart = Math.max(0, Math.round(Math.min(entry.index, right.index)));
+          const simEnd = Math.min(data.length - 1, Math.round(Math.max(entry.index, right.index)));
+          let positionHit = null;
+          for (let i = simStart; i <= simEnd; i += 1) {
+            const bar = data[i];
+            if (!bar) continue;
+            const targetTouched = isLongPosition ? bar.h >= target.price : bar.l <= target.price;
+            const stopTouched = isLongPosition ? bar.l <= stop.price : bar.h >= stop.price;
+            if (stopTouched) {
+              positionHit = { index: i, price: stop.price, profit: false };
+              break;
+            }
+            if (targetTouched) {
+              positionHit = { index: i, price: target.price, profit: true };
+              break;
+            }
+          }
+          if (positionHit) {
+            const hitX = clamp(xFromDrawingPoint({ index: positionHit.index, price: positionHit.price }), boxX0, boxX1);
+            const exitY = yFromPrice(positionHit.price);
+            ctx.save();
+            ctx.globalAlpha = draft ? 0.6 : 1;
+            ctx.fillStyle = hexToRgba(positionHit.profit ? profitColor : lossColor, 0.2);
+            ctx.fillRect(boxX0, Math.min(entryY, exitY), Math.max(0, hitX - boxX0), Math.abs(exitY - entryY));
+            ctx.setLineDash([5, 4]);
+            ctx.lineWidth = 1;
+            ctx.strokeStyle = hexToRgba("#787b86", 0.9);
+            ctx.beginPath();
+            ctx.moveTo(crisp(boxX0), crisp(entryY));
+            ctx.lineTo(crisp(hitX), crisp(exitY));
+            ctx.stroke();
+            ctx.restore();
+          }
           if (isSelected) {
             ctx.save();
             ctx.setLineDash([]);
@@ -2505,12 +2539,18 @@ function createChart(element, options = {}) {
             };
             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)
-            );
+            let centerText;
+            let centerBg;
+            if (positionHit) {
+              const pnl = positionHit.profit ? qtyRaw * targetDist * effectivePointValue : -(qtyRaw * stopDist * effectivePointValue);
+              const pnlText = hasMoney ? `Closed P&L: ${formatAmount(pnl)}` : `Closed ${positionHit.profit ? "+" : "\u2212"}${formatPrice(Math.abs(positionHit.price - entry.price))}`;
+              centerText = hasMoney ? `${pnlText}, Qty: ${qtyText}  RR ${rr.toFixed(2)}` : `${pnlText}  RR ${rr.toFixed(2)}`;
+              centerBg = positionHit.profit ? profitLine : lossLine;
+            } else {
+              centerText = hasMoney ? `Entry ${formatPrice(entry.price)}  Qty ${qtyText}  RR ${rr.toFixed(2)}` : `Entry ${formatPrice(entry.price)}  RR ${rr.toFixed(2)}`;
+              centerBg = hexToRgba(drawing.color, 0.92);
+            }
+            drawPositionPill(centerText, cx, entryY, centerBg);
             if (drawing.label) {
               drawDrawingLabel(drawing.label, cx, Math.min(targetY, stopY) - 4, drawing.color);
             }

package/dist/index.js

@@ -2418,6 +2418,40 @@ function createChart(element, options = {}) {
           ctx.fillStyle = lossFill;
           ctx.fillRect(boxX0, Math.min(entryY, stopY), boxW, Math.abs(stopY - entryY));
           ctx.restore();
+          const isLongPosition = drawing.type === "long-position";
+          const simStart = Math.max(0, Math.round(Math.min(entry.index, right.index)));
+          const simEnd = Math.min(data.length - 1, Math.round(Math.max(entry.index, right.index)));
+          let positionHit = null;
+          for (let i = simStart; i <= simEnd; i += 1) {
+            const bar = data[i];
+            if (!bar) continue;
+            const targetTouched = isLongPosition ? bar.h >= target.price : bar.l <= target.price;
+            const stopTouched = isLongPosition ? bar.l <= stop.price : bar.h >= stop.price;
+            if (stopTouched) {
+              positionHit = { index: i, price: stop.price, profit: false };
+              break;
+            }
+            if (targetTouched) {
+              positionHit = { index: i, price: target.price, profit: true };
+              break;
+            }
+          }
+          if (positionHit) {
+            const hitX = clamp(xFromDrawingPoint({ index: positionHit.index, price: positionHit.price }), boxX0, boxX1);
+            const exitY = yFromPrice(positionHit.price);
+            ctx.save();
+            ctx.globalAlpha = draft ? 0.6 : 1;
+            ctx.fillStyle = hexToRgba(positionHit.profit ? profitColor : lossColor, 0.2);
+            ctx.fillRect(boxX0, Math.min(entryY, exitY), Math.max(0, hitX - boxX0), Math.abs(exitY - entryY));
+            ctx.setLineDash([5, 4]);
+            ctx.lineWidth = 1;
+            ctx.strokeStyle = hexToRgba("#787b86", 0.9);
+            ctx.beginPath();
+            ctx.moveTo(crisp(boxX0), crisp(entryY));
+            ctx.lineTo(crisp(hitX), crisp(exitY));
+            ctx.stroke();
+            ctx.restore();
+          }
           if (isSelected) {
             ctx.save();
             ctx.setLineDash([]);
@@ -2479,12 +2513,18 @@ function createChart(element, options = {}) {
             };
             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)
-            );
+            let centerText;
+            let centerBg;
+            if (positionHit) {
+              const pnl = positionHit.profit ? qtyRaw * targetDist * effectivePointValue : -(qtyRaw * stopDist * effectivePointValue);
+              const pnlText = hasMoney ? `Closed P&L: ${formatAmount(pnl)}` : `Closed ${positionHit.profit ? "+" : "\u2212"}${formatPrice(Math.abs(positionHit.price - entry.price))}`;
+              centerText = hasMoney ? `${pnlText}, Qty: ${qtyText}  RR ${rr.toFixed(2)}` : `${pnlText}  RR ${rr.toFixed(2)}`;
+              centerBg = positionHit.profit ? profitLine : lossLine;
+            } else {
+              centerText = hasMoney ? `Entry ${formatPrice(entry.price)}  Qty ${qtyText}  RR ${rr.toFixed(2)}` : `Entry ${formatPrice(entry.price)}  RR ${rr.toFixed(2)}`;
+              centerBg = hexToRgba(drawing.color, 0.92);
+            }
+            drawPositionPill(centerText, cx, entryY, centerBg);
             if (drawing.label) {
               drawDrawingLabel(drawing.label, cx, Math.min(targetY, stopY) - 4, drawing.color);
             }

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`). 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.
+  - `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. The box also runs a trade simulation across the bars it covers: it shades the traversed region and draws a diagonal to the first bar that touches the target or stop, and the center label switches to "Closed P&L" (green if the target was hit first, red if the stop was hit first).
 - `points: DrawingPoint[]`
 - `visible?: boolean`
 - `color?: string`

package/package.json

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