@wick-charts/vue 0.2.2 → 0.3.0

package/src/ui/PieLegend.vue

@@ -0,0 +1,126 @@
+<script setup lang="ts">
+import { type ChartInstance, type SliceInfo, type ValueFormatter, formatCompact } from '@wick-charts/core';
+import { computed, onMounted, onUnmounted, ref, useSlots } from 'vue';
+
+import { useChartInstance, useTheme } from '../context';
+
+type PieLegendMode = 'value' | 'percent' | 'both';
+
+const props = withDefaults(
+  defineProps<{
+    /**
+     * Owning series id. **Optional** — when omitted, the first visible pie
+     * series is picked.
+     */
+    seriesId?: string;
+    /** 'value' shows only the value, 'percent' only the percent, 'both' shows both. Default: 'both'. */
+    mode?: PieLegendMode;
+    /** Custom formatter for the absolute slice value. */
+    format?: ValueFormatter;
+  }>(),
+  {
+    mode: undefined,
+    format: undefined,
+  },
+);
+
+defineSlots<{
+  default?(ctx: { slices: readonly SliceInfo[]; mode: PieLegendMode; format: ValueFormatter }): unknown;
+}>();
+
+const resolvedMode = computed<PieLegendMode>(() => props.mode ?? 'both');
+const resolvedFormat = computed<ValueFormatter>(() => props.format ?? formatCompact);
+
+const chart = useChartInstance();
+const themeRef = useTheme();
+const slots = useSlots();
+const hasCustomSlot = computed(() => typeof slots.default === 'function');
+
+const bump = ref(0);
+const handler = () => {
+  bump.value++;
+};
+onMounted(() => {
+  chart.on('overlayChange', handler);
+  if (chart.getSeriesIds().length > 0) bump.value++;
+});
+onUnmounted(() => {
+  chart.off('overlayChange', handler);
+});
+
+function resolvePieSeriesId(c: ChartInstance, explicit: string | undefined): string | null {
+  if (explicit !== undefined) return explicit;
+
+  const pies = c.getSeriesIdsByType('pie', { visibleOnly: true });
+
+  return pies.length > 0 ? pies[0] : null;
+}
+
+const theme = computed(() => themeRef.value);
+const resolvedId = computed<string | null>(() => {
+  void bump.value;
+
+  return resolvePieSeriesId(chart, props.seriesId);
+});
+const slices = computed<readonly SliceInfo[]>(() => {
+  void bump.value;
+  if (resolvedId.value === null) return [];
+
+  return chart.getSliceInfo(resolvedId.value) ?? [];
+});
+</script>
+
+<template>
+  <slot
+    v-if="hasCustomSlot && slices.length > 0"
+    :slices="slices"
+    :mode="resolvedMode"
+    :format="resolvedFormat"
+  />
+  <div
+    v-else-if="slices.length > 0"
+    :style="{
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '6px',
+      padding: '8px 12px',
+      fontFamily: theme.typography.fontFamily,
+      fontSize: theme.typography.fontSize + 'px',
+      color: theme.tooltip.textColor,
+      pointerEvents: 'auto',
+    }"
+  >
+    <div
+      v-for="(slice, i) in slices"
+      :key="i"
+      :style="{ display: 'flex', alignItems: 'center', gap: '10px' }"
+    >
+      <span :style="{ width: '10px', height: '10px', borderRadius: '50%', background: slice.color, flexShrink: 0 }" />
+      <span :style="{ flex: 1, opacity: 0.8 }">{{ slice.label }}</span>
+      <span
+        v-if="resolvedMode === 'value' || resolvedMode === 'both'"
+        :style="{
+          fontWeight: 600,
+          fontVariantNumeric: 'tabular-nums',
+          minWidth: resolvedMode === 'value' ? '40px' : undefined,
+          textAlign: 'right',
+        }"
+      >
+        {{ resolvedFormat(slice.value) }}
+      </span>
+      <span
+        v-if="resolvedMode === 'percent' || resolvedMode === 'both'"
+        :style="{
+          opacity: resolvedMode === 'percent' ? 1 : 0.5,
+          fontWeight: resolvedMode === 'percent' ? 600 : 400,
+          fontSize: (resolvedMode === 'percent' ? theme.typography.fontSize : theme.axis.fontSize) + 'px',
+          fontVariantNumeric: 'tabular-nums',
+          minWidth: '40px',
+          textAlign: 'right',
+        }"
+      >
+        {{ slice.percent.toFixed(1) }}%
+      </span>
+    </div>
+  </div>
+</template>

package/src/ui/PieTooltip.vue

