|
|
|
@ -63,6 +63,11 @@
|
|
|
|
|
font-size: 1.1em; |
|
|
|
|
margin: 2px 5px; |
|
|
|
|
} |
|
|
|
|
h1 small { |
|
|
|
|
font-size: 0.8rem; |
|
|
|
|
margin: 0 10px; |
|
|
|
|
color: #666; |
|
|
|
|
} |
|
|
|
|
</style> |
|
|
|
|
</head> |
|
|
|
|
|
|
|
|
@ -75,6 +80,8 @@
|
|
|
|
|
</div> |
|
|
|
|
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> |
|
|
|
|
<script src="http://code.highcharts.com/highcharts.js"></script> |
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min.js"></script> |
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.14/moment-timezone.min.js"></script> |
|
|
|
|
<script src="https://d3js.org/d3.v4.js"></script> |
|
|
|
|
<script> |
|
|
|
|
|
|
|
|
@ -150,8 +157,9 @@ function displayGraph(id, data, width, height, interpolation) {
|
|
|
|
|
var addEleToDashBoard = function(item) { |
|
|
|
|
var data = item['data']; |
|
|
|
|
var xid = item['device'].replace(/:/g, '_') |
|
|
|
|
var tmsp = moment.tz(item['timestamp'], "utc").fromNow() |
|
|
|
|
var str = `<div class="pure-u-md-1-2 dash" id="${xid}">` + |
|
|
|
|
`<h1>${item['info']['name']}</h1>` + |
|
|
|
|
`<h1>${item['info']['name']}<small>${tmsp}</small></h1>` + |
|
|
|
|
`<div class="dash-container">` + |
|
|
|
|
`<div class="dash-one temperature"><h2>Temp</h2><p>${data['temperature']}</p> <div class="graph" id="${xid}-temperature"></div></div>` + |
|
|
|
|
`<div class="dash-one moisture"><h2>Moisture</h2><p>${data['moisture']}</p> <div class="graph" id="${xid}-moisture"></div></div>` + |
|
|
|
|