@wick-charts/vue 0.6.3 → 0.6.4

package/dist/ui/YLabel.vue.js

@@ -1,9 +1,9 @@
-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 { defineComponent as $, useSlots as j, computed as a, ref as I, onMounted as G, onUnmounted as O, openBlock as w, createElementBlock as A, Fragment as B, renderSlot as W, createElementVNode as _, normalizeStyle as Y, unref as g, createVNode as H, createCommentVNode as J } from "vue";
+import { prefersReducedMotion as K } from "../core/dist/animation/reduced-motion.js";
+import { resolveAnimate as Q, resolveYLabelSeriesId 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 ie = /* @__PURE__ */ q({
+import ae from "./NumberFlow.vue.js";
+const ie = /* @__PURE__ */ $({
   __name: "YLabel",
   props: {
     seriesId: {},
@@ -11,55 +11,48 @@ const ie = /* @__PURE__ */ q({
     format: { type: Function },
     animate: { type: [Boolean, Object] }
   },
-  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() {
+  setup(z) {
+    const c = z, e = te(), M = j(), E = a(() => typeof M.default == "function"), i = I(0), o = I(null);
+    let p = null, y = null, u = null;
+    const N = a(() => Q(c.animate));
+    function L() {
       u = null;
-      const t = s.value, l = t !== null ? e.getStackedLastValue(t) : null;
-      if (t === null || !l) {
-        m = null, x = null;
+      const t = s.value, n = t !== null ? e.getStackedLastValue(t) : null;
+      if (t === null || !n) {
+        p = null, y = null;
         return;
       }
-      const v = l.value;
-      (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,
+      const m = n.value;
+      (p === null || y !== t) && (p = new ee(m), y = t);
+      const { glide: P, countUp: U, settleMs: q } = N.value, S = e.getIntroFront(t), v = p.frame({
+        target: m,
         // Only needed for the intro count-up; skip the visible-range binary search
         // entirely once the reveal has settled (the hot streaming path).
-        firstVisible: I < 1 ? Z(e, t, v) : v,
-        introFront: I,
+        firstVisible: S < 1 ? Z(e, t, m) : m,
+        introFront: S,
         now: performance.now(),
-        glide: d,
+        glide: P,
         countUp: U,
-        settleMs: $,
-        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));
+        settleMs: q,
+        reducedMotion: K()
+      }), d = o.value;
+      (d === null || d.positionValue !== v.positionValue || d.textValue !== v.textValue || d.opacity !== v.opacity) && (o.value = { positionValue: v.positionValue, textValue: v.textValue, opacity: v.opacity }), v.animating && u === null && (u = requestAnimationFrame(L));
     }
-    function O() {
-      u === null && (u = requestAnimationFrame(S));
+    function R() {
+      u === null && (u = requestAnimationFrame(L));
     }
-    const p = () => {
-      i.value++, O();
+    const f = () => {
+      i.value++, R();
     };
     G(() => {
-      e.setYLabel(!0), e.on("overlayChange", p), e.on("viewportChange", p), e.getSeriesIds().length > 0 && p();
-    }), W(() => {
-      e.setYLabel(!1), e.off("overlayChange", p), e.off("viewportChange", p), u !== null && cancelAnimationFrame(u), u = null;
+      e.setYLabel(!0), e.on("overlayChange", f), e.on("viewportChange", f), e.getSeriesIds().length > 0 && f();
+    }), O(() => {
+      e.setYLabel(!1), e.off("overlayChange", f), e.off("viewportChange", f), u !== null && cancelAnimationFrame(u), u = null;
     });
-    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, 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;
+    const s = a(() => (i.value, X(e, c.seriesId))), l = a(() => (i.value, s.value !== null ? e.getStackedLastValue(s.value) : null)), x = a(() => (i.value, s.value !== null ? e.getPreviousClose(s.value) : null)), r = a(() => (i.value, e.getTheme())), T = a(() => o.value !== null ? o.value.positionValue : l.value?.value ?? 0), D = a(() => o.value !== null ? o.value.textValue : l.value?.value ?? 0), b = a(() => o.value !== null ? o.value.opacity : s.value === null ? 1 : e.getIntroFront(s.value) < 1 ? 0 : 1), h = a(() => (i.value, l.value === null ? 0 : e.yScale.valueToY(T.value))), k = a(() => l.value === null || x.value === null ? "neutral" : l.value.value > x.value ? "up" : l.value.value < x.value ? "down" : "neutral"), V = a(() => {
+      if (l.value === null) return r.value.yLabel.neutralBackground;
+      if (!l.value.isLive) return r.value.axis.textColor;
+      if (c.color) return c.color;
       switch (k.value) {
         case "up":
           return r.value.yLabel.upBackground;
@@ -68,53 +61,53 @@ const ie = /* @__PURE__ */ q({
         default:
           return r.value.yLabel.neutralBackground;
       }
-    }), C = n(() => {
+    }), C = a(() => {
       i.value;
-      const t = e.yScale.getRange(), l = t.max - t.min;
-      return l < 0.1 ? 6 : l < 10 ? 4 : l < 1e3 ? 2 : 0;
-    }), F = n(() => {
-      if (f.format) return f.format;
+      const t = e.yScale.getRange(), n = t.max - t.min;
+      return n < 0.1 ? 6 : n < 10 ? 4 : n < 1e3 ? 2 : 0;
+    }), F = a(() => {
+      if (c.format) return c.format;
       const t = new Intl.NumberFormat("en-US", {
         minimumFractionDigits: C.value,
         maximumFractionDigits: C.value,
         useGrouping: !1
       });
-      return (l) => t.format(l);
+      return (n) => t.format(n);
     });
-    return (t, l) => a.value !== null ? (A(), B(_, { key: 0 }, [
-      M.value ? H(t.$slots, "default", {
+    return (t, n) => l.value !== null ? (w(), A(B, { key: 0 }, [
+      E.value ? W(t.$slots, "default", {
         key: 0,
-        value: a.value.value,
-        y: V.value,
-        bgColor: L.value,
-        isLive: a.value.isLive,
+        value: l.value.value,
+        y: h.value,
+        bgColor: V.value,
+        isLive: l.value.isLive,
         direction: k.value,
         format: F.value,
-        opacity: h.value
-      }) : (A(), B(_, { key: 1 }, [
-        T("div", {
-          style: z({
+        opacity: b.value
+      }) : (w(), A(B, { key: 1 }, [
+        _("div", {
+          style: Y({
             position: "absolute",
             left: g(e).plotLeft + "px",
             right: (g(e).yAxisPosition === "left" ? 0 : g(e).yAxisWidth) + "px",
-            top: V.value + "px",
+            top: h.value + "px",
             height: "0",
-            borderTop: "1px dashed " + L.value,
-            opacity: h.value * 0.5,
+            borderTop: "1px dashed " + V.value,
+            opacity: b.value * 0.5,
             pointerEvents: "none",
             zIndex: 2
           })
         }, null, 4),
-        T("div", {
-          style: z({
+        _("div", {
+          style: Y({
             position: "absolute",
             [g(e).yAxisPosition]: "4px",
-            top: V.value + "px",
+            top: h.value + "px",
             transform: "translateY(-50%)",
-            opacity: h.value,
+            opacity: b.value,
             pointerEvents: "auto",
             zIndex: 3,
-            background: L.value,
+            background: V.value,
             color: r.value.yLabel.textColor,
             fontSize: r.value.yLabel.fontSize + "px",
             fontFamily: r.value.typography.fontFamily,
@@ -124,14 +117,14 @@ const ie = /* @__PURE__ */ q({
             transition: "background-color 0.3s ease"
           })
         }, [
-          J(ne, {
-            value: P.value,
+          H(ae, {
+            value: D.value,
             format: F.value,
             "spin-duration": 350
           }, null, 8, ["value", "format"])
         ], 4)
       ], 64))
-    ], 64)) : K("", !0);
+    ], 64)) : J("", !0);
   }
 });
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wick-charts/vue",
-  "version": "0.6.3",
+  "version": "0.6.4",
   "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.3"
+    "@wick-charts/core": "^0.6.4"
   },
   "scripts": {
     "build": "vite build"

package/src/BandSeries.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import type { BandData, BandSeriesOptions, SeriesSyncState } from '@wick-charts/core';
+import { BandSeriesDef, EMPTY_SYNC_STATE, syncLayers, toLayers } from '@wick-charts/core';
+import { onMounted, onUnmounted, ref, watch } from 'vue';
+
+import { useChartInstance } from './context';
+
+const props = withDefaults(
+  defineProps<{
+    /**
+     * Band data — one band per layer. A single band passes a flat
+     * `{ time, low, high }[]`; several bands pass `BandPoint[][]`. To name/color
+     * a band, pass `{ label, color?, data }` (or an array of them). Time accepts
+     * ms or `Date`.
+     */
+    data: BandData;
+    /** Visual options override — fill, edge stroke, curve, entrance / intro / smoothing. */
+    options?: Partial<BandSeriesOptions>;
+    /** Stable series ID — same value across remounts. */
+    id?: string;
+    /** Show/hide the series without unmounting it — excludes it from the Y-range fit and tooltip/legend. Default `true`. Live. */
+    visible?: boolean;
+  }>(),
+  // Vue's type-based `defineProps` casts an absent Boolean-typed prop to
+  // `false` (not `undefined`) without an explicit default — see the
+  // `interactive` fix in ChartContainer.vue for the full explanation.
+  { visible: true },
+);
+
+const chart = useChartInstance();
+const seriesId = ref<string | null>(null);
+// Per-layer sync state — drives the shared append/keepLast/update/replace
+// reconciliation (plus per-layer labels/colors) so streaming eases instead of
+// snapping Y every tick.
+let prevSync: SeriesSyncState[] = [];
+
+function applyData(id: string, data: BandData): void {
+  prevSync = syncLayers({ chart, id, data, prev: prevSync });
+}
+
+onMounted(() => {
+  const layerCount = toLayers(props.data).length;
+  const id = chart.addSeries(BandSeriesDef, {
+    ...props.options,
+    layers: layerCount,
+    id: props.id,
+  });
+  seriesId.value = id;
+  prevSync = new Array(layerCount).fill(EMPTY_SYNC_STATE);
+  // Lazy watcher — apply initial data here so static-data mounts render without a no-op first frame.
+  applyData(id, props.data);
+  chart.setSeriesVisible(id, props.visible);
+});
+
+onUnmounted(() => {
+  if (seriesId.value) chart.removeSeries(seriesId.value);
+});
+
+watch(
+  () => props.data,
+  (data) => {
+    const id = seriesId.value;
+    if (!id) return;
+
+    applyData(id, data);
+  },
+);
+
+watch(
+  () => props.options,
+  (options) => {
+    if (seriesId.value && options) {
+      chart.updateSeriesOptions(seriesId.value, options);
+    }
+  },
+  { deep: true },
+);
+
+watch(
+  () => props.visible,
+  (visible) => {
+    if (seriesId.value) chart.setSeriesVisible(seriesId.value, visible);
+  },
+);
+</script>
+
+<template><span v-if="false" /></template>

package/src/index.ts

@@ -13,6 +13,11 @@ export type {
   AnimationsConfig,
   AxisBound,
   AxisConfig,
+  BandData,
+  BandEntryAnimation,
+  BandPoint,
+  BandPointInput,
+  BandSeriesOptions,
   BarElementTransform,
   BarEntryAnimation,
   BarIntroDirectives,
@@ -51,6 +56,7 @@ export type {
   HeatmapSeriesOptions,
   HeatmapSeriesRenderer,
   HoverInfo,
+  LayerSnapshot,
   LegendItem,
   LineIntroDirectives,
   LineIntroFn,
@@ -136,6 +142,7 @@ export type {
 } from '@wick-charts/core';
 // Painters — custom per-element drawing for bar / candle / line series.
 export {
+  BandSeriesDef,
   BarSeriesDef,
   CandlestickSeriesDef,
   ChartInstance,
@@ -219,6 +226,7 @@ export {
   wipeIntro,
 } from '@wick-charts/core';
 
+export { default as BandSeries } from './BandSeries.vue';
 export { default as BarSeries } from './BarSeries.vue';
 export { default as CandlestickSeries } from './CandlestickSeries.vue';
 // Vue components

package/src/ui/InfoBar.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import {
+  type BandPoint,
   type OHLCData,
   type SeriesSnapshot,
   type SnapshotSort,
@@ -98,9 +99,13 @@ const displayTime = computed(() => {
 const slots = useSlots();
 const hasCustomSlot = computed(() => typeof slots.default === 'function');
 
-function isOHLC(data: OHLCData | TimePoint): data is OHLCData {
+function isOHLC(data: SeriesSnapshot['data']): data is OHLCData {
   return 'open' in data;
 }
+
+function isBand(data: SeriesSnapshot['data']): data is BandPoint {
+  return 'high' in data && !isOHLC(data);
+}
 </script>
 
 <template>
@@ -174,6 +179,20 @@ function isOHLC(data: OHLCData | TimePoint): data is OHLCData {
               </span>
             </template>
           </span>
+          <span v-else-if="isBand(s.data)" :style="{ display: 'inline-flex', alignItems: 'center', gap: '3px' }">
+            <span
+              :style="{
+                width: '6px',
+                height: '6px',
+                borderRadius: '1px',
+                background: s.color,
+                flexShrink: 0,
+              }"
+            />
+            <span :style="{ color: s.color, fontWeight: 500 }">
+              {{ effectiveFormat((s.data as BandPoint).low, 'low') }} – {{ effectiveFormat((s.data as BandPoint).high, 'high') }}
+            </span>
+          </span>
           <span v-else :style="{ display: 'inline-flex', alignItems: 'center', gap: '3px' }">
             <span
               :style="{

package/src/ui/Tooltip.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import {
+  type BandPoint,
   type OHLCData,
   type SeriesSnapshot,
   type SnapshotSort,
@@ -125,7 +126,9 @@ const floatingPos = computed<{ left: number; top: number } | null>(() => {
 
   const hasOHLC = snapshots.value.some((s) => 'open' in s.data);
   const lineCount = snapshots.value.filter((s) => !('open' in s.data)).length;
-  const tooltipWidth = 160;
+  // A band row carries two numbers, so it needs a wider box than a line row.
+  const hasBand = snapshots.value.some((s) => 'high' in s.data && !('open' in s.data));
+  const tooltipWidth = hasBand ? 220 : 160;
   const tooltipHeight = hasOHLC ? 140 : 40 + lineCount * 22;
 
   return computeTooltipPosition({
@@ -141,9 +144,13 @@ const floatingPos = computed<{ left: number; top: number } | null>(() => {
 
 const measured = computed(() => !hasCustomSlot.value || measuredSize.value !== null);
 
-function isOHLC(data: OHLCData | TimePoint): data is OHLCData {
+function isOHLC(data: SeriesSnapshot['data']): data is OHLCData {
   return 'open' in data;
 }
+
+function isBand(data: SeriesSnapshot['data']): data is BandPoint {
+  return 'high' in data && !isOHLC(data);
+}
 </script>
 
 <template>
@@ -215,6 +222,33 @@ function isOHLC(data: OHLCData | TimePoint): data is OHLCData {
           </span>
         </template>
       </div>
+      <div
+        v-else-if="isBand(s.data)"
+        :style="{ display: 'flex', alignItems: 'center', gap: '8px', padding: '2px 0' }"
+      >
+        <span
+          :style="{
+            width: '8px',
+            height: '8px',
+            borderRadius: '2px',
+            background: s.color,
+            flexShrink: 0,
+          }"
+        />
+        <span
+          :style="{
+            opacity: 0.6,
+            flex: '1',
+            minWidth: 0,
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+          }"
+        >{{ s.label ?? 'Range' }}</span>
+        <span :style="{ fontWeight: 600, color: s.color, whiteSpace: 'nowrap' }">
+          {{ effectiveFormat((s.data as BandPoint).low, 'low') }} – {{ effectiveFormat((s.data as BandPoint).high, 'high') }}
+        </span>
+      </div>
       <div v-else :style="{ display: 'flex', alignItems: 'center', gap: '8px', padding: '2px 0' }">
         <span
           :style="{

package/src/ui/YLabel.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import {
   BadgeAnimator,
-  type ChartInstance,
   type ValueFormatter,
   type YLabelAnimate,
   firstVisibleValue,
   prefersReducedMotion,
   resolveAnimate,
+  resolveYLabelSeriesId,
 } from '@wick-charts/core';
 import { computed, onMounted, onUnmounted, ref, useSlots } from 'vue';
 
@@ -145,21 +145,10 @@ onUnmounted(() => {
   rafId = null;
 });
 
-function resolveSeriesId(c: ChartInstance, explicit: string | undefined): string | null {
-  if (explicit !== undefined) return explicit;
-
-  const singleLayer = c.getSeriesIdsByType('time', { visibleOnly: true, singleLayerOnly: true });
-  if (singleLayer.length > 0) return singleLayer[0];
-
-  const anyTime = c.getSeriesIdsByType('time', { visibleOnly: true });
-
-  return anyTime.length > 0 ? anyTime[0] : null;
-}
-
 const resolvedId = computed<string | null>(() => {
   void bump.value;
 
-  return resolveSeriesId(chart, props.seriesId);
+  return resolveYLabelSeriesId(chart, props.seriesId);
 });
 
 const last = computed<{ value: number; isLive: boolean } | null>(() => {