Update graph formating

ManagementPage/ManagementPage/Pages/DevicePage.cshtml

@@ -8,10 +8,10 @@
     <h2>@Model.device.Name</h2>
     <h4>Current Conditions</h4>
     <div>
-        Temp: @Model.data.LastOrDefault()?.Temperature.ToString("N1")
+        Temp: @Model.data.LastOrDefault()?.Temperature.ToString("N1")°C
     </div>
     <div>
-        Humidity: @Model.data.LastOrDefault()?.Humidity.ToString("N1")
+        Humidity: @Model.data.LastOrDefault()?.Humidity.ToString("N1")%
     </div>
 </div>
 <div >
@@ -19,6 +19,8 @@
 </div>
 
 <script src="~/lib/chart.js/dist/chart.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/moment"></script>
+<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment"></script>
 <script src="~/js/temperature_chart.js" asp-append-version="true"></script>
 <script>
     var ctx = document.getElementById('tempChart');

ManagementPage/ManagementPage/Pages/UserHome.cshtml.cs

@@ -44,6 +44,9 @@ namespace ManagementPage.Pages
             var id = await binder.GetLocalAccount(User.FindFirstValue(ClaimTypes.NameIdentifier));
             name = User.FindFirstValue(ClaimTypes.GivenName);
 
+
+            _dbClient.DeviceCollection.AsQueryable().Where(s => id.Devices.Contains(s._id)).ToArray();
+
             using var cursor = await _dbClient.DeviceCollection.FindAsync(new BsonDocument());
             data = cursor.ToList();
 

ManagementPage/ManagementPage/wwwroot/js/temperature_chart.js

@@ -25,6 +25,60 @@ function CreateChart(ctx, temp, humidity) {
         type: 'line',
         data: data,
         options: { maintainAspectRatio: true }
+        options: {
+            maintainAspectRatio: true,
+            scales: {
+                y: {
+                    title: {
+                        display: true,
+                        text: "Temperature",
+                    },
+                    ticks: {
+                        callback: function (value, index, values) {
+                            return value + '°C';
+                        }
+                    }
+                },
+                humid: {
+                    title: {
+                        display: true,
+                        text: "Humidity",
+                    },
+                    position: "right",
+                    ticks: {
+                        callback: function (value, index, values) {
+                            return value + '%';
+                        }
+                    }
+                },
+                x: {
+                    title: {
+                        display: true,
+                        text: "Time",
+                    },
+                    type: 'time',
+                    time: {
+                        unit: 'minute',
+                        displayFormats: {
+                            minute: "D MMM  HH:mm"
+                        },
+                    },
+                    ticks: {
+                        autoSkip: true,
+                        maxTicksLimit: 25
+                    }
+                }
+            },
+            plugins: {
+                legend: {
+                    labels: {
+                        font: {
+                            family: "'Quicksand', serif"
+                        }
+                    }
+                }
+            }
+        }
     };
 
     return tempChart = new Chart(ctx, config);