hyperprop-charting-library 0.1.10 → 0.1.11
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/index.cjs +17 -0
- package/dist/index.js +17 -0
- package/docs/API.md +12 -0
- package/docs/assets/logo-white.svg +4 -0
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -146,6 +146,10 @@ var DEFAULT_OPTIONS = {
|
|
|
146
146
|
labelBorderRadius: 3
|
|
147
147
|
}
|
|
148
148
|
};
|
|
149
|
+
var BRAND_LOGO_VIEWBOX_WIDTH = 190;
|
|
150
|
+
var BRAND_LOGO_VIEWBOX_HEIGHT = 186;
|
|
151
|
+
var BRAND_LOGO_PATH_A = "M0 93.0171V45.2271H48.9851V75.0332C48.9851 84.9545 57.0416 93.0001 66.9763 93.0001H94.9957V186H49.0531V110.984C49.0531 101.063 40.9965 93.0171 31.0619 93.0171H0Z";
|
|
152
|
+
var BRAND_LOGO_PATH_B = "M190 92.9915V140.782H141.015V110.975C141.015 101.054 132.958 93.0085 123.023 93.0085H95.0039V0H140.955V75.0162C140.955 84.9374 149.012 92.9831 158.946 92.9831H190V92.9915Z";
|
|
149
153
|
function createChart(element, options = {}) {
|
|
150
154
|
const mergedOptions = {
|
|
151
155
|
...DEFAULT_OPTIONS,
|
|
@@ -198,6 +202,8 @@ function createChart(element, options = {}) {
|
|
|
198
202
|
let yMaxOverride = null;
|
|
199
203
|
let autoYMin = null;
|
|
200
204
|
let autoYMax = null;
|
|
205
|
+
const brandLogoPathA = new Path2D(BRAND_LOGO_PATH_A);
|
|
206
|
+
const brandLogoPathB = new Path2D(BRAND_LOGO_PATH_B);
|
|
201
207
|
let watermarkImageSrc = null;
|
|
202
208
|
let watermarkImage = null;
|
|
203
209
|
let watermarkImageReady = false;
|
|
@@ -1055,6 +1061,17 @@ function createChart(element, options = {}) {
|
|
|
1055
1061
|
});
|
|
1056
1062
|
drawText(timeLabel, x, chartBottom + 8, "center", "top", axis.textColor);
|
|
1057
1063
|
}
|
|
1064
|
+
const brandLogoWidth = 34;
|
|
1065
|
+
const brandLogoHeight = BRAND_LOGO_VIEWBOX_HEIGHT / BRAND_LOGO_VIEWBOX_WIDTH * brandLogoWidth;
|
|
1066
|
+
const brandLogoX = chartLeft + 16;
|
|
1067
|
+
const brandLogoY = chartBottom - brandLogoHeight - 10;
|
|
1068
|
+
ctx.save();
|
|
1069
|
+
ctx.translate(brandLogoX, brandLogoY);
|
|
1070
|
+
ctx.scale(brandLogoWidth / BRAND_LOGO_VIEWBOX_WIDTH, brandLogoHeight / BRAND_LOGO_VIEWBOX_HEIGHT);
|
|
1071
|
+
ctx.fillStyle = "#ffffff";
|
|
1072
|
+
ctx.fill(brandLogoPathA);
|
|
1073
|
+
ctx.fill(brandLogoPathB);
|
|
1074
|
+
ctx.restore();
|
|
1058
1075
|
if (crosshair.visible && crosshairPoint) {
|
|
1059
1076
|
const cx = clamp(crosshairPoint.x, chartLeft, chartRight);
|
|
1060
1077
|
const cy = clamp(crosshairPoint.y, chartTop, chartBottom);
|
package/dist/index.js
CHANGED
|
@@ -122,6 +122,10 @@ var DEFAULT_OPTIONS = {
|
|
|
122
122
|
labelBorderRadius: 3
|
|
123
123
|
}
|
|
124
124
|
};
|
|
125
|
+
var BRAND_LOGO_VIEWBOX_WIDTH = 190;
|
|
126
|
+
var BRAND_LOGO_VIEWBOX_HEIGHT = 186;
|
|
127
|
+
var BRAND_LOGO_PATH_A = "M0 93.0171V45.2271H48.9851V75.0332C48.9851 84.9545 57.0416 93.0001 66.9763 93.0001H94.9957V186H49.0531V110.984C49.0531 101.063 40.9965 93.0171 31.0619 93.0171H0Z";
|
|
128
|
+
var BRAND_LOGO_PATH_B = "M190 92.9915V140.782H141.015V110.975C141.015 101.054 132.958 93.0085 123.023 93.0085H95.0039V0H140.955V75.0162C140.955 84.9374 149.012 92.9831 158.946 92.9831H190V92.9915Z";
|
|
125
129
|
function createChart(element, options = {}) {
|
|
126
130
|
const mergedOptions = {
|
|
127
131
|
...DEFAULT_OPTIONS,
|
|
@@ -174,6 +178,8 @@ function createChart(element, options = {}) {
|
|
|
174
178
|
let yMaxOverride = null;
|
|
175
179
|
let autoYMin = null;
|
|
176
180
|
let autoYMax = null;
|
|
181
|
+
const brandLogoPathA = new Path2D(BRAND_LOGO_PATH_A);
|
|
182
|
+
const brandLogoPathB = new Path2D(BRAND_LOGO_PATH_B);
|
|
177
183
|
let watermarkImageSrc = null;
|
|
178
184
|
let watermarkImage = null;
|
|
179
185
|
let watermarkImageReady = false;
|
|
@@ -1031,6 +1037,17 @@ function createChart(element, options = {}) {
|
|
|
1031
1037
|
});
|
|
1032
1038
|
drawText(timeLabel, x, chartBottom + 8, "center", "top", axis.textColor);
|
|
1033
1039
|
}
|
|
1040
|
+
const brandLogoWidth = 34;
|
|
1041
|
+
const brandLogoHeight = BRAND_LOGO_VIEWBOX_HEIGHT / BRAND_LOGO_VIEWBOX_WIDTH * brandLogoWidth;
|
|
1042
|
+
const brandLogoX = chartLeft + 16;
|
|
1043
|
+
const brandLogoY = chartBottom - brandLogoHeight - 10;
|
|
1044
|
+
ctx.save();
|
|
1045
|
+
ctx.translate(brandLogoX, brandLogoY);
|
|
1046
|
+
ctx.scale(brandLogoWidth / BRAND_LOGO_VIEWBOX_WIDTH, brandLogoHeight / BRAND_LOGO_VIEWBOX_HEIGHT);
|
|
1047
|
+
ctx.fillStyle = "#ffffff";
|
|
1048
|
+
ctx.fill(brandLogoPathA);
|
|
1049
|
+
ctx.fill(brandLogoPathB);
|
|
1050
|
+
ctx.restore();
|
|
1034
1051
|
if (crosshair.visible && crosshairPoint) {
|
|
1035
1052
|
const cx = clamp(crosshairPoint.x, chartLeft, chartRight);
|
|
1036
1053
|
const cy = clamp(crosshairPoint.y, chartTop, chartBottom);
|
package/docs/API.md
CHANGED
|
@@ -104,6 +104,18 @@ Top-level options:
|
|
|
104
104
|
- `imageTintColor` (default `""`, set `"#ffffff"` for white logo tint)
|
|
105
105
|
- `imageTintOpacity` (default `1`)
|
|
106
106
|
|
|
107
|
+
Example:
|
|
108
|
+
|
|
109
|
+
```ts
|
|
110
|
+
watermark: {
|
|
111
|
+
visible: true,
|
|
112
|
+
imageSrc: "/logo-white.svg",
|
|
113
|
+
opacity: 0.14,
|
|
114
|
+
imageTintColor: "#ffffff",
|
|
115
|
+
imageTintOpacity: 1
|
|
116
|
+
}
|
|
117
|
+
```
|
|
118
|
+
|
|
107
119
|
### `TickerLineOptions`
|
|
108
120
|
|
|
109
121
|
- `visible` (default `true`)
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
<svg width="190" height="186" viewBox="0 0 190 186" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M0 93.0171V45.2271H48.9851V75.0332C48.9851 84.9545 57.0416 93.0001 66.9763 93.0001H94.9957V186H49.0531V110.984C49.0531 101.063 40.9965 93.0171 31.0619 93.0171H0Z" fill="white"/>
|
|
3
|
+
<path d="M190 92.9915V140.782H141.015V110.975C141.015 101.054 132.958 93.0085 123.023 93.0085H95.0039V0H140.955V75.0162C140.955 84.9374 149.012 92.9831 158.946 92.9831H190V92.9915Z" fill="white"/>
|
|
4
|
+
</svg>
|