@orvui/vue 0.0.0-stage → 0.1.1

package/src/charts/treemap/src/context.ts

@@ -0,0 +1,72 @@
+import { computed, reactive, ref, useId } from "vue";
+import { useMediaQuery, useReducedMotion } from "../../../lib/composables";
+import { activeSelection, context, formatNumber, usePlotSize } from "../../shared";
+import {
+  buildTreemap,
+  layoutTreemap,
+  TREEMAP_COLORS,
+  type TreemapNode,
+} from "./model";
+export interface TreemapProps {
+  data: readonly TreemapNode[];
+  label?: string;
+  formatValue?: (value: number) => string;
+  colors?: readonly string[];
+  textColor?: string;
+  activeId?: string | null;
+  defaultActiveId?: string | null;
+  className?: string;
+}
+export function createTreemapModel(
+  props: TreemapProps,
+  emit: (event: any, ...args: any[]) => void,
+) {
+  const plotRef = ref<HTMLElement | null>(null);
+  const size = usePlotSize(plotRef, { width: 1000, height: 625 });
+  const model = computed(() =>
+    buildTreemap(
+      props.data,
+      props.colors ?? TREEMAP_COLORS,
+      props.textColor ?? "#ffffff",
+    ),
+  );
+  const tiles = computed(() =>
+    layoutTreemap(model.value.nodes, size.value.width, size.value.height),
+  );
+  const activeId = activeSelection(
+    () => props.activeId,
+    props.defaultActiveId ?? null,
+    computed(() => tiles.value.map((tile) => tile.id)),
+    (value) => {
+      emit("update:activeId", value);
+      emit("activeChange", value);
+    },
+  );
+  const byId = computed(
+    () => new Map(tiles.value.map((tile) => [tile.id, tile])),
+  );
+  return reactive({
+    nodes: computed(() => model.value.nodes),
+    items: computed(() => model.value.items),
+    total: computed(() => model.value.total),
+    tiles,
+    size,
+    plotRef,
+    activeId,
+    active: computed(() =>
+      activeId.value === null ? null : (byId.value.get(activeId.value) ?? null),
+    ),
+    setActive(value: string | null) {
+      activeId.value = value;
+    },
+    tooltipOpen: ref(false),
+    tooltipId: useId(),
+    formatValue: computed(() => props.formatValue ?? formatNumber),
+    label: computed(() => props.label ?? "Treemap"),
+    reduce: useReducedMotion(),
+    canHover: useMediaQuery("(hover: hover)"),
+  });
+}
+export const treemapContext =
+  context<ReturnType<typeof createTreemapModel>>("Treemap");
+export const useTreemap = treemapContext.use;

package/src/charts/treemap/src/model.ts

