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:
@@ -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 }) => (
|
||||||
|
|||||||
Reference in New Issue
Block a user