hyperprop-charting-library 0.1.4 → 0.1.6
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 +20 -11
- package/dist/index.d.cts +5 -0
- package/dist/index.d.ts +5 -0
- package/dist/index.js +20 -11
- package/docs/API.md +5 -0
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -100,6 +100,11 @@ var DEFAULT_OPTIONS = {
|
|
|
100
100
|
backgroundColor: "#101114",
|
|
101
101
|
axisColor: "#7f8289",
|
|
102
102
|
axis: DEFAULT_AXIS_OPTIONS,
|
|
103
|
+
priceDecimals: 2,
|
|
104
|
+
initialViewport: "latest",
|
|
105
|
+
initialVisibleBars: 60,
|
|
106
|
+
rightEdgePaddingBars: 2,
|
|
107
|
+
preserveViewportOnDataUpdate: true,
|
|
103
108
|
upColor: "#2fb171",
|
|
104
109
|
downColor: "#d35a5a",
|
|
105
110
|
gridColor: "#252932",
|
|
@@ -195,7 +200,7 @@ function createChart(element, options = {}) {
|
|
|
195
200
|
element.appendChild(canvas);
|
|
196
201
|
const margin = { top: 16, right: 72, bottom: 34, left: 12 };
|
|
197
202
|
const maxPanBars = 1e6;
|
|
198
|
-
const rightEdgePaddingBars =
|
|
203
|
+
const rightEdgePaddingBars = Math.max(0, mergedOptions.rightEdgePaddingBars);
|
|
199
204
|
const getPixelRatio = () => {
|
|
200
205
|
if (typeof window === "undefined") {
|
|
201
206
|
return 1;
|
|
@@ -225,8 +230,13 @@ function createChart(element, options = {}) {
|
|
|
225
230
|
xSpan = 60;
|
|
226
231
|
return;
|
|
227
232
|
}
|
|
228
|
-
|
|
229
|
-
|
|
233
|
+
const requestedVisibleBars = Math.max(5, Math.floor(mergedOptions.initialVisibleBars));
|
|
234
|
+
xSpan = Math.min(requestedVisibleBars, Math.max(5, count));
|
|
235
|
+
if (mergedOptions.initialViewport === "center") {
|
|
236
|
+
xCenter = count / 2;
|
|
237
|
+
} else {
|
|
238
|
+
xCenter = count - xSpan / 2 + rightEdgePaddingBars;
|
|
239
|
+
}
|
|
230
240
|
clampXViewport();
|
|
231
241
|
};
|
|
232
242
|
const getYBounds = () => {
|
|
@@ -266,13 +276,8 @@ function createChart(element, options = {}) {
|
|
|
266
276
|
return { min: nextMin, max: nextMax };
|
|
267
277
|
};
|
|
268
278
|
const formatPrice = (price) => {
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
}
|
|
272
|
-
if (price >= 100) {
|
|
273
|
-
return price.toFixed(1);
|
|
274
|
-
}
|
|
275
|
-
return price.toFixed(2);
|
|
279
|
+
const decimals = clamp(Math.round(mergedOptions.priceDecimals), 0, 8);
|
|
280
|
+
return price.toFixed(decimals);
|
|
276
281
|
};
|
|
277
282
|
const parseData = (nextData) => {
|
|
278
283
|
return nextData.map((point) => ({
|
|
@@ -1374,7 +1379,11 @@ function createChart(element, options = {}) {
|
|
|
1374
1379
|
autoYMin = null;
|
|
1375
1380
|
autoYMax = null;
|
|
1376
1381
|
} else {
|
|
1377
|
-
|
|
1382
|
+
if (mergedOptions.preserveViewportOnDataUpdate) {
|
|
1383
|
+
clampXViewport();
|
|
1384
|
+
} else {
|
|
1385
|
+
fitXViewport();
|
|
1386
|
+
}
|
|
1378
1387
|
}
|
|
1379
1388
|
draw();
|
|
1380
1389
|
};
|
package/dist/index.d.cts
CHANGED
|
@@ -4,6 +4,11 @@ interface ChartOptions {
|
|
|
4
4
|
backgroundColor?: string;
|
|
5
5
|
axisColor?: string;
|
|
6
6
|
axis?: AxisOptions;
|
|
7
|
+
priceDecimals?: number;
|
|
8
|
+
initialViewport?: "latest" | "center";
|
|
9
|
+
initialVisibleBars?: number;
|
|
10
|
+
rightEdgePaddingBars?: number;
|
|
11
|
+
preserveViewportOnDataUpdate?: boolean;
|
|
7
12
|
upColor?: string;
|
|
8
13
|
downColor?: string;
|
|
9
14
|
gridColor?: string;
|
package/dist/index.d.ts
CHANGED
|
@@ -4,6 +4,11 @@ interface ChartOptions {
|
|
|
4
4
|
backgroundColor?: string;
|
|
5
5
|
axisColor?: string;
|
|
6
6
|
axis?: AxisOptions;
|
|
7
|
+
priceDecimals?: number;
|
|
8
|
+
initialViewport?: "latest" | "center";
|
|
9
|
+
initialVisibleBars?: number;
|
|
10
|
+
rightEdgePaddingBars?: number;
|
|
11
|
+
preserveViewportOnDataUpdate?: boolean;
|
|
7
12
|
upColor?: string;
|
|
8
13
|
downColor?: string;
|
|
9
14
|
gridColor?: string;
|
package/dist/index.js
CHANGED
|
@@ -76,6 +76,11 @@ var DEFAULT_OPTIONS = {
|
|
|
76
76
|
backgroundColor: "#101114",
|
|
77
77
|
axisColor: "#7f8289",
|
|
78
78
|
axis: DEFAULT_AXIS_OPTIONS,
|
|
79
|
+
priceDecimals: 2,
|
|
80
|
+
initialViewport: "latest",
|
|
81
|
+
initialVisibleBars: 60,
|
|
82
|
+
rightEdgePaddingBars: 2,
|
|
83
|
+
preserveViewportOnDataUpdate: true,
|
|
79
84
|
upColor: "#2fb171",
|
|
80
85
|
downColor: "#d35a5a",
|
|
81
86
|
gridColor: "#252932",
|
|
@@ -171,7 +176,7 @@ function createChart(element, options = {}) {
|
|
|
171
176
|
element.appendChild(canvas);
|
|
172
177
|
const margin = { top: 16, right: 72, bottom: 34, left: 12 };
|
|
173
178
|
const maxPanBars = 1e6;
|
|
174
|
-
const rightEdgePaddingBars =
|
|
179
|
+
const rightEdgePaddingBars = Math.max(0, mergedOptions.rightEdgePaddingBars);
|
|
175
180
|
const getPixelRatio = () => {
|
|
176
181
|
if (typeof window === "undefined") {
|
|
177
182
|
return 1;
|
|
@@ -201,8 +206,13 @@ function createChart(element, options = {}) {
|
|
|
201
206
|
xSpan = 60;
|
|
202
207
|
return;
|
|
203
208
|
}
|
|
204
|
-
|
|
205
|
-
|
|
209
|
+
const requestedVisibleBars = Math.max(5, Math.floor(mergedOptions.initialVisibleBars));
|
|
210
|
+
xSpan = Math.min(requestedVisibleBars, Math.max(5, count));
|
|
211
|
+
if (mergedOptions.initialViewport === "center") {
|
|
212
|
+
xCenter = count / 2;
|
|
213
|
+
} else {
|
|
214
|
+
xCenter = count - xSpan / 2 + rightEdgePaddingBars;
|
|
215
|
+
}
|
|
206
216
|
clampXViewport();
|
|
207
217
|
};
|
|
208
218
|
const getYBounds = () => {
|
|
@@ -242,13 +252,8 @@ function createChart(element, options = {}) {
|
|
|
242
252
|
return { min: nextMin, max: nextMax };
|
|
243
253
|
};
|
|
244
254
|
const formatPrice = (price) => {
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
}
|
|
248
|
-
if (price >= 100) {
|
|
249
|
-
return price.toFixed(1);
|
|
250
|
-
}
|
|
251
|
-
return price.toFixed(2);
|
|
255
|
+
const decimals = clamp(Math.round(mergedOptions.priceDecimals), 0, 8);
|
|
256
|
+
return price.toFixed(decimals);
|
|
252
257
|
};
|
|
253
258
|
const parseData = (nextData) => {
|
|
254
259
|
return nextData.map((point) => ({
|
|
@@ -1350,7 +1355,11 @@ function createChart(element, options = {}) {
|
|
|
1350
1355
|
autoYMin = null;
|
|
1351
1356
|
autoYMax = null;
|
|
1352
1357
|
} else {
|
|
1353
|
-
|
|
1358
|
+
if (mergedOptions.preserveViewportOnDataUpdate) {
|
|
1359
|
+
clampXViewport();
|
|
1360
|
+
} else {
|
|
1361
|
+
fitXViewport();
|
|
1362
|
+
}
|
|
1354
1363
|
}
|
|
1355
1364
|
draw();
|
|
1356
1365
|
};
|
package/docs/API.md
CHANGED
|
@@ -32,6 +32,11 @@ Top-level options:
|
|
|
32
32
|
- `backgroundColor` (default `#ffffff`)
|
|
33
33
|
- `axisColor` (legacy shorthand for axis line/text color)
|
|
34
34
|
- `axis?: AxisOptions`
|
|
35
|
+
- `priceDecimals` (default `2`, used for axis/ticker/line price labels)
|
|
36
|
+
- `initialViewport` (`"latest"` | `"center"`, default `"latest"`)
|
|
37
|
+
- `initialVisibleBars` (default `60`)
|
|
38
|
+
- `rightEdgePaddingBars` (default `2`, used by latest-anchored viewport)
|
|
39
|
+
- `preserveViewportOnDataUpdate` (default `true`; set `false` to auto-fit on each `setData`)
|
|
35
40
|
- `upColor` (default `#16a34a`)
|
|
36
41
|
- `downColor` (default `#dc2626`)
|
|
37
42
|
- `gridColor` (default `#e2e8f0`)
|