@wick-charts/vue 0.6.3 → 0.6.4

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.
Files changed (35) hide show
  1. package/README.md +2 -2
  2. package/dist/BandSeries.vue.js +50 -0
  3. package/dist/BandSeries.vue2.js +4 -0
  4. package/dist/ChartContainer.vue.js +16 -16
  5. package/dist/LineSeries.vue.js +2 -2
  6. package/dist/core/dist/animation/config.js +92 -75
  7. package/dist/core/dist/chart/badge-animator.js +30 -22
  8. package/dist/core/dist/chart/edge-indicators.js +22 -21
  9. package/dist/core/dist/chart/last-value.js +33 -26
  10. package/dist/core/dist/chart.js +168 -167
  11. package/dist/core/dist/data/decimation.js +58 -39
  12. package/dist/core/dist/navigator/controller.js +10 -10
  13. package/dist/core/dist/perf/perf-hud.js +6 -6
  14. package/dist/core/dist/series/band.js +670 -0
  15. package/dist/core/dist/series/bar.js +14 -14
  16. package/dist/core/dist/series/candlestick.js +31 -31
  17. package/dist/core/dist/series/heatmap.js +5 -5
  18. package/dist/core/dist/series/line-intro.js +47 -37
  19. package/dist/core/dist/series/line.js +485 -445
  20. package/dist/core/dist/series/painters/builtins.js +4 -4
  21. package/dist/core/dist/series/painters/canvas-path.js +64 -52
  22. package/dist/core/dist/series/register-builtins.js +9 -8
  23. package/dist/core/dist/snapshots.js +36 -35
  24. package/dist/core/dist/utils/point.js +10 -0
  25. package/dist/index.d.ts +255 -97
  26. package/dist/index.js +195 -191
  27. package/dist/ui/InfoBar.vue.js +100 -81
  28. package/dist/ui/Tooltip.vue.js +118 -91
  29. package/dist/ui/YLabel.vue.js +62 -69
  30. package/package.json +2 -2
  31. package/src/BandSeries.vue +87 -0
  32. package/src/index.ts +8 -0
  33. package/src/ui/InfoBar.vue +20 -1
  34. package/src/ui/Tooltip.vue +36 -2
  35. package/src/ui/YLabel.vue +2 -13
