hyperprop-charting-library 0.1.82 → 0.1.83

package/dist/hyperprop-charting-library.cjs

@@ -2503,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;
@@ -2517,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;
@@ -2534,23 +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);
-            let centerText;
+            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 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)}`;
+              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 {
-              centerText = hasMoney ? `Entry ${formatPrice(entry.price)}  Qty ${qtyText}  RR ${rr.toFixed(2)}` : `Entry ${formatPrice(entry.price)}  RR ${rr.toFixed(2)}`;
+              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(centerText, cx, entryY, centerBg);
+            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

@@ -2477,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;
@@ -2491,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;
@@ -2508,23 +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);
-            let centerText;
+            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 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)}`;
+              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 {
-              centerText = hasMoney ? `Entry ${formatPrice(entry.price)}  Qty ${qtyText}  RR ${rr.toFixed(2)}` : `Entry ${formatPrice(entry.price)}  RR ${rr.toFixed(2)}`;
+              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(centerText, cx, entryY, centerBg);
+            drawPositionPill(centerLines, cx, entryY, centerBg);
             if (drawing.label) {
               drawDrawingLabel(drawing.label, cx, Math.min(targetY, stopY) - 4, drawing.color);
             }

package/dist/index.cjs

@@ -2503,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;
@@ -2517,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;
@@ -2534,23 +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);
-            let centerText;
+            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 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)}`;
+              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 {
-              centerText = hasMoney ? `Entry ${formatPrice(entry.price)}  Qty ${qtyText}  RR ${rr.toFixed(2)}` : `Entry ${formatPrice(entry.price)}  RR ${rr.toFixed(2)}`;
+              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(centerText, cx, entryY, centerBg);
+            drawPositionPill(centerLines, cx, entryY, centerBg);
             if (drawing.label) {
               drawDrawingLabel(drawing.label, cx, Math.min(targetY, stopY) - 4, drawing.color);
             }

package/dist/index.js

@@ -2477,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;
@@ -2491,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;
@@ -2508,23 +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);
-            let centerText;
+            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 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)}`;
+              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 {
-              centerText = hasMoney ? `Entry ${formatPrice(entry.price)}  Qty ${qtyText}  RR ${rr.toFixed(2)}` : `Entry ${formatPrice(entry.price)}  RR ${rr.toFixed(2)}`;
+              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(centerText, cx, entryY, centerBg);
+            drawPositionPill(centerLines, cx, entryY, centerBg);
             if (drawing.label) {
               drawDrawingLabel(drawing.label, cx, Math.min(targetY, stopY) - 4, drawing.color);
             }

package/package.json

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