refact: web: charts (#227)

web/src/ui/components/AppCard.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div class="bg-white border border-gray-200 mb-4 rounded-md">
+    <slot />
+  </div>
+</template>
+
+<style scoped></style>

web/src/ui/components/AppList.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { vInfiniteScroll } from '@vueuse/components'
 import { ArrowPathIcon } from '@heroicons/vue/24/outline'
+import AppCard from '@/ui/components/AppCard.vue'
 
 defineProps<{
   canFetch?: boolean
@@ -14,17 +15,19 @@ const onFetch = async () => {
 </script>
 
 <template>
-  <ul role="list">
-    <slot />
-    <li v-if="canFetch" v-infinite-scroll="onFetch" class="fetching">
-      <ArrowPathIcon class="size-7 animate-spin" />
-    </li>
-  </ul>
+  <AppCard>
+    <ul role="list">
+      <slot />
+      <li v-if="canFetch" v-infinite-scroll="onFetch" class="fetching">
+        <ArrowPathIcon class="size-7 animate-spin" />
+      </li>
+    </ul>
+  </AppCard>
 </template>
 
 <style scoped>
 ul {
-  @apply divide-y divide-gray-100 bg-white border border-gray-200 mb-4 rounded-md;
+  @apply divide-y divide-gray-100;
 
   li.fetching {
     @apply h-16 flex justify-center items-center text-gray-800;

web/src/ui/components/CardWorkout.vue

@@ -12,6 +12,7 @@ import { deleteWorkout, postWorkoutComment } from '@/http/requests.ts'
 import CardWorkoutComment from '@/ui/components/CardWorkoutComment.vue'
 import CardWorkoutExercise from '@/ui/components/CardWorkoutExercise.vue'
 import { type Workout, type WorkoutComment } from '@/proto/api/v1/workout_service_pb'
+import AppCard from '@/ui/components/AppCard.vue'
 
 const { input, textarea } = useTextareaAutosize()
 const authStore = useAuthStore()
@@ -58,10 +59,7 @@ const formatComment = computed(() => {
 </script>
 
 <template>
-  <div
-    v-if="!workoutDeleted"
-    class="divide-y divide-gray-100 bg-white rounded-md border border-gray-200 mb-4"
-  >
+  <AppCard v-if="!workoutDeleted" class="divide-y divide-gray-100">
     <div class="px-4 py-4">
       <div class="flex items-center justify-between">
         <div class="flex items-center">
@@ -112,5 +110,5 @@ const formatComment = computed(() => {
         <AppButton type="submit" colour="primary"> Comment </AppButton>
       </form>
     </div>
-  </div>
+  </AppCard>
 </template>

web/src/ui/components/LineChart.vue

@@ -7,6 +7,7 @@ import { formatToShortDateTime } from '@/utils/datetime.ts'
 import {
   CategoryScale,
   Chart as ChartJS,
+  Filler,
   Legend,
   LinearScale,
   LineElement,
@@ -15,20 +16,29 @@ import {
   Tooltip,
 } from 'chart.js'
 
-ChartJS.register(Title, Tooltip, Legend, LineElement, CategoryScale, LinearScale, PointElement)
+ChartJS.register(
+  Title,
+  Tooltip,
+  Legend,
+  LineElement,
+  CategoryScale,
+  LinearScale,
+  Filler,
+  PointElement,
+)
 
 const props = defineProps<{
   sets: Set[]
 }>()
 
 const options = {
-  maintainAspectRatio: false,
+  maintainAspectRatio: true,
   responsive: true,
   scales: {
     x: {
       grid: {
         display: false,
-        drawBorder: false,
+        drawBorder: true,
       },
       ticks: {
         display: false,
@@ -43,7 +53,7 @@ const options = {
         drawBorder: false,
       },
       ticks: {
-        display: false,
+        display: true,
       },
       title: {
         display: false,
@@ -52,30 +62,60 @@ const options = {
   },
 }
 
+const calc1RM = (weight: number, reps: number): number => {
+  if (reps === 1) {
+    return weight
+  }
+
+  return weight * (1 + reps / 30)
+}
+
 const sets = computed(() => [...props.sets].reverse())
 
 const data = computed(() => {
   const labels: string[] = []
   const weights: number[] = []
   const reps: number[] = []
+  const oneRM: number[] = []
 
   sets.value.map((set) => {
     labels.push(formatToShortDateTime(set.metadata?.createdAt))
     weights.push(set.weight)
     reps.push(set.reps)
+    oneRM.push(calc1RM(set.weight, set.reps))
   })
 
   return {
     datasets: [
       {
-        backgroundColor: '#000000',
+        borderColor: '#818cf8',
+        borderWidth: 1,
+        backgroundColor: '#818cf8',
+        data: reps,
+        label: 'Reps',
+        tension: 0.4,
+        pointRadius: 0,
+        fill: true,
+      },
+      {
+        borderColor: '#6366f1',
+        borderWidth: 1,
+        backgroundColor: '#6366f1',
         data: weights,
         label: 'Weight',
+        tension: 0.4,
+        pointRadius: 0,
+        fill: true,
       },
       {
+        borderColor: '#4f46e5',
+        borderWidth: 1,
         backgroundColor: '#4f46e5',
-        data: reps,
-        label: 'Reps',
+        data: oneRM,
+        label: '1RM',
+        tension: 0.4,
+        pointRadius: 0,
+        fill: true,
       },
     ],
     labels: labels,

web/src/ui/exercises/ViewExercise.vue

@@ -14,6 +14,7 @@ import AppListItemLink from '@/ui/components/AppListItemLink.vue'
 import { deleteExercise, getExercise, listSets } from '@/http/requests'
 import { ChevronRightIcon, TrashIcon } from '@heroicons/vue/24/outline'
 import usePagination from '@/utils/usePagination'
+import AppCard from '@/ui/components/AppCard.vue'
 
 const sets = ref([] as Set[])
 const exercise = ref<Exercise>()
@@ -49,6 +50,17 @@ const onDeleteExercise = async () => {
     await router.push('/exercises')
   }
 }
+
+const downSample = (data: Set[], sampleSize: number): Set[] => {
+  const sampled: Set[] = []
+  const step = Math.ceil(data.length / sampleSize)
+
+  for (let i = 0; i < data.length; i += step) {
+    sampled.push(data[i])
+  }
+
+  return sampled
+}
 </script>
 
 <template>
@@ -62,9 +74,9 @@ const onDeleteExercise = async () => {
   </div>
 
   <h6>Chart</h6>
-  <div class="bg-white border border-gray-200 px-4 py-4 lg:rounded-md">
-    <LineChart :sets="sets" />
-  </div>
+  <AppCard class="p-2">
+    <LineChart :sets="downSample(sets, 50)" />
+  </AppCard>
 
   <h6 class="mt-8">Sets</h6>
   <AppList :can-fetch="hasMorePages" @fetch="fetchSets">