adjust statistics

2024-11-22 11:23:04 +01:00
parent fcb6d135ee
commit dd7246f525
9 changed files with 287 additions and 129 deletions
--- a/packages/reservation-platform/src/app/admin/charts/printer-error-chart.tsx
+++ b/packages/reservation-platform/src/app/admin/charts/printer-error-chart.tsx
@@ -0,0 +1,68 @@
+"use client";
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { type ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart";
+import { Bar, BarChart, CartesianGrid, LabelList, XAxis, YAxis } from "recharts";
+
+export const description = "Ein Säulendiagramm zur Darstellung der Abbruchgründe und ihrer Häufigkeit";
+
+interface AbortReasonCountChartProps {
+	abortReasonCount: {
+		abortReason: string;
+		count: number;
+	}[];
+}
+
+const chartConfig = {
+	abortReason: {
+		label: "Abbruchgrund",
+	},
+} satisfies ChartConfig;
+
+export function AbortReasonCountChart({ abortReasonCount }: AbortReasonCountChartProps) {
+	// Transform data to fit the chart structure
+	const chartData = abortReasonCount.map((reason) => ({
+		abortReason: reason.abortReason,
+		count: reason.count,
+	}));
+
+	return (
+		<Card>
+			<CardHeader>
+				<CardTitle>Abbruchgründe</CardTitle>
+				<CardDescription>Häufigkeit der Abbruchgründe für Druckaufträge</CardDescription>
+			</CardHeader>
+			<CardContent>
+				<ChartContainer config={chartConfig}>
+					<BarChart
+						accessibilityLayer
+						data={chartData}
+						margin={{
+							top: 20,
+						}}
+					>
+						<CartesianGrid vertical={false} strokeDasharray="3 3" />
+						<XAxis
+							dataKey="abortReason"
+							tickLine={false}
+							tickMargin={10}
+							axisLine={false}
+							tickFormatter={(value) => value}
+						/>
+						<YAxis tickFormatter={(value) => `${value}`} />
+						<ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />
+						<Bar dataKey="count" fill="hsl(var(--chart-1))" radius={8}>
+							<LabelList
+								position="top"
+								offset={12}
+								className="fill-foreground"
+								fontSize={12}
+								formatter={(value: number) => `${value}`}
+							/>
+						</Bar>
+					</BarChart>
+				</ChartContainer>
+			</CardContent>
+		</Card>
+	);
+}
--- a/packages/reservation-platform/src/app/admin/charts/printer-error-rate.tsx
+++ b/packages/reservation-platform/src/app/admin/charts/printer-error-rate.tsx
@@ -1,9 +1,7 @@
 "use client";
-
-import { TrendingUp } from "lucide-react";
 import { Bar, BarChart, CartesianGrid, LabelList, XAxis, YAxis } from "recharts";

-import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { type ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart";
 import type { PrinterErrorRate } from "@/utils/analytics/error-rate";

@@ -63,12 +61,6 @@ export function PrinterErrorRateChart({ printerErrorRate }: PrinterErrorRateChar
 					</BarChart>
 				</ChartContainer>
 			</CardContent>
-			<CardFooter className="flex-col items-start gap-2 text-sm">
-				<div className="flex gap-2 font-medium leading-none">
-					Fehlerratenanalyse abgeschlossen <TrendingUp className="h-4 w-4" />
-				</div>
-				<div className="leading-none text-muted-foreground">Zeigt die Fehlerrate für jeden Drucker</div>
-			</CardFooter>
 		</Card>
 	);
 }
--- a/packages/reservation-platform/src/app/admin/charts/printer-forecast.tsx
+++ b/packages/reservation-platform/src/app/admin/charts/printer-forecast.tsx
@@ -0,0 +1,83 @@
+"use client";
+
+import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
+import { type ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart";
+import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts";
+
+export const description = "Ein Bereichsdiagramm zur Darstellung der prognostizierten Nutzung pro Wochentag";
+
+interface ForecastData {
+	day: number; // 0 for Sunday, 1 for Monday, ..., 6 for Saturday
+	usageMinutes: number;
+}
+
+interface ForecastChartProps {
+	forecastData: ForecastData[];
+}
+
+const chartConfig = {
+	usage: {
+		label: "Prognostizierte Nutzung",
+		color: "hsl(var(--chart-1))",
+	},
+} satisfies ChartConfig;
+
+const daysOfWeek = ["Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"];
+
+export function ForecastPrinterUsageChart({ forecastData }: ForecastChartProps) {
+	// Transform and slice data to fit the chart structure
+	const chartData = forecastData.map((data) => ({
+		//slice(1, forecastData.length - 1).
+		day: daysOfWeek[data.day], // Map day number to weekday name
+		usage: data.usageMinutes,
+	}));
+
+	return (
+		<Card>
+			<CardHeader>
+				<CardTitle>Prognostizierte Nutzung pro Wochentag</CardTitle>
+			</CardHeader>
+			<CardContent>
+				<ChartContainer className="h-64 w-full" config={chartConfig}>
+					<AreaChart accessibilityLayer data={chartData} margin={{ left: 12, right: 12, top: 12 }}>
+						<CartesianGrid vertical={true} />
+						<XAxis dataKey="day" type="category" tickLine={true} tickMargin={10} axisLine={false} />
+						<YAxis type="number" dataKey="usage" tickLine={false} tickMargin={10} axisLine={false} />
+						<ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />
+						<Area
+							dataKey="usage"
+							type="step"
+							fill="hsl(var(--chart-1))"
+							fillOpacity={0.4}
+							stroke="hsl(var(--chart-1))"
+						/>
+					</AreaChart>
+				</ChartContainer>
+			</CardContent>
+			<CardFooter className="flex-col items-start gap-2 text-sm">
+				<div className="flex items-center gap-2 font-medium leading-none">
+					Zeigt die prognostizierte Nutzungszeit pro Wochentag in Minuten.
+				</div>
+				<div className="leading-none text-muted-foreground">
+					Besten Tage zur Wartung: {bestMaintenanceDays(forecastData)}
+				</div>
+			</CardFooter>
+		</Card>
+	);
+}
+
+function bestMaintenanceDays(forecastData: ForecastData[]) {
+	const sortedData = forecastData.map((a) => a).sort((a, b) => a.usageMinutes - b.usageMinutes); // Sort ascending
+
+	const q1Index = Math.floor(sortedData.length * 0.33);
+	const q1 = sortedData[q1Index].usageMinutes; // First quartile (Q1) value
+
+	const filteredData = sortedData.filter((data) => data.usageMinutes <= q1);
+
+	return filteredData
+		.map((data) => {
+			const days = ["Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"];
+			return days[data.day];
+		})
+		.join(", ");
+}
--- a/packages/reservation-platform/src/app/admin/charts/printer-idle.tsx
+++ b/packages/reservation-platform/src/app/admin/charts/printer-idle.tsx
@@ -1,63 +0,0 @@
-"use client";
-import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from "recharts";
-
-import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
-import { type ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart";
-
-export const description = "Ein horizontales Balkendiagramm zur Darstellung der durchschnittlichen Leerlaufzeit";
-
-interface PrinterIdleTime {
-	printerId: string;
-	printerName: string;
-	averageIdleTime: number; // in minutes
-}
-
-interface PrinterIdleTimeChartProps {
-	printerIdleTime: PrinterIdleTime[];
-}
-
-const chartConfig = {
-	idleTime: {
-		label: "Leerlaufzeit",
-	},
-} satisfies ChartConfig;
-
-export function PrinterIdleTimeChart({ printerIdleTime }: PrinterIdleTimeChartProps) {
-	// Transform data to fit the chart structure
-	const chartData = printerIdleTime.map((printer) => ({
-		printer: printer.printerName,
-		idleTime: printer.averageIdleTime,
-	}));
-
-	return (
-		<Card>
-			<CardHeader>
-				<CardTitle>Leerlaufzeit der Drucker</CardTitle>
-				<CardDescription>Durchschnittliche Leerlaufzeit der Drucker in Minuten</CardDescription>
-			</CardHeader>
-			<CardContent>
-				<ChartContainer className="h-64 w-full" config={chartConfig}>
-					<BarChart accessibilityLayer data={chartData} layout="vertical">
-						<CartesianGrid vertical={true} />
-						<XAxis type="number" dataKey="idleTime" label={"Minuten"} />
-						<YAxis
-							dataKey="printer"
-							type="category"
-							tickLine={false}
-							tickMargin={10}
-							axisLine={false}
-							tickFormatter={(value) => value}
-						/>
-						<ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />
-						<Bar dataKey="idleTime" fill="hsl(var(--chart-1))" radius={5} />
-					</BarChart>
-				</ChartContainer>
-			</CardContent>
-			<CardFooter className="flex-col items-start gap-2 text-sm">
-				<div className="leading-none text-muted-foreground">
-					Zeigt die durchschnittliche Leerlaufzeit für jeden Drucker in Minuten
-				</div>
-			</CardFooter>
-		</Card>
-	);
-}
--- a/packages/reservation-platform/src/app/admin/page.tsx
+++ b/packages/reservation-platform/src/app/admin/page.tsx
@@ -1,5 +1,6 @@
-import { PrinterErrorRateChart } from "@/app/admin/charts/printer-error";
-import { PrinterIdleTimeChart } from "@/app/admin/charts/printer-idle";
+import { AbortReasonCountChart } from "@/app/admin/charts/printer-error-chart";
+import { PrinterErrorRateChart } from "@/app/admin/charts/printer-error-rate";
+import { ForecastPrinterUsageChart } from "@/app/admin/charts/printer-forecast";
 import { PrinterUtilizationChart } from "@/app/admin/charts/printer-utilization";
 import { PrinterVolumeChart } from "@/app/admin/charts/printer-volume";
 import { DataCard } from "@/components/data-card";
@@ -7,7 +8,8 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/com
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { db } from "@/server/db";
 import { calculatePrinterErrorRate } from "@/utils/analytics/error-rate";
-import { calculatePrinterIdleTime } from "@/utils/analytics/idle-time";
+import { calculateAbortReasonsCount } from "@/utils/analytics/errors";
+import { forecastPrinterUsage } from "@/utils/analytics/forecast";
 import { calculatePrinterUtilization } from "@/utils/analytics/utilization";
 import { calculatePrintVolumes } from "@/utils/analytics/volume";
 import type { Metadata } from "next";
@@ -55,8 +57,9 @@ export default async function AdminPage() {
 	const freePrinters = printers.filter((printer) => !occupiedPrinters.includes(printer.id));
 	const printerUtilization = calculatePrinterUtilization(printJobs);
 	const printerVolume = calculatePrintVolumes(printJobs);
-	const printerIdleTime = calculatePrinterIdleTime(printJobs, printers);
+	const printerAbortReasons = calculateAbortReasonsCount(printJobs);
 	const printerErrorRate = calculatePrinterErrorRate(printJobs);
+	const printerForecast = forecastPrinterUsage(printJobs);

 	return (
 		<>
@@ -64,16 +67,27 @@ export default async function AdminPage() {
 				<TabsList className="bg-neutral-100 w-full py-6">
 					<TabsTrigger value="@general">Allgemein</TabsTrigger>
 					<TabsTrigger value="@capacity">Druckerauslastung</TabsTrigger>
-					<TabsTrigger value="@report">Statistiken & Berichte</TabsTrigger>
+					<TabsTrigger value="@report">Fehlerberichte</TabsTrigger>
+					<TabsTrigger value="@forecasts">Prognosen</TabsTrigger>
 				</TabsList>
 				<TabsContent value="@general" className="w-full">
 					<div className="flex flex-col lg:grid lg:grid-cols-2 gap-4">
+						<div className="w-full col-span-2">
+							<DataCard
+								title="Aktuelle Auslastung"
+								value={`${Math.round((occupiedPrinters.length / (freePrinters.length + occupiedPrinters.length)) * 100)}%`}
+								icon={"Percent"}
+							/>
+						</div>
 						<DataCard title="Aktive Drucker" value={occupiedPrinters.length} icon={"Rotate3d"} />
 						<DataCard title="Freie Drucker" value={freePrinters.length} icon={"PowerOff"} />
 					</div>
 				</TabsContent>
 				<TabsContent value="@capacity" className="w-full">
 					<div className="flex flex-col lg:grid lg:grid-cols-2 gap-4">
+						<div className="w-full col-span-2">
+							<PrinterVolumeChart printerVolume={printerVolume} />
+						</div>
 						{printerUtilization.map((data) => (
 							<PrinterUtilizationChart key={data.printerId} data={data} />
 						))}
@@ -81,11 +95,24 @@ export default async function AdminPage() {
 				</TabsContent>
 				<TabsContent value="@report" className="w-full">
 					<div className="flex flex-col lg:grid lg:grid-cols-2 gap-4">
-						<PrinterIdleTimeChart printerIdleTime={printerIdleTime} />
-						<PrinterVolumeChart printerVolume={printerVolume} />
 						<div className="w-full col-span-2">
 							<PrinterErrorRateChart printerErrorRate={printerErrorRate} />
 						</div>
+						<div className="w-full col-span-2">
+							<AbortReasonCountChart abortReasonCount={printerAbortReasons} />
+						</div>
+					</div>
+				</TabsContent>
+				<TabsContent value="@forecasts" className="w-full">
+					<div className="flex flex-col lg:grid lg:grid-cols-2 gap-4">
+						<div className="w-full col-span-2">
+							<ForecastPrinterUsageChart
+								forecastData={printerForecast.map((usageMinutes, index) => ({
+									day: index,
+									usageMinutes,
+								}))}
+							/>
+						</div>
 					</div>
 				</TabsContent>
 			</Tabs>