@wick-charts/vue 0.2.2 → 0.3.0

package/src/ui/Crosshair.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { formatTime } from '@wick-charts/core';
+import { computed } from 'vue';
+
+import { useCrosshairPosition } from '../composables';
+import { useChartInstance } from '../context';
+
+const chart = useChartInstance();
+const position = useCrosshairPosition(chart);
+
+const theme = computed(() => chart.getTheme());
+const dataInterval = computed(() => chart.getDataInterval());
+
+const labelStyle = computed(() => ({
+  // Blend the theme's labelBackground at 80% opacity so the axis grid
+  // shows through — keeps the badge from looking like an opaque block
+  // while still masking whatever tick sits underneath.
+  background: `color-mix(in srgb, ${theme.value.crosshair.labelBackground} 80%, transparent)`,
+  color: theme.value.crosshair.labelTextColor,
+  fontSize: theme.value.axis.fontSize + 'px',
+  fontFamily: theme.value.typography.fontFamily,
+  fontVariantNumeric: 'tabular-nums' as const,
+  padding: '2px 6px',
+  borderRadius: '2px',
+  whiteSpace: 'nowrap' as const,
+  pointerEvents: 'none' as const,
+  // Sit above axis ticks (z:0) but below the YLabel badge (z:3) so the
+  // live last-value stays visible when the crosshair crosses its row.
+  zIndex: 2,
+}));
+</script>
+
+<template>
+  <template v-if="position">
+    <!-- Y label on right axis -->
+    <div
+      :style="{
+        position: 'absolute',
+        right: '0',
+        top: position.mediaY + 'px',
+        transform: 'translateY(-50%)',
+        ...labelStyle,
+      }"
+    >
+      {{ chart.yScale.formatY(position.y) }}
+    </div>
+    <!-- Time label on bottom axis -->
+    <div
+      :style="{
+        position: 'absolute',
+        bottom: '0',
+        left: position.mediaX + 'px',
+        transform: 'translateX(-50%)',
+        ...labelStyle,
+      }"
+    >
+      {{ formatTime(position.time, dataInterval) }}
+    </div>
+  </template>
+</template>

package/src/ui/InfoBar.vue