@@ -0,0 +1,214 @@
+interface TreemapBase {
+  id: string;
+  label: string;
+  color?: string;
+  textColor?: string;
+  description?: string;
+}
+export interface TreemapLeaf extends TreemapBase {
+  value: number;
+}
+export interface TreemapGroup extends TreemapBase {
+  children: readonly TreemapNode[];
+}
+export type TreemapNode = TreemapLeaf | TreemapGroup;
+export interface TreemapItem extends TreemapLeaf {
+  color: string;
+  textColor: string;
+  path: readonly string[];
+  share: number;
+}
+export interface ResolvedNode {
+  id: string;
+  label: string;
+  value: number;
+  color: string;
+  children: ResolvedNode[];
+  item: TreemapItem | null;
+}
+export interface TreemapTile extends TreemapItem {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+export const TREEMAP_COLORS = [
+  "#1d4ed8",
+  "#7c3aed",
+  "#0f766e",
+  "#b45309",
+  "#be123c",
+  "#475569",
+] as const;
+
+type Visit = {
+  kind: "visit";
+  source: TreemapNode;
+  into: ResolvedNode[];
+  path: readonly string[];
+  color: string;
+  text: string;
+};
+type Finish = { kind: "finish"; target: ResolvedNode };
+
+export function buildTreemap(
+  data: readonly TreemapNode[],
+  colors: readonly string[],
+  textColor: string,
+) {
+  if (!colors.length)
+    throw new Error("Treemap: colors must contain at least one color.");
+  const identities = new Set<string>();
+  const nodes: ResolvedNode[] = [];
+  const items: TreemapItem[] = [];
+  const pending: (Visit | Finish)[] = [];
+  for (let index = data.length - 1; index >= 0; index--)
+    pending.push({
+      kind: "visit",
+      source: data[index],
+      into: nodes,
+      path: [],
+      color: colors[index % colors.length],
+      text: textColor,
+    });
+  while (pending.length) {
+    const task = pending.pop()!;
+    if (task.kind === "finish") {
+      task.target.value = task.target.children.reduce(
+        (sum, child) => sum + child.value,
+        0,
+      );
+      if (!Number.isFinite(task.target.value))
+        throw new Error("Treemap: group totals must remain finite.");
+      continue;
+    }
+    const { source } = task;
+    if (identities.has(source.id))
+      throw new Error(`Treemap: duplicate node ID "${source.id}".`);
+    identities.add(source.id);
+    const color = source.color ?? task.color;
+    const foreground = source.textColor ?? task.text;
+    const path = [...task.path, source.label];
+    const target: ResolvedNode = {
+      id: source.id,
+      label: source.label,
+      color,
+      value: 0,
+      children: [],
+      item: null,
+    };
+    task.into.push(target);
+    if ("children" in source) {
+      pending.push({ kind: "finish", target });
+      for (let index = source.children.length - 1; index >= 0; index--)
+        pending.push({
+          kind: "visit",
+          source: source.children[index],
+          into: target.children,
+          path,
+          color,
+          text: foreground,
+        });
+    } else {
+      if (!Number.isFinite(source.value) || source.value < 0)
+        throw new Error("Treemap: leaf values must be finite and nonnegative.");
+      const item: TreemapItem = {
+        ...source,
+        color,
+        textColor: foreground,
+        path,
+        share: 0,
+      };
+      target.value = source.value;
+      target.item = item;
+      items.push(item);
+    }
+  }
+  const total = nodes.reduce((sum, node) => sum + node.value, 0);
+  if (!Number.isFinite(total))
+    throw new Error("Treemap: the total must remain finite.");
+  for (const item of items) item.share = total ? item.value / total : 0;
+  return { nodes, items, total };
+}
+
+type Region = {
+  nodes: readonly ResolvedNode[];
+  begin: number;
+  end: number;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+};
+export function layoutTreemap(
+  nodes: readonly ResolvedNode[],
+  width: number,
+  height: number,
+) {
+  const tiles: TreemapTile[] = [];
+  const positive = nodes.filter((node) => node.value > 0);
+  const pending: Region[] = [
+    {
+      nodes: positive,
+      begin: 0,
+      end: positive.length,
+      x: 0,
+      y: 0,
+      width,
+      height,
+    },
+  ];
+  while (pending.length) {
+    const region = pending.pop()!;
+    const { nodes: siblings, begin, end, x, y, width: w, height: h } = region;
+    if (begin === end) continue;
+    if (end - begin === 1) {
+      const node = siblings[begin];
+      if (node.item) {
+        if (w > 0 && h > 0)
+          tiles.push({ ...node.item, x, y, width: w, height: h });
+      } else {
+        const children = node.children.filter((child) => child.value > 0);
+        pending.push({
+          ...region,
+          nodes: children,
+          begin: 0,
+          end: children.length,
+        });
+      }
+      continue;
+    }
+    let total = 0;
+    for (let index = begin; index < end; index++)
+      total += siblings[index].value;
+    let divide = begin + 1;
+    let weight = siblings[begin].value;
+    for (let index = begin + 1; index < end - 1; index++) {
+      const proposed = weight + siblings[index].value;
+      if (Math.abs(proposed - total / 2) > Math.abs(weight - total / 2)) break;
+      divide = index + 1;
+      weight = proposed;
+    }
+    const fraction = weight / total;
+    if (w >= h) {
+      const firstWidth = w * fraction;
+      pending.push({
+        ...region,
+        begin: divide,
+        x: x + firstWidth,
+        width: w - firstWidth,
+      });
+      pending.push({ ...region, end: divide, width: firstWidth });
+    } else {
+      const firstHeight = h * fraction;
+      pending.push({
+        ...region,
+        begin: divide,
+        y: y + firstHeight,
+        height: h - firstHeight,
+      });
+      pending.push({ ...region, end: divide, height: firstHeight });
+    }
+  }
+  return tiles;
+}

package/src/charts/volume-profile/index.ts

@@ -0,0 +1,16 @@
+export { default as VolumeProfile } from "./src/VolumeProfile.vue";
+export { default as VolumeProfilePlot } from "./src/VolumeProfilePlot.vue";
+export { default as VolumeProfileSummary } from "./src/VolumeProfileSummary.vue";
+export { default as VolumeProfileTooltip } from "./src/VolumeProfileTooltip.vue";
+export { useVolumeProfile } from "./src/context";
+export type { VolumeProfileProps } from "./src/context";
+export type { VolumeProfileBin, VolumeProfileRow } from "./src/model";
+export type VolumeProfileTooltipProps = InstanceType<
+  (typeof import("./src/VolumeProfileTooltip.vue"))["default"]
+>["$props"];
+export type VolumeProfilePlotProps = InstanceType<
+  (typeof import("./src/VolumeProfilePlot.vue"))["default"]
+>["$props"];
+export type VolumeProfileSummaryProps = InstanceType<
+  (typeof import("./src/VolumeProfileSummary.vue"))["default"]
+>["$props"];

package/src/charts/volume-profile/src/VolumeProfile.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { provide } from "vue";
+import {
+  createVolumeModel,
+  volumeContext,
+  type VolumeProfileProps,
+} from "./context";
+import VolumeProfilePlot from "./VolumeProfilePlot.vue";
+import VolumeProfileSummary from "./VolumeProfileSummary.vue";
+import VolumeProfileTooltip from "./VolumeProfileTooltip.vue";
+const props = withDefaults(defineProps<VolumeProfileProps>(), {
+  valueArea: undefined,
+});
+const emit = defineEmits(["update:activeId", "activeChange"]);
+const profile = createVolumeModel(props, emit);
+provide(volumeContext.key, profile);
+</script>
+<template>
+  <section
+    :aria-label="profile.label"
+    :class="['relative w-full space-y-5', props.className]"
+  >
+    <slot
+      ><VolumeProfilePlot /><VolumeProfileSummary /><VolumeProfileTooltip
+    /></slot>
+    <div class="sr-only">
+      <table>
+        <caption>
+          {{
+            profile.label
+          }}
+          data
+        </caption>
+        <thead>
+          <tr>
+            <th>Price range</th>
+            <th>Volume</th>
+            <th>Share</th>
+            <th>Point of control</th>
+            <th>Value area</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="row in profile.rows" :key="row.id">
+            <th>
+              {{ profile.formatPrice(row.priceLow) }} to
+              {{ profile.formatPrice(row.priceHigh) }}
+            </th>
+            <td>{{ profile.formatVolume(row.volume) }}</td>
+            <td>{{ (row.share * 100).toFixed(1) }}%</td>
+            <td>{{ row.isPoc ? "Yes" : "No" }}</td>
+            <td>{{ row.inValueArea ? "Yes" : "No" }}</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </section>
+</template>

package/src/charts/volume-profile/src/VolumeProfilePlot.vue

@@ -0,0 +1,225 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { motion } from "motion-v";
+import { cn } from "../../../lib/utils";
+import { EASE_OUT, SPRING_LAYOUT } from "../../../lib/ease";
+import { useVolumeProfile } from "./context";
+defineOptions({ inheritAttrs: false });
+withDefaults(defineProps<{ barClassName?: string; showAxes?: boolean }>(), {
+  showAxes: true,
+});
+const profile = useVolumeProfile();
+const pointer = ref(false),
+  anchor = ref<HTMLElement | null>(null);
+const ticks = computed(() =>
+  [1, 0.75, 0.5, 0.25, 0].map((fraction) => ({
+    fraction,
+    label: profile.formatPrice(
+      profile.priceLow + (profile.priceHigh - profile.priceLow) * fraction,
+    ),
+  })),
+);
+const valueText = computed(() =>
+  profile.active
+    ? `${profile.formatPrice(profile.active.priceLow)} to ${profile.formatPrice(profile.active.priceHigh)}, ${profile.formatVolume(profile.active.volume)} ${profile.unit}`
+    : undefined,
+);
+onMounted(() => {
+  profile.plotRef = anchor.value;
+});
+watch(
+  anchor,
+  (element) => {
+    profile.plotRef = element;
+  },
+  { flush: "post" },
+);
+onBeforeUnmount(() => {
+  if (profile.plotRef === anchor.value) profile.plotRef = null;
+});
+function inspect(event: PointerEvent) {
+  const rect = (event.currentTarget as HTMLElement).getBoundingClientRect();
+  if (!rect.height || !profile.rows.length) return;
+  const fraction = Math.max(
+    0,
+    Math.min(1, (event.clientY - rect.top) / rect.height),
+  );
+  let selected = profile.rows.find(
+    (row) => fraction >= row.top && fraction <= row.top + row.height,
+  );
+  if (!selected) {
+    selected = profile.rows[0];
+    for (const row of profile.rows)
+      if (
+        Math.abs(row.center - fraction) < Math.abs(selected.center - fraction)
+      )
+        selected = row;
+  }
+  profile.setActive(selected.id);
+  profile.tooltipOpen = true;
+}
+function focus() {
+  profile.setActive(profile.rows[Math.max(0, profile.activeIndex)].id);
+  profile.tooltipOpen = true;
+}
+function input(event: Event) {
+  if (pointer.value) return;
+  const row = profile.rows[Number((event.target as HTMLInputElement).value)];
+  if (row) {
+    profile.setActive(row.id);
+    profile.tooltipOpen = true;
+  }
+}
+function keydown(event: KeyboardEvent) {
+  pointer.value = false;
+  profile.tooltipOpen = event.key !== "Escape";
+}
+</script>
+<template>
+  <p
+    v-if="!profile.rows.length"
+    class="py-12 text-center text-sm text-muted-foreground"
+  >
+    No volume data
+  </p>
+  <div
+    v-else
+    data-slot="volume-profile-plot"
+    class="min-w-0"
+    :class="showAxes ? 'pb-6' : ''"
+  >
+    <div
+      v-bind="$attrs"
+      :class="cn('flex h-80 min-w-0 gap-3', $attrs.class as string)"
+    >
+      <div
+        v-if="showAxes"
+        aria-hidden="true"
+        class="relative shrink-0 text-right font-mono text-[10px] text-muted-foreground sm:text-xs"
+      >
+        <span v-for="tick in ticks" :key="tick.fraction"
+          ><span class="invisible block">{{ tick.label }}</span
+          ><span
+            class="absolute right-0 -translate-y-1/2"
+            :style="{ top: (1 - tick.fraction) * 100 + '%' }"
+            >{{ tick.label }}</span
+          ></span
+        >
+      </div>
+      <div
+        ref="anchor"
+        class="relative min-w-0 flex-1 rounded-sm has-focus-visible:outline-2 has-focus-visible:outline-offset-4 has-focus-visible:outline-ring"
+      >
+        <div aria-hidden="true" class="pointer-events-none absolute inset-0">
+          <span
+            v-for="fraction in [0, 0.25, 0.5, 0.75, 1]"
+            :key="fraction"
+            class="absolute inset-y-0 border-l border-border/60"
+            :style="{ left: fraction * 100 + '%' }"
+          />
+          <div
+            v-for="(row, index) in profile.rows"
+            :key="row.id"
+            :data-volume-bin="row.id"
+            :data-poc="row.isPoc || undefined"
+            :data-value-area="row.inValueArea || undefined"
+            class="absolute inset-x-0 overflow-hidden py-px"
+            :style="{
+              top: row.top * 100 + '%',
+              height: row.height * 100 + '%',
+            }"
+          >
+            <motion.div
+              :class="['h-full w-full origin-left rounded-r-sm', barClassName]"
+              :style="{
+                backgroundColor: row.isPoc ? profile.pocColor : profile.color,
+              }"
+              :initial="{ opacity: 0, scaleX: row.proportion }"
+              :animate="{
+                opacity:
+                  row.isPoc || row.inValueArea || !profile.valueArea
+                    ? 0.9
+                    : 0.3,
+                scaleX: row.proportion,
+              }"
+              :transition="{
+                scaleX: profile.reduce ? { duration: 0 } : SPRING_LAYOUT,
+                opacity: { duration: 0.18, ease: EASE_OUT },
+              }"
+            />
+            <motion.div
+              class="absolute inset-0 bg-foreground/5"
+              :initial="false"
+              :animate="{
+                opacity:
+                  profile.tooltipOpen && profile.activeIndex === index ? 1 : 0,
+              }"
+              :transition="{ duration: 0.1, ease: EASE_OUT }"
+            />
+            <span
+              v-if="row.isPoc"
+              class="absolute inset-x-0 top-1/2 border-t border-dashed"
+              :style="{ borderColor: profile.pocColor }"
+              ><span
+                class="absolute right-0 -translate-y-1/2 rounded bg-background px-1.5 py-0.5 font-mono text-[10px] font-medium text-foreground"
+                >POC</span
+              ></span
+            >
+          </div>
+        </div>
+        <input
+          type="range"
+          min="0"
+          :max="profile.rows.length - 1"
+          step="1"
+          :value="Math.max(0, profile.activeIndex)"
+          :aria-label="profile.label + ': inspect price level'"
+          aria-orientation="vertical"
+          :aria-valuetext="valueText"
+          :aria-describedby="
+            profile.tooltipOpen && profile.active
+              ? profile.tooltipId
+              : undefined
+          "
+          class="absolute inset-0 m-0 size-full cursor-crosshair opacity-0"
+          :style="{
+            writingMode: 'vertical-lr',
+            direction: 'rtl',
+            touchAction: 'pan-x',
+          }"
+          @focus="focus"
+          @blur="
+            profile.tooltipOpen = false;
+            pointer = false;
+          "
+          @pointerenter="profile.canHover && inspect($event)"
+          @pointermove="
+            (profile.canHover || $event.buttons === 1) && inspect($event)
+          "
+          @pointerleave="profile.tooltipOpen = false"
+          @pointerdown="
+            pointer = true;
+            inspect($event);
+          "
+          @pointercancel="
+            pointer = false;
+            profile.tooltipOpen = false;
+          "
+          @click="pointer = false"
+          @keydown="keydown"
+          @input="input"
+        />
+        <div
+          v-if="showAxes"
+          aria-hidden="true"
+          class="absolute inset-x-0 top-full mt-2 flex justify-between font-mono text-[10px] text-muted-foreground sm:text-xs"
+        >
+          <span>0</span
+          ><span>{{ profile.formatVolume(profile.maxVolume / 2) }}</span
+          ><span>{{ profile.formatVolume(profile.maxVolume) }}</span>
+        </div>
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>

