@orvui/vue 0.0.0-stage → 0.1.1

package/src/charts/price-target-fan/src/PriceTargetFanTargets.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import { motion } from "motion-v";
+import { EASE_OUT, SPRING_PANEL } from "../../../lib/ease";
+import { usePriceTargetFan } from "./context";
+import { ink } from "./utils";
+const chart = usePriceTargetFan();
+function toggle(index: number) {
+  chart.setHotT(chart.hotT === index ? null : index);
+}
+function touch(event: PointerEvent, index: number) {
+  if (event.pointerType === "touch") {
+    event.preventDefault();
+    toggle(index);
+  }
+}
+function keydown(event: KeyboardEvent, index: number) {
+  if (event.key === "Escape") {
+    event.preventDefault();
+    chart.setActive(null);
+  } else if (event.key === "Enter" || event.key === " ") {
+    event.preventDefault();
+    toggle(index);
+  }
+}
+</script>
+<template>
+  <g
+    ><g :clip-path="`url(#${chart.clipId})`"
+      ><motion.g
+        v-for="(target, index) in chart.geo.proj"
+        :key="target.key"
+        role="button"
+        tabindex="0"
+        :aria-label="`${target.key} target ${chart.fmt(target.price)}, ${target.analysts} analysts`"
+        class="outline-none"
+        :aria-pressed="chart.hotT === index"
+        :aria-describedby="chart.hotT === index ? chart.tooltipId : undefined"
+        :initial="{ opacity: 1 }"
+        :animate="{
+          opacity: chart.hotT !== null && chart.hotT !== index ? 0.3 : 1,
+        }"
+        :transition="
+          chart.reduce ? { duration: 0 } : { duration: 0.25, ease: EASE_OUT }
+        "
+        @focus="chart.setHotT(index)"
+        @blur="chart.setHotT(null)"
+        @pointerenter="chart.setHotT(index)"
+        @pointerdown="touch($event, index)"
+        @keydown="keydown($event, index)"
+        ><path
+          :d="target.d"
+          fill="none"
+          stroke="transparent"
+          stroke-width="16"
+        /><path
+          :d="target.d"
+          fill="none"
+          :stroke="target.color"
+          :stroke-width="chart.hotT === index ? 2.2 : 1.4"
+          :stroke-opacity="chart.hotT === index ? 1 : 0.75"
+          stroke-dasharray="2 4"
+          stroke-linecap="round"
+        /><motion.path
+          v-if="chart.hotT === index"
+          :d="target.d"
+          fill="none"
+          :stroke="target.color"
+          stroke-width="2.2"
+          stroke-linecap="round"
+          :initial="{ pathLength: chart.reduce ? 1 : 0 }"
+          :animate="{ pathLength: 1 }"
+          :transition="
+            chart.reduce ? { duration: 0 } : { duration: 0.35, ease: EASE_OUT }
+          "
+        /><motion.circle
+          :cx="chart.geo.endX"
+          :cy="target.ty"
+          fill="var(--background)"
+          :stroke="target.color"
+          stroke-width="1.6"
+          r="3.2"
+          :animate="{ r: chart.hotT === index ? 4.5 : 3.2 }"
+          :transition="chart.reduce ? { duration: 0 } : SPRING_PANEL"
+        /><text
+          :x="chart.geo.endX + 10"
+          :y="target.ty + 4"
+          font-size="11"
+          font-weight="600"
+          :fill="ink(target.color)"
+          class="font-mono tabular-nums"
+          >{{ target.price }}</text
+        ></motion.g
+      ></g
+    ></g
+  >
+</template>

