diff --git a/components/journeys/SankeyJourney.tsx b/components/journeys/SankeyJourney.tsx
index 84875a7..d1958cd 100644
--- a/components/journeys/SankeyJourney.tsx
+++ b/components/journeys/SankeyJourney.tsx
@@ -257,6 +257,9 @@ export default function SankeyJourney({
}
const labelColor = isDark ? '#a3a3a3' : '#525252'
+ const steps = data.nodes.map((n) => n.stepIndex)
+ const minStep = Math.min(...steps)
+ const maxStep = Math.max(...steps)
return (
@@ -280,10 +283,10 @@ export default function SankeyJourney({
)}
-
+
data={data}
- margin={{ top: 8, right: 8, bottom: 8, left: 8 }}
+ margin={{ top: 8, right: 140, bottom: 8, left: 140 }}
align="justify"
sort="descending"
colors={(node) =>
@@ -302,7 +305,17 @@ export default function SankeyJourney({
linkHoverOthersOpacity={0.05}
linkContract={2}
enableLinkGradient
- enableLabels={false}
+ enableLabels
+ label={(node) => {
+ // Only show labels for first and last step columns
+ if (node.stepIndex === minStep || node.stepIndex === maxStep) {
+ return smartLabel(pathFromId(node.id))
+ }
+ return ''
+ }}
+ labelPosition="outside"
+ labelPadding={8}
+ labelTextColor={labelColor}
isInteractive
onClick={handleClick}
nodeTooltip={({ node }) => (