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);
|