package/src/charts/volume-profile/src/VolumeProfileSummary.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { useVolumeProfile } from "./context";
+const profile = useVolumeProfile();
+</script>
+<template>
+  <dl
+    v-if="profile.rows.length"
+    class="grid grid-cols-2 gap-x-4 gap-y-4 border-t border-border pt-4 text-xs sm:grid-cols-3"
+  >
+    <div class="space-y-1.5">
+      <dt class="text-muted-foreground">Total volume</dt>
+      <dd class="font-mono font-medium tabular-nums">
+        {{ profile.formatVolume(profile.totalVolume) }} {{ profile.unit }}
+      </dd>
+    </div>
+    <div class="space-y-1.5">
+      <dt class="flex items-center gap-1.5 text-muted-foreground">
+        <span
+          aria-hidden="true"
+          class="size-1.5 rounded-full"
+          :style="{ backgroundColor: profile.pocColor }"
+        />Point of control
+      </dt>
+      <dd class="font-mono font-medium tabular-nums">
+        {{ profile.poc ? profile.formatPrice(profile.poc.price) : "—" }}
+      </dd>
+    </div>
+    <div v-if="profile.valueArea" class="col-span-2 space-y-1.5 sm:col-span-1">
+      <dt class="flex items-center gap-1.5 text-muted-foreground">
+        <span
+          aria-hidden="true"
+          class="size-1.5 rounded-full"
+          :style="{ backgroundColor: profile.color }"
+        />Value area · {{ Math.round(profile.valueArea.target * 100) }}% target
+      </dt>
+      <dd class="font-mono font-medium tabular-nums">
+        {{ profile.formatPrice(profile.valueArea.priceLow) }} –
+        {{ profile.formatPrice(profile.valueArea.priceHigh) }}
+      </dd>
+      <dd class="text-muted-foreground">
+        {{ (profile.valueArea.share * 100).toFixed(1) }}% of volume
+      </dd>
+    </div>
+  </dl>
+</template>

