@orvui/vue 0.0.0-stage → 0.1.1

package/src/charts/composition-chart/src/CompositionChartLegend.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { useCompositionChart } from "./context";
+const chart = useCompositionChart();
+function clear() {
+  chart.setPinned(null);
+  chart.setHovered(null);
+  chart.setFocused(null);
+}
+</script>
+<template>
+  <div
+    v-if="chart.column"
+    class="grid min-w-0 grid-cols-2 gap-x-4 gap-y-1 @min-[480px]:grid-cols-3 @min-[900px]:grid-cols-6"
+  >
+    <button
+      v-for="segment in chart.column.segments"
+      :key="segment.id"
+      type="button"
+      :aria-label="`Highlight ${segment.name}`"
+      :aria-pressed="chart.pinned === segment.id"
+      :class="[
+        'flex min-h-12 min-w-0 items-center gap-2.5 rounded-md px-2 py-1.5 text-left text-xs transition-opacity duration-150 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring',
+        chart.pinned === segment.id ? 'bg-muted/60 ring-1 ring-inset ring-border' : undefined,
+        chart.highlight && chart.highlight !== segment.id
+          ? 'opacity-40'
+          : undefined,
+      ]"
+      @click="chart.setPinned(chart.pinned === segment.id ? null : segment.id)"
+      @pointerenter="chart.canHover && chart.setHovered(segment.id)"
+      @pointerleave="chart.setHovered(null)"
+      @focus="chart.setFocused(segment.id)"
+      @blur="chart.setFocused(null)"
+      @keydown.esc="clear"
+    >
+      <span
+        aria-hidden="true"
+        class="h-6 w-1 shrink-0 rounded-full"
+        :style="{ backgroundColor: segment.color }"
+      />
+      <span class="grid min-w-0 gap-0.5"
+        ><span class="truncate text-muted-foreground">{{ segment.name }}</span
+        ><span
+          :title="
+            segment.value === null
+              ? 'Missing value'
+              : chart.formatValue(segment.value)
+          "
+          class="shrink-0 font-mono tabular-nums"
+          >{{ chart.column.valid ? segment.share.toFixed(1) + "%" : "—" }}</span
+        ></span
+      >
+    </button>
+  </div>
+</template>

package/src/charts/composition-chart/src/CompositionChartPlot.vue

