Show statistics as stacked bar charts

Also making sure we include all activities for the past three months and
cleaning up some code styling.

Author: veloek

Tevling/Pages/Statistics.razor

@@ -2,11 +2,15 @@
 <PageTitle>Tevling - Statistics</PageTitle>
 
 <h1 class="title mb-5">Statistics</h1>
-<div class="d-flex flex-wrap p-2" >
+
+<div class="d-flex flex-wrap p-2">
     <canvas id="totalDistanceChart"></canvas>
 </div>
-<div class="d-flex flex-wrap p-2" >
+
+<div class="d-flex flex-wrap p-2">
     <canvas id="totalElevationChart"></canvas>
-</div><div class="d-flex flex-wrap p-2" >
+</div>
+
+<div class="d-flex flex-wrap p-2">
     <canvas id="totalTimeChart"></canvas>
 </div>

Tevling/Pages/Statistics.razor.cs

@@ -17,7 +17,7 @@ protected override async Task OnInitializedAsync()
     {
         _athlete = await AuthenticationService.GetCurrentAthleteAsync();
 
-        ActivityFilter filter = new(_athlete.Id, false, DateTimeOffset.Now.AddMonths(-2));
+        ActivityFilter filter = new(_athlete.Id, false, DateTimeOffset.Now.AddMonths(-2).ToFirstOfTheMonth());
         _activities = await ActivityService.GetActivitiesAsync(filter);
     }
 
@@ -38,59 +38,62 @@ private Dictionary<string, float[]> GetAggregatedMeasurementData(Func<Activity,
                             .Sum(selector);
                     })
                     .ToArray()
-            );
+            )
+            .Where(d => d.Value.Length > 0)
+            .ToDictionary();
 
-        if (aggregatedData.Count != 0)
-        {
-            aggregatedData["Total"] =
-            [
-                .. aggregatedData.Values.Aggregate((sum, next) => [.. sum.Zip(next, (a, b) => a + b)]),
-            ];
-        }
+        // if (aggregatedData.Count != 0)
+        // {
+        //     aggregatedData["Total"] =
+        //     [
+        //         .. aggregatedData.Values.Aggregate((sum, next) => [.. sum.Zip(next, (a, b) => a + b)]),
+        //     ];
+        // }
 
         return aggregatedData;
     }
 
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
-        if (firstRender)
-        {
-            _module = await Js.InvokeAsync<IJSObjectReference>("import", "./Pages/Statistics.razor.js");
+        if (!firstRender)
+            return;
+
+        _module = await Js.InvokeAsync<IJSObjectReference>("import", "./Pages/Statistics.razor.js");
 
-            List<int> lastThreeMonths =
-            [
+        string[] lastThreeMonths = new int[]
+            {
                 DateTimeOffset.Now.AddMonths(-2).Month,
                 DateTimeOffset.Now.AddMonths(-1).Month,
                 DateTimeOffset.Now.Month,
-            ];
-
-            Dictionary<string, float[]> distancesLastThreeMonths =
-                GetAggregatedMeasurementData(a => a.Details.DistanceInMeters);
-            Dictionary<string, float[]> elevationLastThreeMonths =
-                GetAggregatedMeasurementData(a => a.Details.TotalElevationGain);
-            Dictionary<string, float[]> timeLastThreeMonths =
-                GetAggregatedMeasurementData(a => (float)a.Details.MovingTimeInSeconds / 3600);
+            }
+            .Select(CultureInfo.CurrentCulture.DateTimeFormat.GetMonthName)
+            .ToArray();
 
+        Dictionary<string, float[]> distanceLastThreeMonths =
+            GetAggregatedMeasurementData(a => (float)a.Details.DistanceInMeters / 1000);
+        Dictionary<string, float[]> elevationLastThreeMonths =
+            GetAggregatedMeasurementData(a => a.Details.TotalElevationGain);
+        Dictionary<string, float[]> timeLastThreeMonths =
+            GetAggregatedMeasurementData(a => (float)a.Details.MovingTimeInSeconds / 3600);
 
-            await _module.InvokeVoidAsync(
-                "drawChart",
-                distancesLastThreeMonths,
-                lastThreeMonths.Select(m => CultureInfo.CurrentCulture.DateTimeFormat.GetMonthName(m)).ToList(),
-                "totalDistanceChart",
-                "Total Distance [m]");
-            await _module.InvokeVoidAsync(
-                "drawChart",
-                elevationLastThreeMonths,
-                lastThreeMonths.Select(m => CultureInfo.CurrentCulture.DateTimeFormat.GetMonthName(m)).ToList(),
-                "totalElevationChart",
-                "Total Elevation [m]");
-            await _module.InvokeVoidAsync(
-                "drawChart",
-                timeLastThreeMonths,
-                lastThreeMonths.Select(m => CultureInfo.CurrentCulture.DateTimeFormat.GetMonthName(m)).ToList(),
-                "totalTimeChart",
-                "Total Time [h]");
-        }
+        await _module.InvokeVoidAsync(
+            "drawChart",
+            distanceLastThreeMonths,
+            lastThreeMonths,
+            "totalDistanceChart",
+            "Total Distance [km]");
+        await _module.InvokeVoidAsync(
+            "drawChart",
+            elevationLastThreeMonths,
+            lastThreeMonths,
+            "totalElevationChart",
+            "Total Elevation [m]");
+        await _module.InvokeVoidAsync(
+            "drawChart",
+            timeLastThreeMonths,
+            lastThreeMonths,
+            "totalTimeChart",
+            "Total Time [h]");
     }
 
     public async ValueTask DisposeAsync()

