@wick-charts/vue 0.6.1 → 0.6.3

package/dist/ui/YAxis.vue.js

@@ -1,42 +1,43 @@
-import { defineComponent as m, ref as p, onMounted as r, watch as s, onUnmounted as o, openBlock as b, createElementBlock as f, normalizeStyle as y, unref as u } from "vue";
-import { mountAxisLabels as x } from "../core/dist/axis/dom-labels.js";
-import { useChartInstance as h } from "../context.js";
-const _ = /* @__PURE__ */ m({
+import { defineComponent as p, ref as f, onMounted as u, watch as c, onUnmounted as a, openBlock as y, createElementBlock as b, normalizeStyle as x, unref as i } from "vue";
+import { mountAxisLabels as L } from "../core/dist/axis/dom-labels.js";
+import { useAxisLayout as A } from "../composables.js";
+import { useChartInstance as S } from "../context.js";
+const F = /* @__PURE__ */ p({
   __name: "YAxis",
   props: {
     format: { type: Function },
     labelCount: {},
     minLabelSpacing: {}
   },
-  setup(c) {
-    const e = c, n = h(), t = p(null), a = () => n.yScale.setFormat(e.format ?? null);
-    r(a), s(() => e.format, a), o(() => n.yScale.setFormat(null));
-    const i = () => {
-      n.setYAxisLabelDensity({
-        labelCount: e.labelCount ?? null,
-        minLabelSpacing: e.minLabelSpacing ?? null
+  setup(m) {
+    const n = m, t = S(), e = A(t), l = f(null), s = () => t.yScale.setFormat(n.format ?? null);
+    u(s), c(() => n.format, s), a(() => t.yScale.setFormat(null));
+    const r = () => {
+      t.setYAxisLabelDensity({
+        labelCount: n.labelCount ?? null,
+        minLabelSpacing: n.minLabelSpacing ?? null
       });
     };
-    i(), s(() => [e.labelCount, e.minLabelSpacing], i), o(() => n.setYAxisLabelDensity({ labelCount: null, minLabelSpacing: null }));
-    let l = null;
-    return r(() => {
-      t.value !== null && (l = x({ chart: n, container: t.value, axis: "y" }));
-    }), o(() => {
-      l?.(), l = null;
-    }), (L, S) => (b(), f("div", {
+    r(), c(() => [n.labelCount, n.minLabelSpacing], r), a(() => t.setYAxisLabelDensity({ labelCount: null, minLabelSpacing: null }));
+    let o = null;
+    return u(() => {
+      l.value !== null && (o = L({ chart: t, container: l.value, axis: "y" }));
+    }), a(() => {
+      o?.(), o = null;
+    }), (d, h) => (y(), b("div", {
       ref_key: "containerRef",
-      ref: t,
-      style: y({
+      ref: l,
+      style: x({
         position: "absolute",
-        right: "0",
+        [i(e).yAxisPosition]: "0",
         top: "0",
-        bottom: u(n).xAxisHeight + "px",
-        width: u(n).yAxisWidth + "px",
+        bottom: i(e).xAxisHeight + "px",
+        width: i(e).yAxisWidth + "px",
         pointerEvents: "none"
       })
     }, null, 4));
   }
 });
 export {
-  _ as default
+  F as default
 };

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 { defineComponent as q, useSlots as j, computed as n, ref as w, onMounted as G, onUnmounted as W, openBlock as A, createElementBlock as B, Fragment as _, renderSlot as H, createElementVNode as T, normalizeStyle as z, unref as g, createVNode as J, createCommentVNode as K } from "vue";
+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: {},
@@ -10,56 +11,56 @@ const re = /* @__PURE__ */ q({
     format: { type: Function },
     animate: { type: [Boolean, Object] }
   },
-  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));
+  setup(Y) {
+    const f = Y, e = te(), E = j(), M = n(() => typeof E.default == "function"), i = w(0), o = w(null);
+    let m = null, x = null, u = null;
+    const N = n(() => X(f.animate));
     function S() {
-      o = null;
+      u = null;
       const t = s.value, l = t !== null ? e.getStackedLastValue(t) : null;
       if (t === null || !l) {
-        m = null, g = null;
+        m = null, x = 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({
+      (m === null || x !== t) && (m = new ee(v), x = t);
+      const { glide: d, countUp: U, settleMs: $ } = N.value, I = e.getIntroFront(t), c = m.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).
-        firstVisible: F < 1 ? Z(e, t, v) : v,
-        introFront: F,
+        firstVisible: I < 1 ? Z(e, t, v) : v,
+        introFront: I,
         now: performance.now(),
         glide: d,
         countUp: U,
         settleMs: $,
-        reducedMotion: X()
-      }), 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));
+        reducedMotion: Q()
+      }), y = o.value;
+      (y === null || y.positionValue !== c.positionValue || y.textValue !== c.textValue || y.opacity !== c.opacity) && (o.value = { positionValue: c.positionValue, textValue: c.textValue, opacity: c.opacity }), c.animating && u === null && (u = requestAnimationFrame(S));
     }
-    function N() {
-      o === null && (o = requestAnimationFrame(S));
+    function O() {
+      u === null && (u = requestAnimationFrame(S));
     }
     const p = () => {
-      i.value++, N();
+      i.value++, O();
     };
     G(() => {
       e.setYLabel(!0), e.on("overlayChange", p), e.on("viewportChange", p), e.getSeriesIds().length > 0 && p();
-    }), P(() => {
-      e.setYLabel(!1), e.off("overlayChange", p), e.off("viewportChange", p), o !== null && cancelAnimationFrame(o), o = null;
+    }), W(() => {
+      e.setYLabel(!1), e.off("overlayChange", p), e.off("viewportChange", p), u !== null && cancelAnimationFrame(u), u = null;
     });
-    function O(t, l) {
+    function R(t, l) {
       if (l !== void 0) return l;
       const v = t.getSeriesIdsByType("time", { visibleOnly: !0, singleLayerOnly: !0 });
       if (v.length > 0) return v[0];
       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, R(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())), D = n(() => o.value !== null ? o.value.positionValue : a.value?.value ?? 0), P = n(() => o.value !== null ? o.value.textValue : a.value?.value ?? 0), h = n(() => o.value !== null ? o.value.opacity : s.value === null ? 1 : e.getIntroFront(s.value) < 1 ? 0 : 1), V = n(() => (i.value, a.value === null ? 0 : e.yScale.valueToY(D.value))), k = n(() => a.value === null || b.value === null ? "neutral" : a.value.value > b.value ? "up" : a.value.value < b.value ? "down" : "neutral"), L = 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 (k.value) {
         case "up":
           return r.value.yLabel.upBackground;
         case "down":
@@ -67,53 +68,53 @@ const re = /* @__PURE__ */ q({
         default:
           return r.value.yLabel.neutralBackground;
       }
-    }), k = n(() => {
+    }), C = n(() => {
       i.value;
       const t = e.yScale.getRange(), l = t.max - t.min;
       return l < 0.1 ? 6 : l < 10 ? 4 : l < 1e3 ? 2 : 0;
-    }), C = n(() => {
+    }), F = n(() => {
       if (f.format) return f.format;
       const t = new Intl.NumberFormat("en-US", {
-        minimumFractionDigits: k.value,
-        maximumFractionDigits: k.value,
+        minimumFractionDigits: C.value,
+        maximumFractionDigits: C.value,
         useGrouping: !1
       });
       return (l) => t.format(l);
     });
-    return (t, l) => a.value !== null ? (w(), B(A, { key: 0 }, [
-      E.value ? W(t.$slots, "default", {
+    return (t, l) => a.value !== null ? (A(), B(_, { key: 0 }, [
+      M.value ? H(t.$slots, "default", {
         key: 0,
         value: a.value.value,
-        y: x.value,
-        bgColor: V.value,
+        y: V.value,
+        bgColor: L.value,
         isLive: a.value.isLive,
-        direction: L.value,
-        format: C.value,
+        direction: k.value,
+        format: F.value,
         opacity: h.value
-      }) : (w(), B(A, { key: 1 }, [
-        _("div", {
-          style: T({
+      }) : (A(), B(_, { key: 1 }, [
+        T("div", {
+          style: z({
             position: "absolute",
-            left: "0",
-            right: H(e).yAxisWidth + "px",
-            top: x.value + "px",
+            left: g(e).plotLeft + "px",
+            right: (g(e).yAxisPosition === "left" ? 0 : g(e).yAxisWidth) + "px",
+            top: V.value + "px",
             height: "0",
-            borderTop: "1px dashed " + V.value,
+            borderTop: "1px dashed " + L.value,
             opacity: h.value * 0.5,
             pointerEvents: "none",
             zIndex: 2
           })
         }, null, 4),
-        _("div", {
-          style: T({
+        T("div", {
+          style: z({
             position: "absolute",
-            right: "4px",
-            top: x.value + "px",
+            [g(e).yAxisPosition]: "4px",
+            top: V.value + "px",
             transform: "translateY(-50%)",
             opacity: h.value,
             pointerEvents: "auto",
             zIndex: 3,
-            background: V.value,
+            background: L.value,
             color: r.value.yLabel.textColor,
             fontSize: r.value.yLabel.fontSize + "px",
             fontFamily: r.value.typography.fontFamily,
@@ -124,8 +125,8 @@ const re = /* @__PURE__ */ q({
           })
         }, [
           J(ne, {
-            value: D.value,
-            format: C.value,
+            value: P.value,
+            format: F.value,
             "spin-duration": 350
           }, null, 8, ["value", "format"])
         ], 4)
@@ -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.3",
   "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.3"
   },
   "scripts": {
     "build": "vite build"

package/src/ChartContainer.vue

@@ -81,7 +81,7 @@ const props = withDefaults(
      * change, use `viewport.initialRange` instead.
      */
     visibleRange?: VisibleRangeSpec;
-    /** Show the chart background gradient. Live. Defaults to true. */
+    /** Show the chart background gradient. Live. Defaults to false. */
     gradient?: boolean;
     /**
      * Enable zoom, pan, and crosshair interactions. Defaults to true.
@@ -96,16 +96,20 @@ const props = withDefaults(
      * Soft fade-out at the top of the plot area, so series content dissolves
      * under a floating `<Title>` / `<InfoBar>` instead of colliding with it.
      * The mask erases canvas alpha rather than painting a cover color, so it
-     * stays correct over the default background gradient. Live.
+     * stays correct over a background gradient. Live.
      *
      * Two directions, independently controlled:
      *
      * **X (under the axis)** — panning content slides under the Y-axis
      * column and dissolves instead of hard-clipping at the pane edge. **On
      * by default** as a 60px ramp that finishes just inside the axis
-     * column, before the label glyphs; `{ right }` overrides the total
-     * ramp width in CSS px (`0` disables). `{ left }` adds the mirror zone
-     * at the left pane edge (default off).
+     * column, before the label glyphs — on whichever side
+     * `axis.y.position` puts it (a left-axis ramp ends at the pane edge
+     * instead). The axis side's key (`{ right }` by default, `{ left }` for
+     * a left axis) overrides the total ramp width in CSS px (`0` disables);
+     * the other key adds a plain zone at the opposite pane edge (default
+     * off). A chart with only pie / heatmap series has no axis column, so
+     * both keys add plain zones there.
      *
      * **Top (under the header)** — opt-in. `true` enables the auto zone
      * (measured header + 24px run-out, half the header fold-in released so
@@ -185,7 +189,7 @@ const props = withDefaults(
   }>(),
   {
     theme: () => catppuccin.theme,
-    gradient: true,
+    gradient: false,
     // Vue's type-based `defineProps` casts an absent Boolean-typed prop to
     // `false` (not `undefined`) — without this explicit default, every chart
     // that didn't pass `:interactive="true"` silently got zero pan/zoom/
@@ -229,6 +233,13 @@ provide(NavigatorAnchorKey, navigatorAnchor);
 let resizeObserver: ResizeObserver | null = null;
 const topOverlayHeight = ref(0);
 
+// Watching `chart` hands a rebuilt instance the current height too.
+watch(
+  () => [chart.value, props.headerLayout === 'overlay' ? topOverlayHeight.value : 0] as const,
+  ([instance, height]) => instance?.setHeaderHeight(height),
+  { immediate: true },
+);
+
 /** Run-out below the measured header (CSS px) for the auto `fade` zone —
  *  content starts dissolving this far before it slides under the header. */
 const FADE_AUTO_BAND = 24;
@@ -310,8 +321,9 @@ function applyFade() {
     return;
   }
 
-  // Omitting `right` keeps the core's under-the-axis default armed; only an
-  // explicit value (or the all-off branch above) overrides it.
+  // Omitting a side keeps the core's auto default (the under-the-axis ramp
+  // on the Y-axis side); only an explicit value (or the all-off branch
+  // above) overrides it.
   const next: FadeConfig = { top: resolvedFadeTop.value };
   if (typeof props.fade === 'object') {
     if (props.fade.right !== undefined) next.right = props.fade.right;

package/src/composables.ts

@@ -1,4 +1,4 @@
-import type { ChartInstance, CrosshairPosition, VisibleRange, YRange } from '@wick-charts/core';
+import type { ChartInstance, CrosshairPosition, VisibleRange, YAxisPosition, YRange } from '@wick-charts/core';
 import { type Ref, onMounted, onUnmounted, ref } from 'vue';
 
 export function useVisibleRange(chart: ChartInstance): Ref<VisibleRange> {
@@ -21,6 +21,40 @@ export function useYRange(chart: ChartInstance): Ref<YRange> {
   return range;
 }
 
+export interface AxisLayout {
+  yAxisPosition: YAxisPosition;
+  yAxisWidth: number;
+  xAxisHeight: number;
+}
+
+function readAxisLayout(chart: ChartInstance): AxisLayout {
+  return { yAxisPosition: chart.yAxisPosition, yAxisWidth: chart.yAxisWidth, xAxisHeight: chart.xAxisHeight };
+}
+
+/** The axis gutters overlays anchor to — refreshed on a Y-axis side or gutter size change. */
+export function useAxisLayout(chart: ChartInstance): Ref<AxisLayout> {
+  const layout = ref<AxisLayout>(readAxisLayout(chart)) as Ref<AxisLayout>;
+  const handler = () => {
+    const next = readAxisLayout(chart);
+    const prev = layout.value;
+    const unchanged =
+      prev.yAxisPosition === next.yAxisPosition &&
+      prev.yAxisWidth === next.yAxisWidth &&
+      prev.xAxisHeight === next.xAxisHeight;
+    if (unchanged) return;
+
+    layout.value = next;
+  };
+  onMounted(() => {
+    // The axis watcher may have landed a new config between setup and mount.
+    handler();
+    chart.on('viewportChange', handler);
+  });
+  onUnmounted(() => chart.off('viewportChange', handler));
+
+  return layout;
+}
+
 export function useLastYValue(chart: ChartInstance, seriesId: string): Ref<{ value: number; isLive: boolean } | null> {
   let snapshot = chart.getLastValue(seriesId);
   // Track the pixel Y the snapshot maps to so a pan/zoom/resize that leaves the

package/src/index.ts

@@ -61,6 +61,7 @@ export type {
   LineSeriesOptions,
   LoadingIndicatorArgs,
   LoadingIndicatorFn,
+  LogScaleOptions,
   MarkerConfig,
   MarkerShape,
   MultiLayerData,
@@ -86,6 +87,7 @@ export type {
   ReferenceLineStyle,
   RenderPadding,
   RoundedRectArgs,
+  ScaleTickArgs,
   SeriesCreateEnv,
   SeriesDefinition,
   SeriesHoverInfo,
@@ -128,7 +130,9 @@ export type {
   WaveIntroTransform,
   XAxisConfig,
   YAxisConfig,
+  YAxisPosition,
   YRange,
+  YScaleTransform,
 } from '@wick-charts/core';
 // Painters — custom per-element drawing for bar / candle / line series.
 export {
@@ -172,6 +176,7 @@ export {
   isTimeSeriesRenderer,
   lavenderMist,
   lightPink,
+  logScale,
   materialPalenight,
   minimalLight,
   mintBreeze,

package/src/ui/Crosshair.vue

@@ -56,11 +56,11 @@ const labelStyle = computed(() => ({
 
 <template>
   <template v-if="position">
-    <!-- Y label on right axis -->
+    <!-- Y label on the value axis -->
     <div
       :style="{
         position: 'absolute',
-        right: '0',
+        [chart.yAxisPosition]: '0',
         top: position.mediaY + 'px',
         transform: 'translateY(-50%)',
         ...labelStyle,

package/src/ui/TimeAxis.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { mountAxisLabels } from '@wick-charts/core';
-import { onMounted, onUnmounted, ref, watch } from 'vue';
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
 
+import { useAxisLayout } from '../composables';
 import { useChartInstance } from '../context';
 
 const props = defineProps<{
@@ -12,6 +13,8 @@ const props = defineProps<{
 }>();
 
 const chart = useChartInstance();
+const layout = useAxisLayout(chart);
+const onLeft = computed(() => layout.value.yAxisPosition === 'left');
 const containerRef = ref<HTMLDivElement | null>(null);
 
 const applyDensity = () => {
@@ -42,10 +45,10 @@ onUnmounted(() => {
     ref="containerRef"
     :style="{
       position: 'absolute',
-      left: '0',
+      left: (onLeft ? layout.yAxisWidth : 0) + 'px',
       bottom: '0',
-      right: chart.yAxisWidth + 'px',
-      height: chart.xAxisHeight + 'px',
+      right: (onLeft ? 0 : layout.yAxisWidth) + 'px',
+      height: layout.xAxisHeight + 'px',
       pointerEvents: 'none',
       display: 'flex',
       alignItems: 'center',

package/src/ui/Tooltip.vue

@@ -104,16 +104,18 @@ watchEffect((onCleanup) => {
 const floatingPos = computed<{ left: number; top: number } | null>(() => {
   if (!crosshair.value || snapshots.value.length === 0) return null;
   const mediaSize = chart.getMediaSize();
+  const chartLeft = chart.plotLeft;
   const chartWidth = mediaSize.width - chart.yAxisWidth;
   const chartHeight = mediaSize.height - chart.xAxisHeight;
 
   if (hasCustomSlot.value) {
     const size = measuredSize.value;
-    if (!size) return { left: 0, top: 0 };
+    if (!size) return { left: chartLeft, top: 0 };
 
     return computeTooltipPosition({
       x: crosshair.value.mediaX,
       y: crosshair.value.mediaY,
+      chartLeft,
       chartWidth,
       chartHeight,
       tooltipWidth: size.width,
@@ -129,6 +131,7 @@ const floatingPos = computed<{ left: number; top: number } | null>(() => {
   return computeTooltipPosition({
     x: crosshair.value.mediaX,
     y: crosshair.value.mediaY,
+    chartLeft,
     chartWidth,
     chartHeight,
     tooltipWidth,

package/src/ui/YAxis.vue

@@ -2,6 +2,7 @@
 import { type ValueFormatter, mountAxisLabels } from '@wick-charts/core';
 import { onMounted, onUnmounted, ref, watch } from 'vue';
 
+import { useAxisLayout } from '../composables';
 import { useChartInstance } from '../context';
 
 const props = defineProps<{
@@ -17,6 +18,7 @@ const props = defineProps<{
 }>();
 
 const chart = useChartInstance();
+const layout = useAxisLayout(chart);
 const containerRef = ref<HTMLDivElement | null>(null);
 
 // Route the formatter through yScale so Crosshair / YLabel fallback use
@@ -52,10 +54,10 @@ onUnmounted(() => {
     ref="containerRef"
     :style="{
       position: 'absolute',
-      right: '0',
+      [layout.yAxisPosition]: '0',
       top: '0',
-      bottom: chart.xAxisHeight + 'px',
-      width: chart.yAxisWidth + 'px',
+      bottom: layout.xAxisHeight + 'px',
+      width: layout.yAxisWidth + 'px',
       pointerEvents: 'none',
     }"
   />

package/src/ui/YLabel.vue

@@ -273,8 +273,8 @@ const effectiveFormat = computed<ValueFormatter>(() => {
       <div
         :style="{
           position: 'absolute',
-          left: '0',
-          right: chart.yAxisWidth + 'px',
+          left: chart.plotLeft + 'px',
+          right: (chart.yAxisPosition === 'left' ? 0 : chart.yAxisWidth) + 'px',
           top: y + 'px',
           height: '0',
           borderTop: '1px dashed ' + bgColor,
@@ -286,7 +286,7 @@ const effectiveFormat = computed<ValueFormatter>(() => {
       <div
         :style="{
           position: 'absolute',
-          right: '4px',
+          [chart.yAxisPosition]: '4px',
           top: y + 'px',
           transform: 'translateY(-50%)',
           opacity: opacity,