package/src/charts/price-target-fan/src/PriceTargetFanTooltip.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { AnimatePresence, motion } from "motion-v";
+import { SPRING_PANEL } from "../../../lib/ease";
+import { usePriceTargetFan } from "./context";
+import { H, W, ink } from "./utils";
+const chart = usePriceTargetFan();
+</script>
+<template>
+  <AnimatePresence
+    ><motion.div
+      v-if="chart.overlay"
+      :id="chart.tooltipId"
+      role="tooltip"
+      class="pointer-events-none absolute z-20 w-40 rounded-xl border border-border bg-popover p-3 text-xs shadow-lg"
+      :style="{
+        left:
+          Math.max(0, Math.min(65, (chart.overlay.px / W) * 100 - 20)) + '%',
+        top: Math.max(0, (chart.overlay.py / H) * 100 - 40) + '%',
+      }"
+      :initial="{ opacity: 0, scale: 0.96 }"
+      :animate="{ opacity: 1, scale: 1 }"
+      :exit="{ opacity: 0, scale: 0.96 }"
+      :transition="chart.reduce ? { duration: 0 } : SPRING_PANEL"
+      ><slot :overlay="chart.overlay"
+        ><p class="mb-2 text-[10px] text-muted-foreground">
+          {{ chart.overlay.title }}
+        </p>
+        <div
+          v-for="metric in chart.overlay.metrics"
+          :key="metric.label"
+          class="flex justify-between gap-4 py-1"
+        >
+          <span class="text-muted-foreground">{{ metric.label }}</span
+          ><span class="font-mono">{{ metric.value }}</span>
+        </div>
+        <div
+          v-if="chart.overlay.accent"
+          class="mt-1 flex justify-between gap-4 border-t border-border pt-2"
+        >
+          <span class="text-muted-foreground">{{
+            chart.overlay.accent.label
+          }}</span
+          ><span
+            class="font-mono"
+            :style="{ color: ink(chart.overlay.accent.color) }"
+            >{{ chart.overlay.accent.value }}</span
+          >
+        </div></slot
+      ></motion.div
+    ></AnimatePresence
+  >
+</template>

package/src/charts/price-target-fan/src/context.ts

