From 3830d9ee64fc66106b43d85e83003c2cd9095a69 Mon Sep 17 00:00:00 2001
From: Li <ldmorrow@outlook.com>
Date: Sat, 29 Jun 2024 20:07:49 +1000
Subject: [PATCH] Ensure stat graphs take up entire width

---
 .../Presentation/StatGraphCardContent.razor   | 28 +++++++++++++++++--
 LiftLog.Ui/wwwroot/app-utils.js               |  4 +++
 2 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/LiftLog.Ui/Shared/Presentation/StatGraphCardContent.razor b/LiftLog.Ui/Shared/Presentation/StatGraphCardContent.razor
index 37808c03..2b4d376f 100644
--- a/LiftLog.Ui/Shared/Presentation/StatGraphCardContent.razor
+++ b/LiftLog.Ui/Shared/Presentation/StatGraphCardContent.razor
@@ -6,7 +6,9 @@
 @implements IDisposable
 
 @inject IThemeProvider ThemeProvider
-<div class="flex flex-col gap-2 items-start">
+@inject IJSRuntime JSRuntime
+
+<div class="flex flex-col gap-2 items-start" @ref="cardContent" >
 @if (ShowTitle)
 {
 
@@ -14,7 +16,7 @@
 }
 @if (IsLoading)
 {
-    <div class="flex flex-col justify-center h-full gap-4 text-on-surface">
+    <div class="flex flex-col justify-center h-full gap-4 text-on-surface mx-auto">
         <div>
             <md-circular-progress aria-label="Stats progress" indeterminate four-color></md-circular-progress>
         </div>
@@ -29,7 +31,10 @@ else
         TItem="TimeTrackedStatistic"
         Title=""
         Options="options"
-        XAxisType="XAxisType.Datetime">
+        Width="@width"
+        Height="230"
+        XAxisType="XAxisType.Datetime"
+        @ref="chart">
 
         @foreach(var statistics in Statistics)
         {
@@ -66,6 +71,12 @@ else
 
     private bool _disposed = false;
 
+    private ElementReference cardContent;
+    private ApexChart<TimeTrackedStatistic> chart = null!;
+
+    private string width = "100%";
+
+
 
     private ApexChartOptions<TimeTrackedStatistic> options = null!;
 
@@ -191,6 +202,17 @@ else
         });
     }
 
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            var cardContentWidth = await JSRuntime.InvokeAsync<double>("AppUtils.getWidth", cardContent);
+            width = $"{cardContentWidth}px";
+            await InvokeAsync(StateHasChanged);
+        }
+        await base.OnAfterRenderAsync(firstRender);
+    }
+
     private string GetColorString(uint color) => "#" + color.ToString("X").Substring(2, 6);
 
     private string WeightSuffix => UseImperial ? " lbs" : " kg";
diff --git a/LiftLog.Ui/wwwroot/app-utils.js b/LiftLog.Ui/wwwroot/app-utils.js
index 3b8fd348..c0ba8eb9 100644
--- a/LiftLog.Ui/wwwroot/app-utils.js
+++ b/LiftLog.Ui/wwwroot/app-utils.js
@@ -62,6 +62,10 @@ AppUtils.getValue = function (element) {
     return element.value;
 }
 
+AppUtils.getWidth = function (element) {
+    return element?.offsetWidth ?? 0;
+}
+
 
 AppUtils.isOpen = function (element) {
     return element.open;