@wick-charts/vue 0.6.4 → 0.7.0

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

@@ -1,14 +1,20 @@
-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 {
+import { clamp as d } from "../utils/math.js";
+import { crispCenterOffset as v } from "../utils/pixel-grid.js";
+import { formatTime as g, niceTimeIntervals as p } from "../utils/time.js";
+import { AxisTickTracker as I } from "./tick-tracker.js";
+import { pickNiceCeiling as b, pickNiceFloor as k } from "./y-scale.js";
+const o = 50, y = 80, h = 0.3, u = 0.2;
+class W {
   /**
    * 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 v();
+  tickTracker = new I();
+  type = "time";
+  /** Category names in band order — category `i` is centred on coordinate `i`. */
+  categories = [];
+  bandPadding = { inner: h, outer: u };
   from = 0;
   to = 0;
   width = 1;
@@ -17,7 +23,7 @@ class b {
   // Label density knobs — written by <TimeAxis labelCount=… minLabelSpacing=…>.
   labelCountHintValue = null;
   minSpacingValue = null;
-  /** Custom formatter (driven by `setFormat` / a future `<TimeAxis format=…>`). */
+  /** Custom formatter, installed by `<XAxis format=…>`. */
   customFormat = null;
   /** Custom tick generator — bypasses tier resolution in `niceTickValues` when set. */
   customTickGenerator = null;
@@ -38,22 +44,21 @@ class b {
     return this.labelCountHintValue;
   }
   get minLabelSpacing() {
-    return this.minSpacingValue ?? d;
+    return this.minSpacingValue ?? y;
   }
-  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;
+  update(t, i, s, e) {
+    if (this.from = t.from, this.to = t.to, this.width = i, this.pixelRatio = s, this.type === "time" && e !== void 0 && e > 0) {
+      const r = c(e);
+      this.lastBucketKey !== null && this.lastBucketKey !== r && this.resetHysteresis(), this.lastBucketKey = r, this.dataInterval = e;
     }
     this.resolveInterval();
   }
   setLabelCount(t) {
-    this.labelCountHintValue = p(t), this.resetHysteresis(), this.resolveInterval();
+    this.labelCountHintValue = M(t), this.resetHysteresis(), this.resolveInterval();
   }
   setMinSpacing(t) {
-    this.minSpacingValue = I(t), this.resetHysteresis(), this.resolveInterval();
+    this.minSpacingValue = x(t), this.resetHysteresis(), this.resolveInterval();
   }
-  /** Install (or clear) a custom tick-label formatter. */
   setFormat(t) {
     this.customFormat = t;
   }
@@ -61,6 +66,60 @@ class b {
   getFormat() {
     return this.customFormat;
   }
+  /** What the axis maps. Set once by the chart at construction. */
+  setType(t) {
+    this.type = t, this.resetHysteresis(), this.resolveInterval();
+  }
+  getType() {
+    return this.type;
+  }
+  /** Category names in band order (category axis). */
+  setCategories(t) {
+    this.categories = t;
+  }
+  getCategories() {
+    return this.categories;
+  }
+  /** Band spacing on a category axis; an omitted or invalid side takes its default. */
+  setBandPadding(t) {
+    this.bandPadding = {
+      inner: m({ value: t?.inner, fallback: h, max: 1 }),
+      outer: m({ value: t?.outer, fallback: u, max: 1 / 0 })
+    };
+  }
+  getBandPadding() {
+    return this.bandPadding;
+  }
+  /**
+   * The coordinate range that fits every band with its outer padding, or
+   * `null` without categories. Band `i` spans `i ± (1 - inner) / 2`.
+   */
+  bandRange() {
+    const t = this.categories.length;
+    if (t === 0) return null;
+    const i = (1 - this.bandPadding.inner) / 2, s = this.bandPadding.outer;
+    return { from: -i - s, to: t - 1 + i + s };
+  }
+  /** Width of one category band in physical pixels — what a bar on a category axis fills. */
+  bandWidthBitmap() {
+    return Math.max(1, Math.round(this.barWidthMedia(1 - this.bandPadding.inner) * this.pixelRatio));
+  }
+  /**
+   * The internal coordinate the pointer resolves to: the nearest band's index
+   * on a category axis, `coord` itself elsewhere.
+   */
+  snapToBand(t) {
+    const i = this.categories.length;
+    return this.type !== "category" || i === 0 ? t : d(Math.round(t), 0, i - 1);
+  }
+  /**
+   * An internal coordinate in the axis domain: the category name at that
+   * band on a category axis (`''` without categories), the number itself on
+   * time and numeric axes.
+   */
+  domainValue(t) {
+    return this.type !== "category" ? t : this.categories[this.snapToBand(t)] ?? "";
+  }
   /**
    * Install (or clear) a custom tick-value generator. When set, it replaces
    * `niceTimeIntervals` tier resolution entirely — `niceTickValues` calls it
@@ -84,12 +143,23 @@ class b {
     return this.timeZoneValue;
   }
   /**
-   * Format a tick timestamp for display. A custom formatter (via
-   * {@link setFormat}) wins; otherwise falls back to the built-in
-   * `formatTime`, applying the installed locale/timezone.
+   * Format an internal X coordinate for display — a tick, the crosshair, a
+   * tooltip header. A custom formatter (via {@link setFormat}) gets the
+   * domain value; otherwise a time axis formats the timestamp with the
+   * installed locale/timezone, a numeric axis prints a locale number, and a
+   * category axis prints the name.
    */
-  formatX(t, e) {
-    return this.customFormat ? this.customFormat(t, e) : c(t, e, { locale: this.localeValue, timeZone: this.timeZoneValue });
+  formatX(t, i) {
+    const s = this.domainValue(t);
+    return this.customFormat ? this.customFormat(s, i) : this.type === "category" ? String(s) : this.type === "numeric" ? T({ value: t, step: i, locale: this.localeValue }) : g(t, i, { locale: this.localeValue, timeZone: this.timeZoneValue });
+  }
+  /**
+   * Format a data point's X for a tooltip or info-bar header. Like
+   * {@link formatX}, except a numeric axis prints the value with its own
+   * decimals — `1.25` stays `1.25` where the step would round it.
+   */
+  formatPointX(t, i) {
+    return this.type !== "numeric" || this.customFormat ? this.formatX(t, i) : t.toLocaleString(this.localeValue ?? "en-US", { maximumFractionDigits: 20 });
   }
   resetHysteresis() {
     this.lastInterval = null, this.lastWant = null;
@@ -112,7 +182,7 @@ class b {
    * so text and gridline share one pixel grid.
    */
   timeToSnappedX(t) {
-    return (this.timeToBitmapX(t) + m(this.pixelRatio)) / this.pixelRatio;
+    return (this.timeToBitmapX(t) + v(this.pixelRatio)) / this.pixelRatio;
   }
   xToTime(t) {
     return this.to <= this.from ? this.from : this.from + t / this.width * (this.to - this.from);
@@ -134,17 +204,25 @@ class b {
   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), r = i.length >= 2 ? i[1] - i[0] : t;
-      return { ticks: i, tickInterval: r };
+      const a = this.customTickGenerator({ from: this.from, to: this.to }, t).slice(0, o), l = a.length >= 2 ? a[1] - a[0] : t;
+      return { ticks: a, tickInterval: l };
     }
-    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.type === "category") return this.bandTicks();
+    if (this.type === "time" && this.dataInterval !== t) {
+      const a = c(t);
+      this.lastBucketKey !== null && this.lastBucketKey !== a && this.resetHysteresis(), this.lastBucketKey = a, this.dataInterval = t, this.resolveInterval();
     }
     if (this.resolvedInterval == null) return { ticks: [], tickInterval: 0 };
-    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 };
+    const i = this.resolvedInterval, s = Math.ceil(this.from / i) * i, e = Math.max(0, Math.min(o, Math.floor((this.to - s) / i) + 1)), r = [];
+    for (let a = 0; a < e; a++) r.push(s + a * i);
+    return { ticks: r, tickInterval: i };
+  }
+  /** One tick per category whose band centre is in view. */
+  bandTicks() {
+    const t = Math.max(0, Math.ceil(this.from)), i = Math.min(this.categories.length - 1, Math.floor(this.to)), s = [];
+    for (let e = t; e <= i; e++)
+      s.push(e);
+    return { ticks: s, tickInterval: 1 };
   }
   getRange() {
     return { from: this.from, to: this.to };
@@ -158,51 +236,87 @@ class b {
    * tier inside a ratio band so micro pan/zoom doesn't flip label density.
    */
   resolveInterval() {
+    if (this.type === "numeric") {
+      this.resolveNumericInterval();
+      return;
+    }
     if (this.to <= this.from || this.width <= 0 || this.dataInterval == null || this.dataInterval <= 0) {
       this.resolvedInterval = null;
       return;
     }
-    const t = f(this.dataInterval), e = this.to - this.from, n = e / this.width * this.minLabelSpacing;
-    let l;
+    const t = p(this.dataInterval), i = this.to - this.from, s = i / this.width * this.minLabelSpacing;
+    let e;
     if (this.labelCountHint != null) {
-      const r = Math.max(1, this.labelCountHint);
-      l = Math.max(e / r, n);
+      const l = Math.max(1, this.labelCountHint);
+      e = Math.max(i / l, s);
     } else
-      l = n;
+      e = s;
     if (this.lastInterval != null && this.lastWant != null && t.includes(this.lastInterval)) {
-      const r = l >= this.lastWant * 0.8 && l <= this.lastWant * 1.25, u = this.lastInterval >= n;
-      if (r && u) {
+      const l = e >= this.lastWant * 0.8 && e <= this.lastWant * 1.25, f = this.lastInterval >= s;
+      if (l && f) {
         this.resolvedInterval = this.lastInterval;
         return;
       }
     }
-    let a = t[t.length - 1], i = t.length - 1;
-    for (let r = 0; r < t.length; r++)
-      if (t[r] >= l) {
-        a = t[r], i = r;
+    let r = t[t.length - 1], a = t.length - 1;
+    for (let l = 0; l < t.length; l++)
+      if (t[l] >= e) {
+        r = t[l], a = l;
         break;
       }
-    if (this.labelCountHint != null && i > 0 && this.countTicks(a) < this.labelCountHint) {
-      const r = t[i - 1];
-      r >= n && (a = r);
+    if (this.labelCountHint != null && a > 0 && this.countTicks(r) < this.labelCountHint) {
+      const l = t[a - 1];
+      l >= s && (r = l);
     }
-    this.resolvedInterval = a, this.lastInterval = a, this.lastWant = l;
+    this.resolvedInterval = r, this.lastInterval = r, this.lastWant = e;
+  }
+  /**
+   * Numeric counterpart of the time-tier walk: the {1,2,5}×10^k step that
+   * clears `minLabelSpacing` and targets `labelCount`, with the same hysteresis band.
+   */
+  resolveNumericInterval() {
+    if (this.to <= this.from || this.width <= 0) {
+      this.resolvedInterval = null;
+      return;
+    }
+    const t = this.to - this.from, i = t / this.width * this.minLabelSpacing, s = this.labelCountHint != null ? t / Math.max(1, this.labelCountHint) : 0, e = Math.max(s, i);
+    if (this.lastInterval != null && this.lastWant != null) {
+      const a = e >= this.lastWant * 0.8 && e <= this.lastWant * 1.25, l = this.lastInterval >= i;
+      if (a && l) {
+        this.resolvedInterval = this.lastInterval;
+        return;
+      }
+    }
+    let r = b(e);
+    if (this.labelCountHint != null && this.countTicks(r) < this.labelCountHint) {
+      const a = k(e);
+      a >= i && (r = a);
+    }
+    this.resolvedInterval = r, this.lastInterval = r, this.lastWant = e;
   }
   countTicks(t) {
     if (!(t > 0)) return 0;
-    const e = Math.ceil(this.from / t) * t;
-    return Math.max(0, Math.floor((this.to - e) / t) + 1);
+    const i = Math.ceil(this.from / t) * t;
+    return Math.max(0, Math.floor((this.to - i) / t) + 1);
   }
 }
-function h(s) {
-  return s < 6e4 ? 0 : s < 36e5 ? 1 : s < 864e5 ? 2 : 3;
+function c(n) {
+  return n < 6e4 ? 0 : n < 36e5 ? 1 : n < 864e5 ? 2 : 3;
+}
+function T(n) {
+  const { value: t, step: i, locale: s } = n, e = Number.isFinite(i) && i > 0 ? -Math.floor(Math.log10(i)) : 2, r = d(e, 0, 20);
+  return t.toLocaleString(s ?? "en-US", { maximumFractionDigits: r });
+}
+function m(n) {
+  const { value: t, fallback: i, max: s } = n;
+  return t === void 0 || !Number.isFinite(t) || t < 0 ? i : Math.min(t, s);
 }
-function p(s) {
-  return typeof s == "number" && Number.isFinite(s) && s >= 2 ? Math.floor(s) : null;
+function M(n) {
+  return typeof n == "number" && Number.isFinite(n) && n >= 2 ? Math.floor(n) : null;
 }
-function I(s) {
-  return typeof s == "number" && Number.isFinite(s) && s > 0 ? s : null;
+function x(n) {
+  return typeof n == "number" && Number.isFinite(n) && n > 0 ? n : null;
 }
 export {
-  b as XScale
+  W as XScale
 };

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

@@ -1,19 +1,19 @@
 import { formatCompact as o } from "../utils/format.js";
 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;
+function c(n) {
+  if (!Number.isFinite(n) || n <= 0) return 1;
+  const t = 10 ** Math.floor(Math.log10(n)), i = n / t;
   return (i <= 1 ? 1 : i <= 2 ? 2 : i <= 5 ? 5 : 10) * t;
 }
-function f(e) {
-  if (!Number.isFinite(e) || e <= 0) return 1;
-  const t = 10 ** Math.floor(Math.log10(e)), i = e / t;
+function f(n) {
+  if (!Number.isFinite(n) || n <= 0) return 1;
+  const t = 10 ** Math.floor(Math.log10(n)), i = n / t;
   return (i >= 5 ? 5 : i >= 2 ? 2 : 1) * t;
 }
 const a = 50, v = 50;
-function g(e, t) {
-  return Number.isFinite(t) ? e?.isPlottable?.(t) ?? !0 : !1;
+function p(n, t) {
+  return Number.isFinite(t) ? n?.isPlottable?.(t) ?? !0 : !1;
 }
 class d {
   /** Shared fade state for Y ticks; see {@link TimeScale.tickTracker}. */
@@ -72,11 +72,11 @@ class d {
    * downstream sees NaN.
    */
   isPlottable(t) {
-    return g(this.transform, t);
+    return p(this.transform, t);
   }
   /** Desired label count. Invalid values (NaN, <2, Infinity) clear the hint. */
   setLabelCount(t) {
-    this.labelCountHintValue = p(t), this.resetHysteresis(), this.resolveTicks();
+    this.labelCountHintValue = g(t), this.resetHysteresis(), this.resolveTicks();
   }
   /** Minimum pixel gap between adjacent labels. */
   setMinSpacing(t) {
@@ -159,11 +159,11 @@ class d {
    * 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;
+    const e = this.transform;
+    if (e === 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);
+    const r = e.forward(t);
+    return e.inverse(r + (e.forward(i) - r) * s);
   }
   /**
    * Generate evenly spaced "nice" tick values for the current range and
@@ -175,9 +175,9 @@ class d {
   /** {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, 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));
+    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)), e = [];
+    for (let r = 0; r < s; r++) e.push(i + r * t);
+    return this.transform === null ? e : e.filter((r) => this.isPlottable(r));
   }
   getRange() {
     return { min: this.min, max: this.max };
@@ -197,8 +197,8 @@ class d {
     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 s = this.resolvedInterval, n = s != null && s > 0 ? Math.max(0, -Math.floor(Math.log10(s))) : 1;
-    return t.toFixed(n);
+    const s = this.resolvedInterval, e = s != null && s > 0 ? Math.max(0, -Math.floor(Math.log10(s))) : 1;
+    return t.toFixed(e);
   }
   resolveTicks() {
     this.ownTicks = null;
@@ -213,7 +213,7 @@ class d {
       return;
     }
     if (this.resolveInterval(this.transformedGapFloor(t, i)), !t.ticks) return;
-    const s = this.linearTickValues(), n = t.ticks({
+    const s = this.linearTickValues(), e = t.ticks({
       min: this.min,
       max: this.max,
       height: this.height,
@@ -221,7 +221,7 @@ class d {
       labelCount: this.labelCountHint,
       linear: s
     });
-    this.ownTicks = n === s ? null : n;
+    this.ownTicks = e === s ? null : e;
   }
   /**
    * Smallest linear interval whose ticks stay `minLabelSpacing` apart on the
@@ -230,8 +230,8 @@ class d {
    * 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);
+    const s = this.minLabelSpacing / this.height * i, e = 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(e, r);
   }
   /**
    * Resolve the interval to a {1,2,5}×10^k tick size that satisfies the pixel
@@ -251,20 +251,20 @@ class d {
       return;
     }
     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;
+    let e = i / s;
+    if (e < t && (e = t), this.lastInterval != null && this.lastRawInterval != null) {
+      const l = e >= this.lastRawInterval * 0.8 && e <= this.lastRawInterval * 1.25, h = this.lastInterval >= t;
       if (l && h) {
         this.resolvedInterval = this.lastInterval;
         return;
       }
     }
-    let r = c(n);
+    let r = c(e);
     if (this.labelCountHint != null && this.countTicks(r) < this.labelCountHint) {
-      const l = f(n);
+      const l = f(e);
       l >= t && l > 0 && (r = l);
     }
-    this.resolvedInterval = r, this.lastInterval = r, this.lastRawInterval = n;
+    this.resolvedInterval = r, this.lastInterval = r, this.lastRawInterval = e;
   }
   countTicks(t) {
     if (!(t > 0)) return 0;
@@ -272,13 +272,15 @@ class d {
     return Math.max(0, Math.floor((this.max - i) / t) + 1);
   }
 }
-function p(e) {
-  return typeof e == "number" && Number.isFinite(e) && e >= 2 ? Math.floor(e) : null;
+function g(n) {
+  return typeof n == "number" && Number.isFinite(n) && n >= 2 ? Math.floor(n) : null;
 }
-function x(e) {
-  return typeof e == "number" && Number.isFinite(e) && e > 0 ? e : null;
+function x(n) {
+  return typeof n == "number" && Number.isFinite(n) && n > 0 ? n : null;
 }
 export {
   d as YScale,
-  g as isPlottableOn
+  p as isPlottableOn,
+  c as pickNiceCeiling,
+  f as pickNiceFloor
 };