51 lines
1.5 KiB
TypeScript
51 lines
1.5 KiB
TypeScript
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"] | undefined;
|
|
recipients: Recipients | undefined;
|
|
}> = (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>
|
|
);
|
|
};
|