Přidání základních statistik

2025-02-27 00:22:34 +01:00
parent 0af78e72d9
commit ca400638d1
15 changed files with 637 additions and 26 deletions
--- a/client/src/pages/StatsPage.tsx
+++ b/client/src/pages/StatsPage.tsx
@@ -0,0 +1,124 @@
+import { useCallback, useEffect, useState } from "react";
+import Footer from "../components/Footer";
+import Header from "../components/Header";
+import { useAuth } from "../context/auth";
+import Login from "../Login";
+import { formatDate, getFirstWorkDayOfWeek, getHumanDate, getLastWorkDayOfWeek } from "../Utils";
+import { getStats } from "../api/StatsApi";
+import { WeeklyStats, LocationKey, Locations } from "../../../types";
+import Loader from "../components/Loader";
+import { faChevronLeft, faChevronRight, faGear } from "@fortawesome/free-solid-svg-icons";
+import { Legend, Line, LineChart, Tooltip, XAxis, YAxis } from "recharts";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import './StatsPage.scss';
+
+const CHART_WIDTH = 1400;
+const CHART_HEIGHT = 700;
+const STROKE_WIDTH = 2.5;
+
+const COLORS = [
+  // Komentáře jsou kvůli vizualizaci barev ve VS Code
+  '#ff1493', // #ff1493
+  '#1e90ff', // #1e90ff
+  '#c5a700', // #c5a700
+  '#006400', // #006400
+  '#b300ff', // #b300ff
+  '#ff4500', // #ff4500
+  '#bc8f8f', // #bc8f8f
+  '#00ff00', // #00ff00
+  '#7c7c7c', // #7c7c7c
+]
+
+export default function StatsPage() {
+  const auth = useAuth();
+  const [dateRange, setDateRange] = useState<Date[]>();
+  const [data, setData] = useState<WeeklyStats>();
+
+  // Prvotní nastavení aktuálního týdne
+  useEffect(() => {
+    const today = new Date();
+    setDateRange([getFirstWorkDayOfWeek(today), getLastWorkDayOfWeek(today)]);
+  }, []);
+
+  // Přenačtení pro zvolený týden
+  useEffect(() => {
+    if (dateRange) {
+      getStats(formatDate(dateRange[0]), formatDate(dateRange[1])).then(setData);
+    }
+  }, [dateRange]);
+
+  const renderLine = (location: Locations) => {
+    const index = Object.values(Locations).indexOf(location);
+    const key = Object.keys(Locations)[index];
+    return <Line key={location} name={location} type="monotone" dataKey={data => data.locations[key] ?? 0} stroke={COLORS[index]} strokeWidth={STROKE_WIDTH} />
+  }
+
+  const handlePreviousWeek = () => {
+    if (dateRange) {
+      const previousStartDate = new Date(dateRange[0]);
+      previousStartDate.setDate(previousStartDate.getDate() - 7);
+      const previousEndDate = new Date(previousStartDate);
+      previousEndDate.setDate(previousEndDate.getDate() + 4);
+      setDateRange([previousStartDate, previousEndDate]);
+    }
+  }
+
+  const handleNextWeek = () => {
+    if (dateRange) {
+      const nextStartDate = new Date(dateRange[0]);
+      nextStartDate.setDate(nextStartDate.getDate() + 7);
+      const nextEndDate = new Date(nextStartDate);
+      nextEndDate.setDate(nextEndDate.getDate() + 4);
+      setDateRange([nextStartDate, nextEndDate]);
+    }
+  }
+
+  const handleKeyDown = useCallback((e: any) => {
+    if (e.keyCode === 37) {
+      handlePreviousWeek();
+    } else if (e.keyCode === 39) {
+      handleNextWeek()
+    }
+  }, [dateRange]);
+
+  useEffect(() => {
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    }
+  }, [handleKeyDown]);
+
+  if (!auth?.login) {
+    return <Login />;
+  }
+
+  if (!dateRange) {
+    return <Loader
+      icon={faGear}
+      description={'Načítám data...'}
+      animation={'fa-bounce'}
+    />
+  }
+
+  return (
+    <>
+      <Header />
+      <div className="stats-page">
+        <h1>Statistiky</h1>
+        <div className="week-navigator">
+          <FontAwesomeIcon title="Předchozí týden" icon={faChevronLeft} style={{ cursor: "pointer" }} onClick={handlePreviousWeek} />
+          <h2 className="date-range">{getHumanDate(dateRange[0])} - {getHumanDate(dateRange[1])}</h2>
+          <FontAwesomeIcon title="Následující týden" icon={faChevronRight} style={{ cursor: "pointer" }} onClick={handleNextWeek} />
+        </div>
+        <LineChart width={CHART_WIDTH} height={CHART_HEIGHT} data={data}>
+          {Object.values(Locations).map(location => renderLine(location))}
+          <XAxis dataKey="date" />
+          <YAxis />
+          <Tooltip />
+          <Legend />
+        </LineChart>
+      </div>
+      <Footer />
+    </>
+  );
+}