@@ -0,0 +1,200 @@
+<script setup lang="ts">
+import {
+  type ChartInstance,
+  type HoverInfo,
+  type ValueFormatter,
+  computeTooltipPosition,
+  formatCompact,
+} from '@wick-charts/core';
+import { computed, onMounted, onUnmounted, ref, useSlots, watchEffect } from 'vue';
+
+import { useCrosshairPosition } from '../composables';
+import { useChartInstance } from '../context';
+
+const DEFAULT_TOOLTIP_WIDTH = 160;
+const DEFAULT_TOOLTIP_HEIGHT = 70;
+
+const props = defineProps<{
+  /**
+   * Owning series id. **Optional** — when omitted, the first visible pie
+   * series is picked.
+   */
+  seriesId?: string;
+  /** Custom formatter for the slice value. Default: shared `formatCompact`. */
+  format?: ValueFormatter;
+}>();
+
+defineSlots<{
+  default?(ctx: { info: HoverInfo; format: ValueFormatter }): unknown;
+}>();
+
+const effectiveFormat = computed<ValueFormatter>(() => props.format ?? formatCompact);
+
+const chart = useChartInstance();
+const crosshair = useCrosshairPosition(chart);
+const slots = useSlots();
+const hasCustomSlot = computed(() => typeof slots.default === 'function');
+
+const bump = ref(0);
+const handler = () => {
+  bump.value++;
+};
+onMounted(() => {
+  chart.on('overlayChange', handler);
+});
+onUnmounted(() => {
+  chart.off('overlayChange', handler);
+});
+
+function resolvePieSeriesId(c: ChartInstance, explicit: string | undefined): string | null {
+  if (explicit !== undefined) return explicit;
+
+  const pies = c.getSeriesIdsByType('pie', { visibleOnly: true });
+
+  return pies.length > 0 ? pies[0] : null;
+}
+
+const theme = computed(() => {
+  // `setTheme` fires `overlayChange`; read `bump` so this computed picks up
+  // runtime theme swaps instead of freezing on the first-render snapshot.
+  void bump.value;
+
+  return chart.getTheme();
+});
+const resolvedId = computed<string | null>(() => {
+  void bump.value;
+
+  return resolvePieSeriesId(chart, props.seriesId);
+});
+
+const info = computed<HoverInfo | null>(() => {
+  void crosshair.value;
+  void bump.value;
+  if (resolvedId.value === null) return null;
+
+  return chart.getHoverInfo(resolvedId.value);
+});
+
+// Custom-slot measurement — unknown content dimensions mean we can't
+// pre-compute `tooltipWidth/Height`. Observe the container, then recompute
+// the position once measured so user-rendered tooltips flip/clamp correctly
+// instead of overflowing with the hardcoded 160×70 defaults.
+const containerRef = ref<HTMLDivElement | null>(null);
+const measuredSize = ref<{ width: number; height: number } | null>(null);
+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 tooltipPos = computed(() => {
+  if (!crosshair.value || !info.value) return null;
+  const mediaSize = chart.getMediaSize();
+
+  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: mediaSize.width,
+      chartHeight: mediaSize.height,
+      tooltipWidth: size.width,
+      tooltipHeight: size.height,
+      offsetX: 16,
+      offsetY: 16,
+    });
+  }
+
+  return computeTooltipPosition({
+    x: crosshair.value.mediaX,
+    y: crosshair.value.mediaY,
+    chartWidth: mediaSize.width,
+    chartHeight: mediaSize.height,
+    tooltipWidth: DEFAULT_TOOLTIP_WIDTH,
+    tooltipHeight: DEFAULT_TOOLTIP_HEIGHT,
+    offsetX: 16,
+    offsetY: 16,
+  });
+});
+</script>
+
+<template>
+  <div
+    v-if="info && crosshair && tooltipPos && !hasCustomSlot"
+    :style="{
+      position: 'absolute',
+      left: tooltipPos.left + 'px',
+      top: tooltipPos.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.typography.fontSize + 'px',
+      fontFamily: theme.typography.fontFamily,
+      color: theme.tooltip.textColor,
+      zIndex: 10,
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '6px',
+    }"
+  >
+    <div :style="{ display: 'flex', alignItems: 'center', gap: '8px' }">
+      <span
+        :style="{
+          width: '10px',
+          height: '10px',
+          borderRadius: '50%',
+          background: info.color,
+          flexShrink: 0,
+        }"
+      />
+      <span :style="{ fontWeight: 600 }">{{ info.label }}</span>
+    </div>
+    <div :style="{ display: 'flex', justifyContent: 'space-between', gap: '16px' }">
+      <span :style="{ opacity: 0.6 }">{{ effectiveFormat(info.value) }}</span>
+      <span :style="{ fontWeight: 600 }">{{ info.percent.toFixed(1) }}%</span>
+    </div>
+  </div>
+
+  <div
+    v-if="info && crosshair && tooltipPos && hasCustomSlot"
+    ref="containerRef"
+    :data-measured="measuredSize !== null ? 'true' : 'false'"
+    :style="{
+      position: 'absolute',
+      left: tooltipPos.left + 'px',
+      top: tooltipPos.top + 'px',
+      pointerEvents: 'none',
+      zIndex: 10,
+      width: 'max-content',
+      maxWidth: chart.getMediaSize().width + 'px',
+      boxSizing: 'border-box',
+      visibility: measuredSize !== null ? 'visible' : 'hidden',
+    }"
+  >
+    <slot :info="info" :format="effectiveFormat" />
+  </div>
+</template>

