hyperprop-charting-library 0.1.76 → 0.1.78
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 +38 -1
- package/dist/hyperprop-charting-library.js +38 -1
- package/dist/index.cjs +38 -1
- package/dist/index.js +38 -1
- package/package.json +1 -1
|
@@ -2429,6 +2429,25 @@ function createChart(element, options = {}) {
|
|
|
2429
2429
|
ctx.fillStyle = lossFill;
|
|
2430
2430
|
ctx.fillRect(boxX0, Math.min(entryY, stopY), boxW, Math.abs(stopY - entryY));
|
|
2431
2431
|
ctx.restore();
|
|
2432
|
+
const livePoint = data[data.length - 1];
|
|
2433
|
+
if (livePoint) {
|
|
2434
|
+
const tickerOpts2 = mergedOptions.tickerLine ?? DEFAULT_OPTIONS.tickerLine;
|
|
2435
|
+
const livePrice = tickerOpts2.smoothing && smoothedTickerPrice !== null ? smoothedTickerPrice : livePoint.c;
|
|
2436
|
+
const lo = Math.min(target.price, stop.price);
|
|
2437
|
+
const hi = Math.max(target.price, stop.price);
|
|
2438
|
+
const clampedLive = Math.min(hi, Math.max(lo, livePrice));
|
|
2439
|
+
const dir = target.price - entry.price;
|
|
2440
|
+
const moved = clampedLive - entry.price;
|
|
2441
|
+
if (dir !== 0 && Math.abs(moved) > 0) {
|
|
2442
|
+
const towardTarget = moved * dir > 0;
|
|
2443
|
+
const liveY = yFromPrice(clampedLive);
|
|
2444
|
+
ctx.save();
|
|
2445
|
+
ctx.globalAlpha = draft ? 0.5 : 1;
|
|
2446
|
+
ctx.fillStyle = hexToRgba(towardTarget ? profitColor : lossColor, 0.22);
|
|
2447
|
+
ctx.fillRect(boxX0, Math.min(entryY, liveY), boxW, Math.abs(liveY - entryY));
|
|
2448
|
+
ctx.restore();
|
|
2449
|
+
}
|
|
2450
|
+
}
|
|
2432
2451
|
if (isSelected) {
|
|
2433
2452
|
ctx.save();
|
|
2434
2453
|
ctx.setLineDash([]);
|
|
@@ -2698,6 +2717,23 @@ function createChart(element, options = {}) {
|
|
|
2698
2717
|
}
|
|
2699
2718
|
}
|
|
2700
2719
|
ctx.restore();
|
|
2720
|
+
const positionAxisGutter = Math.max(0, width - chartRight);
|
|
2721
|
+
if (positionAxisGutter > 0) {
|
|
2722
|
+
for (const positionDrawing of [...drawings, ...draftDrawing ? [draftDrawing] : []]) {
|
|
2723
|
+
if (!positionDrawing.visible) continue;
|
|
2724
|
+
if (positionDrawing.type !== "long-position" && positionDrawing.type !== "short-position") continue;
|
|
2725
|
+
const targetPoint = positionDrawing.points[1];
|
|
2726
|
+
const stopPoint = positionDrawing.points[2];
|
|
2727
|
+
if (!targetPoint || !stopPoint) continue;
|
|
2728
|
+
const bandTop = clamp(Math.min(yFromPrice(targetPoint.price), yFromPrice(stopPoint.price)), chartTop, chartBottom);
|
|
2729
|
+
const bandBottom = clamp(Math.max(yFromPrice(targetPoint.price), yFromPrice(stopPoint.price)), chartTop, chartBottom);
|
|
2730
|
+
if (bandBottom - bandTop < 1) continue;
|
|
2731
|
+
ctx.save();
|
|
2732
|
+
ctx.fillStyle = "rgba(148,163,184,0.18)";
|
|
2733
|
+
ctx.fillRect(chartRight, bandTop, positionAxisGutter, bandBottom - bandTop);
|
|
2734
|
+
ctx.restore();
|
|
2735
|
+
}
|
|
2736
|
+
}
|
|
2701
2737
|
if (activeSeparateIndicators.length > 0) {
|
|
2702
2738
|
const xFromIndex = (index) => chartLeft + (index + 0.5 - xStart) / xSpan * chartWidth;
|
|
2703
2739
|
let paneTopCursor = chartBottom + paneGap;
|
|
@@ -3909,7 +3945,8 @@ function createChart(element, options = {}) {
|
|
|
3909
3945
|
if (activeDrawingTool === "long-position" || activeDrawingTool === "short-position") {
|
|
3910
3946
|
const isLong = activeDrawingTool === "long-position";
|
|
3911
3947
|
const tick = getConfiguredTickSize();
|
|
3912
|
-
const
|
|
3948
|
+
const visibleRange = drawState.yMax - drawState.yMin;
|
|
3949
|
+
const priceOffset = visibleRange > 0 ? visibleRange * 0.12 : tick > 0 ? tick * 60 : Math.abs(point.price) * 0.025 || 1;
|
|
3913
3950
|
const width2 = Math.max(8, Math.round(xSpan * 0.2));
|
|
3914
3951
|
const entryPrice = point.price;
|
|
3915
3952
|
const targetPrice = isLong ? entryPrice + priceOffset : entryPrice - priceOffset;
|
|
@@ -2403,6 +2403,25 @@ function createChart(element, options = {}) {
|
|
|
2403
2403
|
ctx.fillStyle = lossFill;
|
|
2404
2404
|
ctx.fillRect(boxX0, Math.min(entryY, stopY), boxW, Math.abs(stopY - entryY));
|
|
2405
2405
|
ctx.restore();
|
|
2406
|
+
const livePoint = data[data.length - 1];
|
|
2407
|
+
if (livePoint) {
|
|
2408
|
+
const tickerOpts2 = mergedOptions.tickerLine ?? DEFAULT_OPTIONS.tickerLine;
|
|
2409
|
+
const livePrice = tickerOpts2.smoothing && smoothedTickerPrice !== null ? smoothedTickerPrice : livePoint.c;
|
|
2410
|
+
const lo = Math.min(target.price, stop.price);
|
|
2411
|
+
const hi = Math.max(target.price, stop.price);
|
|
2412
|
+
const clampedLive = Math.min(hi, Math.max(lo, livePrice));
|
|
2413
|
+
const dir = target.price - entry.price;
|
|
2414
|
+
const moved = clampedLive - entry.price;
|
|
2415
|
+
if (dir !== 0 && Math.abs(moved) > 0) {
|
|
2416
|
+
const towardTarget = moved * dir > 0;
|
|
2417
|
+
const liveY = yFromPrice(clampedLive);
|
|
2418
|
+
ctx.save();
|
|
2419
|
+
ctx.globalAlpha = draft ? 0.5 : 1;
|
|
2420
|
+
ctx.fillStyle = hexToRgba(towardTarget ? profitColor : lossColor, 0.22);
|
|
2421
|
+
ctx.fillRect(boxX0, Math.min(entryY, liveY), boxW, Math.abs(liveY - entryY));
|
|
2422
|
+
ctx.restore();
|
|
2423
|
+
}
|
|
2424
|
+
}
|
|
2406
2425
|
if (isSelected) {
|
|
2407
2426
|
ctx.save();
|
|
2408
2427
|
ctx.setLineDash([]);
|
|
@@ -2672,6 +2691,23 @@ function createChart(element, options = {}) {
|
|
|
2672
2691
|
}
|
|
2673
2692
|
}
|
|
2674
2693
|
ctx.restore();
|
|
2694
|
+
const positionAxisGutter = Math.max(0, width - chartRight);
|
|
2695
|
+
if (positionAxisGutter > 0) {
|
|
2696
|
+
for (const positionDrawing of [...drawings, ...draftDrawing ? [draftDrawing] : []]) {
|
|
2697
|
+
if (!positionDrawing.visible) continue;
|
|
2698
|
+
if (positionDrawing.type !== "long-position" && positionDrawing.type !== "short-position") continue;
|
|
2699
|
+
const targetPoint = positionDrawing.points[1];
|
|
2700
|
+
const stopPoint = positionDrawing.points[2];
|
|
2701
|
+
if (!targetPoint || !stopPoint) continue;
|
|
2702
|
+
const bandTop = clamp(Math.min(yFromPrice(targetPoint.price), yFromPrice(stopPoint.price)), chartTop, chartBottom);
|
|
2703
|
+
const bandBottom = clamp(Math.max(yFromPrice(targetPoint.price), yFromPrice(stopPoint.price)), chartTop, chartBottom);
|
|
2704
|
+
if (bandBottom - bandTop < 1) continue;
|
|
2705
|
+
ctx.save();
|
|
2706
|
+
ctx.fillStyle = "rgba(148,163,184,0.18)";
|
|
2707
|
+
ctx.fillRect(chartRight, bandTop, positionAxisGutter, bandBottom - bandTop);
|
|
2708
|
+
ctx.restore();
|
|
2709
|
+
}
|
|
2710
|
+
}
|
|
2675
2711
|
if (activeSeparateIndicators.length > 0) {
|
|
2676
2712
|
const xFromIndex = (index) => chartLeft + (index + 0.5 - xStart) / xSpan * chartWidth;
|
|
2677
2713
|
let paneTopCursor = chartBottom + paneGap;
|
|
@@ -3883,7 +3919,8 @@ function createChart(element, options = {}) {
|
|
|
3883
3919
|
if (activeDrawingTool === "long-position" || activeDrawingTool === "short-position") {
|
|
3884
3920
|
const isLong = activeDrawingTool === "long-position";
|
|
3885
3921
|
const tick = getConfiguredTickSize();
|
|
3886
|
-
const
|
|
3922
|
+
const visibleRange = drawState.yMax - drawState.yMin;
|
|
3923
|
+
const priceOffset = visibleRange > 0 ? visibleRange * 0.12 : tick > 0 ? tick * 60 : Math.abs(point.price) * 0.025 || 1;
|
|
3887
3924
|
const width2 = Math.max(8, Math.round(xSpan * 0.2));
|
|
3888
3925
|
const entryPrice = point.price;
|
|
3889
3926
|
const targetPrice = isLong ? entryPrice + priceOffset : entryPrice - priceOffset;
|
package/dist/index.cjs
CHANGED
|
@@ -2429,6 +2429,25 @@ function createChart(element, options = {}) {
|
|
|
2429
2429
|
ctx.fillStyle = lossFill;
|
|
2430
2430
|
ctx.fillRect(boxX0, Math.min(entryY, stopY), boxW, Math.abs(stopY - entryY));
|
|
2431
2431
|
ctx.restore();
|
|
2432
|
+
const livePoint = data[data.length - 1];
|
|
2433
|
+
if (livePoint) {
|
|
2434
|
+
const tickerOpts2 = mergedOptions.tickerLine ?? DEFAULT_OPTIONS.tickerLine;
|
|
2435
|
+
const livePrice = tickerOpts2.smoothing && smoothedTickerPrice !== null ? smoothedTickerPrice : livePoint.c;
|
|
2436
|
+
const lo = Math.min(target.price, stop.price);
|
|
2437
|
+
const hi = Math.max(target.price, stop.price);
|
|
2438
|
+
const clampedLive = Math.min(hi, Math.max(lo, livePrice));
|
|
2439
|
+
const dir = target.price - entry.price;
|
|
2440
|
+
const moved = clampedLive - entry.price;
|
|
2441
|
+
if (dir !== 0 && Math.abs(moved) > 0) {
|
|
2442
|
+
const towardTarget = moved * dir > 0;
|
|
2443
|
+
const liveY = yFromPrice(clampedLive);
|
|
2444
|
+
ctx.save();
|
|
2445
|
+
ctx.globalAlpha = draft ? 0.5 : 1;
|
|
2446
|
+
ctx.fillStyle = hexToRgba(towardTarget ? profitColor : lossColor, 0.22);
|
|
2447
|
+
ctx.fillRect(boxX0, Math.min(entryY, liveY), boxW, Math.abs(liveY - entryY));
|
|
2448
|
+
ctx.restore();
|
|
2449
|
+
}
|
|
2450
|
+
}
|
|
2432
2451
|
if (isSelected) {
|
|
2433
2452
|
ctx.save();
|
|
2434
2453
|
ctx.setLineDash([]);
|
|
@@ -2698,6 +2717,23 @@ function createChart(element, options = {}) {
|
|
|
2698
2717
|
}
|
|
2699
2718
|
}
|
|
2700
2719
|
ctx.restore();
|
|
2720
|
+
const positionAxisGutter = Math.max(0, width - chartRight);
|
|
2721
|
+
if (positionAxisGutter > 0) {
|
|
2722
|
+
for (const positionDrawing of [...drawings, ...draftDrawing ? [draftDrawing] : []]) {
|
|
2723
|
+
if (!positionDrawing.visible) continue;
|
|
2724
|
+
if (positionDrawing.type !== "long-position" && positionDrawing.type !== "short-position") continue;
|
|
2725
|
+
const targetPoint = positionDrawing.points[1];
|
|
2726
|
+
const stopPoint = positionDrawing.points[2];
|
|
2727
|
+
if (!targetPoint || !stopPoint) continue;
|
|
2728
|
+
const bandTop = clamp(Math.min(yFromPrice(targetPoint.price), yFromPrice(stopPoint.price)), chartTop, chartBottom);
|
|
2729
|
+
const bandBottom = clamp(Math.max(yFromPrice(targetPoint.price), yFromPrice(stopPoint.price)), chartTop, chartBottom);
|
|
2730
|
+
if (bandBottom - bandTop < 1) continue;
|
|
2731
|
+
ctx.save();
|
|
2732
|
+
ctx.fillStyle = "rgba(148,163,184,0.18)";
|
|
2733
|
+
ctx.fillRect(chartRight, bandTop, positionAxisGutter, bandBottom - bandTop);
|
|
2734
|
+
ctx.restore();
|
|
2735
|
+
}
|
|
2736
|
+
}
|
|
2701
2737
|
if (activeSeparateIndicators.length > 0) {
|
|
2702
2738
|
const xFromIndex = (index) => chartLeft + (index + 0.5 - xStart) / xSpan * chartWidth;
|
|
2703
2739
|
let paneTopCursor = chartBottom + paneGap;
|
|
@@ -3909,7 +3945,8 @@ function createChart(element, options = {}) {
|
|
|
3909
3945
|
if (activeDrawingTool === "long-position" || activeDrawingTool === "short-position") {
|
|
3910
3946
|
const isLong = activeDrawingTool === "long-position";
|
|
3911
3947
|
const tick = getConfiguredTickSize();
|
|
3912
|
-
const
|
|
3948
|
+
const visibleRange = drawState.yMax - drawState.yMin;
|
|
3949
|
+
const priceOffset = visibleRange > 0 ? visibleRange * 0.12 : tick > 0 ? tick * 60 : Math.abs(point.price) * 0.025 || 1;
|
|
3913
3950
|
const width2 = Math.max(8, Math.round(xSpan * 0.2));
|
|
3914
3951
|
const entryPrice = point.price;
|
|
3915
3952
|
const targetPrice = isLong ? entryPrice + priceOffset : entryPrice - priceOffset;
|
package/dist/index.js
CHANGED
|
@@ -2403,6 +2403,25 @@ function createChart(element, options = {}) {
|
|
|
2403
2403
|
ctx.fillStyle = lossFill;
|
|
2404
2404
|
ctx.fillRect(boxX0, Math.min(entryY, stopY), boxW, Math.abs(stopY - entryY));
|
|
2405
2405
|
ctx.restore();
|
|
2406
|
+
const livePoint = data[data.length - 1];
|
|
2407
|
+
if (livePoint) {
|
|
2408
|
+
const tickerOpts2 = mergedOptions.tickerLine ?? DEFAULT_OPTIONS.tickerLine;
|
|
2409
|
+
const livePrice = tickerOpts2.smoothing && smoothedTickerPrice !== null ? smoothedTickerPrice : livePoint.c;
|
|
2410
|
+
const lo = Math.min(target.price, stop.price);
|
|
2411
|
+
const hi = Math.max(target.price, stop.price);
|
|
2412
|
+
const clampedLive = Math.min(hi, Math.max(lo, livePrice));
|
|
2413
|
+
const dir = target.price - entry.price;
|
|
2414
|
+
const moved = clampedLive - entry.price;
|
|
2415
|
+
if (dir !== 0 && Math.abs(moved) > 0) {
|
|
2416
|
+
const towardTarget = moved * dir > 0;
|
|
2417
|
+
const liveY = yFromPrice(clampedLive);
|
|
2418
|
+
ctx.save();
|
|
2419
|
+
ctx.globalAlpha = draft ? 0.5 : 1;
|
|
2420
|
+
ctx.fillStyle = hexToRgba(towardTarget ? profitColor : lossColor, 0.22);
|
|
2421
|
+
ctx.fillRect(boxX0, Math.min(entryY, liveY), boxW, Math.abs(liveY - entryY));
|
|
2422
|
+
ctx.restore();
|
|
2423
|
+
}
|
|
2424
|
+
}
|
|
2406
2425
|
if (isSelected) {
|
|
2407
2426
|
ctx.save();
|
|
2408
2427
|
ctx.setLineDash([]);
|
|
@@ -2672,6 +2691,23 @@ function createChart(element, options = {}) {
|
|
|
2672
2691
|
}
|
|
2673
2692
|
}
|
|
2674
2693
|
ctx.restore();
|
|
2694
|
+
const positionAxisGutter = Math.max(0, width - chartRight);
|
|
2695
|
+
if (positionAxisGutter > 0) {
|
|
2696
|
+
for (const positionDrawing of [...drawings, ...draftDrawing ? [draftDrawing] : []]) {
|
|
2697
|
+
if (!positionDrawing.visible) continue;
|
|
2698
|
+
if (positionDrawing.type !== "long-position" && positionDrawing.type !== "short-position") continue;
|
|
2699
|
+
const targetPoint = positionDrawing.points[1];
|
|
2700
|
+
const stopPoint = positionDrawing.points[2];
|
|
2701
|
+
if (!targetPoint || !stopPoint) continue;
|
|
2702
|
+
const bandTop = clamp(Math.min(yFromPrice(targetPoint.price), yFromPrice(stopPoint.price)), chartTop, chartBottom);
|
|
2703
|
+
const bandBottom = clamp(Math.max(yFromPrice(targetPoint.price), yFromPrice(stopPoint.price)), chartTop, chartBottom);
|
|
2704
|
+
if (bandBottom - bandTop < 1) continue;
|
|
2705
|
+
ctx.save();
|
|
2706
|
+
ctx.fillStyle = "rgba(148,163,184,0.18)";
|
|
2707
|
+
ctx.fillRect(chartRight, bandTop, positionAxisGutter, bandBottom - bandTop);
|
|
2708
|
+
ctx.restore();
|
|
2709
|
+
}
|
|
2710
|
+
}
|
|
2675
2711
|
if (activeSeparateIndicators.length > 0) {
|
|
2676
2712
|
const xFromIndex = (index) => chartLeft + (index + 0.5 - xStart) / xSpan * chartWidth;
|
|
2677
2713
|
let paneTopCursor = chartBottom + paneGap;
|
|
@@ -3883,7 +3919,8 @@ function createChart(element, options = {}) {
|
|
|
3883
3919
|
if (activeDrawingTool === "long-position" || activeDrawingTool === "short-position") {
|
|
3884
3920
|
const isLong = activeDrawingTool === "long-position";
|
|
3885
3921
|
const tick = getConfiguredTickSize();
|
|
3886
|
-
const
|
|
3922
|
+
const visibleRange = drawState.yMax - drawState.yMin;
|
|
3923
|
+
const priceOffset = visibleRange > 0 ? visibleRange * 0.12 : tick > 0 ? tick * 60 : Math.abs(point.price) * 0.025 || 1;
|
|
3887
3924
|
const width2 = Math.max(8, Math.round(xSpan * 0.2));
|
|
3888
3925
|
const entryPrice = point.price;
|
|
3889
3926
|
const targetPrice = isLong ? entryPrice + priceOffset : entryPrice - priceOffset;
|