@orvui/vue 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,226 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { motion } from "motion-v";
+import { EASE_OUT, SPRING_PRESS } from "../../../lib/ease";
+import { useReturnsCalendar } from "./context";
+import {
+  COLS,
+  DOWN,
+  ink,
+  MONTHS,
+  RING,
+  same,
+  signed,
+  tint,
+  UP,
+  YEAR,
+} from "./utils";
+import { moveFocus } from "../../shared";
+const calendar = useReturnsCalendar();
+function endpoint(y: number, month: number) {
+  const span = month === YEAR ? calendar.yearSpan : calendar.span,
+    index = month === YEAR ? y : y * 12 + month;
+  return span
+    ? index === span.lo || index === span.hi
+    : same(calendar.pinned, y, month);
+}
+const rows = computed(() =>
+  calendar.years.map((year, y) => {
+    const months = COLS.map((column) => {
+      const month = column.m,
+        index = y * 12 + month,
+        value = calendar.valueAt(y, month),
+        hot = same(calendar.hot, y, month),
+        edge = endpoint(y, month);
+      const dim = calendar.span
+        ? index < calendar.span.lo || index > calendar.span.hi
+        : calendar.yearSpan
+          ? y < calendar.yearSpan.lo || y > calendar.yearSpan.hi
+          : !!calendar.hot &&
+            !hot &&
+            calendar.hot.y !== y &&
+            calendar.hot.m !== month;
+      return {
+        month,
+        value,
+        hot,
+        edge,
+        dim,
+        style: {
+          background: tint(value, calendar.range, hot),
+          color: `color-mix(in srgb,var(--foreground) ${Math.round(85 + Math.min(Math.abs(value) / calendar.range, 1) * 15)}%,transparent)`,
+          boxShadow: edge
+            ? RING
+            : hot
+              ? `inset 0 0 0 1.5px ${value >= 0 ? UP : DOWN}`
+              : "none",
+          transition: "background 150ms,box-shadow 150ms",
+        },
+      };
+    });
+    const yearHot = same(calendar.hot, y, YEAR),
+      yearDim = calendar.span
+        ? y < Math.floor(calendar.span.lo / 12) ||
+          y > Math.floor(calendar.span.hi / 12)
+        : calendar.yearSpan
+          ? y < calendar.yearSpan.lo || y > calendar.yearSpan.hi
+          : calendar.hot && calendar.hot.y !== y;
+    return {
+      year,
+      y,
+      months,
+      yearDim,
+      yearHot,
+      yearEdge: endpoint(y, YEAR),
+      total: calendar.totals[y],
+    };
+  }),
+);
+</script>
+<template>
+  <div
+    class="relative grid gap-1"
+    data-chart-keyboard
+    :style="{ gridTemplateColumns: '32px repeat(12,1fr) 52px' }"
+    @pointerleave="calendar.setHover(null)"
+  >
+    <span /><span
+      v-for="column in COLS"
+      :key="column.name"
+      class="pb-1 text-center text-[10px] transition-colors duration-200"
+      :class="
+        calendar.hot?.m === column.m
+          ? 'text-foreground'
+          : 'text-muted-foreground'
+      "
+      >{{ column.initial }}</span
+    ><span class="pb-1 text-center text-[10px] text-muted-foreground"
+      >Year</span
+    >
+    <template v-for="row in rows" :key="row.year"
+      ><span
+        class="flex items-center justify-end pr-1.5 font-mono text-[10px] tabular-nums"
+        :class="
+          calendar.hot?.y === row.y
+            ? 'text-foreground'
+            : 'text-muted-foreground'
+        "
+        >’{{ String(row.year).slice(2) }}</span
+      >
+      <span
+        v-for="cell in row.months"
+        :key="cell.month"
+        class="relative block aspect-square w-full transition-opacity duration-200"
+        :style="{ opacity: cell.dim ? 0.35 : 1 }"
+        ><motion.button
+          type="button"
+          data-chart-item
+          :data-return-cell="`${row.y}-${cell.month}`"
+          :aria-describedby="cell.hot ? calendar.tooltipId : undefined"
+          :aria-label="`${MONTHS[cell.month]} ${row.year} ${signed(cell.value, 1)}%`"
+          :aria-pressed="cell.edge"
+          class="absolute -inset-0.5 block rounded-[5px] outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          :while-press="
+            calendar.reduce
+              ? undefined
+              : { scale: 0.92, transition: SPRING_PRESS }
+          "
+          @pointerenter="calendar.setHover({ y: row.y, m: cell.month })"
+          @focus="calendar.setHover({ y: row.y, m: cell.month })"
+          @blur="calendar.setHover(null)"
+          @click="calendar.select({ y: row.y, m: cell.month })"
+          @keydown.esc="calendar.clear()"
+          @keydown="
+            moveFocus(
+              $event,
+              row.y * 13 + cell.month,
+              calendar.years.length * 13,
+              13,
+            )
+          "
+          ><motion.span
+            class="pointer-events-none absolute inset-0.5 grid place-items-center rounded-[4px] font-mono text-[9px] font-medium tabular-nums"
+            :style="cell.style"
+            :initial="calendar.reduce ? false : { opacity: 0, scale: 0.6 }"
+            :animate="
+              calendar.sweepRow === row.y && !calendar.reduce
+                ? { opacity: 1, scale: [1, 1.1, 1] }
+                : {
+                    opacity: 1,
+                    scale:
+                      cell.hot && calendar.canHover && !calendar.reduce
+                        ? 1.15
+                        : 1,
+                  }
+            "
+            :transition="
+              calendar.reduce
+                ? { duration: 0 }
+                : calendar.sweepRow === row.y
+                  ? {
+                      duration: 0.36,
+                      ease: EASE_OUT,
+                      delay: cell.month * 0.035,
+                    }
+                  : {
+                      ...SPRING_PRESS,
+                      delay: calendar.hot ? 0 : (row.y + cell.month) * 0.02,
+                    }
+            "
+            >{{
+              Math.abs(cell.value) >= 4 ? Math.round(cell.value) : ""
+            }}</motion.span
+          ></motion.button
+        ></span
+      >
+      <span
+        class="relative block transition-opacity duration-200"
+        :style="{ opacity: row.yearDim ? 0.35 : 1 }"
+        ><motion.button
+          type="button"
+          data-chart-item
+          :data-return-cell="`${row.y}-${YEAR}`"
+          :aria-describedby="row.yearHot ? calendar.tooltipId : undefined"
+          :aria-label="`${row.year} ${signed(row.total, 1)}% for the year`"
+          :aria-pressed="row.yearEdge"
+          class="absolute -inset-0.5 block rounded-[5px] outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          :while-press="
+            calendar.reduce
+              ? undefined
+              : { scale: 0.96, transition: SPRING_PRESS }
+          "
+          @pointerenter="calendar.setHover({ y: row.y, m: YEAR })"
+          @focus="calendar.setHover({ y: row.y, m: YEAR })"
+          @blur="calendar.setHover(null)"
+          @click="calendar.select({ y: row.y, m: YEAR })"
+          @keydown.esc="calendar.clear()"
+          @keydown="
+            moveFocus($event, row.y * 13 + 12, calendar.years.length * 13, 13)
+          "
+          ><motion.span
+            class="pointer-events-none absolute inset-0.5 grid place-items-center rounded-[4px] font-mono text-[11px] font-medium tabular-nums"
+            :style="{
+              background: row.yearHot
+                ? 'var(--background)'
+                : 'color-mix(in srgb,var(--foreground) 6%,transparent)',
+              color: ink(row.total >= 0 ? UP : DOWN),
+              boxShadow: row.yearEdge
+                ? RING
+                : row.yearHot
+                  ? 'inset 0 0 0 1px var(--border-strong)'
+                  : 'none',
+            }"
+            :initial="calendar.reduce ? false : { opacity: 0 }"
+            :animate="{ opacity: 1 }"
+            :transition="{
+              duration: calendar.reduce ? 0 : 0.4,
+              delay: calendar.reduce ? 0 : 0.02 * (row.y + 13),
+              ease: EASE_OUT,
+            }"
+            >{{ signed(row.total, 0) }}%</motion.span
+          ></motion.button
+        ></span
+      > </template
+    ><slot />
+  </div>
+</template>

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

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { AnimatePresence, motion } from "motion-v";
+import { SPRING_LAYOUT } from "../../../lib/ease";
+import { useReturnsCalendar } from "./context";
+import { signed } from "./utils";
+const calendar = useReturnsCalendar();
+</script>
+<template>
+  <AnimatePresence
+    ><motion.div
+      v-if="calendar.tip"
+      :id="calendar.tooltipId"
+      role="tooltip"
+      class="pointer-events-none absolute z-20 w-max max-w-64 rounded-xl border border-border bg-popover px-3 py-2 text-xs shadow-lg"
+      :style="{
+        left: Math.min(70, ((calendar.tip.m + 1) / 14) * 100) + '%',
+        top: '-60px',
+      }"
+      :initial="{ opacity: 0, y: 4 }"
+      :animate="{ opacity: 1, y: 0 }"
+      :exit="{ opacity: 0 }"
+      :transition="calendar.reduce ? { duration: 0 } : SPRING_LAYOUT"
+      ><slot
+        :label="calendar.tipLabel"
+        :value="calendar.tipValue"
+        :note="calendar.tipNote"
+        ><p class="text-muted-foreground">{{ calendar.tipLabel }}</p>
+        <p
+          class="mt-1 font-mono text-base"
+          :style="{
+            color:
+              calendar.tipValue >= 0 ? 'var(--success)' : 'var(--destructive)',
+          }"
+        >
+          {{ signed(calendar.tipValue, 2) }}%
+        </p>
+        <p
+          v-if="calendar.tipNote"
+          class="mt-1 text-[10px] text-muted-foreground"
+        >
+          {{ calendar.tipNote }}
+        </p></slot
+      ></motion.div
+    ></AnimatePresence
+  >
+</template>

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

