@wick-charts/vue 0.2.2 → 0.3.0

package/src/ui/Tooltip.vue

@@ -0,0 +1,262 @@
+<script setup lang="ts">
+import {
+  type OHLCData,
+  type SeriesSnapshot,
+  type SnapshotSort,
+  type TimePoint,
+  type TooltipFormatter,
+  buildHoverSnapshots,
+  computeTooltipPosition,
+  formatCompact,
+  formatDate,
+  formatPriceAdaptive,
+  formatTime,
+  resolveCandlestickBodyColor,
+} from '@wick-charts/core';
+import { computed, onMounted, onUnmounted, ref, useSlots, watchEffect } from 'vue';
+
+import { useCrosshairPosition } from '../composables';
+import { useChartInstance } from '../context';
+
+const props = defineProps<{
+  sort?: SnapshotSort;
+  format?: TooltipFormatter;
+}>();
+
+defineSlots<{
+  default?(ctx: { snapshots: readonly SeriesSnapshot[]; time: number }): unknown;
+}>();
+
+// Vue's `withDefaults` is inconsistent for function-typed props (sometimes
+// treats the default as a factory, sometimes as the value). Use a computed
+// fallback instead.
+const effectiveSort = computed<SnapshotSort>(() => props.sort ?? 'none');
+const effectiveFormat = computed<TooltipFormatter>(
+  () =>
+    props.format ?? ((v: number, field: string) => (field === 'volume' ? formatCompact(v) : formatPriceAdaptive(v))),
+);
+
+const chart = useChartInstance();
+const crosshair = useCrosshairPosition(chart);
+
+// `bump` re-runs computed values on any overlay-relevant chart mutation.
+const bump = ref(0);
+const onOverlayChange = () => {
+  bump.value++;
+};
+onMounted(() => {
+  chart.on('overlayChange', onOverlayChange);
+  if (chart.getSeriesIds().length > 0) bump.value++;
+});
+onUnmounted(() => {
+  chart.off('overlayChange', onOverlayChange);
+});
+
+const theme = computed(() => chart.getTheme());
+const dataInterval = computed(() => chart.getDataInterval());
+
+const snapshots = computed<readonly SeriesSnapshot[]>(() => {
+  void bump.value;
+  if (!crosshair.value) return [];
+
+  return buildHoverSnapshots(chart, {
+    time: crosshair.value.time,
+    sort: effectiveSort.value,
+    cacheKey: 'tooltip',
+  });
+});
+
+// `crosshair.time` is the semantic truth — `snapshots[0].data.time` would
+// shift with `sort` and, for ragged multi-layer data, disagree with the
+// actual hover moment.
+const displayTime = computed(() => crosshair.value?.time ?? 0);
+
+const slots = useSlots();
+const hasCustomSlot = computed(() => typeof slots.default === 'function');
+
+const containerRef = ref<HTMLDivElement | null>(null);
+const measuredSize = ref<{ width: number; height: number } | null>(null);
+
+// `ResizeObserver` on the custom-render container — unknown content dimensions
+// mean we can't pre-compute `tooltipWidth/Height` for `computeTooltipPosition`.
+// Measure on mount + any content change, then flip `visibility` to visible.
+let observer: ResizeObserver | null = null;
+watchEffect((onCleanup) => {
+  if (!hasCustomSlot.value) return;
+  const node = containerRef.value;
+  if (!node || typeof ResizeObserver === 'undefined') return;
+
+  observer = new ResizeObserver((entries) => {
+    const box = entries[0]?.contentRect;
+    if (!box) return;
+    const prev = measuredSize.value;
+    if (!prev || prev.width !== box.width || prev.height !== box.height) {
+      measuredSize.value = { width: box.width, height: box.height };
+    }
+  });
+  observer.observe(node);
+
+  onCleanup(() => {
+    observer?.disconnect();
+    observer = null;
+  });
+});
+
+const floatingPos = computed<{ left: number; top: number } | null>(() => {
+  if (!crosshair.value || snapshots.value.length === 0) return null;
+  const mediaSize = chart.getMediaSize();
+  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 };
+
+    return computeTooltipPosition({
+      x: crosshair.value.mediaX,
+      y: crosshair.value.mediaY,
+      chartWidth,
+      chartHeight,
+      tooltipWidth: size.width,
+      tooltipHeight: size.height,
+    });
+  }
+
+  const hasOHLC = snapshots.value.some((s) => 'open' in s.data);
+  const lineCount = snapshots.value.filter((s) => !('open' in s.data)).length;
+  const tooltipWidth = 160;
+  const tooltipHeight = hasOHLC ? 140 : 40 + lineCount * 22;
+
+  return computeTooltipPosition({
+    x: crosshair.value.mediaX,
+    y: crosshair.value.mediaY,
+    chartWidth,
+    chartHeight,
+    tooltipWidth,
+    tooltipHeight,
+  });
+});
+
+const measured = computed(() => !hasCustomSlot.value || measuredSize.value !== null);
+
+function isOHLC(data: OHLCData | TimePoint): data is OHLCData {
+  return 'open' in data;
+}
+</script>
+
+<template>
+  <div
+    v-if="crosshair && snapshots.length > 0 && floatingPos && !hasCustomSlot"
+    :style="{
+      position: 'absolute',
+      left: floatingPos.left + 'px',
+      top: floatingPos.top + 'px',
+      pointerEvents: 'none',
+      background: theme.tooltip.background,
+      backdropFilter: 'blur(12px)',
+      WebkitBackdropFilter: 'blur(12px)',
+      border: '1px solid ' + theme.tooltip.borderColor,
+      borderRadius: '8px',
+      padding: '10px 14px',
+      boxShadow: '0 4px 16px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.06)',
+      fontSize: theme.tooltip.fontSize + 'px',
+      fontFamily: theme.typography.fontFamily,
+      fontVariantNumeric: 'tabular-nums',
+      color: theme.tooltip.textColor,
+      minWidth: '140px',
+      zIndex: 10,
+      transition: 'opacity 0.15s ease',
+    }"
+  >
+    <div
+      :style="{
+        fontSize: theme.axis.fontSize + 'px',
+        color: theme.axis.textColor,
+        marginBottom: '8px',
+        paddingBottom: '6px',
+        borderBottom: '1px solid ' + theme.tooltip.borderColor,
+        letterSpacing: '0.02em',
+      }"
+    >
+      {{ formatDate(displayTime) }} {{ formatTime(displayTime, dataInterval) }}
+    </div>
+
+    <template v-for="s in snapshots" :key="s.id">
+      <div v-if="isOHLC(s.data)" :style="{ display: 'grid', gridTemplateColumns: 'auto 1fr', gap: '4px 12px' }">
+        <template
+          v-for="row in [
+            { label: 'Open', val: (s.data as OHLCData).open, field: 'open' as const },
+            { label: 'High', val: (s.data as OHLCData).high, field: 'high' as const },
+            { label: 'Low', val: (s.data as OHLCData).low, field: 'low' as const },
+            { label: 'Close', val: (s.data as OHLCData).close, field: 'close' as const },
+          ]"
+          :key="row.label"
+        >
+          <span :style="{ opacity: 0.5 }">{{ row.label }}</span>
+          <span
+            :style="{
+              fontWeight: 600,
+              color: resolveCandlestickBodyColor(
+                (s.data as OHLCData).close >= (s.data as OHLCData).open
+                  ? theme.candlestick.up.body
+                  : theme.candlestick.down.body,
+              ),
+              textAlign: 'right',
+            }"
+          >{{ effectiveFormat(row.val, row.field) }}</span>
+        </template>
+        <template v-if="(s.data as OHLCData).volume != null">
+          <span :style="{ opacity: 0.5 }">Volume</span>
+          <span :style="{ fontWeight: 600, color: theme.tooltip.textColor, textAlign: 'right' }">
+            {{ effectiveFormat((s.data as OHLCData).volume!, 'volume') }}
+          </span>
+        </template>
+      </div>
+      <div v-else :style="{ display: 'flex', alignItems: 'center', gap: '8px', padding: '2px 0' }">
+        <span
+          :style="{
+            width: '8px',
+            height: '8px',
+            borderRadius: '50%',
+            background: s.color,
+            flexShrink: 0,
+          }"
+        />
+        <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') }}
+        </span>
+      </div>
+    </template>
+  </div>
+
+  <div
+    v-if="crosshair && snapshots.length > 0 && floatingPos && hasCustomSlot"
+    ref="containerRef"
+    :data-measured="measured ? 'true' : 'false'"
+    :style="{
+      position: 'absolute',
+      left: floatingPos.left + 'px',
+      top: floatingPos.top + 'px',
+      pointerEvents: 'none',
+      background: theme.tooltip.background,
+      backdropFilter: 'blur(12px)',
+      WebkitBackdropFilter: 'blur(12px)',
+      border: '1px solid ' + theme.tooltip.borderColor,
+      borderRadius: '8px',
+      padding: '10px 14px',
+      boxShadow: '0 4px 16px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.06)',
+      fontFamily: theme.typography.fontFamily,
+      fontSize: theme.tooltip.fontSize + 'px',
+      fontVariantNumeric: 'tabular-nums',
+      color: theme.tooltip.textColor,
+      width: 'max-content',
+      maxWidth: (chart.getMediaSize().width - chart.yAxisWidth) + 'px',
+      boxSizing: 'border-box',
+      zIndex: 10,
+      visibility: measuredSize !== null ? 'visible' : 'hidden',
+    }"
+  >
+    <slot :snapshots="snapshots" :time="displayTime" />
+  </div>
+</template>

