whisper-money/resources/js/lib
Víctor Falcón 50d0fccd17
fix(dashboard): render negative net worth as a downward bar (#722)
## Problem

On the dashboard **Net Worth Evolution** monthly bar chart, users with a
large negative net worth (lots of debt) saw an **empty chart** — only
the x-axis month labels rendered, no bars.

Root cause: the chart scales each asset segment so the stacked bar
height equals net worth. For negative net worth the scale factor was
clamped to zero:

```ts
const scaleFactor = hasLiabs && totalAssets > 0
    ? Math.max(0, netWorth / totalAssets) // negative net worth -> 0 -> every bar collapses
    : 1;
```

A stack of positive asset segments simply can't represent a negative
total, so everything collapsed to zero height.

## Fix

- Extract the scaling into a tested pure helper
`computeNetWorthBarScaling`.
- When net worth is **negative**, hide the (meaningless) scaled asset
segments and draw the deficit as a **single downward bar** from a **zero
baseline** (dashed reference line).
- **Positive** periods still stack assets upward. Both directions round
only at their far end and meet the zero line flush, so upward and
downward bars look symmetric.
- Extend the same handling to the **daily area chart**, which shared the
bug through the same scaled dataset.
- Share a single `NetWorthMode` type across the bar/area charts and
tooltip (was duplicated in three places).
- Translate the tooltip **Net Worth / Total** labels (were hardcoded
English; added `Net Worth` to `lang/es.json`).
- Render the chart for **liability-only** users (a debtor with just a
loan) instead of the "No account data available" empty state.

## Tests

- Unit tests for `computeNetWorthBarScaling`: no-liabilities, positive,
negative-with-assets, liabilities-only, net-worth-exactly-zero, and
no-assets cases.
- `bun run test`, `prettier --check`, `eslint` all green on the touched
files.

## QA

Verified in the running app (Playwright) with two seeded users:

- **Heavily indebted** (net worth −56.250,00 €): the chart now renders
red downward bars instead of an empty area.
- **Net worth crossing zero**: negative months draw downward, positive
months stack upward, sharing the zero baseline; tooltip shows
per-account balances + the (now translated) "Patrimonio Neto" total.

## Demo


https://github.com/user-attachments/assets/7a9b167f-c037-4c82-8b68-f32932be99fe

## Screenshots

**Before** — empty chart, only x-axis labels:

<!-- PLACEHOLDER: before screenshot -->
<img width="1440" height="900" alt="net-worth-before"
src="https://github.com/user-attachments/assets/3bf9b3e3-ae75-4230-bca7-e7246a9a35d9"
/>


**After** — negative net worth as downward bars:
<img width="1440" height="900" alt="net-worth-after-tooltip"
src="https://github.com/user-attachments/assets/85302f0a-e427-4cbf-baba-5b1414049e9f"
/>
<img width="1440" height="900" alt="net-worth-after-mixed"
src="https://github.com/user-attachments/assets/41f08331-f055-4245-beeb-8d071c0d5d6d"
/>
<img width="1440" height="900" alt="net-worth-after-negative"
src="https://github.com/user-attachments/assets/c8610b03-dcff-46de-8987-d47c477ddd85"
/>
2026-07-22 09:32:18 +00:00
..
banking-connections.test.ts fix(open-banking): only block re-adding a bank when a live connection exists (#569) 2026-06-20 13:09:04 +02:00
banking-connections.ts fix(open-banking): only block re-adding a bank when a live connection exists (#569) 2026-06-20 13:09:04 +02:00
category-tree.test.ts feat: parent/child category tree (#474) 2026-06-03 19:30:12 +02:00
category-tree.ts feat: parent/child category tree (#474) 2026-06-03 19:30:12 +02:00
chart-calculations.test.ts fix(dashboard): render negative net worth as a downward bar (#722) 2026-07-22 09:32:18 +00:00
chart-calculations.ts fix(dashboard): render negative net worth as a downward bar (#722) 2026-07-22 09:32:18 +00:00
chart-tooltip-position.test.ts fix(chart): stop tooltip render loop crashing the dashboard (PHP-LARAVEL-3B) (#657) 2026-07-07 18:39:09 +00:00
chart-tooltip-position.ts fix(chart): stop tooltip render loop crashing the dashboard (PHP-LARAVEL-3B) (#657) 2026-07-07 18:39:09 +00:00
chunk-load-recovery.test.ts Fix Vite asset preload recovery (#399) 2026-05-14 15:59:08 +02:00
chunk-load-recovery.ts Fix Vite asset preload recovery (#399) 2026-05-14 15:59:08 +02:00
connect-providers.tsx feat(banking): enable Interactive Brokers for all users (#593) 2026-06-26 11:03:21 +02:00
crypto.ts refactor(encryption): strip client-side transaction encryption (#514) 2026-06-20 16:13:26 +00:00
csrf.test.ts refactor(js): extract shared getCsrfToken util (#475) 2026-06-03 17:26:09 +02:00
csrf.ts refactor(js): extract shared getCsrfToken util (#475) 2026-06-03 17:26:09 +02:00
cursor-pagination.test.ts Fix Sentry transaction and dashboard crashes (#372) 2026-05-10 11:10:31 +01:00
cursor-pagination.ts Fix Sentry transaction and dashboard crashes (#372) 2026-05-10 11:10:31 +01:00
debug.ts fix: make useIsMobile hook and utility functions SSR-safe 2025-12-08 17:33:54 +01:00
dexie-db.ts fix(sync): don't crash when IndexedDB is unavailable (PHP-LARAVEL-43) (#654) 2026-07-07 04:59:10 +00:00
file-parser.test.ts fix(import): honor selected date format for CSV imports (#494) 2026-06-05 15:10:48 +02:00
file-parser.ts fix(import): honor selected date format for CSV imports (#494) 2026-06-05 15:10:48 +02:00
import-config-storage.ts feat(import): persist per-account import configuration on the backend (#698) 2026-07-18 16:10:40 +02:00
key-storage.ts refactor(encryption): strip client-side transaction encryption (#514) 2026-06-20 16:13:26 +00:00
media-query.test.ts fix(appearance): support MediaQueryList change events on legacy Safari (PHP-LARAVEL-41) (#646) 2026-07-05 17:03:35 +00:00
media-query.ts fix(appearance): support MediaQueryList change events on legacy Safari (PHP-LARAVEL-41) (#646) 2026-07-05 17:03:35 +00:00
new-transactions.test.ts feat(transactions): make new-transaction marker cross-device (#611) 2026-06-29 19:11:37 +02:00
new-transactions.ts feat(transactions): make new-transaction marker cross-device (#611) 2026-06-29 19:11:37 +02:00
orphan-components.test.ts chore(frontend): add orphan component detection and remove dead components (#181) 2026-03-02 12:43:27 +01:00
posthog.test.ts Harden browser storage and PostHog recording (#402) 2026-05-14 15:57:48 +02:00
posthog.ts feat(posthog): route analytics through reverse proxy (#463) 2026-06-01 09:29:30 +02:00
rule-builder-utils.test.ts feat(transactions): add counterparty fields (#440) 2026-05-27 16:20:55 +02:00
rule-builder-utils.ts feat: parent/child category tree (#474) 2026-06-03 19:30:12 +02:00
rule-engine-parity.test.ts refactor: consolidate duplicated financial calculations (#643) 2026-07-04 22:26:44 +02:00
rule-engine.ts feat(transactions): add counterparty fields (#440) 2026-05-27 16:20:55 +02:00
sankey-utils.ts Render the Cashflow Sankey with recharts (responsive + expense drill-down) (#670) 2026-07-12 16:26:17 +00:00
sentry.test.ts fix(sentry): drop browser-extension noise before sending events (#568) 2026-06-20 12:47:05 +02:00
sentry.ts fix(sentry): drop browser-extension noise before sending events (#568) 2026-06-20 12:47:05 +02:00
subscription-payment-issue-toast.test.ts feat: keep past due subscriptions active (#416) 2026-05-22 10:19:11 +01:00
subscription-payment-issue-toast.ts feat: keep past due subscriptions active (#416) 2026-05-22 10:19:11 +01:00
sync-manager.test.ts fix(sync): don't crash when IndexedDB is unavailable (PHP-LARAVEL-43) (#654) 2026-07-07 04:59:10 +00:00
sync-manager.ts fix(sync): don't crash when IndexedDB is unavailable (PHP-LARAVEL-43) (#654) 2026-07-07 04:59:10 +00:00
transaction-delete-confirmation.test.ts Fix Spanish translations in category and delete flows (#397) 2026-05-14 11:36:53 +01:00
transaction-delete-confirmation.ts Fix Spanish translations in category and delete flows (#397) 2026-05-14 11:36:53 +01:00
transaction-filter-serialization.ts feat(transactions): save and reuse transaction filters (#496) 2026-06-05 18:00:14 +02:00
transaction-re-evaluation.test.ts Add labels to automation rules (#379) 2026-05-11 14:56:25 +02:00
transaction-re-evaluation.ts Add labels to automation rules (#379) 2026-05-11 14:56:25 +02:00
utils.ts Prevent duplicate notes when re-evaluating automation rules 2025-12-04 16:42:54 +01:00