@@ -0,0 +1,71 @@
+import { computed, ref, useId, watch } from "vue";
+import { useMediaQuery, useReducedMotion } from "../../../lib/composables";
+import { context, selection, unwrapModel } from "../../shared";
+import type {
+  ReturnsCalendarProps,
+  ReturnsCalendarCell,
+  ReturnsCalendarSelection,
+} from "./types";
+import { same } from "./utils";
+import { buildReturnsCalendar } from "./model";
+export function createReturnsModel(
+  props: ReturnsCalendarProps,
+  emit: (event: any, ...args: any[]) => void,
+) {
+  const reduce = useReducedMotion(),
+    canHover = useMediaQuery("(hover: hover)"),
+    hovered = ref<ReturnsCalendarCell | null>(null),
+    tooltipId = useId();
+  const requested = selection(
+    () => props.selection,
+    props.defaultSelection ?? null,
+    (value) => {
+      emit("update:selection", value);
+      emit("selectionChange", value);
+    },
+  );
+  const data = computed(() =>
+    buildReturnsCalendar(props, requested.value, hovered.value),
+  );
+  function clear() {
+    requested.value = null;
+  }
+  function select(cell: ReturnsCalendarCell) {
+    const current = data.value;
+    if (!current.valid(cell)) return;
+    if (current.spanEnd || same(current.pinned, cell.y, cell.m)) clear();
+    else
+      requested.value =
+        current.pinned && current.sameTrack(current.pinned, cell)
+          ? { start: current.pinned, end: cell }
+          : { start: cell };
+  }
+  const model = computed(() => {
+    const { valid: _, sameTrack: __, ...visible } = data.value;
+    return {
+      ...visible,
+      reduce: reduce.value,
+      canHover: canHover.value,
+      clear,
+      select,
+      tooltipId,
+      setHover(value: ReturnsCalendarCell | null) {
+        hovered.value = value;
+      },
+      setSelection(value: ReturnsCalendarSelection | null) {
+        requested.value = value;
+      },
+    };
+  });
+  watch(
+    () => model.value.selection,
+    (value) => {
+      if (!value && requested.value && props.selection === undefined)
+        requested.value = null;
+    },
+  );
+  return unwrapModel(model);
+}
+export const returnsContext =
+  context<ReturnType<typeof createReturnsModel>>("ReturnsCalendar");
+export const useReturnsCalendar = returnsContext.use;

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

