feat(dm): more stats

src/App.tsx

@@ -13,23 +13,6 @@ const App: Component = () => {
       <Route path="/overview" component={Overview} />
       <Route path="/dm/:dmid" component={DmId} />
       <Route path="/group/:groupid" component={GroupId} />
-      <Route
-        path="/test"
-        component={() => {
-          console.time("first");
-          console.log(allThreadsOverviewQuery());
-          void allThreadsOverviewQuery().then((result) => {
-            console.log(result);
-            console.timeEnd("first");
-            console.time("second");
-            void allThreadsOverviewQuery().then((result) => {
-              console.log(result);
-              console.timeEnd("second");
-            });
-          });
-          return "";
-        }}
-      />
     </>
   );
 };

src/db.ts

@@ -153,59 +153,14 @@ const dmPartnerRecipientQueryRaw = (dmId: number) =>
 
 export const dmPartnerRecipientQuery = cached(dmPartnerRecipientQueryRaw);
 
-const dmOverviewQueryRaw = (dmId: number) =>
-  kyselyDb()
-    .selectFrom("message")
-    .select((eb) => [
-      eb.fn.countAll().as("message_count"),
-      eb.fn.min("date_sent").as("first_message_date"),
-      eb.fn.max("date_sent").as("last_message_date"),
-    ])
-    .where((eb) =>
-      eb.and([
-        eb("thread_id", "=", dmId),
-        eb("body", "is not", null),
-        eb("body", "!=", ""),
-      ])
-    )
-    .executeTakeFirst();
-
-export const dmOverviewQuery = cached(dmOverviewQueryRaw);
-
-const threadSentMessagesPerPersonOverviewQueryRaw = (threadId: number) =>
-  kyselyDb()
-    .selectFrom("message")
-    .select((eb) => [
-      "from_recipient_id",
-      sql<string>`DATE(datetime(message.date_sent / 1000, 'unixepoch'))`.as(
-        "message_date"
-      ),
-      eb.fn.countAll().as("message_count"),
-    ])
-    .groupBy(["from_recipient_id", "message_date"])
-    .orderBy(["message_date"])
-    .where((eb) =>
-      eb.and([
-        eb("body", "is not", null),
-        eb("body", "!=", ""),
-        eb("thread_id", "=", threadId),
-      ])
-    )
-    .$narrowType<{
-      message_count: number;
-    }>()
-    .execute();
-
-export const dmSentMessagesPerPersonOverviewQuery = cached(
-  threadSentMessagesPerPersonOverviewQueryRaw
-);
-
 const threadSentMessagesOverviewQueryRaw = (threadId: number) =>
   kyselyDb()
     .selectFrom("message")
     .select([
       "from_recipient_id",
-      sql<Date>`datetime(date_sent / 1000, 'unixepoch')`.as("message_datetime"),
+      sql<string>`datetime(date_sent / 1000, 'unixepoch')`.as(
+        "message_datetime"
+      ),
     ])
     .orderBy(["message_datetime"])
     .where((eb) =>

src/index.tsx

@@ -1,6 +1,7 @@
 /* @refresh reload */
 import { render } from "solid-js/web";
 import { Router } from "@solidjs/router";
+import { MetaProvider } from "@solidjs/meta";
 
 import App from "./App";
 
@@ -16,9 +17,11 @@ if (root) {
   render(
     () => (
       <div class="mx-auto max-w-screen-2xl">
-        <Router>
-          <App />
-        </Router>
+        <MetaProvider>
+          <Router>
+            <App />
+          </Router>
+        </MetaProvider>
       </div>
     ),
     root,

src/lib/date.ts

@@ -8,3 +8,86 @@ export const getDistanceBetweenDatesInDays = (a: Date, b: Date) => {
 
   return Math.floor((utc2 - utc1) / _MS_PER_DAY);
 };
+
+// https://dev.to/pretaporter/how-to-get-month-list-in-your-language-4lfb
+export const getMonthList = (
+  locales?: string | string[],
+  format: "long" | "short" = "long"
+): string[] => {
+  const year = new Date().getFullYear(); // 2020
+  const monthList = [...Array(12).keys()]; // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
+  const formatter = new Intl.DateTimeFormat(locales, {
+    month: format,
+  });
+
+  const getMonthName = (monthIndex: number) =>
+    formatter.format(new Date(year, monthIndex));
+
+  return monthList.map(getMonthName);
+};
+
+export const getDateList = (startDate: Date, endDate: Date): Date[] => {
+  const dateArray = new Array();
+
+  // end date for loop has to be one date after because we increment after adding the date in the loop
+  const endDateForLoop = new Date(endDate);
+
+  endDateForLoop.setDate(endDateForLoop.getDate() + 1);
+
+  let currentDate = startDate;
+
+  while (currentDate <= endDateForLoop) {
+    dateArray.push(new Date(currentDate));
+
+    const newDate = new Date(currentDate);
+    newDate.setDate(newDate.getDate() + 1);
+
+    currentDate = newDate;
+  }
+
+  return dateArray;
+};
+
+export const getHourList = (
+  locales?: string | string[],
+  format: "numeric" | "2-digit" = "numeric"
+): string[] => {
+  const now = new Date();
+  const year = now.getFullYear();
+  const month = now.getMonth();
+  const day = now.getDate();
+
+  const hourList = [...Array(24).keys()]; // [0, 1, 2, 3, 4, 5, 6, ..., 23]
+  const formatter = new Intl.DateTimeFormat(locales, {
+    hour: format,
+    hourCycle: "h11",
+  });
+
+  const getHourName = (hourIndex: number) =>
+    formatter.format(new Date(year, month, day, hourIndex));
+
+  return hourList.map(getHourName);
+};
+
+export const getWeekdayList = (
+  locales?: string | string[],
+  format: "long" | "short" | "narrow" = "long"
+): string[] => {
+  const monday = new Date();
+  // set day to monday (w/o +1 it would be sunday)
+  monday.setDate(monday.getDate() - monday.getDay() + 1);
+
+  const year = monday.getFullYear();
+  const month = monday.getMonth();
+  const mondayDate = monday.getDate();
+
+  const hourList = [...Array(7).keys()]; // [0, 1, 2, 3, 4, 5, 6]
+  const formatter = new Intl.DateTimeFormat(locales, {
+    weekday: format,
+  });
+
+  const getWeekDayName = (weekDayIndex: number) =>
+    formatter.format(new Date(year, month, mondayDate + weekDayIndex));
+
+  return hourList.map(getWeekDayName);
+};

src/lib/db-cache.ts

@@ -1,4 +1,4 @@
-import { createEffect, createRoot, on } from "solid-js";
+import { createRoot, on, createDeferred } from "solid-js";
 
 const DATABASE_HASH_PREFIX = "database";
 
@@ -27,35 +27,36 @@ const hashString = (str: string) => {
   return hash;
 };
 
-const HASH_STORE_KEY = "database_hash";
+const HASH_STORE_KEY = `${DATABASE_HASH_PREFIX}_hash`;
 
 // cannot import `db` the normal way because this file is imported in ~/db.ts before the initialisation of `db` has happened
-queueMicrotask(() => {
-  createRoot(() => {
-    void import("~/db").then(({ db }) => {
-      createEffect(
-        on(db, (currentDb) => {
-          if (currentDb) {
-            const newHash = hashString(new TextDecoder().decode(currentDb.export())).toString();
+createRoot(() => {
+  void import("~/db").then(({ db }) => {
+    // we use create deferred because hasing can take very long and we don't want to block the mainthread
+    createDeferred(
+      on(db, (currentDb) => {
+        if (currentDb) {
+          const newHash = hashString(
+            new TextDecoder().decode(currentDb.export())
+          ).toString();
 
-            const oldHash = localStorage.getItem(HASH_STORE_KEY);
+          const oldHash = localStorage.getItem(HASH_STORE_KEY);
 
-            console.log(newHash, oldHash);
+          if (newHash !== oldHash) {
+            clearDbCache();
 
-            if (newHash !== oldHash) {
-              clearDbCache();
-
-              localStorage.setItem(HASH_STORE_KEY, newHash);
-            }
+            localStorage.setItem(HASH_STORE_KEY, newHash);
           }
-        }),
-      );
-    });
+        }
+      })
+    );
   });
 });
 
 class LocalStorageCacheAdapter {
-  keys = new Set<string>(Object.keys(localStorage).filter((key) => key.startsWith(this.prefix)));
+  keys = new Set<string>(
+    Object.keys(localStorage).filter((key) => key.startsWith(this.prefix))
+  );
   prefix = "database";
 
   #createKey(cacheName: string, key: string): string {
@@ -66,7 +67,16 @@ class LocalStorageCacheAdapter {
     const fullKey = this.#createKey(cacheName, key);
     this.keys.add(fullKey);
 
-    localStorage.setItem(fullKey, JSON.stringify(value));
+    try {
+      localStorage.setItem(fullKey, JSON.stringify(value));
+    } catch (error: unknown) {
+      if (
+        error instanceof DOMException &&
+        error.name === "QUOTA_EXCEEDED_ERR"
+      ) {
+        console.error("Storage quota exceeded, not caching new function calls");
+      }
+    }
   }
 
   has(cacheName: string, key: string): boolean {
@@ -84,14 +94,44 @@ class LocalStorageCacheAdapter {
 
 const cache = new LocalStorageCacheAdapter();
 
-export const cached = <T extends unknown[], R, TT>(fn: (...args: T) => R, self?: ThisType<TT>): ((...args: T) => R) => {
+const createHashKey = (...args: unknown[]) => {
+  let stringToHash = "";
+
+  for (const arg of args) {
+    switch (typeof arg) {
+      case "string":
+        stringToHash += arg;
+        break;
+      case "number":
+      case "bigint":
+      case "symbol":
+      case "function":
+        stringToHash += arg.toString();
+        break;
+      case "boolean":
+      case "undefined":
+        stringToHash += String(arg);
+        break;
+      case "object":
+        stringToHash += JSON.stringify(arg);
+        break;
+    }
+  }
+
+  return hashString(stringToHash);
+};
+
+export const cached = <T extends unknown[], R, TT>(
+  fn: (...args: T) => R,
+  self?: ThisType<TT>
+): ((...args: T) => R) => {
   const cacheName = hashString(fn.toString()).toString();
 
   // important to return a promise on follow-up calls even if the data is immediately available
   let isPromise: boolean;
 
   return (...args: T) => {
-    const cacheKey = JSON.stringify(args);
+    const cacheKey = createHashKey(...args).toString();
 
     const cachedValue = cache.get<R>(cacheName, cacheKey);
 

src/lib/messages.ts

@@ -0,0 +1,89 @@
+import { createEffect, createMemo, on, type Accessor } from "solid-js";
+import { getDateList, getHourList, getMonthList, getWeekdayList } from "./date";
+import { cached } from "./db-cache";
+import type { MessageOverview, MessageStats, Recipients } from "~/types";
+import { isSameDay } from "date-fns";
+
+export const hourNames = getHourList();
+
+const initialHoursMap = [...hourNames.keys()];
+
+export const monthNames = getMonthList();
+
+const initialMonthMap = [...monthNames.keys()];
+
+export const weekdayNames = getWeekdayList();
+
+const initialWeekdayMap = [...weekdayNames.keys()];
+
+export const createMessageStatsSources = (
+  messageOverview: Accessor<MessageOverview>,
+  recipients: Accessor<Recipients>
+) => {
+  const initialRecipientMap = () =>
+    Object.fromEntries(recipients().map(({ recipientId }) => [recipientId, 0]));
+
+  const dateList = () => {
+    const currentDmMessagesOverview = messageOverview();
+    const firstDate = currentDmMessagesOverview?.at(0)?.messageDate;
+    const lastDate = currentDmMessagesOverview?.at(-1)?.messageDate;
+    if (firstDate && lastDate) {
+      return getDateList(firstDate, lastDate).map((date) => ({
+        totalMessages: 0,
+        date,
+        ...initialRecipientMap(),
+      }));
+    }
+  };
+
+  return createMemo(() => {
+    const currentMessageOverview = messageOverview();
+    const currentDateList = dateList();
+    const currentInitialRecipientMap = initialRecipientMap();
+
+    const messageStats: MessageStats = {
+      person: { ...currentInitialRecipientMap },
+      month: initialMonthMap.map(() => ({ ...currentInitialRecipientMap })),
+      date: currentDateList ?? [],
+      weekday: initialWeekdayMap.map(() => ({ ...currentInitialRecipientMap })),
+      daytime: initialHoursMap.map(() => ({ ...currentInitialRecipientMap })),
+    };
+
+    if (currentMessageOverview && currentDateList) {
+      const { person, month, date, weekday, daytime } = messageStats;
+
+      for (const message of currentMessageOverview) {
+        const { messageDate } = message;
+
+        // increment overall message count of a person
+        person[message.fromRecipientId] += 1;
+
+        // increment the message count of the message's month for this recipient
+        // months are an array from 0 - 11
+        month[messageDate.getMonth() - 1][message.fromRecipientId] += 1;
+
+        // biome-ignore lint/style/noNonNullAssertion: <explanation>
+        const dateStatsEntry = date.find(({ date }) =>
+          isSameDay(date, messageDate)
+        )!;
+
+        // increment the message count of the message's date for this recipient
+        dateStatsEntry[message.fromRecipientId] += 1;
+
+        // increment the overall message count of the message's date
+        dateStatsEntry.totalMessages += 1;
+
+        const weekdayOfDate = messageDate.getDay();
+        // we index starting with monday while the `Date` object indexes starting with Sunday
+        const weekdayIndex = weekdayOfDate === 0 ? 6 : weekdayOfDate - 1;
+
+        // increment the message count of the message's weekday for this recipient
+        weekday[weekdayIndex][message.fromRecipientId] += 1;
+
+        daytime[messageDate.getHours()][message.fromRecipientId] += 1;
+      }
+    }
+
+    return messageStats;
+  });
+};

src/pages/dm/dm-id.tsx

@@ -1,63 +1,24 @@
-import { type Accessor, type Component, createEffect, createResource, Show } from "solid-js";
+import { type Component, createResource, Show } from "solid-js";
 import type { RouteSectionProps } from "@solidjs/router";
 
-import { type ChartData } from "chart.js";
-
-import { LineChart, RadarChart, WordCloudChart } from "~/components/ui/charts";
-
-import {
-  dmOverviewQuery,
-  dmPartnerRecipientQuery,
-  dmSentMessagesPerPersonOverviewQuery,
-  SELF_ID,
-  threadMostUsedWordsQuery,
-  threadSentMessagesOverviewQuery,
-} from "~/db";
+import { dmPartnerRecipientQuery, SELF_ID, threadMostUsedWordsQuery, threadSentMessagesOverviewQuery } from "~/db";
 import { getNameFromRecipient } from "~/lib/get-name-from-recipient";
 import { Heading } from "~/components/ui/heading";
 import { Grid } from "~/components/ui/grid";
-import { Flex } from "~/components/ui/flex";
-import { CalendarArrowUp, CalendarArrowDown, CalendarClock, MessagesSquare } from "lucide-solid";
-import { getDistanceBetweenDatesInDays } from "~/lib/date";
-
-type MonthIndex = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
-
-const monthNames: Record<MonthIndex, string> = {
-  1: "January",
-  2: "February",
-  3: "March",
-  4: "April",
-  5: "May",
-  6: "June",
-  7: "July",
-  8: "August",
-  9: "September",
-  10: "October",
-  11: "November",
-  12: "December",
-};
-
-const initialMonthMap = Object.fromEntries(
-  Array(12)
-    .fill(0)
-    .map((_value, index) => [index + 1, 0]),
-) as Record<MonthIndex, number>;
+import { Title } from "@solidjs/meta";
+import { DmMessagesPerDate } from "./dm-messages-per-date";
+import { DmOverview } from "./dm-overview";
+import { DmWordCloud } from "./dm-wordcloud";
+import { DmMessagesPerMonth } from "./dm-messages-per-month";
+import { DmMessagesPerDaytime } from "./dm-messages-per-daytime";
+import { DmMessagesPerRecipient } from "./dm-messages-per-recipients";
+import { DmMessagesPerWeekday } from "./dm-messages-per-weekday";
+import type { MessageOverview } from "~/types";
+import { createMessageStatsSources } from "~/lib/messages";
 
 export const DmId: Component<RouteSectionProps> = (props) => {
   const dmId = () => Number(props.params.dmid);
 
-  const [dmOverview] = createResource(async () => {
-    const dmOverview = await dmOverviewQuery(dmId());
-
-    if (dmOverview) {
-      return {
-        messageCount: dmOverview.message_count,
-        firstMessageDate: new Date(dmOverview.first_message_date),
-        lastMessageDate: new Date(dmOverview.last_message_date),
-      };
-    }
-  });
-
   // the other person in the chat with name and id
   const [dmPartner] = createResource(async () => {
     const dmPartner = await dmPartnerRecipientQuery(dmId());
@@ -74,66 +35,18 @@ export const DmId: Component<RouteSectionProps> = (props) => {
     }
   });
 
-  const [dmMessagesPerPerson] = createResource(() => dmSentMessagesPerPersonOverviewQuery(dmId()));
-
-  const [dmMessagesOverview] = createResource(async () => {
+  const [dmMessagesOverview] = createResource<MessageOverview>(async () => {
     const dmMessageOverview = await threadSentMessagesOverviewQuery(dmId());
     if (dmMessageOverview) {
       return dmMessageOverview.map((row) => {
         return {
-          messageDate: new Date(row.message_datetime),
-          recipientId: row.from_recipient_id,
+          messageDate: new Date(row.message_datetime + "Z"),
+          fromRecipientId: row.from_recipient_id,
         };
       });
     }
   });
 
-  const dmMessagesPerMonth = () => {
-    const currentDmMessagesOverview = dmMessagesOverview();
-
-    if (currentDmMessagesOverview) {
-      return currentDmMessagesOverview.reduce<Record<MonthIndex, number>>(
-        (prev, curr) => {
-          const month = curr.messageDate.getMonth() as MonthIndex;
-
-          prev[month as MonthIndex] += 1;
-
-          return prev;
-        },
-        { ...initialMonthMap },
-      );
-    }
-  };
-
-  // maps all the message counts to dates
-  const dmMessagesPerDateOverview = () => {
-    return dmMessagesPerPerson()?.reduce<
-      {
-        rawDate: string;
-        date: Date;
-        totalMessages: number;
-        [recipientId: number]: number;
-      }[]
-    >((prev, curr) => {
-      const existingDate = prev.find(({ rawDate }) => rawDate === curr.message_date);
-
-      if (existingDate) {
-        existingDate[curr.from_recipient_id] = curr.message_count;
-
-        existingDate.totalMessages += curr.message_count;
-      } else {
-        prev.push({
-          rawDate: curr.message_date,
-          date: new Date(curr.message_date),
-          totalMessages: curr.message_count,
-          [curr.from_recipient_id]: curr.message_count,
-        });
-      }
-
-      return prev;
-    }, []);
-  };
-
   const [mostUsedWordCounts] = createResource(async () => threadMostUsedWordsQuery(dmId(), 300));
 
   const recipients = () => {
@@ -157,218 +70,40 @@ export const DmId: Component<RouteSectionProps> = (props) => {
     ];
   };
 
-  const maxWordSize = 100;
-
-  const mostUsedWordChartData: Accessor<ChartData<"wordCloud"> | undefined> = () => {
-    const currentMostUsedWordCounts = mostUsedWordCounts();
-
-    if (currentMostUsedWordCounts) {
-      // ordered descending in db query
-      const highestWordCount = currentMostUsedWordCounts[0].count;
-
-      const calcWordSizeInPixels = (count: number) => {
-        return 10 + Math.round((maxWordSize / highestWordCount) * count);
-      };
-
-      return {
-        labels: currentMostUsedWordCounts.map(({ word }) => word),
-        datasets: [
-          {
-            label: "Used",
-            data: currentMostUsedWordCounts.map(({ count }) => calcWordSizeInPixels(count)),
-          },
-        ],
-      };
-    }
-  };
-
-  const dateChartData: Accessor<ChartData<"line"> | undefined> = () => {
-    const currentDmMessages = dmMessagesPerDateOverview();
-    const currentRecipients = recipients();
-
-    if (currentDmMessages) {
-      return {
-        labels: currentDmMessages.map((row) => row.date.toDateString()),
-        datasets: [
-          {
-            label: "Total number of messages",
-            data: currentDmMessages.map((row) => row.totalMessages),
-            borderWidth: 2,
-          },
-          ...currentDmMessages.reduce<{ id: number; label: string; data: number[] }[]>(
-            (prev, curr) => {
-              for (const recipient of currentRecipients) {
-                prev.find(({ id }) => id === recipient.recipientId)?.data.push(curr[recipient.recipientId] ?? 0);
-              }
-
-              return prev;
-            },
-            currentRecipients.map((recipient) => {
-              return {
-                id: recipient.recipientId,
-                label: `Number of messages from ${recipient.name.toString()}`,
-                data: [],
-                borderWidth: 2,
-              };
-            }),
-          ),
-        ],
-      };
-    }
-  };
-
-  const monthChartData: Accessor<ChartData<"radar"> | undefined> = () => {
-    const currentMessagesPerMonth = dmMessagesPerMonth();
-
-    if (currentMessagesPerMonth) {
-      return {
-        labels: Object.values(monthNames),
-        datasets: [
-          {
-            label: "Number of messages",
-            data: Object.values(currentMessagesPerMonth),
-          },
-        ],
-      };
-    }
-  };
+  const dmMessageStats = createMessageStatsSources(dmMessagesOverview, recipients);
 
   return (
-    <div class="flex flex-col items-center">
-      <Heading level={1}>DM with {dmPartner()?.name}</Heading>
-      <Heading level={2}>Chat timeline</Heading>
-      <Show when={dateChartData()}>
-        {(currentDateChartData) => (
-          <LineChart
-            options={{
-              normalized: true,
-              aspectRatio: 3,
-              plugins: {
-                zoom: {
-                  pan: {
-                    enabled: true,
-                    mode: "xy",
-                  },
-                  zoom: {
-                    wheel: {
-                      enabled: true,
-                    },
-                    pinch: {
-                      enabled: true,
-                    },
-                    mode: "xy",
-                  },
-                },
-              },
-            }}
-            data={currentDateChartData()}
-            class="max-h-96"
-          />
-        )}
-      </Show>
-      <Grid cols={1} colsMd={2} class="my-12 min-w-[35rem] gap-y-8 text-sm">
-        <Flex flexDirection="row" justifyContent="evenly" class="bg-amber-200 p-2 text-amber-900">
-          <Flex alignItems="center" justifyContent="center" class="min-w-16">
-            <CalendarArrowDown class="h-8 w-8" />
-          </Flex>
-          <Flex flexDirection="col" justifyContent="around" class="flex-1">
-            <span>Your first message is from</span>
-            <Show when={!dmOverview.loading && dmOverview()}>
-              {(currentDmOverview) => (
-                <span class="font-semibold text-2xl">{currentDmOverview().firstMessageDate.toDateString()}</span>
-              )}
-            </Show>
-          </Flex>
-        </Flex>
-        <Flex flexDirection="row" justifyContent="evenly" class="bg-emerald-200 p-2 text-emerald-900">
-          <Flex alignItems="center" justifyContent="center" class="min-w-16">
-            <CalendarArrowUp class="h-8 w-8" />
-          </Flex>
-          <Flex flexDirection="col" justifyContent="around" class="flex-1">
-            <span>Your last message is from</span>
-            <Show when={!dmOverview.loading && dmOverview()}>
-              {(currentDmOverview) => (
-                <span class="font-semibold text-2xl">{currentDmOverview().lastMessageDate.toDateString()}</span>
-              )}
-            </Show>
-          </Flex>
-        </Flex>
-        <Flex flexDirection="row" justifyContent="evenly" class="bg-blue-200 p-2 text-blue-900">
-          <Flex alignItems="center" justifyContent="center" class="min-w-16">
-            <CalendarClock class="h-8 w-8" />
-          </Flex>
-          <Flex flexDirection="col" justifyContent="around" class="flex-1">
-            <span>You have been chatting for</span>
-            <Show when={!dmOverview.loading && dmOverview()}>
-              {(currentDmOverview) => (
-                <span class="font-semibold text-2xl">
-                  {getDistanceBetweenDatesInDays(
-                    currentDmOverview().firstMessageDate,
-                    currentDmOverview().lastMessageDate,
-                  )}
-                </span>
-              )}
-            </Show>
-            <span>days</span>
-          </Flex>
-        </Flex>
-        <Flex flexDirection="row" justifyContent="evenly" class="bg-pink-200 p-2 text-pink-900">
-          <Flex alignItems="center" justifyContent="center" class="min-w-16">
-            <MessagesSquare class="h-8 w-8" />
-          </Flex>
-          <Flex flexDirection="col" justifyContent="around" class="flex-1">
-            <span>You have written</span>
-            <Show when={!dmOverview.loading && dmOverview()}>
-              {(currentDmOverview) => (
-                <span class="font-semibold text-2xl">{currentDmOverview().messageCount.toString()}</span>
-              )}
-            </Show>
-            <span>messages</span>
-          </Flex>
-        </Flex>
-      </Grid>
-      <Heading level={2}>Messages per</Heading>
-      <div>
-        <Heading level={3}>Month</Heading>
-        <Grid cols={1} colsMd={2}>
-          <Show when={monthChartData()}>
-            {(currentMonthChartData) => (
-              <RadarChart
-                title="Month"
-                options={{
-                  normalized: true,
-                }}
-                data={currentMonthChartData()}
-                class="max-h-96"
-              />
-            )}
-          </Show>
-        </Grid>
-      </div>
-      <Heading level={2}>Word cloud</Heading>
-      <Show when={mostUsedWordChartData()}>
-        {(currentMostUsedWordChartData) => (
-          // without a container this will scale in height infinitely somehow
-          <div class="max-w-2xl">
-            <WordCloudChart
-              options={{
-                normalized: true,
-                aspectRatio: 3,
-                plugins: {
-                  tooltip: {
-                    enabled: false,
-                  },
-                  legend: {
-                    display: false,
-                  },
-                },
-              }}
-              data={currentMostUsedWordChartData()}
-            />
+    <>
+      <Title>Dm with {dmPartner()?.name}</Title>
+      <div class="flex flex-col items-center">
+        <Heading level={1}>DM with {dmPartner()?.name}</Heading>
+        <Heading level={2}>Chat timeline</Heading>
+        <DmMessagesPerDate dateStats={dmMessageStats().date} recipients={recipients()} />
+        <DmOverview messages={dmMessagesOverview()} />
+        <Heading level={2}>Messages per</Heading>
+
+        <Grid cols={1} colsMd={2} class="gap-x-16 gap-y-16">
+          <div>
+            <Heading level={3}>Person</Heading>
+            <DmMessagesPerRecipient personStats={dmMessageStats().person} recipients={recipients()} />
           </div>
-        )}
-      </Show>
-    </div>
+          <div>
+            <Heading level={3}>Daytime</Heading>
+            <DmMessagesPerDaytime daytimeStats={dmMessageStats().daytime} recipients={recipients()} />
+          </div>
+          <div>
+            <Heading level={3}>Month</Heading>
+            <DmMessagesPerMonth monthStats={dmMessageStats().month} recipients={recipients()} />
+          </div>
+          <div>
+            <Heading level={3}>Weekday</Heading>
+            <DmMessagesPerWeekday weekdayStats={dmMessageStats().weekday} recipients={recipients()} />
+          </div>
+        </Grid>
+        <Heading level={2}>Word cloud</Heading>
+        <DmWordCloud wordCounts={mostUsedWordCounts()} />
+      </div>
+    </>
   );
 };
 

src/pages/dm/dm-messages-per-date.tsx

@@ -0,0 +1,68 @@
+import { createEffect, Show, type Accessor, type Component } from "solid-js";
+import type { ChartData } from "chart.js";
+import { LineChart } from "~/components/ui/charts";
+import type { MessageStats, Recipients } from "~/types";
+
+export const DmMessagesPerDate: Component<{
+  dateStats: MessageStats["date"];
+  recipients: Recipients;
+}> = (props) => {
+  const dateChartData: Accessor<ChartData<"line"> | undefined> = () => {
+    const currentDmMessages = props.dateStats;
+    const currentRecipients = props.recipients;
+
+    if (currentDmMessages) {
+      const currentDmMessagesValues = Object.values(currentDmMessages);
+
+      return {
+        labels: currentDmMessages.map(({ date }) => date.toDateString()),
+        datasets: [
+          {
+            label: "Total",
+            data: currentDmMessagesValues.map((row) => row.totalMessages),
+            borderWidth: 2,
+          },
+          ...currentRecipients.map((recipient) => {
+            return {
+              id: recipient.recipientId,
+              label: recipient.name.toString(),
+              data: currentDmMessagesValues.map((date) => date[recipient.recipientId]),
+              borderWidth: 2,
+            };
+          }),
+        ],
+      };
+    }
+  };
+
+  return (
+    <Show when={dateChartData()}>
+      {(currentDateChartData) => (
+        <LineChart
+          options={{
+            normalized: true,
+            aspectRatio: 3,
+            plugins: {
+              zoom: {
+                pan: {
+                  enabled: true,
+                  mode: "xy",
+                },
+                zoom: {
+                  wheel: {
+                    enabled: true,
+                  },
+                  pinch: {
+                    enabled: true,
+                  },
+                  mode: "xy",
+                },
+              },
+            },
+          }}
+          data={currentDateChartData()}
+        />
+      )}
+    </Show>
+  );
+};

src/pages/dm/dm-messages-per-daytime.tsx

@@ -0,0 +1,53 @@
+import { Show, type Accessor, type Component } from "solid-js";
+import type { ChartData } from "chart.js";
+import { BarChart } from "~/components/ui/charts";
+import type { MessageStats, Recipients } from "~/types";
+import { hourNames } from "~/lib/messages";
+
+export const DmMessagesPerDaytime: Component<{
+  daytimeStats: MessageStats["daytime"];
+  recipients: Recipients;
+}> = (props) => {
+  const daytimeChartData: Accessor<ChartData<"bar"> | undefined> = () => {
+    const currentMessagesPerHour = props.daytimeStats;
+    const currentRecipients = props.recipients;
+
+    if (currentMessagesPerHour && currentRecipients) {
+      return {
+        labels: Object.values(hourNames),
+        datasets: [
+          ...currentRecipients.map((recipient) => {
+            return {
+              id: recipient.recipientId,
+              label: `Number of messages from ${recipient.name.toString()}`,
+              data: currentMessagesPerHour.map((hour) => hour[recipient.recipientId]),
+              borderWidth: 1,
+            };
+          }),
+        ],
+      };
+    }
+  };
+
+  return (
+    <Show when={daytimeChartData()}>
+      {(currentDaytimeChartData) => (
+        <BarChart
+          options={{
+            normalized: true,
+            plugins: {
+              legend: {
+                display: false,
+              },
+              deferred: {
+                yOffset: "50%",
+              },
+            },
+            aspectRatio: 2,
+          }}
+          data={currentDaytimeChartData()}
+        />
+      )}
+    </Show>
+  );
+};

src/pages/dm/dm-messages-per-month.tsx

@@ -0,0 +1,53 @@
+import { Show, type Accessor, type Component } from "solid-js";
+import type { ChartData } from "chart.js";
+import { RadarChart } from "~/components/ui/charts";
+import { monthNames } from "~/lib/messages";
+import type { MessageStats, Recipients } from "~/types";
+
+export const DmMessagesPerMonth: Component<{
+  monthStats: MessageStats["month"];
+  recipients: Recipients;
+}> = (props) => {
+  const monthChartData: Accessor<ChartData<"radar"> | undefined> = () => {
+    const currentMessagesPerMonth = props.monthStats;
+    const currentRecipients = props.recipients;
+
+    if (currentMessagesPerMonth && currentRecipients) {
+      return {
+        labels: Object.values(monthNames),
+        datasets: [
+          ...currentRecipients.map((recipient) => {
+            return {
+              id: recipient.recipientId,
+              label: `Number of messages from ${recipient.name.toString()}`,
+              data: currentMessagesPerMonth.map((month) => month[recipient.recipientId]),
+            };
+          }),
+        ],
+      };
+    }
+  };
+
+  return (
+    <Show when={monthChartData()}>
+      {(currentMonthChartData) => (
+        <RadarChart
+          title="Month"
+          options={{
+            normalized: true,
+            plugins: {
+              legend: {
+                display: false,
+              },
+              deferred: {
+                yOffset: "50%",
+              },
+            },
+          }}
+          data={currentMonthChartData()}
+          class="max-h-96"
+        />
+      )}
+    </Show>
+  );
+};

src/pages/dm/dm-messages-per-recipients.tsx

@@ -0,0 +1,47 @@
+import { Show, type Accessor, type Component } from "solid-js";
+import type { ChartData } from "chart.js";
+import { PieChart } from "~/components/ui/charts";
+import type { MessageStats, Recipients } from "~/types";
+
+export const DmMessagesPerRecipient: Component<{
+  personStats: MessageStats["person"];
+  recipients: Recipients;
+}> = (props) => {
+  const recipientChartData: Accessor<ChartData<"pie"> | undefined> = () => {
+    const currentMessagesPerRecipient = props.personStats;
+    const currentRecipients = props.recipients;
+
+    if (currentMessagesPerRecipient && currentRecipients) {
+      return {
+        labels: Object.keys(currentMessagesPerRecipient).map(
+          (id) => currentRecipients.find(({ recipientId }) => recipientId === Number(id))?.name,
+        ),
+        datasets: [
+          {
+            label: "Number of messages",
+            data: Object.values(currentMessagesPerRecipient),
+          },
+        ],
+      };
+    }
+  };
+
+  return (
+    <Show when={recipientChartData()}>
+      {(currentRecipientChartData) => (
+        <PieChart
+          options={{
+            normalized: true,
+            plugins: {
+              deferred: {
+                yOffset: "50%",
+              },
+            },
+          }}
+          data={currentRecipientChartData()}
+          class="max-h-96"
+        />
+      )}
+    </Show>
+  );
+};

src/pages/dm/dm-messages-per-weekday.tsx

@@ -0,0 +1,51 @@
+import { Show, type Accessor, type Component } from "solid-js";
+import type { ChartData } from "chart.js";
+import { RadarChart } from "~/components/ui/charts";
+import { weekdayNames } from "~/lib/messages";
+import type { MessageStats, Recipients } from "~/types";
+
+export const DmMessagesPerWeekday: Component<{
+  weekdayStats: MessageStats["weekday"];
+  recipients: Recipients;
+}> = (props) => {
+  const weekdayChartData: Accessor<ChartData<"radar"> | undefined> = () => {
+    const currentMessagesPerWeekday = props.weekdayStats;
+    const currentRecipients = props.recipients;
+
+    if (currentMessagesPerWeekday && currentRecipients) {
+      return {
+        labels: Object.values(weekdayNames),
+        datasets: [
+          ...currentRecipients.map((recipient) => {
+            return {
+              id: recipient.recipientId,
+              label: `Number of messages from ${recipient.name.toString()}`,
+              data: currentMessagesPerWeekday.map((weekday) => weekday[recipient.recipientId]),
+            };
+          }),
+        ],
+      };
+    }
+  };
+
+  return (
+    <Show when={weekdayChartData()}>
+      {(currentWeekdayChartData) => (
+        <RadarChart
+          options={{
+            normalized: true,
+            plugins: {
+              legend: {
+                display: false,
+              },
+              deferred: {
+                yOffset: "50%",
+              },
+            },
+          }}
+          data={currentWeekdayChartData()}
+        />
+      )}
+    </Show>
+  );
+};

src/pages/dm/dm-overview.tsx

@@ -0,0 +1,88 @@
+import { Show, type Component } from "solid-js";
+import { Flex } from "~/components/ui/flex";
+import { Grid } from "~/components/ui/grid";
+import { CalendarArrowDown, CalendarArrowUp, CalendarClock, MessagesSquare } from "lucide-solid";
+import { getDistanceBetweenDatesInDays } from "~/lib/date";
+import type { MessageOverview } from "~/types";
+
+export const DmOverview: Component<{
+  messages: MessageOverview;
+}> = (props) => {
+  const dmOverview = () => {
+    const firstMessageDate = props.messages?.at(0)?.messageDate;
+    const lastMessageDate = props.messages?.at(-1)?.messageDate;
+    const messageCount = props.messages?.length;
+
+    if (firstMessageDate && lastMessageDate && messageCount) {
+      return {
+        firstMessageDate,
+        lastMessageDate,
+        messageCount,
+      };
+    }
+  };
+
+  return (
+    <Grid cols={1} colsMd={2} class="my-12 min-w-[35rem] gap-y-8 text-sm">
+      <Flex flexDirection="row" justifyContent="evenly" class="bg-amber-200 p-2 text-amber-900">
+        <Flex alignItems="center" justifyContent="center" class="min-w-16">
+          <CalendarArrowDown class="h-8 w-8" />
+        </Flex>
+        <Flex flexDirection="col" justifyContent="around" class="flex-1">
+          <span>Your first message is from</span>
+          <Show when={dmOverview()}>
+            {(currentDmOverview) => (
+              <span class="font-semibold text-2xl">{currentDmOverview().firstMessageDate.toDateString()}</span>
+            )}
+          </Show>
+        </Flex>
+      </Flex>
+      <Flex flexDirection="row" justifyContent="evenly" class="bg-emerald-200 p-2 text-emerald-900">
+        <Flex alignItems="center" justifyContent="center" class="min-w-16">
+          <CalendarArrowUp class="h-8 w-8" />
+        </Flex>
+        <Flex flexDirection="col" justifyContent="around" class="flex-1">
+          <span>Your last message is from</span>
+          <Show when={dmOverview()}>
+            {(currentDmOverview) => (
+              <span class="font-semibold text-2xl">{currentDmOverview().lastMessageDate.toDateString()}</span>
+            )}
+          </Show>
+        </Flex>
+      </Flex>
+      <Flex flexDirection="row" justifyContent="evenly" class="bg-blue-200 p-2 text-blue-900">
+        <Flex alignItems="center" justifyContent="center" class="min-w-16">
+          <CalendarClock class="h-8 w-8" />
+        </Flex>
+        <Flex flexDirection="col" justifyContent="around" class="flex-1">
+          <span>You have been chatting for</span>
+          <Show when={dmOverview()}>
+            {(currentDmOverview) => (
+              <span class="font-semibold text-2xl">
+                {getDistanceBetweenDatesInDays(
+                  currentDmOverview().firstMessageDate,
+                  currentDmOverview().lastMessageDate,
+                )}
+              </span>
+            )}
+          </Show>
+          <span>days</span>
+        </Flex>
+      </Flex>
+      <Flex flexDirection="row" justifyContent="evenly" class="bg-pink-200 p-2 text-pink-900">
+        <Flex alignItems="center" justifyContent="center" class="min-w-16">
+          <MessagesSquare class="h-8 w-8" />
+        </Flex>
+        <Flex flexDirection="col" justifyContent="around" class="flex-1">
+          <span>You have written</span>
+          <Show when={dmOverview()}>
+            {(currentDmOverview) => (
+              <span class="font-semibold text-2xl">{currentDmOverview().messageCount.toString()}</span>
+            )}
+          </Show>
+          <span>messages</span>
+        </Flex>
+      </Flex>
+    </Grid>
+  );
+};

src/pages/dm/dm-wordcloud.tsx

@@ -0,0 +1,58 @@
+import type { ChartData } from "chart.js";
+import { Show, type Accessor, type Component } from "solid-js";
+import { WordCloudChart } from "~/components/ui/charts";
+import type { threadMostUsedWordsQuery } from "~/db";
+
+const maxWordSize = 100;
+
+export const DmWordCloud: Component<{
+  wordCounts: Awaited<ReturnType<typeof threadMostUsedWordsQuery>> | undefined;
+}> = (props) => {
+  const mostUsedWordChartData: Accessor<ChartData<"wordCloud"> | undefined> = () => {
+    const currentMostUsedWordCounts = props.wordCounts;
+
+    if (currentMostUsedWordCounts) {
+      // ordered descending in db query
+      const highestWordCount = currentMostUsedWordCounts[0].count;
+
+      const calcWordSizeInPixels = (count: number) => {
+        return 10 + Math.round((maxWordSize / highestWordCount) * count);
+      };
+
+      return {
+        labels: currentMostUsedWordCounts.map(({ word }) => word),
+        datasets: [
+          {
+            label: "Used",
+            data: currentMostUsedWordCounts.map(({ count }) => calcWordSizeInPixels(count)),
+          },
+        ],
+      };
+    }
+  };
+
+  return (
+    <Show when={mostUsedWordChartData()}>
+      {(currentMostUsedWordChartData) => (
+        // without a container this will scale in height infinitely somehow
+        <div class="max-w-2xl">
+          <WordCloudChart
+            options={{
+              normalized: true,
+              aspectRatio: 3,
+              plugins: {
+                tooltip: {
+                  enabled: false,
+                },
+                legend: {
+                  display: false,
+                },
+              },
+            }}
+            data={currentMostUsedWordChartData()}
+          />
+        </div>
+      )}
+    </Show>
+  );
+};

src/pages/overview/index.tsx

@@ -5,6 +5,7 @@ import { allThreadsOverviewQuery, overallSentMessagesQuery, SELF_ID } from "~/db
 
 import { OverviewTable, type RoomOverview } from "./overview-table";
 import { getNameFromRecipient } from "~/lib/get-name-from-recipient";
+import { Title } from "@solidjs/meta";
 
 export const Overview: Component<RouteSectionProps> = () => {
   const [allSelfSentMessagesCount] = createResource(() => overallSentMessagesQuery(SELF_ID));
@@ -34,12 +35,16 @@ export const Overview: Component<RouteSectionProps> = () => {
   });
 
   return (
-    <div>
-      <p>All messages: {allSelfSentMessagesCount()?.messageCount as number}</p>
-      <Show when={!roomOverview.loading && roomOverview()} fallback="Loading...">
-        {(currentRoomOverview) => <OverviewTable data={currentRoomOverview()} />}
-      </Show>
-    </div>
+    <>
+      <Title>Signal statistics overview</Title>
+
+      <div>
+        <p>All messages: {allSelfSentMessagesCount()?.messageCount as number}</p>
+        <Show when={!roomOverview.loading && roomOverview()} fallback="Loading...">
+          {(currentRoomOverview) => <OverviewTable data={currentRoomOverview()} />}
+        </Show>
+      </div>
+    </>
   );
 };
 

src/pages/overview/overview-table.tsx

@@ -47,6 +47,14 @@ const archivedFilterFn: FilterFn<RoomOverview> = (row, _columnId, filterValue) =
   return !row.original.archived;
 };
 
+const isGroupFilterFn: FilterFn<RoomOverview> = (row, _columnId, filterValue) => {
+  if (filterValue === true) {
+    return true;
+  }
+
+  return !row.original.isGroup;
+};
+
 const SortingDisplay: Component<{ sorting: false | SortDirection; class?: string; activeClass?: string }> = (props) => {
   return (
     <Switch>
@@ -166,7 +174,7 @@ export const columns = [
     filterFn: archivedFilterFn,
   }),
   columnHelper.accessor("isGroup", {
-    header: "Group",
+    header: "isGroup",
     cell: (props) => {
       return (
         <Show when={props.cell.getValue()}>
@@ -174,6 +182,7 @@ export const columns = [
         </Show>
       );
     },
+    filterFn: isGroupFilterFn,
   }),
 ];
 
@@ -193,6 +202,10 @@ export const OverviewTable = (props: OverviewTableProps) => {
       id: "archived",
       value: false,
     },
+    {
+      id: "isGroup",
+      value: false,
+    },
   ]);
 
   const table = createSolidTable({
@@ -250,6 +263,16 @@ export const OverviewTable = (props: OverviewTableProps) => {
             <Label for="show-archived">Show archived chats</Label>
           </div>
         </div>
+        <div class="flex items-start space-x-2">
+          <Checkbox
+            id="show-archived"
+            checked={(table.getColumn("isGroup")?.getFilterValue() as boolean | undefined) ?? false}
+            onChange={(value) => table.getColumn("isGroup")?.setFilterValue(value)}
+          />
+          <div class="grid gap-1.5 leading-none">
+            <Label for="show-archived">Show group chats (detailed analysis not implemented)</Label>
+          </div>
+        </div>
       </div>
       <Table class="border-separate border-spacing-0">
         <TableHeader>

src/types.ts

@@ -0,0 +1,36 @@
+export type MessageOverview =
+  | {
+      messageDate: Date;
+      fromRecipientId: number;
+    }[]
+  | undefined;
+
+export type Recipients = {
+  recipientId: number;
+  name: string;
+}[];
+
+export type MessageStats = {
+  // indexed by recipientId
+  person: {
+    [recipientId: number]: number;
+  };
+  // month from 0 to 11 = from January to December, each month indexed by recipientId
+  month: {
+    [recipientId: number]: number;
+  }[];
+  // every date of the chat history, indexed by the date string
+  date: {
+    [recipientId: number]: number;
+    date: Date;
+    totalMessages: number;
+  }[];
+  // weekdays from 0 to 6 = from Monday to Sunday (not from Sunday to Saturday as in the `Date` object), each weekday indexed by recipientId
+  weekday: {
+    [recipientId: number]: number;
+  }[];
+  // hours of the day from 0 - 23, each hour indexed by recipientId
+  daytime: {
+    [recipientId: number]: number;
+  }[];
+};