hyperprop-charting-library 0.1.104 → 0.1.105

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.
@@ -75,7 +75,11 @@ var DEFAULT_CROSSHAIR_OPTIONS = {
75
75
  priceActionButtonSize: 16,
76
76
  priceActionButtonGap: 4,
77
77
  priceActionButtonRounded: true,
78
- priceActionButtonBorderRadius: 8
78
+ priceActionButtonBorderRadius: 8,
79
+ sideHintLeft: "",
80
+ sideHintRight: "",
81
+ sideHintLeftColor: "#26a69a",
82
+ sideHintRightColor: "#ef5350"
79
83
  };
80
84
  var DEFAULT_WATERMARK_OPTIONS = {
81
85
  visible: false,
@@ -3017,6 +3021,25 @@ function createChart(element, options = {}) {
3017
3021
  }
3018
3022
  ctx.restore();
3019
3023
  }
3024
+ if (crosshair.sideHintLeft || crosshair.sideHintRight) {
3025
+ ctx.save();
3026
+ ctx.font = `600 11px ${mergedOptions.fontFamily}`;
3027
+ ctx.textBaseline = "middle";
3028
+ ctx.setLineDash([]);
3029
+ const hintY = clamp(cy - 14, chartTop + 8, chartBottom - 8);
3030
+ const hintGap = 8;
3031
+ if (crosshair.sideHintLeft) {
3032
+ ctx.fillStyle = crosshair.sideHintLeftColor;
3033
+ ctx.textAlign = "right";
3034
+ ctx.fillText(crosshair.sideHintLeft, cx - hintGap, hintY);
3035
+ }
3036
+ if (crosshair.sideHintRight) {
3037
+ ctx.fillStyle = crosshair.sideHintRightColor;
3038
+ ctx.textAlign = "left";
3039
+ ctx.fillText(crosshair.sideHintRight, cx + hintGap, hintY);
3040
+ }
3041
+ ctx.restore();
3042
+ }
3020
3043
  }
3021
3044
  ctx.restore();
3022
3045
  const positionAxisGutter = Math.max(0, width - chartRight);
@@ -241,6 +241,10 @@ interface CrosshairOptions {
241
241
  priceActionButtonGap?: number;
242
242
  priceActionButtonRounded?: boolean;
243
243
  priceActionButtonBorderRadius?: number;
244
+ sideHintLeft?: string;
245
+ sideHintRight?: string;
246
+ sideHintLeftColor?: string;
247
+ sideHintRightColor?: string;
244
248
  }
245
249
  interface WatermarkOptions {
246
250
  visible?: boolean;
@@ -49,7 +49,11 @@ var DEFAULT_CROSSHAIR_OPTIONS = {
49
49
  priceActionButtonSize: 16,
50
50
  priceActionButtonGap: 4,
51
51
  priceActionButtonRounded: true,
52
- priceActionButtonBorderRadius: 8
52
+ priceActionButtonBorderRadius: 8,
53
+ sideHintLeft: "",
54
+ sideHintRight: "",
55
+ sideHintLeftColor: "#26a69a",
56
+ sideHintRightColor: "#ef5350"
53
57
  };
54
58
  var DEFAULT_WATERMARK_OPTIONS = {
55
59
  visible: false,
@@ -2991,6 +2995,25 @@ function createChart(element, options = {}) {
2991
2995
  }
2992
2996
  ctx.restore();
2993
2997
  }
2998
+ if (crosshair.sideHintLeft || crosshair.sideHintRight) {
2999
+ ctx.save();
3000
+ ctx.font = `600 11px ${mergedOptions.fontFamily}`;
3001
+ ctx.textBaseline = "middle";
3002
+ ctx.setLineDash([]);
3003
+ const hintY = clamp(cy - 14, chartTop + 8, chartBottom - 8);
3004
+ const hintGap = 8;
3005
+ if (crosshair.sideHintLeft) {
3006
+ ctx.fillStyle = crosshair.sideHintLeftColor;
3007
+ ctx.textAlign = "right";
3008
+ ctx.fillText(crosshair.sideHintLeft, cx - hintGap, hintY);
3009
+ }
3010
+ if (crosshair.sideHintRight) {
3011
+ ctx.fillStyle = crosshair.sideHintRightColor;
3012
+ ctx.textAlign = "left";
3013
+ ctx.fillText(crosshair.sideHintRight, cx + hintGap, hintY);
3014
+ }
3015
+ ctx.restore();
3016
+ }
2994
3017
  }
2995
3018
  ctx.restore();
2996
3019
  const positionAxisGutter = Math.max(0, width - chartRight);
package/dist/index.cjs CHANGED
@@ -75,7 +75,11 @@ var DEFAULT_CROSSHAIR_OPTIONS = {
75
75
  priceActionButtonSize: 16,
76
76
  priceActionButtonGap: 4,
77
77
  priceActionButtonRounded: true,
78
- priceActionButtonBorderRadius: 8
78
+ priceActionButtonBorderRadius: 8,
79
+ sideHintLeft: "",
80
+ sideHintRight: "",
81
+ sideHintLeftColor: "#26a69a",
82
+ sideHintRightColor: "#ef5350"
79
83
  };
