Merge pull request #64 from veloek/stats-page-mobile

Stats page mobile

Author: ChrJohansen

Tevling/Pages/Statistics.razor

@@ -16,7 +16,7 @@
         throw new ArgumentOutOfRangeException();
 }
 
-<InputSelect @bind-Value="@NumberOfPeriodsToReview" @oninput="DrawChart" class="mb-2">
+<InputSelect @bind-Value="@NumberOfPeriodsToReview" @bind-Value:after="DrawChart" class="mb-2">
     @for (int i = 3; i <= 36; i += 3)
     {
         <option value="@i">@i</option>

Tevling/Pages/Statistics.razor.cs

@@ -55,6 +55,7 @@ public string IncreaseVsDecrease(string increase, string decrease)
     private Athlete _athlete = null!;
     private Activity[] _activities = [];
     private IJSObjectReference? _module;
+    private IJSObjectReference? _resizeHandler;
 
     private TimePeriod TimePeriod { get; set; } = TimePeriod.Months;
     private int NumberOfPeriodsToReview { get; set; } = 3;
@@ -191,11 +192,30 @@ .. GetAggregatedMeasurementData(
         ];
     }
 
+    private Dictionary<string, float[]> AggregateTotals(IReadOnlyList<Stats> stats)
+    {
+        float[] totalStats = new float[NumberOfPeriodsToReview];
+        foreach (Stats stat in stats)
+        {
+            for (int i = 0; i < stat.LastTimePeriodAggregate.Length; i++)
+            {
+                totalStats[i] += stat.LastTimePeriodAggregate[i];
+            }
+        }
+
+        return new Dictionary<string, float[]>
+        {
+            {
+                "Total", totalStats
+            },
+        };
+    }
+
     private async Task DrawChart()
     {
-        _module = await Js.InvokeAsync<IJSObjectReference>("import", "./Pages/Statistics.razor.js");
+        _module ??= await Js.InvokeAsync<IJSObjectReference>("import", "./Pages/Statistics.razor.js");
 
-        string[] months = TimePeriod switch
+        string[] timePeriodArray = TimePeriod switch
         {
             TimePeriod.Months => CreateMonthArray(NumberOfPeriodsToReview),
             TimePeriod.Weeks => CreateWeekArray(NumberOfPeriodsToReview),
@@ -204,44 +224,60 @@ private async Task DrawChart()
 
         await UpdateMeasurementData();
 
+        bool isMobile = await _module.InvokeAsync<bool>("isMobile");
         switch (Measurement)
         {
             case ChallengeMeasurement.Distance:
                 await _module.InvokeVoidAsync(
                     "drawChart",
-                    Distances.ToDictionary(stat => stat.Type, stat => stat.LastTimePeriodAggregate),
-                    months,
+                    isMobile
+                        ? AggregateTotals(Distances)
+                        : Distances.ToDictionary(stat => stat.Type, stat => stat.LastTimePeriodAggregate),
+                    timePeriodArray,
                     "TheChart",
                     Loc["TotalDistance"] + " [km]",
                     "km");
                 break;
             case ChallengeMeasurement.Elevation:
                 await _module.InvokeVoidAsync(
                     "drawChart",
-                    Elevations.ToDictionary(stat => stat.Type, stat => stat.LastTimePeriodAggregate),
-                    months,
+                    isMobile
+                        ? AggregateTotals(Elevations)
+                        : Elevations.ToDictionary(stat => stat.Type, stat => stat.LastTimePeriodAggregate),
+                    timePeriodArray,
                     "TheChart",
                     Loc["TotalElevation"] + " [m]",
                     "m");
                 break;
             case ChallengeMeasurement.Time:
                 await _module.InvokeVoidAsync(
                     "drawChart",
-                    Durations.ToDictionary(stat => stat.Type, stat => stat.LastTimePeriodAggregate),
-                    months,
+                    isMobile
+                        ? AggregateTotals(Durations)
+                        : Durations.ToDictionary(stat => stat.Type, stat => stat.LastTimePeriodAggregate),
+                    timePeriodArray,
                     "TheChart",
                     Loc["TotalTime"] + " [h]",
                     "h");
                 break;
             default:
                 throw new Exception("Unknown challenge measurement");
         }
+
+       _resizeHandler ??= await _module.InvokeAsync<IJSObjectReference>("enableCanvasResize", "TheChart");
     }
 
     public async ValueTask DisposeAsync()
     {
         try
         {
+            if (_resizeHandler != null)
+            {
+                await _resizeHandler.InvokeVoidAsync("dispose");
+                await _resizeHandler.DisposeAsync();
+                _resizeHandler = null;
+            }
+            
             if (_module != null)
             {
                 await _module.DisposeAsync();

Tevling/Pages/Statistics.razor.js

@@ -1,70 +1,90 @@
 export function drawChart(activityData, labels, chartName, chartTitle, unit) {
-  var ctx = document.getElementById(chartName).getContext("2d");
+    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,
-    });
-  }
+    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,
-          },
+    window[chartName] = new Chart(ctx, {
+        type: "bar",
+        data: {
+            labels: labels,
+            datasets: datasets,
         },
-        tooltip: {
-          callbacks: {
-            label: (context) => {
-              let label = context.dataset.label || "";
+        options: {
+            plugins: {
+                title: {
+                    display: true,
+                    text: chartTitle,
+                    color: "rgba(54, 162, 235, 1)",
+                    font: {
+                        size: 20,
+                    },
+                },
+                tooltip: {
+                    callbacks: {
+                        label: (context) => {
+                            let label = context.dataset.label || "";
 
-              if (label) {
-                label += ": ";
-              }
+                            if (label) {
+                                label += ": ";
+                            }
 
-              if (context.parsed.y !== null) {
-                label += Number.isInteger(context.parsed.y)
-                  ? context.parsed.y
-                  : context.parsed.y.toFixed(1);
-              }
+                            if (context.parsed.y !== null) {
+                                label += Number.isInteger(context.parsed.y)
+                                    ? context.parsed.y
+                                    : context.parsed.y.toFixed(1);
+                            }
 
-              if (unit) {
-                label += " " + unit;
-              }
+                            if (unit) {
+                                label += " " + unit;
+                            }
 
-              return label;
+                            return label;
+                        },
+                    },
+                },
+            },
+            responsive: true,
+            scales: {
+                x: {
+                    stacked: true,
+                },
+                y: {
+                    stacked: true,
+                    beginAtZero: true,
+                },
             },
-          },
-        },
-      },
-      responsive: true,
-      scales: {
-        x: {
-          stacked: true,
-        },
-        y: {
-          stacked: true,
-          beginAtZero: true,
         },
-      },
-    },
-  });
+    });
 }
+
+export function isMobile() {
+    return window.matchMedia('(max-width: 576px)').matches;
+}
+
+export function enableCanvasResize(chartName) {
+    // Add event listener for window resize
+    const handleCanvasResize = () => {
+        const canvas = document.getElementById(chartName);
+        if (canvas && window[chartName] instanceof Chart) {
+            window[chartName].resize(); // Resize Chart.js instance on canvas resize
+        }
+    }
+    window.addEventListener('resize', handleCanvasResize);
+
+    return {
+        dispose: () => window.removeEventListener('resize', handleCanvasResize)
+    };
+}
+