hyperprop-charting-library 0.1.92 → 0.1.93
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.
- package/dist/hyperprop-charting-library.cjs +13 -12
- package/dist/hyperprop-charting-library.js +13 -12
- package/dist/index.cjs +13 -12
- package/dist/index.js +13 -12
- package/package.json +1 -1
|
@@ -2527,28 +2527,29 @@ function createChart(element, options = {}) {
|
|
|
2527
2527
|
const formatAmount = (value) => value.toFixed(2);
|
|
2528
2528
|
const targetAmountText = hasMoney ? `, Amount: ${formatAmount(qtyRaw * target.price * effectivePointValue)}` : "";
|
|
2529
2529
|
const stopAmountText = hasMoney ? `, Amount: ${formatAmount(qtyRaw * stop.price * effectivePointValue)}` : "";
|
|
2530
|
-
const drawPositionPill = (text,
|
|
2530
|
+
const drawPositionPill = (text, leftX2, centerY, bg) => {
|
|
2531
2531
|
const lines = Array.isArray(text) ? text : [text];
|
|
2532
2532
|
const prevFont = ctx.font;
|
|
2533
|
-
ctx.font = `500
|
|
2534
|
-
const padding =
|
|
2535
|
-
const lineH =
|
|
2533
|
+
ctx.font = `500 10px ${mergedOptions.fontFamily}`;
|
|
2534
|
+
const padding = 5;
|
|
2535
|
+
const lineH = 12;
|
|
2536
2536
|
const textW = Math.max(...lines.map((line) => ctx.measureText(line).width));
|
|
2537
2537
|
const pillW = textW + padding * 2;
|
|
2538
|
-
const pillH = lines.length === 1 ?
|
|
2539
|
-
const pillX =
|
|
2538
|
+
const pillH = lines.length === 1 ? 15 : lines.length * lineH + 5;
|
|
2539
|
+
const pillX = leftX2;
|
|
2540
2540
|
const pillY = centerY - pillH / 2;
|
|
2541
2541
|
ctx.fillStyle = bg;
|
|
2542
|
-
fillRoundedRect(pillX, pillY, pillW, pillH,
|
|
2542
|
+
fillRoundedRect(pillX, pillY, pillW, pillH, 3);
|
|
2543
2543
|
ctx.fillStyle = labelTextColor;
|
|
2544
|
-
ctx.textAlign = "
|
|
2544
|
+
ctx.textAlign = "left";
|
|
2545
2545
|
ctx.textBaseline = "middle";
|
|
2546
2546
|
const startY = pillY + pillH / 2 - (lines.length - 1) * lineH / 2;
|
|
2547
|
-
lines.forEach((line, lineIndex) => ctx.fillText(line,
|
|
2547
|
+
lines.forEach((line, lineIndex) => ctx.fillText(line, pillX + padding, startY + lineIndex * lineH));
|
|
2548
2548
|
ctx.font = prevFont;
|
|
2549
2549
|
};
|
|
2550
|
-
|
|
2551
|
-
drawPositionPill(`
|
|
2550
|
+
const labelLeftX = boxX0 + 10;
|
|
2551
|
+
drawPositionPill(`Target: ${formatPrice(targetDist)} (${pctOfDist(targetDist)})${ticksOfDist(targetDist)}${targetAmountText}`, labelLeftX, targetY, profitLine);
|
|
2552
|
+
drawPositionPill(`Stop: ${formatPrice(stopDist)} (${pctOfDist(stopDist)})${ticksOfDist(stopDist)}${stopAmountText}`, labelLeftX, stopY, lossLine);
|
|
2552
2553
|
let centerLines;
|
|
2553
2554
|
let centerBg;
|
|
2554
2555
|
if (positionHit) {
|
|
@@ -2561,7 +2562,7 @@ function createChart(element, options = {}) {
|
|
|
2561
2562
|
centerLines = [line1, `Risk/reward ratio: ${rr.toFixed(2)}`];
|
|
2562
2563
|
centerBg = hexToRgba(drawing.color, 0.92);
|
|
2563
2564
|
}
|
|
2564
|
-
drawPositionPill(centerLines,
|
|
2565
|
+
drawPositionPill(centerLines, labelLeftX, entryY, centerBg);
|
|
2565
2566
|
if (drawing.label) {
|
|
2566
2567
|
drawDrawingLabel(drawing.label, cx, Math.min(targetY, stopY) - 4, drawing.color);
|
|
2567
2568
|
}
|
|
@@ -2501,28 +2501,29 @@ function createChart(element, options = {}) {
|
|
|
2501
2501
|
const formatAmount = (value) => value.toFixed(2);
|
|
2502
2502
|
const targetAmountText = hasMoney ? `, Amount: ${formatAmount(qtyRaw * target.price * effectivePointValue)}` : "";
|
|
2503
2503
|
const stopAmountText = hasMoney ? `, Amount: ${formatAmount(qtyRaw * stop.price * effectivePointValue)}` : "";
|
|
2504
|
-
const drawPositionPill = (text,
|
|
2504
|
+
const drawPositionPill = (text, leftX2, centerY, bg) => {
|
|
2505
2505
|
const lines = Array.isArray(text) ? text : [text];
|
|
2506
2506
|
const prevFont = ctx.font;
|
|
2507
|
-
ctx.font = `500
|
|
2508
|
-
const padding =
|
|
2509
|
-
const lineH =
|
|
2507
|
+
ctx.font = `500 10px ${mergedOptions.fontFamily}`;
|
|
2508
|
+
const padding = 5;
|
|
2509
|
+
const lineH = 12;
|
|
2510
2510
|
const textW = Math.max(...lines.map((line) => ctx.measureText(line).width));
|
|
2511
2511
|
const pillW = textW + padding * 2;
|
|
2512
|
-
const pillH = lines.length === 1 ?
|
|
2513
|
-
const pillX =
|
|
2512
|
+
const pillH = lines.length === 1 ? 15 : lines.length * lineH + 5;
|
|
2513
|
+
const pillX = leftX2;
|
|
2514
2514
|
const pillY = centerY - pillH / 2;
|
|
2515
2515
|
ctx.fillStyle = bg;
|
|
2516
|
-
fillRoundedRect(pillX, pillY, pillW, pillH,
|
|
2516
|
+
fillRoundedRect(pillX, pillY, pillW, pillH, 3);
|
|
2517
2517
|
ctx.fillStyle = labelTextColor;
|
|
2518
|
-
ctx.textAlign = "
|
|
2518
|
+
ctx.textAlign = "left";
|
|
2519
2519
|
ctx.textBaseline = "middle";
|
|
2520
2520
|
const startY = pillY + pillH / 2 - (lines.length - 1) * lineH / 2;
|
|
2521
|
-
lines.forEach((line, lineIndex) => ctx.fillText(line,
|
|
2521
|
+
lines.forEach((line, lineIndex) => ctx.fillText(line, pillX + padding, startY + lineIndex * lineH));
|
|
2522
2522
|
ctx.font = prevFont;
|
|
2523
2523
|
};
|
|
2524
|
-
|
|
2525
|
-
drawPositionPill(`
|
|
2524
|
+
const labelLeftX = boxX0 + 10;
|
|
2525
|
+
drawPositionPill(`Target: ${formatPrice(targetDist)} (${pctOfDist(targetDist)})${ticksOfDist(targetDist)}${targetAmountText}`, labelLeftX, targetY, profitLine);
|
|
2526
|
+
drawPositionPill(`Stop: ${formatPrice(stopDist)} (${pctOfDist(stopDist)})${ticksOfDist(stopDist)}${stopAmountText}`, labelLeftX, stopY, lossLine);
|
|
2526
2527
|
let centerLines;
|
|
2527
2528
|
let centerBg;
|
|
2528
2529
|
if (positionHit) {
|
|
@@ -2535,7 +2536,7 @@ function createChart(element, options = {}) {
|
|
|
2535
2536
|
centerLines = [line1, `Risk/reward ratio: ${rr.toFixed(2)}`];
|
|
2536
2537
|
centerBg = hexToRgba(drawing.color, 0.92);
|
|
2537
2538
|
}
|
|
2538
|
-
drawPositionPill(centerLines,
|
|
2539
|
+
drawPositionPill(centerLines, labelLeftX, entryY, centerBg);
|
|
2539
2540
|
if (drawing.label) {
|
|
2540
2541
|
drawDrawingLabel(drawing.label, cx, Math.min(targetY, stopY) - 4, drawing.color);
|
|
2541
2542
|
}
|
package/dist/index.cjs
CHANGED
|
@@ -2527,28 +2527,29 @@ function createChart(element, options = {}) {
|
|
|
2527
2527
|
const formatAmount = (value) => value.toFixed(2);
|
|
2528
2528
|
const targetAmountText = hasMoney ? `, Amount: ${formatAmount(qtyRaw * target.price * effectivePointValue)}` : "";
|
|
2529
2529
|
const stopAmountText = hasMoney ? `, Amount: ${formatAmount(qtyRaw * stop.price * effectivePointValue)}` : "";
|
|
2530
|
-
const drawPositionPill = (text,
|
|
2530
|
+
const drawPositionPill = (text, leftX2, centerY, bg) => {
|
|
2531
2531
|
const lines = Array.isArray(text) ? text : [text];
|
|
2532
2532
|
const prevFont = ctx.font;
|
|
2533
|
-
ctx.font = `500
|
|
2534
|
-
const padding =
|
|
2535
|
-
const lineH =
|
|
2533
|
+
ctx.font = `500 10px ${mergedOptions.fontFamily}`;
|
|
2534
|
+
const padding = 5;
|
|
2535
|
+
const lineH = 12;
|
|
2536
2536
|
const textW = Math.max(...lines.map((line) => ctx.measureText(line).width));
|
|
2537
2537
|
const pillW = textW + padding * 2;
|
|
2538
|
-
const pillH = lines.length === 1 ?
|
|
2539
|
-
const pillX =
|
|
2538
|
+
const pillH = lines.length === 1 ? 15 : lines.length * lineH + 5;
|
|
2539
|
+
const pillX = leftX2;
|
|
2540
2540
|
const pillY = centerY - pillH / 2;
|
|
2541
2541
|
ctx.fillStyle = bg;
|
|
2542
|
-
fillRoundedRect(pillX, pillY, pillW, pillH,
|
|
2542
|
+
fillRoundedRect(pillX, pillY, pillW, pillH, 3);
|
|
2543
2543
|
ctx.fillStyle = labelTextColor;
|
|
2544
|
-
ctx.textAlign = "
|
|
2544
|
+
ctx.textAlign = "left";
|
|
2545
2545
|
ctx.textBaseline = "middle";
|
|
2546
2546
|
const startY = pillY + pillH / 2 - (lines.length - 1) * lineH / 2;
|
|
2547
|
-
lines.forEach((line, lineIndex) => ctx.fillText(line,
|
|
2547
|
+
lines.forEach((line, lineIndex) => ctx.fillText(line, pillX + padding, startY + lineIndex * lineH));
|
|
2548
2548
|
ctx.font = prevFont;
|
|
2549
2549
|
};
|
|
2550
|
-
|
|
2551
|
-
drawPositionPill(`
|
|
2550
|
+
const labelLeftX = boxX0 + 10;
|
|
2551
|
+
drawPositionPill(`Target: ${formatPrice(targetDist)} (${pctOfDist(targetDist)})${ticksOfDist(targetDist)}${targetAmountText}`, labelLeftX, targetY, profitLine);
|
|
2552
|
+
drawPositionPill(`Stop: ${formatPrice(stopDist)} (${pctOfDist(stopDist)})${ticksOfDist(stopDist)}${stopAmountText}`, labelLeftX, stopY, lossLine);
|
|
2552
2553
|
let centerLines;
|
|
2553
2554
|
let centerBg;
|
|
2554
2555
|
if (positionHit) {
|
|
@@ -2561,7 +2562,7 @@ function createChart(element, options = {}) {
|
|
|
2561
2562
|
centerLines = [line1, `Risk/reward ratio: ${rr.toFixed(2)}`];
|
|
2562
2563
|
centerBg = hexToRgba(drawing.color, 0.92);
|
|
2563
2564
|
}
|
|
2564
|
-
drawPositionPill(centerLines,
|
|
2565
|
+
drawPositionPill(centerLines, labelLeftX, entryY, centerBg);
|
|
2565
2566
|
if (drawing.label) {
|
|
2566
2567
|
drawDrawingLabel(drawing.label, cx, Math.min(targetY, stopY) - 4, drawing.color);
|
|
2567
2568
|
}
|
package/dist/index.js
CHANGED
|
@@ -2501,28 +2501,29 @@ function createChart(element, options = {}) {
|
|
|
2501
2501
|
const formatAmount = (value) => value.toFixed(2);
|
|
2502
2502
|
const targetAmountText = hasMoney ? `, Amount: ${formatAmount(qtyRaw * target.price * effectivePointValue)}` : "";
|
|
2503
2503
|
const stopAmountText = hasMoney ? `, Amount: ${formatAmount(qtyRaw * stop.price * effectivePointValue)}` : "";
|
|
2504
|
-
const drawPositionPill = (text,
|
|
2504
|
+
const drawPositionPill = (text, leftX2, centerY, bg) => {
|
|
2505
2505
|
const lines = Array.isArray(text) ? text : [text];
|
|
2506
2506
|
const prevFont = ctx.font;
|
|
2507
|
-
ctx.font = `500
|
|
2508
|
-
const padding =
|
|
2509
|
-
const lineH =
|
|
2507
|
+
ctx.font = `500 10px ${mergedOptions.fontFamily}`;
|
|
2508
|
+
const padding = 5;
|
|
2509
|
+
const lineH = 12;
|
|
2510
2510
|
const textW = Math.max(...lines.map((line) => ctx.measureText(line).width));
|
|
2511
2511
|
const pillW = textW + padding * 2;
|
|
2512
|
-
const pillH = lines.length === 1 ?
|
|
2513
|
-
const pillX =
|
|
2512
|
+
const pillH = lines.length === 1 ? 15 : lines.length * lineH + 5;
|
|
2513
|
+
const pillX = leftX2;
|
|
2514
2514
|
const pillY = centerY - pillH / 2;
|
|
2515
2515
|
ctx.fillStyle = bg;
|
|
2516
|
-
fillRoundedRect(pillX, pillY, pillW, pillH,
|
|
2516
|
+
fillRoundedRect(pillX, pillY, pillW, pillH, 3);
|
|
2517
2517
|
ctx.fillStyle = labelTextColor;
|
|
2518
|
-
ctx.textAlign = "
|
|
2518
|
+
ctx.textAlign = "left";
|
|
2519
2519
|
ctx.textBaseline = "middle";
|
|
2520
2520
|
const startY = pillY + pillH / 2 - (lines.length - 1) * lineH / 2;
|
|
2521
|
-
lines.forEach((line, lineIndex) => ctx.fillText(line,
|
|
2521
|
+
lines.forEach((line, lineIndex) => ctx.fillText(line, pillX + padding, startY + lineIndex * lineH));
|
|
2522
2522
|
ctx.font = prevFont;
|
|
2523
2523
|
};
|
|
2524
|
-
|
|
2525
|
-
drawPositionPill(`
|
|
2524
|
+
const labelLeftX = boxX0 + 10;
|
|
2525
|
+
drawPositionPill(`Target: ${formatPrice(targetDist)} (${pctOfDist(targetDist)})${ticksOfDist(targetDist)}${targetAmountText}`, labelLeftX, targetY, profitLine);
|
|
2526
|
+
drawPositionPill(`Stop: ${formatPrice(stopDist)} (${pctOfDist(stopDist)})${ticksOfDist(stopDist)}${stopAmountText}`, labelLeftX, stopY, lossLine);
|
|
2526
2527
|
let centerLines;
|
|
2527
2528
|
let centerBg;
|
|
2528
2529
|
if (positionHit) {
|
|
@@ -2535,7 +2536,7 @@ function createChart(element, options = {}) {
|
|
|
2535
2536
|
centerLines = [line1, `Risk/reward ratio: ${rr.toFixed(2)}`];
|
|
2536
2537
|
centerBg = hexToRgba(drawing.color, 0.92);
|
|
2537
2538
|
}
|
|
2538
|
-
drawPositionPill(centerLines,
|
|
2539
|
+
drawPositionPill(centerLines, labelLeftX, entryY, centerBg);
|
|
2539
2540
|
if (drawing.label) {
|
|
2540
2541
|
drawDrawingLabel(drawing.label, cx, Math.min(targetY, stopY) - 4, drawing.color);
|
|
2541
2542
|
}
|