375 lines
12 KiB
TypeScript
375 lines
12 KiB
TypeScript
import { type Accessor, type Component, createEffect, 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 { 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>;
|
|
|
|
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());
|
|
|
|
if (dmPartner) {
|
|
return {
|
|
id: dmPartner._id,
|
|
name: getNameFromRecipient(
|
|
dmPartner.nickname_joined_name,
|
|
dmPartner.system_joined_name,
|
|
dmPartner.profile_joined_name,
|
|
),
|
|
};
|
|
}
|
|
});
|
|
|
|
const [dmMessagesPerPerson] = createResource(() => dmSentMessagesPerPersonOverviewQuery(dmId()));
|
|
|
|
const [dmMessagesOverview] = createResource(async () => {
|
|
const dmMessageOverview = await threadSentMessagesOverviewQuery(dmId());
|
|
if (dmMessageOverview) {
|
|
return dmMessageOverview.map((row) => {
|
|
return {
|
|
messageDate: new Date(row.message_datetime),
|
|
recipientId: 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 = () => {
|
|
const currentDmPartner = dmPartner();
|
|
|
|
if (currentDmPartner) {
|
|
return [
|
|
{ recipientId: currentDmPartner.id, name: currentDmPartner.name },
|
|
{
|
|
recipientId: SELF_ID,
|
|
name: "You",
|
|
},
|
|
];
|
|
}
|
|
|
|
return [
|
|
{
|
|
recipientId: SELF_ID,
|
|
name: "You",
|
|
},
|
|
];
|
|
};
|
|
|
|
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),
|
|
},
|
|
],
|
|
};
|
|
}
|
|
};
|
|
|
|
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()}
|
|
/>
|
|
</div>
|
|
)}
|
|
</Show>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default DmId;
|