@@ -0,0 +1,201 @@
+<script setup lang="ts">
+import { computed, ref, useId } from "vue";
+import { motion } from "motion-v";
+import { SPRING_LAYOUT } from "../../../lib/ease";
+import { compositionArea } from "./model";
+import { useCompositionChart } from "./context";
+import CompositionTooltipContent from "./CompositionTooltipContent.vue";
+const chart = useCompositionChart();
+const open = ref(false),
+  tooltipId = useId();
+const areas = computed(() =>
+  chart.rows.map((row, index) => ({
+    ...row,
+    path: compositionArea(chart.columns, index),
+  })),
+);
+const bars = computed(() =>
+  chart.columns.flatMap((column, index) =>
+    column.valid
+      ? column.segments.map((segment) => ({
+          ...segment,
+          key: JSON.stringify([column.id, segment.id]),
+          x: (index / chart.columns.length) * 100 + 10 / chart.columns.length,
+        }))
+      : [],
+  ),
+);
+const inspectX = computed(
+  () => ((chart.index + 0.5) / chart.columns.length) * 100,
+);
+const tooltipLeft = computed(
+  () => `${Math.min(65, (chart.index / chart.columns.length) * 100)}%`,
+);
+function inspect(event: PointerEvent) {
+  const box = (event.currentTarget as HTMLElement).getBoundingClientRect();
+  if (!box.width || !chart.columns.length) return;
+  const fraction = Math.max(
+    0,
+    Math.min(1, (event.clientX - box.left) / box.width),
+  );
+  const index = Math.min(
+    chart.columns.length - 1,
+    Math.floor(fraction * chart.columns.length),
+  );
+  chart.select(chart.columns[index].id);
+  open.value = true;
+}
+function input(event: Event) {
+  const column =
+    chart.columns[Number((event.target as HTMLInputElement).value)];
+  if (column) {
+    chart.select(column.id);
+    open.value = true;
+  }
+}
+function opacity(id: string) {
+  return chart.highlight && chart.highlight !== id ? 0.18 : 0.9;
+}
+</script>
+<template>
+  <p
+    v-if="!chart.columns.length || !chart.rows.length"
+    class="flex min-h-64 items-center justify-center text-sm text-muted-foreground"
+  >
+    No composition data
+  </p>
+  <div v-else class="min-w-0 space-y-3">
+    <div class="flex justify-between text-[11px] text-muted-foreground">
+      <span
+        >{{ chart.column?.id
+        }}{{ chart.column?.valid ? "" : " · No data" }}</span
+      ><span class="font-mono">100%</span>
+    </div>
+    <div
+      class="relative h-64 rounded-sm has-focus-visible:outline-2 has-focus-visible:outline-offset-4 has-focus-visible:outline-ring sm:h-80"
+      @pointerleave="open = false"
+      @pointerdown="inspect"
+      @pointermove="(chart.canHover || $event.buttons === 1) && inspect($event)"
+    >
+      <svg
+        aria-hidden="true"
+        viewBox="0 0 100 100"
+        preserveAspectRatio="none"
+        class="size-full overflow-visible"
+      >
+        <line
+          v-for="y in [0, 25, 50, 75, 100]"
+          :key="y"
+          x1="0"
+          x2="100"
+          :y1="y"
+          :y2="y"
+          stroke="var(--border)"
+          stroke-width="1"
+          vector-effect="non-scaling-stroke"
+        />
+        <template v-if="chart.view === 'area'">
+          <motion.path
+            v-for="area in areas"
+            :key="area.id"
+            :d="area.path"
+            :fill="area.color"
+            :initial="{ opacity: 0 }"
+            :animate="{ opacity: opacity(area.id) }"
+            :transition="{ duration: 0.18 }"
+          />
+        </template>
+        <template v-else>
+          <motion.rect
+            v-for="bar in bars"
+            :key="bar.key"
+            :x="bar.x"
+            y="0"
+            :width="80 / chart.columns.length"
+            height="1"
+            :fill="bar.color"
+            :initial="false"
+            :animate="{
+              y: 100 - bar.offset - bar.share,
+              scaleY: bar.share,
+              opacity: opacity(bar.id),
+            }"
+            :style="{ originY: '0px', originX: '0px' }"
+            :transition="chart.reduce ? { duration: 0 } : SPRING_LAYOUT"
+          />
+        </template>
+        <motion.line
+          :initial="false"
+          :animate="{ x: inspectX }"
+          :transition="chart.reduce ? { duration: 0 } : SPRING_LAYOUT"
+          x1="0"
+          x2="0"
+          y1="0"
+          y2="100"
+          stroke="var(--foreground)"
+          stroke-width="1"
+          vector-effect="non-scaling-stroke"
+          stroke-dasharray="3 3"
+        />
+      </svg>
+      <input
+        type="range"
+        aria-label="Inspect period"
+        min="0"
+        :max="chart.columns.length - 1"
+        step="1"
+        :value="chart.index"
+        :aria-valuetext="chart.column?.id"
+        :aria-describedby="open ? tooltipId : undefined"
+        @focus="open = true"
+        @blur="open = false"
+        @keydown.esc="open = false"
+        @input="input"
+        class="absolute inset-0 size-full cursor-crosshair opacity-0"
+      />
+      <div
+        v-if="open"
+        :id="tooltipId"
+        role="tooltip"
+        class="pointer-events-none absolute top-4 z-10 rounded-xl border border-border bg-popover p-3 text-xs shadow-lg"
+        :style="{ left: tooltipLeft }"
+      >
+        <CompositionTooltipContent />
+      </div>
+    </div>
+    <div class="flex justify-between text-[11px] text-muted-foreground">
+      <span>{{ chart.columns[0]?.id }}</span
+      ><span>{{ chart.columns.at(-1)?.id }}</span>
+    </div>
+    <div class="sr-only">
+      <table>
+        <caption>
+          {{
+            chart.label
+          }}
+          data
+        </caption>
+        <thead>
+          <tr>
+            <th>Series</th>
+            <th v-for="column in chart.columns" :key="column.id">
+              {{ column.id }}
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="(row, index) in chart.rows" :key="row.id">
+            <th>{{ row.name }}</th>
+            <td v-for="column in chart.columns" :key="column.id">
+              {{
+                column.valid
+                  ? chart.formatValue(column.segments[index]?.value ?? 0)
+                  : "No data"
+              }}
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>

