Started with html development
- Designing the Interface now - Added data.json - Added data.html: For viewing graphs - Added Icons: RCN-icon & new Favicon - Switched to develop vue.js. Switching back on release - Removed testing data.json - Modified readmepull/4/head
parent
21bbcbb3cd
commit
e21ebee005
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,29 @@
|
||||
{
|
||||
"last-perc": 11.5,
|
||||
"last-temp": 31.2,
|
||||
"labels":[
|
||||
"1",
|
||||
"2",
|
||||
"3",
|
||||
"4",
|
||||
"5"
|
||||
],
|
||||
"100perc": [
|
||||
[0,1],
|
||||
[1,3],
|
||||
[2,12],
|
||||
[3,10]
|
||||
],
|
||||
"100temp": [
|
||||
[1,30],
|
||||
[2,33],
|
||||
[3,32],
|
||||
[4,31],
|
||||
[5,30],
|
||||
[6,29],
|
||||
[7,32],
|
||||
[8,31],
|
||||
[9,34],
|
||||
[10,33]
|
||||
]
|
||||
}
|
@ -1,5 +0,0 @@
|
||||
{
|
||||
"name": "NoName",
|
||||
"date": "today is the day",
|
||||
"1": "no"
|
||||
}
|
@ -0,0 +1,20 @@
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
|
||||
<script src="https://unpkg.com/vue-chartjs/dist/vue-chartjs.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h1> Data </h1>
|
||||
<div id="app">
|
||||
<div style="height: 100px; width: 100%">
|
||||
<svg viewBox="0 0 100 100" style="height: 100%; width: 100%">
|
||||
<polygon
|
||||
v-bind:points="temperatureData">
|
||||
</polygon>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<script src="/data.js" type="text/javascript">
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
@ -1,16 +1,10 @@
|
||||
<html>
|
||||
<head>
|
||||
<title> Landing 1 </title>
|
||||
<model name="jsonmodel" src="data.json" refresh-interval="10000">
|
||||
</model>
|
||||
</head>
|
||||
<body>
|
||||
<h1>
|
||||
You made it to the Index!
|
||||
</h1>
|
||||
<h2 model="jsonmodel" datapath="name">
|
||||
</h2>
|
||||
<p model="jsonmodel" datapath="date">
|
||||
</p>
|
||||
</body>
|
||||
</html>
|
||||
|
Binary file not shown.
After Width: | Height: | Size: 83 KiB |
Binary file not shown.
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 118 KiB |
@ -0,0 +1,28 @@
|
||||
function getFormattedData(dataArray) {
|
||||
let arrData = ["0,100"];
|
||||
for (d of dataArray) {
|
||||
arrData.push(d[0]+","+(100-d[1]));
|
||||
}
|
||||
arrData.push("100,100");
|
||||
return arrData.join(" ");
|
||||
}
|
||||
|
||||
var vueApp = new Vue({
|
||||
el: '#app',
|
||||
data: {
|
||||
temperatureData: [1,2,3,4],
|
||||
percentData: [2,3,4,5],
|
||||
labels: ["1", "2", "3", "4", "5"],
|
||||
chartOptions: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
let self = this;
|
||||
$.getJSON('cpu.json', d => {
|
||||
self.temperatureData = getFormattedData(d['100temp']),
|
||||
self.percentData = getFormattedData(d['100perc'])
|
||||
})
|
||||
}
|
||||
})
|
Loading…
Reference in New Issue