@orvui/vue 0.0.0-stage → 0.1.1

package/src/charts/donut-chart/src/DonutChartPlot.vue

@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import { motion } from "motion-v";
+import { EASE_OUT, SPRING_LAYOUT } from "../../../lib/ease";
+import { useDonutChart } from "./context";
+const chart = useDonutChart();
+const transformOrigin = {
+  transformBox: "view-box",
+  transformOrigin: "100px 100px",
+} as const;
+function transition(index: number) {
+  return chart.reduce
+    ? { duration: 0 }
+    : {
+        opacity: { duration: 0.4, delay: 0.15 + index * 0.06, ease: EASE_OUT },
+        scale: SPRING_LAYOUT,
+      };
+}
+function hover(id: string | null) {
+  if (chart.canHover) chart.setActive(id);
+}
+</script>
+
+<template>
+  <div class="relative mx-auto aspect-square w-full max-w-64">
+    <svg
+      class="size-full overflow-visible"
+      viewBox="0 0 200 200"
+      role="img"
+      :aria-label="chart.label"
+    >
+      <circle
+        class="stroke-muted"
+        cx="100"
+        cy="100"
+        :r="chart.radius"
+        fill="none"
+        :stroke-width="chart.thickness"
+        opacity="0.6"
+      />
+      <motion.g
+        :style="transformOrigin"
+        :initial="
+          chart.reduce ? false : { rotate: -90, scale: 0.88, opacity: 0 }
+        "
+        :while-in-view="{ rotate: 0, scale: 1, opacity: 1 }"
+        :in-view-options="{ once: true, amount: 0.4 }"
+        :transition="{ duration: chart.reduce ? 0 : 0.9, ease: EASE_OUT }"
+      >
+        <motion.path
+          v-for="(segment, index) in chart.placed"
+          :key="segment.id"
+          :d="segment.path"
+          :stroke="segment.color"
+          :stroke-width="chart.thickness"
+          fill="none"
+          stroke-linecap="round"
+          pointer-events="none"
+          aria-hidden="true"
+          :style="transformOrigin"
+          :initial="chart.reduce ? false : { opacity: 0 }"
+          :animate="{
+            opacity:
+              chart.active !== null && chart.active !== segment.id ? 0.3 : 1,
+            scale: chart.active === segment.id ? 1.05 : 1,
+          }"
+          :transition="transition(index)"
+        />
+      </motion.g>
+      <path
+        v-for="segment in chart.placed"
+        :key="segment.id"
+        :d="segment.path"
+        class="cursor-pointer"
+        fill="none"
+        stroke="transparent"
+        stroke-linecap="round"
+        :stroke-width="chart.thickness + 8"
+        pointer-events="stroke"
+        @pointerenter="hover(segment.id)"
+        @pointerleave="hover(null)"
+        @click="chart.select(segment.id)"
+      />
+    </svg>
+    <div
+      v-if="$slots.default"
+      class="pointer-events-none absolute inset-0 flex items-center justify-center text-center"
+    >
+      <slot />
+    </div>
+  </div>
+</template>

package/src/charts/donut-chart/src/context.ts

@@ -0,0 +1,58 @@
+import { computed, reactive } from "vue";
+import { useMediaQuery, useReducedMotion } from "../../../lib/composables";
+import { activeSelection, context, formatNumber } from "../../shared";
+import { buildDonut, type DonutSegment } from "./model";
+export interface DonutChartProps {
+  segments: readonly DonutSegment[];
+  thickness?: number;
+  gap?: number;
+  activeId?: string | null;
+  defaultActiveId?: string | null;
+  selectedId?: string | null;
+  formatValue?: (value: number) => string;
+  label?: string;
+  className?: string;
+}
+export function createDonutModel(
+  props: DonutChartProps,
+  emit: (event: any, ...args: any[]) => void,
+) {
+  const dimensions = computed(() => {
+    const thickness = props.thickness ?? 22;
+    return { thickness, radius: 92 - thickness / 2, gap: props.gap ?? 3 };
+  });
+  const geometry = computed(() => buildDonut(props.segments, dimensions.value));
+  const identities = computed(() =>
+    geometry.value.placed.map((item) => item.id),
+  );
+  const active = activeSelection(
+    () => props.activeId,
+    props.defaultActiveId ?? null,
+    identities,
+    (id) => {
+      emit("update:activeId", id);
+      emit("activeChange", id);
+    },
+  );
+  return reactive({
+    placed: computed(() => geometry.value.placed),
+    total: computed(() => geometry.value.total),
+    radius: computed(() => dimensions.value.radius),
+    thickness: computed(() => dimensions.value.thickness),
+    active,
+    setActive(id: string | null) {
+      active.value = id;
+    },
+    select(id: string) {
+      emit("select", id);
+    },
+    selectedId: computed(() => props.selectedId ?? null),
+    formatValue: computed(() => props.formatValue ?? formatNumber),
+    label: computed(() => props.label ?? "Donut chart"),
+    reduce: useReducedMotion(),
+    canHover: useMediaQuery("(hover: hover)"),
+  });
+}
+export const donutContext =
+  context<ReturnType<typeof createDonutModel>>("DonutChart");
+export const useDonutChart = donutContext.use;