@@ -0,0 +1,150 @@
+import { computed, ref, useId, watch } from "vue";
+import { useMediaQuery, useReducedMotion } from "../../../lib/composables";
+import { context, selection, unwrapModel } from "../../shared";
+import type { PriceTargetFanProps, PriceTargetFanActive } from "./types";
+import { fmtScrubDate, H, W } from "./utils";
+import { buildPriceTargetGeometry, nearestProjection } from "./geometry";
+export function createPriceTargetModel(
+  props: PriceTargetFanProps,
+  emit: (event: any, ...args: any[]) => void,
+) {
+  const reduce = useReducedMotion(),
+    canHover = useMediaQuery("(hover: hover)");
+  const requested = selection(
+    () => props.active,
+    props.defaultActive ?? null,
+    (value) => {
+      emit("update:active", value);
+      emit("activeChange", value);
+    },
+  );
+  const clipId = useId().replace(/[^\w-]/g, ""),
+    fadeId = clipId + "-fade",
+    tooltipId = useId(),
+    svgRef = ref<SVGSVGElement | null>(null);
+  const geometry = computed(() => buildPriceTargetGeometry(props));
+  function setActive(value: PriceTargetFanActive | null) {
+    requested.value = value;
+  }
+  function setHotT(index: number | null) {
+    setActive(
+      index === null ? null : { type: "target", key: props.targets[index].key },
+    );
+  }
+  function setScrub(index: number | null) {
+    setActive(
+      index === null
+        ? null
+        : { type: "history", date: geometry.value.history[index].date },
+    );
+  }
+  function onMove(event: PointerEvent) {
+    if (!canHover.value || event.pointerType === "touch" || !svgRef.value)
+      return;
+    const rect = svgRef.value.getBoundingClientRect();
+    if (!rect.width || !rect.height) return;
+    const data = geometry.value,
+      x = ((event.clientX - rect.left) / rect.width) * W;
+    if (x > data.geo.nowX + 6) {
+      setHotT(
+        nearestProjection(
+          data,
+          x,
+          ((event.clientY - rect.top) / rect.height) * H,
+        ),
+      );
+      return;
+    }
+    if (!data.hist.length || x > data.geo.nowX - 6) {
+      setActive(null);
+      return;
+    }
+    let nearest = 0;
+    for (let index = 1; index < data.hist.length; index++)
+      if (Math.abs(data.geo.hx(index) - x) < Math.abs(data.geo.hx(nearest) - x))
+        nearest = index;
+    setScrub(nearest);
+  }
+  const model = computed(() => {
+    const data = geometry.value,
+      raw = requested.value;
+    const targetIndex =
+      raw?.type === "target"
+        ? data.targets.findIndex((target) => target.key === raw.key)
+        : -1;
+    const historyIndex =
+      raw?.type === "history"
+        ? data.history.findIndex((point) => point.date === raw.date)
+        : -1;
+    const active = targetIndex >= 0 || historyIndex >= 0 ? raw : null;
+    const hotT = targetIndex < 0 ? null : targetIndex,
+      scrub = historyIndex < 0 ? null : historyIndex;
+    let overlay: {
+      px: number;
+      py: number;
+      title: string;
+      metrics: { label: string; value: string }[];
+      accent: { label: string; value: string; color: string } | null;
+    } | null = null;
+    if (hotT !== null) {
+      const target = data.geo.proj[hotT];
+      overlay = {
+        px: data.geo.endX,
+        py: target.ty,
+        title: `${target.key} target${data.dates.horizon ? " · " + data.dates.horizon : ""}`,
+        metrics: [
+          { label: "Price", value: data.fmt(target.price) },
+          { label: "Analysts", value: String(target.analysts) },
+        ],
+        accent: {
+          label: "vs now",
+          value: `${target.price >= data.current ? "+" : "−"}${Math.abs(data.pct(target.price)).toFixed(1)}%`,
+          color: target.color,
+        },
+      };
+    } else if (scrub !== null)
+      overlay = {
+        px: data.geo.hx(scrub),
+        py: data.y(data.hist[scrub]),
+        title: fmtScrubDate.format(new Date(data.history[scrub].date)),
+        metrics: [{ label: "Price", value: data.fmt(data.hist[scrub]) }],
+        accent: null,
+      };
+    const mean = data.targets[1],
+      head =
+        hotT === null
+          ? { key: mean.key, price: mean.price, color: undefined }
+          : data.geo.proj[hotT];
+    return {
+      ...data,
+      reduce: reduce.value,
+      clipId,
+      fadeId,
+      svgRef,
+      tooltipId,
+      active,
+      setActive,
+      scrub,
+      hotT,
+      setHotT,
+      setScrub,
+      label: props.label ?? "Price target · 12 months",
+      overlay,
+      mean,
+      head,
+      headPct: data.pct(head.price),
+      onMove,
+    };
+  });
+  watch(
+    () => model.value.active,
+    (value) => {
+      if (!value && requested.value && props.active === undefined)
+        requested.value = null;
+    },
+  );
+  return unwrapModel(model);
+}
+export const priceTargetContext =
+  context<ReturnType<typeof createPriceTargetModel>>("PriceTargetFan");
+export const usePriceTargetFan = priceTargetContext.use;

package/src/charts/price-target-fan/src/geometry.ts

