hyperprop-charting-library 0.1.115 → 0.1.117

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 +18 -9
  2. package/dist/hyperprop-charting-library.js +18 -9
  3. package/dist/index.cjs +18 -9
  4. package/dist/index.js +18 -9
  5. package/package.json +1 -1
package/dist/hyperprop-charting-library.cjs CHANGED
@@ -1239,7 +1239,15 @@ function createChart(element, options = {}) {
1239
1239
  const minSpan = minVisibleBars;
1240
1240
  const maxSpan = Math.min(maxVisibleBars, Math.max(minSpan, count + maxPanBars * 2));
1241
1241
  xSpan = clamp(xSpan, minSpan, maxSpan);
1242
- xCenter = clamp(xCenter, -maxPanBars, count + maxPanBars);
1242
+ const halfSpan = xSpan / 2;
1243
+ const minOverlap = Math.max(1, Math.min(count, Math.ceil(xSpan * 0.1)));
1244
+ const lowCenter = minOverlap - halfSpan;
1245
+ const highCenter = count - minOverlap + halfSpan;
1246
+ xCenter = clamp(
1247
+ xCenter,
1248
+ Math.max(lowCenter, -maxPanBars),
1249
+ Math.min(highCenter, count + maxPanBars)
1250
+ );
1243
1251
  };