@@ -0,0 +1,196 @@
+<script setup lang="ts">
+import {
+  type OHLCData,
+  type SeriesSnapshot,
+  type SnapshotSort,
+  type TimePoint,
+  type TooltipFormatter,
+  buildHoverSnapshots,
+  buildLastSnapshots,
+  formatCompact,
+  formatPriceAdaptive,
+  formatTime,
+  resolveCandlestickBodyColor,
+} from '@wick-charts/core';
+import { computed, inject, onMounted, onUnmounted, ref, useSlots } from 'vue';
+
+import { useCrosshairPosition } from '../composables';
+import { InfoBarAnchorKey, ThemeKey, useChartInstance } from '../context';
+
+const props = defineProps<{
+  sort?: SnapshotSort;
+  format?: TooltipFormatter;
+}>();
+
+defineSlots<{
+  default?(ctx: { snapshots: readonly SeriesSnapshot[]; time: number; isHover: boolean }): unknown;
+}>();
+
+// Use computed fallbacks — `withDefaults` is inconsistent for function props.
+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);
+const theme = inject(ThemeKey);
+const anchor = inject(InfoBarAnchorKey);
+
+// Match the "loud failure" contract of other Vue overlays — misuse outside
+// `<ChartContainer>` should throw rather than render nothing silently.
+if (!theme) {
+  throw new Error('<InfoBar> must be used within <ChartContainer>: missing ThemeKey.');
+}
+if (!anchor) {
+  throw new Error('<InfoBar> must be used within <ChartContainer>: missing InfoBarAnchorKey.');
+}
+
+// `bump` re-runs computed values after any overlay-relevant mutation
+// (dataUpdate / seriesChange / setSeriesVisible / setTheme / option changes).
+const bump = ref(0);
+const onOverlayChange = () => {
+  bump.value++;
+};
+onMounted(() => {
+  chart.on('overlayChange', 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);
+});
+
+// Hover-over-the-y-axis gap: the overlay canvas includes the y-axis strip,
+// so a crosshair event fires for offsets past the plotted data. The
+// nearest-time lookup then snaps to an out-of-range timestamp and returns
+// no samples. Falling back to the last-mode snapshots keeps the bar
+// populated (showing last values at 0.6 opacity) instead of blinking out
+// every time the pointer grazes the y-axis.
+const hoverSnapshots = computed<readonly SeriesSnapshot[] | null>(() => {
+  void bump.value;
+  const pos = crosshair.value;
+  if (pos === null) return null;
+
+  return buildHoverSnapshots(chart, { time: pos.time, sort: effectiveSort.value, cacheKey: 'infobar-hover' });
+});
+
+const lastSnapshots = computed<readonly SeriesSnapshot[]>(() => {
+  void bump.value;
+
+  return buildLastSnapshots(chart, { sort: effectiveSort.value, cacheKey: 'infobar-last' });
+});
+
+const isHover = computed(() => hoverSnapshots.value !== null && hoverSnapshots.value.length > 0);
+const snapshots = computed<readonly SeriesSnapshot[]>(() =>
+  isHover.value ? (hoverSnapshots.value as readonly SeriesSnapshot[]) : lastSnapshots.value,
+);
+
+const dataInterval = computed(() => chart.getDataInterval());
+const displayTime = computed(() => {
+  if (snapshots.value.length === 0) return 0;
+  if (isHover.value && crosshair.value) return crosshair.value.time;
+
+  return Math.max(...snapshots.value.map((s) => s.data.time));
+});
+
+const slots = useSlots();
+const hasCustomSlot = computed(() => typeof slots.default === 'function');
+
+function isOHLC(data: OHLCData | TimePoint): data is OHLCData {
+  return 'open' in data;
+}
+</script>
+
+<template>
+  <Teleport v-if="anchor && theme && snapshots.length > 0" :to="anchor">
+    <div
+      data-tooltip-legend=""
+      :style="
+        hasCustomSlot
+          ? {
+              display: 'flex',
+              alignItems: 'center',
+              flexShrink: 0,
+              fontSize: theme.typography.fontSize + 'px',
+              fontFamily: theme.typography.fontFamily,
+              fontVariantNumeric: 'tabular-nums',
+              opacity: isHover ? 1 : 0.6,
+              transition: 'opacity 0.2s ease',
+              pointerEvents: 'none',
+            }
+          : {
+              display: 'flex',
+              alignItems: 'center',
+              gap: '4px',
+              flexWrap: 'wrap',
+              padding: '4px 8px',
+              flexShrink: 0,
+              fontSize: theme.typography.fontSize + 'px',
+              fontFamily: theme.typography.fontFamily,
+              fontVariantNumeric: 'tabular-nums',
+              opacity: isHover ? 1 : 0.6,
+              transition: 'opacity 0.2s ease',
+              pointerEvents: 'none',
+            }
+      "
+    >
+      <slot v-if="hasCustomSlot" :snapshots="snapshots" :time="displayTime" :is-hover="isHover" />
+      <template v-else>
+        <span :style="{ color: theme.axis.textColor, marginRight: '2px' }">
+          {{ formatTime(displayTime, dataInterval) }}
+        </span>
+        <template v-for="s in snapshots" :key="s.id">
+          <span v-if="isOHLC(s.data)" :style="{ display: 'inline-flex', alignItems: 'center', gap: '4px' }">
+            <template
+              v-for="cell in [
+                { label: 'O', field: 'open' as const, val: (s.data as OHLCData).open },
+                { label: 'H', field: 'high' as const, val: (s.data as OHLCData).high },
+                { label: 'L', field: 'low' as const, val: (s.data as OHLCData).low },
+                { label: 'C', field: 'close' as const, val: (s.data as OHLCData).close },
+              ]"
+              :key="cell.label"
+            >
+              <span :style="{ color: theme.axis.textColor, opacity: 0.5, marginLeft: '5px' }">{{ cell.label }}</span>
+              <span
+                :style="{
+                  color: resolveCandlestickBodyColor(
+                    (s.data as OHLCData).close >= (s.data as OHLCData).open
+                      ? theme.candlestick.up.body
+                      : theme.candlestick.down.body,
+                  ),
+                  fontWeight: 500,
+                  marginLeft: '2px',
+                }"
+              >
+                {{ effectiveFormat(cell.val, cell.field) }}
+              </span>
+            </template>
+            <template v-if="(s.data as OHLCData).volume != null">
+              <span :style="{ color: theme.axis.textColor, opacity: 0.5, marginLeft: '5px' }">V</span>
+              <span :style="{ color: theme.axis.textColor, fontWeight: 500, marginLeft: '2px' }">
+                {{ effectiveFormat((s.data as OHLCData).volume!, 'volume') }}
+              </span>
+            </template>
+          </span>
+          <span v-else :style="{ display: 'inline-flex', alignItems: 'center', gap: '3px' }">
+            <span
+              :style="{
+                width: '6px',
+                height: '6px',
+                borderRadius: '50%',
+                background: s.color,
+                flexShrink: 0,
+              }"
+            />
+            <span :style="{ color: s.color, fontWeight: 500 }">
+              {{ effectiveFormat((s.data as TimePoint).value, 'value') }}
+            </span>
+          </span>
+        </template>
+      </template>
+    </div>
+  </Teleport>
+</template>

