feat(dm): more stats

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>