@abraca/nuxt 2.11.0 → 2.14.0

package/dist/runtime/components/renderers/AChartRenderer.client.vue

@@ -0,0 +1,622 @@
+<script setup>
+import { ref, computed, shallowRef, onMounted, onBeforeUnmount } from "vue";
+import { useElementSize } from "@vueuse/core";
+import { useRendererBase } from "../../composables/useRendererBase";
+import { useNodePanel } from "../../composables/useNodePanel";
+import { useNodePanelFollow } from "../../composables/useNodePanelFollow";
+import { useDocumentPermissions } from "../../composables/useDocumentPermissions";
+import { useAbracadabra } from "../../composables/useAbracadabra";
+import { usePluginRegistry } from "../../composables/usePluginRegistry";
+import { resolveDocType } from "../../utils/docTypes";
+const props = defineProps({
+  docId: { type: String, required: true },
+  childProvider: { type: null, required: true },
+  docLabel: { type: String, required: true },
+  pageTypes: { type: Array, required: false },
+  followingUser: { type: [String, null], required: false, default: null }
+});
+const { childProviderRef, tree, connectedUsers, states, setLocalState } = useRendererBase(props);
+const { canWrite } = useDocumentPermissions(useAbracadabra().effectiveRole);
+const registry = usePluginRegistry();
+const {
+  openNodeId,
+  openNodeLabel,
+  openNodeProvider,
+  isLoading: nodePanelLoading,
+  openNode,
+  closePanel
+} = useNodePanel(childProviderRef);
+useNodePanelFollow(openNodeId, openNodeLabel, openNode, closePanel, () => props.followingUser, states, setLocalState);
+const vis = shallowRef(null);
+const visError = ref(false);
+onMounted(async () => {
+  try {
+    vis.value = await import("@unovis/vue");
+  } catch {
+    visError.value = true;
+  }
+});
+const containerRef = ref(null);
+const { width } = useElementSize(containerRef);
+onBeforeUnmount(() => {
+  setLocalState({ "chart:focused": null });
+});
+const PALETTES = {
+  default: ["#6366f1", "#ec4899", "#f97316", "#22c55e", "#3b82f6", "#a855f7", "#14b8a6", "#eab308"],
+  warm: ["#ef4444", "#f97316", "#eab308", "#f59e0b", "#dc2626", "#fb923c", "#fbbf24", "#fde047"],
+  cool: ["#3b82f6", "#06b6d4", "#14b8a6", "#22c55e", "#6366f1", "#0ea5e9", "#10b981", "#34d399"],
+  mono: ["#18181b", "#3f3f46", "#52525b", "#71717a", "#a1a1aa", "#d4d4d8", "#e4e4e7", "#f4f4f5"]
+};
+const PRIORITY_LABELS = {
+  0: "None",
+  1: "Low",
+  2: "Medium",
+  3: "High",
+  4: "Urgent"
+};
+const docMeta = computed(() => tree.treeMap.data?.[props.docId]?.meta);
+const chartConfig = computed(() => {
+  const meta = docMeta.value ?? {};
+  return {
+    type: meta.chartType || "bar",
+    metric: meta.chartMetric || "value",
+    colorScheme: meta.chartColorScheme || "default",
+    limit: meta.chartLimit || 12,
+    showLegend: meta.chartShowLegend !== false,
+    showValues: meta.chartShowValues === true
+  };
+});
+function setConfig(patch) {
+  if (!canWrite.value) return;
+  tree.updateMeta(props.docId, patch);
+}
+const TYPE_OPTIONS = ["bar", "stacked bar", "line", "donut", "treemap"];
+const METRIC_OPTIONS = ["value", "type", "tag", "status", "priority", "activity", "completion"];
+const COLOR_OPTIONS = ["default", "warm", "cool", "mono"];
+const colors = computed(() => PALETTES[chartConfig.value.colorScheme] ?? PALETTES.default);
+const isXY = computed(() => ["bar", "stacked bar", "line"].includes(chartConfig.value.type));
+const isValueMode = computed(() => chartConfig.value.metric === "value");
+const allEntries = computed(() => {
+  if (isValueMode.value) return [];
+  const result = [];
+  function collect(parentId) {
+    for (const e of tree.childrenOf(parentId)) {
+      result.push(e);
+      collect(e.id);
+    }
+  }
+  collect(null);
+  return result;
+});
+const directChildren = computed(() => tree.childrenOf(null));
+const aggregated = computed(() => {
+  const entries = allEntries.value;
+  const byType = /* @__PURE__ */ new Map();
+  const byTag = /* @__PURE__ */ new Map();
+  const byStatus = /* @__PURE__ */ new Map();
+  const byPriority = /* @__PURE__ */ new Map();
+  const byWeek = /* @__PURE__ */ new Map();
+  let taskDone = 0;
+  let taskPending = 0;
+  for (const e of entries) {
+    const type = e.type || "doc";
+    byType.set(type, (byType.get(type) || 0) + 1);
+    if (e.meta?.tags) {
+      for (const tag of e.meta.tags) {
+        byTag.set(tag, (byTag.get(tag) || 0) + 1);
+      }
+    }
+    if (e.meta?.status) {
+      const s = e.meta.status;
+      byStatus.set(s, (byStatus.get(s) || 0) + 1);
+    }
+    if (e.meta?.priority !== void 0) {
+      const p = e.meta.priority;
+      byPriority.set(p, (byPriority.get(p) || 0) + 1);
+    }
+    if (e.meta?.checked !== void 0) {
+      if (e.meta.checked) {
+        taskDone++;
+        if (e.updatedAt) {
+          const d = new Date(e.updatedAt);
+          const jan1 = new Date(d.getFullYear(), 0, 1);
+          const weekNum = Math.ceil(((d.getTime() - jan1.getTime()) / 864e5 + jan1.getDay() + 1) / 7);
+          const weekKey = `${d.getFullYear()}-W${String(weekNum).padStart(2, "0")}`;
+          byWeek.set(weekKey, (byWeek.get(weekKey) || 0) + 1);
+        }
+      } else {
+        taskPending++;
+      }
+    }
+  }
+  return { byType, byTag, byStatus, byPriority, byWeek, taskDone, taskPending };
+});
+const metricTitle = computed(() => {
+  const titles = {
+    value: "Values",
+    type: "Documents by Type",
+    tag: "Documents by Tag",
+    status: "Documents by Status",
+    priority: "Documents by Priority",
+    activity: "Tasks Over Time",
+    completion: "Task Completion"
+  };
+  return titles[chartConfig.value.metric] ?? "Values";
+});
+const summaryText = computed(() => {
+  const data = xyData.value;
+  if (!data.length) return "";
+  const total = data.reduce((s, d) => s + d.value, 0);
+  const categories = data.length;
+  const done = aggregated.value.taskDone;
+  const pending = aggregated.value.taskPending;
+  const summaries = {
+    value: `${total} total across ${categories} data points`,
+    type: `${total} documents across ${categories} types`,
+    tag: `${total} tagged items across ${categories} tags`,
+    status: `${total} items across ${categories} statuses`,
+    priority: `${total} items across ${categories} priority levels`,
+    activity: `${total} completed tasks across ${categories} weeks`,
+    completion: `${done} done, ${pending} pending`
+  };
+  return summaries[chartConfig.value.metric] ?? "";
+});
+const xyData = computed(() => {
+  const { metric, limit } = chartConfig.value;
+  const agg = aggregated.value;
+  switch (metric) {
+    case "value": {
+      const children = directChildren.value;
+      const hasGrandchildren = children.some((c) => tree.childrenOf(c.id).length > 0);
+      if (hasGrandchildren) {
+        return children.map((child) => {
+          const cells = tree.childrenOf(child.id);
+          const sum = cells.reduce((s, cell) => s + (cell.meta?.number ?? 0), 0);
+          return {
+            label: child.label || "Untitled",
+            value: sum,
+            id: child.id
+          };
+        });
+      }
+      return children.map((child) => ({
+        label: child.label || "Untitled",
+        value: child.meta?.number ?? 0,
+        id: child.id
+      }));
+    }
+    case "type":
+      return [...agg.byType.entries()].sort((a, b) => b[1] - a[1]).slice(0, limit).map(([k, v]) => ({ label: resolveDocType(k, registry).label, value: v, id: "" }));
+    case "tag":
+      return [...agg.byTag.entries()].sort((a, b) => b[1] - a[1]).slice(0, limit).map(([k, v]) => ({ label: k, value: v, id: "" }));
+    case "status":
+      return [...agg.byStatus.entries()].sort((a, b) => b[1] - a[1]).slice(0, limit).map(([k, v]) => ({ label: k, value: v, id: "" }));
+    case "priority":
+      return [...agg.byPriority.entries()].sort((a, b) => a[0] - b[0]).map(([k, v]) => ({ label: PRIORITY_LABELS[k] ?? String(k), value: v, id: "" }));
+    case "activity":
+      return [...agg.byWeek.entries()].sort((a, b) => a[0].localeCompare(b[0])).slice(-limit).map(([k, v]) => ({ label: k, value: v, id: "" }));
+    case "completion":
+      return [
+        { label: "Done", value: agg.taskDone, id: "" },
+        { label: "Pending", value: agg.taskPending, id: "" }
+      ].filter((d) => d.value > 0);
+    default:
+      return [];
+  }
+});
+const itemColors = computed(() => {
+  if (!isValueMode.value) return colors.value;
+  return xyData.value.map((d, i) => {
+    const child = directChildren.value.find((c) => c.id === d.id);
+    return child?.meta?.color ?? colors.value[i % colors.value.length];
+  });
+});
+const singleData = computed(() => {
+  return xyData.value.map((d) => ({
+    name: d.label,
+    value: d.value,
+    id: d.id
+  }));
+});
+const treemapData = computed(() => {
+  if (isValueMode.value) {
+    return directChildren.value.map((child) => ({
+      name: child.label || "Untitled",
+      value: child.meta?.number ?? 1,
+      id: child.id
+    }));
+  }
+  const children = tree.childrenOf(null);
+  if (!children.length) return [];
+  return children.map((child) => ({
+    name: child.label || "Untitled",
+    value: countDescendants(child.id) + 1,
+    id: child.id
+  }));
+});
+function countDescendants(parentId) {
+  const kids = tree.childrenOf(parentId);
+  let count = kids.length;
+  for (const k of kids) count += countDescendants(k.id);
+  return count;
+}
+const x = (_, i) => i;
+const y = (d) => d.value;
+const xTickFormat = (i) => xyData.value[i]?.label ?? "";
+const donutValue = (d) => d.value;
+const donutColor = (_d, i) => itemColors.value[i % itemColors.value.length];
+const treemapValue = (d) => d.value;
+const hasData = computed(() => {
+  if (isValueMode.value) return directChildren.value.length > 0;
+  return allEntries.value.length > 0;
+});
+const tooltipTemplate = (d) => `<strong>${d.label}</strong>: ${d.value}`;
+const valueLabel = (d) => String(d.value);
+const legendItems = computed(() => {
+  return xyData.value.map((d, i) => ({
+    label: d.label,
+    value: d.value,
+    color: itemColors.value[i % itemColors.value.length],
+    id: d.id
+  }));
+});
+function addDataPoint() {
+  const children = tree.childrenOf(null);
+  const id = tree.createChild(null, "Data point");
+  tree.updateMeta(id, {
+    number: 0,
+    color: PALETTES.default[children.length % PALETTES.default.length]
+  });
+  openNode(id, "Data point");
+}
+function onLegendItemClick(item) {
+  if (item.id) openNode(item.id, item.label);
+}
+function onLegendItemHover(itemId) {
+  setLocalState({ "chart:focused": itemId });
+}
+const remoteFocused = computed(() => {
+  const focused = /* @__PURE__ */ new Map();
+  for (const s of states.value) {
+    const fid = s["chart:focused"];
+    if (fid && s.user) {
+      focused.set(fid, { name: s.user.name ?? "", color: s.user.color ?? "#888" });
+    }
+  }
+  return focused;
+});
+defineExpose({ connectedUsers });
+</script>
+
+<template>
+  <div
+    ref="containerRef"
+    class="flex-1 overflow-y-auto"
+  >
+    <div class="max-w-5xl mx-auto p-4 sm:p-6 lg:p-8 pr-8 sm:pr-10 lg:pr-12 space-y-6">
+      <!-- Header: title + summary + config + add button -->
+      <div class="flex items-start justify-between gap-4">
+        <div class="space-y-1 min-w-0">
+          <h2 class="text-lg font-semibold text-(--ui-text-highlighted)">
+            {{ metricTitle }}
+          </h2>
+          <p
+            v-if="summaryText"
+            class="text-sm text-(--ui-text-dimmed)"
+          >
+            {{ summaryText }}
+          </p>
+        </div>
+        <div class="flex items-center gap-1.5 shrink-0">
+          <!-- Config popover -->
+          <UPopover v-if="canWrite">
+            <UButton
+              icon="i-lucide-settings-2"
+              size="xs"
+              variant="ghost"
+              color="neutral"
+              aria-label="Chart settings"
+            />
+            <template #content>
+              <div class="p-3 w-64 space-y-3">
+                <UFormField
+                  label="Chart type"
+                  size="xs"
+                >
+                  <USelectMenu
+                    :model-value="chartConfig.type"
+                    :items="TYPE_OPTIONS"
+                    size="xs"
+                    class="w-full"
+                    @update:model-value="(v) => setConfig({ chartType: v })"
+                  />
+                </UFormField>
+                <UFormField
+                  label="Metric"
+                  size="xs"
+                >
+                  <USelectMenu
+                    :model-value="chartConfig.metric"
+                    :items="METRIC_OPTIONS"
+                    size="xs"
+                    class="w-full"
+                    @update:model-value="(v) => setConfig({ chartMetric: v })"
+                  />
+                </UFormField>
+                <UFormField
+                  label="Colors"
+                  size="xs"
+                >
+                  <USelectMenu
+                    :model-value="chartConfig.colorScheme"
+                    :items="COLOR_OPTIONS"
+                    size="xs"
+                    class="w-full"
+                    @update:model-value="(v) => setConfig({ chartColorScheme: v })"
+                  />
+                </UFormField>
+                <UFormField
+                  label="Max items"
+                  size="xs"
+                >
+                  <UInputNumber
+                    :model-value="chartConfig.limit"
+                    :min="3"
+                    :max="30"
+                    size="xs"
+                    class="w-full"
+                    @update:model-value="(v) => setConfig({ chartLimit: v })"
+                  />
+                </UFormField>
+                <div class="flex items-center justify-between">
+                  <span class="text-xs text-(--ui-text-muted)">Show legend</span>
+                  <USwitch
+                    :model-value="chartConfig.showLegend"
+                    size="xs"
+                    @update:model-value="(v) => setConfig({ chartShowLegend: v })"
+                  />
+                </div>
+                <div class="flex items-center justify-between">
+                  <span class="text-xs text-(--ui-text-muted)">Show values</span>
+                  <USwitch
+                    :model-value="chartConfig.showValues"
+                    size="xs"
+                    @update:model-value="(v) => setConfig({ chartShowValues: v })"
+                  />
+                </div>
+              </div>
+            </template>
+          </UPopover>
+          <UButton
+            v-if="isValueMode && canWrite"
+            icon="i-lucide-plus"
+            size="xs"
+            variant="ghost"
+            label="Add data point"
+            @click="addDataPoint"
+          />
+        </div>
+      </div>
+
+      <!-- Unovis not installed fallback -->
+      <div
+        v-if="visError"
+        class="flex flex-col items-center justify-center py-24 text-center gap-3 text-(--ui-text-dimmed)"
+      >
+        <UIcon
+          name="i-lucide-bar-chart-3"
+          class="size-10 opacity-30"
+        />
+        <p class="text-sm text-(--ui-text-muted)">
+          Chart renderer requires <code>@unovis/vue</code>
+        </p>
+        <p class="text-xs">
+          Install it with: <code>pnpm add @unovis/vue @unovis/ts</code>
+        </p>
+      </div>
+
+      <!-- Chart area -->
+      <template v-else-if="hasData && vis">
+        <!-- XY charts: bar, stacked bar, line -->
+        <template v-if="isXY && xyData.length">
+          <component
+            :is="vis.VisXYContainer"
+            :data="xyData"
+            :padding="{ top: 10, left: 10, right: 30, bottom: 4 }"
+            class="h-96"
+            :width="width ? width - 32 : void 0"
+          >
+            <component
+              :is="vis.VisGroupedBar"
+              v-if="chartConfig.type === 'bar'"
+              :x="x"
+              :y="[y]"
+              :color="itemColors"
+              :bar-padding="0.2"
+              :rounded-corners="4"
+            />
+            <component
+              :is="vis.VisStackedBar"
+              v-else-if="chartConfig.type === 'stacked bar'"
+              :x="x"
+              :y="[y]"
+              :color="itemColors"
+              :bar-padding="0.2"
+              :rounded-corners="4"
+            />
+            <template v-else-if="chartConfig.type === 'line'">
+              <component
+                :is="vis.VisLine"
+                :x="x"
+                :y="y"
+                :color="itemColors[0]"
+              />
+              <component
+                :is="vis.VisArea"
+                :x="x"
+                :y="y"
+                :color="itemColors[0]"
+                :opacity="0.1"
+              />
+            </template>
+
+            <component
+              :is="vis.VisAxis"
+              type="x"
+              :tick-format="xTickFormat"
+            />
+            <component
+              :is="vis.VisAxis"
+              type="y"
+            />
+
+            <component
+              :is="vis.VisXYLabels"
+              v-if="chartConfig.showValues"
+              :x="x"
+              :y="y"
+              :label="valueLabel"
+              color="var(--ui-text-dimmed)"
+            />
+
+            <component
+              :is="vis.VisCrosshair"
+              :color="itemColors[0]"
+              :template="tooltipTemplate"
+            />
+            <component :is="vis.VisTooltip" />
+          </component>
+        </template>
+
+        <!-- Donut -->
+        <template v-else-if="chartConfig.type === 'donut' && singleData.length">
+          <component
+            :is="vis.VisSingleContainer"
+            :data="singleData"
+            class="h-96"
+            :width="width ? width - 32 : void 0"
+          >
+            <component
+              :is="vis.VisDonut"
+              :value="donutValue"
+              :color="donutColor"
+              :arc-width="60"
+              :corner-radius="4"
+              :pad-angle="0.02"
+            />
+          </component>
+        </template>
+
+        <!-- Treemap -->
+        <template v-else-if="chartConfig.type === 'treemap' && treemapData.length">
+          <component
+            :is="vis.VisSingleContainer"
+            :data="treemapData"
+            class="h-96"
+            :width="width ? width - 32 : void 0"
+          >
+            <component
+              :is="vis.VisTreemap"
+              :value="treemapValue"
+              :color="donutColor"
+              :rounded-corners="4"
+              :padding="2"
+              :tile-label="(d) => d.name"
+            />
+          </component>
+        </template>
+
+        <!-- Legend / data point list -->
+        <div
+          v-if="chartConfig.showLegend && legendItems.length"
+          class="flex flex-wrap gap-x-4 gap-y-1.5"
+        >
+          <div
+            v-for="item in legendItems"
+            :key="item.label"
+            class="flex items-center gap-1.5 text-xs rounded-md px-1.5 py-0.5 transition-colors"
+            :class="[
+  item.id ? 'cursor-pointer hover:bg-(--ui-bg-elevated)' : '',
+  remoteFocused.has(item.id) ? 'ring-1.5 ring-offset-1' : ''
+]"
+            :style="remoteFocused.has(item.id) ? { '--tw-ring-color': remoteFocused.get(item.id).color } : void 0"
+            @click="item.id ? onLegendItemClick(item) : void 0"
+            @pointerenter="item.id ? onLegendItemHover(item.id) : void 0"
+            @pointerleave="onLegendItemHover(null)"
+          >
+            <div
+              class="size-2.5 rounded-sm shrink-0"
+              :style="{ background: item.color }"
+            />
+            <span class="text-(--ui-text-muted)">{{ item.label || "Untitled" }}</span>
+            <span class="text-(--ui-text-dimmed) tabular-nums">{{ item.value }}</span>
+            <span
+              v-if="remoteFocused.has(item.id)"
+              class="text-[10px] ml-0.5 opacity-70"
+              :style="{ color: remoteFocused.get(item.id).color }"
+            >
+              {{ remoteFocused.get(item.id).name }}
+            </span>
+          </div>
+        </div>
+      </template>
+
+      <!-- Empty state: value mode -->
+      <div
+        v-else-if="isValueMode"
+        class="flex flex-col items-center justify-center py-24 text-(--ui-text-dimmed)"
+      >
+        <UIcon
+          name="i-lucide-plus-circle"
+          class="size-12 mb-3 opacity-20"
+        />
+        <p class="text-sm font-medium">
+          Add your first data point
+        </p>
+        <p class="text-xs mt-1 opacity-60 max-w-xs text-center">
+          Each child document becomes a bar, slice, or point on your chart. Set its value in the metadata panel.
+        </p>
+        <UButton
+          v-if="canWrite"
+          icon="i-lucide-plus"
+          size="sm"
+          variant="soft"
+          class="mt-4"
+          label="Add data point"
+          @click="addDataPoint"
+        />
+      </div>
+
+      <!-- Empty state: aggregation mode -->
+      <div
+        v-else
+        class="flex flex-col items-center justify-center py-24 text-(--ui-text-dimmed)"
+      >
+        <UIcon
+          name="i-lucide-bar-chart-3"
+          class="size-12 mb-3 opacity-20"
+        />
+        <p class="text-sm font-medium">
+          No documents to aggregate
+        </p>
+        <p class="text-xs mt-1 opacity-60 max-w-xs text-center">
+          Add child documents with metadata (tags, status, priority) to see analytics
+        </p>
+      </div>
+
+      <!-- Node panel -->
+      <ANodePanel
+        :node-id="openNodeId"
+        :node-label="openNodeLabel"
+        :child-provider="openNodeProvider"
+        :is-loading="nodePanelLoading"
+        :following-user="followingUser"
+        @close="closePanel"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+:deep(.unovis-single-container),:deep(.unovis-xy-container){--vis-crosshair-line-stroke-color:var(--ui-primary);--vis-crosshair-circle-stroke-color:var(--ui-bg);--vis-axis-grid-color:var(--ui-border);--vis-axis-tick-color:var(--ui-border);--vis-axis-tick-label-color:var(--ui-text-dimmed);--vis-tooltip-background-color:var(--ui-bg);--vis-tooltip-border-color:var(--ui-border);--vis-tooltip-text-color:var(--ui-text-highlighted)}
+</style>

package/dist/runtime/components/renderers/AChartRenderer.client.vue.d.ts

@@ -0,0 +1,17 @@
+import { type RendererBaseProps } from '../../composables/useRendererBase.js';
+type __VLS_Props = RendererBaseProps & {
+    followingUser?: string | null;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
+    connectedUsers: import("vue").ComputedRef<{
+        clientId: number;
+        name: string;
+        color: string;
+        avatar: string | undefined;
+        publicKey: any;
+    }[]>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    followingUser: string | null;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;