hyperprop-charting-library 0.1.92 → 0.1.94

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 +20 -13
  2. package/dist/hyperprop-charting-library.js +20 -13
  3. package/dist/index.cjs +20 -13
  4. package/dist/index.js +20 -13
  5. package/package.json +1 -1
package/dist/hyperprop-charting-library.cjs CHANGED
@@ -2524,31 +2524,38 @@ function createChart(element, options = {}) {
2524
2524
  const qtyRaw = riskAmount > 0 && stopDist > 0 ? riskAmount / (stopDist * effectivePointValue) : 0;
2525
2525
  const hasMoney = qtyRaw > 0 && Number.isFinite(qtyRaw);
2526
2526
  const qtyText = hasMoney ? qtyRaw.toFixed(Math.max(0, drawing.qtyPrecision)) : "";
2527
- const formatAmount = (value) => value.toFixed(2);
2527
+ const formatAmount = (value) => {
2528
+ const abs = Math.abs(value);
2529
+ if (abs >= 1e9) return `${(value / 1e9).toFixed(2)}B`;
2530
+ if (abs >= 1e6) return `${(value / 1e6).toFixed(2)}M`;
2531
+ if (abs >= 1e3) return `${(value / 1e3).toFixed(2)}K`;
2532
+ return value.toFixed(2);
2533
+ };
2528
2534
  const targetAmountText = hasMoney ? `, Amount: ${formatAmount(qtyRaw * target.price * effectivePointValue)}` : "";
2529
2535
  const stopAmountText = hasMoney ? `, Amount: ${formatAmount(qtyRaw * stop.price * effectivePointValue)}` : "";
2530
- const drawPositionPill = (text, centerX, centerY, bg) => {
2536
+ const drawPositionPill = (text, leftX2, centerY, bg) => {
2531
2537
  const lines = Array.isArray(text) ? text : [text];
2532
2538
  const prevFont = ctx.font;
2533
- ctx.font = `500 11px ${mergedOptions.fontFamily}`;
2534
- const padding = 6;
2535
- const lineH = 14;
2539
+ ctx.font = `500 10px ${mergedOptions.fontFamily}`;
2540
+ const padding = 5;
2541
+ const lineH = 12;
2536
2542
  const textW = Math.max(...lines.map((line) => ctx.measureText(line).width));
2537
2543
  const pillW = textW + padding * 2;
2538
- const pillH = lines.length === 1 ? 18 : lines.length * lineH + 6;
2539
- const pillX = centerX - pillW / 2;
2544
+ const pillH = lines.length === 1 ? 15 : lines.length * lineH + 5;
2545
+ const pillX = leftX2;
2540
2546
  const pillY = centerY - pillH / 2;
2541
2547
  ctx.fillStyle = bg;
2542
- fillRoundedRect(pillX, pillY, pillW, pillH, 4);
2548
+ fillRoundedRect(pillX, pillY, pillW, pillH, 3);
2543
2549
  ctx.fillStyle = labelTextColor;
2544
- ctx.textAlign = "center";
2550
+ ctx.textAlign = "left";
2545
2551
  ctx.textBaseline = "middle";
2546
2552
  const startY = pillY + pillH / 2 - (lines.length - 1) * lineH / 2;
2547
- lines.forEach((line, lineIndex) => ctx.fillText(line, centerX, startY + lineIndex * lineH));
2553
+ lines.forEach((line, lineIndex) => ctx.fillText(line, pillX + padding, startY + lineIndex * lineH));
2548
2554
  ctx.font = prevFont;
2549
2555
  };
2550
- drawPositionPill(`Target: ${formatPrice(targetDist)} (${pctOfDist(targetDist)})${ticksOfDist(targetDist)}${targetAmountText}`, cx, targetY, profitLine);
2551
- drawPositionPill(`Stop: ${formatPrice(stopDist)} (${pctOfDist(stopDist)})${ticksOfDist(stopDist)}${stopAmountText}`, cx, stopY, lossLine);
2556
+ const labelLeftX = boxX0 + 10;
2557
+ drawPositionPill(`Target: ${formatPrice(targetDist)} (${pctOfDist(targetDist)})${ticksOfDist(targetDist)}${targetAmountText}`, labelLeftX, targetY, profitLine);
2558
+ drawPositionPill(`Stop: ${formatPrice(stopDist)} (${pctOfDist(stopDist)})${ticksOfDist(stopDist)}${stopAmountText}`, labelLeftX, stopY, lossLine);
2552
2559
  let centerLines;
2553
2560
  let centerBg;
2554
2561
  if (positionHit) {
@@ -2561,7 +2568,7 @@ function createChart(element, options = {}) {
2561
2568
  centerLines = [line1, `Risk/reward ratio: ${rr.toFixed(2)}`];
2562
2569
  centerBg = hexToRgba(drawing.color, 0.92);
2563
2570
  }
2564
- drawPositionPill(centerLines, cx, entryY, centerBg);
2571
+ drawPositionPill(centerLines, labelLeftX, entryY, centerBg);
2565
2572
  if (drawing.label) {
2566
2573
  drawDrawingLabel(drawing.label, cx, Math.min(targetY, stopY) - 4, drawing.color);
2567
2574
  }
package/dist/hyperprop-charting-library.js CHANGED
@@ -2498,31 +2498,38 @@ function createChart(element, options = {}) {
2498
2498
  const qtyRaw = riskAmount > 0 && stopDist > 0 ? riskAmount / (stopDist * effectivePointValue) : 0;
2499
2499
  const hasMoney = qtyRaw > 0 && Number.isFinite(qtyRaw);
2500
2500
  const qtyText = hasMoney ? qtyRaw.toFixed(Math.max(0, drawing.qtyPrecision)) : "";
2501
- const formatAmount = (value) => value.toFixed(2);
2501
+ const formatAmount = (value) => {
2502
+ const abs = Math.abs(value);
2503
+ if (abs >= 1e9) return `${(value / 1e9).toFixed(2)}B`;
2504
+ if (abs >= 1e6) return `${(value / 1e6).toFixed(2)}M`;
2505
+ if (abs >= 1e3) return `${(value / 1e3).toFixed(2)}K`;
2506
+ return value.toFixed(2);
2507
+ };
2502
2508
  const targetAmountText = hasMoney ? `, Amount: ${formatAmount(qtyRaw * target.price * effectivePointValue)}` : "";
2503
2509
  const stopAmountText = hasMoney ? `, Amount: ${formatAmount(qtyRaw * stop.price * effectivePointValue)}` : "";
2504
- const drawPositionPill = (text, centerX, centerY, bg) => {
2510
+ const drawPositionPill = (text, leftX2, centerY, bg) => {
2505
2511
  const lines = Array.isArray(text) ? text : [text];
2506
2512
  const prevFont = ctx.font;
2507
- ctx.font = `500 11px ${mergedOptions.fontFamily}`;
2508
- const padding = 6;
2509
- const lineH = 14;
2513
+ ctx.font = `500 10px ${mergedOptions.fontFamily}`;
2514
+ const padding = 5;
2515
+ const lineH = 12;
2510
2516
  const textW = Math.max(...lines.map((line) => ctx.measureText(line).width));
2511
2517
  const pillW = textW + padding * 2;
2512
- const pillH = lines.length === 1 ? 18 : lines.length * lineH + 6;
2513
- const pillX = centerX - pillW / 2;
2518
+ const pillH = lines.length === 1 ? 15 : lines.length * lineH + 5;
2519
+ const pillX = leftX2;
2514
2520
  const pillY = centerY - pillH / 2;
2515
2521
  ctx.fillStyle = bg;
2516
- fillRoundedRect(pillX, pillY, pillW, pillH, 4);
2522
+ fillRoundedRect(pillX, pillY, pillW, pillH, 3);
2517
2523
  ctx.fillStyle = labelTextColor;
2518
- ctx.textAlign = "center";
2524
+ ctx.textAlign = "left";
2519
2525
  ctx.textBaseline = "middle";
2520
2526
  const startY = pillY + pillH / 2 - (lines.length - 1) * lineH / 2;
2521
- lines.forEach((line, lineIndex) => ctx.fillText(line, centerX, startY + lineIndex * lineH));
2527
+ lines.forEach((line, lineIndex) => ctx.fillText(line, pillX + padding, startY + lineIndex * lineH));
2522
2528
  ctx.font = prevFont;
2523
2529
  };
2524
- drawPositionPill(`Target: ${formatPrice(targetDist)} (${pctOfDist(targetDist)})${ticksOfDist(targetDist)}${targetAmountText}`, cx, targetY, profitLine);
2525
- drawPositionPill(`Stop: ${formatPrice(stopDist)} (${pctOfDist(stopDist)})${ticksOfDist(stopDist)}${stopAmountText}`, cx, stopY, lossLine);
2530
+ const labelLeftX = boxX0 + 10;
2531
+ drawPositionPill(`Target: ${formatPrice(targetDist)} (${pctOfDist(targetDist)})${ticksOfDist(targetDist)}${targetAmountText}`, labelLeftX, targetY, profitLine);
2532
+ drawPositionPill(`Stop: ${formatPrice(stopDist)} (${pctOfDist(stopDist)})${ticksOfDist(stopDist)}${stopAmountText}`, labelLeftX, stopY, lossLine);
2526
2533
  let centerLines;
2527
2534
  let centerBg;
2528
2535
  if (positionHit) {
@@ -2535,7 +2542,7 @@ function createChart(element, options = {}) {
2535
2542
  centerLines = [line1, `Risk/reward ratio: ${rr.toFixed(2)}`];
2536
2543
  centerBg = hexToRgba(drawing.color, 0.92);
2537
2544
  }
2538
- drawPositionPill(centerLines, cx, entryY, centerBg);
2545
+ drawPositionPill(centerLines, labelLeftX, entryY, centerBg);
2539
2546
  if (drawing.label) {
2540
2547
  drawDrawingLabel(drawing.label, cx, Math.min(targetY, stopY) - 4, drawing.color);
2541
2548
  }
package/dist/index.cjs CHANGED
@@ -2524,31 +2524,38 @@ function createChart(element, options = {}) {
2524
2524
  const qtyRaw = riskAmount > 0 && stopDist > 0 ? riskAmount / (stopDist * effectivePointValue) : 0;
2525
2525
  const hasMoney = qtyRaw > 0 && Number.isFinite(qtyRaw);
2526
2526
  const qtyText = hasMoney ? qtyRaw.toFixed(Math.max(0, drawing.qtyPrecision)) : "";
2527
- const formatAmount = (value) => value.toFixed(2);
2527
+ const formatAmount = (value) => {
2528
+ const abs = Math.abs(value);
2529
+ if (abs >= 1e9) return `${(value / 1e9).toFixed(2)}B`;
2530
+ if (abs >= 1e6) return `${(value / 1e6).toFixed(2)}M`;
2531
+ if (abs >= 1e3) return `${(value / 1e3).toFixed(2)}K`;
2532
+ return value.toFixed(2);
2533
+ };
2528
2534
  const targetAmountText = hasMoney ? `, Amount: ${formatAmount(qtyRaw * target.price * effectivePointValue)}` : "";
2529
2535
  const stopAmountText = hasMoney ? `, Amount: ${formatAmount(qtyRaw * stop.price * effectivePointValue)}` : "";
2530
- const drawPositionPill = (text, centerX, centerY, bg) => {
2536
+ const drawPositionPill = (text, leftX2, centerY, bg) => {
2531
2537
  const lines = Array.isArray(text) ? text : [text];
2532
2538
  const prevFont = ctx.font;
2533
- ctx.font = `500 11px ${mergedOptions.fontFamily}`;
2534
- const padding = 6;
2535
- const lineH = 14;
2539
+ ctx.font = `500 10px ${mergedOptions.fontFamily}`;
2540
+ const padding = 5;
2541
+ const lineH = 12;
2536
2542
  const textW = Math.max(...lines.map((line) => ctx.measureText(line).width));
2537
2543
  const pillW = textW + padding * 2;
2538
- const pillH = lines.length === 1 ? 18 : lines.length * lineH + 6;
2539
- const pillX = centerX - pillW / 2;
2544
+ const pillH = lines.length === 1 ? 15 : lines.length * lineH + 5;
2545
+ const pillX = leftX2;
2540
2546
  const pillY = centerY - pillH / 2;
2541
2547
  ctx.fillStyle = bg;
2542
- fillRoundedRect(pillX, pillY, pillW, pillH, 4);
2548
+ fillRoundedRect(pillX, pillY, pillW, pillH, 3);
2543
2549
  ctx.fillStyle = labelTextColor;
2544
- ctx.textAlign = "center";
2550
+ ctx.textAlign = "left";
2545
2551
  ctx.textBaseline = "middle";
2546
2552
  const startY = pillY + pillH / 2 - (lines.length - 1) * lineH / 2;
2547
- lines.forEach((line, lineIndex) => ctx.fillText(line, centerX, startY + lineIndex * lineH));
2553
+ lines.forEach((line, lineIndex) => ctx.fillText(line, pillX + padding, startY + lineIndex * lineH));
2548
2554
  ctx.font = prevFont;
2549
2555
  };
2550
- drawPositionPill(`Target: ${formatPrice(targetDist)} (${pctOfDist(targetDist)})${ticksOfDist(targetDist)}${targetAmountText}`, cx, targetY, profitLine);
2551
- drawPositionPill(`Stop: ${formatPrice(stopDist)} (${pctOfDist(stopDist)})${ticksOfDist(stopDist)}${stopAmountText}`, cx, stopY, lossLine);
2556
+ const labelLeftX = boxX0 + 10;
2557
+ drawPositionPill(`Target: ${formatPrice(targetDist)} (${pctOfDist(targetDist)})${ticksOfDist(targetDist)}${targetAmountText}`, labelLeftX, targetY, profitLine);
2558
+ drawPositionPill(`Stop: ${formatPrice(stopDist)} (${pctOfDist(stopDist)})${ticksOfDist(stopDist)}${stopAmountText}`, labelLeftX, stopY, lossLine);
2552
2559
  let centerLines;
2553
2560
  let centerBg;
2554
2561
  if (positionHit) {
@@ -2561,7 +2568,7 @@ function createChart(element, options = {}) {
2561
2568
  centerLines = [line1, `Risk/reward ratio: ${rr.toFixed(2)}`];
2562
2569
  centerBg = hexToRgba(drawing.color, 0.92);
2563
2570
  }
2564
- drawPositionPill(centerLines, cx, entryY, centerBg);
2571
+ drawPositionPill(centerLines, labelLeftX, entryY, centerBg);
2565
2572
  if (drawing.label) {
2566
2573
  drawDrawingLabel(drawing.label, cx, Math.min(targetY, stopY) - 4, drawing.color);
2567
2574
  }
package/dist/index.js CHANGED
@@ -2498,31 +2498,38 @@ function createChart(element, options = {}) {
2498
2498
  const qtyRaw = riskAmount > 0 && stopDist > 0 ? riskAmount / (stopDist * effectivePointValue) : 0;
2499
2499
  const hasMoney = qtyRaw > 0 && Number.isFinite(qtyRaw);
2500
2500
  const qtyText = hasMoney ? qtyRaw.toFixed(Math.max(0, drawing.qtyPrecision)) : "";
2501
- const formatAmount = (value) => value.toFixed(2);
2501
+ const formatAmount = (value) => {
2502
+ const abs = Math.abs(value);
2503
+ if (abs >= 1e9) return `${(value / 1e9).toFixed(2)}B`;
2504
+ if (abs >= 1e6) return `${(value / 1e6).toFixed(2)}M`;
2505
+ if (abs >= 1e3) return `${(value / 1e3).toFixed(2)}K`;
2506
+ return value.toFixed(2);
2507
+ };
2502
2508
  const targetAmountText = hasMoney ? `, Amount: ${formatAmount(qtyRaw * target.price * effectivePointValue)}` : "";
2503
2509
  const stopAmountText = hasMoney ? `, Amount: ${formatAmount(qtyRaw * stop.price * effectivePointValue)}` : "";
2504
- const drawPositionPill = (text, centerX, centerY, bg) => {
2510
+ const drawPositionPill = (text, leftX2, centerY, bg) => {
2505
2511
  const lines = Array.isArray(text) ? text : [text];
2506
2512
  const prevFont = ctx.font;
2507
- ctx.font = `500 11px ${mergedOptions.fontFamily}`;
2508
- const padding = 6;
2509
- const lineH = 14;
2513
+ ctx.font = `500 10px ${mergedOptions.fontFamily}`;
2514
+ const padding = 5;
2515
+ const lineH = 12;
2510
2516
  const textW = Math.max(...lines.map((line) => ctx.measureText(line).width));
2511
2517
  const pillW = textW + padding * 2;
2512
- const pillH = lines.length === 1 ? 18 : lines.length * lineH + 6;
2513
- const pillX = centerX - pillW / 2;
2518
+ const pillH = lines.length === 1 ? 15 : lines.length * lineH + 5;
2519
+ const pillX = leftX2;
2514
2520
  const pillY = centerY - pillH / 2;
2515
2521
  ctx.fillStyle = bg;
2516
- fillRoundedRect(pillX, pillY, pillW, pillH, 4);
2522
+ fillRoundedRect(pillX, pillY, pillW, pillH, 3);
2517
2523
  ctx.fillStyle = labelTextColor;
2518
- ctx.textAlign = "center";
2524
+ ctx.textAlign = "left";
2519
2525
  ctx.textBaseline = "middle";
2520
2526
  const startY = pillY + pillH / 2 - (lines.length - 1) * lineH / 2;
2521
- lines.forEach((line, lineIndex) => ctx.fillText(line, centerX, startY + lineIndex * lineH));
2527
+ lines.forEach((line, lineIndex) => ctx.fillText(line, pillX + padding, startY + lineIndex * lineH));
2522
2528
  ctx.font = prevFont;
2523
2529
  };
2524
- drawPositionPill(`Target: ${formatPrice(targetDist)} (${pctOfDist(targetDist)})${ticksOfDist(targetDist)}${targetAmountText}`, cx, targetY, profitLine);
2525
- drawPositionPill(`Stop: ${formatPrice(stopDist)} (${pctOfDist(stopDist)})${ticksOfDist(stopDist)}${stopAmountText}`, cx, stopY, lossLine);
2530
+ const labelLeftX = boxX0 + 10;
2531
+ drawPositionPill(`Target: ${formatPrice(targetDist)} (${pctOfDist(targetDist)})${ticksOfDist(targetDist)}${targetAmountText}`, labelLeftX, targetY, profitLine);
2532
+ drawPositionPill(`Stop: ${formatPrice(stopDist)} (${pctOfDist(stopDist)})${ticksOfDist(stopDist)}${stopAmountText}`, labelLeftX, stopY, lossLine);
2526
2533
  let centerLines;
2527
2534
  let centerBg;
2528
2535
  if (positionHit) {
@@ -2535,7 +2542,7 @@ function createChart(element, options = {}) {
2535
2542
  centerLines = [line1, `Risk/reward ratio: ${rr.toFixed(2)}`];
2536
2543
  centerBg = hexToRgba(drawing.color, 0.92);
2537
2544
  }
2538
- drawPositionPill(centerLines, cx, entryY, centerBg);
2545
+ drawPositionPill(centerLines, labelLeftX, entryY, centerBg);
2539
2546
  if (drawing.label) {
2540
2547
  drawDrawingLabel(drawing.label, cx, Math.min(targetY, stopY) - 4, drawing.color);
2541
2548
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "hyperprop-charting-library",
3
- "version": "0.1.92",
3
+ "version": "0.1.94",
4
4
  "description": "Lightweight TypeScript charting core",
5
5
  "type": "module",
6
6
  "main": "./dist/hyperprop-charting-library.cjs",