57 lines
1.8 KiB
TypeScript
57 lines
1.8 KiB
TypeScript
import { useQuery } from "@apollo/client/react";
|
|
import { ResponsiveBar } from "@nivo/bar";
|
|
|
|
import styles from "./Stats.module.css";
|
|
import { StatsView } from "./StatsView";
|
|
import { chartTheme } from "./chartTheme";
|
|
import { GQLError } from "../../components/GQLError";
|
|
import { UserStatsDocument } from "../../types";
|
|
|
|
const UserStats = () => {
|
|
const { data, loading, error } = useQuery(UserStatsDocument);
|
|
|
|
if (error) return <GQLError error={error} />;
|
|
|
|
const users = (data?.allUsers || [])
|
|
.filter((user) => Number(user.profile?.orderSumTotal || 0) > 0)
|
|
.map((user) => ({
|
|
name: `${user.firstName}${user.lastName ? ` ${user.lastName[0]}.` : ""}`,
|
|
total: Number(user.profile?.orderSumTotal || 0),
|
|
}))
|
|
.sort((a, b) => b.total - a.total)
|
|
.slice(0, 10)
|
|
// nivo draws the first item of a horizontal chart at the bottom
|
|
.reverse();
|
|
|
|
return (
|
|
<StatsView loading={loading}>
|
|
<h3>Topp 10 etter total kjøpesum</h3>
|
|
{users.length ? (
|
|
<div className={styles.chart} style={{ height: Math.max(320, users.length * 44) }}>
|
|
<ResponsiveBar
|
|
data={users}
|
|
keys={["total"]}
|
|
indexBy="name"
|
|
layout="horizontal"
|
|
theme={chartTheme}
|
|
margin={{ top: 10, right: 35, bottom: 40, left: 100 }}
|
|
padding={0.3}
|
|
enableLabel={false}
|
|
axisBottom={{
|
|
legend: "Kjøp totalt (kr)",
|
|
legendPosition: "middle",
|
|
legendOffset: 32,
|
|
}}
|
|
axisLeft={{ tickSize: 0, tickPadding: 8 }}
|
|
valueFormat={(value) => `${Number(value).toLocaleString("no")} kr`}
|
|
/>
|
|
</div>
|
|
) : (
|
|
<p>Ingen kjøp å vise ennå.</p>
|
|
)}
|
|
</StatsView>
|
|
);
|
|
};
|
|
|
|
export default UserStats;
|