package/src/ui/Legend.vue

@@ -0,0 +1,302 @@
+<script setup lang="ts">
+import type { ChartInstance, LegendItem } from '@wick-charts/core';
+import { computed, inject, onMounted, onUnmounted, ref, useSlots } from 'vue';
+
+import { LegendAnchorKey, LegendRightAnchorKey, ThemeKey, useChartInstance } from '../context';
+
+/**
+ * Minimal visual shape the {@link LegendProps.items} override accepts. The
+ * canonical {@link LegendItem} (re-exported from `@wick-charts/core`) carries
+ * the full identity + closures; those aren't meaningful for a pre-baked,
+ * non-interactive legend.
+ */
+export interface LegendItemOverride {
+  label: string;
+  color: string;
+}
+
+type LegendMode = 'toggle' | 'isolate' | 'solo';
+
+const props = withDefaults(
+  defineProps<{
+    items?: LegendItemOverride[];
+    position?: 'bottom' | 'right';
+    /** `'isolate'` shows only the clicked item; `'solo'` is a @deprecated alias. */
+    mode?: LegendMode;
+  }>(),
+  {
+    position: 'bottom',
+    mode: 'toggle',
+  },
+);
+
+defineSlots<{
+  default?(ctx: { items: readonly LegendItem[] }): unknown;
+}>();
+
+const chart = useChartInstance();
+const theme = inject(ThemeKey);
+const bottomAnchor = inject(LegendAnchorKey);
+const rightAnchor = inject(LegendRightAnchorKey);
+
+if (!theme) {
+  throw new Error('<Legend> must be used within <ChartContainer>: missing ThemeKey.');
+}
+if (!bottomAnchor || !rightAnchor) {
+  throw new Error('<Legend> must be used within <ChartContainer>: missing legend anchors.');
+}
+
+const anchor = computed(() => (props.position === 'right' ? rightAnchor.value : bottomAnchor.value));
+
+const isolatedId = ref<string | null>(null);
+const bump = ref(0);
+
+const overlayHandler = () => {
+  bump.value++;
+};
+const seriesChangeHandler = () => {
+  isolatedId.value = null;
+};
+
+onMounted(() => {
+  chart.on('overlayChange', overlayHandler);
+  chart.on('seriesChange', seriesChangeHandler);
+  if (chart.getSeriesIds().length > 0) bump.value++;
+});
+
+onUnmounted(() => {
+  chart.off('overlayChange', overlayHandler);
+  chart.off('seriesChange', seriesChangeHandler);
+});
+
+interface MakeItemArgs {
+  id: string;
+  seriesId: string;
+  layerIndex: number | undefined;
+  label: string;
+  color: string;
+  isDisabled: boolean;
+}
+
+function makeItem(args: MakeItemArgs): LegendItem {
+  const { id, seriesId, layerIndex, label, color, isDisabled } = args;
+
+  const toggle = () => {
+    if (layerIndex !== undefined) {
+      chart.setLayerVisible(seriesId, layerIndex, !chart.isLayerVisible(seriesId, layerIndex));
+    } else {
+      chart.setSeriesVisible(seriesId, !chart.isSeriesVisible(seriesId));
+    }
+  };
+
+  const isolate = () => {
+    if (isolatedId.value === id) {
+      chart.batch(() => {
+        for (const sid of chart.getSeriesIds()) {
+          chart.setSeriesVisible(sid, true);
+          const layers = chart.getSeriesLayers(sid);
+          if (layers) {
+            for (let i = 0; i < layers.length; i++) chart.setLayerVisible(sid, i, true);
+          }
+        }
+      });
+      isolatedId.value = null;
+
+      return;
+    }
+
+    chart.batch(() => {
+      for (const sid of chart.getSeriesIds()) {
+        const layers = chart.getSeriesLayers(sid);
+        if (layers) {
+          chart.setSeriesVisible(sid, sid === seriesId);
+          for (let i = 0; i < layers.length; i++) {
+            chart.setLayerVisible(sid, i, sid === seriesId && i === layerIndex);
+          }
+        } else {
+          chart.setSeriesVisible(sid, sid === id);
+        }
+      }
+    });
+    isolatedId.value = id;
+  };
+
+  return { id, seriesId, layerIndex, label, color, isDisabled, toggle, isolate };
+}
+
+function buildLegendItems(c: ChartInstance): LegendItem[] {
+  const items: LegendItem[] = [];
+  for (const seriesId of c.getSeriesIds()) {
+    const layers = c.getSeriesLayers(seriesId);
+    if (layers) {
+      const baseLabel = c.getSeriesLabel(seriesId);
+      for (let layerIndex = 0; layerIndex < layers.length; layerIndex++) {
+        const id = `${seriesId}_layer${layerIndex}`;
+        const visible = c.isSeriesVisible(seriesId) && c.isLayerVisible(seriesId, layerIndex);
+        items.push(
+          makeItem({
+            id,
+            seriesId,
+            layerIndex,
+            label: baseLabel ? `${baseLabel} ${layerIndex + 1}` : `Series ${layerIndex + 1}`,
+            color: layers[layerIndex].color,
+            isDisabled: !visible,
+          }),
+        );
+      }
+    } else {
+      const color = c.getSeriesColor(seriesId);
+      if (!color) continue;
+
+      const label = c.getSeriesLabel(seriesId);
+      const visible = c.isSeriesVisible(seriesId);
+      items.push(
+        makeItem({
+          id: seriesId,
+          seriesId,
+          layerIndex: undefined,
+          label: label ?? 'Series',
+          color,
+          isDisabled: !visible,
+        }),
+      );
+    }
+  }
+
+  return items;
+}
+
+const legendItems = computed<LegendItem[]>(() => {
+  void bump.value;
+  void isolatedId.value;
+
+  return buildLegendItems(chart);
+});
+
+const slots = useSlots();
+const hasCustomSlot = computed(() => typeof slots.default === 'function');
+
+function handleClick(item: LegendItem) {
+  if (props.mode === 'isolate' || props.mode === 'solo') item.isolate();
+  else item.toggle();
+}
+</script>
+
+<template>
+  <Teleport v-if="anchor && theme" :to="anchor">
+    <div
+      v-if="hasCustomSlot && legendItems.length > 0"
+      :data-legend="position"
+      :style="{
+        display: 'flex',
+        flexDirection: position === 'right' ? 'column' : 'row',
+        flexWrap: 'wrap',
+        gap: position === 'right' ? '6px' : '14px',
+        padding: position === 'right' ? '8px 6px' : '6px 8px',
+        alignItems: position === 'right' ? 'flex-start' : 'center',
+        justifyContent: position === 'right' ? 'flex-start' : 'center',
+        fontFamily: theme.typography.fontFamily,
+        fontSize: theme.axis.fontSize + 'px',
+        color: theme.axis.textColor,
+        pointerEvents: 'auto',
+        flexShrink: 0,
+      }"
+    >
+      <slot :items="legendItems" />
+    </div>
+
+    <div
+      v-else-if="items && items.length > 0"
+      :data-legend="position"
+      :style="{
+        display: 'flex',
+        flexDirection: position === 'right' ? 'column' : 'row',
+        flexWrap: 'wrap',
+        gap: position === 'right' ? '6px' : '14px',
+        padding: position === 'right' ? '8px 6px' : '6px 8px',
+        alignItems: position === 'right' ? 'flex-start' : 'center',
+        justifyContent: position === 'right' ? 'flex-start' : 'center',
+        fontFamily: theme.typography.fontFamily,
+        fontSize: theme.axis.fontSize + 'px',
+        color: theme.axis.textColor,
+        pointerEvents: 'auto',
+        flexShrink: 0,
+      }"
+    >
+      <div
+        v-for="(item, i) in items"
+        :key="i"
+        :style="{
+          display: 'flex',
+          alignItems: 'center',
+          gap: '4px',
+          userSelect: 'none',
+        }"
+      >
+        <span
+          :style="{
+            width: '8px',
+            height: '8px',
+            borderRadius: '2px',
+            background: item.color,
+            flexShrink: 0,
+          }"
+        />
+        <span style="white-space: nowrap">{{ item.label }}</span>
+      </div>
+    </div>
+
+    <div
+      v-else-if="legendItems.length > 0"
+      :data-legend="position"
+      :style="{
+        display: 'flex',
+        flexDirection: position === 'right' ? 'column' : 'row',
+        flexWrap: 'wrap',
+        gap: position === 'right' ? '6px' : '14px',
+        padding: position === 'right' ? '8px 6px' : '6px 8px',
+        alignItems: position === 'right' ? 'flex-start' : 'center',
+        justifyContent: position === 'right' ? 'flex-start' : 'center',
+        fontFamily: theme.typography.fontFamily,
+        fontSize: theme.axis.fontSize + 'px',
+        color: theme.axis.textColor,
+        pointerEvents: 'auto',
+        flexShrink: 0,
+      }"
+    >
+      <button
+        v-for="item in legendItems"
+        :key="item.id"
+        type="button"
+        @click="handleClick(item)"
+        :style="{
+          display: 'flex',
+          alignItems: 'center',
+          gap: '4px',
+          cursor: 'pointer',
+          opacity: item.isDisabled ? 0.35 : 1,
+          transition: 'opacity 0.15s ease',
+          userSelect: 'none',
+          border: 'none',
+          background: 'transparent',
+          padding: 0,
+          margin: 0,
+          font: 'inherit',
+          color: 'inherit',
+          textAlign: 'left',
+        }"
+      >
+        <span
+          :style="{
+            width: '8px',
+            height: '8px',
+            borderRadius: '2px',
+            background: item.color,
+            flexShrink: 0,
+          }"
+        />
+        <span style="white-space: nowrap">{{ item.label }}</span>
+      </button>
+    </div>
+  </Teleport>
+</template>

