hyperprop-charting-library 0.1.5 → 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 +17 -4
- package/dist/index.d.cts +4 -0
- package/dist/index.d.ts +4 -0
- package/dist/index.js +17 -4
- package/docs/API.md +4 -0
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -101,6 +101,10 @@ var DEFAULT_OPTIONS = {
|
|
|
101
101
|
axisColor: "#7f8289",
|
|
102
102
|
axis: DEFAULT_AXIS_OPTIONS,
|
|
103
103
|
priceDecimals: 2,
|
|
104
|
+
initialViewport: "latest",
|
|
105
|
+
initialVisibleBars: 60,
|
|
106
|
+
rightEdgePaddingBars: 2,
|
|
107
|
+
preserveViewportOnDataUpdate: true,
|
|
104
108
|
upColor: "#2fb171",
|
|
105
109
|
downColor: "#d35a5a",
|
|
106
110
|
gridColor: "#252932",
|
|
@@ -196,7 +200,7 @@ function createChart(element, options = {}) {
|
|
|
196
200
|
element.appendChild(canvas);
|
|
197
201
|
const margin = { top: 16, right: 72, bottom: 34, left: 12 };
|
|
198
202
|
const maxPanBars = 1e6;
|
|
199
|
-
const rightEdgePaddingBars =
|
|
203
|
+
const rightEdgePaddingBars = Math.max(0, mergedOptions.rightEdgePaddingBars);
|
|
200
204
|
const getPixelRatio = () => {
|
|
201
205
|
if (typeof window === "undefined") {
|
|
202
206
|
return 1;
|
|
@@ -226,8 +230,13 @@ function createChart(element, options = {}) {
|
|
|
226
230
|
xSpan = 60;
|
|
227
231
|
return;
|
|
228
232
|
}
|
|
229
|
-
|
|
230
|
-
|
|
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
|
+
}
|
|
231
240
|
clampXViewport();
|
|
232
241
|
};
|
|
233
242
|
const getYBounds = () => {
|
|
@@ -1370,7 +1379,11 @@ function createChart(element, options = {}) {
|
|
|
1370
1379
|
autoYMin = null;
|
|
1371
1380
|
autoYMax = null;
|
|
1372
1381
|
} else {
|
|
1373
|
-
|
|
1382
|
+
if (mergedOptions.preserveViewportOnDataUpdate) {
|
|
1383
|
+
clampXViewport();
|
|
1384
|
+
} else {
|
|
1385
|
+
fitXViewport();
|
|
1386
|
+
}
|
|
1374
1387
|
}
|
|
1375
1388
|
draw();
|
|
1376
1389
|
};
|
package/dist/index.d.cts
CHANGED
|
@@ -5,6 +5,10 @@ interface ChartOptions {
|
|
|
5
5
|
axisColor?: string;
|
|
6
6
|
axis?: AxisOptions;
|
|
7
7
|
priceDecimals?: number;
|
|
8
|
+
initialViewport?: "latest" | "center";
|
|
9
|
+
initialVisibleBars?: number;
|
|
10
|
+
rightEdgePaddingBars?: number;
|
|
11
|
+
preserveViewportOnDataUpdate?: boolean;
|
|
8
12
|
upColor?: string;
|
|
9
13
|
downColor?: string;
|
|
10
14
|
gridColor?: string;
|
package/dist/index.d.ts
CHANGED
|
@@ -5,6 +5,10 @@ interface ChartOptions {
|
|
|
5
5
|
axisColor?: string;
|
|
6
6
|
axis?: AxisOptions;
|
|
7
7
|
priceDecimals?: number;
|
|
8
|
+
initialViewport?: "latest" | "center";
|
|
9
|
+
initialVisibleBars?: number;
|
|
10
|
+
rightEdgePaddingBars?: number;
|
|
11
|
+
preserveViewportOnDataUpdate?: boolean;
|
|
8
12
|
upColor?: string;
|
|
9
13
|
downColor?: string;
|
|
10
14
|
gridColor?: string;
|
package/dist/index.js
CHANGED
|
@@ -77,6 +77,10 @@ var DEFAULT_OPTIONS = {
|
|
|
77
77
|
axisColor: "#7f8289",
|
|
78
78
|
axis: DEFAULT_AXIS_OPTIONS,
|
|
79
79
|
priceDecimals: 2,
|
|
80
|
+
initialViewport: "latest",
|
|
81
|
+
initialVisibleBars: 60,
|
|
82
|
+
rightEdgePaddingBars: 2,
|
|
83
|
+
preserveViewportOnDataUpdate: true,
|
|
80
84
|
upColor: "#2fb171",
|
|
81
85
|
downColor: "#d35a5a",
|
|
82
86
|
gridColor: "#252932",
|
|
@@ -172,7 +176,7 @@ function createChart(element, options = {}) {
|
|
|
172
176
|
element.appendChild(canvas);
|
|
173
177
|
const margin = { top: 16, right: 72, bottom: 34, left: 12 };
|
|
174
178
|
const maxPanBars = 1e6;
|
|
175
|
-
const rightEdgePaddingBars =
|
|
179
|
+
const rightEdgePaddingBars = Math.max(0, mergedOptions.rightEdgePaddingBars);
|
|
176
180
|
const getPixelRatio = () => {
|
|
177
181
|
if (typeof window === "undefined") {
|
|
178
182
|
return 1;
|
|
@@ -202,8 +206,13 @@ function createChart(element, options = {}) {
|
|
|
202
206
|
xSpan = 60;
|
|
203
207
|
return;
|
|
204
208
|
}
|
|
205
|
-
|
|
206
|
-
|
|
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
|
+
}
|
|
207
216
|
clampXViewport();
|
|
208
217
|
};
|
|
209
218
|
const getYBounds = () => {
|
|
@@ -1346,7 +1355,11 @@ function createChart(element, options = {}) {
|
|
|
1346
1355
|
autoYMin = null;
|
|
1347
1356
|
autoYMax = null;
|
|
1348
1357
|
} else {
|
|
1349
|
-
|
|
1358
|
+
if (mergedOptions.preserveViewportOnDataUpdate) {
|
|
1359
|
+
clampXViewport();
|
|
1360
|
+
} else {
|
|
1361
|
+
fitXViewport();
|
|
1362
|
+
}
|
|
1350
1363
|
}
|
|
1351
1364
|
draw();
|
|
1352
1365
|
};
|
package/docs/API.md
CHANGED
|
@@ -33,6 +33,10 @@ Top-level options:
|
|
|
33
33
|
- `axisColor` (legacy shorthand for axis line/text color)
|
|
34
34
|
- `axis?: AxisOptions`
|
|
35
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`)
|
|
36
40
|
- `upColor` (default `#16a34a`)
|
|
37
41
|
- `downColor` (default `#dc2626`)
|
|
38
42
|
- `gridColor` (default `#e2e8f0`)
|