Tevling/Pages/Statistics.razor.js

@@ -1,38 +1,47 @@
-export function drawChart (activityData, labels, chartName, chartTitle) {
-    var ctx = document.getElementById(chartName).getContext('2d');
-    var canvas = document.getElementById(chartName);
+export function drawChart(activityData, labels, chartName, chartTitle) {
+  var ctx = document.getElementById(chartName).getContext("2d");
 
-    // Destroy existing chart instance if it exists
-    if (window[chartName] instanceof Chart) {
-        window[chartName].destroy();
-    }
+  // Destroy existing chart instance if it exists
+  if (window[chartName] instanceof Chart) {
+    window[chartName].destroy();
+  }
 
-    let datasets = [];
+  let datasets = [];
 
-    for (const [key, value] of Object.entries(activityData)) {
-        datasets.push({
-            label: key, data: value
-        });
-    }
-
-    window[chartName] = new Chart(ctx, {
-        type: 'line',
-        data: {
-            labels: labels, datasets: datasets
-        }, options: {
-            plugins: {
-                title: {
-                    display: true, text: chartTitle, color: 'rgba(54, 162, 235, 1)', font: {
-                        size: 20
-                    },
-                },
-            }, responsive: true, scales: {
-                y: {
-                    beginAtZero: true,
-
-                }
-            },
-
-        }
+  for (const [key, value] of Object.entries(activityData)) {
+    datasets.push({
+      label: key,
+      data: value,
     });
-};
+  }
+
+  window[chartName] = new Chart(ctx, {
+    type: "bar",
+    data: {
+      labels: labels,
+      datasets: datasets,
+    },
+    options: {
+      plugins: {
+        title: {
+          display: true,
+          text: chartTitle,
+          color: "rgba(54, 162, 235, 1)",
+          font: {
+            size: 20,
+          },
+        },
+      },
+      responsive: true,
+      scales: {
+        x: {
+          stacked: true,
+        },
+        y: {
+          stacked: true,
+          beginAtZero: true,
+        },
+      },
+    },
+  });
+}

Tevling/Utils/DateTimeOffsetExtensions.cs

@@ -46,4 +46,10 @@ public static bool IsSameYearUtc(this DateTimeOffset dto)
     {
         return dto.UtcDateTime.Year == DateTimeOffset.UtcNow.Year;
     }
+
+    public static DateTimeOffset ToFirstOfTheMonth(this DateTimeOffset dto)
+    {
+        DateTimeOffset firstOfTheMonth = new(dto.Year, dto.Month, 1, 0, 0, 0, dto.Offset);
+        return firstOfTheMonth;
+    }
 }