npm - hyperprop-charting-library - Versions diffs - 0.1.81 → 0.1.83 - Mend

hyperprop-charting-library 0.1.81 → 0.1.83

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/dist/hyperprop-charting-library.cjs +62 -17
package/dist/hyperprop-charting-library.js +62 -17
package/dist/index.cjs +62 -17
package/dist/index.js +62 -17
package/docs/API.md +1 -1
package/package.json +1 -1

package/dist/hyperprop-charting-library.cjs CHANGED Viewed

@@ -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([]);
@@ -2469,11 +2503,12 @@ function createChart(element, options = {}) {
             handleAt(leftX, stopY, drawing.color);
             handleAt(rightX, entryY, drawing.color);
             const tick = getConfiguredTickSize();
-            const pctOf = (price) => {
+            const pctOfDist = (dist) => {
               if (!Number.isFinite(entry.price) || entry.price === 0) return "0.00%";
-              return `${((price - entry.price) / Math.abs(entry.price) * 100).toFixed(2)}%`;
+              const pct = dist / Math.abs(entry.price) * 100;
+              return `${pct < 1 ? pct.toFixed(3) : pct.toFixed(2)}%`;
             };
-            const ticksOf = (price) => tick > 0 ? ` ${Math.round(Math.abs(price - entry.price) / tick)}t` : "";
+            const ticksOfDist = (dist) => tick > 0 ? ` ${Math.round(dist / tick)}` : "";
             const targetDist = Math.abs(target.price - entry.price);
             const stopDist = Math.abs(entry.price - stop.price);
             const rr = stopDist > 0 ? targetDist / stopDist : 0;
@@ -2483,16 +2518,18 @@ function createChart(element, options = {}) {
             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 formatAmount = (value) => value.toFixed(2);
+            const targetAmountText = hasMoney ? `, Amount: ${formatAmount(qtyRaw * target.price * effectivePointValue)}` : "";
+            const stopAmountText = hasMoney ? `, Amount: ${formatAmount(qtyRaw * stop.price * effectivePointValue)}` : "";
             const drawPositionPill = (text, centerX, centerY, bg) => {
+              const lines = Array.isArray(text) ? text : [text];
               const prevFont = ctx.font;
               ctx.font = `500 11px ${mergedOptions.fontFamily}`;
               const padding = 6;
-              const textW = ctx.measureText(text).width;
+              const lineH = 14;
+              const textW = Math.max(...lines.map((line) => ctx.measureText(line).width));
               const pillW = textW + padding * 2;
-              const pillH = 18;
+              const pillH = lines.length === 1 ? 18 : lines.length * lineH + 6;
               const pillX = centerX - pillW / 2;
               const pillY = centerY - pillH / 2;
               ctx.fillStyle = bg;
@@ -2500,17 +2537,25 @@ function createChart(element, options = {}) {
               ctx.fillStyle = labelTextColor;
               ctx.textAlign = "center";
               ctx.textBaseline = "middle";
-              ctx.fillText(text, centerX, pillY + pillH / 2);
+              const startY = pillY + pillH / 2 - (lines.length - 1) * lineH / 2;
+              lines.forEach((line, lineIndex) => ctx.fillText(line, centerX, startY + lineIndex * lineH));
               ctx.font = prevFont;
             };
-            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)
-            );
+            drawPositionPill(`Target: ${formatPrice(targetDist)} (${pctOfDist(targetDist)})${ticksOfDist(targetDist)}${targetAmountText}`, cx, targetY, profitLine);
+            drawPositionPill(`Stop: ${formatPrice(stopDist)} (${pctOfDist(stopDist)})${ticksOfDist(stopDist)}${stopAmountText}`, cx, stopY, lossLine);
+            let centerLines;
+            let centerBg;
+            if (positionHit) {
+              const pnlPoints = positionHit.profit ? targetDist : -stopDist;
+              const line1 = hasMoney ? `Closed P&L: ${formatPrice(pnlPoints)}, Qty: ${qtyText}` : `Closed P&L: ${formatPrice(pnlPoints)}`;
+              centerLines = [line1, `Risk/reward ratio: ${rr.toFixed(2)}`];
+              centerBg = positionHit.profit ? profitLine : lossLine;
+            } else {
+              const line1 = hasMoney ? `Entry: ${formatPrice(entry.price)}, Qty: ${qtyText}` : `Entry: ${formatPrice(entry.price)}`;
+              centerLines = [line1, `Risk/reward ratio: ${rr.toFixed(2)}`];
+              centerBg = hexToRgba(drawing.color, 0.92);
+            }
+            drawPositionPill(centerLines, cx, entryY, centerBg);
             if (drawing.label) {
               drawDrawingLabel(drawing.label, cx, Math.min(targetY, stopY) - 4, drawing.color);
             }

package/dist/hyperprop-charting-library.js CHANGED Viewed

@@ -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([]);
@@ -2443,11 +2477,12 @@ function createChart(element, options = {}) {
             handleAt(leftX, stopY, drawing.color);
             handleAt(rightX, entryY, drawing.color);
             const tick = getConfiguredTickSize();
-            const pctOf = (price) => {
+            const pctOfDist = (dist) => {
               if (!Number.isFinite(entry.price) || entry.price === 0) return "0.00%";
-              return `${((price - entry.price) / Math.abs(entry.price) * 100).toFixed(2)}%`;
+              const pct = dist / Math.abs(entry.price) * 100;
+              return `${pct < 1 ? pct.toFixed(3) : pct.toFixed(2)}%`;
             };
-            const ticksOf = (price) => tick > 0 ? ` ${Math.round(Math.abs(price - entry.price) / tick)}t` : "";
+            const ticksOfDist = (dist) => tick > 0 ? ` ${Math.round(dist / tick)}` : "";
             const targetDist = Math.abs(target.price - entry.price);
             const stopDist = Math.abs(entry.price - stop.price);
             const rr = stopDist > 0 ? targetDist / stopDist : 0;
@@ -2457,16 +2492,18 @@ function createChart(element, options = {}) {
             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 formatAmount = (value) => value.toFixed(2);
+            const targetAmountText = hasMoney ? `, Amount: ${formatAmount(qtyRaw * target.price * effectivePointValue)}` : "";
+            const stopAmountText = hasMoney ? `, Amount: ${formatAmount(qtyRaw * stop.price * effectivePointValue)}` : "";
             const drawPositionPill = (text, centerX, centerY, bg) => {
+              const lines = Array.isArray(text) ? text : [text];
               const prevFont = ctx.font;
               ctx.font = `500 11px ${mergedOptions.fontFamily}`;
               const padding = 6;
-              const textW = ctx.measureText(text).width;
+              const lineH = 14;
+              const textW = Math.max(...lines.map((line) => ctx.measureText(line).width));
               const pillW = textW + padding * 2;
-              const pillH = 18;
+              const pillH = lines.length === 1 ? 18 : lines.length * lineH + 6;
               const pillX = centerX - pillW / 2;
               const pillY = centerY - pillH / 2;
               ctx.fillStyle = bg;
@@ -2474,17 +2511,25 @@ function createChart(element, options = {}) {
               ctx.fillStyle = labelTextColor;
               ctx.textAlign = "center";
               ctx.textBaseline = "middle";
-              ctx.fillText(text, centerX, pillY + pillH / 2);
+              const startY = pillY + pillH / 2 - (lines.length - 1) * lineH / 2;
+              lines.forEach((line, lineIndex) => ctx.fillText(line, centerX, startY + lineIndex * lineH));
               ctx.font = prevFont;
             };
-            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)
-            );
+            drawPositionPill(`Target: ${formatPrice(targetDist)} (${pctOfDist(targetDist)})${ticksOfDist(targetDist)}${targetAmountText}`, cx, targetY, profitLine);
+            drawPositionPill(`Stop: ${formatPrice(stopDist)} (${pctOfDist(stopDist)})${ticksOfDist(stopDist)}${stopAmountText}`, cx, stopY, lossLine);
+            let centerLines;
+            let centerBg;
+            if (positionHit) {
+              const pnlPoints = positionHit.profit ? targetDist : -stopDist;
+              const line1 = hasMoney ? `Closed P&L: ${formatPrice(pnlPoints)}, Qty: ${qtyText}` : `Closed P&L: ${formatPrice(pnlPoints)}`;
+              centerLines = [line1, `Risk/reward ratio: ${rr.toFixed(2)}`];
+              centerBg = positionHit.profit ? profitLine : lossLine;
+            } else {
+              const line1 = hasMoney ? `Entry: ${formatPrice(entry.price)}, Qty: ${qtyText}` : `Entry: ${formatPrice(entry.price)}`;
+              centerLines = [line1, `Risk/reward ratio: ${rr.toFixed(2)}`];
+              centerBg = hexToRgba(drawing.color, 0.92);
+            }
+            drawPositionPill(centerLines, cx, entryY, centerBg);
             if (drawing.label) {
               drawDrawingLabel(drawing.label, cx, Math.min(targetY, stopY) - 4, drawing.color);
             }

package/dist/index.cjs CHANGED Viewed

@@ -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([]);
@@ -2469,11 +2503,12 @@ function createChart(element, options = {}) {
             handleAt(leftX, stopY, drawing.color);
             handleAt(rightX, entryY, drawing.color);
             const tick = getConfiguredTickSize();
-            const pctOf = (price) => {
+            const pctOfDist = (dist) => {
               if (!Number.isFinite(entry.price) || entry.price === 0) return "0.00%";
-              return `${((price - entry.price) / Math.abs(entry.price) * 100).toFixed(2)}%`;
+              const pct = dist / Math.abs(entry.price) * 100;
+              return `${pct < 1 ? pct.toFixed(3) : pct.toFixed(2)}%`;
             };
-            const ticksOf = (price) => tick > 0 ? ` ${Math.round(Math.abs(price - entry.price) / tick)}t` : "";
+            const ticksOfDist = (dist) => tick > 0 ? ` ${Math.round(dist / tick)}` : "";
             const targetDist = Math.abs(target.price - entry.price);
             const stopDist = Math.abs(entry.price - stop.price);
             const rr = stopDist > 0 ? targetDist / stopDist : 0;
@@ -2483,16 +2518,18 @@ function createChart(element, options = {}) {
             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 formatAmount = (value) => value.toFixed(2);
+            const targetAmountText = hasMoney ? `, Amount: ${formatAmount(qtyRaw * target.price * effectivePointValue)}` : "";
+            const stopAmountText = hasMoney ? `, Amount: ${formatAmount(qtyRaw * stop.price * effectivePointValue)}` : "";
             const drawPositionPill = (text, centerX, centerY, bg) => {
+              const lines = Array.isArray(text) ? text : [text];
               const prevFont = ctx.font;
               ctx.font = `500 11px ${mergedOptions.fontFamily}`;
               const padding = 6;
-              const textW = ctx.measureText(text).width;
+              const lineH = 14;
+              const textW = Math.max(...lines.map((line) => ctx.measureText(line).width));
               const pillW = textW + padding * 2;
-              const pillH = 18;
+              const pillH = lines.length === 1 ? 18 : lines.length * lineH + 6;
               const pillX = centerX - pillW / 2;
               const pillY = centerY - pillH / 2;
               ctx.fillStyle = bg;
@@ -2500,17 +2537,25 @@ function createChart(element, options = {}) {
               ctx.fillStyle = labelTextColor;
               ctx.textAlign = "center";
               ctx.textBaseline = "middle";
-              ctx.fillText(text, centerX, pillY + pillH / 2);
+              const startY = pillY + pillH / 2 - (lines.length - 1) * lineH / 2;
+              lines.forEach((line, lineIndex) => ctx.fillText(line, centerX, startY + lineIndex * lineH));
               ctx.font = prevFont;
             };
-            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)
-            );
+            drawPositionPill(`Target: ${formatPrice(targetDist)} (${pctOfDist(targetDist)})${ticksOfDist(targetDist)}${targetAmountText}`, cx, targetY, profitLine);
+            drawPositionPill(`Stop: ${formatPrice(stopDist)} (${pctOfDist(stopDist)})${ticksOfDist(stopDist)}${stopAmountText}`, cx, stopY, lossLine);
+            let centerLines;
+            let centerBg;
+            if (positionHit) {
+              const pnlPoints = positionHit.profit ? targetDist : -stopDist;
+              const line1 = hasMoney ? `Closed P&L: ${formatPrice(pnlPoints)}, Qty: ${qtyText}` : `Closed P&L: ${formatPrice(pnlPoints)}`;
+              centerLines = [line1, `Risk/reward ratio: ${rr.toFixed(2)}`];
+              centerBg = positionHit.profit ? profitLine : lossLine;
+            } else {
+              const line1 = hasMoney ? `Entry: ${formatPrice(entry.price)}, Qty: ${qtyText}` : `Entry: ${formatPrice(entry.price)}`;
+              centerLines = [line1, `Risk/reward ratio: ${rr.toFixed(2)}`];
+              centerBg = hexToRgba(drawing.color, 0.92);
+            }
+            drawPositionPill(centerLines, cx, entryY, centerBg);
             if (drawing.label) {
               drawDrawingLabel(drawing.label, cx, Math.min(targetY, stopY) - 4, drawing.color);
             }

package/dist/index.js CHANGED Viewed

@@ -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([]);
@@ -2443,11 +2477,12 @@ function createChart(element, options = {}) {
             handleAt(leftX, stopY, drawing.color);
             handleAt(rightX, entryY, drawing.color);
             const tick = getConfiguredTickSize();
-            const pctOf = (price) => {
+            const pctOfDist = (dist) => {
               if (!Number.isFinite(entry.price) || entry.price === 0) return "0.00%";
-              return `${((price - entry.price) / Math.abs(entry.price) * 100).toFixed(2)}%`;
+              const pct = dist / Math.abs(entry.price) * 100;
+              return `${pct < 1 ? pct.toFixed(3) : pct.toFixed(2)}%`;
             };
-            const ticksOf = (price) => tick > 0 ? ` ${Math.round(Math.abs(price - entry.price) / tick)}t` : "";
+            const ticksOfDist = (dist) => tick > 0 ? ` ${Math.round(dist / tick)}` : "";
             const targetDist = Math.abs(target.price - entry.price);
             const stopDist = Math.abs(entry.price - stop.price);
             const rr = stopDist > 0 ? targetDist / stopDist : 0;
@@ -2457,16 +2492,18 @@ function createChart(element, options = {}) {
             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 formatAmount = (value) => value.toFixed(2);
+            const targetAmountText = hasMoney ? `, Amount: ${formatAmount(qtyRaw * target.price * effectivePointValue)}` : "";
+            const stopAmountText = hasMoney ? `, Amount: ${formatAmount(qtyRaw * stop.price * effectivePointValue)}` : "";
             const drawPositionPill = (text, centerX, centerY, bg) => {
+              const lines = Array.isArray(text) ? text : [text];
               const prevFont = ctx.font;
               ctx.font = `500 11px ${mergedOptions.fontFamily}`;
               const padding = 6;
-              const textW = ctx.measureText(text).width;
+              const lineH = 14;
+              const textW = Math.max(...lines.map((line) => ctx.measureText(line).width));
               const pillW = textW + padding * 2;
-              const pillH = 18;
+              const pillH = lines.length === 1 ? 18 : lines.length * lineH + 6;
               const pillX = centerX - pillW / 2;
               const pillY = centerY - pillH / 2;
               ctx.fillStyle = bg;
@@ -2474,17 +2511,25 @@ function createChart(element, options = {}) {
               ctx.fillStyle = labelTextColor;
               ctx.textAlign = "center";
               ctx.textBaseline = "middle";
-              ctx.fillText(text, centerX, pillY + pillH / 2);
+              const startY = pillY + pillH / 2 - (lines.length - 1) * lineH / 2;
+              lines.forEach((line, lineIndex) => ctx.fillText(line, centerX, startY + lineIndex * lineH));
               ctx.font = prevFont;
             };
-            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)
-            );
+            drawPositionPill(`Target: ${formatPrice(targetDist)} (${pctOfDist(targetDist)})${ticksOfDist(targetDist)}${targetAmountText}`, cx, targetY, profitLine);
+            drawPositionPill(`Stop: ${formatPrice(stopDist)} (${pctOfDist(stopDist)})${ticksOfDist(stopDist)}${stopAmountText}`, cx, stopY, lossLine);
+            let centerLines;
+            let centerBg;
+            if (positionHit) {
+              const pnlPoints = positionHit.profit ? targetDist : -stopDist;
+              const line1 = hasMoney ? `Closed P&L: ${formatPrice(pnlPoints)}, Qty: ${qtyText}` : `Closed P&L: ${formatPrice(pnlPoints)}`;
+              centerLines = [line1, `Risk/reward ratio: ${rr.toFixed(2)}`];
+              centerBg = positionHit.profit ? profitLine : lossLine;
+            } else {
+              const line1 = hasMoney ? `Entry: ${formatPrice(entry.price)}, Qty: ${qtyText}` : `Entry: ${formatPrice(entry.price)}`;
+              centerLines = [line1, `Risk/reward ratio: ${rr.toFixed(2)}`];
+              centerBg = hexToRgba(drawing.color, 0.92);
+            }
+            drawPositionPill(centerLines, cx, entryY, centerBg);
             if (drawing.label) {
               drawDrawingLabel(drawing.label, cx, Math.min(targetY, stopY) - 4, drawing.color);
             }

package/docs/API.md CHANGED Viewed

@@ -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 CHANGED Viewed

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