package/src/charts/volume-profile/src/VolumeProfileTooltip.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { NumberTicker } from "../../../motion/number";
+import ChartTooltip from "../../ChartTooltip.vue";
+import { useVolumeProfile } from "./context";
+withDefaults(defineProps<{ side?: "top" | "right" | "bottom" | "left" }>(), {
+  side: "top",
+});
+const profile = useVolumeProfile();
+</script>
+<template>
+  <ChartTooltip
+    :open="profile.tooltipOpen && profile.active !== null"
+    :anchor="profile.plotRef"
+    :id="profile.tooltipId"
+    :point="{ x: 0.55, y: profile.active?.center ?? 0.5 }"
+    :side="side"
+    :follow-cursor="true"
+    @update:open="profile.tooltipOpen = $event"
+    ><slot v-if="profile.active" :row="profile.active"
+      ><p class="text-muted-foreground">
+        {{ profile.formatPrice(profile.active.priceLow) }} –
+        {{ profile.formatPrice(profile.active.priceHigh) }}
+      </p>
+      <p class="mt-1 font-mono">
+        <NumberTicker
+          :value="profile.active.volume"
+          :format="() => profile.formatVolume(profile.active!.volume)"
+          :start-on-view="false"
+          :duration="0.2"
+          :stagger="0"
+        />
+        {{ profile.unit }} · {{ (profile.active.share * 100).toFixed(1) }}%
+      </p>
+      <p
+        v-if="profile.active.isPoc || profile.active.inValueArea"
+        class="mt-1 text-muted-foreground"
+      >
+        {{ profile.active.isPoc ? "Point of control" : "Inside value area" }}
+      </p></slot
+    ></ChartTooltip
+  >
+</template>