hyperprop-charting-library 0.1.96 → 0.1.98

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 (5) hide show
  1. package/dist/hyperprop-charting-library.cjs +15 -9
  2. package/dist/hyperprop-charting-library.js +15 -9
  3. package/dist/index.cjs +15 -9
  4. package/dist/index.js +15 -9
  5. package/package.json +1 -1
package/dist/hyperprop-charting-library.cjs CHANGED
@@ -2538,29 +2538,35 @@ function createChart(element, options = {}) {
2538
2538
  };
2539
2539
  const targetAmountText = hasMoney ? `, Amount: ${formatAmount(qtyRaw * target.price * effectivePointValue)}` : "";
2540
2540
  const stopAmountText = hasMoney ? `, Amount: ${formatAmount(qtyRaw * stop.price * effectivePointValue)}` : "";
2541
- const drawPositionPill = (text, leftX2, centerY, bg) => {
2541
+ const PILL_GAP = 5;
2542
+ const drawPositionPill = (text, lineY, place, bg) => {
2542
2543
  const lines = Array.isArray(text) ? text : [text];
2543
2544
  const prevFont = ctx.font;
2544
- ctx.font = `500 11px ${mergedOptions.fontFamily}`;
2545
+ ctx.font = `500 11px ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace`;
2545
2546
  const padding = 6;
2546
2547
  const lineH = 14;
2547
2548
  const textW = Math.max(...lines.map((line) => ctx.measureText(line).width));
2548
2549
  const pillW = textW + padding * 2;
2549
2550
  const pillH = lines.length === 1 ? 18 : lines.length * lineH + 6;
2550
- const pillX = leftX2;
2551
+ const centerY = place === "above" ? lineY - pillH / 2 - PILL_GAP : lineY + pillH / 2 + PILL_GAP;
2552
+ const pillX = cx - pillW / 2;
2551
2553
  const pillY = centerY - pillH / 2;
2552
2554
  ctx.fillStyle = bg;
2553
2555
  fillRoundedRect(pillX, pillY, pillW, pillH, 4);
2554
2556
  ctx.fillStyle = labelTextColor;
2555
- ctx.textAlign = "left";
2557
+ ctx.textAlign = "center";
2556
2558
  ctx.textBaseline = "middle";
2557
2559
  const startY = pillY + pillH / 2 - (lines.length - 1) * lineH / 2;
2558
- lines.forEach((line, lineIndex) => ctx.fillText(line, pillX + padding, startY + lineIndex * lineH));
2560
+ lines.forEach((line, lineIndex) => ctx.fillText(line, cx, startY + lineIndex * lineH));
2559
2561
  ctx.font = prevFont;
2560
2562
  };
2561
- const labelLeftX = boxX0 + 10;
2562
- drawPositionPill(`Target: ${formatPrice(targetDist)} (${pctOfDist(targetDist)})${ticksOfDist(targetDist)}${targetAmountText}`, labelLeftX, targetY, profitLine);
2563
- drawPositionPill(`Stop: ${formatPrice(stopDist)} (${pctOfDist(stopDist)})${ticksOfDist(stopDist)}${stopAmountText}`, labelLeftX, stopY, lossLine);
2563
+ const boxTopY = Math.min(targetY, stopY);
2564
+ const boxBotY = Math.max(targetY, stopY);
2565
+ const targetPlace = targetY <= entryY ? "above" : "below";
2566
+ const stopPlace = stopY >= entryY ? "below" : "above";
2567
+ const centerPlace = boxBotY - entryY >= entryY - boxTopY ? "below" : "above";
2568
+ drawPositionPill(`Target: ${formatPrice(targetDist)} (${pctOfDist(targetDist)})${ticksOfDist(targetDist)}${targetAmountText}`, targetY, targetPlace, profitLine);
2569
+ drawPositionPill(`Stop: ${formatPrice(stopDist)} (${pctOfDist(stopDist)})${ticksOfDist(stopDist)}${stopAmountText}`, stopY, stopPlace, lossLine);
2564
2570
  let centerLines;
2565
2571
  let centerBg;
2566
2572
  if (positionHit) {
@@ -2573,7 +2579,7 @@ function createChart(element, options = {}) {
2573
2579
  centerLines = [line1, `Risk/reward ratio: ${rr.toFixed(2)}`];
2574
2580
  centerBg = hexToRgba(drawing.color, 0.92);
2575
2581
  }
2576
- drawPositionPill(centerLines, labelLeftX, entryY, centerBg);
2582
+ drawPositionPill(centerLines, entryY, centerPlace, centerBg);
2577
2583
  if (drawing.label) {
2578
2584
  drawDrawingLabel(drawing.label, cx, Math.min(targetY, stopY) - 4, drawing.color);
2579
2585
  }
package/dist/hyperprop-charting-library.js CHANGED
@@ -2512,29 +2512,35 @@ function createChart(element, options = {}) {
2512
2512
  };
2513
2513
  const targetAmountText = hasMoney ? `, Amount: ${formatAmount(qtyRaw * target.price * effectivePointValue)}` : "";
2514
2514
  const stopAmountText = hasMoney ? `, Amount: ${formatAmount(qtyRaw * stop.price * effectivePointValue)}` : "";
2515
- const drawPositionPill = (text, leftX2, centerY, bg) => {
2515
+ const PILL_GAP = 5;
2516
+ const drawPositionPill = (text, lineY, place, bg) => {
2516
2517
  const lines = Array.isArray(text) ? text : [text];
2517
2518
  const prevFont = ctx.font;
2518
- ctx.font = `500 11px ${mergedOptions.fontFamily}`;
2519
+ ctx.font = `500 11px ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace`;
2519
2520
  const padding = 6;
2520
2521
  const lineH = 14;
2521
2522
  const textW = Math.max(...lines.map((line) => ctx.measureText(line).width));
2522
2523
  const pillW = textW + padding * 2;
2523
2524
  const pillH = lines.length === 1 ? 18 : lines.length * lineH + 6;
2524
- const pillX = leftX2;
2525
+ const centerY = place === "above" ? lineY - pillH / 2 - PILL_GAP : lineY + pillH / 2 + PILL_GAP;
2526
+ const pillX = cx - pillW / 2;
2525
2527
  const pillY = centerY - pillH / 2;
2526
2528
  ctx.fillStyle = bg;
2527
2529
  fillRoundedRect(pillX, pillY, pillW, pillH, 4);
2528
2530
  ctx.fillStyle = labelTextColor;
2529
- ctx.textAlign = "left";
2531
+ ctx.textAlign = "center";
2530
2532
  ctx.textBaseline = "middle";
2531
2533
  const startY = pillY + pillH / 2 - (lines.length - 1) * lineH / 2;
2532
- lines.forEach((line, lineIndex) => ctx.fillText(line, pillX + padding, startY + lineIndex * lineH));
2534
+ lines.forEach((line, lineIndex) => ctx.fillText(line, cx, startY + lineIndex * lineH));
2533
2535
  ctx.font = prevFont;
2534
2536
  };
2535
- const labelLeftX = boxX0 + 10;
2536
- drawPositionPill(`Target: ${formatPrice(targetDist)} (${pctOfDist(targetDist)})${ticksOfDist(targetDist)}${targetAmountText}`, labelLeftX, targetY, profitLine);
2537
- drawPositionPill(`Stop: ${formatPrice(stopDist)} (${pctOfDist(stopDist)})${ticksOfDist(stopDist)}${stopAmountText}`, labelLeftX, stopY, lossLine);
2537
+ const boxTopY = Math.min(targetY, stopY);
2538
+ const boxBotY = Math.max(targetY, stopY);
2539
+ const targetPlace = targetY <= entryY ? "above" : "below";
2540
+ const stopPlace = stopY >= entryY ? "below" : "above";
2541
+ const centerPlace = boxBotY - entryY >= entryY - boxTopY ? "below" : "above";
2542
+ drawPositionPill(`Target: ${formatPrice(targetDist)} (${pctOfDist(targetDist)})${ticksOfDist(targetDist)}${targetAmountText}`, targetY, targetPlace, profitLine);
2543
+ drawPositionPill(`Stop: ${formatPrice(stopDist)} (${pctOfDist(stopDist)})${ticksOfDist(stopDist)}${stopAmountText}`, stopY, stopPlace, lossLine);
2538
2544
  let centerLines;
2539
2545
  let centerBg;
2540
2546
  if (positionHit) {
@@ -2547,7 +2553,7 @@ function createChart(element, options = {}) {
2547
2553
  centerLines = [line1, `Risk/reward ratio: ${rr.toFixed(2)}`];
2548
2554
  centerBg = hexToRgba(drawing.color, 0.92);
2549
2555
  }
2550
- drawPositionPill(centerLines, labelLeftX, entryY, centerBg);
2556
+ drawPositionPill(centerLines, entryY, centerPlace, centerBg);
2551
2557
  if (drawing.label) {
2552
2558
  drawDrawingLabel(drawing.label, cx, Math.min(targetY, stopY) - 4, drawing.color);
2553
2559
  }
package/dist/index.cjs CHANGED
@@ -2538,29 +2538,35 @@ function createChart(element, options = {}) {
2538
2538
  };
2539
2539
  const targetAmountText = hasMoney ? `, Amount: ${formatAmount(qtyRaw * target.price * effectivePointValue)}` : "";
2540
2540
  const stopAmountText = hasMoney ? `, Amount: ${formatAmount(qtyRaw * stop.price * effectivePointValue)}` : "";
2541
- const drawPositionPill = (text, leftX2, centerY, bg) => {
2541
+ const PILL_GAP = 5;
2542
+ const drawPositionPill = (text, lineY, place, bg) => {
2542
2543
  const lines = Array.isArray(text) ? text : [text];
2543
2544
  const prevFont = ctx.font;
2544
- ctx.font = `500 11px ${mergedOptions.fontFamily}`;
2545
+ ctx.font = `500 11px ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace`;
2545
2546
  const padding = 6;
2546
2547
  const lineH = 14;
2547
2548
  const textW = Math.max(...lines.map((line) => ctx.measureText(line).width));
2548
2549
  const pillW = textW + padding * 2;
2549
2550
  const pillH = lines.length === 1 ? 18 : lines.length * lineH + 6;
2550
- const pillX = leftX2;
2551
+ const centerY = place === "above" ? lineY - pillH / 2 - PILL_GAP : lineY + pillH / 2 + PILL_GAP;
2552
+ const pillX = cx - pillW / 2;
2551
2553
  const pillY = centerY - pillH / 2;
2552
2554
  ctx.fillStyle = bg;
2553
2555
  fillRoundedRect(pillX, pillY, pillW, pillH, 4);
2554
2556
  ctx.fillStyle = labelTextColor;
2555
- ctx.textAlign = "left";
2557
+ ctx.textAlign = "center";
2556
2558
  ctx.textBaseline = "middle";
2557
2559
  const startY = pillY + pillH / 2 - (lines.length - 1) * lineH / 2;
2558
- lines.forEach((line, lineIndex) => ctx.fillText(line, pillX + padding, startY + lineIndex * lineH));
2560
+ lines.forEach((line, lineIndex) => ctx.fillText(line, cx, startY + lineIndex * lineH));
2559
2561
  ctx.font = prevFont;
2560
2562
  };
2561
- const labelLeftX = boxX0 + 10;
2562
- drawPositionPill(`Target: ${formatPrice(targetDist)} (${pctOfDist(targetDist)})${ticksOfDist(targetDist)}${targetAmountText}`, labelLeftX, targetY, profitLine);
2563
- drawPositionPill(`Stop: ${formatPrice(stopDist)} (${pctOfDist(stopDist)})${ticksOfDist(stopDist)}${stopAmountText}`, labelLeftX, stopY, lossLine);
2563
+ const boxTopY = Math.min(targetY, stopY);
2564
+ const boxBotY = Math.max(targetY, stopY);
2565
+ const targetPlace = targetY <= entryY ? "above" : "below";
2566
+ const stopPlace = stopY >= entryY ? "below" : "above";
2567
+ const centerPlace = boxBotY - entryY >= entryY - boxTopY ? "below" : "above";
2568
+ drawPositionPill(`Target: ${formatPrice(targetDist)} (${pctOfDist(targetDist)})${ticksOfDist(targetDist)}${targetAmountText}`, targetY, targetPlace, profitLine);
2569
+ drawPositionPill(`Stop: ${formatPrice(stopDist)} (${pctOfDist(stopDist)})${ticksOfDist(stopDist)}${stopAmountText}`, stopY, stopPlace, lossLine);
2564
2570
  let centerLines;
2565
2571
  let centerBg;
2566
2572
  if (positionHit) {
@@ -2573,7 +2579,7 @@ function createChart(element, options = {}) {
2573
2579
  centerLines = [line1, `Risk/reward ratio: ${rr.toFixed(2)}`];
2574
2580
  centerBg = hexToRgba(drawing.color, 0.92);
2575
2581
  }
2576
- drawPositionPill(centerLines, labelLeftX, entryY, centerBg);
2582
+ drawPositionPill(centerLines, entryY, centerPlace, centerBg);
2577
2583
  if (drawing.label) {
2578
2584
  drawDrawingLabel(drawing.label, cx, Math.min(targetY, stopY) - 4, drawing.color);
2579
2585
  }
package/dist/index.js CHANGED
@@ -2512,29 +2512,35 @@ function createChart(element, options = {}) {
2512
2512
  };
2513
2513
  const targetAmountText = hasMoney ? `, Amount: ${formatAmount(qtyRaw * target.price * effectivePointValue)}` : "";
2514
2514
  const stopAmountText = hasMoney ? `, Amount: ${formatAmount(qtyRaw * stop.price * effectivePointValue)}` : "";
2515
- const drawPositionPill = (text, leftX2, centerY, bg) => {
2515
+ const PILL_GAP = 5;
2516
+ const drawPositionPill = (text, lineY, place, bg) => {
2516
2517
  const lines = Array.isArray(text) ? text : [text];
2517
2518
  const prevFont = ctx.font;
2518
- ctx.font = `500 11px ${mergedOptions.fontFamily}`;
2519
+ ctx.font = `500 11px ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace`;
2519
2520
  const padding = 6;
2520
2521
  const lineH = 14;
2521
2522
  const textW = Math.max(...lines.map((line) => ctx.measureText(line).width));
2522
2523
  const pillW = textW + padding * 2;
2523
2524
  const pillH = lines.length === 1 ? 18 : lines.length * lineH + 6;
2524
- const pillX = leftX2;
2525
+ const centerY = place === "above" ? lineY - pillH / 2 - PILL_GAP : lineY + pillH / 2 + PILL_GAP;
2526
+ const pillX = cx - pillW / 2;
2525
2527
  const pillY = centerY - pillH / 2;
2526
2528
  ctx.fillStyle = bg;
2527
2529
  fillRoundedRect(pillX, pillY, pillW, pillH, 4);
2528
2530
  ctx.fillStyle = labelTextColor;
2529
- ctx.textAlign = "left";
2531
+ ctx.textAlign = "center";
2530
2532
  ctx.textBaseline = "middle";
2531
2533
  const startY = pillY + pillH / 2 - (lines.length - 1) * lineH / 2;
2532
- lines.forEach((line, lineIndex) => ctx.fillText(line, pillX + padding, startY + lineIndex * lineH));
2534
+ lines.forEach((line, lineIndex) => ctx.fillText(line, cx, startY + lineIndex * lineH));
2533
2535
  ctx.font = prevFont;
2534
2536
  };
2535
- const labelLeftX = boxX0 + 10;
2536
- drawPositionPill(`Target: ${formatPrice(targetDist)} (${pctOfDist(targetDist)})${ticksOfDist(targetDist)}${targetAmountText}`, labelLeftX, targetY, profitLine);
2537
- drawPositionPill(`Stop: ${formatPrice(stopDist)} (${pctOfDist(stopDist)})${ticksOfDist(stopDist)}${stopAmountText}`, labelLeftX, stopY, lossLine);
2537
+ const boxTopY = Math.min(targetY, stopY);
2538
+ const boxBotY = Math.max(targetY, stopY);
2539
+ const targetPlace = targetY <= entryY ? "above" : "below";
2540
+ const stopPlace = stopY >= entryY ? "below" : "above";
2541
+ const centerPlace = boxBotY - entryY >= entryY - boxTopY ? "below" : "above";
2542
+ drawPositionPill(`Target: ${formatPrice(targetDist)} (${pctOfDist(targetDist)})${ticksOfDist(targetDist)}${targetAmountText}`, targetY, targetPlace, profitLine);
2543
+ drawPositionPill(`Stop: ${formatPrice(stopDist)} (${pctOfDist(stopDist)})${ticksOfDist(stopDist)}${stopAmountText}`, stopY, stopPlace, lossLine);
2538
2544
  let centerLines;
2539
2545
  let centerBg;
2540
2546
  if (positionHit) {
@@ -2547,7 +2553,7 @@ function createChart(element, options = {}) {
2547
2553
  centerLines = [line1, `Risk/reward ratio: ${rr.toFixed(2)}`];
2548
2554
  centerBg = hexToRgba(drawing.color, 0.92);
2549
2555
  }
2550
- drawPositionPill(centerLines, labelLeftX, entryY, centerBg);
2556
+ drawPositionPill(centerLines, entryY, centerPlace, centerBg);
2551
2557
  if (drawing.label) {
2552
2558
  drawDrawingLabel(drawing.label, cx, Math.min(targetY, stopY) - 4, drawing.color);
2553
2559
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "hyperprop-charting-library",
3
- "version": "0.1.96",
3
+ "version": "0.1.98",
4
4
  "description": "Lightweight TypeScript charting core",
5
5
  "type": "module",
6
6
  "main": "./dist/hyperprop-charting-library.cjs",