408 lines
13 KiB
TypeScript
408 lines
13 KiB
TypeScript
'use client'
|
|
|
|
import { useMemo, useState } from 'react'
|
|
import { useTheme } from '@ciphera-net/ui'
|
|
import { TreeStructure } from '@phosphor-icons/react'
|
|
import type { PathTransition } from '@/lib/api/journeys'
|
|
|
|
// ─── Types ──────────────────────────────────────────────────────────
|
|
|
|
interface SankeyDiagramProps {
|
|
transitions: PathTransition[]
|
|
totalSessions: number
|
|
depth: number
|
|
onNodeClick?: (path: string) => void
|
|
}
|
|
|
|
interface PositionedNode {
|
|
id: string // "col:path"
|
|
path: string
|
|
column: number
|
|
flow: number
|
|
x: number
|
|
y: number
|
|
height: number
|
|
}
|
|
|
|
interface PositionedLink {
|
|
id: string
|
|
fromNode: PositionedNode
|
|
toNode: PositionedNode
|
|
sessionCount: number
|
|
sourceY: number
|
|
targetY: number
|
|
width: number
|
|
}
|
|
|
|
// ─── Layout constants ───────────────────────────────────────────────
|
|
|
|
const PADDING_X = 60
|
|
const PADDING_Y = 40
|
|
const NODE_WIDTH = 12
|
|
const NODE_GAP = 4
|
|
const MIN_NODE_HEIGHT = 4
|
|
const LABEL_MAX_LENGTH = 24
|
|
const EXIT_LABEL = '(exit)'
|
|
|
|
// ─── Helpers ────────────────────────────────────────────────────────
|
|
|
|
function truncatePath(path: string, maxLen: number): string {
|
|
if (path.length <= maxLen) return path
|
|
return path.slice(0, maxLen - 1) + '\u2026'
|
|
}
|
|
|
|
function buildSankeyLayout(
|
|
transitions: PathTransition[],
|
|
depth: number,
|
|
svgWidth: number,
|
|
svgHeight: number,
|
|
) {
|
|
if (!transitions.length) return { nodes: [], links: [] }
|
|
|
|
// ── 1. Build columns ──────────────────────────────────────────────
|
|
// columns[colIndex] = Map<path, { inFlow, outFlow }>
|
|
const numColumns = depth + 1
|
|
const columns: Map<string, { inFlow: number; outFlow: number }>[] = Array.from(
|
|
{ length: numColumns },
|
|
() => new Map(),
|
|
)
|
|
|
|
for (const t of transitions) {
|
|
const fromCol = t.step_index
|
|
const toCol = t.step_index + 1
|
|
if (fromCol >= numColumns || toCol >= numColumns) continue
|
|
|
|
// from node
|
|
const fromEntry = columns[fromCol].get(t.from_path) ?? { inFlow: 0, outFlow: 0 }
|
|
fromEntry.outFlow += t.session_count
|
|
columns[fromCol].set(t.from_path, fromEntry)
|
|
|
|
// to node
|
|
const toEntry = columns[toCol].get(t.to_path) ?? { inFlow: 0, outFlow: 0 }
|
|
toEntry.inFlow += t.session_count
|
|
columns[toCol].set(t.to_path, toEntry)
|
|
}
|
|
|
|
// For column 0, nodes that have no inFlow — use outFlow as total flow
|
|
// For other columns, use max(inFlow, outFlow)
|
|
// Also ensure column 0 nodes get their inFlow from the fact they are entry points
|
|
|
|
// ── 2. Add exit nodes ─────────────────────────────────────────────
|
|
// For each node, exitCount = inFlow - outFlow (if positive)
|
|
// For column 0, exitCount = outFlow - outFlow = handled differently:
|
|
// column 0 nodes: flow = outFlow, and if they also appear as to_path, inFlow is set
|
|
// Actually for column 0 the total flow IS outFlow (they are entry points)
|
|
|
|
// Build exit transitions for each column (except last, which is all exit)
|
|
const exitTransitions: { fromCol: number; fromPath: string; exitCount: number }[] = []
|
|
for (let col = 0; col < numColumns; col++) {
|
|
for (const [path, entry] of columns[col]) {
|
|
const totalFlow = col === 0 ? entry.outFlow : Math.max(entry.inFlow, entry.outFlow)
|
|
const exitCount = totalFlow - entry.outFlow
|
|
if (exitCount > 0) {
|
|
exitTransitions.push({ fromCol: col, fromPath: path, exitCount })
|
|
}
|
|
}
|
|
}
|
|
|
|
// For the last column, ALL flow is exit (no outgoing transitions)
|
|
// We don't add extra exit nodes for the last column since those nodes are already endpoints
|
|
|
|
// Add exit nodes to columns (they sit in the same column, below the real nodes,
|
|
// or we add them as virtual nodes in col+1). Actually per spec: "Add virtual (exit) nodes
|
|
// at the right end of flows that don't continue" — this means we add them as targets in
|
|
// the next column. But we only do this for non-last columns.
|
|
const exitLinks: { fromCol: number; fromPath: string; exitCount: number }[] = []
|
|
for (const et of exitTransitions) {
|
|
if (et.fromCol < numColumns - 1) {
|
|
const exitCol = et.fromCol + 1
|
|
const exitEntry = columns[exitCol].get(EXIT_LABEL) ?? { inFlow: 0, outFlow: 0 }
|
|
exitEntry.inFlow += et.exitCount
|
|
columns[exitCol].set(EXIT_LABEL, exitEntry)
|
|
exitLinks.push(et)
|
|
}
|
|
}
|
|
|
|
// ── 3. Sort nodes per column and assign positions ─────────────────
|
|
const availableWidth = svgWidth - PADDING_X * 2
|
|
const availableHeight = svgHeight - PADDING_Y * 2
|
|
const colSpacing = numColumns > 1 ? availableWidth / (numColumns - 1) : 0
|
|
|
|
const positionedNodes: Map<string, PositionedNode> = new Map()
|
|
|
|
for (let col = 0; col < numColumns; col++) {
|
|
const entries = Array.from(columns[col].entries()).map(([path, entry]) => ({
|
|
path,
|
|
flow: col === 0 ? entry.outFlow : Math.max(entry.inFlow, entry.outFlow),
|
|
}))
|
|
|
|
// Sort by flow descending, but keep (exit) at bottom
|
|
entries.sort((a, b) => {
|
|
if (a.path === EXIT_LABEL) return 1
|
|
if (b.path === EXIT_LABEL) return -1
|
|
return b.flow - a.flow
|
|
})
|
|
|
|
const totalFlow = entries.reduce((sum, e) => sum + e.flow, 0)
|
|
const totalGaps = Math.max(0, entries.length - 1) * NODE_GAP
|
|
const usableHeight = availableHeight - totalGaps
|
|
|
|
let y = PADDING_Y
|
|
const x = PADDING_X + col * colSpacing
|
|
|
|
for (const entry of entries) {
|
|
const proportion = totalFlow > 0 ? entry.flow / totalFlow : 1 / entries.length
|
|
const nodeHeight = Math.max(MIN_NODE_HEIGHT, proportion * usableHeight)
|
|
const id = `${col}:${entry.path}`
|
|
|
|
positionedNodes.set(id, {
|
|
id,
|
|
path: entry.path,
|
|
column: col,
|
|
flow: entry.flow,
|
|
x,
|
|
y,
|
|
height: nodeHeight,
|
|
})
|
|
|
|
y += nodeHeight + NODE_GAP
|
|
}
|
|
}
|
|
|
|
// ── 4. Build positioned links ─────────────────────────────────────
|
|
// Track how much vertical space has been used at each node's source/target side
|
|
const sourceOffsets: Map<string, number> = new Map()
|
|
const targetOffsets: Map<string, number> = new Map()
|
|
|
|
const allLinks: {
|
|
fromId: string
|
|
toId: string
|
|
sessionCount: number
|
|
}[] = []
|
|
|
|
// Regular transitions
|
|
for (const t of transitions) {
|
|
const fromCol = t.step_index
|
|
const toCol = t.step_index + 1
|
|
if (fromCol >= numColumns || toCol >= numColumns) continue
|
|
allLinks.push({
|
|
fromId: `${fromCol}:${t.from_path}`,
|
|
toId: `${toCol}:${t.to_path}`,
|
|
sessionCount: t.session_count,
|
|
})
|
|
}
|
|
|
|
// Exit links
|
|
for (const et of exitLinks) {
|
|
allLinks.push({
|
|
fromId: `${et.fromCol}:${et.fromPath}`,
|
|
toId: `${et.fromCol + 1}:${EXIT_LABEL}`,
|
|
sessionCount: et.exitCount,
|
|
})
|
|
}
|
|
|
|
// Sort links by session count descending for better visual stacking
|
|
allLinks.sort((a, b) => b.sessionCount - a.sessionCount)
|
|
|
|
const positionedLinks: PositionedLink[] = []
|
|
|
|
for (const link of allLinks) {
|
|
const fromNode = positionedNodes.get(link.fromId)
|
|
const toNode = positionedNodes.get(link.toId)
|
|
if (!fromNode || !toNode) continue
|
|
|
|
const linkWidth = Math.max(
|
|
1,
|
|
fromNode.flow > 0 ? (link.sessionCount / fromNode.flow) * fromNode.height : 1,
|
|
)
|
|
|
|
const sourceOffset = sourceOffsets.get(link.fromId) ?? 0
|
|
const targetOffset = targetOffsets.get(link.toId) ?? 0
|
|
|
|
positionedLinks.push({
|
|
id: `${link.fromId}->${link.toId}`,
|
|
fromNode,
|
|
toNode,
|
|
sessionCount: link.sessionCount,
|
|
sourceY: fromNode.y + sourceOffset,
|
|
targetY: toNode.y + targetOffset,
|
|
width: linkWidth,
|
|
})
|
|
|
|
sourceOffsets.set(link.fromId, sourceOffset + linkWidth)
|
|
targetOffsets.set(link.toId, targetOffset + linkWidth)
|
|
}
|
|
|
|
return {
|
|
nodes: Array.from(positionedNodes.values()),
|
|
links: positionedLinks,
|
|
}
|
|
}
|
|
|
|
function buildLinkPath(link: PositionedLink): string {
|
|
const sx = link.fromNode.x + NODE_WIDTH
|
|
const sy = link.sourceY
|
|
const tx = link.toNode.x
|
|
const ty = link.targetY
|
|
const w = link.width
|
|
const midX = (sx + tx) / 2
|
|
|
|
return [
|
|
`M ${sx},${sy}`,
|
|
`C ${midX},${sy} ${midX},${ty} ${tx},${ty}`,
|
|
`L ${tx},${ty + w}`,
|
|
`C ${midX},${ty + w} ${midX},${sy + w} ${sx},${sy + w}`,
|
|
'Z',
|
|
].join(' ')
|
|
}
|
|
|
|
// ─── Component ──────────────────────────────────────────────────────
|
|
|
|
export default function SankeyDiagram({
|
|
transitions,
|
|
totalSessions,
|
|
depth,
|
|
onNodeClick,
|
|
}: SankeyDiagramProps) {
|
|
const { resolvedTheme } = useTheme()
|
|
const isDark = resolvedTheme === 'dark'
|
|
const [hoveredLink, setHoveredLink] = useState<string | null>(null)
|
|
|
|
const svgWidth = 1000
|
|
const svgHeight = 500
|
|
|
|
const { nodes, links } = useMemo(
|
|
() => buildSankeyLayout(transitions, depth, svgWidth, svgHeight),
|
|
[transitions, depth],
|
|
)
|
|
|
|
if (!transitions.length || !links.length) {
|
|
return (
|
|
<div className="h-[400px] flex flex-col items-center justify-center text-center px-6 py-8 gap-3">
|
|
<div className="rounded-full bg-neutral-100 dark:bg-neutral-800 p-4">
|
|
<TreeStructure className="w-8 h-8 text-neutral-500 dark:text-neutral-400" />
|
|
</div>
|
|
<h4 className="font-semibold text-neutral-900 dark:text-white">
|
|
No journey data yet
|
|
</h4>
|
|
<p className="text-sm text-neutral-500 dark:text-neutral-400 max-w-xs">
|
|
Navigation flows will appear here as visitors browse through your site.
|
|
</p>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const numColumns = depth + 1
|
|
const isLastColumn = (col: number) => col === numColumns - 1
|
|
|
|
// Colors
|
|
const nodeFill = isDark ? '#a3a3a3' : '#525252'
|
|
const labelFill = isDark ? '#a3a3a3' : '#737373'
|
|
const linkDefault = isDark ? 'rgba(163, 163, 163, 0.1)' : 'rgba(163, 163, 163, 0.15)'
|
|
const linkHover = 'rgba(249, 115, 22, 0.4)'
|
|
const linkDimmed = isDark ? 'rgba(163, 163, 163, 0.04)' : 'rgba(163, 163, 163, 0.06)'
|
|
const exitNodeFill = isDark ? '#525252' : '#a3a3a3'
|
|
|
|
return (
|
|
<svg
|
|
viewBox={`0 0 ${svgWidth} ${svgHeight}`}
|
|
preserveAspectRatio="xMidYMid meet"
|
|
className="w-full"
|
|
role="img"
|
|
aria-label="User journey Sankey diagram"
|
|
>
|
|
{/* Links */}
|
|
<g>
|
|
{links.map((link) => {
|
|
const isHovered = hoveredLink === link.id
|
|
const hasSomeHovered = hoveredLink !== null
|
|
const pct = totalSessions > 0
|
|
? ((link.sessionCount / totalSessions) * 100).toFixed(1)
|
|
: '0'
|
|
|
|
let fill: string
|
|
if (isHovered) fill = linkHover
|
|
else if (hasSomeHovered) fill = linkDimmed
|
|
else fill = linkDefault
|
|
|
|
return (
|
|
<path
|
|
key={link.id}
|
|
d={buildLinkPath(link)}
|
|
fill={fill}
|
|
style={{ transition: 'fill 0.15s ease' }}
|
|
onMouseEnter={() => setHoveredLink(link.id)}
|
|
onMouseLeave={() => setHoveredLink(null)}
|
|
className="cursor-default"
|
|
>
|
|
<title>
|
|
{link.fromNode.path} → {link.toNode.path}: {link.sessionCount.toLocaleString()} sessions ({pct}%)
|
|
</title>
|
|
</path>
|
|
)
|
|
})}
|
|
</g>
|
|
|
|
{/* Nodes */}
|
|
<g>
|
|
{nodes.map((node) => {
|
|
const isExit = node.path === EXIT_LABEL
|
|
|
|
return (
|
|
<rect
|
|
key={node.id}
|
|
x={node.x}
|
|
y={node.y}
|
|
width={NODE_WIDTH}
|
|
height={node.height}
|
|
rx={3}
|
|
ry={3}
|
|
fill={isExit ? exitNodeFill : nodeFill}
|
|
opacity={isExit ? 0.5 : 1}
|
|
className={onNodeClick && !isExit ? 'cursor-pointer' : 'cursor-default'}
|
|
onClick={() => {
|
|
if (onNodeClick && !isExit) onNodeClick(node.path)
|
|
}}
|
|
>
|
|
<title>{node.path} — {node.flow.toLocaleString()} sessions</title>
|
|
</rect>
|
|
)
|
|
})}
|
|
</g>
|
|
|
|
{/* Labels */}
|
|
<g>
|
|
{nodes.map((node) => {
|
|
const isLast = isLastColumn(node.column)
|
|
const labelX = isLast ? node.x - 6 : node.x + NODE_WIDTH + 6
|
|
const labelY = node.y + node.height / 2
|
|
const anchor = isLast ? 'end' : 'start'
|
|
const displayLabel = truncatePath(node.path, LABEL_MAX_LENGTH)
|
|
|
|
// Only show labels for nodes tall enough to fit text
|
|
if (node.height < 10) return null
|
|
|
|
return (
|
|
<text
|
|
key={`label-${node.id}`}
|
|
x={labelX}
|
|
y={labelY}
|
|
dy="0.35em"
|
|
textAnchor={anchor}
|
|
fill={labelFill}
|
|
fontSize={11}
|
|
className={onNodeClick && node.path !== EXIT_LABEL ? 'cursor-pointer' : 'cursor-default'}
|
|
onClick={() => {
|
|
if (onNodeClick && node.path !== EXIT_LABEL) onNodeClick(node.path)
|
|
}}
|
|
>
|
|
{displayLabel}
|
|
<title>{node.path}</title>
|
|
</text>
|
|
)
|
|
})}
|
|
</g>
|
|
</svg>
|
|
)
|
|
}
|