package/src/charts/donut-chart/src/model.ts

@@ -0,0 +1,59 @@
+export interface DonutSegment {
+  id: string;
+  name: string;
+  color: string;
+  value: number;
+}
+export type PlacedSegment = DonutSegment & { share: number; path: string };
+export const DONUT_SIZE = 200;
+
+type RingOptions = { radius: number; thickness: number; gap: number };
+function coordinate(radius: number, angle: number): [number, number] {
+  const radians = (angle * Math.PI) / 180;
+  return [
+    DONUT_SIZE / 2 + radius * Math.sin(radians),
+    DONUT_SIZE / 2 - radius * Math.cos(radians),
+  ];
+}
+function arc(radius: number, from: number, to: number) {
+  const start = coordinate(radius, from);
+  const end = coordinate(radius, to);
+  return `M ${start[0]} ${start[1]} A ${radius} ${radius} 0 ${to - from > 180 ? 1 : 0} 1 ${end[0]} ${end[1]}`;
+}
+export function buildDonut(
+  segments: readonly DonutSegment[],
+  options: RingOptions,
+) {
+  const values: DonutSegment[] = [];
+  let total = 0;
+  for (const segment of segments) {
+    if (Number.isFinite(segment.value) && segment.value > 0) {
+      values.push(segment);
+      total += segment.value;
+    }
+  }
+  const { radius, thickness, gap } = options;
+  let angle = 0;
+  const inset = gap / 2 + ((thickness / (2 * radius)) * 180) / Math.PI;
+  const placed: PlacedSegment[] = [];
+  for (const segment of values) {
+    const share = total ? segment.value / total : 0;
+    const nextAngle = angle + share * 360;
+    let path: string;
+    if (values.length === 1) {
+      const start = coordinate(radius, 0);
+      const opposite = coordinate(radius, 180);
+      path = `M ${start[0]} ${start[1]} A ${radius} ${radius} 0 1 1 ${opposite[0]} ${opposite[1]} A ${radius} ${radius} 0 1 1 ${start[0]} ${start[1]}`;
+    } else {
+      const startAngle = angle + inset;
+      path = arc(
+        radius,
+        startAngle,
+        Math.max(startAngle + 0.01, nextAngle - inset),
+      );
+    }
+    placed.push({ ...segment, share, path });
+    angle = nextAngle;
+  }
+  return { placed, total };
+}

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

@@ -0,0 +1,12 @@
+export { default as FunnelChart } from "./src/FunnelChart.vue";
+export { default as FunnelChartPlot } from "./src/FunnelChartPlot.vue";
+export { default as FunnelChartSummary } from "./src/FunnelChartSummary.vue";
+export { useFunnelChart } from "./src/context";
+export type { FunnelChartProps } from "./src/context";
+export type { FunnelStage } from "./src/model";
+export type FunnelChartSummaryProps = InstanceType<
+  (typeof import("./src/FunnelChartSummary.vue"))["default"]
+>["$props"];
+export type FunnelChartPlotProps = InstanceType<
+  (typeof import("./src/FunnelChartPlot.vue"))["default"]
+>["$props"];

