Ensure stat graphs take up entire width

LiamMorrow · Jun 29, 2024 · 3830d9e · 3830d9e
1 parent 68ced3d
commit 3830d9e
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 3 deletions.
diff --git a/LiftLog.Ui/Shared/Presentation/StatGraphCardContent.razor b/LiftLog.Ui/Shared/Presentation/StatGraphCardContent.razor
@@ -6,15 +6,17 @@
 @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)
 {
 
     <ItemTitle Title="@(Title)" />
 }
 @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
@@ -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;