package/src/ui/YAxis.vue

@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import { resolveAxisFontSize, resolveAxisTextColor, type ValueFormatter } from '@wick-charts/core';
+import { computed, onMounted, onUnmounted, watch } from 'vue';
+
+import { useVisibleRange } from '../composables';
+import { useChartInstance } from '../context';
+
+const props = defineProps<{
+  /** Custom tick-label formatter. Overrides the built-in range-adaptive default. */
+  format?: ValueFormatter;
+}>();
+
+interface TrackedTick {
+  opacity: number;
+  addedAt: number;
+}
+
+const chart = useChartInstance();
+// Subscribe to visible range to trigger re-renders on viewport changes
+const visibleRange = useVisibleRange(chart);
+
+// Route the formatter through yScale so Crosshair / YLabel fallback use
+// the same function as the axis labels.
+const syncFormat = () => chart.yScale.setFormat(props.format ?? null);
+onMounted(syncFormat);
+watch(() => props.format, syncFormat);
+onUnmounted(() => chart.yScale.setFormat(null));
+
+const tickMap = new Map<number, TrackedTick>();
+
+const theme = computed(() => chart.getTheme());
+
+const allTicks = computed(() => {
+  // Access visibleRange.value to track dependency
+  void visibleRange.value;
+
+  const currentTicks = chart.yScale.niceTickValues();
+  const currentSet = new Set(currentTicks);
+  const now = performance.now();
+
+  // Mark current ticks as visible
+  for (const p of currentTicks) {
+    if (!tickMap.has(p)) {
+      tickMap.set(p, { opacity: 1, addedAt: now });
+    } else {
+      tickMap.get(p)!.opacity = 1;
+    }
+  }
+
+  // Mark missing ticks for fade-out
+  for (const [p, entry] of tickMap) {
+    if (!currentSet.has(p)) {
+      entry.opacity = 0;
+    }
+  }
+
+  // Clean up old faded-out ticks
+  for (const [p, entry] of tickMap) {
+    if (entry.opacity === 0 && now - entry.addedAt > 5000) {
+      tickMap.delete(p);
+    }
+  }
+
+  return Array.from(tickMap.entries());
+});
+</script>
+
+<template>
+  <div
+    :style="{
+      position: 'absolute',
+      right: '0',
+      top: '0',
+      bottom: chart.xAxisHeight + 'px',
+      width: chart.yAxisWidth + 'px',
+      pointerEvents: 'none',
+    }"
+  >
+    <span
+      v-for="[price, entry] in allTicks"
+      :key="price"
+      :style="{
+        position: 'absolute',
+        right: '8px',
+        top: chart.yScale.valueToY(price) + 'px',
+        transform: 'translateY(-50%)',
+        color: resolveAxisTextColor(theme, 'y'),
+        fontSize: resolveAxisFontSize(theme, 'y') + 'px',
+        fontFamily: theme.typography.fontFamily,
+        fontVariantNumeric: 'tabular-nums',
+        userSelect: 'none',
+        opacity: entry.opacity,
+        transition: 'opacity 0.3s ease',
+        willChange: 'opacity',
+      }"
+    >
+      {{ chart.yScale.formatY(price) }}
+    </span>
+  </div>
+</template>