package/src/ui/NumberFlow.vue

@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue';
+
+const props = withDefaults(
+  defineProps<{
+    value: number;
+    /** Value-to-string formatter. Defaults to the current locale's `Intl.NumberFormat`. */
+    format?: (value: number) => string;
+    locale?: string;
+    spinDuration?: number;
+  }>(),
+  {
+    locale: 'en-US',
+    spinDuration: 350,
+  },
+);
+
+const mounted = ref(false);
+onMounted(() => {
+  mounted.value = true;
+});
+
+const defaultFormat = computed(() => {
+  const nf = new Intl.NumberFormat(props.locale);
+  return (v: number) => nf.format(v);
+});
+
+interface CharPart {
+  type: 'digit' | 'symbol';
+  value: string;
+}
+
+const parts = computed<CharPart[]>(() => {
+  const fn = props.format ?? defaultFormat.value;
+  const formatted = fn(props.value);
+  const result: CharPart[] = [];
+  for (const char of formatted) {
+    if (char >= '0' && char <= '9') {
+      result.push({ type: 'digit', value: char });
+    } else {
+      result.push({ type: 'symbol', value: char });
+    }
+  }
+  return result;
+});
+
+const digits = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
+</script>
+
+<template>
+  <span
+    :style="{
+      display: 'inline-flex',
+      fontVariantNumeric: 'tabular-nums',
+      lineHeight: 1.2,
+    }"
+  >
+    <template v-for="(part, i) in parts" :key="i">
+      <!-- Digit slot with spinner -->
+      <span
+        v-if="part.type === 'digit'"
+        :style="{
+          display: 'inline-block',
+          height: '1.2em',
+          overflow: 'hidden',
+          position: 'relative',
+        }"
+      >
+        <span
+          :style="{
+            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)'
+              : 'none',
+          }"
+        >
+          <span
+            v-for="d in digits"
+            :key="d"
+            :style="{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              height: '1.2em',
+            }"
+          >{{ d }}</span>
+        </span>
+      </span>
+      <!-- Symbol (non-digit) -->
+      <span
+        v-else
+        :style="{ display: 'inline-block' }"
+      >{{ part.value }}</span>
+    </template>
+  </span>
+</template>