package/src/charts/funnel-chart/src/FunnelChart.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { provide } from "vue";
+import {
+  createFunnelModel,
+  funnelContext,
+  type FunnelChartProps,
+} from "./context";
+import FunnelChartPlot from "./FunnelChartPlot.vue";
+import FunnelChartSummary from "./FunnelChartSummary.vue";
+const props = defineProps<FunnelChartProps>();
+const funnel = createFunnelModel(props);
+provide(funnelContext.key, funnel);
+</script>
+
+<template>
+  <section
+    :aria-label="funnel.label"
+    :class="['w-full space-y-6', props.className]"
+  >
+    <slot><FunnelChartPlot /><FunnelChartSummary /></slot>
+  </section>
+</template>

package/src/charts/funnel-chart/src/FunnelChartPlot.vue

@@ -0,0 +1,138 @@
+<script setup lang="ts">
+import { computed, ref, useId } from "vue";
+import { motion } from "motion-v";
+import { NumberTicker } from "../../../motion/number";
+import { EASE_OUT } from "../../../lib/ease";
+import { useFunnelChart, percentage } from "./context";
+import { funnelPath } from "./model";
+const funnel = useFunnelChart();
+const hot = ref<string | null>(null);
+const tooltipId = useId();
+const palette = ["#8b5cf6", "#7774ef", "#548ee4", "#2ca6bc", "#14b8a6"];
+const stages = computed(() => {
+  const proportions = funnel.rows.map((row) => row.proportion);
+  return funnel.rows.map((row, index) => ({
+    ...row,
+    fill: row.color ?? palette[index % palette.length],
+    path: funnelPath(proportions, index, funnel.direction),
+  }));
+});
+const dimensions = computed(() => ({
+  height: `${funnel.direction === "horizontal" ? 300 : Math.max(320, stages.value.length * 72)}px`,
+  minWidth: `${funnel.direction === "horizontal" ? stages.value.length * 110 : 240}px`,
+}));
+const tracks = computed(() =>
+  funnel.direction === "horizontal"
+    ? { gridTemplateColumns: `repeat(${stages.value.length},1fr)` }
+    : { gridTemplateRows: `repeat(${stages.value.length},1fr)` },
+);
+</script>
+
+<template>
+  <p
+    v-if="!stages.length"
+    class="py-16 text-center text-sm text-muted-foreground"
+  >
+    No funnel data
+  </p>
+  <div v-else class="space-y-5">
+    <div class="overflow-x-auto">
+      <div class="relative" :style="dimensions">
+        <svg
+          aria-hidden="true"
+          viewBox="0 0 1000 500"
+          preserveAspectRatio="none"
+          class="absolute inset-0 size-full"
+        >
+          <motion.path
+            v-for="stage in stages"
+            :key="stage.id"
+            :fill="stage.fill"
+            :initial="false"
+            :animate="{ d: stage.path }"
+            :transition="{ duration: funnel.reduce ? 0 : 0.28, ease: EASE_OUT }"
+          />
+        </svg>
+        <ol
+          aria-label="Funnel stages"
+          class="absolute inset-0 grid"
+          :style="tracks"
+        >
+          <li
+            v-for="(stage, index) in stages"
+            :key="stage.id"
+            class="relative min-h-0 min-w-0"
+          >
+            <button
+              type="button"
+              class="flex size-full items-center justify-center outline-none transition-colors hover:bg-foreground/5 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring"
+              :aria-label="`${stage.label}: ${funnel.formatValue(stage.value)} ${funnel.unit}, ${percentage(stage.conversion)} of starting total`"
+              :aria-describedby="hot === stage.id ? tooltipId : undefined"
+              @focus="hot = stage.id"
+              @blur="hot = null"
+              @pointerenter="hot = stage.id"
+              @pointerleave="hot = null"
+              @keydown.esc="hot = null"
+            >
+              <span
+                class="rounded bg-background/85 px-2 py-1 font-mono text-xs font-medium tabular-nums"
+              >
+                <NumberTicker
+                  :value="stage.value"
+                  :format="() => funnel.formatValue(stage.value)"
+                  :start-on-view="false"
+                  :duration="0.35"
+                />
+              </span>
+            </button>
+            <div
+              v-if="hot === stage.id"
+              :id="tooltipId"
+              role="tooltip"
+              class="pointer-events-none absolute top-1/2 left-1/2 z-10 min-w-40 rounded-xl border border-border bg-popover p-3 text-xs shadow-lg"
+            >
+              <p class="text-muted-foreground">{{ stage.label }}</p>
+              <p class="mt-1 font-mono">
+                <NumberTicker
+                  :value="stage.value"
+                  :format="() => funnel.formatValue(stage.value)"
+                  :start-on-view="false"
+                  :duration="0.35"
+                />
+                {{ funnel.unit }}
+              </p>
+              <template v-if="index > 0">
+                <p class="mt-1">
+                  {{ percentage(stage.stepConversion) }} from previous stage
+                </p>
+                <p class="text-muted-foreground">
+                  {{ funnel.formatValue(Math.abs(stage.change ?? 0)) }}
+                  {{ (stage.change ?? 0) > 0 ? "gained" : "dropped" }}
+                </p>
+              </template>
+              <p class="mt-1 text-muted-foreground">
+                {{ percentage(stage.conversion) }} of starting total
+              </p>
+            </div>
+          </li>
+        </ol>
+      </div>
+    </div>
+    <div class="flex flex-wrap justify-center gap-x-6 gap-y-3">
+      <span
+        v-for="stage in stages"
+        :key="stage.id"
+        class="inline-flex items-center gap-2 text-xs"
+      >
+        <span
+          aria-hidden="true"
+          class="size-2 shrink-0 rounded-full"
+          :style="{ backgroundColor: stage.fill }"
+        /><span>{{ stage.label }}</span>
+        <span class="font-mono text-[10px] text-muted-foreground">{{
+          percentage(stage.conversion)
+        }}</span>
+      </span>
+    </div>
+  </div>
+</template>

