@page "/graph" @using Public_API.Shared.Models @inject HttpClient http <h3>Graph</h3> <!-- TODO : List of sensors here--> <label for="sensor">Sensor: </label> @if (sensors == null) { <p><em>Loading...</em></p> } else { <select name="sensor" @onchange="@OnSensorSelectChange"> <option disabled selected> Select...</option> @foreach (Sensor s in sensors) { <option value="@s.sensorID">@s.friendlyName</option> } </select> } <!-- TODO : Show data for each sensor here --> @if (@targetSensor != null) { <h3>Sensor Selected: @targetSensor.friendlyName</h3> } <!-- 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"); } 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() { 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; } }