nuxt-observe 0.0.2

package/dist/runtime/app/components/charts/ObserveErrorRateChart.client.vue.d.ts

@@ -0,0 +1,15 @@
+import type { StatsBucket } from '../../../shared/schema/stats.js';
+/**
+ * Per-bucket error rate as a single 2px line (errorCount / count * 100, 0 for empty
+ * buckets) with a 10% area wash and an end dot carrying the latest value as the one
+ * direct label. Single series, so no legend box - the title names it. Wears the
+ * error status token: this series MEANS bad, so it never takes a categorical slot.
+ */
+type __VLS_Props = {
+    buckets: StatsBucket[];
+    bucketMs: number;
+    pending?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/charts/ObserveServiceBreakdownChart.client.d.vue.ts

@@ -0,0 +1,17 @@
+import type { StatsBucket, StatsSeriesMeta } from '../../../shared/schema/stats.js';
+/**
+ * Stacked bars by service (server-side top-8 + 'other'), colored from the validated
+ * categorical palette. Slots are assigned per entity (slug-alphabetical), not per
+ * volume rank, so a service keeps its hue when the legend order shifts between
+ * periods; 'other' always wears the muted fill. Legend is always present (>= 2
+ * series is the norm here); per-bucket values live in the tooltip + table view.
+ */
+type __VLS_Props = {
+    buckets: StatsBucket[];
+    services: StatsSeriesMeta[];
+    bucketMs: number;
+    pending?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/charts/ObserveServiceBreakdownChart.client.vue

@@ -0,0 +1,208 @@
+<script setup>
+import { ref, computed, watch, nextTick, onMounted, onBeforeUnmount } from "vue";
+import { select, scaleTime, scaleLinear, axisBottom, axisLeft, max } from "d3";
+import {
+  CHART_MARGIN,
+  CHART_HEIGHT,
+  formatCount,
+  bucketTimeFormatter,
+  roundedTopRect,
+  createTooltip,
+  attachBucketInteraction,
+  seriesColorMap
+} from "./chart-core";
+const props = defineProps({
+  buckets: { type: Array, required: true },
+  services: { type: Array, required: true },
+  bucketMs: { type: Number, required: true },
+  pending: { type: Boolean, required: false }
+});
+const host = ref(null);
+const svgRef = ref(null);
+const hasData = computed(
+  () => props.services.length > 0 && props.buckets.some((b) => Object.keys(b.byService).length > 0)
+);
+const windowMs = computed(() => props.buckets.length * props.bucketMs);
+const timeLabel = computed(() => bucketTimeFormatter(props.bucketMs, windowMs.value));
+const colorOf = computed(() => seriesColorMap(props.services));
+const tableRows = computed(() => props.buckets.filter((b) => Object.keys(b.byService).length > 0));
+const stackTotal = (b) => props.services.reduce((sum, s) => sum + (b.byService[s.id] ?? 0), 0);
+let tooltip;
+let interaction;
+let resizeObserver;
+let crosshairEl = null;
+const hitState = { buckets: [], bucketMs: 1, xFor: () => 0, plotWidth: 1 };
+function draw() {
+  const svgEl = svgRef.value;
+  const hostEl = host.value;
+  if (!svgEl || !hostEl) return;
+  const width = hostEl.clientWidth;
+  if (width <= 0) return;
+  const plotW = Math.max(1, width - CHART_MARGIN.left - CHART_MARGIN.right);
+  const plotH = CHART_HEIGHT - CHART_MARGIN.top - CHART_MARGIN.bottom;
+  const svg = select(svgEl).attr("width", width).attr("height", CHART_HEIGHT);
+  svg.selectAll("*").remove();
+  crosshairEl = null;
+  const buckets = props.buckets;
+  hitState.buckets = hasData.value ? buckets : [];
+  hitState.bucketMs = props.bucketMs;
+  hitState.plotWidth = plotW;
+  if (!buckets.length || !hasData.value) return;
+  const t0 = buckets[0].t;
+  const t1 = buckets[buckets.length - 1].t + props.bucketMs;
+  const x = scaleTime().domain([new Date(t0), new Date(t1)]).range([0, plotW]);
+  const y = scaleLinear().domain([0, Math.max(1, max(buckets, stackTotal) ?? 0)]).nice(4).range([plotH, 0]);
+  hitState.xFor = (t) => x(new Date(t));
+  const g = svg.append("g").attr("transform", `translate(${CHART_MARGIN.left},${CHART_MARGIN.top})`);
+  const yTicks = y.ticks(4).filter(Number.isInteger);
+  g.append("g").attr("class", "observe-grid").selectAll("line").data(yTicks.filter((t) => t > 0)).join("line").attr("x1", 0).attr("x2", plotW).attr("y1", (d) => y(d)).attr("y2", (d) => y(d));
+  g.append("g").attr("transform", `translate(0,${plotH})`).call(axisBottom(x).ticks(Math.max(3, Math.min(8, Math.floor(plotW / 90)))).tickSizeOuter(0));
+  g.append("g").call(axisLeft(y).tickValues(yTicks).tickSize(0).tickPadding(8).tickFormat((d) => formatCount(+d))).call((sel) => sel.select(".domain").remove());
+  const bars = g.append("g");
+  for (const b of buckets) {
+    const x0 = x(new Date(b.t));
+    const wFull = x(new Date(b.t + props.bucketMs)) - x0;
+    const gap = wFull >= 4 ? 2 : wFull >= 2 ? 1 : 0;
+    const w = Math.max(wFull - gap, Math.min(wFull, 1));
+    const segments = props.services.map((s) => ({ v: b.byService[s.id] ?? 0, color: colorOf.value.get(s.id) })).filter((s) => s.v > 0);
+    if (!segments.length) continue;
+    let cursor = plotH;
+    segments.forEach((s, i) => {
+      const h = plotH - y(s.v);
+      const top = cursor - h;
+      if (i === segments.length - 1) {
+        bars.append("path").attr("d", roundedTopRect(x0, top, w, h, 3)).style("fill", s.color);
+      } else {
+        const drawnH = Math.max(h - 1, 0.5);
+        bars.append("rect").attr("x", x0).attr("y", cursor - drawnH).attr("width", w).attr("height", drawnH).style("fill", s.color);
+      }
+      cursor = top;
+    });
+  }
+  crosshairEl = g.append("line").attr("class", "observe-crosshair").attr("y1", 0).attr("y2", plotH).style("display", "none").node();
+}
+function handleHit(bucket, _index, cx) {
+  if (crosshairEl) {
+    crosshairEl.style.display = "";
+    crosshairEl.setAttribute("x1", String(cx));
+    crosshairEl.setAttribute("x2", String(cx));
+  }
+  const rows = props.services.map((s) => ({ meta: s, v: bucket.byService[s.id] ?? 0 })).filter((r) => r.v > 0).sort((a, b) => b.v - a.v).map((r) => ({ color: colorOf.value.get(r.meta.id), label: r.meta.name, value: formatCount(r.v) }));
+  tooltip?.show(cx, timeLabel.value(bucket.t), [
+    ...rows,
+    { label: "total", value: formatCount(stackTotal(bucket)) }
+  ]);
+}
+function handleClear() {
+  if (crosshairEl) crosshairEl.style.display = "none";
+  tooltip?.hide();
+}
+onMounted(async () => {
+  await nextTick();
+  if (host.value) {
+    tooltip = createTooltip(host.value);
+    resizeObserver = new ResizeObserver(() => draw());
+    resizeObserver.observe(host.value);
+  }
+  if (svgRef.value) {
+    interaction = attachBucketInteraction(svgRef.value, hitState, handleHit, handleClear);
+  }
+  draw();
+});
+watch(() => [props.buckets, props.services, props.bucketMs], () => {
+  interaction?.clear();
+  draw();
+});
+onBeforeUnmount(() => {
+  interaction?.destroy();
+  tooltip?.destroy();
+  resizeObserver?.disconnect();
+  if (svgRef.value) select(svgRef.value).selectAll("*").remove();
+});
+</script>
+
+<template>
+  <section>
+    <div class="flex items-baseline justify-between gap-4 mb-2">
+      <h2 class="text-xs font-semibold uppercase tracking-wider text-muted">
+        By service
+      </h2>
+      <div class="flex flex-wrap items-center justify-end gap-x-3 gap-y-1 text-xs text-muted min-w-0">
+        <span
+          v-for="s in services"
+          :key="s.id"
+          class="flex items-center gap-1.5"
+        >
+          <span
+            class="size-2 rounded-full shrink-0"
+            :style="{ background: colorOf.get(s.id) }"
+          />
+          <span class="truncate max-w-32">{{ s.name }}</span>
+        </span>
+      </div>
+    </div>
+
+    <UCard :ui="{ body: 'p-2 sm:p-3' }">
+      <div
+        ref="host"
+        class="relative"
+      >
+        <svg
+          v-show="hasData"
+          ref="svgRef"
+          class="observe-chart block w-full transition-opacity"
+          :class="{ 'opacity-60': pending }"
+          tabindex="0"
+          role="img"
+          aria-label="Event volume over time, stacked by service. Use arrow keys to read values per time bucket."
+        />
+        <USkeleton
+          v-if="pending && !hasData"
+          class="h-60 w-full"
+        />
+        <p
+          v-else-if="!hasData"
+          class="h-60 flex items-center justify-center text-sm text-muted"
+        >
+          No per-service data in this window.
+        </p>
+
+        <!-- sr-only on a wrapper div, never on the table: a <caption> belongs to the
+             table wrapper box and escapes the table's own overflow clip in Firefox. -->
+        <div
+          v-if="hasData"
+          class="sr-only"
+        >
+          <table>
+            <caption>Event volume by service per time bucket</caption>
+            <thead>
+              <tr>
+                <th>Time</th>
+                <th
+                  v-for="s in services"
+                  :key="s.id"
+                >
+                  {{ s.name }}
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr
+                v-for="b in tableRows"
+                :key="b.t"
+              >
+                <td>{{ timeLabel(b.t) }}</td>
+                <td
+                  v-for="s in services"
+                  :key="s.id"
+                >
+                  {{ b.byService[s.id] ?? 0 }}
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </UCard>
+  </section>
+</template>

package/dist/runtime/app/components/charts/ObserveServiceBreakdownChart.client.vue.d.ts

@@ -0,0 +1,17 @@
+import type { StatsBucket, StatsSeriesMeta } from '../../../shared/schema/stats.js';
+/**
+ * Stacked bars by service (server-side top-8 + 'other'), colored from the validated
+ * categorical palette. Slots are assigned per entity (slug-alphabetical), not per
+ * volume rank, so a service keeps its hue when the legend order shifts between
+ * periods; 'other' always wears the muted fill. Legend is always present (>= 2
+ * series is the norm here); per-bucket values live in the tooltip + table view.
+ */
+type __VLS_Props = {
+    buckets: StatsBucket[];
+    services: StatsSeriesMeta[];
+    bucketMs: number;
+    pending?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/charts/ObserveVersionAdoptionChart.client.d.vue.ts

@@ -0,0 +1,14 @@
+import type { VersionCompare } from '../../../shared/schema/rollout.js';
+/**
+ * Adoption over time (CP13): stacked bars of event volume by version, one categorical
+ * layer per version. Mirrors the CP8 service-breakdown chart's lifecycle and palette;
+ * .client.vue because d3 is SSR-unsafe. The bucketMs is derived from the contiguous
+ * bucket start times rather than passed, since the compare payload is already zero-filled.
+ */
+type __VLS_Props = {
+    compare: VersionCompare | null | undefined;
+    pending?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/charts/ObserveVersionAdoptionChart.client.vue

@@ -0,0 +1,208 @@
+<script setup>
+import { ref, computed, watch, nextTick, onMounted, onBeforeUnmount } from "vue";
+import { select, scaleTime, scaleLinear, axisBottom, axisLeft, max } from "d3";
+import {
+  CHART_MARGIN,
+  CHART_HEIGHT,
+  formatCount,
+  bucketTimeFormatter,
+  roundedTopRect,
+  createTooltip,
+  attachBucketInteraction,
+  seriesColorMap
+} from "./chart-core";
+const props = defineProps({
+  compare: { type: null, required: true },
+  pending: { type: Boolean, required: false }
+});
+const host = ref(null);
+const svgRef = ref(null);
+const bucketStarts = computed(() => props.compare?.buckets ?? []);
+const series = computed(() => props.compare?.series ?? []);
+const bucketMs = computed(() => bucketStarts.value.length > 1 ? bucketStarts.value[1] - bucketStarts.value[0] : 1);
+const hasData = computed(() => series.value.some((s) => s.volume.some((v) => v > 0)));
+const windowMs = computed(() => bucketStarts.value.length * bucketMs.value);
+const timeLabel = computed(() => bucketTimeFormatter(bucketMs.value, windowMs.value));
+const colorOf = computed(() => seriesColorMap(series.value.map((s) => ({ id: s.version, slug: s.version }))));
+const hitBuckets = computed(
+  () => bucketStarts.value.map((t) => ({ t, count: 0, errorCount: 0, warnCount: 0, byService: {} }))
+);
+const stackTotalAt = (i) => series.value.reduce((sum, s) => sum + (s.volume[i] ?? 0), 0);
+const tableIndexes = computed(() => bucketStarts.value.map((_, i) => i).filter((i) => stackTotalAt(i) > 0));
+let tooltip;
+let interaction;
+let resizeObserver;
+let crosshairEl = null;
+const hitState = { buckets: [], bucketMs: 1, xFor: () => 0, plotWidth: 1 };
+function draw() {
+  const svgEl = svgRef.value;
+  const hostEl = host.value;
+  if (!svgEl || !hostEl) return;
+  const width = hostEl.clientWidth;
+  if (width <= 0) return;
+  const plotW = Math.max(1, width - CHART_MARGIN.left - CHART_MARGIN.right);
+  const plotH = CHART_HEIGHT - CHART_MARGIN.top - CHART_MARGIN.bottom;
+  const svg = select(svgEl).attr("width", width).attr("height", CHART_HEIGHT);
+  svg.selectAll("*").remove();
+  crosshairEl = null;
+  const starts = bucketStarts.value;
+  hitState.buckets = hasData.value ? hitBuckets.value : [];
+  hitState.bucketMs = bucketMs.value;
+  hitState.plotWidth = plotW;
+  if (!starts.length || !hasData.value) return;
+  const t0 = starts[0];
+  const t1 = starts[starts.length - 1] + bucketMs.value;
+  const x = scaleTime().domain([new Date(t0), new Date(t1)]).range([0, plotW]);
+  const y = scaleLinear().domain([0, Math.max(1, max(starts, (_, i) => stackTotalAt(i)) ?? 0)]).nice(4).range([plotH, 0]);
+  hitState.xFor = (t) => x(new Date(t));
+  const g = svg.append("g").attr("transform", `translate(${CHART_MARGIN.left},${CHART_MARGIN.top})`);
+  const yTicks = y.ticks(4).filter(Number.isInteger);
+  g.append("g").attr("class", "observe-grid").selectAll("line").data(yTicks.filter((t) => t > 0)).join("line").attr("x1", 0).attr("x2", plotW).attr("y1", (d) => y(d)).attr("y2", (d) => y(d));
+  g.append("g").attr("transform", `translate(0,${plotH})`).call(axisBottom(x).ticks(Math.max(3, Math.min(8, Math.floor(plotW / 90)))).tickSizeOuter(0));
+  g.append("g").call(axisLeft(y).tickValues(yTicks).tickSize(0).tickPadding(8).tickFormat((d) => formatCount(+d))).call((sel) => sel.select(".domain").remove());
+  const bars = g.append("g");
+  starts.forEach((t, i) => {
+    const x0 = x(new Date(t));
+    const wFull = x(new Date(t + bucketMs.value)) - x0;
+    const gap = wFull >= 4 ? 2 : wFull >= 2 ? 1 : 0;
+    const w = Math.max(wFull - gap, Math.min(wFull, 1));
+    const segments = series.value.map((s) => ({ v: s.volume[i] ?? 0, color: colorOf.value.get(s.version) })).filter((s) => s.v > 0);
+    if (!segments.length) return;
+    let cursor = plotH;
+    segments.forEach((s, si) => {
+      const h = plotH - y(s.v);
+      const top = cursor - h;
+      if (si === segments.length - 1) {
+        bars.append("path").attr("d", roundedTopRect(x0, top, w, h, 3)).style("fill", s.color);
+      } else {
+        const drawnH = Math.max(h - 1, 0.5);
+        bars.append("rect").attr("x", x0).attr("y", cursor - drawnH).attr("width", w).attr("height", drawnH).style("fill", s.color);
+      }
+      cursor = top;
+    });
+  });
+  crosshairEl = g.append("line").attr("class", "observe-crosshair").attr("y1", 0).attr("y2", plotH).style("display", "none").node();
+}
+function handleHit(bucket, index, cx) {
+  if (crosshairEl) {
+    crosshairEl.style.display = "";
+    crosshairEl.setAttribute("x1", String(cx));
+    crosshairEl.setAttribute("x2", String(cx));
+  }
+  const rows = series.value.map((s) => ({ version: s.version, v: s.volume[index] ?? 0 })).filter((r) => r.v > 0).sort((a, b) => b.v - a.v).map((r) => ({ color: colorOf.value.get(r.version), label: r.version, value: formatCount(r.v) }));
+  tooltip?.show(cx, timeLabel.value(bucket.t), [
+    ...rows,
+    { label: "total", value: formatCount(stackTotalAt(index)) }
+  ]);
+}
+function handleClear() {
+  if (crosshairEl) crosshairEl.style.display = "none";
+  tooltip?.hide();
+}
+onMounted(async () => {
+  await nextTick();
+  if (host.value) {
+    tooltip = createTooltip(host.value);
+    resizeObserver = new ResizeObserver(() => draw());
+    resizeObserver.observe(host.value);
+  }
+  if (svgRef.value) {
+    interaction = attachBucketInteraction(svgRef.value, hitState, handleHit, handleClear);
+  }
+  draw();
+});
+watch(() => props.compare, () => {
+  interaction?.clear();
+  draw();
+});
+onBeforeUnmount(() => {
+  interaction?.destroy();
+  tooltip?.destroy();
+  resizeObserver?.disconnect();
+  if (svgRef.value) select(svgRef.value).selectAll("*").remove();
+});
+</script>
+
+<template>
+  <section>
+    <div class="flex items-baseline justify-between gap-4 mb-2">
+      <h2 class="text-xs font-semibold uppercase tracking-wider text-muted">
+        Adoption
+      </h2>
+      <div class="flex flex-wrap items-center justify-end gap-x-3 gap-y-1 text-xs text-muted min-w-0">
+        <span
+          v-for="s in series"
+          :key="s.version"
+          class="flex items-center gap-1.5"
+        >
+          <span
+            class="size-2 rounded-full shrink-0"
+            :style="{ background: colorOf.get(s.version) }"
+          />
+          <span class="truncate max-w-32">{{ s.version }}</span>
+        </span>
+      </div>
+    </div>
+
+    <UCard :ui="{ body: 'p-2 sm:p-3' }">
+      <div
+        ref="host"
+        class="relative"
+      >
+        <svg
+          v-show="hasData"
+          ref="svgRef"
+          class="observe-chart block w-full transition-opacity"
+          :class="{ 'opacity-60': pending }"
+          tabindex="0"
+          role="img"
+          aria-label="Event volume over time, stacked by version. Use arrow keys to read values per time bucket."
+        />
+        <USkeleton
+          v-if="pending && !hasData"
+          class="h-60 w-full"
+        />
+        <p
+          v-else-if="!hasData"
+          class="h-60 flex items-center justify-center text-sm text-muted"
+        >
+          No versioned volume in this window.
+        </p>
+
+        <div
+          v-if="hasData"
+          class="sr-only"
+        >
+          <table>
+            <caption>Event volume by version per time bucket</caption>
+            <thead>
+              <tr>
+                <th>Time</th>
+                <th
+                  v-for="s in series"
+                  :key="s.version"
+                >
+                  {{ s.version }}
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr
+                v-for="i in tableIndexes"
+                :key="i"
+              >
+                <td>{{ timeLabel(bucketStarts[i]) }}</td>
+                <td
+                  v-for="s in series"
+                  :key="s.version"
+                >
+                  {{ s.volume[i] ?? 0 }}
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </UCard>
+  </section>
+</template>

package/dist/runtime/app/components/charts/ObserveVersionAdoptionChart.client.vue.d.ts

@@ -0,0 +1,14 @@
+import type { VersionCompare } from '../../../shared/schema/rollout.js';
+/**
+ * Adoption over time (CP13): stacked bars of event volume by version, one categorical
+ * layer per version. Mirrors the CP8 service-breakdown chart's lifecycle and palette;
+ * .client.vue because d3 is SSR-unsafe. The bucketMs is derived from the contiguous
+ * bucket start times rather than passed, since the compare payload is already zero-filled.
+ */
+type __VLS_Props = {
+    compare: VersionCompare | null | undefined;
+    pending?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/charts/ObserveVersionCompareChart.client.d.vue.ts

@@ -0,0 +1,14 @@
+import type { VersionCompare } from '../../../shared/schema/rollout.js';
+/**
+ * Error rate by version (CP13): one line per version of its per-bucket error rate,
+ * drawn only across buckets where that version had events (d3 line.defined gaps), so a
+ * version live for part of the window does not read as 0% before it appeared. Mirrors
+ * the CP8 error-rate chart's lifecycle; .client.vue because d3 is SSR-unsafe.
+ */
+type __VLS_Props = {
+    compare: VersionCompare | null | undefined;
+    pending?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;