package/src/charts/composition-chart/src/CompositionTooltipContent.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { useCompositionChart } from "./context";
+const chart = useCompositionChart();
+</script>
+<template>
+  <div class="min-w-40">
+    <p class="mb-2 text-muted-foreground">{{ chart.column?.id }}</p>
+    <template v-if="chart.column?.valid"
+      ><div
+        v-for="segment in chart.column.segments"
+        :key="segment.id"
+        class="flex items-center justify-between gap-6 py-1"
+      >
+        <span class="flex items-center gap-2"
+          ><span
+            class="size-2 rounded-full"
+            :style="{ backgroundColor: segment.color }"
+          />{{ segment.name }}</span
+        ><span class="font-mono"
+          >{{ chart.formatValue(segment.value ?? 0) }} ·
+          {{ segment.share.toFixed(1) }}%</span
+        >
+      </div></template
+    >
+    <p v-else>No data</p>
+  </div>
+</template>

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

@@ -0,0 +1,71 @@
+import { computed, reactive, ref } from "vue";
+import { useMediaQuery, useReducedMotion } from "../../../lib/composables";
+import { context, selection, formatNumber } from "../../shared";
+import { buildComposition, type CompositionSeries } from "./model";
+export interface CompositionChartProps {
+  series: readonly CompositionSeries[];
+  periods: readonly string[];
+  view?: "bar" | "area";
+  period?: string;
+  defaultPeriod?: string;
+  formatValue?: (value: number) => string;
+  label?: string;
+  className?: string;
+}
+export function createCompositionModel(
+  props: CompositionChartProps,
+  emit: (event: any, ...args: any[]) => void,
+) {
+  const model = computed(() => buildComposition(props.series, props.periods));
+  const period = selection(
+    () => props.period,
+    props.defaultPeriod ?? "",
+    (value) => {
+      emit("update:period", value);
+      emit("periodChange", value);
+    },
+  );
+  const pinned = ref<string | null>(null),
+    hovered = ref<string | null>(null),
+    focused = ref<string | null>(null);
+  const index = computed(() => {
+    const found = model.value.columns.findIndex(
+      (column) => column.id === period.value,
+    );
+    return found === -1 ? model.value.columns.length - 1 : found;
+  });
+  const highlight = computed(() => {
+    const ids = new Set(model.value.rows.map((row) => row.id));
+    for (const candidate of [hovered.value, focused.value, pinned.value])
+      if (candidate !== null && ids.has(candidate)) return candidate;
+    return null;
+  });
+  return reactive({
+    rows: computed(() => model.value.rows),
+    columns: computed(() => model.value.columns),
+    index,
+    column: computed(() => model.value.columns[index.value]),
+    pinned,
+    highlight,
+    select(value: string) {
+      period.value = value;
+    },
+    setPinned(value: string | null) {
+      pinned.value = value;
+    },
+    setHovered(value: string | null) {
+      hovered.value = value;
+    },
+    setFocused(value: string | null) {
+      focused.value = value;
+    },
+    view: computed(() => props.view ?? "bar"),
+    label: computed(() => props.label ?? "Composition over time"),
+    formatValue: computed(() => props.formatValue ?? formatNumber),
+    reduce: useReducedMotion(),
+    canHover: useMediaQuery("(hover: hover)"),
+  });
+}
+export const compositionContext =
+  context<ReturnType<typeof createCompositionModel>>("CompositionChart");
+export const useCompositionChart = compositionContext.use;

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

