feat(dm): more stats
This commit is contained in:
Samuel
parent
d9268a4991
commit
dbd0b12b3d
19 changed files with 798 additions and 1106 deletions
|
|
@ -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>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue