Fitness Tracker Dashboard

A fitness tracker dashboard should be built around raw workout data, not around chart-ready numbers. A common mistake is saving weekly totals, chart labels, progress percentages, and summary values directly as primary state. This makes the app fragile because every edit, delete, or date change requires manually updating multiple derived values. Eventually, the dashboard shows inconsistent numbers: the workout list says one thing, while the chart says another.

Problematic approach:

          const dashboardState = reactive({
            workouts: [],
            weeklyVolume: 12400,
            totalWorkouts: 8,
            chartLabels: ["Mon", "Tue", "Wed", "Thu", "Fri"],
            chartValues: [1200, 2600, 0, 4300, 4300]
          });

          function addWorkout(workout) {
            dashboardState.workouts.push(workout);
            dashboardState.totalWorkouts += 1;
            dashboardState.weeklyVolume += workout.weight * workout.reps;
            dashboardState.chartValues[workout.dayIndex] += workout.weight * workout.reps;
          }

This looks efficient at first, but it creates multiple places where the same truth is stored. If a user edits a workout later, you must remember to reverse old values and apply new ones correctly.

Better approach:

          const workouts = ref([
            {
              id: "workout-1",
              exerciseId: "bench-press",
              date: "2026-06-17",
              sets: [
                { weight: 60, reps: 10 },
                { weight: 65, reps: 8 }
              ]
            }
          ]);

          const weeklyVolume = computed(() => {
            return workouts.value.reduce((total, workout) => {
              const workoutVolume = workout.sets.reduce((sum, set) => {
                return sum + set.weight * set.reps;
              }, 0);

              return total + workoutVolume;
            }, 0);
          });

Chart dataset example:

          const weeklyChartData = computed(() => {
            const days = createEmptyWeek();

            workouts.value.forEach((workout) => {
              const dayKey = getDayKey(workout.date);

              days[dayKey].volume += workout.sets.reduce((sum, set) => {
                return sum + set.weight * set.reps;
              }, 0);
            });

            return Object.values(days);
          });

Pay attention to: Store raw workout entries as the source of truth. Use computed properties and composables to derive totals, chart datasets, goal progress, calendar markers, and dashboard summaries.

Fitness dashboards often require many calculations: total volume, average workout duration, completion rate, streaks, weekly trends, personal records, and goal progress. A beginner mistake is placing this logic directly inside the template. The UI becomes difficult to read, hard to test, and easy to break when the data model changes.

Problematic code:

          <template>
            <div class="card">
              <p>
                Weekly volume:
                {{
                  workouts
                    .filter((workout) => isThisWeek(workout.date))
                    .reduce((total, workout) => {
                      return total + workout.sets.reduce((sum, set) => {
                        return sum + set.weight * set.reps;
                      }, 0);
                    }, 0)
                }}
              </p>
            </div>
          </template>

This template is doing too much. It mixes rendering with filtering, aggregation, and domain-specific fitness calculations.

Better approach:

          export function useWorkoutAnalytics(workouts) {
            const workoutsThisWeek = computed(() => {
              return workouts.value.filter((workout) => {
                return isThisWeek(workout.date);
              });
            });

            const weeklyVolume = computed(() => {
              return workoutsThisWeek.value.reduce((total, workout) => {
                return total + calculateWorkoutVolume(workout);
              }, 0);
            });

            const completedWorkoutCount = computed(() => {
              return workoutsThisWeek.value.length;
            });

            return {
              workoutsThisWeek,
              weeklyVolume,
              completedWorkoutCount
            };
          }

Cleaner component usage:

          <script setup>
          const { weeklyVolume, completedWorkoutCount } = useWorkoutAnalytics(workouts);
          </script>

          <template>
            <DashboardCard title="Weekly volume">
              {{ weeklyVolume }} kg
            </DashboardCard>

            <DashboardCard title="Workouts completed">
              {{ completedWorkoutCount }}
            </DashboardCard>
          </template>

Pay attention to: Keep templates focused on presentation. Put filtering, aggregation, goal progress, and chart preparation into composables or computed properties.

Charts are one of the most important parts of a fitness dashboard, but they can also become a performance problem. A common mistake is recreating the entire chart every time a workout is added, edited, or filtered. This may cause flickering, memory leaks, slow interactions, and broken chart animations.

Problematic approach:

          watch(workouts, () => {
            const chart = new Chart(chartCanvas.value, {
              type: "line",
              data: {
                labels: workouts.value.map((workout) => workout.date),
                datasets: [
                  {
                    label: "Workout Volume",
                    data: workouts.value.map((workout) => calculateWorkoutVolume(workout))
                  }
                ]
              }
            });
          }, { deep: true });

