80 lines
2.1 KiB
TypeScript
80 lines
2.1 KiB
TypeScript
import { useQuery } from "@apollo/client";
|
|
import { Bar, BarDatum } from "@nivo/bar";
|
|
import React from "react";
|
|
|
|
import { OrderStatsDocument, OrderStatsByTime } from "../../types";
|
|
import { StatsView } from "./StatsView";
|
|
|
|
const days = { 1: "Mandag", 2: "Tirsdag", 3: "Onsdag", 4: "Torsdag", 5: "Fredag", 6: "Lørdag", 7: "Søndag" };
|
|
|
|
const months = {
|
|
1: "Januar",
|
|
2: "Februar",
|
|
3: "Mars",
|
|
4: "April",
|
|
5: "Mai",
|
|
6: "Juni",
|
|
7: "Juli",
|
|
8: "August",
|
|
9: "September",
|
|
10: "Oktober",
|
|
11: "November",
|
|
12: "Desember",
|
|
};
|
|
|
|
const OrderBar = ({ data }: { data: BarDatum[] }) => (
|
|
<Bar
|
|
data={data}
|
|
margin={{ left: 60, bottom: 40 }}
|
|
width={1200}
|
|
height={400}
|
|
colorBy="indexValue"
|
|
enableLabel={false}
|
|
tooltipLabel={(d) => d.id.toString()}
|
|
axisLeft={{ legend: "Ordre", legendPosition: "middle", legendOffset: -50 }}
|
|
/>
|
|
);
|
|
|
|
export const OrderStats = () => {
|
|
const { data, loading } = useQuery(OrderStatsDocument);
|
|
|
|
return (
|
|
<StatsView loading={loading}>
|
|
<h3>Ordre per time</h3>
|
|
<OrderBar
|
|
data={(data?.orderStats?.hourly || []).map((stat: OrderStatsByTime) => ({
|
|
id: `${stat.period.toString().padStart(2, "0")}:00`,
|
|
label: stat.period,
|
|
value: stat.count,
|
|
}))}
|
|
/>
|
|
<h3>Ordre per ukedag</h3>
|
|
<OrderBar
|
|
data={(data?.orderStats?.daily || []).map((stat: OrderStatsByTime) => ({
|
|
/* @ts-expect-error Here, stat.period can only be a key in days range. */
|
|
id: days[stat.period],
|
|
label: stat.period,
|
|
value: stat.count,
|
|
}))}
|
|
/>
|
|
<h3>Ordre per måned</h3>
|
|
<OrderBar
|
|
data={(data?.orderStats?.monthly || []).map((stat: OrderStatsByTime) => ({
|
|
/* @ts-expect-error Here, stat.period can only be a key in months range. */
|
|
id: months[stat.period],
|
|
label: stat.period,
|
|
value: stat.count,
|
|
}))}
|
|
/>
|
|
<h3>Ordre per år</h3>
|
|
<OrderBar
|
|
data={(data?.orderStats?.yearly || []).map((stat: OrderStatsByTime) => ({
|
|
id: stat.period,
|
|
label: stat.period,
|
|
value: stat.count,
|
|
}))}
|
|
/>
|
|
</StatsView>
|
|
);
|
|
};
|