handle empty journal

fixes #154

src/lib/allocation.ts

@@ -332,9 +332,13 @@ export function renderAllocationTimeline(
     assets,
     _.map(assets, () => 0)
   );
-  const start = timeline[0][0].timestamp,
+  const start = timeline[0]?.[0]?.timestamp,
     end = now();
 
+  if (!start) {
+    return [];
+  }
+
   interface Point {
     date: dayjs.Dayjs;
     [key: string]: number | dayjs.Dayjs;

src/lib/expense/monthly.ts

@@ -17,7 +17,7 @@ import {
   type Legend
 } from "$lib/utils";
 import COLORS, { generateColorScheme, white } from "$lib/colors";
-import { get, type Readable, type Writable } from "svelte/store";
+import { get, type Readable, type Unsubscriber, type Writable } from "svelte/store";
 import { iconify } from "$lib/icon";
 import { byExpenseGroup, expenseGroup, pieData } from "$lib/expense";
 
@@ -133,7 +133,11 @@ export function renderMonthlyExpensesTimeline(
   groupsStore: Writable<string[]>,
   monthStore: Writable<string>,
   dateRangeStore: Readable<{ from: Dayjs; to: Dayjs }>
-) {
+): {
+  z: d3.ScaleOrdinal<string, string, never>;
+  destroy: Unsubscriber;
+  legends: Legend[];
+} {
   const id = "#d3-monthly-expense-timeline";
   const timeFormat = "MMM-YYYY";
   const MAX_BAR_WIDTH = rem(40);
@@ -158,7 +162,13 @@ export function renderMonthlyExpensesTimeline(
   const [start, end] = d3.extent(_.map(postings, (p) => p.date));
 
   if (!start) {
-    return { z: z };
+    return {
+      z: z,
+      destroy: () => {
+        // void
+      },
+      legends: []
+    };
   }
 
   const ms = _.groupBy(postings, (p) => p.date.format(timeFormat));

src/lib/income.ts

@@ -204,6 +204,10 @@ export function renderYearlyIncomeTimeline(yearlyCards: IncomeYearlyCard[]): Leg
   const start = _.min(_.map(yearlyCards, (c) => c.start_date)),
     end = _.max(_.map(yearlyCards, (c) => c.end_date));
 
+  if (!start || !end) {
+    return [];
+  }
+
   const height = BAR_HEIGHT * (end.year() - start.year());
   svg.attr("height", height + margin.top + margin.bottom);
 
@@ -321,6 +325,10 @@ export function renderYearlyTimelineOf(
   const start = _.min(_.map(yearlyCards, (c) => c.start_date)),
     end = _.max(_.map(yearlyCards, (c) => c.end_date));
 
+  if (!start || !end) {
+    return [];
+  }
+
   const height = BAR_HEIGHT * (end.year() - start.year());
   svg.attr("height", height + margin.top + margin.bottom);
 

src/lib/investment.ts

@@ -50,6 +50,10 @@ export function renderMonthlyInvestmentTimeline(postings: Posting[]): Legend[] {
     end = now().startOf("month");
   const ts = _.groupBy(postings, (p) => p.date.format(timeFormat));
 
+  if (!start) {
+    return [];
+  }
+
   interface Point {
     month: string;
     [key: string]: number | string | dayjs.Dayjs;
@@ -218,6 +222,10 @@ export function renderYearlyInvestmentTimeline(yearlyCards: InvestmentYearlyCard
   const start = _.min(_.map(yearlyCards, (c) => c.start_date)),
     end = _.max(_.map(yearlyCards, (c) => c.end_date));
 
+  if (!start || !end) {
+    return [];
+  }
+
   const height = BAR_HEIGHT * (end.year() - start.year());
   svg.attr("height", height + margin.top + margin.bottom);
 

src/store.ts

@@ -81,7 +81,7 @@ export const theme = writable("light");
 export const loading = writable(false);
 
 const DELAY = 200;
-const DEBOUNCE_DELAY = 150;
+const DEBOUNCE_DELAY = 200;
 
 let timeoutId: NodeJS.Timeout;
 export const delayedLoading = derived(