@wick-charts/vue 0.6.1 → 0.6.2

package/dist/core/dist/utils/pixel-grid.js

@@ -0,0 +1,10 @@
+function r(n) {
+  return Math.max(1, Math.round(n));
+}
+function t(n) {
+  return r(n) % 2 === 1 ? 0.5 : 0;
+}
+export {
+  t as crispCenterOffset,
+  r as crispLineWidth
+};

package/dist/index.d.ts

@@ -760,6 +760,15 @@ export declare interface AnimationsConfig {
          * @default {@link DEFAULT_TICKS_MS}
          */
         ticks?: AnimationTime;
+        /**
+         * Gridline layer opacity: the opening reveal on first paint and the
+         * fade out when `grid.visible` flips off. Independent of
+         * {@link ticks}, which owns the per-tick cross-fade on relabel.
+         * `false` makes the grid appear and disappear instantly.
+         *
+         * @default {@link DEFAULT_GRID_MS}
+         */
+        grid?: AnimationTime;
     };
     /**
      * Series-visibility toggle duration. Drives BOTH the renderer's alpha
@@ -5099,7 +5108,17 @@ export declare class XScale {
     formatX(timestamp: number, interval: number): string;
     private resetHysteresis;
     timeToX(time: number): number;
+    /** X in physical (bitmap) pixels, snapped to the pixel grid — for
+     *  axis-aligned edges that have to stay crisp. */
     timeToBitmapX(time: number): number;
+    /** Same in physical pixels, off the grid — see {@link YScale.valueToBitmapYExact}. */
+    timeToBitmapXExact(time: number): number;
+    /**
+     * 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(time: number): number;
     xToTime(x: number): number;
     pixelDeltaToTimeDelta(pixelDelta: number): number;
     barWidthMedia(dataInterval: number): number;
@@ -5221,8 +5240,21 @@ export declare class YScale {
     setTickGenerator(fn: ValueTickGenerator | null): void;
     /** Convert a value to a Y position in CSS (media) pixels. */
     valueToY(value: number): number;
