ciphera-net/pulse
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 15 Wiki Activity

fix: refine Sankey visual — thinner nodes, subtle links, orange on hover

Browse Source
This commit is contained in:
Usman Baig
2026-03-12 21:58:50 +01:00
parent 31286c45f4
commit 4b10f8c1fc
1 changed files with 8 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
components/journeys/SankeyDiagram.tsx
View File

@@ -38,8 +38,8 @@ interface PositionedLink {
const PADDING_X = 60 const PADDING_X = 60
const PADDING_Y = 40 const PADDING_Y = 40
const NODE_WIDTH = 12 const NODE_WIDTH = 8
const NODE_GAP = 4 const NODE_GAP = 6
const MIN_NODE_HEIGHT = 4 const MIN_NODE_HEIGHT = 4
const LABEL_MAX_LENGTH = 24 const LABEL_MAX_LENGTH = 24
const EXIT_LABEL = '(exit)' const EXIT_LABEL = '(exit)'
@@ -295,18 +295,18 @@ export default function SankeyDiagram({
const numColumns = depth + 1 const numColumns = depth + 1
const isLastColumn = (col: number) => col === numColumns - 1 const isLastColumn = (col: number) => col === numColumns - 1
// Colors — brand orange nodes with column-based fade // Colors — brand orange nodes, subtle neutral links
const brandOrange = '#FD5E0F' const brandOrange = '#FD5E0F'
const labelFill = isDark ? '#d4d4d4' : '#525252' const labelFill = isDark ? '#d4d4d4' : '#525252'
const linkDefault = isDark ? 'rgba(253, 94, 15, 0.15)' : 'rgba(253, 94, 15, 0.12)' const linkDefault = isDark ? 'rgba(255, 255, 255, 0.06)' : 'rgba(0, 0, 0, 0.06)'
const linkHover = isDark ? 'rgba(253, 94, 15, 0.45)' : 'rgba(253, 94, 15, 0.35)' const linkHover = isDark ? 'rgba(253, 94, 15, 0.35)' : 'rgba(253, 94, 15, 0.25)'
const linkDimmed = isDark ? 'rgba(253, 94, 15, 0.04)' : 'rgba(253, 94, 15, 0.05)' const linkDimmed = isDark ? 'rgba(255, 255, 255, 0.02)' : 'rgba(0, 0, 0, 0.02)'
const exitNodeFill = isDark ? '#404040' : '#d4d4d4' const exitNodeFill = isDark ? '#404040' : '#d4d4d4'
// Fade node opacity from 1.0 (entry) to 0.45 (deepest) // Fade node opacity from 1.0 (entry) to 0.5 (deepest)
const nodeOpacity = (col: number) => { const nodeOpacity = (col: number) => {
if (numColumns <= 1) return 1 if (numColumns <= 1) return 1
return 1 - (col / (numColumns - 1)) * 0.55 return 1 - (col / (numColumns - 1)) * 0.5
} }
return ( return (