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

fix: thick node bars, multi-hue palette, higher link opacity, more padding

Browse Source
This commit is contained in:
Usman Baig
2026-03-12 22:31:05 +01:00
parent 828e930a69
commit 683bbce817
1 changed files with 18 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
components/journeys/SankeyDiagram.tsx
View File

@@ -35,27 +35,27 @@ type LayoutLink = D3SankeyLink<NodeExtra, LinkExtra>
// ─── Constants ────────────────────────────────────────────────────── // ─── Constants ──────────────────────────────────────────────────────
// Orange palette — warm to cool as depth increases // Multi-hue palette — distinct colors per column for visual separation
const COLUMN_COLORS = [ const COLUMN_COLORS = [
'#FD5E0F', // brand orange (entry) '#FD5E0F', // brand orange (entry)
'#F97316', // orange-500 '#3B82F6', // blue
'#EA580C', // orange-600 '#10B981', // emerald
'#C2410C', // orange-700 '#F59E0B', // amber
'#9A3412', // orange-800 '#8B5CF6', // violet
'#7C2D12', // orange-900 '#EC4899', // pink
'#6C2710', // deeper '#06B6D4', // cyan
'#5C2110', // deepest '#EF4444', // red
'#4C1B10', '#84CC16', // lime
'#3C1510', '#F97316', // orange again
'#2C0F10', '#6366F1', // indigo
] ]
const EXIT_GREY = '#52525b' const EXIT_GREY = '#52525b'
const SVG_W = 1100 const SVG_W = 1100
const SVG_H = 520 const SVG_H = 540
const MARGIN = { top: 30, right: 140, bottom: 30, left: 10 } const MARGIN = { top: 30, right: 140, bottom: 30, left: 10 }
function colorForColumn(col: number): string { function colorForColumn(col: number): string {
return COLUMN_COLORS[Math.min(col, COLUMN_COLORS.length - 1)] return COLUMN_COLORS[col % COLUMN_COLORS.length]
} }
// ─── Data transformation ──────────────────────────────────────────── // ─── Data transformation ────────────────────────────────────────────
@@ -164,8 +164,8 @@ export default function SankeyDiagram({
const generator = sankey<NodeExtra, LinkExtra>() const generator = sankey<NodeExtra, LinkExtra>()
.nodeId((d) => d.id) .nodeId((d) => d.id)
.nodeWidth(10) .nodeWidth(18)
.nodePadding(24) .nodePadding(32)
.nodeAlign(sankeyJustify) .nodeAlign(sankeyJustify)
.extent([ .extent([
[MARGIN.left, MARGIN.top], [MARGIN.left, MARGIN.top],
@@ -220,9 +220,9 @@ export default function SankeyDiagram({
const isExitLink = tgt.id!.toString().startsWith('exit-') const isExitLink = tgt.id!.toString().startsWith('exit-')
const linkColor = isExitLink ? EXIT_GREY : src.color const linkColor = isExitLink ? EXIT_GREY : src.color
let opacity = isDark ? 0.18 : 0.22 let opacity = isDark ? 0.45 : 0.5
if (isHovered) opacity = 0.45 if (isHovered) opacity = 0.75
else if (someHovered) opacity = 0.04 else if (someHovered) opacity = 0.08
return ( return (
<path <path