diff --git a/modules/rwallet/lib/wallet-viz.ts b/modules/rwallet/lib/wallet-viz.ts index db0d82f..8983e15 100644 --- a/modules/rwallet/lib/wallet-viz.ts +++ b/modules/rwallet/lib/wallet-viz.ts @@ -250,6 +250,7 @@ export function renderTimeline( // Diagonal waterfall flows const flowHeight = 80; const xOffset = flowHeight * 0.7; + const cornerR = Math.min(flowHeight * 0.25, xOffset * 0.4); let prevBalance = 0; data.forEach(tx => { @@ -275,10 +276,17 @@ export function renderTimeline( const endX = x; const path = d3.path(); + // Left edge: vertical down, rounded corner, horizontal right to river path.moveTo(startX - farEndHalf, startY); - path.bezierCurveTo(startX - farEndHalf, startY + flowHeight * 0.55, endX - riverEndHalf, endY - flowHeight * 0.45, endX - riverEndHalf, endY); + path.lineTo(startX - farEndHalf, endY - cornerR); + path.quadraticCurveTo(startX - farEndHalf, endY, startX - farEndHalf + cornerR, endY); + path.lineTo(endX - riverEndHalf, endY); + // Across river end path.lineTo(endX + riverEndHalf, endY); - path.bezierCurveTo(endX + riverEndHalf, endY - flowHeight * 0.45, startX + farEndHalf, startY + flowHeight * 0.55, startX + farEndHalf, startY); + // Right edge: horizontal left, rounded corner, vertical up + path.lineTo(startX + farEndHalf + cornerR, endY); + path.quadraticCurveTo(startX + farEndHalf, endY, startX + farEndHalf, endY - cornerR); + path.lineTo(startX + farEndHalf, startY); path.closePath(); contentGroup.append("path").attr("d", path.toString()).attr("fill", `url(#${id}-inflow)`) @@ -293,10 +301,17 @@ export function renderTimeline( const endX = x + xOffset; const path = d3.path(); + // Left edge: horizontal right from river, rounded corner, vertical down path.moveTo(startX - riverEndHalf, startY); - path.bezierCurveTo(startX - riverEndHalf, startY + flowHeight * 0.45, endX - farEndHalf, endY - flowHeight * 0.55, endX - farEndHalf, endY); + path.lineTo(endX - farEndHalf - cornerR, startY); + path.quadraticCurveTo(endX - farEndHalf, startY, endX - farEndHalf, startY + cornerR); + path.lineTo(endX - farEndHalf, endY); + // Across far end path.lineTo(endX + farEndHalf, endY); - path.bezierCurveTo(endX + farEndHalf, endY - flowHeight * 0.55, startX + riverEndHalf, startY + flowHeight * 0.45, startX + riverEndHalf, startY); + // Right edge: vertical up, rounded corner, horizontal left to river + path.lineTo(endX + farEndHalf, startY + cornerR); + path.quadraticCurveTo(endX + farEndHalf, startY, endX + farEndHalf - cornerR, startY); + path.lineTo(startX + riverEndHalf, startY); path.closePath(); contentGroup.append("path").attr("d", path.toString()).attr("fill", `url(#${id}-outflow)`) diff --git a/modules/rwallet/mod.ts b/modules/rwallet/mod.ts index 20da9d4..c01987e 100644 --- a/modules/rwallet/mod.ts +++ b/modules/rwallet/mod.ts @@ -1239,7 +1239,7 @@ function renderWallet(spaceSlug: string, initialView?: string) { modules: getModuleInfoList(), theme: "dark", body: ``, - scripts: ``, + scripts: ``, styles: ``, }); }