feat: replace MUI X Charts Pro with d3-sankey custom Sankey

Remove paid MUI dependency. Use d3-sankey (MIT, ~5KB) for layout algorithm + custom SVG rendering. Same visual quality: smooth bezier ribbon links, proper node spacing via sankeyJustify, label backgrounds, hover dimming, exit nodes.
2026-03-12 22:17:16 +01:00
parent 281a9f237a
commit 54daf14c6a
3 changed files with 312 additions and 1088 deletions
--- a/components/journeys/SankeyDiagram.tsx
+++ b/components/journeys/SankeyDiagram.tsx
@@ -1,18 +1,14 @@
 'use client'

-import { useMemo } from 'react'
+import { useMemo, useState } from 'react'
 import { useTheme } from '@ciphera-net/ui'
 import { TreeStructure } from '@phosphor-icons/react'
-import { createTheme, ThemeProvider } from '@mui/material/styles'
-import {
-  SankeyDataProvider,
-  SankeyLinkPlot,
-  SankeyNodePlot,
-  SankeyNodeLabelPlot,
-  SankeyTooltip,
-} from '@mui/x-charts-pro/SankeyChart'
-import { ChartsWrapper } from '@mui/x-charts-pro/ChartsWrapper'
-import { ChartsSurface } from '@mui/x-charts-pro/ChartsSurface'
+import { sankey, sankeyJustify } from 'd3-sankey'
+import type {
+  SankeyNode as D3SankeyNode,
+  SankeyLink as D3SankeyLink,
+  SankeyExtraProperties,
+} from 'd3-sankey'
 import type { PathTransition } from '@/lib/api/journeys'

 // ─── Types ──────────────────────────────────────────────────────────
@@ -24,55 +20,70 @@ interface SankeyDiagramProps {
  onNodeClick?: (path: string) => void
 }

+interface NodeExtra extends SankeyExtraProperties {
+  id: string
+  label: string
+  color: string
+}
+
+interface LinkExtra extends SankeyExtraProperties {
+  value: number
+}
+
+type LayoutNode = D3SankeyNode<NodeExtra, LinkExtra>
+type LayoutLink = D3SankeyLink<NodeExtra, LinkExtra>
+
+// ─── Constants ──────────────────────────────────────────────────────
+
+const BRAND_ORANGE = '#FD5E0F'
+const EXIT_GREY = '#595b63'
+const SVG_W = 1000
+const SVG_H = 500
+const MARGIN = { top: 10, right: 130, bottom: 10, left: 10 }
+
 // ─── Data transformation ────────────────────────────────────────────

