You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
191 lines
6.2 KiB
191 lines
6.2 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
|
|
<script src="lib/moment.min.js"></script>
|
|
<link href="vis/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
|
|
<script src="vis/vis.js"></script>
|
|
|
|
<!-- jQuery library -->
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
|
</head>
|
|
<div id="heartRateGraph"></div>
|
|
|
|
<body>
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-4 shadow-lg p-3 bg-white rounded">
|
|
<label>Heart Rate JSON Files</label>
|
|
<input type="file" id="files" name="files[]" multiple />
|
|
<output id="list"></output>
|
|
</div>
|
|
<div class="col-4 shadow-lg p-3 bg-white rounded">
|
|
<label>Activity Files</label>
|
|
<input type="file" id="actFiles" name="files[]" multiple />
|
|
<output id="actList"></output>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
</div>
|
|
</div>
|
|
</body>
|
|
|
|
|
|
<footer>
|
|
<script>
|
|
|
|
function generateHeartRateGraph(jsonFiles)
|
|
{
|
|
var items = [];
|
|
|
|
for(var i = 0; i < jsonFiles.length; i++)
|
|
{
|
|
console.log(jsonFiles[i].length);
|
|
for(var j = 0; j < jsonFiles[i].length; j++)
|
|
{
|
|
var localTime = new Date(jsonFiles[i][j].dateTime);
|
|
items.push({y:jsonFiles[i][j].value.bpm, x:localTime.setHours(localTime.getHours() - 4)});
|
|
}
|
|
}
|
|
console.log("Finished Loading Heart Rate Data Into Graph");
|
|
console.log(items);
|
|
var dataset = new vis.DataSet(items);
|
|
var options = {
|
|
dataAxis: {
|
|
showMinorLabels: true,
|
|
left: {
|
|
title: {
|
|
text: "Heart Rate"
|
|
}
|
|
}
|
|
}
|
|
};
|
|
var container = document.getElementById("heartRateGraph");
|
|
var graph2d = new vis.Graph2d(container, dataset, options);
|
|
graph2d.on('rangechanged', graphMoved);
|
|
graphsOnPage.push(graph2d);
|
|
}
|
|
|
|
|
|
function generateTimeline(jsonFiles)
|
|
{
|
|
var items = [];
|
|
|
|
for(var i = 0; i < jsonFiles.length; i++)
|
|
{
|
|
for(var j = 0; j < jsonFiles[i].length; j++)
|
|
{
|
|
if(jsonFiles[i][j].hasOwnProperty("dateOfSleep"))
|
|
{
|
|
var startT = new Date(jsonFiles[i][j].startTime);
|
|
var finishT = new Date(jsonFiles[i][j].endTime);
|
|
items.push({content: "Sleep",
|
|
start:startT, end:finishT, group:0});
|
|
}
|
|
else
|
|
{
|
|
var localTime = new Date(jsonFiles[i][j].startTime);
|
|
var timeAdjusted = localTime.setHours(localTime.getHours() - 4);
|
|
var timeFinish = localTime.setMilliseconds(localTime.getMilliseconds() + jsonFiles[i][j].activeDuration);
|
|
items.push({content: jsonFiles[i][j].activityName,
|
|
start:timeAdjusted, end:timeFinish, group:0});
|
|
}
|
|
}
|
|
}
|
|
console.log("Finished Loading Heart Rate Data Into Graph");
|
|
|
|
var dataset = new vis.DataSet(items);
|
|
var options =
|
|
{
|
|
margin:
|
|
{
|
|
item:20,
|
|
axis:40
|
|
},
|
|
showCurrentTime: false
|
|
};
|
|
|
|
var grpups = new vis.DataSet([
|
|
{id: 0, content:"Activity", value:0}
|
|
]);
|
|
|
|
var container = document.getElementById("heartRateGraph");
|
|
var graph2d = new vis.Timeline(container, dataset, options);
|
|
graph2d.setGroups(grpups);
|
|
graph2d.on('rangechanged', graphMoved);
|
|
graphsOnPage.push(graph2d);
|
|
}
|
|
|
|
var graphsOnPage = [];
|
|
|
|
|
|
function graphMoved(moveEvent)
|
|
{
|
|
graphsOnPage.forEach((g)=>
|
|
{
|
|
g.setWindow(moveEvent.start, moveEvent.end);
|
|
})
|
|
}
|
|
|
|
function fetchFilesAsJSONArray(evt)
|
|
{
|
|
return new Promise((res, rej)=>
|
|
{
|
|
var files = evt.target.files; // FileList object
|
|
|
|
var promises = [];
|
|
|
|
for (var i = 0, f; f = files[i]; i++)
|
|
{
|
|
promises.push(new Promise((resolve, reject)=>
|
|
{
|
|
var reader = new FileReader();
|
|
|
|
reader.onload = function(e)
|
|
{
|
|
resolve(JSON.parse(reader.result));
|
|
};
|
|
|
|
reader.onerror= function(e)
|
|
{
|
|
reject(e);
|
|
};
|
|
reader.readAsBinaryString(files[i]);
|
|
}));
|
|
}
|
|
Promise.all(promises).then((data)=>
|
|
{
|
|
res(data);
|
|
}).catch((error)=>
|
|
{
|
|
console.log(error);
|
|
console.log("Unable to Load Data");
|
|
rej(error);
|
|
})
|
|
});
|
|
}
|
|
|
|
|
|
function handleFileSelect(evt)
|
|
{
|
|
fetchFilesAsJSONArray(evt).then((data)=>
|
|
{
|
|
generateHeartRateGraph(data);
|
|
})
|
|
}
|
|
document.getElementById('files').addEventListener('change', handleFileSelect, false);
|
|
|
|
|
|
function handleFileSelectEvents(evt)
|
|
{
|
|
fetchFilesAsJSONArray(evt).then((data)=>
|
|
{
|
|
generateTimeline(data);
|
|
})
|
|
}
|
|
document.getElementById('actFiles').addEventListener('change', handleFileSelectEvents, false);
|
|
</script>
|
|
</footer>
|
|
|
|
</html>
|