This creates a new chart every time the watcher runs. The old chart is not destroyed, and the component may leak canvas-related resources.

Better approach:

          const chartInstance = shallowRef(null);

          const chartData = computed(() => {
            return {
              labels: weeklyChartData.value.map((item) => item.label),
              datasets: [
                {
                  label: "Workout Volume",
                  data: weeklyChartData.value.map((item) => item.volume)
                }
              ]
            };
          });

          onMounted(() => {
            chartInstance.value = new Chart(chartCanvas.value, {
              type: "line",
              data: chartData.value,
              options: {
                responsive: true,
                maintainAspectRatio: false
              }
            });
          });

          watch(chartData, (nextChartData) => {
            if (!chartInstance.value) return;

            chartInstance.value.data = nextChartData;
            chartInstance.value.update();
          });

          onUnmounted(() => {
            chartInstance.value?.destroy();
          });

Pay attention to: Create the chart once, update its data deliberately, and destroy it when the component unmounts. For large datasets, precompute chart data before passing it into the chart component.

Calendar views, weekly summaries, streaks, and progress trends all depend on reliable dates. A common mistake is saving dates in mixed formats such as local strings, timestamps, browser-formatted dates, and manually typed values. This leads to broken sorting, incorrect week grouping, and confusing bugs around time zones.

Problematic code:

          const workout = {
            id: crypto.randomUUID(),
            title: "Leg day",
            date: new Date().toString(),
            createdAt: Date.now(),
            displayDate: "17/06/2026"
          };

This object stores the same time concept in several incompatible ways. Later, grouping workouts by day or exporting data becomes harder than necessary.

Better approach:

          const workout = {
            id: crypto.randomUUID(),
            title: "Leg day",
            date: "2026-06-17",
            createdAt: new Date().toISOString(),
            updatedAt: new Date().toISOString()
          };

Calendar grouping example:

          const workoutsByDate = computed(() => {
            return workouts.value.reduce((groups, workout) => {
              if (!groups[workout.date]) {
                groups[workout.date] = [];
              }

              groups[workout.date].push(workout);

              return groups;
            }, {});
          });

Sorting example:

          const sortedWorkouts = computed(() => {
            return [...workouts.value].sort((a, b) => {
              return b.date.localeCompare(a.date);
            });
          });

Pay attention to: Use one consistent storage format for workout dates. For daily fitness records, an ISO-like date string such as YYYY-MM-DD is usually easier to group, sort, display, and export.

Export functionality is part of the product requirements, not a bonus button at the end. If your data model is inconsistent, export becomes painful. A common mistake is generating CSV directly from whatever happens to be visible on the screen. That creates incomplete exports, missing hidden fields, and formats that are hard to reuse later.

Problematic approach:

          function exportVisibleRows() {
            const rows = document.querySelectorAll(".workout-row");

            const csv = [...rows].map((row) => {
              return row.innerText.split("\n").join(",");
            }).join("\n");

            downloadFile(csv, "workouts.csv");
          }

This exports UI text instead of structured data. It may include labels, formatted values, hidden characters, or translated text instead of clean workout records.

Better approach:

          function createWorkoutExportRows(workouts) {
            return workouts.map((workout) => {
              return {
                id: workout.id,
                date: workout.date,
                exercise: workout.exerciseName,
                sets: workout.sets.length,
                totalReps: workout.sets.reduce((sum, set) => sum + set.reps, 0),
                totalVolume: calculateWorkoutVolume(workout),
                notes: workout.notes || ""
              };
            });
          }

          function exportWorkoutsAsJson(workouts) {
            const json = JSON.stringify(createWorkoutExportRows(workouts), null, 2);

            downloadFile(json, "workout-history.json", "application/json");
          }

CSV export example:

          function exportWorkoutsAsCsv(workouts) {
            const rows = createWorkoutExportRows(workouts);
            const headers = ["id", "date", "exercise", "sets", "totalReps", "totalVolume", "notes"];

            const csv = [
              headers.join(","),
              ...rows.map((row) => {
                return headers.map((header) => {
                  return JSON.stringify(row[header] ?? "");
                }).join(",");
              })
            ].join("\n");

            downloadFile(csv, "workout-history.csv", "text/csv");
          }

Pay attention to: Export from structured source data, not from rendered DOM. Keep export logic isolated so you can support CSV, JSON, filters, date ranges, and future backend migration without rewriting dashboard components.