package/src/ui/TimeAxis.vue

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import { formatTime, resolveAxisFontSize, resolveAxisTextColor } from '@wick-charts/core';
+import { computed } from 'vue';
+
+import { useVisibleRange } from '../composables';
+import { useChartInstance } from '../context';
+
+interface TrackedTick {
+  opacity: number;
+  addedAt: number;
+}
+
+const chart = useChartInstance();
+const _visibleRange = useVisibleRange(chart);
+
+const tickMap = new Map<number, TrackedTick>();
+
+const theme = computed(() => chart.getTheme());
+
+const tickData = computed(() => {
+  // Access _visibleRange.value to track dependency
+  void _visibleRange.value;
+
+  const dataInterval = chart.getDataInterval();
+  const { ticks: currentTicks, tickInterval } = chart.timeScale.niceTickValues(dataInterval);
+  const currentSet = new Set(currentTicks);
+  const now = performance.now();
+
+  // Mark current ticks as visible
+  for (const t of currentTicks) {
+    if (!tickMap.has(t)) {
+      tickMap.set(t, { opacity: 1, addedAt: now });
+    } else {
+      tickMap.get(t)!.opacity = 1;
+    }
+  }
+
+  // Mark missing ticks for fade-out
+  for (const [t, entry] of tickMap) {
+    if (!currentSet.has(t)) {
+      entry.opacity = 0;
+    }
+  }
+
+  // Clean up old faded-out ticks
+  for (const [t, entry] of tickMap) {
+    if (entry.opacity === 0 && now - entry.addedAt > 5000) {
+      tickMap.delete(t);
+    }
+  }
+
+  return {
+    allTicks: Array.from(tickMap.entries()),
+    tickInterval,
+  };
+});
+</script>
+
+<template>
+  <div
+    :style="{
+      position: 'absolute',
+      left: '0',
+      bottom: '0',
+      right: chart.yAxisWidth + 'px',
+      height: chart.xAxisHeight + 'px',
+      pointerEvents: 'none',
+      display: 'flex',
+      alignItems: 'center',
+    }"
+  >
+    <span
+      v-for="[time, entry] in tickData.allTicks"
+      :key="time"
+      :style="{
+        position: 'absolute',
+        left: chart.timeScale.timeToX(time) + 'px',
+        transform: 'translateX(-50%)',
+        color: resolveAxisTextColor(theme, 'x'),
+        fontSize: resolveAxisFontSize(theme, 'x') + 'px',
+        fontFamily: theme.typography.fontFamily,
+        userSelect: 'none',
+        whiteSpace: 'nowrap',
+        opacity: entry.opacity,
+        transition: 'opacity 0.3s ease',
+        willChange: 'opacity',
+      }"
+    >
+      {{ formatTime(time, tickData.tickInterval) }}
+    </span>
+  </div>
+</template>

package/src/ui/Title.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { inject } from 'vue';
+
+import { ThemeKey, TitleAnchorKey } from '../context';
+
+withDefaults(
+  defineProps<{
+    sub?: string;
+  }>(),
+  {},
+);
+
+const anchor = inject(TitleAnchorKey);
+const theme = inject(ThemeKey);
+
+// Match the "loud failure" contract of other Vue overlays (`useChartInstance`,
+// `useTheme`) — misuse outside `<ChartContainer>` should throw, not render
+// nothing silently.
+if (!anchor) {
+  throw new Error('<Title> must be used within <ChartContainer>: missing TitleAnchorKey.');
+}
+if (!theme) {
+  throw new Error('<Title> must be used within <ChartContainer>: missing ThemeKey.');
+}
+</script>
+
+<template>
+  <Teleport v-if="anchor" :to="anchor">
+    <div
+      data-chart-title=""
+      :style="{
+        display: 'flex',
+        alignItems: 'baseline',
+        gap: '6px',
+        padding: '6px 8px 4px',
+        flexShrink: 0,
+        fontFamily: theme.typography.fontFamily,
+        fontSize: theme.typography.fontSize + 'px',
+        fontWeight: 600,
+        color: theme.tooltip.textColor,
+        pointerEvents: 'none',
+      }"
+    >
+      <span><slot /></span>
+      <span
+        v-if="sub"
+        :style="{
+          fontWeight: 400,
+          color: theme.axis.textColor,
+          fontSize: theme.axis.fontSize + 'px',
+        }"
+      >
+        {{ sub }}
+      </span>
+    </div>
+  </Teleport>
+</template>