@wick-charts/vue 0.8.1 → 0.8.2

package/src/ui/InfoBar.vue

@@ -4,13 +4,13 @@ import {
   type OHLCData,
   type SeriesSnapshot,
   type SnapshotSort,
-  type TimePoint,
   type TooltipFormatter,
   buildHoverSnapshots,
   buildLastSnapshots,
   formatCompact,
   formatHeaderX,
   formatPriceAdaptive,
+  formatRowValue,
   resolveCandlestickBodyColor,
 } from '@wick-charts/core';
 import { computed, inject, onMounted, onUnmounted, ref, useSlots } from 'vue';
@@ -56,12 +56,15 @@ const onOverlayChange = () => {
 };
 onMounted(() => {
   chart.on('overlayChange', onOverlayChange);
+  // Rows read animated values (smoothing, fades, percent shares).
+  chart.on('seriesFrame', onOverlayChange);
   // Catch-up: a sibling series' mount effect may have registered data in the
   // same synchronous flush, so poke the computed now.
   if (chart.getSeriesIds().length > 0) bump.value++;
 });
 onUnmounted(() => {
   chart.off('overlayChange', onOverlayChange);
+  chart.off('seriesFrame', onOverlayChange);
 });
 
 // Hover-over-the-y-axis gap: the overlay canvas includes the y-axis strip,
@@ -89,7 +92,12 @@ const snapshots = computed<readonly SeriesSnapshot[]>(() =>
   isHover.value ? (hoverSnapshots.value as readonly SeriesSnapshot[]) : lastSnapshots.value,
 );
 
-const dataInterval = computed(() => chart.getDataInterval());
+// `chart` is not reactive: `bump` re-reads the interval once data lands after mount.
+const dataInterval = computed(() => {
+  void bump.value;
+
+  return chart.getDataInterval();
+});
 const displayTime = computed(() => {
   if (snapshots.value.length === 0) return 0;
   if (isHover.value && crosshair.value) return crosshair.value.time;
@@ -205,7 +213,7 @@ function isBand(data: SeriesSnapshot['data']): data is BandPoint {
               }"
             />
             <span :style="{ color: s.color, fontWeight: 500 }">
-              {{ effectiveFormat((s.data as TimePoint).value, 'value') }}
+              {{ formatRowValue(s, (v) => effectiveFormat(v, 'value')) }}
             </span>
           </span>
         </template>

package/src/ui/NumberFlow.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue';
+import { computed, onMounted, ref, watch } from 'vue';
 
 const props = withDefaults(
   defineProps<{
@@ -11,6 +11,7 @@ const props = withDefaults(
      */
     format?: ((value: number) => string) | Intl.NumberFormatOptions;
     locale?: string;
+    /** Per-digit spin duration in ms. A value that arrives sooner than this after the previous one snaps instead. */
     spinDuration?: number;
   }>(),
   {
@@ -50,6 +51,19 @@ const parts = computed<CharPart[]>(() => {
   return result;
 });
 
+// A spin retargeted mid-turn shows two half digits, so values faster than a spin snap.
+const duration = ref(props.spinDuration);
+let changedAt = Number.NEGATIVE_INFINITY;
+watch(
+  () => effectiveFormat.value(props.value),
+  () => {
+    const now = performance.now();
+    const tooFast = now - changedAt < props.spinDuration;
+    changedAt = now;
+    duration.value = tooFast ? 0 : props.spinDuration;
+  },
+);
+
 const digits = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
 </script>
 
@@ -77,8 +91,8 @@ const digits = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
             display: 'flex',
             flexDirection: 'column',
             transform: 'translateY(' + (-parseInt(part.value) * 1.2) + 'em)',
-            transition: mounted
-              ? 'transform ' + spinDuration + 'ms cubic-bezier(0.16, 1, 0.3, 1)'
+            transition: mounted && duration > 0
+              ? 'transform ' + duration + 'ms cubic-bezier(0.16, 1, 0.3, 1)'
               : 'none',
           }"
         >

package/src/ui/Tooltip.vue

@@ -4,14 +4,13 @@ import {
   type OHLCData,
   type SeriesSnapshot,
   type SnapshotSort,
-  type TimePoint,
   type TooltipFormatter,
   buildHoverSnapshots,
   computeTooltipPosition,
   formatCompact,
-  formatDate,
-  formatHeaderX,
   formatPriceAdaptive,
+  formatRowValue,
+  formatTooltipHeader,
   resolveCandlestickBodyColor,
 } from '@wick-charts/core';
 import { computed, onMounted, onUnmounted, ref, useSlots, watchEffect } from 'vue';
@@ -47,14 +46,26 @@ const onOverlayChange = () => {
 };
 onMounted(() => {
   chart.on('overlayChange', onOverlayChange);
+  // Rows read animated values (smoothing, fades, percent shares).
+  chart.on('seriesFrame', onOverlayChange);
   if (chart.getSeriesIds().length > 0) bump.value++;
 });
 onUnmounted(() => {
   chart.off('overlayChange', onOverlayChange);
+  chart.off('seriesFrame', onOverlayChange);
 });
 
-const theme = computed(() => chart.getTheme());
-const dataInterval = computed(() => chart.getDataInterval());
+const theme = computed(() => {
+  void bump.value;
+
+  return chart.getTheme();
+});
+// `chart` is not reactive: `bump` re-reads the interval once data lands after mount.
+const dataInterval = computed(() => {
+  void bump.value;
+
+  return chart.getDataInterval();
+});
 
 const snapshots = computed<readonly SeriesSnapshot[]>(() => {
   void bump.value;
@@ -127,9 +138,12 @@ 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;
-  // A band row carries two numbers, so it needs a wider box than a line row.
+  // A band row carries two numbers, and a percent-stack row a share and a value, so both need a wider box.
   const hasBand = snapshots.value.some((s) => 'high' in s.data && !('open' in s.data));
-  const tooltipWidth = hasBand ? 220 : 160;
+  const hasShare = snapshots.value.some((s) => s.share !== undefined);
+  let tooltipWidth = 160;
+  if (hasBand) tooltipWidth = 220;
+  if (hasShare) tooltipWidth = 240;
   const tooltipHeight = hasOHLC ? 140 : 40 + lineCount * 22;
 
   return computeTooltipPosition({
@@ -188,10 +202,7 @@ function isBand(data: SeriesSnapshot['data']): data is BandPoint {
         letterSpacing: '0.02em',
       }"
     >
-      <template v-if="chart.timeScale.getType() === 'time'">
-        {{ formatDate(displayTime, { locale: chart.timeScale.getLocale(), timeZone: chart.timeScale.getTimeZone() }) }}
-      </template>
-      {{ formatHeaderX(chart, { time: displayTime, snapshots, interval: dataInterval }) }}
+      {{ formatTooltipHeader(chart, { time: displayTime, snapshots, interval: dataInterval }) }}
     </div>
 
     <template v-for="s in snapshots" :key="s.id">
@@ -264,7 +275,7 @@ function isBand(data: SeriesSnapshot['data']): data is BandPoint {
         />
         <span :style="{ opacity: 0.6, flex: '1' }">{{ s.label ?? 'Value' }}</span>
         <span :style="{ fontWeight: 600, color: s.color }">
-          {{ effectiveFormat((s.data as TimePoint).value, 'value') }}
+          {{ formatRowValue(s, (v) => effectiveFormat(v, 'value')) }}
         </span>
       </div>
     </template>