edb/bbs
8
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ Add order stats

Browse Source
This commit is contained in:
Nikolai R Kristiansen committed 2022-02-06 21:05:40 +01:00
1 parent 6fa6bf1334
commit 771e0c2a3b
10 files changed
+336 -27
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

frontend/src/features/stats/Stats.tsx
+101 -23
View File
@@ -1,8 +1,9 @@
import { useQuery } from "@apollo/client";
import { Bar } from "@nivo/bar";
import { Pie } from "@nivo/pie";
import React from "react";
import { ProductStatsDocument } from "../../types";
import { OrderStatsDocument, ProductStatsDocument, OrderStatsByTime } from "../../types";
import styles from "./Stats.module.css";
type UserCount = {
@@ -10,38 +11,115 @@ type UserCount = {
count: number;
};
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",
};
export const Stats = () => {
const { data, loading } = useQuery(ProductStatsDocument);
const { data: productData, loading: productLoading } = useQuery(ProductStatsDocument);
const { data: orderData, loading: orderLoading } = useQuery(OrderStatsDocument);
const loading = orderLoading || productLoading;
if (loading) {
return <div>Loading...</div>;
}
return (
<div className={styles.stats}>
<h2>Stats</h2>
<h3>Produkter</h3>
<div className={styles.products}>
{(data?.allProducts || []).map((product) => {
return (
<div key={product.id}>
{product.name}
<Pie
margin={{ top: 40, right: 120, bottom: 40, left: 120 }}
data={product.userCounts.map((uc: UserCount) => ({
id: uc.name,
label: uc.name,
value: uc.count,
}))}
width={400}
height={300}
/>
</div>
);
})}
{(productData?.allProducts || []).map((product) => (
<div key={product.id}>
{product.name}
<Pie
margin={{ top: 40, right: 120, bottom: 40, left: 120 }}
data={product.userCounts.map((uc: UserCount) => ({
id: uc.name,
label: uc.name,
value: uc.count,
}))}
width={400}
height={300}
/>
</div>
))}
</div>
<h3>Hourly</h3>
<h3>Daily</h3>
<h3>Monthly</h3>
<h3>Yearly</h3>
<h3>Ordre per time</h3>
<Bar
data={(orderData?.orderStats?.hourly || []).map((stat: OrderStatsByTime) => ({
id: `${stat.period.toString().padStart(2, "0")}:00`,
label: stat.period,
value: stat.count,
}))}
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 }}
/>
<h3>Ordre per ukedag</h3>
<Bar
data={(orderData?.orderStats?.dayly || []).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,
}))}
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 }}
/>
<h3>Ordre per måned</h3>
<Bar
data={(orderData?.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,
}))}
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 }}
/>
<h3>Ordre per år</h3>
<Bar
data={(orderData?.orderStats?.yearly || []).map((stat: OrderStatsByTime) => ({
id: stat.period,
label: stat.period,
value: stat.count,
}))}
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 }}
/>
</div>
);
};