@wick-charts/vue 0.6.1 → 0.6.3

package/dist/core/dist/scales/x-scale.js

@@ -1,13 +1,14 @@
-import { formatTime as m, niceTimeIntervals as c } from "../utils/time.js";
-import { AxisTickTracker as f } from "./tick-tracker.js";
-const o = 50, v = 80;
-class p {
+import { crispCenterOffset as m } from "../utils/pixel-grid.js";
+import { formatTime as c, niceTimeIntervals as f } from "../utils/time.js";
+import { AxisTickTracker as v } from "./tick-tracker.js";
+const o = 50, d = 80;
+class b {
   /**
    * Shared fade state for time ticks. Grid lines (canvas) and DOM tick labels
    * read opacity from the same tracker, so a tick fading in/out looks
    * identical on both surfaces.
    */
-  tickTracker = new f();
+  tickTracker = new v();
   from = 0;
   to = 0;
   width = 1;
@@ -37,17 +38,17 @@ class p {
     return this.labelCountHintValue;
   }
   get minLabelSpacing() {
-    return this.minSpacingValue ?? v;
+    return this.minSpacingValue ?? d;
   }
-  update(t, e, n, r) {
-    if (this.from = t.from, this.to = t.to, this.width = e, this.pixelRatio = n, r !== void 0 && r > 0) {
-      const a = h(r);
-      this.lastBucketKey !== null && this.lastBucketKey !== a && this.resetHysteresis(), this.lastBucketKey = a, this.dataInterval = r;
+  update(t, e, n, l) {
+    if (this.from = t.from, this.to = t.to, this.width = e, this.pixelRatio = n, l !== void 0 && l > 0) {
+      const a = h(l);
+      this.lastBucketKey !== null && this.lastBucketKey !== a && this.resetHysteresis(), this.lastBucketKey = a, this.dataInterval = l;
     }
     this.resolveInterval();
   }
   setLabelCount(t) {
-    this.labelCountHintValue = d(t), this.resetHysteresis(), this.resolveInterval();
+    this.labelCountHintValue = p(t), this.resetHysteresis(), this.resolveInterval();
   }
   setMinSpacing(t) {
     this.minSpacingValue = I(t), this.resetHysteresis(), this.resolveInterval();
@@ -88,7 +89,7 @@ class p {
    * `formatTime`, applying the installed locale/timezone.
    */
   formatX(t, e) {
-    return this.customFormat ? this.customFormat(t, e) : m(t, e, { locale: this.localeValue, timeZone: this.timeZoneValue });
+    return this.customFormat ? this.customFormat(t, e) : c(t, e, { locale: this.localeValue, timeZone: this.timeZoneValue });
   }
   resetHysteresis() {
     this.lastInterval = null, this.lastWant = null;
@@ -96,8 +97,22 @@ class p {
   timeToX(t) {
     return this.to <= this.from ? 0 : (t - this.from) / (this.to - this.from) * this.width;
   }
+  /** X in physical (bitmap) pixels, snapped to the pixel grid — for
+   *  axis-aligned edges that have to stay crisp. */
   timeToBitmapX(t) {
-    return Math.round(this.timeToX(t) * this.pixelRatio);
+    return Math.round(this.timeToBitmapXExact(t));
+  }
+  /** Same in physical pixels, off the grid — see {@link YScale.valueToBitmapYExact}. */
+  timeToBitmapXExact(t) {
+    return this.timeToX(t) * this.pixelRatio;
+  }
+  /**
+   * X position in CSS pixels of the *stroke center* the canvas grid draws for
+   * `time`. DOM axis labels position off this instead of raw {@link timeToX}
+   * so text and gridline share one pixel grid.
+   */
+  timeToSnappedX(t) {
+    return (this.timeToBitmapX(t) + m(this.pixelRatio)) / this.pixelRatio;
   }
   xToTime(t) {
     return this.to <= this.from ? this.from : this.from + t / this.width * (this.to - this.from);
@@ -119,16 +134,16 @@ class p {
   niceTickValues(t) {
     if (this.to <= this.from) return { ticks: [], tickInterval: 0 };
     if (this.customTickGenerator) {
-      const i = this.customTickGenerator({ from: this.from, to: this.to }, t).slice(0, o), l = i.length >= 2 ? i[1] - i[0] : t;
-      return { ticks: i, tickInterval: l };
+      const i = this.customTickGenerator({ from: this.from, to: this.to }, t).slice(0, o), r = i.length >= 2 ? i[1] - i[0] : t;
+      return { ticks: i, tickInterval: r };
     }
     if (this.dataInterval !== t) {
       const i = h(t);
       this.lastBucketKey !== null && this.lastBucketKey !== i && this.resetHysteresis(), this.lastBucketKey = i, this.dataInterval = t, this.resolveInterval();
     }
     if (this.resolvedInterval == null) return { ticks: [], tickInterval: 0 };
-    const e = this.resolvedInterval, n = Math.ceil(this.from / e) * e, r = Math.max(0, Math.min(o, Math.floor((this.to - n) / e) + 1)), a = [];
-    for (let i = 0; i < r; i++) a.push(n + i * e);
+    const e = this.resolvedInterval, n = Math.ceil(this.from / e) * e, l = Math.max(0, Math.min(o, Math.floor((this.to - n) / e) + 1)), a = [];
+    for (let i = 0; i < l; i++) a.push(n + i * e);
     return { ticks: a, tickInterval: e };
   }
   getRange() {
@@ -147,31 +162,31 @@ class p {
       this.resolvedInterval = null;
       return;
     }
-    const t = c(this.dataInterval), e = this.to - this.from, n = e / this.width * this.minLabelSpacing;
-    let r;
+    const t = f(this.dataInterval), e = this.to - this.from, n = e / this.width * this.minLabelSpacing;
+    let l;
     if (this.labelCountHint != null) {
-      const l = Math.max(1, this.labelCountHint);
-      r = Math.max(e / l, n);
+      const r = Math.max(1, this.labelCountHint);
+      l = Math.max(e / r, n);
     } else
-      r = n;
+      l = n;
     if (this.lastInterval != null && this.lastWant != null && t.includes(this.lastInterval)) {
-      const l = r >= this.lastWant * 0.8 && r <= this.lastWant * 1.25, u = this.lastInterval >= n;
-      if (l && u) {
+      const r = l >= this.lastWant * 0.8 && l <= this.lastWant * 1.25, u = this.lastInterval >= n;
+      if (r && u) {
         this.resolvedInterval = this.lastInterval;
         return;
       }
     }
     let a = t[t.length - 1], i = t.length - 1;
-    for (let l = 0; l < t.length; l++)
-      if (t[l] >= r) {
-        a = t[l], i = l;
+    for (let r = 0; r < t.length; r++)
+      if (t[r] >= l) {
+        a = t[r], i = r;
         break;
       }
     if (this.labelCountHint != null && i > 0 && this.countTicks(a) < this.labelCountHint) {
-      const l = t[i - 1];
-      l >= n && (a = l);
+      const r = t[i - 1];
+      r >= n && (a = r);
     }
-    this.resolvedInterval = a, this.lastInterval = a, this.lastWant = r;
+    this.resolvedInterval = a, this.lastInterval = a, this.lastWant = l;
   }
   countTicks(t) {
     if (!(t > 0)) return 0;
@@ -182,12 +197,12 @@ class p {
 function h(s) {
   return s < 6e4 ? 0 : s < 36e5 ? 1 : s < 864e5 ? 2 : 3;
 }
-function d(s) {
+function p(s) {
   return typeof s == "number" && Number.isFinite(s) && s >= 2 ? Math.floor(s) : null;
 }
 function I(s) {
   return typeof s == "number" && Number.isFinite(s) && s > 0 ? s : null;
 }
 export {
-  p as XScale
+  b as XScale
 };

package/dist/core/dist/scales/y-scale.js

@@ -1,21 +1,30 @@
 import { formatCompact as o } from "../utils/format.js";
-import { AxisTickTracker as u } from "./tick-tracker.js";
-function m(e) {
+import { crispCenterOffset as u } from "../utils/pixel-grid.js";
+import { AxisTickTracker as m } from "./tick-tracker.js";
+function c(e) {
   if (!Number.isFinite(e) || e <= 0) return 1;
   const t = 10 ** Math.floor(Math.log10(e)), i = e / t;
   return (i <= 1 ? 1 : i <= 2 ? 2 : i <= 5 ? 5 : 10) * t;
 }
-function c(e) {
+function f(e) {
   if (!Number.isFinite(e) || e <= 0) return 1;
   const t = 10 ** Math.floor(Math.log10(e)), i = e / t;
   return (i >= 5 ? 5 : i >= 2 ? 2 : 1) * t;
 }
-const r = 50, v = 50;
-class M {
+const a = 50, v = 50;
+function g(e, t) {
+  return Number.isFinite(t) ? e?.isPlottable?.(t) ?? !0 : !1;
+}
+class d {
   /** Shared fade state for Y ticks; see {@link TimeScale.tickTracker}. */
-  tickTracker = new u();
+  tickTracker = new m();
+  /** Non-linear value mapping (`axis.y.scale`); `null` is linear. */
+  transform = null;
   min = 0;
   max = 0;
+  /** Domain bounds in scale space — `transform.forward` of `min` / `max`. */
+  lo = 0;
+  hi = 0;
   height = 1;
   pixelRatio = 1;
   // Label density knobs — written by <YAxis labelCount=… minLabelSpacing=…>.
@@ -33,6 +42,8 @@ class M {
    * the boundary doesn't instantly flip back.
    */
   lastRawInterval = null;
+  /** The transform's own ticks (e.g. powers of ten); `null` while linear ticks are in use. */
+  ownTicks = null;
   /** Custom formatter (driven by `<YAxis format=…>`). */
   customFormat = null;
   /** Custom tick generator — bypasses {1,2,5}×10^k resolution in `niceTickValues` when set. */
@@ -44,20 +55,46 @@ class M {
     return this.minSpacingValue ?? v;
   }
   /** Recalculate the scale with a new Y range, chart height, and device pixel ratio. */
-  update(t, i, a) {
-    this.min = t.min, this.max = t.max, this.height = i, this.pixelRatio = a, this.resolveInterval();
+  update(t, i, s) {
+    this.min = t.min, this.max = t.max, this.height = i, this.pixelRatio = s, this.updateDomain(), this.resolveTicks();
+  }
+  /** Install a non-linear value mapping, or `null` for linear. The range is kept as-is — the chart refits it. */
+  setTransform(t) {
+    t !== this.transform && (this.transform = t, this.resetHysteresis(), this.updateDomain(), this.resolveTicks());
+  }
+  getTransform() {
+    return this.transform;
+  }
+  /**
+   * Whether `value` has a position on this scale: finite, and inside the
+   * transform's domain (positive on log). Renderers skip values that fail —
+   * {@link valueToY} still maps them (to the plot floor) so nothing
+   * downstream sees NaN.
+   */
+  isPlottable(t) {
+    return g(this.transform, t);
   }
   /** Desired label count. Invalid values (NaN, <2, Infinity) clear the hint. */
   setLabelCount(t) {
-    this.labelCountHintValue = f(t), this.resetHysteresis(), this.resolveInterval();
+    this.labelCountHintValue = p(t), this.resetHysteresis(), this.resolveTicks();
   }
   /** Minimum pixel gap between adjacent labels. */
   setMinSpacing(t) {
-    this.minSpacingValue = g(t), this.resetHysteresis(), this.resolveInterval();
+    this.minSpacingValue = x(t), this.resetHysteresis(), this.resolveTicks();
   }
   resetHysteresis() {
     this.lastInterval = null, this.lastRawInterval = null;
   }
+  /** A transformed domain needs both bounds plottable; anything else collapses to a flat one. */
+  updateDomain() {
+    const t = this.transform;
+    if (t === null) {
+      this.lo = this.min, this.hi = this.max;
+      return;
+    }
+    const i = this.isPlottable(this.min) && this.isPlottable(this.max);
+    this.lo = i ? t.forward(this.min) : 0, this.hi = i ? t.forward(this.max) : 0;
+  }
   /** Install (or clear) a custom formatter. */
   setFormat(t) {
     this.customFormat = t;
@@ -74,30 +111,73 @@ class M {
   setTickGenerator(t) {
     this.customTickGenerator = t, this.resetHysteresis();
   }
-  /** Convert a value to a Y position in CSS (media) pixels. */
+  /**
+   * Convert a value to a Y position in CSS (media) pixels. A value the
+   * transform can't place (≤ 0 on log) lands on the plot floor.
+   */
   valueToY(t) {
-    const i = this.max - this.min;
-    return i === 0 ? this.height / 2 : (1 - (t - this.min) / i) * this.height;
+    const i = this.hi - this.lo;
+    if (i === 0) return this.height / 2;
+    const s = this.transform;
+    return s === null ? (1 - (t - this.lo) / i) * this.height : this.isPlottable(t) ? (1 - (s.forward(t) - this.lo) / i) * this.height : this.height;
   }
-  /** Convert a value to a Y position in physical (bitmap) pixels. */
+  /** Convert a value to a Y position in physical (bitmap) pixels, snapped to
+   *  the pixel grid — for axis-aligned edges that have to stay crisp. */
   valueToBitmapY(t) {
-    return Math.round(this.valueToY(t) * this.pixelRatio);
+    return Math.round(this.valueToBitmapYExact(t));
   }
-  /** Convert a Y position in CSS pixels back to a value. */
+  /**
+   * Same in physical pixels, off the grid. Anti-aliased geometry reads this
+   * one: snapping buys a diagonal stroke no sharpness, and during a slow
+   * animation it quantises the motion into whole-pixel jumps.
+   */
+  valueToBitmapYExact(t) {
+    return this.valueToY(t) * this.pixelRatio;
+  }
+  /**
+   * Y position in CSS pixels of the *stroke center* the canvas grid draws for
+   * `value`. DOM axis labels position off this instead of raw {@link valueToY}
+   * so text and gridline share one pixel grid.
+   */
+  valueToSnappedY(t) {
+    return (this.valueToBitmapY(t) + u(this.pixelRatio)) / this.pixelRatio;
+  }
+  /** Convert a Y position in CSS pixels back to a value — the exact inverse of {@link valueToY}. */
   yToValue(t) {
-    const i = this.max - this.min;
-    return i === 0 ? this.min : this.max - t / this.height * i;
+    const i = this.hi - this.lo;
+    if (i === 0) return this.min;
+    const s = this.hi - t / this.height * i;
+    return this.transform === null ? s : this.transform.inverse(s);
+  }
+  /** The value bars and stacks grow from: `0`, or the plot floor's value on a scale with no place for 0 (log). */
+  baselineValue() {
+    return this.isPlottable(0) ? 0 : this.min;
+  }
+  /**
+   * The value `t` of the way from `from` to `to` in pixels — a plain lerp on a
+   * linear axis, a geometric one on log. `t` past `[0, 1]` overshoots along the
+   * axis. An endpoint the transform can't place returns `to`, so a gap stays a gap.
+   */
+  lerpValue(t, i, s) {
+    const n = this.transform;
+    if (n === null) return t + (i - t) * s;
+    if (!this.isPlottable(t) || !this.isPlottable(i)) return i;
+    const r = n.forward(t);
+    return n.inverse(r + (n.forward(i) - r) * s);
   }
   /**
    * Generate evenly spaced "nice" tick values for the current range and
    * chart height. Pure read — resolution happens in `update()`.
    */
   niceTickValues() {
-    if (this.customTickGenerator) return this.customTickGenerator({ min: this.min, max: this.max }).slice(0, r);
+    return this.customTickGenerator ? this.customTickGenerator({ min: this.min, max: this.max }).slice(0, a) : this.ownTicks !== null ? this.ownTicks.slice(0, a) : this.linearTickValues();
+  }
+  /** {1,2,5}×10^k ticks at the resolved interval, limited to what the transform can place. */
+  linearTickValues() {
     if (this.resolvedInterval == null) return [];
-    const t = this.resolvedInterval, i = Math.ceil(this.min / t) * t, a = Math.max(0, Math.min(r, Math.floor((this.max - i) / t) + 1)), s = [];
-    for (let n = 0; n < a; n++) s.push(i + n * t);
-    return s;
+    const t = this.resolvedInterval, i = Math.ceil(this.min / t) * t, s = Math.max(0, Math.min(a, Math.floor((this.max - i) / t) + 1)), n = [];
+    for (let r = 0; r < s; r++) n.push(i + r * t);
+    return this.transform === null ? n : n.filter((r) => this.isPlottable(r));
   }
   getRange() {
     return { min: this.min, max: this.max };
@@ -114,13 +194,49 @@ class M {
    */
   formatY(t) {
     if (this.customFormat) return this.customFormat(t);
+    const i = this.ownTicks !== null ? this.transform?.format : void 0;
+    if (i) return i(t);
     if (this.max - this.min >= 1e6) return o(t);
-    const i = this.resolvedInterval, a = i != null && i > 0 ? Math.max(0, -Math.floor(Math.log10(i))) : 1;
-    return t.toFixed(a);
+    const s = this.resolvedInterval, n = s != null && s > 0 ? Math.max(0, -Math.floor(Math.log10(s))) : 1;
+    return t.toFixed(n);
+  }
+  resolveTicks() {
+    this.ownTicks = null;
+    const t = this.transform;
+    if (t === null) {
+      this.resolveInterval((this.max - this.min) * this.minLabelSpacing / this.height);
+      return;
+    }
+    const i = this.hi - this.lo;
+    if (!(i > 0) || this.height <= 0) {
+      this.resolvedInterval = null;
+      return;
+    }
+    if (this.resolveInterval(this.transformedGapFloor(t, i)), !t.ticks) return;
+    const s = this.linearTickValues(), n = t.ticks({
+      min: this.min,
+      max: this.max,
+      height: this.height,
+      minSpacing: this.minLabelSpacing,
+      labelCount: this.labelCountHint,
+      linear: s
+    });
+    this.ownTicks = n === s ? null : n;
+  }
+  /**
+   * Smallest linear interval whose ticks stay `minLabelSpacing` apart on the
+   * transformed axis. A monotonic mapping squeezes its gaps hardest at one
+   * end — the top for log (concave), the bottom for a convex one — so
+   * checking both ends covers it.
+   */
+  transformedGapFloor(t, i) {
+    const s = this.minLabelSpacing / this.height * i, n = this.max - t.inverse(Math.max(this.lo, this.hi - s)), r = t.inverse(Math.min(this.hi, this.lo + s)) - this.min;
+    return Math.max(n, r);
   }
   /**
    * Resolve the interval to a {1,2,5}×10^k tick size that satisfies the pixel
-   * floor and (optionally) targets `labelCountHint` labels.
+   * floor and (optionally) targets `labelCountHint` labels. `gapFloorValue` is
+   * the smallest interval that clears `minLabelSpacing` anywhere on the axis.
    *
    * Hysteresis: the band [0.8×, 1.25×] is anchored to **rawInterval at last
    * snap**, not to `lastInterval`. After an escalation (e.g. 100 → 200),
@@ -129,26 +245,26 @@ class M {
    * *not* de-escalate. This prevents the 2-tier flicker users see when new
    * candles nudge the Y range across a raw-interval threshold.
    */
-  resolveInterval() {
+  resolveInterval(t) {
     if (this.max <= this.min || this.height <= 0) {
       this.resolvedInterval = null;
       return;
     }
-    const t = this.max - this.min, i = t * this.minLabelSpacing / this.height, a = this.labelCountHint != null ? Math.max(1, this.labelCountHint) : Math.max(1, Math.floor(this.height / this.minLabelSpacing));
-    let s = t / a;
-    if (s < i && (s = i), this.lastInterval != null && this.lastRawInterval != null) {
-      const l = s >= this.lastRawInterval * 0.8 && s <= this.lastRawInterval * 1.25, h = this.lastInterval >= i;
+    const i = this.max - this.min, s = this.labelCountHint != null ? Math.max(1, this.labelCountHint) : Math.max(1, Math.floor(this.height / this.minLabelSpacing));
+    let n = i / s;
+    if (n < t && (n = t), this.lastInterval != null && this.lastRawInterval != null) {
+      const l = n >= this.lastRawInterval * 0.8 && n <= this.lastRawInterval * 1.25, h = this.lastInterval >= t;
       if (l && h) {
         this.resolvedInterval = this.lastInterval;
         return;
       }
     }
-    let n = m(s);
-    if (this.labelCountHint != null && this.countTicks(n) < this.labelCountHint) {
-      const l = c(s);
-      l >= i && l > 0 && (n = l);
+    let r = c(n);
+    if (this.labelCountHint != null && this.countTicks(r) < this.labelCountHint) {
+      const l = f(n);
+      l >= t && l > 0 && (r = l);
     }
-    this.resolvedInterval = n, this.lastInterval = n, this.lastRawInterval = s;
+    this.resolvedInterval = r, this.lastInterval = r, this.lastRawInterval = n;
   }
   countTicks(t) {
     if (!(t > 0)) return 0;
@@ -156,12 +272,13 @@ class M {
     return Math.max(0, Math.floor((this.max - i) / t) + 1);
   }
 }
-function f(e) {
+function p(e) {
   return typeof e == "number" && Number.isFinite(e) && e >= 2 ? Math.floor(e) : null;
 }
-function g(e) {
+function x(e) {
   return typeof e == "number" && Number.isFinite(e) && e > 0 ? e : null;
 }
 export {
-  M as YScale
+  d as YScale,
+  g as isPlottableOn
 };

package/dist/core/dist/series/bar-intro.js

@@ -1,18 +1,18 @@
-import { easeOutBack as a } from "../animation/easing.js";
-function t() {
-  return () => ({
-    value: ({ value: e, progress: r }) => e * r,
+import { easeOutBack as s } from "../animation/easing.js";
+function n() {
+  return (r) => ({
+    value: ({ value: e, progress: a }) => r.lerpValue(r.baseline, e, a),
     element: (e) => ({ alpha: e.progress })
   });
 }
-const o = 0.3;
-function n() {
-  return () => ({
-    value: ({ value: e, progress: r }) => e * a(r),
-    element: (e) => ({ alpha: Math.min(1, e.progress / o) })
+const l = 0.3;
+function t() {
+  return (r) => ({
+    value: ({ value: e, progress: a }) => r.lerpValue(r.baseline, e, s(a)),
+    element: (e) => ({ alpha: Math.min(1, e.progress / l) })
   });
 }
 export {
-  t as growIntro,
-  n as springIntro
+  n as growIntro,
+  t as springIntro
 };