@@ -0,0 +1,101 @@
+import type {
+  ReturnsCalendarProps,
+  ReturnsCalendarCell,
+  ReturnsCalendarSelection,
+} from "./types";
+import { compound, MONTHS, YEAR } from "./utils";
+export function buildReturnsCalendar(
+  props: ReturnsCalendarProps,
+  requested: ReturnsCalendarSelection | null,
+  hovered: ReturnsCalendarCell | null,
+) {
+  const years = props.years ?? [],
+    values = props.returns ?? [];
+  const valid = (cell: ReturnsCalendarCell) =>
+    Number.isInteger(cell.y) &&
+    Number.isInteger(cell.m) &&
+    cell.y >= 0 &&
+    cell.y < years.length &&
+    cell.m >= 0 &&
+    cell.m <= YEAR;
+  const sameTrack = (first: ReturnsCalendarCell, second: ReturnsCalendarCell) =>
+    (first.m === YEAR) === (second.m === YEAR);
+  const selection =
+    requested &&
+    valid(requested.start) &&
+    (!requested.end ||
+      (valid(requested.end) && sameTrack(requested.start, requested.end)))
+      ? requested
+      : null;
+  const hover = hovered && valid(hovered) ? hovered : null,
+    pinned = selection?.start ?? null,
+    spanEnd = selection?.end ?? null;
+  const rows = years.map((_, y) => MONTHS.map((_, m) => values[y]?.[m] ?? 0)),
+    totals = rows.map(compound),
+    flat = rows.flat();
+  const valueAt = (y: number, m: number) => values[y]?.[m] ?? 0;
+  const ordinal = (cell: ReturnsCalendarCell) => cell.y * 12 + cell.m;
+  const yearAnchored = pinned !== null && pinned.m === YEAR;
+  const monthAnchored = pinned !== null && !yearAnchored;
+  const monthTo =
+    spanEnd ?? (monthAnchored && hover && hover.m !== YEAR ? hover : null);
+  const yearTo =
+    spanEnd ?? (yearAnchored && hover && hover.m === YEAR ? hover : null);
+  const span =
+    monthAnchored && pinned
+      ? {
+          lo: Math.min(ordinal(pinned), ordinal(monthTo ?? pinned)),
+          hi: Math.max(ordinal(pinned), ordinal(monthTo ?? pinned)),
+        }
+      : null;
+  const yearSpan =
+    yearAnchored && pinned
+      ? {
+          lo: Math.min(pinned.y, (yearTo ?? pinned).y),
+          hi: Math.max(pinned.y, (yearTo ?? pinned).y),
+        }
+      : null;
+  const hot = hover ?? spanEnd ?? pinned,
+    tip = spanEnd ?? hover ?? pinned;
+  const showMonths = span !== null && span.lo !== span.hi,
+    showYears = yearSpan !== null && yearSpan.lo !== yearSpan.hi;
+  let tipValue = 0,
+    tipLabel = "",
+    tipNote: string | null = null;
+  const monthLabel = (index: number) =>
+    `${MONTHS[index % 12]} ${years[Math.floor(index / 12)]}`;
+  if (showYears && yearSpan) {
+    tipValue = compound(flat.slice(yearSpan.lo * 12, (yearSpan.hi + 1) * 12));
+    tipLabel = `${years[yearSpan.lo]} – ${years[yearSpan.hi]}`;
+    tipNote = `${yearSpan.hi - yearSpan.lo + 1} years`;
+  } else if (showMonths && span) {
+    tipValue = compound(flat.slice(span.lo, span.hi + 1));
+    tipLabel = `${monthLabel(span.lo)} – ${monthLabel(span.hi)}`;
+    tipNote = `${span.hi - span.lo + 1} months`;
+  } else if (tip) {
+    tipValue = tip.m === YEAR ? totals[tip.y] : valueAt(tip.y, tip.m);
+    tipLabel =
+      tip.m === YEAR ? `${years[tip.y]}` : `${MONTHS[tip.m]} ${years[tip.y]}`;
+    tipNote = tip.m === YEAR ? "for the year" : null;
+  }
+  return {
+    years,
+    hover,
+    pinned,
+    spanEnd,
+    totals,
+    valueAt,
+    range: 8,
+    span,
+    yearSpan,
+    hot,
+    tip,
+    sweepRow: !yearAnchored && hot?.m === YEAR ? hot.y : null,
+    tipValue,
+    tipLabel,
+    tipNote,
+    selection,
+    valid,
+    sameTrack,
+  };
+}

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

