RomanNum3ral
/
whisper-money
mirror of https://github.com/whisper-money/whisper-money.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix(cashflow): tighten node spacing and stop the net label clipping 

Give the center 'Net' pill its own taller label box so its two lines no
longer clip, and trim node padding / row height for a slightly denser
vertical layout.
This commit is contained in:
Víctor Falcón 2026-07-12 17:15:38 +02:00
parent 744a71cea0
commit 7a75fc94dc
1 changed files with 10 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
resources/js/components/charts/sankey-chart.tsx
View File

@ -47,15 +47,18 @@ interface FlowLink {
}
const NODE_WIDTH = 12;
const NODE_PADDING = 32;
const NODE_PADDING = 24;
const LABEL_GAP = 6;
const LABEL_HEIGHT = 30;
// The center label is a bordered pill (name + amount), so it needs a little
// more room than the plain side labels or it clips vertically.
const CENTER_LABEL_HEIGHT = 44;
// A Sankey is inherently horizontal, so on narrow screens we let it scroll
// sideways (same pattern as the trend chart) rather than crushing the flows.
const MIN_CHART_WIDTH = 560;
// Guarantees enough vertical room per node that its two-line label never
// collides with the next one, even when a category's bar is tiny.
const ROW_HEIGHT = 54;
// Gives each node enough vertical room that its two-line label stays legible
// even when a category's bar is tiny.
const ROW_HEIGHT = 46;
const MUTED_COLOR = 'var(--color-muted)';
const CENTER_COLOR = 'var(--color-chart-1)';
@ -255,9 +258,10 @@ export function SankeyChart({
const isCenter = node.kind === 'center';
const navigable = !!node.categoryId && !!period;
const foHeight = isCenter ? CENTER_LABEL_HEIGHT : LABEL_HEIGHT;
const labelY = y + nodeHeight / 2 - foHeight / 2;
let labelX: number;
let foWidth: number;
let labelY = y + nodeHeight / 2 - LABEL_HEIGHT / 2;
let alignClass: string;
if (node.kind === 'income') {
@ -273,7 +277,6 @@ export function SankeyChart({
// the bar with a subtle background instead of sitting beside it.
foWidth = labelWidth;
labelX = x + width / 2 - labelWidth / 2;
labelY = y + nodeHeight / 2 - LABEL_HEIGHT / 2;
alignClass = 'items-center text-center';
}
@ -313,7 +316,7 @@ export function SankeyChart({
x={labelX}
y={labelY}
width={foWidth}
height={LABEL_HEIGHT}
height={foHeight}
className="overflow-visible"
>
<div