hyperprop-charting-library 0.1.116 → 0.1.118
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 +10 -9
- package/dist/hyperprop-charting-library.js +10 -9
- package/dist/index.cjs +10 -9
- package/dist/index.js +10 -9
- package/package.json +1 -1
|
@@ -1146,7 +1146,7 @@ function createChart(element, options = {}) {
|
|
|
1146
1146
|
canvas.setAttribute("draggable", "false");
|
|
1147
1147
|
element.innerHTML = "";
|
|
1148
1148
|
element.appendChild(canvas);
|
|
1149
|
-
const margin = { top: 16, right: 72, bottom:
|
|
1149
|
+
const margin = { top: 16, right: 72, bottom: 26, left: 12 };
|
|
1150
1150
|
let cachedRightMargin = margin.right;
|
|
1151
1151
|
const minVisibleBars = Math.max(1, Math.floor(mergedOptions.minVisibleBars));
|
|
1152
1152
|
const maxVisibleBars = Math.max(minVisibleBars, Math.floor(mergedOptions.maxVisibleBars));
|
|
@@ -3562,7 +3562,7 @@ function createChart(element, options = {}) {
|
|
|
3562
3562
|
prevAxisTickTime = tickTime;
|
|
3563
3563
|
const prevFont = ctx.font;
|
|
3564
3564
|
ctx.font = `${xAxisFontSize}px ${mergedOptions.fontFamily}`;
|
|
3565
|
-
drawText(timeLabel, x, fullChartBottom +
|
|
3565
|
+
drawText(timeLabel, x, (fullChartBottom + height) / 2, "center", "middle", xAxis.textColor);
|
|
3566
3566
|
ctx.font = prevFont;
|
|
3567
3567
|
}
|
|
3568
3568
|
if (labels.visible && labels.showCountdownToBarClose && lastPoint) {
|
|
@@ -3572,7 +3572,7 @@ function createChart(element, options = {}) {
|
|
|
3572
3572
|
const countdownText = formatDuration(countdownMs);
|
|
3573
3573
|
const prevFont = ctx.font;
|
|
3574
3574
|
ctx.font = `${xAxisFontSize}px ${mergedOptions.fontFamily}`;
|
|
3575
|
-
drawText(countdownText, chartRight + 6, fullChartBottom +
|
|
3575
|
+
drawText(countdownText, chartRight + 6, (fullChartBottom + height) / 2, "left", "middle", xAxis.textColor);
|
|
3576
3576
|
ctx.font = prevFont;
|
|
3577
3577
|
}
|
|
3578
3578
|
if (crosshair.visible && crosshairPoint) {
|
|
@@ -3586,7 +3586,7 @@ function createChart(element, options = {}) {
|
|
|
3586
3586
|
const labelBorderColor = crosshair.labelBorderColor;
|
|
3587
3587
|
const labelBorderWidth = Math.max(0, crosshair.labelBorderWidth);
|
|
3588
3588
|
const labelBorderStyle = crosshair.labelBorderStyle;
|
|
3589
|
-
const strokeCrosshairLabel = (x, y, widthValue) => {
|
|
3589
|
+
const strokeCrosshairLabel = (x, y, widthValue, heightValue = labelHeight) => {
|
|
3590
3590
|
if (labelBorderWidth <= 0) {
|
|
3591
3591
|
return;
|
|
3592
3592
|
}
|
|
@@ -3598,7 +3598,7 @@ function createChart(element, options = {}) {
|
|
|
3598
3598
|
dashPatterns.borderDotted,
|
|
3599
3599
|
dashPatterns.borderDashed
|
|
3600
3600
|
);
|
|
3601
|
-
strokeRoundedRect(Math.round(x), Math.round(y), widthValue,
|
|
3601
|
+
strokeRoundedRect(Math.round(x), Math.round(y), widthValue, heightValue, labelRadius);
|
|
3602
3602
|
ctx.restore();
|
|
3603
3603
|
};
|
|
3604
3604
|
if (crosshair.showPriceLabel) {
|
|
@@ -3697,11 +3697,12 @@ function createChart(element, options = {}) {
|
|
|
3697
3697
|
const timeText = formatHoverTimeLabel(hoverTime, crosshair.timeLabelFormat);
|
|
3698
3698
|
const timeWidth = Math.ceil(ctx.measureText(timeText).width) + labelPaddingX * 2;
|
|
3699
3699
|
const timeX = clamp(cx - timeWidth / 2, chartLeft, chartRight - timeWidth);
|
|
3700
|
-
const timeY = fullChartBottom +
|
|
3700
|
+
const timeY = fullChartBottom + 1;
|
|
3701
|
+
const timeHeight = Math.max(labelHeight, Math.floor(height - timeY));
|
|
3701
3702
|
ctx.fillStyle = labelBackground;
|
|
3702
|
-
fillRoundedRect(Math.round(timeX), Math.round(timeY), timeWidth,
|
|
3703
|
-
strokeCrosshairLabel(timeX, timeY, timeWidth);
|
|
3704
|
-
drawText(timeText, timeX + labelPaddingX, timeY +
|
|
3703
|
+
fillRoundedRect(Math.round(timeX), Math.round(timeY), timeWidth, timeHeight, labelRadius);
|
|
3704
|
+
strokeCrosshairLabel(timeX, timeY, timeWidth, timeHeight);
|
|
3705
|
+
drawText(timeText, timeX + labelPaddingX, timeY + timeHeight / 2, "left", "middle", labelTextColor);
|
|
3705
3706
|
}
|
|
3706
3707
|
}
|
|
3707
3708
|
}
|
|
@@ -1120,7 +1120,7 @@ function createChart(element, options = {}) {
|
|
|
1120
1120
|
canvas.setAttribute("draggable", "false");
|
|
1121
1121
|
element.innerHTML = "";
|
|
1122
1122
|
element.appendChild(canvas);
|
|
1123
|
-
const margin = { top: 16, right: 72, bottom:
|
|
1123
|
+
const margin = { top: 16, right: 72, bottom: 26, left: 12 };
|
|
1124
1124
|
let cachedRightMargin = margin.right;
|
|
1125
1125
|
const minVisibleBars = Math.max(1, Math.floor(mergedOptions.minVisibleBars));
|
|
1126
1126
|
const maxVisibleBars = Math.max(minVisibleBars, Math.floor(mergedOptions.maxVisibleBars));
|
|
@@ -3536,7 +3536,7 @@ function createChart(element, options = {}) {
|
|
|
3536
3536
|
prevAxisTickTime = tickTime;
|
|
3537
3537
|
const prevFont = ctx.font;
|
|
3538
3538
|
ctx.font = `${xAxisFontSize}px ${mergedOptions.fontFamily}`;
|
|
3539
|
-
drawText(timeLabel, x, fullChartBottom +
|
|
3539
|
+
drawText(timeLabel, x, (fullChartBottom + height) / 2, "center", "middle", xAxis.textColor);
|
|
3540
3540
|
ctx.font = prevFont;
|
|
3541
3541
|
}
|
|
3542
3542
|
if (labels.visible && labels.showCountdownToBarClose && lastPoint) {
|
|
@@ -3546,7 +3546,7 @@ function createChart(element, options = {}) {
|
|
|
3546
3546
|
const countdownText = formatDuration(countdownMs);
|
|
3547
3547
|
const prevFont = ctx.font;
|
|
3548
3548
|
ctx.font = `${xAxisFontSize}px ${mergedOptions.fontFamily}`;
|
|
3549
|
-
drawText(countdownText, chartRight + 6, fullChartBottom +
|
|
3549
|
+
drawText(countdownText, chartRight + 6, (fullChartBottom + height) / 2, "left", "middle", xAxis.textColor);
|
|
3550
3550
|
ctx.font = prevFont;
|
|
3551
3551
|
}
|
|
3552
3552
|
if (crosshair.visible && crosshairPoint) {
|
|
@@ -3560,7 +3560,7 @@ function createChart(element, options = {}) {
|
|
|
3560
3560
|
const labelBorderColor = crosshair.labelBorderColor;
|
|
3561
3561
|
const labelBorderWidth = Math.max(0, crosshair.labelBorderWidth);
|
|
3562
3562
|
const labelBorderStyle = crosshair.labelBorderStyle;
|
|
3563
|
-
const strokeCrosshairLabel = (x, y, widthValue) => {
|
|
3563
|
+
const strokeCrosshairLabel = (x, y, widthValue, heightValue = labelHeight) => {
|
|
3564
3564
|
if (labelBorderWidth <= 0) {
|
|
3565
3565
|
return;
|
|
3566
3566
|
}
|
|
@@ -3572,7 +3572,7 @@ function createChart(element, options = {}) {
|
|
|
3572
3572
|
dashPatterns.borderDotted,
|
|
3573
3573
|
dashPatterns.borderDashed
|
|
3574
3574
|
);
|
|
3575
|
-
strokeRoundedRect(Math.round(x), Math.round(y), widthValue,
|
|
3575
|
+
strokeRoundedRect(Math.round(x), Math.round(y), widthValue, heightValue, labelRadius);
|
|
3576
3576
|
ctx.restore();
|
|
3577
3577
|
};
|
|
3578
3578
|
if (crosshair.showPriceLabel) {
|
|
@@ -3671,11 +3671,12 @@ function createChart(element, options = {}) {
|
|
|
3671
3671
|
const timeText = formatHoverTimeLabel(hoverTime, crosshair.timeLabelFormat);
|
|
3672
3672
|
const timeWidth = Math.ceil(ctx.measureText(timeText).width) + labelPaddingX * 2;
|
|
3673
3673
|
const timeX = clamp(cx - timeWidth / 2, chartLeft, chartRight - timeWidth);
|
|
3674
|
-
const timeY = fullChartBottom +
|
|
3674
|
+
const timeY = fullChartBottom + 1;
|
|
3675
|
+
const timeHeight = Math.max(labelHeight, Math.floor(height - timeY));
|
|
3675
3676
|
ctx.fillStyle = labelBackground;
|
|
3676
|
-
fillRoundedRect(Math.round(timeX), Math.round(timeY), timeWidth,
|
|
3677
|
-
strokeCrosshairLabel(timeX, timeY, timeWidth);
|
|
3678
|
-
drawText(timeText, timeX + labelPaddingX, timeY +
|
|
3677
|
+
fillRoundedRect(Math.round(timeX), Math.round(timeY), timeWidth, timeHeight, labelRadius);
|
|
3678
|
+
strokeCrosshairLabel(timeX, timeY, timeWidth, timeHeight);
|
|
3679
|
+
drawText(timeText, timeX + labelPaddingX, timeY + timeHeight / 2, "left", "middle", labelTextColor);
|
|
3679
3680
|
}
|
|
3680
3681
|
}
|
|
3681
3682
|
}
|
package/dist/index.cjs
CHANGED
|
@@ -1146,7 +1146,7 @@ function createChart(element, options = {}) {
|
|
|
1146
1146
|
canvas.setAttribute("draggable", "false");
|
|
1147
1147
|
element.innerHTML = "";
|
|
1148
1148
|
element.appendChild(canvas);
|
|
1149
|
-
const margin = { top: 16, right: 72, bottom:
|
|
1149
|
+
const margin = { top: 16, right: 72, bottom: 26, left: 12 };
|
|
1150
1150
|
let cachedRightMargin = margin.right;
|
|
1151
1151
|
const minVisibleBars = Math.max(1, Math.floor(mergedOptions.minVisibleBars));
|
|
1152
1152
|
const maxVisibleBars = Math.max(minVisibleBars, Math.floor(mergedOptions.maxVisibleBars));
|
|
@@ -3562,7 +3562,7 @@ function createChart(element, options = {}) {
|
|
|
3562
3562
|
prevAxisTickTime = tickTime;
|
|
3563
3563
|
const prevFont = ctx.font;
|
|
3564
3564
|
ctx.font = `${xAxisFontSize}px ${mergedOptions.fontFamily}`;
|
|
3565
|
-
drawText(timeLabel, x, fullChartBottom +
|
|
3565
|
+
drawText(timeLabel, x, (fullChartBottom + height) / 2, "center", "middle", xAxis.textColor);
|
|
3566
3566
|
ctx.font = prevFont;
|
|
3567
3567
|
}
|
|
3568
3568
|
if (labels.visible && labels.showCountdownToBarClose && lastPoint) {
|
|
@@ -3572,7 +3572,7 @@ function createChart(element, options = {}) {
|
|
|
3572
3572
|
const countdownText = formatDuration(countdownMs);
|
|
3573
3573
|
const prevFont = ctx.font;
|
|
3574
3574
|
ctx.font = `${xAxisFontSize}px ${mergedOptions.fontFamily}`;
|
|
3575
|
-
drawText(countdownText, chartRight + 6, fullChartBottom +
|
|
3575
|
+
drawText(countdownText, chartRight + 6, (fullChartBottom + height) / 2, "left", "middle", xAxis.textColor);
|
|
3576
3576
|
ctx.font = prevFont;
|
|
3577
3577
|
}
|
|
3578
3578
|
if (crosshair.visible && crosshairPoint) {
|
|
@@ -3586,7 +3586,7 @@ function createChart(element, options = {}) {
|
|
|
3586
3586
|
const labelBorderColor = crosshair.labelBorderColor;
|
|
3587
3587
|
const labelBorderWidth = Math.max(0, crosshair.labelBorderWidth);
|
|
3588
3588
|
const labelBorderStyle = crosshair.labelBorderStyle;
|
|
3589
|
-
const strokeCrosshairLabel = (x, y, widthValue) => {
|
|
3589
|
+
const strokeCrosshairLabel = (x, y, widthValue, heightValue = labelHeight) => {
|
|
3590
3590
|
if (labelBorderWidth <= 0) {
|
|
3591
3591
|
return;
|
|
3592
3592
|
}
|
|
@@ -3598,7 +3598,7 @@ function createChart(element, options = {}) {
|
|
|
3598
3598
|
dashPatterns.borderDotted,
|
|
3599
3599
|
dashPatterns.borderDashed
|
|
3600
3600
|
);
|
|
3601
|
-
strokeRoundedRect(Math.round(x), Math.round(y), widthValue,
|
|
3601
|
+
strokeRoundedRect(Math.round(x), Math.round(y), widthValue, heightValue, labelRadius);
|
|
3602
3602
|
ctx.restore();
|
|
3603
3603
|
};
|
|
3604
3604
|
if (crosshair.showPriceLabel) {
|
|
@@ -3697,11 +3697,12 @@ function createChart(element, options = {}) {
|
|
|
3697
3697
|
const timeText = formatHoverTimeLabel(hoverTime, crosshair.timeLabelFormat);
|
|
3698
3698
|
const timeWidth = Math.ceil(ctx.measureText(timeText).width) + labelPaddingX * 2;
|
|
3699
3699
|
const timeX = clamp(cx - timeWidth / 2, chartLeft, chartRight - timeWidth);
|
|
3700
|
-
const timeY = fullChartBottom +
|
|
3700
|
+
const timeY = fullChartBottom + 1;
|
|
3701
|
+
const timeHeight = Math.max(labelHeight, Math.floor(height - timeY));
|
|
3701
3702
|
ctx.fillStyle = labelBackground;
|
|
3702
|
-
fillRoundedRect(Math.round(timeX), Math.round(timeY), timeWidth,
|
|
3703
|
-
strokeCrosshairLabel(timeX, timeY, timeWidth);
|
|
3704
|
-
drawText(timeText, timeX + labelPaddingX, timeY +
|
|
3703
|
+
fillRoundedRect(Math.round(timeX), Math.round(timeY), timeWidth, timeHeight, labelRadius);
|
|
3704
|
+
strokeCrosshairLabel(timeX, timeY, timeWidth, timeHeight);
|
|
3705
|
+
drawText(timeText, timeX + labelPaddingX, timeY + timeHeight / 2, "left", "middle", labelTextColor);
|
|
3705
3706
|
}
|
|
3706
3707
|
}
|
|
3707
3708
|
}
|
package/dist/index.js
CHANGED
|
@@ -1120,7 +1120,7 @@ function createChart(element, options = {}) {
|
|
|
1120
1120
|
canvas.setAttribute("draggable", "false");
|
|
1121
1121
|
element.innerHTML = "";
|
|
1122
1122
|
element.appendChild(canvas);
|
|
1123
|
-
const margin = { top: 16, right: 72, bottom:
|
|
1123
|
+
const margin = { top: 16, right: 72, bottom: 26, left: 12 };
|
|
1124
1124
|
let cachedRightMargin = margin.right;
|
|
1125
1125
|
const minVisibleBars = Math.max(1, Math.floor(mergedOptions.minVisibleBars));
|
|
1126
1126
|
const maxVisibleBars = Math.max(minVisibleBars, Math.floor(mergedOptions.maxVisibleBars));
|
|
@@ -3536,7 +3536,7 @@ function createChart(element, options = {}) {
|
|
|
3536
3536
|
prevAxisTickTime = tickTime;
|
|
3537
3537
|
const prevFont = ctx.font;
|
|
3538
3538
|
ctx.font = `${xAxisFontSize}px ${mergedOptions.fontFamily}`;
|
|
3539
|
-
drawText(timeLabel, x, fullChartBottom +
|
|
3539
|
+
drawText(timeLabel, x, (fullChartBottom + height) / 2, "center", "middle", xAxis.textColor);
|
|
3540
3540
|
ctx.font = prevFont;
|
|
3541
3541
|
}
|
|
3542
3542
|
if (labels.visible && labels.showCountdownToBarClose && lastPoint) {
|
|
@@ -3546,7 +3546,7 @@ function createChart(element, options = {}) {
|
|
|
3546
3546
|
const countdownText = formatDuration(countdownMs);
|
|
3547
3547
|
const prevFont = ctx.font;
|
|
3548
3548
|
ctx.font = `${xAxisFontSize}px ${mergedOptions.fontFamily}`;
|
|
3549
|
-
drawText(countdownText, chartRight + 6, fullChartBottom +
|
|
3549
|
+
drawText(countdownText, chartRight + 6, (fullChartBottom + height) / 2, "left", "middle", xAxis.textColor);
|
|
3550
3550
|
ctx.font = prevFont;
|
|
3551
3551
|
}
|
|
3552
3552
|
if (crosshair.visible && crosshairPoint) {
|
|
@@ -3560,7 +3560,7 @@ function createChart(element, options = {}) {
|
|
|
3560
3560
|
const labelBorderColor = crosshair.labelBorderColor;
|
|
3561
3561
|
const labelBorderWidth = Math.max(0, crosshair.labelBorderWidth);
|
|
3562
3562
|
const labelBorderStyle = crosshair.labelBorderStyle;
|
|
3563
|
-
const strokeCrosshairLabel = (x, y, widthValue) => {
|
|
3563
|
+
const strokeCrosshairLabel = (x, y, widthValue, heightValue = labelHeight) => {
|
|
3564
3564
|
if (labelBorderWidth <= 0) {
|
|
3565
3565
|
return;
|
|
3566
3566
|
}
|
|
@@ -3572,7 +3572,7 @@ function createChart(element, options = {}) {
|
|
|
3572
3572
|
dashPatterns.borderDotted,
|
|
3573
3573
|
dashPatterns.borderDashed
|
|
3574
3574
|
);
|
|
3575
|
-
strokeRoundedRect(Math.round(x), Math.round(y), widthValue,
|
|
3575
|
+
strokeRoundedRect(Math.round(x), Math.round(y), widthValue, heightValue, labelRadius);
|
|
3576
3576
|
ctx.restore();
|
|
3577
3577
|
};
|
|
3578
3578
|
if (crosshair.showPriceLabel) {
|
|
@@ -3671,11 +3671,12 @@ function createChart(element, options = {}) {
|
|
|
3671
3671
|
const timeText = formatHoverTimeLabel(hoverTime, crosshair.timeLabelFormat);
|
|
3672
3672
|
const timeWidth = Math.ceil(ctx.measureText(timeText).width) + labelPaddingX * 2;
|
|
3673
3673
|
const timeX = clamp(cx - timeWidth / 2, chartLeft, chartRight - timeWidth);
|
|
3674
|
-
const timeY = fullChartBottom +
|
|
3674
|
+
const timeY = fullChartBottom + 1;
|
|
3675
|
+
const timeHeight = Math.max(labelHeight, Math.floor(height - timeY));
|
|
3675
3676
|
ctx.fillStyle = labelBackground;
|
|
3676
|
-
fillRoundedRect(Math.round(timeX), Math.round(timeY), timeWidth,
|
|
3677
|
-
strokeCrosshairLabel(timeX, timeY, timeWidth);
|
|
3678
|
-
drawText(timeText, timeX + labelPaddingX, timeY +
|
|
3677
|
+
fillRoundedRect(Math.round(timeX), Math.round(timeY), timeWidth, timeHeight, labelRadius);
|
|
3678
|
+
strokeCrosshairLabel(timeX, timeY, timeWidth, timeHeight);
|
|
3679
|
+
drawText(timeText, timeX + labelPaddingX, timeY + timeHeight / 2, "left", "middle", labelTextColor);
|
|
3679
3680
|
}
|
|
3680
3681
|
}
|
|
3681
3682
|
}
|