@@ -0,0 +1,24 @@
+/** Zero-based row and month; month 12 selects the year total. */
+export type ReturnsCalendarCell = { y: number; m: number };
+
+export interface ReturnsCalendarSelection {
+  start: ReturnsCalendarCell;
+  end?: ReturnsCalendarCell;
+}
+
+export interface ReturnsCalendarProps {
+  /** Row labels, one per row of `returns`. */
+  years?: number[];
+  /** `returns[year][month]` in percent, twelve months per row. */
+  returns?: number[][];
+  className?: string;
+  selection?: ReturnsCalendarSelection | null;
+  defaultSelection?: ReturnsCalendarSelection | null;
+  onSelectionChange?: (selection: ReturnsCalendarSelection | null) => void;
+}
+
+export interface ReturnsCalendarTooltipData {
+  label: string;
+  value: number;
+  note: string | null;
+}

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

@@ -0,0 +1,33 @@
+import type { ReturnsCalendarCell } from "./types";
+export const UP = "var(--success)",
+  DOWN = "var(--destructive)";
+export const MONTHS = [
+  "Jan",
+  "Feb",
+  "Mar",
+  "Apr",
+  "May",
+  "Jun",
+  "Jul",
+  "Aug",
+  "Sep",
+  "Oct",
+  "Nov",
+  "Dec",
+];
+export const COLS = MONTHS.map((name, m) => ({ name, initial: name[0], m }));
+export const YEAR = 12;
+export function compound(run: number[]) {
+  let product = 1;
+  for (const percentage of run) product *= 1 + percentage / 100;
+  return (product - 1) * 100;
+}
+export const signed = (value: number, precision: number) =>
+  `${value >= 0 ? "+" : "−"}${Math.abs(value).toFixed(precision)}`;
+export const ink = (color: string) =>
+  `oklch(from ${color} min(l, var(--ink-l, 1)) c h)`;
+export const tint = (value: number, range: number, on: boolean) =>
+  `color-mix(in srgb, ${value >= 0 ? UP : DOWN} ${Math.round(Math.min(Math.abs(value) / range, 1) * 55 + (on ? 24 : 8))}%, transparent)`;
+export const same = (cell: ReturnsCalendarCell | null, y: number, m: number) =>
+  cell?.y === y && cell?.m === m;
+export const RING = "inset 0 0 0 1.5px var(--foreground)";