@@ -0,0 +1,95 @@
+export interface CompositionSeries {
+  id: string;
+  name: string;
+  color: string;
+  values: readonly (number | null)[];
+}
+
+export function buildComposition(
+  series: readonly CompositionSeries[],
+  periods: readonly string[],
+) {
+  const unique = new Map<string, CompositionSeries>();
+  for (const item of series)
+    if (!unique.has(item.id)) unique.set(item.id, item);
+  const rows = [...unique.values()];
+  const used = new Set<string>();
+  const columns: {
+    id: string;
+    valid: boolean;
+    segments: (CompositionSeries & {
+      value: number | null;
+      share: number;
+      offset: number;
+    })[];
+  }[] = [];
+  for (let index = 0; index < periods.length; index++) {
+    const id = periods[index];
+    if (used.has(id)) continue;
+    used.add(id);
+    const observations = rows.map((row) => row.values[index]);
+    const valid =
+      observations.length > 0 &&
+      observations.every(
+        (value) =>
+          typeof value === "number" && Number.isFinite(value) && value >= 0,
+      );
+    let scale = 0;
+    if (valid)
+      for (const value of observations) scale = Math.max(scale, value ?? 0);
+    let denominator = 0;
+    if (scale > 0)
+      for (const value of observations) denominator += (value ?? 0) / scale;
+    let position = 0;
+    const segments = rows.map((row, seriesIndex) => {
+      const value = observations[seriesIndex] ?? null;
+      const share =
+        denominator > 0 ? ((value ?? 0) / scale / denominator) * 100 : 0;
+      const segment = { ...row, value, share, offset: position };
+      position += share;
+      return segment;
+    });
+    columns.push({ id, valid: valid && denominator > 0, segments });
+  }
+  return { rows, columns };
+}
+
+export function compositionArea(
+  columns: ReturnType<typeof buildComposition>["columns"],
+  row: number,
+) {
+  const paths: string[] = [];
+  for (let start = 0; start < columns.length;) {
+    if (!columns[start].valid) {
+      start++;
+      continue;
+    }
+    let end = start + 1;
+    while (end < columns.length && columns[end].valid) end++;
+    if (end - start === 1) {
+      const segment = columns[start].segments[row];
+      const left = (start / columns.length) * 100;
+      const right = ((start + 1) / columns.length) * 100;
+      const bottom = 100 - segment.offset;
+      const top = bottom - segment.share;
+      paths.push(
+        `M${left},${bottom} L${left},${top} L${right},${top} L${right},${bottom} Z`,
+      );
+    } else {
+      const points: string[] = [];
+      for (let i = start; i < end; i++) {
+        const segment = columns[i].segments[row];
+        points.push(
+          `${((i + 0.5) / columns.length) * 100},${100 - segment.offset - segment.share}`,
+        );
+      }
+      for (let i = end - 1; i >= start; i--)
+        points.push(
+          `${((i + 0.5) / columns.length) * 100},${100 - columns[i].segments[row].offset}`,
+        );
+      paths.push(`M${points.join(" L")} Z`);
+    }
+    start = end;
+  }
+  return paths.join(" ");
+}

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

