fix: disable sankey labels, reduce margins, dynamic height

Labels were overlapping badly with many nodes. Rely on hover
tooltips instead. Chart height now scales with node count
(400-700px range).
This commit is contained in:
Usman Baig
2026-03-16 14:08:08 +01:00
parent 6f42d4d3de
commit d3f5e6b361

View File

@@ -280,17 +280,17 @@ export default function SankeyJourney({
</div> </div>
)} )}
<div style={{ height: 500 }}> <div style={{ height: Math.max(400, Math.min(700, data.nodes.length * 28)) }}>
<ResponsiveSankey<SankeyNode, SankeyLink> <ResponsiveSankey<SankeyNode, SankeyLink>
data={data} data={data}
margin={{ top: 16, right: 140, bottom: 16, left: 140 }} margin={{ top: 8, right: 8, bottom: 8, left: 8 }}
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={14} nodeThickness={12}
nodeSpacing={16} nodeSpacing={20}
nodeInnerPadding={0} nodeInnerPadding={0}
nodeBorderWidth={0} nodeBorderWidth={0}
nodeBorderRadius={3} nodeBorderRadius={3}
@@ -300,13 +300,9 @@ export default function SankeyJourney({
linkOpacity={0.2} linkOpacity={0.2}
linkHoverOpacity={0.5} linkHoverOpacity={0.5}
linkHoverOthersOpacity={0.05} linkHoverOthersOpacity={0.05}
linkContract={1} linkContract={2}
enableLinkGradient enableLinkGradient
enableLabels enableLabels={false}
label={(node) => smartLabel(pathFromId(node.id))}
labelPosition="outside"
labelPadding={12}
labelTextColor={labelColor}
isInteractive isInteractive
onClick={handleClick} onClick={handleClick}
nodeTooltip={({ node }) => ( nodeTooltip={({ node }) => (