mirror of
https://github.com/we-promise/sure.git
synced 2026-05-30 15:59:02 +00:00
fix(savings): refine hero spacing, goal/account card padding, sparkline negative range
- Sparkline (`savings-sparkline` controller): dropped the `Math.max(0, yMin)` clamp on the y-axis domain so negative balances (or any series that dips into negative territory) render fully instead of being cropped off the canvas. - Hero card: padding `p-6` → `p-7`, column ratio `[minmax(0,1fr)_minmax(0,1.6fr)]` so the chart breathes, min height bumped to 220px, sparkline container `h-full min-h-[200px]` so it fills the card vertically. Stats row now sits at the bottom of the text column via `mt-auto pt-6`; labels promoted to `text-xs`, values to `text-lg`. - Section vertical rhythm: outer `space-y-6` → `space-y-8`. - Goal card: padding `p-[18px]` → `p-6`. Internal gap from header row to amount line `mt-3.5` → `mt-5`. Account-row gap `mt-3` → `mt-4`. - Account card: padding `p-5` → `p-6`. - Status pill "Behind" dot: `bg-yellow-500` → `bg-yellow-600` for a warmer/ambery tone matching the Claude Design reference. - Goal card donut "behind" stroke: `var(--color-yellow-500)` → `var(--color-yellow-600)` to match the pill.
This commit is contained in:
@@ -42,10 +42,13 @@ export default class extends Controller {
|
||||
|
||||
const yMin = Math.min(...series.map((d) => d.value));
|
||||
const yMax = Math.max(...series.map((d) => d.value));
|
||||
const padding = (yMax - yMin) * 0.15 || yMax * 0.05 || 1;
|
||||
// Don't clamp to 0 — savings totals can be negative under certain
|
||||
// demo / edge conditions, and clamping pushes the line off-canvas.
|
||||
const range = yMax - yMin;
|
||||
const padding = range > 0 ? range * 0.15 : Math.abs(yMax) * 0.05 || 1;
|
||||
const y = d3
|
||||
.scaleLinear()
|
||||
.domain([Math.max(0, yMin - padding), yMax + padding])
|
||||
.domain([yMin - padding, yMax + padding])
|
||||
.range([margin.top + innerHeight, margin.top]);
|
||||
|
||||
const svg = d3
|
||||
|
||||
Reference in New Issue
Block a user