package/src/ui/YLabel.vue

@@ -0,0 +1,194 @@
+<script setup lang="ts">
+import type { ChartInstance, ValueFormatter } from '@wick-charts/core';
+import { computed, onMounted, onUnmounted, ref, useSlots } from 'vue';
+
+import { useChartInstance } from '../context';
+import NumberFlow from './NumberFlow.vue';
+
+/** Direction of the current value vs. previous close. Drives the badge color in the default UI. */
+export type YLabelDirection = 'up' | 'down' | 'neutral';
+
+const props = defineProps<{
+  /**
+   * Owning series id. **Optional** — when omitted, the first visible
+   * single-layer time series is picked, falling back to the first visible
+   * multi-layer time series.
+   */
+  seriesId?: string;
+  color?: string;
+  /** Custom formatter; routed through NumberFlow's `formatter` so the digit animation still plays. */
+  format?: ValueFormatter;
+}>();
+
+defineSlots<{
+  default?(ctx: {
+    value: number;
+    y: number;
+    bgColor: string;
+    isLive: boolean;
+    direction: YLabelDirection;
+    format: ValueFormatter;
+  }): unknown;
+}>();
+
+const chart = useChartInstance();
+const slots = useSlots();
+const hasCustomSlot = computed(() => typeof slots.default === 'function');
+
+// Single subscription covering data/visibility/theme/options changes, plus
+// viewportChange for pixel-Y drift on pan/zoom where the value is unchanged
+// but the badge must move.
+const bump = ref(0);
+const onChange = () => {
+  bump.value++;
+};
+
+onMounted(() => {
+  chart.setYLabel(true);
+  chart.on('overlayChange', onChange);
+  chart.on('viewportChange', onChange);
+  if (chart.getSeriesIds().length > 0) bump.value++;
+});
+
+onUnmounted(() => {
+  chart.setYLabel(false);
+  chart.off('overlayChange', onChange);
+  chart.off('viewportChange', onChange);
+});
+
+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);
+});
+
+const last = computed<{ value: number; isLive: boolean } | null>(() => {
+  void bump.value;
+
+  return resolvedId.value !== null ? chart.getStackedLastValue(resolvedId.value) : null;
+});
+
+const previousClose = computed<number | null>(() => {
+  void bump.value;
+
+  return resolvedId.value !== null ? chart.getPreviousClose(resolvedId.value) : null;
+});
+
+const theme = computed(() => {
+  void bump.value;
+
+  return chart.getTheme();
+});
+
+const y = computed(() => {
+  void bump.value;
+  if (last.value === null) return 0;
+
+  return chart.yScale.valueToY(last.value.value);
+});
+
+const direction = computed<YLabelDirection>(() => {
+  if (last.value === null || previousClose.value === null) return 'neutral';
+  if (last.value.value > previousClose.value) return 'up';
+  if (last.value.value < previousClose.value) return 'down';
+
+  return 'neutral';
+});
+
+const bgColor = computed<string>(() => {
+  if (last.value === null) return theme.value.yLabel.neutralBackground;
+  if (!last.value.isLive) return theme.value.axis.textColor;
+  if (props.color) return props.color;
+
+  switch (direction.value) {
+    case 'up':
+      return theme.value.yLabel.upBackground;
+    case 'down':
+      return theme.value.yLabel.downBackground;
+    default:
+      return theme.value.yLabel.neutralBackground;
+  }
+});
+
+const fractionDigits = computed(() => {
+  void bump.value;
+  const yRange = chart.yScale.getRange();
+  const range = yRange.max - yRange.min;
+  if (range < 0.1) return 6;
+  if (range < 10) return 4;
+  if (range < 1000) return 2;
+
+  return 0;
+});
+
+const effectiveFormat = computed<ValueFormatter>(() => {
+  if (props.format) return props.format;
+  const nf = new Intl.NumberFormat('en-US', {
+    minimumFractionDigits: fractionDigits.value,
+    maximumFractionDigits: fractionDigits.value,
+    useGrouping: false,
+  });
+
+  return (v: number) => nf.format(v);
+});
+</script>
+
+<template>
+  <template v-if="last !== null">
+    <slot
+      v-if="hasCustomSlot"
+      :value="last.value"
+      :y="y"
+      :bg-color="bgColor"
+      :is-live="last.isLive"
+      :direction="direction"
+      :format="effectiveFormat"
+    />
+    <template v-else>
+      <div
+        :style="{
+          position: 'absolute',
+          left: '0',
+          right: chart.yAxisWidth + 'px',
+          top: y + 'px',
+          height: '0',
+          borderTop: '1px dashed ' + bgColor,
+          opacity: 0.5,
+          pointerEvents: 'none',
+          zIndex: 2,
+        }"
+      />
+      <div
+        :style="{
+          position: 'absolute',
+          right: '4px',
+          top: y + 'px',
+          transform: 'translateY(-50%)',
+          pointerEvents: 'auto',
+          zIndex: 3,
+          background: bgColor,
+          color: theme.yLabel.textColor,
+          fontSize: theme.yLabel.fontSize + 'px',
+          fontFamily: theme.typography.fontFamily,
+          padding: '3px 8px',
+          borderRadius: '3px',
+          whiteSpace: 'nowrap',
+          transition: 'background-color 0.3s ease',
+        }"
+      >
+        <NumberFlow :value="last.value" :format="effectiveFormat" :spin-duration="350" />
+      </div>
+    </template>
+  </template>
+</template>