72 lines
1.9 KiB
TypeScript
72 lines
1.9 KiB
TypeScript
import { useQuery } from "@apollo/client";
|
|
import { Line } from "@nivo/line";
|
|
import React from "react";
|
|
|
|
import { ProductStatsDocument } from "../../types";
|
|
import { StatsView } from "./StatsView";
|
|
|
|
const Stats = () => {
|
|
const { data, loading } = useQuery(ProductStatsDocument);
|
|
|
|
const series: any[] = [];
|
|
(data?.productStats || [])?.forEach(({ productName: id, data }) => {
|
|
const lineData: any[] = [];
|
|
data.forEach((point, index) => {
|
|
lineData.push({ x: point.x, y: point.y + (lineData?.[index - 1]?.y || 0) });
|
|
});
|
|
series.push({ id, data: lineData });
|
|
});
|
|
|
|
return (
|
|
<StatsView loading={loading}>
|
|
<h2>Kjøp over tid</h2>
|
|
<Line
|
|
data={series}
|
|
width={1000}
|
|
height={400}
|
|
margin={{ top: 50, right: 110, bottom: 50, left: 60 }}
|
|
xScale={{
|
|
type: "time",
|
|
format: "%Y-%m-%d",
|
|
useUTC: false,
|
|
precision: "day",
|
|
}}
|
|
xFormat="time:%Y-%m-%d"
|
|
yScale={{
|
|
type: "linear",
|
|
stacked: false,
|
|
}}
|
|
axisLeft={{
|
|
legend: "Purchases",
|
|
legendOffset: 12,
|
|
}}
|
|
axisBottom={{
|
|
format: "%b %Y",
|
|
legend: "Date",
|
|
legendOffset: -40,
|
|
}}
|
|
useMesh
|
|
pointLabelYOffset={0}
|
|
tooltip={({ point }) => (
|
|
<div
|
|
style={{
|
|
background: "white",
|
|
padding: "9px 12px",
|
|
border: "1px solid #ccc",
|
|
}}
|
|
>
|
|
<div>
|
|
<strong>{point.data.xFormatted}</strong>
|
|
</div>
|
|
<div>
|
|
<span style={{ background: point.serieColor, width: 13, height: 13, display: "inline-block" }} />{" "}
|
|
<strong>{point.data.yFormatted}</strong> {point.serieId}
|
|
</div>
|
|
</div>
|
|
)}
|
|
/>
|
|
</StatsView>
|
|
);
|
|
};
|
|
export default Stats;
|