@wick-charts/vue 0.6.1 → 0.6.3
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/ChartContainer.vue.js +43 -37
- package/dist/LineSeries.vue.js +2 -2
- package/dist/composables.js +39 -26
- package/dist/core/dist/animation/config.js +66 -64
- package/dist/core/dist/animation/intro-wave.js +19 -21
- package/dist/core/dist/animation/reduced-motion.js +6 -0
- package/dist/core/dist/axis/dom-labels.js +58 -45
- package/dist/core/dist/chart/badge-animator.js +15 -19
- package/dist/core/dist/chart/options.js +5 -5
- package/dist/core/dist/chart/scale-guards.js +26 -0
- package/dist/core/dist/chart/y-target.js +46 -19
- package/dist/core/dist/chart.js +752 -570
- package/dist/core/dist/components/crosshair.js +8 -8
- package/dist/core/dist/components/grid.js +28 -15
- package/dist/core/dist/components/marker.js +28 -28
- package/dist/core/dist/components/reference-line.js +16 -16
- package/dist/core/dist/interactions/handler.js +3 -2
- package/dist/core/dist/interactions/zoom.js +6 -5
- package/dist/core/dist/navigator/controller.js +43 -40
- package/dist/core/dist/perf/perf-hud.js +3 -3
- package/dist/core/dist/scales/log-scale.js +76 -0
- package/dist/core/dist/scales/tick-tracker.js +2 -2
- package/dist/core/dist/scales/x-scale.js +47 -32
- package/dist/core/dist/scales/y-scale.js +155 -38
- package/dist/core/dist/series/bar-intro.js +11 -11
- package/dist/core/dist/series/bar.js +299 -249
- package/dist/core/dist/series/base-multi-layer.js +100 -76
- package/dist/core/dist/series/candlestick.js +252 -249
- package/dist/core/dist/series/heatmap.js +16 -16
- package/dist/core/dist/series/line-intro.js +18 -18
- package/dist/core/dist/series/line.js +522 -424
- package/dist/core/dist/series/scale-stack.js +25 -0
- package/dist/core/dist/tooltip-position.js +5 -5
- package/dist/core/dist/utils/pixel-grid.js +10 -0
- package/dist/index.d.ts +279 -32
- package/dist/index.js +59 -57
- package/dist/ui/Crosshair.vue.js +14 -14
- package/dist/ui/HeatmapTooltip.vue.js +6 -6
- package/dist/ui/PieTooltip.vue.js +4 -4
- package/dist/ui/TimeAxis.vue.js +23 -22
- package/dist/ui/Tooltip.vue.js +71 -69
- package/dist/ui/YAxis.vue.js +25 -24
- package/dist/ui/YLabel.vue.js +50 -49
- package/package.json +2 -2
- package/src/ChartContainer.vue +20 -8
- package/src/composables.ts +35 -1
- package/src/index.ts +5 -0
- package/src/ui/Crosshair.vue +2 -2
- package/src/ui/TimeAxis.vue +7 -4
- package/src/ui/Tooltip.vue +4 -1
- package/src/ui/YAxis.vue +5 -3
- package/src/ui/YLabel.vue +3 -3
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import { Animator as
|
|
2
|
-
import { IntroWave as
|
|
3
|
-
import { ScalarSpring as
|
|
4
|
-
import { TimeSeriesStore as
|
|
5
|
-
import { resolveColor as
|
|
6
|
-
import { normalizeTimePointArray as
|
|
7
|
-
import { sumStack as
|
|
8
|
-
const
|
|
9
|
-
class
|
|
1
|
+
import { Animator as L } from "../animation/animator.js";
|
|
2
|
+
import { IntroWave as g } from "../animation/intro-wave.js";
|
|
3
|
+
import { ScalarSpring as A } from "../animation/scalar-spring.js";
|
|
4
|
+
import { TimeSeriesStore as b } from "../data/store.js";
|
|
5
|
+
import { resolveColor as k } from "../utils/color.js";
|
|
6
|
+
import { normalizeTimePointArray as p, normalizeTime as v } from "../utils/time.js";
|
|
7
|
+
import { sumStack as y, renderedStackPercentTop as d, renderedStackTop as V } from "./stack-math.js";
|
|
8
|
+
const W = (m, t, e) => m + (t - m) * e;
|
|
9
|
+
class x {
|
|
10
10
|
stores;
|
|
11
11
|
// --- Animation state (per layer) ----------------------------------------
|
|
12
12
|
/**
|
|
@@ -42,19 +42,19 @@ class R {
|
|
|
42
42
|
* multi-layer seed rides one wave. Subclasses read it through
|
|
43
43
|
* {@link introProgressAt} (per-element wave) or directly (line's sweep).
|
|
44
44
|
*/
|
|
45
|
-
introWave = new
|
|
45
|
+
introWave = new g();
|
|
46
46
|
/** History-prepend reveal clock — armed by {@link prependPoints} so newly
|
|
47
47
|
* loaded older points wave in from the data boundary instead of popping.
|
|
48
48
|
* Shared across layers: a multi-layer prepend rides one wave. */
|
|
49
|
-
historyWave = new
|
|
49
|
+
historyWave = new g();
|
|
50
50
|
/** Prepended time span: `from` = deepest new point, `to` = the boundary
|
|
51
51
|
* (the pre-prepend first point). Stagger position is `0` at the boundary
|
|
52
52
|
* and `1` at the deepest point. */
|
|
53
53
|
historyRange = null;
|
|
54
54
|
constructor(t) {
|
|
55
|
-
this.stores = Array.from({ length: t }, () => new
|
|
55
|
+
this.stores = Array.from({ length: t }, () => new b()), this.entries = Array.from({ length: t }, () => /* @__PURE__ */ new Map()), this.displayedLastValues = new Array(t).fill(null), this.#t = new Array(t).fill(null), this.#e = new Array(t).fill(null), this.#s = Array.from(
|
|
56
56
|
{ length: t },
|
|
57
|
-
() => new
|
|
57
|
+
() => new L({ initial: 1, duration: 0, lerp: W })
|
|
58
58
|
);
|
|
59
59
|
}
|
|
60
60
|
// --- Color accessors ------------------------------------------------------
|
|
@@ -83,7 +83,7 @@ class R {
|
|
|
83
83
|
}
|
|
84
84
|
/** Resolve one layer's color for a given datum value. */
|
|
85
85
|
resolveLayerColor(t, e) {
|
|
86
|
-
return
|
|
86
|
+
return k(this.#r(t), e);
|
|
87
87
|
}
|
|
88
88
|
// --- Data ingest ----------------------------------------------------------
|
|
89
89
|
setData(t, e = 0) {
|
|
@@ -92,25 +92,25 @@ class R {
|
|
|
92
92
|
let i = !1;
|
|
93
93
|
for (const n of this.stores)
|
|
94
94
|
n.length > 0 && (i = !0);
|
|
95
|
-
const r =
|
|
95
|
+
const r = p(t ?? []);
|
|
96
96
|
s.setData(r), !i && r.length > 0 && this.introWave.arm(this.options.introMs);
|
|
97
|
-
const
|
|
98
|
-
this.displayedLastValues[e] =
|
|
97
|
+
const o = s.last();
|
|
98
|
+
this.displayedLastValues[e] = o ? o.value : null, this.#t[e] = null, this.#e[e] = null, this.entries[e].clear(), this.historyWave.finish(), this.historyRange = null;
|
|
99
99
|
}
|
|
100
100
|
appendPoint(t, e = 0) {
|
|
101
101
|
const s = this.stores[e];
|
|
102
102
|
if (!s) return;
|
|
103
|
-
const i = t, r =
|
|
103
|
+
const i = t, r = v(i.time), o = s.last(), n = s.length;
|
|
104
104
|
s.append({ ...i, time: r });
|
|
105
|
-
const
|
|
106
|
-
|
|
107
|
-
const
|
|
108
|
-
this.isEntryEnabled() &&
|
|
105
|
+
const l = this.#t[e];
|
|
106
|
+
l !== null && o !== void 0 && s.length > n && (this.#e[e] = { time: o.time, anim: l }), this.displayedLastValues[e] = i.value, this.#t[e] = null;
|
|
107
|
+
const h = this.options.entryMs;
|
|
108
|
+
this.isEntryEnabled() && h > 0 && this.entries[e].set(r, { startTime: performance.now() });
|
|
109
109
|
}
|
|
110
110
|
prependPoints(t, e = 0) {
|
|
111
111
|
const s = this.stores[e];
|
|
112
112
|
if (!s || t.length === 0) return;
|
|
113
|
-
const i =
|
|
113
|
+
const i = p(t), r = s.first()?.time;
|
|
114
114
|
s.prepend(i), this.#n(i[0]?.time, r);
|
|
115
115
|
}
|
|
116
116
|
/**
|
|
@@ -133,18 +133,18 @@ class R {
|
|
|
133
133
|
const s = this.stores[e];
|
|
134
134
|
if (!s) return;
|
|
135
135
|
const i = t;
|
|
136
|
-
s.updateLast({ ...i, time:
|
|
137
|
-
const r = i.value,
|
|
138
|
-
if (
|
|
136
|
+
s.updateLast({ ...i, time: v(i.time) });
|
|
137
|
+
const r = i.value, o = this.options.smoothMs;
|
|
138
|
+
if (o <= 0) {
|
|
139
139
|
this.displayedLastValues[e] = r, this.#t[e] = null;
|
|
140
140
|
return;
|
|
141
141
|
}
|
|
142
142
|
let n = this.#t[e];
|
|
143
143
|
if (n === null) {
|
|
144
|
-
const
|
|
145
|
-
n = new
|
|
144
|
+
const l = this.displayedLastValues[e] ?? r;
|
|
145
|
+
n = new A(l), this.#t[e] = n;
|
|
146
146
|
}
|
|
147
|
-
n.retarget(r, { settleMs:
|
|
147
|
+
n.retarget(r, { settleMs: o });
|
|
148
148
|
}
|
|
149
149
|
keepLast(t, e = 0) {
|
|
150
150
|
const s = this.stores[e];
|
|
@@ -303,9 +303,9 @@ class R {
|
|
|
303
303
|
this.entries[e].clear();
|
|
304
304
|
continue;
|
|
305
305
|
}
|
|
306
|
-
const
|
|
307
|
-
for (const [n,
|
|
308
|
-
t -
|
|
306
|
+
const o = this.entries[e];
|
|
307
|
+
for (const [n, l] of o)
|
|
308
|
+
t - l.startTime >= r && o.delete(n);
|
|
309
309
|
}
|
|
310
310
|
}
|
|
311
311
|
/** True while any layer has an active chase, unsettled entry, alpha fade,
|
|
@@ -393,21 +393,21 @@ class R {
|
|
|
393
393
|
if (!this.stores[i].isVisible()) continue;
|
|
394
394
|
const r = this.stores[i].getVisibleData(t - e, t + e);
|
|
395
395
|
if (r.length === 0) continue;
|
|
396
|
-
let
|
|
397
|
-
for (let
|
|
398
|
-
const
|
|
399
|
-
|
|
396
|
+
let o = r[0], n = Math.abs(r[0].time - t);
|
|
397
|
+
for (let l = 1; l < r.length; l++) {
|
|
398
|
+
const h = Math.abs(r[l].time - t);
|
|
399
|
+
h <= n && (n = h, o = r[l]);
|
|
400
400
|
}
|
|
401
401
|
s.push({
|
|
402
402
|
layerIndex: i,
|
|
403
|
-
time:
|
|
403
|
+
time: o.time,
|
|
404
404
|
// Routes through the same live/pinned-chase smoothing the renderer
|
|
405
405
|
// paints, so hovering the live edge mid-animation doesn't jump ahead
|
|
406
406
|
// to the raw target before the on-screen marker gets there.
|
|
407
|
-
value: this.snapshotValue(i,
|
|
407
|
+
value: this.snapshotValue(i, o.time, o.value),
|
|
408
408
|
// Resolve the layer's color at the hovered datum's value so a value-fn
|
|
409
409
|
// colors the tooltip dot to match the bar / segment under the cursor.
|
|
410
|
-
color: this.resolveLayerColor(i,
|
|
410
|
+
color: this.resolveLayerColor(i, o.value)
|
|
411
411
|
});
|
|
412
412
|
}
|
|
413
413
|
return s.length > 0 ? s : null;
|
|
@@ -421,8 +421,8 @@ class R {
|
|
|
421
421
|
if (t === "off") {
|
|
422
422
|
for (let r = this.stores.length - 1; r >= 0; r--) {
|
|
423
423
|
if (!this.stores[r].isVisible()) continue;
|
|
424
|
-
const
|
|
425
|
-
if (
|
|
424
|
+
const o = this.stores[r].last();
|
|
425
|
+
if (o) return { value: this.snapshotValue(r, o.time, o.value), isLive: !0 };
|
|
426
426
|
}
|
|
427
427
|
return null;
|
|
428
428
|
}
|
|
@@ -430,16 +430,16 @@ class R {
|
|
|
430
430
|
const s = [];
|
|
431
431
|
for (let r = 0; r < this.stores.length; r++) {
|
|
432
432
|
if (!this.stores[r].isVisible()) continue;
|
|
433
|
-
const
|
|
434
|
-
if (!
|
|
433
|
+
const o = this.stores[r].last();
|
|
434
|
+
if (!o) {
|
|
435
435
|
s.push(0);
|
|
436
436
|
continue;
|
|
437
437
|
}
|
|
438
|
-
e = !0, s.push(this.snapshotValue(r,
|
|
438
|
+
e = !0, s.push(this.snapshotValue(r, o.time, o.value));
|
|
439
439
|
}
|
|
440
440
|
if (!e) return null;
|
|
441
|
-
const i =
|
|
442
|
-
return { value: t === "percent" ?
|
|
441
|
+
const i = y(s);
|
|
442
|
+
return { value: t === "percent" ? d(i) : V(i), isLive: !0 };
|
|
443
443
|
}
|
|
444
444
|
getStackedValueAtTime(t, e) {
|
|
445
445
|
if (this.stores.length <= 1) {
|
|
@@ -450,8 +450,8 @@ class R {
|
|
|
450
450
|
if (s === "off") {
|
|
451
451
|
for (let n = this.stores.length - 1; n >= 0; n--) {
|
|
452
452
|
if (!this.stores[n].isVisible()) continue;
|
|
453
|
-
const
|
|
454
|
-
if (
|
|
453
|
+
const l = this.stores[n].findNearest(t, e);
|
|
454
|
+
if (l) return this.snapshotValue(n, l.time, l.value);
|
|
455
455
|
}
|
|
456
456
|
return null;
|
|
457
457
|
}
|
|
@@ -459,16 +459,16 @@ class R {
|
|
|
459
459
|
const r = [];
|
|
460
460
|
for (let n = 0; n < this.stores.length; n++) {
|
|
461
461
|
if (!this.stores[n].isVisible()) continue;
|
|
462
|
-
const
|
|
463
|
-
if (!
|
|
462
|
+
const l = this.stores[n].findNearest(t, e);
|
|
463
|
+
if (!l) {
|
|
464
464
|
r.push(0);
|
|
465
465
|
continue;
|
|
466
466
|
}
|
|
467
|
-
i = !0, r.push(this.snapshotValue(n,
|
|
467
|
+
i = !0, r.push(this.snapshotValue(n, l.time, l.value));
|
|
468
468
|
}
|
|
469
469
|
if (!i) return null;
|
|
470
|
-
const
|
|
471
|
-
return s === "percent" ?
|
|
470
|
+
const o = y(r);
|
|
471
|
+
return s === "percent" ? d(o) : V(o);
|
|
472
472
|
}
|
|
473
473
|
getLayerLastSnapshots() {
|
|
474
474
|
if (this.stores.length <= 1) return null;
|
|
@@ -533,34 +533,58 @@ class R {
|
|
|
533
533
|
getVisibleDataPoints(t, e) {
|
|
534
534
|
return this.stores[0]?.getVisibleData(t, e) ?? [];
|
|
535
535
|
}
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
536
|
+
get stacking() {
|
|
537
|
+
return this.options.stacking;
|
|
538
|
+
}
|
|
539
|
+
getValueRange(t, e, s) {
|
|
540
|
+
const i = this.options.stacking;
|
|
541
|
+
if (i === "percent")
|
|
539
542
|
return { min: 0, max: 100 };
|
|
540
|
-
const
|
|
541
|
-
if (
|
|
542
|
-
let
|
|
543
|
-
for (const
|
|
544
|
-
for (const
|
|
545
|
-
Number.isFinite(
|
|
546
|
-
return
|
|
543
|
+
const r = this.stores.map((a) => a.isVisible() ? a.getVisibleData(t, e) : []), o = s?.plottable;
|
|
544
|
+
if (i === "off") {
|
|
545
|
+
let a = 1 / 0, u = -1 / 0;
|
|
546
|
+
for (const f of r)
|
|
547
|
+
for (const c of f)
|
|
548
|
+
Number.isFinite(c.value) && (o && !o(c.value) || (c.value < a && (a = c.value), c.value > u && (u = c.value)));
|
|
549
|
+
return a < 1 / 0 ? { min: a, max: u } : null;
|
|
547
550
|
}
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
551
|
+
if (o) return w(r, o);
|
|
552
|
+
const n = /* @__PURE__ */ new Map();
|
|
553
|
+
for (let a = 0; a < r.length; a++)
|
|
554
|
+
for (const u of r[a]) {
|
|
555
|
+
let f = n.get(u.time);
|
|
556
|
+
f || (f = new Array(r.length).fill(0), n.set(u.time, f)), f[a] = Number.isFinite(u.value) ? u.value : 0;
|
|
553
557
|
}
|
|
554
|
-
let l = 0,
|
|
555
|
-
for (const
|
|
556
|
-
let
|
|
557
|
-
for (const
|
|
558
|
-
|
|
559
|
-
|
|
558
|
+
let l = 0, h = 0;
|
|
559
|
+
for (const a of n.values()) {
|
|
560
|
+
let u = 0, f = 0;
|
|
561
|
+
for (const c of a)
|
|
562
|
+
c > 0 ? u += c : f += c;
|
|
563
|
+
u > h && (h = u), f < l && (l = f);
|
|
564
|
+
}
|
|
565
|
+
return h > l ? { min: l, max: h } : null;
|
|
566
|
+
}
|
|
567
|
+
}
|
|
568
|
+
function w(m, t) {
|
|
569
|
+
const e = /* @__PURE__ */ new Map();
|
|
570
|
+
for (let o = 0; o < m.length; o++)
|
|
571
|
+
for (const n of m[o]) {
|
|
572
|
+
let l = e.get(n.time);
|
|
573
|
+
l || (l = new Array(m.length).fill(0), e.set(n.time, l)), l[o] = t(n.value) ? n.value : 0;
|
|
574
|
+
}
|
|
575
|
+
const s = t(0);
|
|
576
|
+
let i = s ? 0 : 1 / 0, r = s ? 0 : -1 / 0;
|
|
577
|
+
for (const o of e.values()) {
|
|
578
|
+
let n = 0, l = 0;
|
|
579
|
+
for (const h of o) {
|
|
580
|
+
if (h === 0) continue;
|
|
581
|
+
h > 0 ? n += h : l += h;
|
|
582
|
+
const a = h > 0 ? n : l;
|
|
583
|
+
t(a) && (a < i && (i = a), a > r && (r = a));
|
|
560
584
|
}
|
|
561
|
-
return n > l ? { min: l, max: n } : null;
|
|
562
585
|
}
|
|
586
|
+
return i < 1 / 0 ? { min: i, max: r } : null;
|
|
563
587
|
}
|
|
564
588
|
export {
|
|
565
|
-
|
|
589
|
+
x as BaseMultiLayerSeries
|
|
566
590
|
};
|