51m0n
/
EnvronmentManagement
1
0
Fork 0
Code Issues Pull Requests Projects Releases 2 Wiki Activity

Update graph formating
continuous-integration/drone/push Build is passing Details

This commit is contained in:
Simon 2021-10-03 15:09:13 +01:00
parent 6c8fdf875f
commit 51b0324e13
3 changed files with 61 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
ManagementPage/ManagementPage/Pages/DevicePage.cshtml
View File

@ -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');

3
ManagementPage/ManagementPage/Pages/UserHome.cshtml.cs
View File

@ -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();

54
ManagementPage/ManagementPage/wwwroot/js/temperature_chart.js
View File

@ -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);