@@ -368,14 +368,14 @@ class rt extends Q {
368
368
  if (t) {
369
369
  let L = 0, D = 0;
370
370
  for (let P = 0; P < i; P++) {
371
- const k = T[P];
372
- k > 0 ? L += k : D += k;
371
+ const H = T[P];
372
+ H > 0 ? L += H : D += H;
373
373
  }
374
- let z = 0, H = 0;
374
+ let z = 0, k = 0;
375
375
  for (const P of T)
376
- P > 0 ? z += P : H += P;
376
+ P > 0 ? z += P : k += P;
377
377
  if (v > 0 && z > 0) {
378
- const P = L / z * 100, k = (L + v) / z * 100, C = a.valueToBitmapY(k), O = a.valueToBitmapY(P), _ = Math.max(1, O - C);
378
+ const P = L / z * 100, H = (L + v) / z * 100, C = a.valueToBitmapY(H), O = a.valueToBitmapY(P), _ = Math.max(1, O - C);
379
379
  this.drawAnimatedBar({
380
380
  context: b,
381
381
  time: h,
@@ -390,8 +390,8 @@ class rt extends Q {
390
390
  isProjected: X,
391
391
  growBaked: !0
392
392
  });
393
- } else if (v < 0 && H < 0) {
394
- const P = D / H * -100, k = (D + v) / H * -100, C = a.valueToBitmapY(P), O = a.valueToBitmapY(k), _ = Math.max(1, O - C);
393
+ } else if (v < 0 && k < 0) {
394
+ const P = D / k * -100, H = (D + v) / k * -100, C = a.valueToBitmapY(P), O = a.valueToBitmapY(H), _ = Math.max(1, O - C);
395
395
  this.drawAnimatedBar({
396
396
  context: b,
397
397
  time: h,
@@ -412,14 +412,14 @@ class rt extends Q {
412
412
  if (L === void 0) continue;
413
413
  const D = L.base[i], z = L.end[i];
414
414
  if (v > 0) {
415
- const H = a.valueToBitmapY(z), P = a.valueToBitmapY(D), k = Math.max(1, P - H);
415
+ const k = a.valueToBitmapY(z), P = a.valueToBitmapY(D), H = Math.max(1, P - k);
416
416
  this.drawAnimatedBar({
417
417
  context: b,
418
418
  time: h,
419
419
  progress: S,
420
420
  baselineY: P,
421
- topY: H,
422
- barHeight: k,
421
+ topY: k,
422
+ barHeight: H,
423
423
  x: V - E,
424
424
  barWidth: w,
425
425
  color: m,
@@ -428,14 +428,14 @@ class rt extends Q {
428
428
  growBaked: !0
429
429
  });
430
430
  } else {
431
- const H = a.valueToBitmapY(D), P = a.valueToBitmapY(z), k = Math.max(1, P - H);
431
+ const k = a.valueToBitmapY(D), P = a.valueToBitmapY(z), H = Math.max(1, P - k);
432
432
  this.drawAnimatedBar({
433
433
  context: b,
434
434
  time: h,
435
435
  progress: S,
436
- baselineY: H,
437
- topY: H,
438
- barHeight: k,
436
+ baselineY: k,
437
+ topY: k,
438
+ barHeight: H,
439
439
  x: V - E,
440
440
  barWidth: w,
441
441
  color: m,
@@ -47,7 +47,7 @@ class ft {
47
47
  return this.#l && (t.volume = this.#e.current), t;
48
48
  }
49
49
  }
50
- const _ = 2, bt = { tl: !0, tr: !0, br: !0, bl: !0 }, j = { tl: !0, tr: !0, br: !1, bl: !1 }, Yt = ct(), gt = pt(), xt = {
50
+ const _ = 2, bt = { tl: !0, tr: !0, br: !0, bl: !0 }, j = { tl: !0, tr: !0, br: !1, bl: !1 }, Yt = ct(), gt = pt(), yt = {
51
51
  up: { body: "#26a69a", wick: "#26a69a" },
52
52
  down: { body: "#ef5350", wick: "#ef5350" },
53
53
  bodyWidthRatio: 0.6,
@@ -69,7 +69,7 @@ function tt(a) {
69
69
  historyRevealMs: a.historyRevealMs === !1 ? 0 : a.historyRevealMs ?? it
70
70
  };
71
71
  }
72
- class yt {
72
+ class xt {
73
73
  kind = "candlestick";
74
74
  store;
75
75
  options;
@@ -126,7 +126,7 @@ class yt {
126
126
  * `createLinearGradient` for every body on every frame. */
127
127
  #m = /* @__PURE__ */ new Map();
128
128
  constructor(t, i) {
129
- this.store = t, this.options = tt({ ...xt, ...i }), this.displayedLast = t.last() ?? null;
129
+ this.store = t, this.options = tt({ ...yt, ...i }), this.displayedLast = t.last() ?? null;
130
130
  }
131
131
  isEntryEnabled() {
132
132
  return (this.options.entryAnimation ?? "unfold") !== "none";
@@ -319,10 +319,10 @@ class yt {
319
319
  const r = this.options.historyReveal ?? gt;
320
320
  if (r !== "none") {
321
321
  let c;
322
- const y = this.#c;
323
- if (y !== null && y.bars.length > 0) {
324
- const P = e.timeToBitmapX(y.anchorTime);
325
- c = y.bars.map((k) => ({
322
+ const x = this.#c;
323
+ if (x !== null && x.bars.length > 0) {
324
+ const P = e.timeToBitmapX(x.anchorTime);
325
+ c = x.bars.map((k) => ({
326
326
  x: P - k.offsetX * i.horizontalPixelRatio,
327
327
  y: k.y * i.verticalPixelRatio,
328
328
  halfHeight: k.halfHeight * i.verticalPixelRatio,
@@ -342,11 +342,11 @@ class yt {
342
342
  let W = null;
343
343
  if (this.entries.size > 0) {
344
344
  const r = this.options.entryMs, c = performance.now();
345
- for (const y of m) {
346
- const P = this.entries.get(y.time);
345
+ for (const x of m) {
346
+ const P = this.entries.get(x.time);
347
347
  if (P === void 0 || r <= 0) continue;
348
348
  const k = c - P.startTime, V = Math.min(1, Math.max(0, k / r));
349
- V >= 1 || (W === null && (W = /* @__PURE__ */ new Map()), W.set(y.time, at(V)));
349
+ V >= 1 || (W === null && (W = /* @__PURE__ */ new Map()), W.set(x.time, at(V)));
350
350
  }
351
351
  }
352
352
  const X = e.barWidthBitmap(h), b = Math.round(30 * l), w = m.length <= 2 ? Math.min(b, X) : X, f = Math.max(1, Math.round(l));
@@ -360,8 +360,8 @@ class yt {
360
360
  const T = this.#h?.clip;
361
361
  let A = !1;
362
362
  if (T !== void 0 && u !== null) {
363
- const r = e.timeToBitmapX(u.to), c = Math.abs(r - e.timeToBitmapX(u.from)), y = w, P = T.fromX ?? 0, k = T.toX ?? c;
364
- n.save(), n.beginPath(), n.rect(r - k - y, 0, Math.max(0, k - P + y), i.bitmapSize.height), n.rect(r, 0, Math.max(0, i.bitmapSize.width - r), i.bitmapSize.height), n.clip(), A = !0;
363
+ const r = e.timeToBitmapX(u.to), c = Math.abs(r - e.timeToBitmapX(u.from)), x = w, P = T.fromX ?? 0, k = T.toX ?? c;
364
+ n.save(), n.beginPath(), n.rect(r - k - x, 0, Math.max(0, k - P + x), i.bitmapSize.height), n.rect(r, 0, Math.max(0, i.bitmapSize.width - r), i.bitmapSize.height), n.clip(), A = !0;
365
365
  }
366
366
  const s = M !== this.#r;
367
367
  this.#r = M;
@@ -377,7 +377,7 @@ class yt {
377
377
  snapVolScale: s,
378
378
  radius: (this.options.cornerRadius ?? _) * l
379
379
  });
380
- const x = [], L = [], B = [];
380
+ const y = [], L = [], B = [];
381
381
  let C = null;
382
382
  for (let r = 0; r < m.length; r++) {
383
383
  const c = m[r];
@@ -385,7 +385,7 @@ class yt {
385
385
  B.push(r), C === null && (C = c);
386
386
  continue;
387
387
  }
388
- c.close >= c.open ? x.push(c) : L.push(c);
388
+ c.close >= c.open ? y.push(c) : L.push(c);
389
389
  }
390
390
  C !== null && ht(this, "candlestick", B, `time ${C.time}`);
391
391
  const E = {
@@ -409,7 +409,7 @@ class yt {
409
409
  };
410
410
  this.drawCandles({
411
411
  ...D,
412
- candles: x,
412
+ candles: y,
413
413
  body: this.options.up.body,
414
414
  wickColor: this.options.up.wick
415
415
  }), this.drawCandles({
@@ -479,14 +479,14 @@ class yt {
479
479
  const A = l?.get(f.time) ?? 1;
480
480
  let s = { x: R - W, topY: o - v, bottomY: o, alpha: 1 };
481
481
  if (A < 1 && w !== "none") {
482
- const x = O(A, w, {
482
+ const y = O(A, w, {
483
483
  x: s.x,
484
484
  barWidth: u,
485
485
  anchorY: o,
486
486
  topY: s.topY,
487
487
  bottomY: s.bottomY
488
488
  });
489
- s = { x: x.x, topY: x.topY, bottomY: x.bottomY, alpha: x.alpha };
489
+ s = { x: y.x, topY: y.topY, bottomY: y.bottomY, alpha: y.alpha };
490
490
  }
491
491
  const d = this.introTransform({
492
492
  element: "volume",
@@ -556,17 +556,17 @@ class yt {
556
556
  anchorY: g,
557
557
  barWidth: u
558
558
  });
559
- let x = 0;
560
- if (d !== null && (s = { x: d.x, topY: d.topY, bottomY: d.bottomY, alpha: s.alpha * d.alpha }, x = d.tint ?? 0, A = !0), !A) {
559
+ let y = 0;
560
+ if (d !== null && (s = { x: d.x, topY: d.topY, bottomY: d.bottomY, alpha: s.alpha * d.alpha }, y = d.tint ?? 0, A = !0), !A) {
561
561
  t.fillRect(T, R, l, v - R);
562
562
  continue;
563
563
  }
564
- t.save(), t.globalAlpha = s.alpha, x > 0 && (t.fillStyle = G(m, W, x)), t.fillRect(s.x, s.topY, l, Math.max(1, s.bottomY - s.topY)), t.restore();
564
+ t.save(), t.globalAlpha = s.alpha, y > 0 && (t.fillStyle = G(m, W, y)), t.fillRect(s.x, s.topY, l, Math.max(1, s.bottomY - s.topY)), t.restore();
565
565
  }
566
566
  const X = Array.isArray(p);
567
567
  for (const b of i) {
568
568
  const w = Y?.get(b.time) ?? 1, f = e.timeToBitmapX(b.time), g = o.valueToBitmapY(b.open), R = o.valueToBitmapY(b.close), v = Math.min(g, R), T = Math.max(g, R), A = Math.max(1, T - v);
569
- let s = f - h, d = v, x = T, L = 1, B = !1;
569
+ let s = f - h, d = v, y = T, L = 1, B = !1;
570
570
  if (w < 1 && S !== "none") {
571
571
  const H = O(w, S, {
572
572
  x: s,
@@ -575,24 +575,24 @@ class yt {
575
575
  topY: v,
576
576
  bottomY: T
577
577
  });
578
- s = H.x, d = H.topY, x = H.bottomY, L = H.alpha, B = !0;
578
+ s = H.x, d = H.topY, y = H.bottomY, L = H.alpha, B = !0;
579
579
  }
580
580
  const C = this.introTransform({
581
581
  element: "body",
582
582
  time: b.time,
583
583
  x: s,
584
584
  topY: d,
585
- bottomY: x,
585
+ bottomY: y,
586
586
  anchorY: g,
587
587
  barWidth: u
588
588
  });
589
589
  let E = 0;
590
- C !== null && (s = C.x, d = C.topY, x = C.bottomY, L *= C.alpha, E = C.tint ?? 0, B = !0);
591
- const D = B ? Math.max(1, x - d) : A;
590
+ C !== null && (s = C.x, d = C.topY, y = C.bottomY, L *= C.alpha, E = C.tint ?? 0, B = !0);
591
+ const D = B ? Math.max(1, y - d) : A;
592
592
  B && t.save();
593
- const r = Array.isArray(p) ? p[0] : p, c = E > 0 ? G(r, W, E) : r, y = X && D > 2 && E <= 0, P = y ? this.#d(t, p, D) : c;
594
- t.fillStyle = P, B && (t.globalAlpha = L), y && t.translate(0, d);
595
- const k = y ? 0 : d, V = F(M.radius, 0, Math.min(n, D) / 2);
593
+ const r = Array.isArray(p) ? p[0] : p, c = E > 0 ? G(r, W, E) : r, x = X && D > 2 && E <= 0, P = x ? this.#d(t, p, D) : c;
594
+ t.fillStyle = P, B && (t.globalAlpha = L), x && t.translate(0, d);
595
+ const k = x ? 0 : d, V = F(M.radius, 0, Math.min(n, D) / 2);
596
596
  V < 1 && !this.options.candlePainter ? t.fillRect(s, k, n, D) : M.painter(M.env, {
597
597
  geom: { x: s, y: k, width: n, height: D },
598
598
  fillStyle: P,
@@ -601,7 +601,7 @@ class yt {
601
601
  radius: V,
602
602
  progress: w,
603
603
  isBullish: b.close >= b.open
604
- }), y && t.translate(0, -d), B && t.restore();
604
+ }), x && t.translate(0, -d), B && t.restore();
605
605
  }
606
606
  }
607
607
  /**
@@ -650,13 +650,13 @@ function O(a, t, i) {
650
650
  }
651
651
  const zt = {
652
652
  type: "candlestick",
653
- create: ({ theme: a }, t) => new yt(new lt(), {
653
+ create: ({ theme: a }, t) => new xt(new lt(), {
654
654
  up: { ...a.candlestick.up },
655
655
  down: { ...a.candlestick.down },
656
656
  ...t
657
657
  })
658
658
  };
659
659
  export {
660
- yt as CandlestickRenderer,
660
+ xt as CandlestickRenderer,
661
661
  zt as CandlestickSeriesDef
662
662
  };
@@ -5,7 +5,7 @@ import { sampleRamp as Y, deriveHeatmapRamp as st, mixColors as et, isLightColor
5
5
  import { formatCompact as ot } from "../utils/format.js";
6
6
  import { clamp as v, smoothToward as z } from "../utils/math.js";
7
7
  import { fillRoundedRect as nt } from "./painters/canvas-path.js";
8
- const P = {
8
+ const E = {
9
9
  fontSize: 10
10
10
  };
11
11
  function ht(r, s) {
@@ -20,9 +20,9 @@ const lt = {
20
20
  updateMs: Q
21
21
  };
22
22
  function rt(r) {
23
- return r === void 0 || r === !1 ? !1 : r === !0 ? P : { ...P, ...r };
23
+ return r === void 0 || r === !1 ? !1 : r === !0 ? E : { ...E, ...r };
24
24
  }
25
- function E(r, s) {
25
+ function P(r, s) {
26
26
  const t = {
27
27
  ...r,
28
28
  ...s,
@@ -92,7 +92,7 @@ class ct {
92
92
  /** Data extent cached by {@link #rebuildGrid} — see {@link #domain}. */
93
93
  #M = { min: 0, max: 1 };
94
94
  constructor(s, t) {
95
- this.#t = E(lt, s ?? {}), this.#r = this.#t.entryMs === 0, this.#g = t ?? null;
95
+ this.#t = P(lt, s ?? {}), this.#r = this.#t.entryMs === 0, this.#g = t ?? null;
96
96
  }
97
97
  // --- Data ingest -----------------------------------------------------------
98
98
  setData(s) {
@@ -118,7 +118,7 @@ class ct {
118
118
  }
119
119
  updateOptions(s) {
120
120
  const t = this.#t.columns, e = this.#t.rows;
121
- this.#t = E(this.#t, s ?? {}), (this.#t.columns !== t || this.#t.rows !== e) && this.#b(), this.#t.entryMs === 0 && (this.#r = !0), this.#t.updateMs === 0 && (this.#u = !1), this.#o = null;
121
+ this.#t = P(this.#t, s ?? {}), (this.#t.columns !== t || this.#t.rows !== e) && this.#b(), this.#t.entryMs === 0 && (this.#r = !0), this.#t.updateMs === 0 && (this.#u = !1), this.#o = null;
122
122
  }
123
123
  // --- Layer model (single-layer no-ops, mirroring pie) ----------------------
124
124
  getLayerCount() {
@@ -3,59 +3,59 @@ function l(e) {
3
3
  return e <= 0 ? 0 : e >= 1 ? 1 : e;
4
4
  }
5
5
  function g(e) {
6
- const o = f(e.progress), t = e.range.from + o * (e.range.to - e.range.from);
6
+ const n = f(e.progress), t = e.range.from + n * (e.range.to - e.range.from);
7
7
  return { x: e.timeToX(t), time: t };
8
8
  }
9
9
  function I(e = {}) {
10
- const o = e.head ?? !0;
10
+ const n = e.head ?? !0;
11
11
  return (t) => {
12
12
  const r = g(t);
13
- return { clip: { toX: r.x }, heads: o ? [r] : void 0 };
13
+ return { clip: { toX: r.x }, heads: n ? [r] : void 0 };
14
14
  };
15
15
  }
16
- function y(e = {}) {
17
- const o = Math.min(l(e.stagger ?? 0.35), 0.9);
16
+ function v(e = {}) {
17
+ const n = Math.min(l(e.stagger ?? 0.35), 0.9);
18
18
  return (t) => ({
19
- value: ({ layerIndex: r, value: i, position: c }) => {
20
- const u = t.layerMean(r);
21
- if (u === null || !Number.isFinite(i)) return i;
22
- const n = l((t.progress - o * c) / (1 - o));
23
- return t.lerpValue(u, i, d(n));
19
+ value: ({ layerIndex: r, value: s, position: u }) => {
20
+ const i = t.layerMean(r);
21
+ if (i === null || !Number.isFinite(s)) return s;
22
+ const o = l((t.progress - n * u) / (1 - n));
23
+ return t.lerpValue(i, s, d(o));
24
24
  }
25
25
  });
26
26
  }
27
- function T() {
27
+ function y() {
28
28
  const e = I();
29
- return (o) => {
30
- if (o.stacking !== "off") return e(o);
31
- const t = o.primaryPath();
32
- if (t === null || t.length < 2) return e(o);
29
+ return (n) => {
30
+ if (n.stacking !== "off") return e(n);
31
+ const t = n.primaryPath();
32
+ if (t === null || t.length < 2) return e(n);
33
33
  let r = 0;
34
- const i = [];
35
- for (let n = 1; n < t.length; n++) {
36
- const s = Math.hypot(t[n].x - t[n - 1].x, t[n].y - t[n - 1].y);
37
- i.push(s), r += s;
34
+ const s = [];
35
+ for (let o = 1; o < t.length; o++) {
36
+ const a = Math.hypot(t[o].x - t[o - 1].x, t[o].y - t[o - 1].y);
37
+ s.push(a), r += a;
38
38
  }
39
- if (r <= 0) return e(o);
40
- let c = o.progress * r;
41
- for (let n = 1; n < t.length; n++) {
42
- const s = i[n - 1];
43
- if (c > s) {
44
- c -= s;
39
+ if (r <= 0) return e(n);
40
+ let u = n.progress * r;
41
+ for (let o = 1; o < t.length; o++) {
42
+ const a = s[o - 1];
43
+ if (u > a) {
44
+ u -= a;
45
45
  continue;
46
46
  }
47
- const p = s > 0 ? c / s : 1, a = t[n - 1], h = t[n], m = a.x + (h.x - a.x) * p, x = a.time + (h.time - a.time) * p;
47
+ const p = a > 0 ? u / a : 1, c = t[o - 1], h = t[o], m = c.x + (h.x - c.x) * p, x = c.time + (h.time - c.time) * p;
48
48
  return { clip: { toX: m }, heads: [{ x: m, time: x }] };
49
49
  }
50
- const u = t[t.length - 1];
51
- return { clip: { toX: u.x }, heads: [{ x: u.x, time: u.time }] };
50
+ const i = t[t.length - 1];
51
+ return { clip: { toX: i.x }, heads: [{ x: i.x, time: i.time }] };
52
52
  };
53
53
  }
54
- function w(e = {}) {
55
- const o = l(e.ghostAlpha ?? 0.18);
54
+ function T(e = {}) {
55
+ const n = l(e.ghostAlpha ?? 0.18);
56
56
  return (t) => {
57
57
  const r = g(t);
58
- return { clip: { toX: r.x }, heads: [r], ghostAlpha: o };
58
+ return { clip: { toX: r.x }, heads: [r], ghostAlpha: n };
59
59
  };
60
60
  }
61
61
  function b() {
@@ -63,9 +63,9 @@ function b() {
63
63
  clip: { toX: f(e.progress) * e.width }
64
64
  });
65
65
  }
66
- function k() {
66
+ function w() {
67
67
  return (e) => {
68
- const o = f(e.progress), t = e.width / 2, r = t * o;
68
+ const n = f(e.progress), t = e.width / 2, r = t * n;
69
69
  return {
70
70
  clip: { fromX: t - r, toX: t + r },
71
71
  heads: [
@@ -75,11 +75,21 @@ function k() {
75
75
  };
76
76
  };
77
77
  }
78
+ function M(e, n) {
79
+ const t = n.getTransform();
80
+ let r = 0, s = 0;
81
+ for (const i of e)
82
+ n.isPlottable(i.value) && (r += t === null ? i.value : t.forward(i.value), s++);
83
+ if (s === 0) return null;
84
+ const u = r / s;
85
+ return t === null ? u : t.inverse(u);
86
+ }
78
87
  export {
79
88
  b as backfillSweepIntro,
80
- k as centerOutIntro,
81
- T as plotterIntro,
89
+ w as centerOutIntro,
90
+ y as plotterIntro,
91
+ M as scaleMean,
82
92
  I as sweepIntro,
83
- w as traceIntro,
84
- y as unfoldIntro
93
+ T as traceIntro,
94
+ v as unfoldIntro
85
95
  };