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

fix: use brand orange for Sankey diagram nodes and links

Browse Source
This commit is contained in:
Usman Baig
2026-03-12 21:51:07 +01:00
parent 908606ade2
commit 31286c45f4
1 changed files with 15 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
components/journeys/SankeyDiagram.tsx
View File

@@ -295,13 +295,19 @@ 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 // Colors — brand orange nodes with column-based fade
const nodeFill = isDark ? '#a3a3a3' : '#525252' const brandOrange = '#FD5E0F'
const labelFill = isDark ? '#a3a3a3' : '#737373' const labelFill = isDark ? '#d4d4d4' : '#525252'
const linkDefault = isDark ? 'rgba(163, 163, 163, 0.1)' : 'rgba(163, 163, 163, 0.15)' const linkDefault = isDark ? 'rgba(253, 94, 15, 0.15)' : 'rgba(253, 94, 15, 0.12)'
const linkHover = 'rgba(249, 115, 22, 0.4)' const linkHover = isDark ? 'rgba(253, 94, 15, 0.45)' : 'rgba(253, 94, 15, 0.35)'
const linkDimmed = isDark ? 'rgba(163, 163, 163, 0.04)' : 'rgba(163, 163, 163, 0.06)' const linkDimmed = isDark ? 'rgba(253, 94, 15, 0.04)' : 'rgba(253, 94, 15, 0.05)'
const exitNodeFill = isDark ? '#525252' : '#a3a3a3' const exitNodeFill = isDark ? '#404040' : '#d4d4d4'
// Fade node opacity from 1.0 (entry) to 0.45 (deepest)
const nodeOpacity = (col: number) => {
if (numColumns <= 1) return 1
return 1 - (col / (numColumns - 1)) * 0.55
}
return ( return (
<svg <svg
@@ -357,8 +363,8 @@ export default function SankeyDiagram({
height={node.height} height={node.height}
rx={3} rx={3}
ry={3} ry={3}
fill={isExit ? exitNodeFill : nodeFill} fill={isExit ? exitNodeFill : brandOrange}
opacity={isExit ? 0.5 : 1} opacity={isExit ? 0.4 : nodeOpacity(node.column)}
className={onNodeClick && !isExit ? 'cursor-pointer' : 'cursor-default'} className={onNodeClick && !isExit ? 'cursor-pointer' : 'cursor-default'}
onClick={() => { onClick={() => {
if (onNodeClick && !isExit) onNodeClick(node.path) if (onNodeClick && !isExit) onNodeClick(node.path)