@@ -0,0 +1,127 @@
+import type { PriceTargetFanProps } from "./types";
+import { H, LOW, MID, PAD, UP, W } from "./utils";
+export function buildPriceTargetGeometry(props: PriceTargetFanProps) {
+  const history = props.history ?? [],
+    targets = props.targets,
+    current = props.current;
+  let previous = -Infinity;
+  const times: number[] = [],
+    hist: number[] = [];
+  for (const point of history) {
+    const timestamp = Date.parse(point.date);
+    if (
+      !/^\d{4}-\d{2}-\d{2}(?:T.*(?:Z|[+-]\d{2}:\d{2}))?$/.test(point.date) ||
+      !Number.isFinite(timestamp) ||
+      timestamp <= previous ||
+      !Number.isFinite(point.price) ||
+      point.price <= 0
+    )
+      throw new RangeError(
+        "PriceTargetFan history must contain positive prices and ascending, unique ISO dates",
+      );
+    previous = timestamp;
+    times.push(timestamp);
+    hist.push(point.price);
+  }
+  if (
+    !Number.isFinite(current) ||
+    current <= 0 ||
+    targets.length !== 3 ||
+    targets.some(
+      (target) => !Number.isFinite(target.price) || target.price <= 0,
+    ) ||
+    new Set(targets.map((target) => target.key)).size !== 3
+  )
+    throw new RangeError(
+      "PriceTargetFan requires a positive current price and three positive targets with unique keys",
+    );
+  let low = current,
+    high = current;
+  for (const value of hist) {
+    low = Math.min(low, value);
+    high = Math.max(high, value);
+  }
+  for (const target of targets) {
+    low = Math.min(low, target.price);
+    high = Math.max(high, target.price);
+  }
+  const padding = Math.max((high - low) * 0.06, 0.5),
+    min = low - padding,
+    max = high + padding;
+  const y = (value: number) =>
+    PAD.t + (1 - (value - min) / (max - min)) * (H - PAD.t - PAD.b);
+  const pct = (price: number) => ((price - current) / current) * 100,
+    fmt = (price: number) => "$" + price.toFixed(2);
+  const historyWidth = (W - PAD.l - PAD.r) * 0.56,
+    nowX = PAD.l + historyWidth,
+    nowY = y(current),
+    endX = W - PAD.r;
+  const first = times[0] ?? 0,
+    last = times.at(-1) ?? first;
+  const hx = (index: number) =>
+    last === first
+      ? nowX - 12
+      : PAD.l + ((times[index] - first) / (last - first)) * (historyWidth - 12);
+  const line =
+    hist
+      .map(
+        (price, index) =>
+          `${index ? "L" : "M"}${hx(index).toFixed(1)},${y(price).toFixed(1)}`,
+      )
+      .join(" ") + (hist.length ? ` L${nowX},${nowY}` : "");
+  const palette = [UP, MID, LOW];
+  const proj = targets.map((target, index) => {
+    const ty = y(target.price),
+      cx = nowX + (endX - nowX) * 0.5,
+      cy = nowY + (ty - nowY) * 0.15;
+    return {
+      ...target,
+      color: target.color ?? palette[index],
+      ty,
+      cx,
+      cy,
+      d: `M${nowX},${nowY} Q${cx},${cy} ${endX},${ty}`,
+    };
+  });
+  const span = max - min,
+    magnitude = 10 ** Math.floor(Math.log10(span / 3.2));
+  const step =
+    [1, 2, 2.5, 5, 10]
+      .map((factor) => factor * magnitude)
+      .find((candidate) => span / candidate <= 4.2) ?? 10 * magnitude;
+  const out: number[] = [];
+  for (let tick = Math.ceil(min / step) * step; tick <= max; tick += step)
+    out.push(tick);
+  return {
+    hist,
+    history,
+    targets,
+    current,
+    dates: props.dates ?? {},
+    y,
+    pct,
+    fmt,
+    geo: { hx, nowX, nowY, endX, line, proj },
+    gridVals: { step, out },
+  };
+}
+export function nearestProjection(
+  geometry: ReturnType<typeof buildPriceTargetGeometry>,
+  x: number,
+  y: number,
+) {
+  const { nowX, nowY, endX, proj } = geometry.geo,
+    progress = Math.min(1, (x - nowX) / (endX - nowX));
+  const samples = proj.map(
+    (target) =>
+      (1 - progress) * (1 - progress) * nowY +
+      2 * (1 - progress) * progress * target.cy +
+      progress * progress * target.ty,
+  );
+  if (Math.max(...samples) - Math.min(...samples) < 24) return null;
+  let selected = 0;
+  for (let index = 1; index < samples.length; index++)
+    if (Math.abs(y - samples[index]) < Math.abs(y - samples[selected]))
+      selected = index;
+  return selected;
+}

package/src/charts/price-target-fan/src/types.ts

