73 lines
2.1 KiB
TypeScript
73 lines
2.1 KiB
TypeScript
import { 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"] | undefined;
|
|
recipients: Recipients | undefined;
|
|
}> = (props) => {
|
|
const dateChartData: Accessor<ChartData<"line"> | undefined> = () => {
|
|
const currentDmMessages = props.dateStats;
|
|
const currentRecipients = props.recipients;
|
|
|
|
if (currentDmMessages && currentRecipients) {
|
|
const currentDmMessagesValues = Object.values(currentDmMessages);
|
|
|
|
return {
|
|
labels: currentDmMessages.map(({ date }) => date.toDateString()),
|
|
datasets: [
|
|
{
|
|
label: "Total",
|
|
data: currentDmMessagesValues.map((row) => row.totalMessages),
|
|
borderWidth: 2,
|
|
pointRadius: 0,
|
|
pointHitRadius: 6,
|
|
},
|
|
...currentRecipients.map((recipient) => {
|
|
return {
|
|
id: recipient.recipientId,
|
|
label: recipient.name.toString(),
|
|
data: currentDmMessagesValues.map((date) => date[recipient.recipientId]),
|
|
borderWidth: 2,
|
|
pointRadius: 0,
|
|
pointHitRadius: 6,
|
|
};
|
|
}),
|
|
],
|
|
};
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Show when={dateChartData()}>
|
|
{(currentDateChartData) => (
|
|
<LineChart
|
|
options={{
|
|
normalized: true,
|
|
responsive: true,
|
|
plugins: {
|
|
zoom: {
|
|
pan: {
|
|
enabled: true,
|
|
mode: "xy",
|
|
},
|
|
zoom: {
|
|
wheel: {
|
|
enabled: true,
|
|
},
|
|
pinch: {
|
|
enabled: true,
|
|
},
|
|
mode: "xy",
|
|
},
|
|
},
|
|
},
|
|
}}
|
|
data={currentDateChartData()}
|
|
class="max-h-96"
|
|
/>
|
|
)}
|
|
</Show>
|
|
);
|
|
};
|