package/src/charts/sankey-chart/index.ts

@@ -0,0 +1,17 @@
+export { default as SankeyChart } from "./src/SankeyChart.vue";
+export { default as SankeyChartPlot } from "./src/SankeyChartPlot.vue";
+export { default as SankeyChartTooltip } from "./src/SankeyChartTooltip.vue";
+export { useSankeyChart } from "./src/context";
+export type { SankeyChartProps, SankeyActive } from "./src/context";
+export type {
+  SankeyNode,
+  SankeyLink,
+  PlacedNode as SankeyPlacedNode,
+  PlacedLink as SankeyPlacedLink,
+} from "./src/model";
+export type SankeyChartPlotProps = InstanceType<
+  (typeof import("./src/SankeyChartPlot.vue"))["default"]
+>["$props"];
+export type SankeyChartTooltipProps = InstanceType<
+  (typeof import("./src/SankeyChartTooltip.vue"))["default"]
+>["$props"];

package/src/charts/sankey-chart/src/SankeyChart.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { provide } from "vue";
+import {
+  createSankeyModel,
+  sankeyContext,
+  type SankeyChartProps,
+} from "./context";
+import SankeyChartPlot from "./SankeyChartPlot.vue";
+import SankeyChartTooltip from "./SankeyChartTooltip.vue";
+const props = defineProps<SankeyChartProps>();
+const emit = defineEmits(["update:activeId", "activeChange"]);
+const chart = createSankeyModel(props, emit);
+provide(sankeyContext.key, chart);
+</script>
+<template>
+  <section
+    :aria-label="chart.label"
+    :class="['relative w-full min-w-0', props.className]"
+    data-slot="sankey-chart"
+  >
+    <slot><SankeyChartPlot /><SankeyChartTooltip /></slot>
+    <div class="sr-only">
+      <table>
+        <caption>
+          {{
+            chart.label
+          }}
+          data
+        </caption>
+        <thead>
+          <tr>
+            <th>Flow</th>
+            <th>Value</th>
+            <th>Share of source</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="link in chart.links" :key="link.id">
+            <th>{{ link.source.label }} to {{ link.target.label }}</th>
+            <td>{{ chart.formatValue(link.value) }}</td>
+            <td>{{ (link.share * 100).toFixed(1) }}%</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </section>
+</template>