LeoVasanko
3c9ef04ffd
Beads now take their connector's color — accent for internal links, plain text color for external ones (matching the tconn-exit styling) — and render as an elongated pulse along the direction of travel instead of a plain dot: a rounded capsule with a gradient-faded tail, rotated to the edge's angle (cached per flow). Flow objects carry an 'external' tag from buildFlows; the gradients live in the svg defs with stop colors resolved from CSS so theme variables apply.
353 lines
14 KiB
Vue
353 lines
14 KiB
Vue
<script setup>
|
||
/**
|
||
* Radial transition map for a pre-filtered time range.
|
||
*
|
||
* The parent filters transitions, views and visits to the selected range
|
||
* before passing them in; `window` carries the absolute [t0, t1) window
|
||
* so the visual scale can normalize against a one-week reference.
|
||
*/
|
||
import { computed, onBeforeUnmount, onMounted, shallowRef, watch } from 'vue'
|
||
import { DAY } from './analytics/time.js'
|
||
import { formatCount, formatReadTime } from './analytics/format.js'
|
||
import {
|
||
TNODE_W,
|
||
TNODE_H,
|
||
BEAD_R,
|
||
BEAD_LEN,
|
||
buildTransitionGraph,
|
||
} from './analytics/transitions.js'
|
||
|
||
const props = defineProps({
|
||
data: { type: Object, default: null },
|
||
window: { type: Object, required: true },
|
||
pageTree: { type: Array, default: null },
|
||
favicons: { type: Object, default: null },
|
||
})
|
||
|
||
// origin -> /_f/... icon URL, keyed by the node's origin (source/exit
|
||
// pills only; UTM-tagged source nodes without an https origin stay
|
||
// text-only).
|
||
const extFavicon = (x) => {
|
||
if (!x.path?.startsWith('https://')) return null
|
||
try {
|
||
return props.favicons?.[new URL(x.path).origin] || null
|
||
} catch {
|
||
return null
|
||
}
|
||
}
|
||
|
||
const dayScale = computed(() => {
|
||
const { t0, t1 } = props.window
|
||
// Convert raw counts to a daily hit rate (hits/day).
|
||
if (t0 != null && t1 != null) return DAY / (t1 - t0)
|
||
// 'all': scale by the actual data span, but never less than the 30-day
|
||
// minimum the plot enforces, so sparse young data is not over-amplified.
|
||
const times = new Set()
|
||
for (const buckets of Object.values(props.data?.views || {})) {
|
||
for (const k of Object.keys(buckets)) times.add(Date.parse(k))
|
||
}
|
||
const arr = [...times]
|
||
if (arr.length < 2) return 1
|
||
const span = Math.max(...arr) - Math.min(...arr)
|
||
return DAY / Math.max(span, 30 * DAY)
|
||
})
|
||
|
||
const graph = computed(() =>
|
||
props.data
|
||
? buildTransitionGraph(props.data, props.pageTree, props.data.visits || [], dayScale.value)
|
||
: null,
|
||
)
|
||
|
||
// Bead animation: every bead is simulated independently in JS. Each flow
|
||
// (one per edge direction) emits a bead every `interval` seconds; beads
|
||
// cross their segment in a constant TRAVERSAL_S seconds (speed relative
|
||
// to span length) and are dropped at the end.
|
||
// There is deliberately no cap on beads in flight.
|
||
// Emitters persist across data reloads, keyed by flow.key: an unchanged
|
||
// link keeps its emission phase and in-flight beads (tracked by progress,
|
||
// not absolute time), so a count change elsewhere never reshuffles them.
|
||
const beads = shallowRef([])
|
||
let rafId = 0
|
||
const emitters = new Map() // flow.key -> { flow, interval, next, alive }
|
||
const live = [] // { e, p } — beads in flight, p = progress 0..1
|
||
let lastTick = 0
|
||
|
||
const MAX_BEAD_RATE = 120 // upper bound on total beads per second
|
||
const TRAVERSAL_S = 0.4 // seconds to cross any segment, end to end
|
||
|
||
const syncBeads = (flows) => {
|
||
const reduced = matchMedia('(prefers-reduced-motion: reduce)').matches
|
||
if (!flows?.length || reduced) {
|
||
emitters.clear()
|
||
live.length = 0
|
||
beads.value = []
|
||
return
|
||
}
|
||
// Cap the total bead emission rate so a busy range cannot spawn enough
|
||
// beads to kill the page. Existing per-range time scaling is preserved;
|
||
// this is only a proportional emergency throttle when the limit is hit.
|
||
const totalRate = flows.reduce((s, f) => s + 1 / f.interval, 0)
|
||
const scale = totalRate > MAX_BEAD_RATE ? MAX_BEAD_RATE / totalRate : 1
|
||
|
||
const now = performance.now()
|
||
const seen = new Set()
|
||
for (const flow of flows) {
|
||
seen.add(flow.key)
|
||
const interval = (flow.interval / scale) * 1000
|
||
const e = emitters.get(flow.key)
|
||
if (e) {
|
||
e.flow = flow // pick up new geometry/rate, keep the phase
|
||
e.interval = interval
|
||
continue
|
||
}
|
||
// New emitter: pre-fill the traversal with evenly spaced beads (random
|
||
// phase), so the flow appears already running instead of empty.
|
||
const phase = Math.random() * interval
|
||
const dp = interval / 1000 / TRAVERSAL_S
|
||
const ne = { flow, interval, next: now + phase, alive: true }
|
||
for (let p = 1 - phase / 1000 / TRAVERSAL_S; p > 0; p -= dp) {
|
||
live.push({ e: ne, p })
|
||
}
|
||
emitters.set(flow.key, ne)
|
||
}
|
||
for (const [key, e] of emitters) {
|
||
if (!seen.has(key)) {
|
||
e.alive = false
|
||
emitters.delete(key)
|
||
}
|
||
}
|
||
for (let i = live.length - 1; i >= 0; i--) {
|
||
if (!live[i].e.alive) live.splice(i, 1)
|
||
}
|
||
}
|
||
|
||
const tick = (t) => {
|
||
// Long gaps (sleep, hidden tab) must not spawn a bead per missed interval
|
||
// just to drop them all in the same tick: clamp the step (every in-flight
|
||
// bead simply completes) and fast-forward each emitter's schedule to its
|
||
// next future slot, keeping the phase.
|
||
const dt = lastTick ? Math.min((t - lastTick) / 1000, TRAVERSAL_S) : 0
|
||
lastTick = t
|
||
for (const e of emitters.values()) {
|
||
if (e.next < t - e.interval) {
|
||
e.next = t + (((e.next - t) % e.interval) + e.interval) % e.interval
|
||
}
|
||
while (e.next <= t) {
|
||
live.push({ e, p: 0 })
|
||
e.next += e.interval
|
||
}
|
||
}
|
||
const out = []
|
||
for (let i = live.length - 1; i >= 0; i--) {
|
||
const b = live[i]
|
||
b.p += dt / TRAVERSAL_S
|
||
if (b.p >= 1) {
|
||
live.splice(i, 1)
|
||
continue
|
||
}
|
||
const f = b.e.flow
|
||
// The pulse is elongated along the direction of travel (constant per
|
||
// flow) and colored like its connector (external edges use --text).
|
||
if (f.deg === undefined) {
|
||
f.deg = (Math.atan2(f.y2 - f.y1, f.x2 - f.x1) * 180) / Math.PI
|
||
}
|
||
out.push({
|
||
x: f.x1 + (f.x2 - f.x1) * b.p,
|
||
y: f.y1 + (f.y2 - f.y1) * b.p,
|
||
deg: f.deg,
|
||
ext: f.external,
|
||
})
|
||
}
|
||
beads.value = out
|
||
rafId = requestAnimationFrame(tick)
|
||
}
|
||
|
||
watch(() => graph.value?.flows, syncBeads, { immediate: true })
|
||
onMounted(() => {
|
||
if (!matchMedia('(prefers-reduced-motion: reduce)').matches) {
|
||
rafId = requestAnimationFrame(tick)
|
||
}
|
||
})
|
||
onBeforeUnmount(() => cancelAnimationFrame(rafId))
|
||
|
||
// The svg never renders larger than its natural size (1 viewBox unit = 1
|
||
// px, max-width below): the layout geometry is designed in pixel-like
|
||
// units, and upscaling would blow up the pills around their text. Narrow
|
||
// panels scale the graph down to fit (width: 100%), text along with it.
|
||
|
||
// Pill text is not truncated: text is clipped at the pill's rounded border
|
||
// (clipPath per node, inset a few units for padding). Captions center when
|
||
// they fit; overlong ones anchor left so their beginning (not their
|
||
// middle) survives the clip. Width estimate: ~0.52 em per glyph.
|
||
const fitsPill = (label, fontPx = 19) => label.length * 0.52 * fontPx <= TNODE_W - 16
|
||
|
||
// With a favicon the label leaves room for the icon at the pill's left
|
||
// and is always left-anchored past it.
|
||
const labelX = (x) =>
|
||
extFavicon(x) ? x.x - TNODE_W / 2 + 36 : fitsPill(x.label) ? x.x : x.x - TNODE_W / 2 + 8
|
||
const labelAnchor = (x) => (!extFavicon(x) && fitsPill(x.label) ? 'middle' : 'start')
|
||
|
||
const countLabel = (n) =>
|
||
n.readSec ? `${formatCount(n.views)}×${formatReadTime(n.readSec)}` : formatCount(n.views)
|
||
</script>
|
||
|
||
<template>
|
||
<section v-if="graph">
|
||
<svg class="tmap" :style="{ maxWidth: `${graph.bounds.x1 - graph.bounds.x0}px` }" :viewBox="`${graph.bounds.x0} ${graph.bounds.y0} ${graph.bounds.x1 - graph.bounds.x0} ${graph.bounds.y1 - graph.bounds.y0}`"
|
||
role="img" aria-label="map of transitions between pages">
|
||
<defs>
|
||
<!-- Pulse gradient: opaque head at the bead position (local origin),
|
||
fading tail trailing behind it (stop-color comes from CSS so
|
||
theme vars resolve). -->
|
||
<linearGradient id="tbead-grad">
|
||
<stop offset="0" class="tbead-stop" stop-opacity="0" />
|
||
<stop offset="0.55" class="tbead-stop" stop-opacity="0.5" />
|
||
<stop offset="1" class="tbead-stop" stop-opacity="1" />
|
||
</linearGradient>
|
||
<linearGradient id="tbead-grad-exit">
|
||
<stop offset="0" class="tbead-stop-exit" stop-opacity="0" />
|
||
<stop offset="0.55" class="tbead-stop-exit" stop-opacity="0.5" />
|
||
<stop offset="1" class="tbead-stop-exit" stop-opacity="1" />
|
||
</linearGradient>
|
||
</defs>
|
||
<path v-for="(a, i) in graph.arcs" :key="'a' + i"
|
||
:id="`tarc${i}`" :d="a.d" :class="['tarc', a.top && 'tarc-top']" />
|
||
<template v-for="(a, i) in graph.arcs" :key="'t' + i">
|
||
<path v-if="a.ld" :id="`tarcl${i}`" :d="a.ld" fill="none" stroke="none" />
|
||
<text v-if="a.ld" class="tarclabel" :class="{ 'tarclabel-top': a.top }"><textPath :href="`#tarcl${i}`" startOffset="0">{{ a.label }}</textPath></text>
|
||
</template>
|
||
<path v-for="(e, i) in graph.edges" :key="'e' + i"
|
||
:d="e.d" :class="['tconn', e.external && 'tconn-exit']">
|
||
<title>{{ e.title }}</title>
|
||
</path>
|
||
<rect v-for="(b, i) in beads" :key="'b' + i"
|
||
:x="-BEAD_LEN" :y="-BEAD_R" :width="BEAD_LEN" :height="2 * BEAD_R" :rx="BEAD_R"
|
||
:fill="b.ext ? 'url(#tbead-grad-exit)' : 'url(#tbead-grad)'"
|
||
:class="['tbead', b.ext && 'tbead-exit']"
|
||
:transform="`translate(${b.x} ${b.y}) rotate(${b.deg})`" />
|
||
<g v-for="(x, i) in graph.extNodes" :key="'x' + i">
|
||
<clipPath :id="`xclip${i}`">
|
||
<rect :x="x.x - TNODE_W/2 + 6" :y="x.y - TNODE_H/2" :width="TNODE_W - 12"
|
||
:height="TNODE_H" :rx="TNODE_H/2 - 4" />
|
||
</clipPath>
|
||
<a v-if="x.href" :href="x.href" target="_blank" rel="noopener">
|
||
<title>{{ x.path }}</title>
|
||
<rect :x="x.x - TNODE_W/2" :y="x.y - TNODE_H/2" :width="TNODE_W" :height="TNODE_H" :rx="TNODE_H/2"
|
||
:class="['txnode', x.kind === 'source' ? 'txnode-source' : 'txnode-exit']" />
|
||
<g :clip-path="`url(#xclip${i})`">
|
||
<image v-if="extFavicon(x)" :href="extFavicon(x)" :x="x.x - TNODE_W/2 + 12" :y="x.y - TNODE_H*0.16 - 11" width="22" height="22" />
|
||
<text :x="labelX(x)" :y="x.y - TNODE_H*0.16" class="tnodeslug" dominant-baseline="middle" :style="{ textAnchor: labelAnchor(x) }">{{ x.label }}</text>
|
||
<text :x="x.x" :y="x.y + TNODE_H*0.24" class="tnodecount" dominant-baseline="middle">{{ formatCount(x.count) }}</text>
|
||
</g>
|
||
</a>
|
||
<g v-else>
|
||
<title>{{ x.path }}</title>
|
||
<rect :x="x.x - TNODE_W/2" :y="x.y - TNODE_H/2" :width="TNODE_W" :height="TNODE_H" :rx="TNODE_H/2"
|
||
:class="['txnode', x.kind === 'source' ? 'txnode-source' : 'txnode-exit']" />
|
||
<g :clip-path="`url(#xclip${i})`">
|
||
<image v-if="extFavicon(x)" :href="extFavicon(x)" :x="x.x - TNODE_W/2 + 12" :y="x.y - TNODE_H*0.16 - 11" width="22" height="22" />
|
||
<text :x="labelX(x)" :y="x.y - TNODE_H*0.16" class="tnodeslug" dominant-baseline="middle" :style="{ textAnchor: labelAnchor(x) }">{{ x.label }}</text>
|
||
<text :x="x.x" :y="x.y + TNODE_H*0.24" class="tnodecount" dominant-baseline="middle">{{ formatCount(x.count) }}</text>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
<g v-for="(n, i) in graph.nodes" :key="n.path">
|
||
<clipPath :id="`nclip${i}`">
|
||
<rect :x="n.x - TNODE_W/2 + 6" :y="n.y - TNODE_H/2" :width="TNODE_W - 12"
|
||
:height="TNODE_H" :rx="TNODE_H/2 - 4" />
|
||
</clipPath>
|
||
<a :href="n.path">
|
||
<title>{{ n.title }}</title>
|
||
<rect :x="n.x - TNODE_W/2" :y="n.y - TNODE_H/2" :width="TNODE_W" :height="TNODE_H" :rx="TNODE_H/2" class="tnode" />
|
||
<g :clip-path="`url(#nclip${i})`">
|
||
<text :x="fitsPill(n.label) ? n.x : n.x - TNODE_W/2 + 8" :y="n.y - TNODE_H*0.16" class="tnodeslug" dominant-baseline="middle" :style="{ textAnchor: fitsPill(n.label) ? 'middle' : 'start' }">{{ n.label }}</text>
|
||
<text :x="n.x" :y="n.y + TNODE_H*0.24" class="tnodecount" dominant-baseline="middle">
|
||
{{ countLabel(n) }}
|
||
</text>
|
||
</g>
|
||
</a>
|
||
</g>
|
||
</svg>
|
||
</section>
|
||
</template>
|
||
|
||
<style scoped>
|
||
/* Transition map: radial graph of internal page-to-page transitions. */
|
||
.tmap {
|
||
display: block;
|
||
width: 100%;
|
||
/* max-width is set inline to the natural content width (px = viewBox
|
||
units), so wide panels never upscale the graph beyond 1:1. */
|
||
margin: 0 auto;
|
||
}
|
||
.tmap .tconn {
|
||
fill: var(--accent);
|
||
opacity: 0.4; /* uniform, not strength-encoded: width carries that */
|
||
}
|
||
.tmap .tconn-exit {
|
||
fill: var(--text);
|
||
}
|
||
.tmap .tbead {
|
||
filter: drop-shadow(0 0 2.5px var(--accent));
|
||
}
|
||
.tmap .tbead-exit {
|
||
filter: drop-shadow(0 0 2.5px var(--text));
|
||
}
|
||
.tmap .tbead-stop { stop-color: var(--accent); }
|
||
.tmap .tbead-stop-exit { stop-color: var(--text); }
|
||
.tmap .txnode {
|
||
/* External source/exit pills: plain white on every theme, with a hairline
|
||
so the pill stays visible on a white page. */
|
||
fill: #fff;
|
||
stroke: var(--line, rgba(128, 128, 128, 0.4));
|
||
stroke-width: 1;
|
||
}
|
||
.tmap .txnode-source { fill: #fff; }
|
||
.tmap .txnode-exit { fill: #fff; }
|
||
/* Branch lanes: one wide concentric arc per path prefix, running behind
|
||
the node pills around the fan's circle center; parent levels sit one
|
||
indent (radius step) outward. Each lane's label follows a short guide
|
||
arc across the first inter-node gap (the part pills never cover). */
|
||
.tmap .tarc {
|
||
fill: none;
|
||
stroke: var(--muted);
|
||
stroke-width: 16;
|
||
opacity: 0.25;
|
||
}
|
||
.tmap .tarc-top { stroke-width: 24; }
|
||
/* Lane labels are left-aligned: each guide arc starts just past the source
|
||
pill's edge, the earliest point where the text is visible. */
|
||
.tmap .tarclabel {
|
||
fill: var(--muted);
|
||
font-size: 13px;
|
||
text-anchor: start;
|
||
}
|
||
/* The top lane is 50% thicker; its 🏠︎ label scales along. */
|
||
.tmap .tarclabel-top {
|
||
font-size: 19.5px;
|
||
}
|
||
.tmap .tnode {
|
||
fill: var(--accent);
|
||
stroke: none;
|
||
}
|
||
/* Text sizes are viewBox units: they shrink along with the graph on
|
||
narrow panels. Overlong labels are clipped at the pill border. The text
|
||
is always black, on accent (internal pills) and white (external pills)
|
||
alike — black stands out from any accent color, so the coloring stays
|
||
stable across themes and light/dark modes. */
|
||
.tmap .tnodeslug {
|
||
fill: #000;
|
||
font-size: 19px;
|
||
text-anchor: start;
|
||
}
|
||
.tmap a { cursor: pointer; }
|
||
.tmap .tnodecount {
|
||
fill: #000;
|
||
opacity: 0.75;
|
||
font-size: 15px;
|
||
text-anchor: middle;
|
||
}
|
||
|
||
section { margin-top: 1.8rem; }
|
||
</style>
|