+
+ {#if keys.length > 1 && readRow}
+ {readRow.label}
+ {/if}
+
+
(active = null)}
+ onclick={() => select(rows[activeIndex])}
+ onfocus={() => (active ??= rows[0]?.key ?? null)}
+ {onkeydown}
+ onpointerleave={() => (active = null)}
+ onpointermove={pick}
+ role="slider"
+ tabindex="0"
+ style:height="{height}px"
+ bind:clientWidth={width}
+ >
+ {#if width > 0 && rows.length > 0}
+
+ {#each yTicks as tick (tick)}
+
+ {axisFormat(tick)}
+
+ {/each}
+
+ {#each s.segments as seg, j (seg.key)}
+ 0 !== seg.value > 0
+ )}
+ style:fill={seg.color}
+ />
+ {/each}
+
+ {#if capLabels && s.segments[0]}
+ {@const text = fmt(s.row, s.segments[0].value)}
+ {#if text}
+ 0
+ ? y(s.positive) - 5
+ : y(s.negative) + 13}
+ >
+ {text}
+
+ {/if}
+ {/if}
+ {#if tilted && i % labelEvery === 0}
+
+ {short(
+ s.row.label,
+ Math.min(TILTED_CHARS, Math.floor(cx / TILTED_CHAR_WIDTH))
+ )}
+
+ {:else if !tilted}
+
+ {short(s.row.label, Math.floor(x.step() / 6.4))}
+
+ {/if}
+ {/each}
+
+ {/if}
+
+
;
+}
+
+export interface MeterSegment {
+ color?: string;
+ label?: string;
+ value: number;
+}
+
+export interface LegendItem {
+ color: string;
+ hidden?: boolean;
+ key: string;
+ label: string;
+ shape?: "line" | "rect";
+ value?: string;
+}
+
+export type Side = "top" | "bottom" | "left" | "right";
+
+const PALETTE_SIZE = 8;
+
+export const OTHER_COLOR = "var(--cladd-fg-softest)";
+
+export const tones = {
+ expense: "var(--ff-expense)",
+ income: "var(--ff-income)",
+ transfer: "var(--ff-transfer)",
+ warn: "var(--ff-warn)",
+};
+
+export function seriesColor(index: number): string {
+ return index < PALETTE_SIZE ? `var(--ff-series-${index + 1})` : OTHER_COLOR;
+}
+
+export function wash(color: string, amount = 18): string {
+ return `color-mix(in oklch, ${color} ${amount}%, transparent)`;
+}
+
+export function utc(iso: string): Date {
+ const [y, m, d] = iso.slice(0, 10).split("-").map(Number);
+ return new Date(Date.UTC(y, m - 1, d));
+}
+
+export const crisp = (value: number) => Math.round(value) + 0.5;
+
+export function textWidth(text: string, px = 6.6): number {
+ return text.length * px;
+}
+
+export function roundedBar(
+ x: number,
+ y: number,
+ w: number,
+ h: number,
+ side: Side,
+ radius = 4
+): string {
+ const across = side === "top" || side === "bottom" ? w : h;
+ const along = side === "top" || side === "bottom" ? h : w;
+ const r = Math.max(0, Math.min(radius, across / 2, along));
+ const arc = (tx: number, ty: number) => `A${r},${r} 0 0 1 ${tx},${ty}`;
+ const right = x + w;
+ const bottom = y + h;
+ switch (side) {
+ case "top":
+ return `M${x},${bottom}V${y + r}${arc(x + r, y)}H${right - r}${arc(right, y + r)}V${bottom}Z`;
+ case "bottom":
+ return `M${right},${y}V${bottom - r}${arc(right - r, bottom)}H${x + r}${arc(x, bottom - r)}V${y}Z`;
+ case "right":
+ return `M${x},${y}H${right - r}${arc(right, y + r)}V${bottom - r}${arc(right - r, bottom)}H${x}Z`;
+ default:
+ return `M${right},${bottom}H${x + r}${arc(x, bottom - r)}V${y + r}${arc(x + r, y)}H${right}Z`;
+ }
+}
+
+export interface Segment {
+ color: string;
+ from: number;
+ key: string;
+ label: string;
+ outer: boolean;
+ to: number;
+ value: number;
+}
+
+export function stack(
+ row: StackRow,
+ keys: StackKey[]
+): { segments: Segment[]; positive: number; negative: number } {
+ let positive = 0;
+ let negative = 0;
+ const segments: Segment[] = [];
+ for (const key of keys) {
+ const value = row.values[key.key] ?? 0;
+ if (value === 0) {
+ continue;
+ }
+ const from = value > 0 ? positive : negative;
+ const to = from + value;
+ if (value > 0) {
+ positive = to;
+ } else {
+ negative = to;
+ }
+ segments.push({
+ color: (keys.length === 1 && row.color) || key.color,
+ from,
+ key: key.key,
+ label: key.label,
+ outer: false,
+ to,
+ value,
+ });
+ }
+ const lastUp = segments.findLast((s) => s.value > 0);
+ const lastDown = segments.findLast((s) => s.value < 0);
+ for (const s of segments) {
+ s.outer = s === lastUp || s === lastDown;
+ }
+ return { negative, positive, segments };
+}
+
+export function moveIndex(
+ key: string,
+ index: number,
+ count: number,
+ axis: "x" | "y" = "x"
+): number | null {
+ const back = axis === "x" ? "ArrowLeft" : "ArrowUp";
+ const forward = axis === "x" ? "ArrowRight" : "ArrowDown";
+ const start = index < 0 ? count : index;
+ switch (key) {
+ case back:
+ return Math.max(0, start - 1);
+ case forward:
+ return Math.min(count - 1, index + 1);
+ case "PageUp":
+ return Math.max(0, start - 7);
+ case "PageDown":
+ return Math.min(count - 1, index + 7);
+ case "Home":
+ return 0;
+ case "End":
+ return count - 1;
+ default:
+ return null;
+ }
+}
diff --git a/src/lib/components/dashboard/AccountBox.svelte b/src/lib/components/dashboard/AccountBox.svelte
new file mode 100644
index 0000000..3b89b04
--- /dev/null
+++ b/src/lib/components/dashboard/AccountBox.svelte
@@ -0,0 +1,188 @@
+
+
+
+ {#snippet tools()}
+ {#if trend.length > 1}
+
+ {#if list.isPending}
+
+ {:else if list.isError}
+
{list.error.message}
+ {:else if rows.length === 0}
+
+ No transactions in this period.
+
+ {:else}
+
+ {/if}
+
+
+ Create
+
+ go(createUrl("withdrawal", account.id))}
+ >New withdrawal
+ go(createUrl("deposit", account.id))}
+ >New deposit
+ go(createUrl("transfer", account.id))}
+ >New transfer
+
+
+
+
+ {formatMoney({ amount: a.current_balance, ...cur })}
+
+
+ go(showUrl(account.id))}
+ >Show
+ {#if canReconcile(account)}
+ go(reconcileUrl(account.id))}
+ >Reconcile
+ {/if}
+ go(editUrl(account.id))}
+ >Edit
+ openOld(showUrl(account.id))}
+ >Open in old UI
+
+
+ {/snippet}
+
diff --git a/src/lib/components/dashboard/AccountsChart.svelte b/src/lib/components/dashboard/AccountsChart.svelte
new file mode 100644
index 0000000..f35c92c
--- /dev/null
+++ b/src/lib/components/dashboard/AccountsChart.svelte
@@ -0,0 +1,190 @@
+
+
+
+ {#snippet tools()}
+
+ Chart shows
+ {#each [
+ ["accounts", "Accounts"],
+ ["net-worth", "Net worth"],
+ ] as [value, text] (value)}
+ setMode(value)}
+ type="button"
+ >
+ {text}
+
+ {/each}
+
+ {/snippet}
+
+ {#if chart.isPending}
+
+ {:else if chart.isError}
+
{chart.error.message}
+ {:else if panels.length === 0}
+
+ No accounts to draw. Pick the accounts for this chart in
+ Preferences .
+
+ {:else}
+ {#each panels as panel (panel.cur.code)}
+
+ {#if panels.length > 1}
+ {panel.cur.code}
+ {/if}
+
+ {/each}
+ {/if}
+
View your asset accounts
+ {#if converted}
+ Converted to your primary currency
+ {/if}
+ {/snippet}
+
diff --git a/src/lib/components/dashboard/BudgetsChart.svelte b/src/lib/components/dashboard/BudgetsChart.svelte
new file mode 100644
index 0000000..fe1147b
--- /dev/null
+++ b/src/lib/components/dashboard/BudgetsChart.svelte
@@ -0,0 +1,121 @@
+
+
+
+
+ {#if chart.isPending}
+
+ {:else if chart.isError}
+
{chart.error.message}
+ {:else if visible.length === 0}
+
+ No budgets with a limit or spending in this period. Set an amount for a
+ budget on the
+ budgets page .
+
+ {:else}
+ {#each visible as group (group.code)}
+
+ {#if visible.length > 1 || !group.limited}
+
+ {group.code}
+ {#if !group.limited}
+ · spent, no budget amount set in {group.code}
+ {/if}
+
+ {/if}
+
+ {/each}
+ {/if}
+
Go to your budgets
+ {/snippet}
+
diff --git a/src/lib/components/dashboard/CategoriesChart.svelte b/src/lib/components/dashboard/CategoriesChart.svelte
new file mode 100644
index 0000000..4818cd2
--- /dev/null
+++ b/src/lib/components/dashboard/CategoriesChart.svelte
@@ -0,0 +1,108 @@
+
+
+
+ g.bars.length))}
+ >
+ {#if chart.isPending}
+
+ {:else if chart.isError}
+
{chart.error.message}
+ {:else if visible.length === 0}
+
+ Nothing spent in this period. Expenses show up here by category.
+
+ {:else}
+ {#each visible as group (group.code)}
+
+ {#if visible.length > 1}
+ Spent in {group.code}
+ {/if}
+
+ {/each}
+ {/if}
+
Go to your categories
+ {/snippet}
+
diff --git a/src/lib/components/dashboard/DebtsBox.svelte b/src/lib/components/dashboard/DebtsBox.svelte
new file mode 100644
index 0000000..3b41f77
--- /dev/null
+++ b/src/lib/components/dashboard/DebtsBox.svelte
@@ -0,0 +1,103 @@
+
+
+{#if groups.length > 0}
+
+
+ {#each groups as group (group.code)}
+
+
+ {group.code}
+ {#if group.owed > 0}
+ Owed to me
+ {group.format(group.owed)}
+ {/if}
+ {#if group.owe > 0}
+ I owe
+ {group.format(group.owe)}
+ {/if}
+
+
+
+ {/each}
+
See your liabilities
+ {/snippet}
+
+{/if}
diff --git a/src/lib/components/dashboard/InfoBoxes.svelte b/src/lib/components/dashboard/InfoBoxes.svelte
new file mode 100644
index 0000000..6ce800b
--- /dev/null
+++ b/src/lib/components/dashboard/InfoBoxes.svelte
@@ -0,0 +1,266 @@
+
+
+{#snippet values(
+ list: SummaryEntry[],
+ abs = false
+)}
+ {#if list.length === 0}
+
+ 0
+
+ {:else}
+
+ {fmt(list[0], abs)}
+
+ {#if list.length > 1}
+
+ {#each list.slice(1) as e (e.code)}
+ {fmt(e, abs)}
+ {/each}
+
+ {/if}
+ {/if}
+{/snippet}
+
+{#snippet change(
+ delta: Delta | null
+)}
+ {#if delta}
+
+ {#if delta.up}
+
+ {:else}
+
+ {/if}
+
{delta.text}
+ than {prevName}
+
+ {#if earned}
+ +{fmt(earned, true)}
+ {/if}
+ {#if spent}
+ −{fmt(spent, true)}
+ {/if}
+
+ {/if}
+ {@render change(compare("balance", ["more", "less"]))}
+{/snippet}
+
+{#snippet bills()}
+ {@render values(unpaid, true)}
+ {#if paidShare.total > 0}
+
+ Paid:
+ {paid.length ? paid.map((e) => fmt(e, true)).join(", ") : "0"}
+
+{/snippet}
+
+{#snippet leftToSpend()}
+ {@render values(left)}
+ {#if left[0]?.sub}
+
+ {leftState === "none" ? "" : "Per day: "}{left[0].sub}
+
+ {/if}
+ {@render change(compare("left-to-spend", ["more", "less"]))}
+{/snippet}
+
+{#snippet netWorth()}
+ {@render values(worth)}
+ {@render change(compare("net-worth", ["more", "less"]))}
+{/snippet}
+
+
+ {@render box(
+ "In + out this period",
+ reportPath({
+ accounts: [ALL_ASSETS],
+ end: period.end,
+ items: [],
+ start: period.start,
+ type: "default",
+ }),
+ Scale,
+ "var(--ff-transfer)",
+ inOut
+ )}
+ {@render box(
+ "Subscriptions to pay",
+ "/subscriptions",
+ CalendarClock,
+ "var(--ff-series-3)",
+ bills
+ )}
+ {@render box(leftTitle, "/budgets", Wallet, leftColor, leftToSpend)}
+ {@render box(
+ "Net worth",
+ reportPath({
+ accounts: [ALL_ASSETS],
+ end: `${year}-12-31`,
+ items: [],
+ start: `${year}-01-01`,
+ type: "default",
+ }),
+ ChartLine,
+ "var(--ff-brand)",
+ netWorth
+ )}
+
diff --git a/src/lib/components/dashboard/InsightBox.svelte b/src/lib/components/dashboard/InsightBox.svelte
new file mode 100644
index 0000000..c2bb89d
--- /dev/null
+++ b/src/lib/components/dashboard/InsightBox.svelte
@@ -0,0 +1,144 @@
+
+
+{#snippet chart(
+ group: (typeof groups)[number],
+ height: number
+)}
+
+ {#if visible.length > 1}
+ {verb}
+ in {group.code}
+ {/if}
+
+{/snippet}
+
+
+
+ {#if insight.isPending}
+
+ {:else if insight.isError}
+
{insight.error.message}
+ {:else if visible.length === 0}
+
+ {kind === "expense"
+ ? "Nothing spent in this period."
+ : "Nothing earned in this period."}
+
+ {:else}
+ {#each [wide, narrow] as set, i (i)}
+ {#if set.length > 0}
+
g.bars.length))}
+ >
+ {#each set as group (group.code)}
+ {@render chart(group, i === 0 ? 240 : 180)}
+ {/each}
+
+ {/if}
+ {/each}
+ {/if}
+
See your {kind} accounts
+ {/snippet}
+
diff --git a/src/lib/components/dashboard/PiggyBanksBox.svelte b/src/lib/components/dashboard/PiggyBanksBox.svelte
new file mode 100644
index 0000000..fa8f1e9
--- /dev/null
+++ b/src/lib/components/dashboard/PiggyBanksBox.svelte
@@ -0,0 +1,70 @@
+
+
+{#if saving.length > 0}
+
+
+ {#snippet footer()}
+ Go to your piggy banks
+ {/snippet}
+
+{/if}
diff --git a/src/lib/components/dashboard/SubscriptionsBox.svelte b/src/lib/components/dashboard/SubscriptionsBox.svelte
new file mode 100644
index 0000000..b385600
--- /dev/null
+++ b/src/lib/components/dashboard/SubscriptionsBox.svelte
@@ -0,0 +1,157 @@
+
+
+{#if (bills.data?.length ?? 0) > 0}
+
+
+ {#if meters.length === 0}
+
Nothing expected in this period.
+ {:else}
+
+ {/if}
+ {#if due.length > 0}
+
+ {/if}
+
Go to your subscriptions
+ {/snippet}
+
+{/if}
diff --git a/src/lib/components/dashboard/data.ts b/src/lib/components/dashboard/data.ts
new file mode 100644
index 0000000..4193b7e
--- /dev/null
+++ b/src/lib/components/dashboard/data.ts
@@ -0,0 +1,221 @@
+import { api } from "#lib/api/client.js";
+import { all } from "#lib/api/lists.js";
+import type { Account, BasicSummaryEntry } from "#lib/api/types.js";
+import { addDays, today } from "#lib/dates.js";
+import { compactMoney, formatMoney, toNumber } from "#lib/format.js";
+import { period } from "#lib/period.svelte.js";
+import { session } from "#lib/session.svelte.js";
+
+export interface Cur {
+ code: string;
+ decimals: number;
+ symbol: string;
+}
+
+export interface SummaryEntry extends Cur {
+ amount: number;
+ noBudgets: boolean;
+ sub: string;
+ title: string;
+}
+
+export interface ChartSet {
+ currency_code: string;
+ currency_decimal_places: number;
+ currency_symbol?: string;
+ entries: Record;
+ label: string;
+ pc_entries?: Record | unknown[];
+ primary_currency_code?: string;
+ primary_currency_decimal_places?: number;
+ primary_currency_symbol?: string;
+}
+
+export interface InsightEntry {
+ currency_code: string;
+ difference: string;
+ difference_float?: number;
+ id?: string;
+ name?: string;
+}
+
+const SUMMARY_KEY = /^(.+)-in-([A-Z0-9]+)$/;
+
+export function currency(code: string): Cur {
+ const found = session.currencies.find((c) => c.attributes.code === code);
+ return {
+ code,
+ decimals: found?.attributes.decimal_places ?? 2,
+ symbol: found?.attributes.symbol ?? code,
+ };
+}
+
+export const setCurrency = (set: ChartSet): Cur => ({
+ ...currency(set.currency_code),
+ ...(set.currency_symbol ? { symbol: set.currency_symbol } : {}),
+});
+
+export const money = (cur: Cur) => (value: number) =>
+ formatMoney({
+ amount: value,
+ code: cur.code,
+ decimals: cur.decimals,
+ symbol: cur.symbol,
+ });
+
+export const axis = (cur: Cur) => (value: number) =>
+ compactMoney(value, cur.symbol);
+
+export const primaryCode = () => session.primary?.code ?? "";
+
+export function byCurrency(
+ items: T[],
+ code: (item: T) => string
+): [string, T[]][] {
+ const groups = new Map();
+ for (const item of items) {
+ const key = code(item);
+ const list = groups.get(key);
+ if (list) {
+ list.push(item);
+ } else {
+ groups.set(key, [item]);
+ }
+ }
+ const primary = primaryCode();
+ return [...groups.entries()].sort(
+ ([a, la], [b, lb]) =>
+ Number(b === primary) - Number(a === primary) || lb.length - la.length
+ );
+}
+
+export function parseSummary(
+ raw: Record | undefined
+): Record {
+ const result: Record = {};
+ for (const [key, entry] of Object.entries(raw ?? {})) {
+ const match = key.match(SUMMARY_KEY);
+ if (!match) {
+ continue;
+ }
+ const extra = entry as BasicSummaryEntry & {
+ no_available_budgets?: boolean;
+ };
+ const list = result[match[1]] ?? [];
+ list.push({
+ amount: toNumber(entry.monetary_value),
+ code: entry.currency_code ?? match[2],
+ decimals: entry.currency_decimal_places ?? 2,
+ noBudgets: extra.no_available_budgets === true,
+ sub: entry.sub_title ?? "",
+ symbol: entry.currency_symbol ?? match[2],
+ title: entry.title ?? "",
+ });
+ result[match[1]] = list;
+ }
+ const primary = primaryCode();
+ for (const list of Object.values(result)) {
+ list.sort(
+ (a, b) =>
+ Number(b.code === primary) - Number(a.code === primary) ||
+ Math.abs(b.amount) - Math.abs(a.amount)
+ );
+ }
+ return result;
+}
+
+export function hasPrimary(sets: ChartSet[]): boolean {
+ return (
+ session.prefs.convert_to_primary === true &&
+ sets.length > 0 &&
+ sets.every((s) => s.pc_entries && !Array.isArray(s.pc_entries))
+ );
+}
+
+export function upTo(end: string): string {
+ const now = today();
+ return end < now ? end : now;
+}
+
+export function periodQuery(extra: Record = {}) {
+ return { end: period.end, start: period.start, ...extra };
+}
+
+export function hrefWith(
+ url: { href: string },
+ changes: Record
+): string {
+ const next = new URL(url.href);
+ for (const [name, value] of Object.entries(changes)) {
+ if (value === null) {
+ next.searchParams.delete(name);
+ } else {
+ next.searchParams.set(name, value);
+ }
+ }
+ next.searchParams.set("start", period.start);
+ next.searchParams.set("end", period.end);
+ return next.pathname + next.search;
+}
+
+export const summaryQuery = (start: string, end: string) => ({
+ queryFn: () =>
+ api>("/v1/summary/basic", {
+ query: { end, start },
+ }),
+ queryKey: ["summary", start, end],
+});
+
+export const accountsChartQuery = (
+ start: string,
+ end: string,
+ everything = false
+) => ({
+ queryFn: () =>
+ api("/v1/chart/account/overview", {
+ query: {
+ ...span(start, end),
+ period: "1D",
+ preselected: everything ? "all" : undefined,
+ },
+ }),
+ queryKey: ["chart-accounts", start, end, everything],
+});
+
+export function seriesPoints(set: ChartSet, converted: boolean) {
+ const entries = (converted ? set.pc_entries : set.entries) as
+ | Record
+ | undefined;
+ return Object.entries(entries ?? {}).map(([date, value]) => ({
+ x: date.slice(0, 10),
+ y: toNumber(value),
+ }));
+}
+
+export function setPrimary(set: ChartSet): Cur {
+ return currency(set.primary_currency_code ?? set.currency_code);
+}
+
+export function balanceDate(start: string, end: string): string {
+ const until = upTo(end);
+ return until < start ? end : until;
+}
+
+export function balanceRange(start: string, end: string) {
+ const until = balanceDate(start, end);
+ return until > start ? { date: until, end: until, start } : { date: until };
+}
+
+export function span(start: string, end: string) {
+ return { end: end > start ? end : addDays(start, 1), start };
+}
+
+export const accountsQuery = (type: string, start: string, end: string) => ({
+ queryFn: () =>
+ all("/v1/accounts", { ...balanceRange(start, end), type }),
+ queryKey: ["accounts", type, start, end],
+});
+
+export function proportional(counts: number[]): string {
+ return counts.map((n) => `minmax(0, ${Math.max(2, n)}fr)`).join(" ");
+}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 2b16241..fba74e1 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,5 +1,96 @@
+
+
+ {#each frontpage as account (account.id)}
+ {@const trend = trends.get(account.attributes.name)}
+
+ {/each}
+
+
+
+
+
+
diff --git a/src/routes/accounts/+page.ts b/src/routes/accounts/+page.ts
new file mode 100644
index 0000000..b92cef7
--- /dev/null
+++ b/src/routes/accounts/+page.ts
@@ -0,0 +1,5 @@
+import { redirect } from "@sveltejs/kit";
+
+export function load() {
+ redirect(307, "/accounts/asset");
+}
diff --git a/src/routes/accounts/[type=accounttype]/+page.svelte b/src/routes/accounts/[type=accounttype]/+page.svelte
new file mode 100644
index 0000000..a06d464
--- /dev/null
+++ b/src/routes/accounts/[type=accounttype]/+page.svelte
@@ -0,0 +1,11 @@
+
+
+{#key type}
+ {account.error.message}
+{:else if item}
+ {#key item.id}
+