package/src/charts/funnel-chart/src/FunnelChartSummary.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { useFunnelChart, percentage } from "./context";
+const funnel = useFunnelChart();
+</script>
+
+<template>
+  <div
+    v-if="funnel.rows.length"
+    class="flex flex-wrap items-center justify-between gap-3 border-t border-border pt-4 text-xs"
+  >
+    <span class="text-muted-foreground"
+      >{{ funnel.formatValue(funnel.first) }} →
+      {{ funnel.formatValue(funnel.last) }} {{ funnel.unit }}</span
+    >
+    <span class="flex items-center gap-2"
+      ><span class="text-muted-foreground">Overall conversion</span
+      ><span class="font-mono font-medium tabular-nums">{{
+        percentage(funnel.conversion)
+      }}</span></span
+    >
+  </div>
+</template>

package/src/charts/funnel-chart/src/context.ts

@@ -0,0 +1,38 @@
+import { computed, reactive } from "vue";
+import { useReducedMotion } from "../../../lib/composables";
+import { context, formatNumber } from "../../shared";
+import { buildFunnel, type FunnelStage } from "./model";
+export interface FunnelChartProps {
+  stages: readonly FunnelStage[];
+  direction?: "vertical" | "horizontal";
+  unit?: string;
+  label?: string;
+  formatValue?: (value: number) => string;
+  className?: string;
+}
+export function createFunnelModel(props: FunnelChartProps) {
+  const model = computed(() => buildFunnel(props.stages));
+  const { rows, first, last, conversion } = {
+    rows: computed(() => model.value.rows),
+    first: computed(() => model.value.first),
+    last: computed(() => model.value.last),
+    conversion: computed(() => model.value.conversion),
+  };
+  return reactive({
+    model,
+    rows,
+    first,
+    last,
+    conversion,
+    direction: computed(() => props.direction ?? "vertical"),
+    unit: computed(() => props.unit ?? "people"),
+    label: computed(() => props.label ?? "Conversion funnel"),
+    formatValue: computed(() => props.formatValue ?? formatNumber),
+    reduce: useReducedMotion(),
+  });
+}
+export const funnelContext =
+  context<ReturnType<typeof createFunnelModel>>("FunnelChart");
+export const useFunnelChart = funnelContext.use;
+export const percentage = (value: number | null) =>
+  value === null ? "—" : `${value.toFixed(1)}%`;

package/src/charts/funnel-chart/src/model.ts