-    /** 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(value: number): number;
+    /**
+     * 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(value: number): number;
+    /**
+     * 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(value: number): number;
     /** Convert a Y position in CSS pixels back to a value. */
     yToValue(y: number): number;
     /**

package/dist/ui/YLabel.vue.js

@@ -1,8 +1,9 @@
 import { defineComponent as q, useSlots as j, computed as n, ref as I, onMounted as G, onUnmounted as P, openBlock as w, createElementBlock as B, Fragment as A, renderSlot as W, createElementVNode as _, normalizeStyle as T, unref as H, createVNode as J, createCommentVNode as K } from "vue";
-import { resolveAnimate as Q, prefersReducedMotion as X, firstVisibleValue as Z, BadgeAnimator as ee } from "../core/dist/chart/badge-animator.js";
+import { prefersReducedMotion as Q } from "../core/dist/animation/reduced-motion.js";
+import { resolveAnimate as X, firstVisibleValue as Z, BadgeAnimator as ee } from "../core/dist/chart/badge-animator.js";
 import { useChartInstance as te } from "../context.js";
 import ne from "./NumberFlow.vue.js";
-const re = /* @__PURE__ */ q({
+const ie = /* @__PURE__ */ q({
   __name: "YLabel",
   props: {
     seriesId: {},
@@ -12,18 +13,18 @@ const re = /* @__PURE__ */ q({
   },
   setup(z) {
     const f = z, e = te(), Y = j(), E = n(() => typeof Y.default == "function"), i = I(0), u = I(null);
-    let m = null, g = null, o = null;
-    const M = n(() => Q(f.animate));
-    function S() {
+    let p = null, g = null, o = null;
+    const M = n(() => X(f.animate));
+    function L() {
       o = null;
       const t = s.value, l = t !== null ? e.getStackedLastValue(t) : null;
       if (t === null || !l) {
-        m = null, g = null;
+        p = null, g = null;
         return;
       }
       const v = l.value;
-      (m === null || g !== t) && (m = new ee(v), g = t);
-      const { glide: d, countUp: U, settleMs: $ } = M.value, F = e.getIntroFront(t), c = m.frame({
+      (p === null || g !== t) && (p = new ee(v), g = t);
+      const { glide: d, countUp: U, settleMs: $ } = M.value, F = e.getIntroFront(t), c = p.frame({
         target: v,
         // Only needed for the intro count-up; skip the visible-range binary search
         // entirely once the reveal has settled (the hot streaming path).
@@ -33,20 +34,20 @@ const re = /* @__PURE__ */ q({
         glide: d,
         countUp: U,
         settleMs: $,
-        reducedMotion: X()
+        reducedMotion: Q()
       }), y = u.value;
-      (y === null || y.positionValue !== c.positionValue || y.textValue !== c.textValue || y.opacity !== c.opacity) && (u.value = { positionValue: c.positionValue, textValue: c.textValue, opacity: c.opacity }), c.animating && o === null && (o = requestAnimationFrame(S));
+      (y === null || y.positionValue !== c.positionValue || y.textValue !== c.textValue || y.opacity !== c.opacity) && (u.value = { positionValue: c.positionValue, textValue: c.textValue, opacity: c.opacity }), c.animating && o === null && (o = requestAnimationFrame(L));
     }
     function N() {
-      o === null && (o = requestAnimationFrame(S));
+      o === null && (o = requestAnimationFrame(L));
     }
-    const p = () => {
+    const m = () => {
       i.value++, N();
     };
     G(() => {
-      e.setYLabel(!0), e.on("overlayChange", p), e.on("viewportChange", p), e.getSeriesIds().length > 0 && p();
+      e.setYLabel(!0), e.on("overlayChange", m), e.on("viewportChange", m), e.getSeriesIds().length > 0 && m();
     }), P(() => {
-      e.setYLabel(!1), e.off("overlayChange", p), e.off("viewportChange", p), o !== null && cancelAnimationFrame(o), o = null;
+      e.setYLabel(!1), e.off("overlayChange", m), e.off("viewportChange", m), o !== null && cancelAnimationFrame(o), o = null;
     });
     function O(t, l) {
       if (l !== void 0) return l;
@@ -55,11 +56,11 @@ const re = /* @__PURE__ */ q({
       const d = t.getSeriesIdsByType("time", { visibleOnly: !0 });
       return d.length > 0 ? d[0] : null;
     }
-    const s = n(() => (i.value, O(e, f.seriesId))), a = n(() => (i.value, s.value !== null ? e.getStackedLastValue(s.value) : null)), b = n(() => (i.value, s.value !== null ? e.getPreviousClose(s.value) : null)), r = n(() => (i.value, e.getTheme())), R = n(() => u.value !== null ? u.value.positionValue : a.value?.value ?? 0), D = n(() => u.value !== null ? u.value.textValue : a.value?.value ?? 0), h = n(() => u.value !== null ? u.value.opacity : s.value === null ? 1 : e.getIntroFront(s.value) < 1 ? 0 : 1), x = n(() => (i.value, a.value === null ? 0 : e.yScale.valueToY(R.value))), L = n(() => a.value === null || b.value === null ? "neutral" : a.value.value > b.value ? "up" : a.value.value < b.value ? "down" : "neutral"), V = n(() => {
+    const s = n(() => (i.value, O(e, f.seriesId))), a = n(() => (i.value, s.value !== null ? e.getStackedLastValue(s.value) : null)), b = n(() => (i.value, s.value !== null ? e.getPreviousClose(s.value) : null)), r = n(() => (i.value, e.getTheme())), R = n(() => u.value !== null ? u.value.positionValue : a.value?.value ?? 0), D = n(() => u.value !== null ? u.value.textValue : a.value?.value ?? 0), h = n(() => u.value !== null ? u.value.opacity : s.value === null ? 1 : e.getIntroFront(s.value) < 1 ? 0 : 1), x = n(() => (i.value, a.value === null ? 0 : e.yScale.valueToY(R.value))), S = n(() => a.value === null || b.value === null ? "neutral" : a.value.value > b.value ? "up" : a.value.value < b.value ? "down" : "neutral"), V = n(() => {
       if (a.value === null) return r.value.yLabel.neutralBackground;
       if (!a.value.isLive) return r.value.axis.textColor;
       if (f.color) return f.color;
-      switch (L.value) {
+      switch (S.value) {
         case "up":
           return r.value.yLabel.upBackground;
         case "down":
@@ -87,7 +88,7 @@ const re = /* @__PURE__ */ q({
         y: x.value,
         bgColor: V.value,
         isLive: a.value.isLive,
-        direction: L.value,
+        direction: S.value,
         format: C.value,
         opacity: h.value
       }) : (w(), B(A, { key: 1 }, [
@@ -134,5 +135,5 @@ const re = /* @__PURE__ */ q({
   }
 });
 export {
-  re as default
+  ie as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wick-charts/vue",
-  "version": "0.6.1",
+  "version": "0.6.2",
   "description": "High-performance canvas timeseries charts for Vue — candlestick, line, bar, pie. Tree-shakeable, zero runtime deps.",
   "license": "MIT",
   "repository": {
@@ -45,7 +45,7 @@
     "vue": ">=3.3.0"
   },
   "devDependencies": {
-    "@wick-charts/core": "^0.6.1"
+    "@wick-charts/core": "^0.6.2"
   },
   "scripts": {
     "build": "vite build"