47 lines
1.3 KiB
TypeScript
47 lines
1.3 KiB
TypeScript
import type { ChartData } from "chart.js";
|
|
import { type Accessor, type Component, Show } from "solid-js";
|
|
import { PieChart } from "~/components/ui/charts";
|
|
import type { MessageStats, Recipients } from "~/types";
|
|
|
|
export const DmMessagesPerRecipient: Component<{
|
|
personStats: MessageStats["person"] | undefined;
|
|
recipients: Recipients | undefined;
|
|
}> = (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>
|
|
);
|
|
};
|