Merge pull request #159 from WhyAsh5114/chart-fixes

Chart fixes

package.json

@@ -64,8 +64,10 @@
 		"@trpc/server": "^10.45.2",
 		"bits-ui": "^0.22.0",
 		"chart.js": "^4.4.3",
+		"chartjs-adapter-date-fns": "^3.0.0",
 		"clsx": "^2.1.1",
 		"cmdk-sv": "^0.0.18",
+		"date-fns": "^4.1.0",
 		"dompurify": "^3.2.3",
 		"embla-carousel-svelte": "^8.3.0",
 		"marked": "^15.0.4",

src/routes/(components)/layout/ChangelogDialog.svelte

@@ -27,7 +27,10 @@
 		) {
 			open = true;
 			checkingForUpdate = true;
-			await checkForUpdates!();
+			while (checkForUpdates === null) {
+				await new Promise((resolve) => setTimeout(resolve, 500));
+			}
+			await checkForUpdates();
 			checkingForUpdate = false;
 			loadChangelog(changelogShownOf);
 		}

src/routes/exercise-stats/+page.svelte

@@ -22,6 +22,15 @@
 	let selectedExercise = $state<string>();
 	let exerciseInstances = $state<WorkoutExercise[]>();
 
+	let filteredExercisesByMuscleGroup = $derived(
+		exercisesByMuscleGroup
+			?.filter((g) => g.exercises.some((ex) => ex.name.toLowerCase().includes(searchText)))
+			.map(({ group, exercises }) => ({
+				group,
+				exercises: exercises.filter((ex) => ex.name.toLowerCase().includes(searchText))
+			})) ?? []
+	);
+
 	onMount(async () => {
 		const exerciseList = await data.exerciseList;
 		exercisesByMuscleGroup = Object.entries(
@@ -50,7 +59,7 @@
 		</Button>
 	</Popover.Trigger>
 	<Popover.Content sameWidth>
-		<Command.Root class="mb-6 h-fit">
+		<Command.Root class="mb-6 h-fit" shouldFilter={false}>
 			<Command.Input placeholder="Type here" bind:value={searchText} />
 			<Command.List>
 				{#if exercisesByMuscleGroup === undefined}
@@ -64,7 +73,7 @@
 					</Command.Loading>
 				{:else}
 					<Command.Empty>No results found.</Command.Empty>
-					{#each exercisesByMuscleGroup as { exercises, group }}
+					{#each filteredExercisesByMuscleGroup as { group, exercises }}
 						<Command.Group heading={group}>
 							{#each exercises as ex}
 								<Command.Item onclick={() => selectExercise(ex.name)}>{ex.name}</Command.Item>
@@ -82,7 +91,7 @@
 		<ExerciseStatsChart {selectedExercise} exercises={exerciseInstances} />
 		{#if exerciseInstances}
 			{#each exerciseInstances as instance}
-				<WorkoutExerciseCard exercise={instance} />
+				<WorkoutExerciseCard exercise={instance} date={new Date(instance.workout.startedAt)} />
 			{/each}
 		{/if}
 	{/if}

src/routes/exercise-stats/ExerciseStatsChart.svelte

@@ -1,14 +1,13 @@
 <script lang="ts">
-	import type { RouterOutputs } from '$lib/trpc/router';
 	import * as Card from '$lib/components/ui/card';
-	import * as Popover from '$lib/components/ui/popover';
 	import { Label } from '$lib/components/ui/label';
+	import * as Popover from '$lib/components/ui/popover';
 	import * as RadioGroup from '$lib/components/ui/radio-group';
+	import Separator from '$lib/components/ui/separator/separator.svelte';
 	import * as ToggleGroup from '$lib/components/ui/toggle-group';
+	import type { RouterOutputs } from '$lib/trpc/router';
 	import { generateShadesAndTints } from '$lib/utils';
 	import { solveBergerFormula } from '$lib/utils/workoutUtils';
-	import LoaderCircle from 'virtual:icons/lucide/loader-circle';
-	import MenuIcon from 'virtual:icons/lucide/menu';
 	import {
 		CategoryScale,
 		Chart,
@@ -17,11 +16,24 @@
 		LineController,
 		LineElement,
 		PointElement,
+		TimeScale,
 		Title,
 		Tooltip
 	} from 'chart.js';
-	import Separator from '$lib/components/ui/separator/separator.svelte';
-	Chart.register(Tooltip, CategoryScale, LineController, LineElement, PointElement, Filler, LinearScale, Title);
+	import 'chartjs-adapter-date-fns';
+	import LoaderCircle from 'virtual:icons/lucide/loader-circle';
+	import MenuIcon from 'virtual:icons/lucide/menu';
+	Chart.register(
+		Tooltip,
+		CategoryScale,
+		LineController,
+		LineElement,
+		PointElement,
+		Filler,
+		TimeScale,
+		Title,
+		LinearScale
+	);
 
 	type WorkoutExercise = RouterOutputs['workouts']['getExerciseHistory'][number];
 	type PropsType = { exercises: WorkoutExercise[] | undefined; selectedExercise: string };
@@ -79,9 +91,7 @@
 		chart = new Chart(chartCanvas, {
 			type: 'line',
 			data: {
-				labels: exercises.map((ex) =>
-					new Date(ex.workout.startedAt).toLocaleDateString(undefined, { day: '2-digit', month: '2-digit' })
-				),
+				labels: exercises.map((ex) => new Date(ex.workout.startedAt)),
 				datasets: dataValues.map((data, idx) => ({
 					label: `Set ${idx + 1}`,
 					data,
@@ -91,6 +101,14 @@
 				}))
 			},
 			options: {
+				scales: {
+					x: {
+						type: 'time',
+						time: {
+							unit: 'day'
+						}
+					}
+				},
 				plugins: {
 					legend: {
 						display: false

src/routes/workouts/[workoutId]/(components)/WorkoutExerciseCard.svelte

@@ -9,13 +9,19 @@
 		exercise: Prisma.WorkoutExerciseGetPayload<{
 			include: { sets: { include: { miniSets: true } } };
 		}>;
+		date?: Date;
 	};
-	let { exercise }: PropsType = $props();
+	let { exercise, date }: PropsType = $props();
 </script>
 
 <div class="flex flex-col gap-0.5 rounded-md border bg-card/50 p-2 backdrop-blur-sm">
-	<div class="flex items-start justify-between">
+	<div class="flex items-center justify-between">
 		<span class="truncate">{exercise.name}</span>
+		{#if date}
+			<span class="text-sm text-muted-foreground">
+				{new Date(date).toLocaleDateString()}
+			</span>
+		{/if}
 	</div>
 	<div class="flex items-center gap-0.5">
 		<span class="mr-auto text-sm lowercase text-muted-foreground">

src/routes/workouts/manage/exercises/(components)/ExerciseHistorySheet.svelte

@@ -68,7 +68,7 @@
 						})}
 					</span>
 				</div>
-				<WorkoutExerciseCard {exercise} />
+				<WorkoutExerciseCard {exercise} date={new Date(exercise.workout.startedAt)} />
 			{/each}
 			<DefaultInfiniteLoader {loadMore} identifier={workoutRunes.exerciseHistorySheetName} entityPlural="exercises" />
 		</div>