@@ -0,0 +1,32 @@
+export interface PriceTarget {
+  key: string;
+  price: number;
+  analysts: number;
+  /** Any CSS color; the projection, its dot and its label take it. */
+  color?: string;
+}
+
+export interface PriceHistoryPoint {
+  date: string;
+  price: number;
+}
+
+export type PriceTargetFanActive =
+  { type: "history"; date: string } | { type: "target"; key: string };
+
+export interface PriceTargetFanProps {
+  /** Accessible name of the chart. */
+  label?: string;
+  /** Last traded price; the history walks to this point. */
+  current: number;
+  /** High, mean and low targets, in that order. */
+  targets: [PriceTarget, PriceTarget, PriceTarget];
+  /** Axis labels, oldest to horizon. */
+  dates?: { start?: string; mid?: string; horizon?: string };
+  /** Actual prices, oldest first, using ISO dates. Empty history renders only the current price and targets. */
+  history?: PriceHistoryPoint[];
+  active?: PriceTargetFanActive | null;
+  defaultActive?: PriceTargetFanActive | null;
+  onActiveChange?: (active: PriceTargetFanActive | null) => void;
+  className?: string;
+}

package/src/charts/price-target-fan/src/utils.ts

@@ -0,0 +1,22 @@
+import type { PriceHistoryPoint } from "./types";
+export const fmtScrubDate = new Intl.DateTimeFormat("en-US", {
+  timeZone: "UTC",
+  weekday: "short",
+  month: "short",
+  day: "numeric",
+});
+export const UP = "var(--success)",
+  MID = "var(--accent)",
+  LOW = "var(--warning)";
+export const W = 520,
+  H = 236,
+  PAD = { l: 36, r: 108, t: 16, b: 28 };
+export const ink = (color: string) =>
+  `oklch(from ${color} min(l, var(--ink-l, 1)) c h)`;
+export const EMPTY_HISTORY: PriceHistoryPoint[] = [];
+const axis = new Intl.DateTimeFormat("en-US", {
+  timeZone: "UTC",
+  month: "short",
+  year: "numeric",
+});
+export const fmtAxisDate = (date: string) => axis.format(new Date(date));

package/src/charts/returns-calendar/index.ts

@@ -0,0 +1,16 @@
+export { default as ReturnsCalendar } from "./src/ReturnsCalendar.vue";
+export { default as ReturnsCalendarGrid } from "./src/ReturnsCalendarGrid.vue";
+export { default as ReturnsCalendarTooltip } from "./src/ReturnsCalendarTooltip.vue";
+export { useReturnsCalendar } from "./src/context";
+export type {
+  ReturnsCalendarProps,
+  ReturnsCalendarCell,
+  ReturnsCalendarSelection,
+  ReturnsCalendarTooltipData,
+} from "./src/types";
+export type ReturnsCalendarGridProps = InstanceType<
+  (typeof import("./src/ReturnsCalendarGrid.vue"))["default"]
+>["$props"];
+export type ReturnsCalendarTooltipProps = InstanceType<
+  (typeof import("./src/ReturnsCalendarTooltip.vue"))["default"]
+>["$props"];

package/src/charts/returns-calendar/src/ReturnsCalendar.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { provide } from "vue";
+import { createReturnsModel, returnsContext } from "./context";
+import type { ReturnsCalendarProps } from "./types";
+import ReturnsCalendarGrid from "./ReturnsCalendarGrid.vue";
+import ReturnsCalendarTooltip from "./ReturnsCalendarTooltip.vue";
+const props = defineProps<ReturnsCalendarProps>();
+const emit = defineEmits(["update:selection", "selectionChange"]);
+const calendar = createReturnsModel(props, emit);
+provide(returnsContext.key, calendar);
+</script>
+<template>
+  <section
+    aria-label="Monthly returns calendar"
+    :class="[
+      'relative w-[480px] max-w-full [--ink-l:0.5] dark:[--ink-l:1]',
+      props.className,
+    ]"
+  >
+    <slot
+      ><ReturnsCalendarGrid><ReturnsCalendarTooltip /></ReturnsCalendarGrid
+    ></slot>
+    <div class="sr-only">
+      <table>
+        <caption>
+          Monthly returns in percent
+        </caption>
+        <thead>
+          <tr>
+            <th>Year</th>
+            <th v-for="month in 12" :key="month">{{ month }}</th>
+            <th>Year total</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="(year, index) in calendar.years" :key="year">
+            <th>{{ year }}</th>
+            <td v-for="month in 12" :key="month">
+              {{ calendar.valueAt(index, month - 1) }}
+            </td>
+            <td>{{ calendar.totals[index] }}</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </section>
+</template>