Changeset b3d5fed for frontend

Timestamp:

05/05/26 18:06:26 (2 months ago)

Author:

Andrej <asumanovski@…>

Branches:

master

Children:

a8381b1

Parents:

e9a0543

Message:

training graph developed

Location:

frontend

Files:

• package-lock.json (modified) (7 diffs)
• package.json (modified) (1 diff)
• src/components/graphs/PercentChangeAreaChart.jsx (added)
• src/components/graphs/TimeRangeToggle.jsx (added)
• src/pages/Dashboard/pages/Training/TrainingTracking.jsx (modified) (2 diffs)
• src/pages/Dashboard/pages/Training/components/TrainingProgressCard.jsx (modified) (2 diffs)
• src/utils/timeSeries.js (added)

frontend/package-lock.json

@@ -15 +15 @@
         "@relume_io/relume-ui": "^1.3.1",
         "@tailwindcss/vite": "^4.1.18",
+        "apexcharts": "^5.10.6",
         "axios": "^1.13.4",
         "daisyui": "^5.5.18",
         "react": "^19.2.0",
+        "react-apexcharts": "^2.1.0",
         "react-dom": "^19.2.0",
         "react-icons": "^5.5.0",
@@ -5724 +5726 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
+    },
+    "node_modules/apexcharts": {
+      "version": "5.10.6",
+      "resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-5.10.6.tgz",
+      "integrity": "sha512-FJQGbso3iRuOwUYnj0yUhkWeKeJE6aboVol+ae09lsc+lbLMWZqSRbrAWVa/qishLiaeG2icxdvmVkm+9n6kOQ==",
+      "license": "SEE LICENSE IN LICENSE"
     },
     "node_modules/argparse": {
@@ -6911 +6919 @@
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
       "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
-      "dev": true,
       "license": "MIT"
     },
@@ -7280 +7287 @@
       "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
       "license": "MIT"
+    },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
     },
     "node_modules/lru-cache": {
@@ -9353 +9372 @@
       "license": "ISC"
     },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/optionator": {
       "version": "0.9.4",
@@ -9515 +9543 @@
       }
     },
+    "node_modules/prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
+    "node_modules/prop-types/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "license": "MIT"
+    },
     "node_modules/proxy-from-env": {
       "version": "1.1.0",
@@ -9538 +9583 @@
       "engines": {
         "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-apexcharts": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/react-apexcharts/-/react-apexcharts-2.1.0.tgz",
+      "integrity": "sha512-xrmeTKRKHh3cvvLc8SasqFjlOgIqGpyHc81qjnRtcjUM0Fu7qEjgVRWGPokGFjqhwRZVgEym8zmuEyYr5LMYIg==",
+      "license": "SEE LICENSE IN LICENSE",
+      "dependencies": {
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "apexcharts": ">=5.10.1",
+        "react": ">=16.8.0"
       }
     },

frontend/package.json

@@ -17 +17 @@
     "@relume_io/relume-ui": "^1.3.1",
     "@tailwindcss/vite": "^4.1.18",
+    "apexcharts": "^5.10.6",
     "axios": "^1.13.4",
     "daisyui": "^5.5.18",
     "react": "^19.2.0",
+    "react-apexcharts": "^2.1.0",
     "react-dom": "^19.2.0",
     "react-icons": "^5.5.0",

frontend/src/pages/Dashboard/pages/Training/TrainingTracking.jsx

@@ -2 +2 @@
 import { useNavigate } from "react-router-dom";
 import api from "../../../../api/axios";
-import graphPlaceholder from "../../../../assets/graph-placeholder.svg";
 
 import TrainingTrackingHeader from "./components/TrainingTrackingHeader.jsx";
@@ -103 +102 @@
         onAddSession={() => navigate("/dashboard/training/sessions/new")}
       />
-      <TrainingProgressCard graphSrc={graphPlaceholder} />
+      <TrainingProgressCard sessions={sessions} />
       <TrainingSessionsTable
         columns={columns}

frontend/src/pages/Dashboard/pages/Training/components/TrainingProgressCard.jsx

@@ -1 @@
-import React from "react";
+import React, { useMemo, useState } from "react";
 
-const TrainingProgressCard = ({ graphSrc }) => {
+import TimeRangeToggle from "../../../../../components/graphs/TimeRangeToggle.jsx";
+import PercentChangeAreaChart from "../../../../../components/graphs/PercentChangeAreaChart.jsx";
+import { percentChangeSeries, sumByTimeBucket } from "../../../../../utils/timeSeries.js";
+
+const TrainingProgressCard = ({ sessions }) => {
+  const [range, setRange] = useState("weekly");
+
+  const points = useMemo(() => {
+    const buckets = sumByTimeBucket(
+      sessions,
+      range,
+      (s) => s.date,
+      (s) => s.calories
+    );
+    return percentChangeSeries(buckets);
+  }, [range, sessions]);
+
+  const latest = points?.length ? points[points.length - 1] : null;
+  const latestPct = latest ? Number(latest.value ?? 0) : 0;
+  const latestBase = latest ? Number(latest.base ?? 0) : 0;
+
   return (
     <div className="card bg-base-200 border border-base-300">
@@ -7 +27 @@
         <div className="flex items-center justify-between gap-4">
           <h2 className="card-title">Progress</h2>
-          <span className="badge badge-ghost">Graph placeholder</span>
+          <div className="flex items-center gap-3">
+            <span className="badge badge-ghost">
+              {latestPct >= 0 ? "+" : ""}
+              {latestPct.toFixed(1)}% (last)
+            </span>
+            <TimeRangeToggle value={range} onChange={setRange} />
+          </div>
         </div>
-        <div className="mt-4 w-full overflow-hidden rounded-xl border border-base-300 bg-base-100">
-          <img
-            src={graphSrc}
-            alt="Training progress graph placeholder"
-            className="block h-65 w-full object-cover"
-          />
+
+        <div className="mt-4 w-full overflow-hidden rounded-xl border border-base-300 bg-base-100 p-2">
+          {points.length < 2 ? (
+            <div className="flex h-65 items-center justify-center text-sm opacity-70">
+              Add at least 2 sessions to see % change.
+            </div>
+          ) : (
+            <PercentChangeAreaChart
+              points={points}
+              granularity={range}
+              height={260}
+            />
+          )}
+        </div>
+
+        <div className="mt-2 text-xs opacity-70">
+          Showing percentage change in calories burned per {range} bucket. Latest bucket total: {Math.round(latestBase)}.
         </div>
       </div>