Begin Graphs

Public API/Client/Pages/Graph.razor

@@ -14,7 +14,7 @@ else
 {
 
     <select name="sensor" @onchange="@OnSensorSelectChange">
-        <option disabled>Select...</option>
+        <option disabled selected> Select...</option>
         @foreach (Sensor s in sensors)
         {
             <option value="@s.sensorID">@s.friendlyName</option>
@@ -22,27 +22,126 @@ else
     </select>
 }
 
-
 <!-- TODO : Show data for each sensor here -->
-@if (targetSensor != null) {
+@if (@targetSensor != null)
+{
     <h3>Sensor Selected: @targetSensor.friendlyName</h3>
-
-    <!-- TODO Graphs here! -->
-
-
 }
 
+<!-- TODO Graphs here! -->
+@{<LineChart @ref="lineChart" TItem="decimal?" />}
+
 @code {
     private Sensor[] sensors;
     private Sensor targetSensor;
 
+    LineChart<decimal?> lineChart;
+    private vw_SensorData[] sensorData;
+
     protected override async Task OnInitializedAsync()
     {
         sensors = await http.GetFromJsonAsync<Sensor[]>("api/GetSensorList");
     }
 
-    public async Task OnSensorSelectChange(ChangeEventArgs e)
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            //await HandleChartRedraw(lineChart, new List<string>(), new LineChartDataset<decimal?>(), new LineChartDataset<decimal?>());
+        }
+    }
+
+    async void OnSensorSelectChange(ChangeEventArgs e)
+    {
+        await getSensor(e.Value.ToString());
+        await getSensorData(e.Value.ToString());
+
+        await HandleChartRedraw(lineChart, generateLabels(),
+            GetLineChartDataset(),
+            GetLineChartDatasetHumidity()
+        );
+
+        StateHasChanged();
+    }
+
+    async Task HandleChartRedraw(LineChart<decimal?> chart, List<string> labels,
+        LineChartDataset<decimal?> dataset,
+        LineChartDataset<decimal?> dataset2)
+    {
+        await chart.Clear();
+        await chart.AddLabelsDatasetsAndUpdate(labels, dataset);
+        await chart.AddDatasetsAndUpdate(dataset2);
+    }
+
+    LineChartDataset<decimal?> GetLineChartDataset()
+    {
+        return new LineChartDataset<decimal?>
+        {
+            Label = "Temperature",
+            Data = extractTemperature(),
+            BorderColor = new List<string> { ChartColor.FromRgba(255, 99, 132, 1f) },
+            Fill = false,
+            PointRadius = 2,
+            BorderDash = new List<int> { }
+        };
+    }
+
+    LineChartDataset<decimal?> GetLineChartDatasetHumidity()
+    {
+        return new LineChartDataset<decimal?>
+        {
+            Label = "Humidity",
+            Data = extractHumidity(),
+            BorderColor = new List<string> { ChartColor.FromRgba(99, 132, 99, 1f) },
+            Fill = false,
+            PointRadius = 2,
+            BorderDash = new List<int> { }
+        };
+    }
+
+    protected async Task getSensor(string sensorID)
+    {
+        targetSensor = await http.GetFromJsonAsync<Sensor>("api/GetSensorByID/" + sensorID);
+    }
+
+    protected async Task getSensorData(string sensorID)
+    {
+        sensorData = await http.GetFromJsonAsync<vw_SensorData[]>("api/LatestData/" + sensorID);
+    }
+
+    private List<decimal?> extractTemperature()
+    {
+        List<decimal?> l = new List<decimal?>();
+
+        foreach (vw_SensorData data in sensorData)
+        {
+            l.Add(data.temperature);
+        }
+
+        return l;
+    }
+
+    private List<decimal?> extractHumidity()
     {
-        targetSensor = await http.GetFromJsonAsync<Sensor>("api/GetSensorByID/" + e.Value.ToString());
+        List<decimal?> l = new List<decimal?>();
+
+        foreach (vw_SensorData data in sensorData)
+        {
+            l.Add(data.humidity);
+        }
+
+        return l;
+    }
+
+    private List<string> generateLabels()
+    {
+        List<string> labels = new List<string>();
+
+        foreach (vw_SensorData data in sensorData)
+        {
+            labels.Add(data.dateTime.ToShortDateString() + " " + data.dateTime.ToShortTimeString());
+        }
+
+        return labels;
     }
 }
\ No newline at end of file

Public API/Client/Public_API.Client.csproj

@@ -8,6 +8,7 @@
   <ItemGroup>
     <PackageReference Include="Blazorise" Version="0.9.5.4" />
     <PackageReference Include="Blazorise.Bootstrap" Version="0.9.5.4" />
+    <PackageReference Include="Blazorise.Charts" Version="0.9.5.4" />
     <PackageReference Include="Blazorise.Icons.FontAwesome" Version="0.9.5.4" />
     <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="5.0.13" />
     <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="5.0.13" PrivateAssets="all" />

Public API/Client/_Imports.razor

@@ -8,4 +8,5 @@
 @using Microsoft.JSInterop
 @using Public_API.Client
 @using Public_API.Client.Shared
-@using Blazorise
\ No newline at end of file
+@using Blazorise
+@using Blazorise.Charts
\ No newline at end of file

Public API/Client/wwwroot/index.html

@@ -22,6 +22,7 @@
     <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
     <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
 
     <div id="blazor-error-ui">
         An unhandled error has occurred.

Public API/Server/Controllers/APIController.cs

@@ -78,7 +78,13 @@ namespace Public_API.Server.Controllers
         [HttpGet("LatestData")]
         public IEnumerable<vw_SensorData> GetLatestSensorData()
         {
-            return db.vw_SensorData.OrderByDescending(d => d.dateTime).Take(100).ToArray();
+            return db.vw_SensorData.OrderByDescending(d => d.dateTime).Take(250).ToArray();
+        }
+
+        [HttpGet("LatestData/{sensorID}")]
+        public IEnumerable<vw_SensorData> GetLatestSensorData(int SensorID)
+        {
+            return db.vw_SensorData.Where(d => d.sensorID.Equals(SensorID)).OrderByDescending(d => d.dateTime).Take(100).ToArray();
         }
 
         [HttpGet("GetSensorList")]

Public API/Server/Controllers/FrontendController.cs

-using Microsoft.AspNetCore.Http;
-using Microsoft.AspNetCore.Mvc;
-using Public_API.Server.DAL;
-using Public_API.Shared.Models;
-using System;
-using System.Collections.Generic;
-using System.Linq;
-using System.Threading.Tasks;
-
-namespace Public_API.Server.Controllers
-{
-    [Route("[controller]")]
-    [ApiController]
-    public class FrontendController : ControllerBase
-    {    }
-}