-
-
Control Center content goes here.
-
+
+
+
+
+
+
+
+ {items.map((it) => {
+ const enabled = enabledKeys?.has(it.key);
+ return (
+
+ );
+ })}
);
-};
-
-export default ControlCenter;
+}
+
+export default function ControlCenter() {
+ const [range, setRange] = useState("weekly");
+
+ const [visibleSeries, setVisibleSeries] = useState(() => new Set());
+
+ const [isLoading, setIsLoading] = useState(true);
+ const [error, setError] = useState("");
+
+ const [tracking, setTracking] = useState({
+ weight: false,
+ training: false,
+ finance: false,
+ discipline: false,
+ investing: false,
+ });
+
+ const [trainingSessions, setTrainingSessions] = useState([]);
+ const [weightProfile, setWeightProfile] = useState(null);
+ const [weightIntakes, setWeightIntakes] = useState([]);
+ const [financeIncomes, setFinanceIncomes] = useState([]);
+ const [disciplineCompletions, setDisciplineCompletions] = useState([]);
+ const [investingAssets, setInvestingAssets] = useState([]);
+
+ const fetchAllPaged = useCallback(async (fnPage, pageSize, maxPages = 400) => {
+ let p = 0;
+ let hasMorePages = true;
+ const all = [];
+ while (hasMorePages) {
+ const res = await fnPage(p, pageSize);
+ const items = res.items;
+ all.push(...items);
+ hasMorePages = Boolean(res.hasMore) && items.length > 0;
+ p += 1;
+ if (p > maxPages) break;
+ }
+ return all;
+ }, []);
+
+ useEffect(() => {
+ let cancelled = false;
+ (async () => {
+ try {
+ setIsLoading(true);
+ setError("");
+
+ // Determine tracking flags (cheap endpoints)
+ const [weightRes, trainingRes, investingRes, financeTracking, disciplineTracking] =
+ await Promise.all([
+ api.get("/weight/status"),
+ api.get("/training/status"),
+ api.get("/investing/status"),
+ getFinanceStatus(),
+ getDisciplineStatus(),
+ ]);
+
+ const nextTracking = {
+ weight: Boolean(weightRes?.data?.tracking),
+ training: Boolean(trainingRes?.data?.tracking),
+ investing: Boolean(investingRes?.data?.tracking),
+ finance: Boolean(financeTracking),
+ discipline: Boolean(disciplineTracking),
+ };
+
+ if (cancelled) return;
+ setTracking(nextTracking);
+
+ // Data fetches (only for tracked features)
+ const tasks = [];
+
+ if (nextTracking.training) {
+ tasks.push(
+ fetchAllPaged(
+ async (page, size) => {
+ const resp = await api.get("/training/sessions", { params: { page, size } });
+ const data = resp?.data ?? {};
+ return {
+ items: Array.isArray(data.sessions) ? data.sessions : [],
+ hasMore: Boolean(data.hasMore),
+ };
+ },
+ 500,
+ 200,
+ ).then((all) => setTrainingSessions(all)),
+ );
+ }
+
+ if (nextTracking.weight) {
+ tasks.push(
+ api.get("/weight/profile").then((res) => setWeightProfile(res?.data ?? null)),
+ );
+ tasks.push(
+ fetchAllPaged(
+ async (page, size) => {
+ const resp = await api.get("/weight/intakes", { params: { page, size } });
+ const data = resp?.data ?? {};
+ return {
+ items: Array.isArray(data.intakes) ? data.intakes : [],
+ hasMore: Boolean(data.hasMore),
+ };
+ },
+ 500,
+ 200,
+ ).then((all) => setWeightIntakes(all)),
+ );
+ }
+
+ if (nextTracking.finance) {
+ tasks.push(
+ fetchAllPaged(
+ async (page, size) => {
+ const data = await getIncomes({ page, size });
+ return {
+ items: Array.isArray(data?.incomes) ? data.incomes : [],
+ hasMore: Boolean(data?.hasMore),
+ };
+ },
+ 500,
+ 200,
+ ).then((all) => setFinanceIncomes(all)),
+ );
+ }
+
+ if (nextTracking.discipline) {
+ tasks.push(
+ fetchAllPaged(
+ async (page, size) => {
+ const data = await getDailyCompletions({ page, size });
+ return {
+ items: Array.isArray(data?.completions) ? data.completions : [],
+ hasMore: Boolean(data?.hasMore),
+ };
+ },
+ 500,
+ 400,
+ ).then((all) => setDisciplineCompletions(all)),
+ );
+ }
+
+ if (nextTracking.investing) {
+ tasks.push(
+ fetchAllPaged(
+ async (page, size) => {
+ const resp = await api.get("/investing/assets", { params: { page, size } });
+ const data = resp?.data ?? {};
+ return {
+ items: Array.isArray(data.assets) ? data.assets : [],
+ hasMore: Boolean(data.hasMore),
+ };
+ },
+ 200,
+ 200,
+ ).then((all) => setInvestingAssets(all)),
+ );
+ }
+
+ await Promise.all(tasks);
+ } catch (e) {
+ if (cancelled) return;
+ setError(e?.response?.data?.message || "Failed to load Control Center.");
+ } finally {
+ if (!cancelled) setIsLoading(false);
+ }
+ })();
+
+ return () => {
+ cancelled = true;
+ };
+ }, [fetchAllPaged]);
+
+ const weightGoalCalories = weightProfile?.goalCalories ?? null;
+ const isBulking = useMemo(() => {
+ const current = Number(weightProfile?.weight);
+ const goal = Number(weightProfile?.goalWeight);
+ if (!Number.isFinite(current) || !Number.isFinite(goal)) return null;
+ return goal > current;
+ }, [weightProfile]);
+
+ const combinedLegend = useMemo(
+ () =>
+ [
+ tracking.training ? { key: "training", label: "Training", color: "#22c55e" } : null,
+ tracking.weight ? { key: "weight", label: "Weight", color: "#60a5fa" } : null,
+ tracking.finance ? { key: "finance", label: "Finance", color: "#a855f7" } : null,
+ tracking.discipline ? { key: "discipline", label: "Discipline", color: "#fbbf24" } : null,
+ tracking.investing ? { key: "investing", label: "Investing", color: "#14b8a6" } : null,
+ ].filter(Boolean),
+ [tracking],
+ );
+
+ // Initialize visible series to "all tracked" whenever tracking changes.
+ useEffect(() => {
+ setVisibleSeries(new Set((combinedLegend ?? []).map((x) => x.key)));
+ }, [combinedLegend]);
+
+ const onToggleSeries = useCallback((key) => {
+ setVisibleSeries((prev) => {
+ const next = new Set(prev);
+ if (next.has(key)) next.delete(key);
+ else next.add(key);
+ return next;
+ });
+ }, []);
+
+ const onShowAllSeries = useCallback(() => {
+ setVisibleSeries(new Set((combinedLegend ?? []).map((x) => x.key)));
+ }, [combinedLegend]);
+
+ const onHideAllSeries = useCallback(() => {
+ setVisibleSeries(new Set());
+ }, []);
+
+ const combinedSeriesList = useMemo(() => {
+ const out = [];
+
+ if (tracking.training) {
+ const buckets = sumByTimeBucket(
+ trainingSessions,
+ range,
+ (s) => s.date,
+ (s) => s.calories,
+ );
+ out.push({
+ name: "Training",
+ key: "training",
+ color: "#22c55e",
+ points: percentChangeSeries(buckets),
+ });
+ }
+
+ if (tracking.finance) {
+ const buckets = sumByTimeBucket(
+ financeIncomes,
+ range,
+ (i) => i.date,
+ (i) => i.amount,
+ );
+ out.push({
+ name: "Finance",
+ key: "finance",
+ color: "#a855f7",
+ points: percentChangeSeries(buckets),
+ });
+ }
+
+ if (tracking.discipline) {
+ // average completion per bucket
+ const sums = sumByTimeBucket(
+ disciplineCompletions,
+ range,
+ (c) => c.date,
+ (c) => Number(c?.procent) || 0,
+ );
+ const counts = sumByTimeBucket(
+ disciplineCompletions,
+ range,
+ (c) => c.date,
+ () => 1,
+ );
+ const countByTs = new Map(counts.map((p) => [p.ts, p.value]));
+ const avgPoints = sums.map((p) => {
+ const count = Number(countByTs.get(p.ts) ?? 0);
+ const avg = count > 0 ? Number(p.value ?? 0) / count : 0;
+ return { ts: p.ts, value: avg };
+ });
+
+ out.push({
+ name: "Discipline",
+ key: "discipline",
+ color: "#fbbf24",
+ points: percentChangeSeries(avgPoints),
+ });
+ }
+
+ if (tracking.investing) {
+ const buckets = sumByTimeBucket(
+ investingAssets,
+ range,
+ (a) => a.buyDate,
+ (a) => (Number(a?.quantity) || 0) * (Number(a?.buyPrice) || 0),
+ );
+ out.push({
+ name: "Investing",
+ key: "investing",
+ color: "#14b8a6",
+ points: percentChangeSeries(buckets),
+ });
+ }
+
+ if (tracking.weight) {
+ // replicate WeightProgressCard base series (closeness %) then % change.
+ const totals = sumByTimeBucket(
+ weightIntakes,
+ range,
+ (i) => i.date,
+ (i) => Number(i?.calories) || 0,
+ );
+ const goalTotals = sumByTimeBucket(
+ weightIntakes,
+ range,
+ (i) => i.date,
+ (i) => {
+ const goal = Number(weightGoalCalories);
+ if (!Number.isFinite(goal) || goal <= 0) return 0;
+ const burned = Number(i?.burnedCalories) || 0;
+ const trained = Boolean(i?.trainedThatDay);
+ return trained ? goal + burned : goal;
+ },
+ );
+ const goalByTs = new Map(goalTotals.map((p) => [p.ts, p.value]));
+ const closeness = totals.map((p) => {
+ const adjustedGoal = Number(goalByTs.get(p.ts) ?? 0);
+ const calories = Number(p.value ?? 0);
+ if (!Number.isFinite(adjustedGoal) || adjustedGoal <= 0) return { ts: p.ts, value: 0 };
+ const pct = 100 - (Math.abs(calories - adjustedGoal) / adjustedGoal) * 100;
+ const clamped = Math.min(200, Math.max(0, pct));
+ return { ts: p.ts, value: clamped };
+ });
+ let weightSeries = percentChangeSeries(closeness);
+ if (isBulking === false) {
+ weightSeries = weightSeries.map((p) => ({ ...p, value: -Number(p.value ?? 0) }));
+ }
+ // Weight graph is reversed (matches WeightProgressCard)
+ weightSeries = weightSeries.map((p) => ({ ...p, value: -Number(p.value ?? 0) }));
+
+ out.push({
+ name: "Weight",
+ key: "weight",
+ color: "#60a5fa",
+ points: weightSeries,
+ });
+ }
+
+ return out;
+ }, [
+ disciplineCompletions,
+ financeIncomes,
+ investingAssets,
+ isBulking,
+ range,
+ tracking,
+ trainingSessions,
+ weightGoalCalories,
+ weightIntakes,
+ ]);
+
+ const filteredCombinedSeriesList = useMemo(() => {
+ return (combinedSeriesList ?? []).filter((s) => visibleSeries.has(s.key));
+ }, [combinedSeriesList, visibleSeries]);
+
+ const trackedCount = Object.values(tracking).filter(Boolean).length;
+
+ if (isLoading) {
+ return (
+
+ );
+ }
+
+ if (error) {
+ return (
+
+
Control Center
+
+ {error}
+
+
+ );
+ }
+
+ if (trackedCount === 0) {
+ return (
+
+
Control Center
+
+
+
+ Start tracking at least one area (Weight / Training / Finance / Discipline / Investing) to see your dashboard.
+
+
+
+
+ );
+ }
+
+ return (
+
+
+
+
Control Center
+
+ Correlate your progress across everything you track.
+
+
+
+
+
+
+
+
+
+
Correlation
+
+ Toggle lines to isolate signals. All metrics are % change per {range} bucket.
+
+
+
+
+
+
+ {filteredCombinedSeriesList.length === 0 ? (
+
+ Toggle at least one line in the legend to display the chart.
+
+ ) : filteredCombinedSeriesList.every((s) => (s.points?.length ?? 0) < 2) ? (
+
+ Add more history to see correlations.
+
+ ) : (
+
+ )}
+
+
+
+ Each line uses the same time bucket toggle, but has its own base metric (calories, income totals, completion average, etc.).
+
+
+
+
+
+ {tracking.training ? (
+
+
+
Training
+
+ % change
+
+
+
+
+ ) : null}
+
+ {tracking.weight ? (
+
+
+
Weight
+
+ % change
+
+
+
+
+ ) : null}
+
+ {tracking.finance ? (
+
+
+
Finance
+
+ % change
+
+
+
+
+ ) : null}
+
+ {tracking.discipline ? (
+
+
+
Discipline
+
+ % change
+
+
+
+
+ ) : null}
+
+ {tracking.investing ? (
+
+
+
Investing
+
+ % change
+
+
+
+
+ ) : null}
+
+
+ );
+}
Index: frontend/src/pages/Dashboard/pages/Discipline/DisciplineTracking.jsx
===================================================================
--- frontend/src/pages/Dashboard/pages/Discipline/DisciplineTracking.jsx (revision b3d5fed65cdab945e6c84835e2e04bc1814d9699)
+++ frontend/src/pages/Dashboard/pages/Discipline/DisciplineTracking.jsx (revision a8381b18babc398c094b70c3ca5dc6cb0483c327)
@@ -1,4 +1,3 @@
import React, { useCallback, useEffect, useMemo, useState } from "react";
-import graphPlaceholder from "../../../../assets/graph-placeholder.svg";
import {
@@ -16,8 +15,10 @@
import TaskList from "./components/TaskList.jsx";
+import DisciplineProgressCard from "./components/DisciplineProgressCard.jsx";
export default function DisciplineTracking() {
const pageSize = 50;
const completionPageSize = 14;
+ const graphCompletionPageSize = 500;
const todayIso = useMemo(() => {
@@ -65,4 +66,23 @@
nextHasMore: Boolean(data?.hasMore),
};
+ }, []);
+
+ const [graphCompletions, setGraphCompletions] = useState([]);
+
+ const fetchAllCompletionsForGraph = useCallback(async () => {
+ let p = 0;
+ let hasMorePages = true;
+ const all = [];
+
+ while (hasMorePages) {
+ const data = await getDailyCompletions({ page: p, size: graphCompletionPageSize });
+ const chunk = Array.isArray(data?.completions) ? data.completions : [];
+ all.push(...chunk);
+ hasMorePages = Boolean(data?.hasMore) && chunk.length > 0;
+ p += 1;
+ if (p > 400) break;
+ }
+
+ return all;
}, []);
@@ -96,7 +116,11 @@
setIsLoadingCompletions(true);
setCompletionError("");
- const { nextCompletions, nextHasMore } = await fetchCompletionsPage(0);
+ const [{ nextCompletions, nextHasMore }, allForGraph] = await Promise.all([
+ fetchCompletionsPage(0),
+ fetchAllCompletionsForGraph(),
+ ]);
if (cancelled) return;
setDailyCompletions(nextCompletions);
+ setGraphCompletions(allForGraph);
setCompletionHasMore(nextHasMore);
setCompletionPage(0);
@@ -115,5 +139,5 @@
cancelled = true;
};
- }, [fetchCompletionsPage]);
+ }, [fetchAllCompletionsForGraph, fetchCompletionsPage]);
const onLoadMoreCompletions = async () => {
@@ -240,4 +264,14 @@
setCompletionHasMore(nextHasMore);
setCompletionPage(0);
+
+ // also refresh graph dataset
+ try {
+ const allForGraph = await getDailyCompletions({ page: 0, size: 1000 });
+ setGraphCompletions(
+ Array.isArray(allForGraph?.completions) ? allForGraph.completions : [],
+ );
+ } catch {
+ // ignore
+ }
} catch {
// ignore
@@ -316,17 +350,5 @@
) : null}
-
-
-
Progress
-
(Placeholder graph for now)
-
-
-
-
-
+
Index: frontend/src/pages/Dashboard/pages/Discipline/components/DisciplineProgressCard.jsx
===================================================================
--- frontend/src/pages/Dashboard/pages/Discipline/components/DisciplineProgressCard.jsx (revision a8381b18babc398c094b70c3ca5dc6cb0483c327)
+++ frontend/src/pages/Dashboard/pages/Discipline/components/DisciplineProgressCard.jsx (revision a8381b18babc398c094b70c3ca5dc6cb0483c327)
@@ -0,0 +1,78 @@
+import React, { useMemo, useState } from "react";
+
+import TimeRangeToggle from "../../../../../components/graphs/TimeRangeToggle.jsx";
+import PercentChangeAreaChart from "../../../../../components/graphs/PercentChangeAreaChart.jsx";
+import { percentChangeSeries, sumByTimeBucket } from "../../../../../utils/timeSeries.js";
+
+export default function DisciplineProgressCard({ completions }) {
+ const [range, setRange] = useState("weekly");
+
+ const points = useMemo(() => {
+ // Bucket daily completion percentages by time range.
+ // For weekly/monthly/yearly we compute the *average* completion % in that period.
+ const sums = sumByTimeBucket(
+ completions,
+ range,
+ (c) => c.date,
+ (c) => Number(c?.procent) || 0,
+ );
+
+ const counts = sumByTimeBucket(
+ completions,
+ range,
+ (c) => c.date,
+ () => 1,
+ );
+
+ const countByTs = new Map(counts.map((p) => [p.ts, p.value]));
+
+ const avgPoints = sums.map((p) => {
+ const count = Number(countByTs.get(p.ts) ?? 0);
+ const avg = count > 0 ? Number(p.value ?? 0) / count : 0;
+ return { ts: p.ts, value: avg };
+ });
+
+ return percentChangeSeries(avgPoints);
+ }, [completions, range]);
+
+ 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 (
+
+
+
+
Progress
+
+
+ {latestPct >= 0 ? "+" : ""}
+ {latestPct.toFixed(1)}% (last)
+
+
+
+
+
+
+ {points.length < 2 ? (
+
+ Add at least 2 daily completion records to see % change.
+
+ ) : (
+
+ )}
+
+
+
+ Showing percentage change in average completion % per {range} bucket. Latest bucket avg: {Math.round(latestBase)}%.
+
+
+
+ );
+}
+
Index: frontend/src/pages/Dashboard/pages/Finance/FinanceTracking.jsx
===================================================================
--- frontend/src/pages/Dashboard/pages/Finance/FinanceTracking.jsx (revision b3d5fed65cdab945e6c84835e2e04bc1814d9699)
+++ frontend/src/pages/Dashboard/pages/Finance/FinanceTracking.jsx (revision a8381b18babc398c094b70c3ca5dc6cb0483c327)
@@ -2,5 +2,4 @@
import { useNavigate } from "react-router-dom";
-import graphPlaceholder from "../../../../assets/graph-placeholder.svg";
import {
getFinanceProfile,
@@ -12,4 +11,5 @@
import FinanceIncomesTable from "./components/FinanceIncomesTable.jsx";
import FinanceStartForm from "./components/FinanceStartForm.jsx";
+import FinanceProgressCard from "./components/FinanceProgressCard.jsx";
function toNumber(value) {
@@ -21,4 +21,5 @@
const navigate = useNavigate();
const pageSize = 5;
+ const graphPageSize = 500;
const [profile, setProfile] = useState(null);
@@ -76,4 +77,23 @@
}, []);
+ const [graphIncomes, setGraphIncomes] = useState([]);
+
+ const fetchAllIncomesForGraph = useCallback(async () => {
+ let p = 0;
+ let hasMorePages = true;
+ const all = [];
+
+ while (hasMorePages) {
+ const data = await getIncomes({ page: p, size: graphPageSize });
+ const chunk = Array.isArray(data?.incomes) ? data.incomes : [];
+ all.push(...chunk);
+ hasMorePages = Boolean(data?.hasMore) && chunk.length > 0;
+ p += 1;
+ if (p > 200) break;
+ }
+
+ return all;
+ }, []);
+
useEffect(() => {
let cancelled = false;
@@ -83,5 +103,9 @@
setError("");
- const [p, inc] = await Promise.all([getFinanceProfile(), fetchPage(0)]);
+ const [p, inc, allInc] = await Promise.all([
+ getFinanceProfile(),
+ fetchPage(0),
+ fetchAllIncomesForGraph(),
+ ]);
if (cancelled) return;
setProfile(p);
@@ -94,4 +118,5 @@
});
setIncomes(inc.nextIncomes);
+ setGraphIncomes(allInc);
setHasMore(inc.nextHasMore);
setPage(0);
@@ -107,5 +132,5 @@
cancelled = true;
};
- }, [fetchPage]);
+ }, [fetchAllIncomesForGraph, fetchPage]);
const onEdit = () => {
@@ -205,13 +230,5 @@
)}
-
-
-
Progress
-
(Placeholder graph for now)
-
-
-
-
-
+
{
+ const buckets = sumByTimeBucket(
+ incomes,
+ range,
+ (i) => i.date,
+ (i) => i.amount,
+ );
+ return percentChangeSeries(buckets);
+ }, [incomes, range]);
+
+ 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 (
+
+
+
+
Progress
+
+
+ {latestPct >= 0 ? "+" : ""}
+ {latestPct.toFixed(1)}% (last)
+
+
+
+
+
+
+ {points.length < 2 ? (
+
+ Add at least 2 incomes to see % change.
+
+ ) : (
+
+ )}
+
+
+
+ Showing percentage change in income totals per {range} bucket. Latest bucket total: {Math.round(latestBase)}.
+
+
+
-
-
Progress
-
- Graph placeholder — we’ll visualize portfolio value here.
-
+
Progress
+
+
+ {latestPct >= 0 ? "+" : ""}
+ {latestPct.toFixed(1)}% (last)
+
+
-
-
-
+ {points.length < 2 ? (
+
+ Add at least 2 investments to see % change.
+
+ ) : (
+
-
+ )}
+
+
+
+ Showing percentage change in invested amount per {range} bucket. Latest bucket invested: {Math.round(latestBase)}.
Index: frontend/src/pages/Dashboard/pages/Training/TrainingTracking.jsx
===================================================================
--- frontend/src/pages/Dashboard/pages/Training/TrainingTracking.jsx (revision b3d5fed65cdab945e6c84835e2e04bc1814d9699)
+++ frontend/src/pages/Dashboard/pages/Training/TrainingTracking.jsx (revision a8381b18babc398c094b70c3ca5dc6cb0483c327)
@@ -27,4 +27,5 @@
const navigate = useNavigate();
const pageSize = 5;
+ const graphPageSize = 500;
const [sessions, setSessions] = useState([]);
@@ -45,7 +46,7 @@
);
- const fetchPage = useCallback(async (nextPage) => {
+ const fetchPage = useCallback(async (nextPage, size = pageSize) => {
const resp = await api.get("/training/sessions", {
- params: { page: nextPage, size: pageSize },
+ params: { page: nextPage, size },
});
const data = resp?.data ?? {};
@@ -55,4 +56,23 @@
}, []);
+ const fetchAllForGraph = useCallback(async () => {
+ let p = 0;
+ let hasMorePages = true;
+ const all = [];
+
+ while (hasMorePages) {
+ const { nextSessions, nextHasMore } = await fetchPage(p, graphPageSize);
+ all.push(...nextSessions);
+ hasMorePages = nextHasMore && nextSessions.length > 0;
+ p += 1;
+ // Basic safety to avoid accidental infinite loops if backend misbehaves.
+ if (p > 200) break;
+ }
+
+ return all;
+ }, [fetchPage]);
+
+ const [graphSessions, setGraphSessions] = useState([]);
+
useEffect(() => {
let cancelled = false;
@@ -61,8 +81,12 @@
setIsLoading(true);
setError("");
- const { nextSessions, nextHasMore } = await fetchPage(0);
+ const [tableFirstPage, allForGraph] = await Promise.all([
+ fetchPage(0, pageSize),
+ fetchAllForGraph(),
+ ]);
if (cancelled) return;
- setSessions(nextSessions);
- setHasMore(nextHasMore);
+ setSessions(tableFirstPage.nextSessions);
+ setHasMore(tableFirstPage.nextHasMore);
+ setGraphSessions(allForGraph);
setPage(0);
} catch (e) {
@@ -78,5 +102,5 @@
cancelled = true;
};
- }, [fetchPage]);
+ }, [fetchAllForGraph, fetchPage]);
const onLoadMore = async () => {
@@ -102,5 +126,5 @@
onAddSession={() => navigate("/dashboard/training/sessions/new")}
/>
-
+
{
+ const fetchPage = useCallback(async (nextPage, size = pageSize) => {
const [profileRes, intakesRes, trainingRes] = await Promise.all([
api.get("/weight/profile"),
api.get("/weight/intakes", {
- params: { page: nextPage, size: pageSize },
+ params: { page: nextPage, size },
}),
api.get("/weight/today-training"),
@@ -69,4 +69,23 @@
}, []);
+ const [graphIntakes, setGraphIntakes] = useState([]);
+
+ const fetchAllIntakesForGraph = useCallback(async () => {
+ let p = 0;
+ let hasMorePages = true;
+ const all = [];
+
+ while (hasMorePages) {
+ const { intakesData } = await fetchPage(p, graphPageSize);
+ const chunk = Array.isArray(intakesData.intakes) ? intakesData.intakes : [];
+ all.push(...chunk);
+ hasMorePages = Boolean(intakesData.hasMore) && chunk.length > 0;
+ p += 1;
+ if (p > 200) break;
+ }
+
+ return all;
+ }, [fetchPage]);
+
useEffect(() => {
let cancelled = false;
@@ -75,8 +94,12 @@
setIsLoading(true);
setError("");
- const { profileData, intakesData, trainingData } = await fetchPage(0);
+ const [{ profileData, intakesData, trainingData }, allIntakes] = await Promise.all([
+ fetchPage(0, pageSize),
+ fetchAllIntakesForGraph(),
+ ]);
if (cancelled) return;
setProfile(profileData);
setIntakes(Array.isArray(intakesData.intakes) ? intakesData.intakes : []);
+ setGraphIntakes(allIntakes);
setHasMore(Boolean(intakesData.hasMore));
setHasTodayIntake(Boolean(intakesData.hasTodayIntake));
@@ -100,5 +123,5 @@
cancelled = true;
};
- }, [fetchPage, navigate]);
+ }, [fetchAllIntakesForGraph, fetchPage, navigate]);
const onLoadMore = async () => {
@@ -213,5 +236,13 @@
/>
-
+ Number(profile.weight)
+ : null
+ }
+ />
-