-const NODE_COLOR = '#FD5E0F'
-const EXIT_COLOR = '#595b63'
-
-function transformToSankeyData(transitions: PathTransition[], depth: number) {
-  const numColumns = depth + 1
-  const nodeMap = new Map<string, { id: string; label: string; color: string }>()
-  const links: { source: string; target: string; value: number }[] = []
-
-  // Track flow in/out per node to compute exits
-  const flowIn = new Map<string, number>()
+function buildSankeyData(transitions: PathTransition[], depth: number) {
+  const numCols = depth + 1
+  const nodeMap = new Map<string, NodeExtra>()
+  const links: Array<{ source: string; target: string; value: number }> = []
  const flowOut = new Map<string, number>()
+  const flowIn = new Map<string, number>()

  for (const t of transitions) {
-    if (t.step_index >= numColumns || t.step_index + 1 >= numColumns) continue
+    if (t.step_index >= numCols || t.step_index + 1 >= numCols) continue

    const fromId = `${t.step_index}:${t.from_path}`
    const toId = `${t.step_index + 1}:${t.to_path}`

    if (!nodeMap.has(fromId)) {
-      nodeMap.set(fromId, { id: fromId, label: t.from_path, color: NODE_COLOR })
+      nodeMap.set(fromId, { id: fromId, label: t.from_path, color: BRAND_ORANGE })
    }
    if (!nodeMap.has(toId)) {
-      nodeMap.set(toId, { id: toId, label: t.to_path, color: NODE_COLOR })
+      nodeMap.set(toId, { id: toId, label: t.to_path, color: BRAND_ORANGE })
    }

    links.push({ source: fromId, target: toId, value: t.session_count })
-
    flowOut.set(fromId, (flowOut.get(fromId) ?? 0) + t.session_count)
    flowIn.set(toId, (flowIn.get(toId) ?? 0) + t.session_count)
  }

-  // Add exit nodes for flows that don't continue
-  for (const [nodeId, node] of nodeMap) {
+  // Add exit nodes for flows that don't continue to the next step
+  for (const [nodeId] of nodeMap) {
+    const col = parseInt(nodeId.split(':')[0], 10)
+    if (col >= numCols - 1) continue // last column — all exit implicitly
+
    const totalIn = flowIn.get(nodeId) ?? 0
    const totalOut = flowOut.get(nodeId) ?? 0
    const flow = Math.max(totalIn, totalOut)
    const exitCount = flow - totalOut

    if (exitCount > 0) {
-      const col = parseInt(nodeId.split(':')[0], 10)
-      if (col < numColumns - 1) {
-        const exitId = `${col + 1}:(exit)`
-        if (!nodeMap.has(exitId)) {
-          nodeMap.set(exitId, { id: exitId, label: '(exit)', color: EXIT_COLOR })
-        }
-        links.push({ source: nodeId, target: exitId, value: exitCount })
+      const exitId = `exit-${col + 1}`
+      if (!nodeMap.has(exitId)) {
+        nodeMap.set(exitId, { id: exitId, label: '(exit)', color: EXIT_GREY })
      }
+      links.push({ source: nodeId, target: exitId, value: exitCount })
    }
  }

@@ -82,11 +93,36 @@ function transformToSankeyData(transitions: PathTransition[], depth: number) {
  }
 }

-const valueFormatter = (value: number, context: { type: string }) => {
-  if (context.type === 'link') {
-    return `${value.toLocaleString()} sessions`
-  }
-  return `${value.toLocaleString()} sessions total`
+// ─── SVG path for a link ribbon ─────────────────────────────────────
+
+function ribbonPath(link: LayoutLink): string {
+  const src = link.source as LayoutNode
+  const tgt = link.target as LayoutNode
+  const sx = src.x1!
+  const tx = tgt.x0!
+  const sy = link.y0!
+  const ty = link.y1!
+  const w = link.width!
+  const mx = (sx + tx) / 2
+
+  return [
+    `M${sx},${sy}`,
+    `C${mx},${sy} ${mx},${ty} ${tx},${ty}`,
+    `L${tx},${ty + w}`,
+    `C${mx},${ty + w} ${mx},${sy + w} ${sx},${sy + w}`,
+    'Z',
+  ].join(' ')
+}
+
+// ─── Label helpers ──────────────────────────────────────────────────
+
+function truncateLabel(s: string, max: number) {
+  return s.length > max ? s.slice(0, max - 1) + '\u2026' : s
+}
+
+// Approximate text width at 11px system font (~6.5px per char)
+function estimateTextWidth(s: string) {
+  return s.length * 6.5
 }

 // ─── Component ──────────────────────────────────────────────────────
@@ -99,21 +135,34 @@ export default function SankeyDiagram({
 }: SankeyDiagramProps) {
  const { resolvedTheme } = useTheme()
  const isDark = resolvedTheme === 'dark'
-
-  const muiTheme = useMemo(
-    () =>
-      createTheme({
-        palette: { mode: isDark ? 'dark' : 'light' },
-      }),
-    [isDark],
-  )
+  const [hovered, setHovered] = useState<string | null>(null)

  const data = useMemo(
-    () => transformToSankeyData(transitions, depth),
+    () => buildSankeyData(transitions, depth),
    [transitions, depth],
  )

-  if (!transitions.length || !data.links.length) {
+  const layout = useMemo(() => {
+    if (!data.links.length) return null
+
+    const generator = sankey<NodeExtra, LinkExtra>()
+      .nodeId((d) => d.id)
+      .nodeWidth(9)
+      .nodePadding(20)
+      .nodeAlign(sankeyJustify)
+      .extent([
+        [MARGIN.left, MARGIN.top],
+        [SVG_W - MARGIN.right, SVG_H - MARGIN.bottom],
+      ])
+
+    return generator({
+      nodes: data.nodes.map((d) => ({ ...d })),
+      links: data.links.map((d) => ({ ...d })),
+    })
+  }, [data])
+
+  // ─── Empty state ────────────────────────────────────────────────
+  if (!transitions.length || !layout) {
    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">
@@ -129,40 +178,143 @@ export default function SankeyDiagram({
    )
  }

+  // ─── Colors ─────────────────────────────────────────────────────
+  const labelColor = isDark ? '#d4d4d4' : '#525252'
+  const labelBg = isDark ? 'rgba(23, 23, 23, 0.85)' : 'rgba(255, 255, 255, 0.85)'
+
  return (
-    <ThemeProvider theme={muiTheme}>
-      <div style={{ width: '100%', height: 500 }}>
-        <SankeyDataProvider
-          series={[
-            {
-              type: 'sankey' as const,
-              data,
-              valueFormatter,
-              nodeOptions: {
-                sort: 'auto',
-                padding: 20,
-                width: 9,
-                showLabels: true,
-              },
-              linkOptions: {
-                color: 'source',
-                opacity: 0.6,
-                curveCorrection: 0,
-              },
-            },
-          ]}
-          margin={{ top: 10, bottom: 10, left: 10, right: 10 }}
-        >
-          <ChartsWrapper>
-            <ChartsSurface>
-              <SankeyNodePlot />
-              <SankeyLinkPlot />
-              <SankeyNodeLabelPlot />
-            </ChartsSurface>
-            <SankeyTooltip trigger="item" />
-          </ChartsWrapper>
-        </SankeyDataProvider>
-      </div>
-    </ThemeProvider>
+    <svg
+      viewBox={`0 0 ${SVG_W} ${SVG_H}`}
+      preserveAspectRatio="xMidYMid meet"
+      className="w-full"
+      role="img"
+      aria-label="User journey Sankey diagram"
+    >
+      {/* Links */}
+      <g>
+        {layout.links.map((link, i) => {
+          const src = link.source as LayoutNode
+          const tgt = link.target as LayoutNode
+          const linkId = `${src.id}->${tgt.id}`
+          const isHovered = hovered === linkId
+          const someHovered = hovered !== null
+
+          let opacity = 0.6
+          if (isHovered) opacity = 0.8
+          else if (someHovered) opacity = 0.15
+
+          return (
+            <path
+              key={i}
+              d={ribbonPath(link)}
+              fill={src.color}
+              opacity={opacity}
+              style={{ transition: 'opacity 0.15s ease' }}
+              onMouseEnter={() => setHovered(linkId)}
+              onMouseLeave={() => setHovered(null)}
+            >
+              <title>
+                {src.label} → {tgt.label}:{' '}
+                {(link.value as number).toLocaleString()} sessions
+              </title>
+            </path>
+          )
+        })}
+      </g>
+
+      {/* Nodes */}
+      <g>
+        {layout.nodes.map((node) => {
+          const isExit = node.id!.toString().startsWith('exit-')
+          const w = (node.x1 ?? 0) - (node.x0 ?? 0)
+          const h = (node.y1 ?? 0) - (node.y0 ?? 0)
+
+          return (
+            <rect
+              key={node.id}
+              x={node.x0}
+              y={node.y0}
+              width={w}
+              height={h}
+              fill={node.color}
+              rx={2}
+              className={
+                onNodeClick && !isExit ? 'cursor-pointer' : 'cursor-default'
+              }
+              onClick={() => {
+                if (onNodeClick && !isExit) onNodeClick(node.label)
+              }}
+            >
+              <title>
+                {node.label} — {(node.value ?? 0).toLocaleString()} sessions
+              </title>
+            </rect>
+          )
+        })}
+      </g>
+
+      {/* Labels with background */}
+      <g>
+        {layout.nodes.map((node) => {
+          const x0 = node.x0 ?? 0
+          const x1 = node.x1 ?? 0
+          const y0 = node.y0 ?? 0
+          const y1 = node.y1 ?? 0
+          const nodeH = y1 - y0
+          if (nodeH < 14) return null
+
+          const label = truncateLabel(node.label, 28)
+          const textW = estimateTextWidth(label)
+          const padX = 4
+          const padY = 2
+          const rectW = textW + padX * 2
+          const rectH = 16
+
+          // Labels go right of node; last-column labels go left
+          const isRight = x1 > SVG_W - MARGIN.right - 60
+          const textX = isRight ? x0 - 6 : x1 + 6
+          const textY = y0 + nodeH / 2
+          const anchor = isRight ? 'end' : 'start'
+          const bgX = isRight ? textX - textW - padX : textX - padX
+          const bgY = textY - rectH / 2
+
+          return (
+            <g key={`label-${node.id}`}>
+              <rect
+                x={bgX}
+                y={bgY}
+                width={rectW}
+                height={rectH}
+                rx={3}
+                fill={labelBg}
+              />
+              <text
+                x={textX}
+                y={textY}
+                dy="0.35em"
+                textAnchor={anchor}
+                fill={labelColor}
+                fontSize={11}
+                fontFamily="system-ui, -apple-system, sans-serif"
+                className={
+                  onNodeClick && !node.id!.toString().startsWith('exit-')
+                    ? 'cursor-pointer'
+                    : 'cursor-default'
+                }
+                onClick={() => {
+                  if (
+                    onNodeClick &&
+                    !node.id!.toString().startsWith('exit-')
+                  )
+                    onNodeClick(node.label)
+                }}
+              >
+                {label}
+              </text>
+            </g>
+          )
+        })}
+      </g>
+    </svg>
  )
 }
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -14,10 +14,6 @@
  "dependencies": {
    "@ciphera-net/ui": "^0.2.5",
    "@ducanh2912/next-pwa": "^10.2.9",
-    "@emotion/react": "^11.14.0",
-    "@emotion/styled": "^11.14.1",
-    "@mui/material": "^7.3.9",
-    "@mui/x-charts-pro": "^8.27.5",
    "@phosphor-icons/react": "^2.1.10",
    "@simplewebauthn/browser": "^13.2.2",
    "@stripe/react-stripe-js": "^5.6.0",
@@ -27,6 +23,7 @@
    "class-variance-authority": "^0.7.1",
    "cobe": "^0.6.5",
    "country-flag-icons": "^1.6.4",
+    "d3-sankey": "^0.12.3",
    "d3-scale": "^4.0.2",
    "framer-motion": "^12.23.26",
    "html-to-image": "^1.11.13",
@@ -55,6 +52,7 @@
    "@tailwindcss/typography": "^0.5.19",
    "@testing-library/jest-dom": "^6.9.1",
    "@testing-library/react": "^16.3.2",
+    "@types/d3-sankey": "^0.12.5",
    "@types/d3-scale": "^4.0.9",
    "@types/node": "^20.14.12",
    "@types/react": "^19.2.14",