@@ -0,0 +1,19 @@
+export { default as DonutChart } from "./src/DonutChart.vue";
+export { default as DonutChartCenter } from "./src/DonutChartCenter.vue";
+export { default as DonutChartLegend } from "./src/DonutChartLegend.vue";
+export { default as DonutChartPlot } from "./src/DonutChartPlot.vue";
+export { useDonutChart } from "./src/context";
+export type { DonutChartProps } from "./src/context";
+export type {
+  DonutSegment,
+  PlacedSegment as DonutPlacedSegment,
+} from "./src/model";
+export type DonutChartLegendProps = InstanceType<
+  (typeof import("./src/DonutChartLegend.vue"))["default"]
+>["$props"];
+export type DonutChartPlotProps = InstanceType<
+  (typeof import("./src/DonutChartPlot.vue"))["default"]
+>["$props"];
+export type DonutChartCenterProps = InstanceType<
+  (typeof import("./src/DonutChartCenter.vue"))["default"]
+>["$props"];

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

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { provide } from "vue";
+import {
+  createDonutModel,
+  donutContext,
+  type DonutChartProps,
+} from "./context";
+import DonutChartPlot from "./DonutChartPlot.vue";
+import DonutChartCenter from "./DonutChartCenter.vue";
+import DonutChartLegend from "./DonutChartLegend.vue";
+const props = defineProps<DonutChartProps>();
+const emit = defineEmits(["update:activeId", "activeChange", "select"]);
+const chart = createDonutModel(props, emit);
+provide(donutContext.key, chart);
+</script>
+
+<template>
+  <section :class="['w-full', props.className]" :aria-label="chart.label">
+    <slot>
+      <div class="grid items-center gap-6 sm:grid-cols-[minmax(0,16rem)_1fr]">
+        <DonutChartPlot><DonutChartCenter /></DonutChartPlot>
+        <DonutChartLegend />
+      </div>
+    </slot>
+  </section>
+</template>

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

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { computed, ref, watch } from "vue";
+import { AnimatePresence, motion } from "motion-v";
+import { DigitSwap } from "../../../motion/number";
+import { EASE_OUT } from "../../../lib/ease";
+import { useDonutChart } from "./context";
+withDefaults(defineProps<{ totalLabel?: string }>(), { totalLabel: "Total" });
+const chart = useDonutChart();
+const segment = computed(
+  () => chart.placed.find((item) => item.id === chart.active) ?? null,
+);
+const value = computed(() =>
+  segment.value ? segment.value.value : chart.total,
+);
+const direction = ref<"up" | "down">("up");
+watch(
+  value,
+  (next, previous) => {
+    direction.value = next > previous ? "up" : "down";
+  },
+  { flush: "sync" },
+);
+const labelKey = computed(() => segment.value?.id ?? "total");
+const slideIn = computed(() => ({
+  opacity: 0,
+  y: chart.reduce ? "0%" : "100%",
+}));
+const slideOut = computed(() => ({
+  opacity: 0,
+  y: chart.reduce ? "0%" : "-100%",
+}));
+</script>
+
+<template>
+  <div aria-live="polite" class="relative max-w-[56%]">
+    <slot :segment="segment" :total="chart.total">
+      <p class="text-2xl font-medium tracking-tight tabular-nums">
+        <DigitSwap :value="chart.formatValue(value)" :direction="direction" />
+      </p>
+      <div class="relative mt-1 h-4 overflow-hidden">
+        <AnimatePresence :initial="false" mode="popLayout">
+          <motion.p
+            :key="labelKey"
+            :initial="slideIn"
+            :animate="{ opacity: 1, y: '0%' }"
+            :exit="slideOut"
+            :transition="{
+              duration: chart.reduce ? 0.12 : 0.22,
+              ease: EASE_OUT,
+            }"
+            class="flex items-center justify-center gap-1.5 whitespace-nowrap text-xs leading-4 text-muted-foreground"
+          >
+            <template v-if="segment">
+              <span
+                aria-hidden="true"
+                class="size-2 shrink-0 rounded-full"
+                :style="{ backgroundColor: segment.color }"
+              />
+              <span class="truncate"
+                >{{ segment.name }} ·
+                {{ (segment.share * 100).toFixed(1) }}%</span
+              >
+            </template>
+            <template v-else>{{ totalLabel }}</template>
+          </motion.p>
+        </AnimatePresence>
+      </div>
+    </slot>
+  </div>
+</template>

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

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { motion } from "motion-v";
+import { SPRING_LAYOUT } from "../../../lib/ease";
+import { moveFocus } from "../../shared";
+import { useDonutChart } from "./context";
+const chart = useDonutChart();
+function hover(id: string | null) {
+  if (chart.canHover) chart.setActive(id);
+}
+</script>
+
+<template>
+  <ul data-chart-keyboard class="space-y-1">
+    <li v-for="(segment, index) in chart.placed" :key="segment.id">
+      <button
+        type="button"
+        data-chart-item
+        :aria-pressed="chart.selectedId === segment.id"
+        class="w-full rounded-xl px-3 py-2 text-left outline-none transition-colors duration-150 aria-pressed:ring-1 aria-pressed:ring-inset aria-pressed:ring-border focus-visible:ring-2 focus-visible:ring-ring aria-pressed:focus-visible:ring-2 aria-pressed:focus-visible:ring-ring"
+        :class="chart.active === segment.id ? 'bg-muted' : 'hover:bg-muted/60'"
+        @focus="chart.setActive(segment.id)"
+        @blur="chart.setActive(null)"
+        @pointerenter="hover(segment.id)"
+        @pointerleave="hover(null)"
+        @click="chart.select(segment.id)"
+        @keydown="moveFocus($event, index, chart.placed.length)"
+      >
+        <span class="flex items-center gap-3">
+          <span
+            aria-hidden="true"
+            class="size-2.5 shrink-0 rounded-full"
+            :style="{ backgroundColor: segment.color }"
+          />
+          <span class="min-w-0 flex-1 truncate text-sm font-medium">{{
+            segment.name
+          }}</span>
+          <span class="shrink-0 text-right text-sm tabular-nums">
+            <slot name="value" :segment="segment">
+              <span class="font-medium"
+                >{{ (segment.share * 100).toFixed(1) }}%</span
+              >
+              <span class="ml-2 text-muted-foreground">{{
+                chart.formatValue(segment.value)
+              }}</span>
+            </slot>
+          </span>
+        </span>
+        <span
+          v-if="$slots.detail"
+          class="mt-0.5 block pl-5.5 text-xs text-muted-foreground"
+          ><slot name="detail" :segment="segment"
+        /></span>
+        <span
+          aria-hidden="true"
+          class="mt-2 ml-5.5 block h-1 overflow-hidden rounded-full bg-muted"
+        >
+          <motion.span
+            class="block h-full origin-left rounded-full"
+            :style="{ backgroundColor: segment.color }"
+            :initial="chart.reduce ? false : { scaleX: 0 }"
+            :animate="{ scaleX: segment.share }"
+            :transition="
+              chart.reduce
+                ? { duration: 0 }
+                : { ...SPRING_LAYOUT, delay: 0.2 + index * 0.06 }
+            "
+          />
+        </span>
+      </button>
+    </li>
+  </ul>
+</template>