feat: redesign sankey to block-style nodes with inside labels

- nodeThickness 8 → 100 (wide blocks like Rybbit)
- Labels inside nodes with white text instead of outside
- Margins 90px → 16px (labels no longer need outside space)
- Dynamic chart height based on max nodes per step
- Tighter nodeSpacing (4px) and subtle link opacity
- nodeBorderRadius 4 for rounded block corners
This commit is contained in:
Usman Baig
2026-03-16 21:45:08 +01:00
parent bec61c599e
commit 4007056e44

View File

@@ -258,7 +258,13 @@ export default function SankeyJourney({
const labelColor = isDark ? '#a3a3a3' : '#525252' const labelColor = isDark ? '#a3a3a3' : '#525252'
const chartHeight = 500 // * Scale height based on max nodes in any step so blocks aren't too compressed
const stepCounts = new Map<number, number>()
for (const n of data.nodes) {
stepCounts.set(n.stepIndex, (stepCounts.get(n.stepIndex) ?? 0) + 1)
}
const maxNodesInStep = Math.max(1, ...Array.from(stepCounts.values()))
const chartHeight = Math.max(400, Math.min(700, maxNodesInStep * 45))
const containerRef = useRef<HTMLDivElement>(null) const containerRef = useRef<HTMLDivElement>(null)
const [chartWidth, setChartWidth] = useState(800) const [chartWidth, setChartWidth] = useState(800)
@@ -301,30 +307,30 @@ export default function SankeyJourney({
data={data} data={data}
width={chartWidth} width={chartWidth}
height={chartHeight} height={chartHeight}
margin={{ top: 8, right: 90, bottom: 8, left: 90 }} margin={{ top: 8, right: 16, bottom: 8, left: 16 }}
align="justify" align="justify"
sort="descending" sort="descending"
colors={(node) => colors={(node) =>
COLUMN_COLORS[node.stepIndex % COLUMN_COLORS.length] COLUMN_COLORS[node.stepIndex % COLUMN_COLORS.length]
} }
nodeThickness={8} nodeThickness={100}
nodeSpacing={8} nodeSpacing={4}
nodeInnerPadding={0} nodeInnerPadding={2}
nodeBorderWidth={0} nodeBorderWidth={0}
nodeBorderRadius={2} nodeBorderRadius={4}
nodeOpacity={1} nodeOpacity={0.9}
nodeHoverOpacity={1} nodeHoverOpacity={1}
nodeHoverOthersOpacity={0.3} nodeHoverOthersOpacity={0.3}
linkOpacity={0.15} linkOpacity={0.12}
linkHoverOpacity={0.5} linkHoverOpacity={0.4}
linkHoverOthersOpacity={0.03} linkHoverOthersOpacity={0.02}
linkContract={1} linkContract={2}
enableLinkGradient enableLinkGradient
enableLabels enableLabels
label={(node) => smartLabel(pathFromId(node.id))} label={(node) => smartLabel(pathFromId(node.id))}
labelPosition="outside" labelPosition="inside"
labelPadding={6} labelPadding={8}
labelTextColor={labelColor} labelTextColor="#ffffff"
isInteractive isInteractive
onClick={handleClick} onClick={handleClick}
nodeTooltip={({ node }) => ( nodeTooltip={({ node }) => (