80
84
  var DEFAULT_WATERMARK_OPTIONS = {
81
85
  visible: false,
@@ -3017,6 +3021,25 @@ function createChart(element, options = {}) {
3017
3021
  }
3018
3022
  ctx.restore();
3019
3023
  }
3024
+ if (crosshair.sideHintLeft || crosshair.sideHintRight) {
3025
+ ctx.save();
3026
+ ctx.font = `600 11px ${mergedOptions.fontFamily}`;
3027
+ ctx.textBaseline = "middle";
3028
+ ctx.setLineDash([]);
3029
+ const hintY = clamp(cy - 14, chartTop + 8, chartBottom - 8);
3030
+ const hintGap = 8;
3031
+ if (crosshair.sideHintLeft) {
3032
+ ctx.fillStyle = crosshair.sideHintLeftColor;
3033
+ ctx.textAlign = "right";
3034
+ ctx.fillText(crosshair.sideHintLeft, cx - hintGap, hintY);
3035
+ }
3036
+ if (crosshair.sideHintRight) {
3037
+ ctx.fillStyle = crosshair.sideHintRightColor;
3038
+ ctx.textAlign = "left";
3039
+ ctx.fillText(crosshair.sideHintRight, cx + hintGap, hintY);
3040
+ }
3041
+ ctx.restore();
3042
+ }
3020
3043
  }
3021
3044
  ctx.restore();
3022
3045
  const positionAxisGutter = Math.max(0, width - chartRight);
package/dist/index.d.cts CHANGED
@@ -241,6 +241,10 @@ interface CrosshairOptions {
241
241
  priceActionButtonGap?: number;
242
242
  priceActionButtonRounded?: boolean;
243
243
  priceActionButtonBorderRadius?: number;
244
+ sideHintLeft?: string;
245
+ sideHintRight?: string;
246
+ sideHintLeftColor?: string;
247
+ sideHintRightColor?: string;
244
248
  }
245
249
  interface WatermarkOptions {
246
250
  visible?: boolean;
package/dist/index.d.ts CHANGED
@@ -241,6 +241,10 @@ interface CrosshairOptions {
241
241
  priceActionButtonGap?: number;
242
242
  priceActionButtonRounded?: boolean;
243
243
  priceActionButtonBorderRadius?: number;
244
+ sideHintLeft?: string;
245
+ sideHintRight?: string;
246
+ sideHintLeftColor?: string;
247
+ sideHintRightColor?: string;
244
248
  }
245
249
  interface WatermarkOptions {
246
250
  visible?: boolean;
package/dist/index.js CHANGED
@@ -49,7 +49,11 @@ var DEFAULT_CROSSHAIR_OPTIONS = {
49
49
  priceActionButtonSize: 16,
50
50
  priceActionButtonGap: 4,
51
51
  priceActionButtonRounded: true,
52
- priceActionButtonBorderRadius: 8
52
+ priceActionButtonBorderRadius: 8,
53
+ sideHintLeft: "",
54
+ sideHintRight: "",
55
+ sideHintLeftColor: "#26a69a",
56
+ sideHintRightColor: "#ef5350"
53
57
  };
54
58
  var DEFAULT_WATERMARK_OPTIONS = {
55
59
  visible: false,
@@ -2991,6 +2995,25 @@ function createChart(element, options = {}) {
2991
2995
  }
2992
2996
  ctx.restore();
2993
2997
  }
2998
+ if (crosshair.sideHintLeft || crosshair.sideHintRight) {
2999
+ ctx.save();
3000
+ ctx.font = `600 11px ${mergedOptions.fontFamily}`;
3001
+ ctx.textBaseline = "middle";
3002
+ ctx.setLineDash([]);
3003
+ const hintY = clamp(cy - 14, chartTop + 8, chartBottom - 8);
3004
+ const hintGap = 8;
3005
+ if (crosshair.sideHintLeft) {
3006
+ ctx.fillStyle = crosshair.sideHintLeftColor;
3007
+ ctx.textAlign = "right";
3008
+ ctx.fillText(crosshair.sideHintLeft, cx - hintGap, hintY);
3009
+ }
3010
+ if (crosshair.sideHintRight) {
3011
+ ctx.fillStyle = crosshair.sideHintRightColor;
3012
+ ctx.textAlign = "left";
3013
+ ctx.fillText(crosshair.sideHintRight, cx + hintGap, hintY);
3014
+ }
3015
+ ctx.restore();
3016
+ }
2994
3017
  }
2995
3018
  ctx.restore();
2996
3019
  const positionAxisGutter = Math.max(0, width - chartRight);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "hyperprop-charting-library",
3
- "version": "0.1.104",
3
+ "version": "0.1.105",
4
4
  "description": "Lightweight TypeScript charting core",
5
5
  "type": "module",
6
6
  "main": "./dist/hyperprop-charting-library.cjs",