@@ -0,0 +1,67 @@
+export interface FunnelStage {
+  id: string;
+  label: string;
+  value: number;
+  color?: string;
+}
+
+export function buildFunnel(stages: readonly FunnelStage[]) {
+  const unique = new Map<string, FunnelStage>();
+  let maximum = 0;
+  for (const stage of stages) {
+    if (
+      unique.has(stage.id) ||
+      !Number.isFinite(stage.value) ||
+      stage.value < 0
+    )
+      continue;
+    unique.set(stage.id, stage);
+    maximum = Math.max(maximum, stage.value);
+  }
+  const values = [...unique.values()];
+  const first = values[0]?.value ?? 0;
+  const last = values.at(-1)?.value ?? 0;
+  const rows = values.map((stage, index) => {
+    const preceding = index > 0 ? values[index - 1].value : undefined;
+    return {
+      ...stage,
+      proportion: maximum ? stage.value / maximum : 0,
+      conversion: first ? (stage.value / first) * 100 : null,
+      stepConversion:
+        preceding !== undefined && preceding > 0
+          ? (stage.value / preceding) * 100
+          : null,
+      change: preceding === undefined ? null : stage.value - preceding,
+    };
+  });
+  return { rows, first, last, conversion: first ? (last / first) * 100 : null };
+}
+
+export function funnelPath(
+  proportions: readonly number[],
+  index: number,
+  direction: "vertical" | "horizontal",
+) {
+  const own = proportions[index];
+  const entry = index ? (proportions[index - 1] + own) / 2 : own;
+  const exit =
+    index + 1 < proportions.length ? (own + proportions[index + 1]) / 2 : own;
+  const begin = index / proportions.length;
+  const finish = (index + 1) / proportions.length;
+  const center = (begin + finish) / 2;
+  const quarter = (finish - begin) / 4;
+  const at = (value: number, axis: number, side: -1 | 1) => {
+    const cross = 0.5 + side * value * 0.46;
+    return direction === "vertical"
+      ? `${cross * 1000},${axis * 500}`
+      : `${axis * 1000},${cross * 500}`;
+  };
+  return [
+    `M${at(entry, begin, -1)} L${at(entry, begin, 1)}`,
+    `C${at(entry, begin + quarter, 1)} ${at(own, center - quarter, 1)} ${at(own, center, 1)}`,
+    `C${at(own, center + quarter, 1)} ${at(exit, finish - quarter, 1)} ${at(exit, finish, 1)}`,
+    `L${at(exit, finish, -1)}`,
+    `C${at(exit, finish - quarter, -1)} ${at(own, center + quarter, -1)} ${at(own, center, -1)}`,
+    `C${at(own, center - quarter, -1)} ${at(entry, begin + quarter, -1)} ${at(entry, begin, -1)} Z`,
+  ].join(" ");
+}

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

@@ -0,0 +1,19 @@
+export { default as HeatCalendar } from "./src/HeatCalendar.vue";
+export { default as HeatCalendarGrid } from "./src/HeatCalendarGrid.vue";
+export { default as HeatCalendarLegend } from "./src/HeatCalendarLegend.vue";
+export { default as HeatCalendarTooltip } from "./src/HeatCalendarTooltip.vue";
+export { useHeatCalendar } from "./src/context";
+export type {
+  HeatCalendarProps,
+  HeatCalendarCell,
+  HeatCalendarSelection,
+} from "./src/types";
+export type HeatCalendarTooltipProps = InstanceType<
+  (typeof import("./src/HeatCalendarTooltip.vue"))["default"]
+>["$props"];
+export type HeatCalendarGridProps = InstanceType<
+  (typeof import("./src/HeatCalendarGrid.vue"))["default"]
+>["$props"];
+export type HeatCalendarLegendProps = InstanceType<
+  (typeof import("./src/HeatCalendarLegend.vue"))["default"]
+>["$props"];

package/src/charts/heat-calendar/src/HeatCalendar.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { provide } from "vue";
+import { createHeatModel, heatContext } from "./context";
+import type { HeatCalendarProps } from "./types";
+import HeatCalendarGrid from "./HeatCalendarGrid.vue";
+import HeatCalendarLegend from "./HeatCalendarLegend.vue";
+import HeatCalendarTooltip from "./HeatCalendarTooltip.vue";
+const props = defineProps<HeatCalendarProps>();
+const emit = defineEmits(["update:selection", "selectionChange"]);
+const calendar = createHeatModel(props, emit);
+provide(heatContext.key, calendar);
+</script>
+<template>
+  <section
+    aria-label="Activity calendar"
+    :class="['relative w-fit max-w-full', props.className]"
+  >
+    <slot
+      ><HeatCalendarGrid><HeatCalendarTooltip /></HeatCalendarGrid
+      ><HeatCalendarLegend
+    /></slot>
+  </section>
+</template>