1244
1252
  const fitXViewport = () => {
1245
1253
  const count = data.length;
@@ -3554,7 +3562,7 @@ function createChart(element, options = {}) {
3554
3562
  prevAxisTickTime = tickTime;
3555
3563
  const prevFont = ctx.font;
3556
3564
  ctx.font = `${xAxisFontSize}px ${mergedOptions.fontFamily}`;
3557
- drawText(timeLabel, x, fullChartBottom + 8, "center", "top", xAxis.textColor);
3565
+ drawText(timeLabel, x, (fullChartBottom + height) / 2, "center", "middle", xAxis.textColor);
3558
3566
  ctx.font = prevFont;
3559
3567
  }
3560
3568
  if (labels.visible && labels.showCountdownToBarClose && lastPoint) {
@@ -3564,7 +3572,7 @@ function createChart(element, options = {}) {
3564
3572
  const countdownText = formatDuration(countdownMs);
3565
3573
  const prevFont = ctx.font;
3566
3574
  ctx.font = `${xAxisFontSize}px ${mergedOptions.fontFamily}`;
3567
- drawText(countdownText, chartRight + 6, fullChartBottom + 8, "left", "top", xAxis.textColor);
3575
+ drawText(countdownText, chartRight + 6, (fullChartBottom + height) / 2, "left", "middle", xAxis.textColor);
3568
3576
  ctx.font = prevFont;
3569
3577
  }
3570
3578
  if (crosshair.visible && crosshairPoint) {
@@ -3578,7 +3586,7 @@ function createChart(element, options = {}) {
3578
3586
  const labelBorderColor = crosshair.labelBorderColor;
3579
3587
  const labelBorderWidth = Math.max(0, crosshair.labelBorderWidth);
3580
3588
  const labelBorderStyle = crosshair.labelBorderStyle;
3581
- const strokeCrosshairLabel = (x, y, widthValue) => {
3589
+ const strokeCrosshairLabel = (x, y, widthValue, heightValue = labelHeight) => {
3582
3590
  if (labelBorderWidth <= 0) {
3583
3591
  return;
3584
3592
  }
@@ -3590,7 +3598,7 @@ function createChart(element, options = {}) {
3590
3598
  dashPatterns.borderDotted,
3591
3599
  dashPatterns.borderDashed
3592
3600
  );
3593
- strokeRoundedRect(Math.round(x), Math.round(y), widthValue, labelHeight, labelRadius);
3601
+ strokeRoundedRect(Math.round(x), Math.round(y), widthValue, heightValue, labelRadius);
3594
3602
  ctx.restore();
3595
3603
  };
3596
3604
  if (crosshair.showPriceLabel) {
@@ -3689,11 +3697,12 @@ function createChart(element, options = {}) {
3689
3697
  const timeText = formatHoverTimeLabel(hoverTime, crosshair.timeLabelFormat);
3690
3698
  const timeWidth = Math.ceil(ctx.measureText(timeText).width) + labelPaddingX * 2;
3691
3699
  const timeX = clamp(cx - timeWidth / 2, chartLeft, chartRight - timeWidth);
3692
- const timeY = fullChartBottom + 8;
3700
+ const timeY = fullChartBottom + 1;
3701
+ const timeHeight = Math.max(labelHeight, Math.floor(height - timeY));
3693
3702
  ctx.fillStyle = labelBackground;
3694
- fillRoundedRect(Math.round(timeX), Math.round(timeY), timeWidth, labelHeight, labelRadius);
3695
- strokeCrosshairLabel(timeX, timeY, timeWidth);
3696
- drawText(timeText, timeX + labelPaddingX, timeY + labelHeight / 2, "left", "middle", labelTextColor);
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);
3697
3706
  }
3698
3707
  }
3699
3708
  }
package/dist/hyperprop-charting-library.js CHANGED
@@ -1213,7 +1213,15 @@ function createChart(element, options = {}) {
1213
1213
  const minSpan = minVisibleBars;
1214
1214
  const maxSpan = Math.min(maxVisibleBars, Math.max(minSpan, count + maxPanBars * 2));
1215
1215
  xSpan = clamp(xSpan, minSpan, maxSpan);
1216
- xCenter = clamp(xCenter, -maxPanBars, count + maxPanBars);
1216
+ const halfSpan = xSpan / 2;
1217
+ const minOverlap = Math.max(1, Math.min(count, Math.ceil(xSpan * 0.1)));
1218
+ const lowCenter = minOverlap - halfSpan;
1219
+ const highCenter = count - minOverlap + halfSpan;
1220
+ xCenter = clamp(
1221
+ xCenter,
1222
+ Math.max(lowCenter, -maxPanBars),
1223
+ Math.min(highCenter, count + maxPanBars)
1224
+ );
1217
1225
  };
1218
1226
  const fitXViewport = () => {
1219
1227
  const count = data.length;
@@ -3528,7 +3536,7 @@ function createChart(element, options = {}) {
3528
3536
  prevAxisTickTime = tickTime;
3529
3537
  const prevFont = ctx.font;
3530
3538
  ctx.font = `${xAxisFontSize}px ${mergedOptions.fontFamily}`;
3531
- drawText(timeLabel, x, fullChartBottom + 8, "center", "top", xAxis.textColor);
3539
+ drawText(timeLabel, x, (fullChartBottom + height) / 2, "center", "middle", xAxis.textColor);
3532
3540
  ctx.font = prevFont;
3533
3541
  }
3534
3542
  if (labels.visible && labels.showCountdownToBarClose && lastPoint) {
@@ -3538,7 +3546,7 @@ function createChart(element, options = {}) {
3538
3546
  const countdownText = formatDuration(countdownMs);
3539
3547
  const prevFont = ctx.font;
3540
3548
  ctx.font = `${xAxisFontSize}px ${mergedOptions.fontFamily}`;
3541
- drawText(countdownText, chartRight + 6, fullChartBottom + 8, "left", "top", xAxis.textColor);
3549
+ drawText(countdownText, chartRight + 6, (fullChartBottom + height) / 2, "left", "middle", xAxis.textColor);
3542
3550
  ctx.font = prevFont;
3543
3551
  }
3544
3552
  if (crosshair.visible && crosshairPoint) {
@@ -3552,7 +3560,7 @@ function createChart(element, options = {}) {
3552
3560
  const labelBorderColor = crosshair.labelBorderColor;
3553
3561
  const labelBorderWidth = Math.max(0, crosshair.labelBorderWidth);
3554
3562
  const labelBorderStyle = crosshair.labelBorderStyle;
3555
- const strokeCrosshairLabel = (x, y, widthValue) => {
3563
+ const strokeCrosshairLabel = (x, y, widthValue, heightValue = labelHeight) => {
3556
3564
  if (labelBorderWidth <= 0) {
3557
3565
  return;
3558
3566
  }
@@ -3564,7 +3572,7 @@ function createChart(element, options = {}) {
3564
3572
  dashPatterns.borderDotted,
3565
3573
  dashPatterns.borderDashed
3566
3574
  );
3567
- strokeRoundedRect(Math.round(x), Math.round(y), widthValue, labelHeight, labelRadius);
3575
+ strokeRoundedRect(Math.round(x), Math.round(y), widthValue, heightValue, labelRadius);
3568
3576
  ctx.restore();
3569
3577
  };
3570
3578
  if (crosshair.showPriceLabel) {
@@ -3663,11 +3671,12 @@ function createChart(element, options = {}) {
3663
3671
  const timeText = formatHoverTimeLabel(hoverTime, crosshair.timeLabelFormat);
3664
3672
  const timeWidth = Math.ceil(ctx.measureText(timeText).width) + labelPaddingX * 2;
3665
3673
  const timeX = clamp(cx - timeWidth / 2, chartLeft, chartRight - timeWidth);
3666
- const timeY = fullChartBottom + 8;
3674
+ const timeY = fullChartBottom + 1;
3675
+ const timeHeight = Math.max(labelHeight, Math.floor(height - timeY));
3667
3676
  ctx.fillStyle = labelBackground;
3668
- fillRoundedRect(Math.round(timeX), Math.round(timeY), timeWidth, labelHeight, labelRadius);
3669
- strokeCrosshairLabel(timeX, timeY, timeWidth);
3670
- drawText(timeText, timeX + labelPaddingX, timeY + labelHeight / 2, "left", "middle", labelTextColor);
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);
3671
3680
  }
3672
3681
  }
3673
3682
  }
package/dist/index.cjs CHANGED
@@ -1239,7 +1239,15 @@ function createChart(element, options = {}) {
1239
1239
  const minSpan = minVisibleBars;
1240
1240
  const maxSpan = Math.min(maxVisibleBars, Math.max(minSpan, count + maxPanBars * 2));
1241
1241
  xSpan = clamp(xSpan, minSpan, maxSpan);
1242
- xCenter = clamp(xCenter, -maxPanBars, count + maxPanBars);
1242
+ const halfSpan = xSpan / 2;
1243
+ const minOverlap = Math.max(1, Math.min(count, Math.ceil(xSpan * 0.1)));
1244
+ const lowCenter = minOverlap - halfSpan;
1245
+ const highCenter = count - minOverlap + halfSpan;
1246
+ xCenter = clamp(
1247
+ xCenter,
1248
+ Math.max(lowCenter, -maxPanBars),
1249
+ Math.min(highCenter, count + maxPanBars)
1250
+ );
1243
1251
  };
1244
1252
  const fitXViewport = () => {
1245
1253
  const count = data.length;
@@ -3554,7 +3562,7 @@ function createChart(element, options = {}) {
3554
3562
  prevAxisTickTime = tickTime;
3555
3563
  const prevFont = ctx.font;
3556
3564
  ctx.font = `${xAxisFontSize}px ${mergedOptions.fontFamily}`;
3557
- drawText(timeLabel, x, fullChartBottom + 8, "center", "top", xAxis.textColor);
3565
+ drawText(timeLabel, x, (fullChartBottom + height) / 2, "center", "middle", xAxis.textColor);
3558
3566
  ctx.font = prevFont;
3559
3567
  }
3560
3568
  if (labels.visible && labels.showCountdownToBarClose && lastPoint) {
@@ -3564,7 +3572,7 @@ function createChart(element, options = {}) {
3564
3572
  const countdownText = formatDuration(countdownMs);
3565
3573
  const prevFont = ctx.font;
3566
3574
  ctx.font = `${xAxisFontSize}px ${mergedOptions.fontFamily}`;
3567
- drawText(countdownText, chartRight + 6, fullChartBottom + 8, "left", "top", xAxis.textColor);
3575
+ drawText(countdownText, chartRight + 6, (fullChartBottom + height) / 2, "left", "middle", xAxis.textColor);
3568
3576
  ctx.font = prevFont;
3569
3577
  }
3570
3578
  if (crosshair.visible && crosshairPoint) {
@@ -3578,7 +3586,7 @@ function createChart(element, options = {}) {
3578
3586
  const labelBorderColor = crosshair.labelBorderColor;
3579
3587
  const labelBorderWidth = Math.max(0, crosshair.labelBorderWidth);
3580
3588
  const labelBorderStyle = crosshair.labelBorderStyle;
3581
- const strokeCrosshairLabel = (x, y, widthValue) => {
3589
+ const strokeCrosshairLabel = (x, y, widthValue, heightValue = labelHeight) => {
3582
3590
  if (labelBorderWidth <= 0) {
3583
3591
  return;
3584
3592
  }
@@ -3590,7 +3598,7 @@ function createChart(element, options = {}) {
3590
3598
  dashPatterns.borderDotted,
3591
3599
  dashPatterns.borderDashed
3592
3600
  );
3593
- strokeRoundedRect(Math.round(x), Math.round(y), widthValue, labelHeight, labelRadius);
3601
+ strokeRoundedRect(Math.round(x), Math.round(y), widthValue, heightValue, labelRadius);
3594
3602
  ctx.restore();
3595
3603
  };
3596
3604
  if (crosshair.showPriceLabel) {
@@ -3689,11 +3697,12 @@ function createChart(element, options = {}) {
3689
3697
  const timeText = formatHoverTimeLabel(hoverTime, crosshair.timeLabelFormat);
3690
3698
  const timeWidth = Math.ceil(ctx.measureText(timeText).width) + labelPaddingX * 2;
3691
3699
  const timeX = clamp(cx - timeWidth / 2, chartLeft, chartRight - timeWidth);
3692
- const timeY = fullChartBottom + 8;
3700
+ const timeY = fullChartBottom + 1;
3701
+ const timeHeight = Math.max(labelHeight, Math.floor(height - timeY));
3693
3702
  ctx.fillStyle = labelBackground;
3694
- fillRoundedRect(Math.round(timeX), Math.round(timeY), timeWidth, labelHeight, labelRadius);
3695
- strokeCrosshairLabel(timeX, timeY, timeWidth);
3696
- drawText(timeText, timeX + labelPaddingX, timeY + labelHeight / 2, "left", "middle", labelTextColor);
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);
3697
3706
  }
3698
3707
  }
3699
3708
  }
package/dist/index.js CHANGED
@@ -1213,7 +1213,15 @@ function createChart(element, options = {}) {
1213
1213
  const minSpan = minVisibleBars;
1214
1214
  const maxSpan = Math.min(maxVisibleBars, Math.max(minSpan, count + maxPanBars * 2));
1215
1215
  xSpan = clamp(xSpan, minSpan, maxSpan);
1216
- xCenter = clamp(xCenter, -maxPanBars, count + maxPanBars);
1216
+ const halfSpan = xSpan / 2;
1217
+ const minOverlap = Math.max(1, Math.min(count, Math.ceil(xSpan * 0.1)));
1218
+ const lowCenter = minOverlap - halfSpan;
1219
+ const highCenter = count - minOverlap + halfSpan;
1220
+ xCenter = clamp(
1221
+ xCenter,
1222
+ Math.max(lowCenter, -maxPanBars),
1223
+ Math.min(highCenter, count + maxPanBars)
1224
+ );
1217
1225
  };
1218
1226
  const fitXViewport = () => {
1219
1227
  const count = data.length;
@@ -3528,7 +3536,7 @@ function createChart(element, options = {}) {
3528
3536
  prevAxisTickTime = tickTime;
3529
3537
  const prevFont = ctx.font;
3530
3538
  ctx.font = `${xAxisFontSize}px ${mergedOptions.fontFamily}`;
3531
- drawText(timeLabel, x, fullChartBottom + 8, "center", "top", xAxis.textColor);
3539
+ drawText(timeLabel, x, (fullChartBottom + height) / 2, "center", "middle", xAxis.textColor);
3532
3540
  ctx.font = prevFont;
3533
3541
  }
3534
3542
  if (labels.visible && labels.showCountdownToBarClose && lastPoint) {
@@ -3538,7 +3546,7 @@ function createChart(element, options = {}) {
3538
3546
  const countdownText = formatDuration(countdownMs);
3539
3547
  const prevFont = ctx.font;
3540
3548
  ctx.font = `${xAxisFontSize}px ${mergedOptions.fontFamily}`;
3541
- drawText(countdownText, chartRight + 6, fullChartBottom + 8, "left", "top", xAxis.textColor);
3549
+ drawText(countdownText, chartRight + 6, (fullChartBottom + height) / 2, "left", "middle", xAxis.textColor);
3542
3550
  ctx.font = prevFont;
3543
3551
  }
3544
3552
  if (crosshair.visible && crosshairPoint) {
@@ -3552,7 +3560,7 @@ function createChart(element, options = {}) {
3552
3560
  const labelBorderColor = crosshair.labelBorderColor;
3553
3561
  const labelBorderWidth = Math.max(0, crosshair.labelBorderWidth);
3554
3562
  const labelBorderStyle = crosshair.labelBorderStyle;
3555
- const strokeCrosshairLabel = (x, y, widthValue) => {
3563
+ const strokeCrosshairLabel = (x, y, widthValue, heightValue = labelHeight) => {
3556
3564
  if (labelBorderWidth <= 0) {
3557
3565
  return;
3558
3566
  }
@@ -3564,7 +3572,7 @@ function createChart(element, options = {}) {
3564
3572
  dashPatterns.borderDotted,
3565
3573
  dashPatterns.borderDashed
3566
3574
  );
3567
- strokeRoundedRect(Math.round(x), Math.round(y), widthValue, labelHeight, labelRadius);
3575
+ strokeRoundedRect(Math.round(x), Math.round(y), widthValue, heightValue, labelRadius);
3568
3576
  ctx.restore();
3569
3577
  };
3570
3578
  if (crosshair.showPriceLabel) {
@@ -3663,11 +3671,12 @@ function createChart(element, options = {}) {
3663
3671
  const timeText = formatHoverTimeLabel(hoverTime, crosshair.timeLabelFormat);
3664
3672
  const timeWidth = Math.ceil(ctx.measureText(timeText).width) + labelPaddingX * 2;
3665
3673
  const timeX = clamp(cx - timeWidth / 2, chartLeft, chartRight - timeWidth);
3666
- const timeY = fullChartBottom + 8;
3674
+ const timeY = fullChartBottom + 1;
3675
+ const timeHeight = Math.max(labelHeight, Math.floor(height - timeY));
3667
3676
  ctx.fillStyle = labelBackground;
3668
- fillRoundedRect(Math.round(timeX), Math.round(timeY), timeWidth, labelHeight, labelRadius);
3669
- strokeCrosshairLabel(timeX, timeY, timeWidth);
3670
- drawText(timeText, timeX + labelPaddingX, timeY + labelHeight / 2, "left", "middle", labelTextColor);
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);
3671
3680
  }
3672
3681
  }
3673
3682
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "hyperprop-charting-library",
3
- "version": "0.1.115",
3
+ "version": "0.1.117",
4
4
  "description": "Lightweight TypeScript charting core",
5
5
  "type": "module",
6
6
  "main": "./dist/hyperprop-charting-library.cjs",