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>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title> Landing 1 </title>
|
<title> Landing 1 </title>
|
||||||
<model name="jsonmodel" src="data.json" refresh-interval="10000">
|
|
||||||
</model>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<h1>
|
<h1>
|
||||||
You made it to the Index!
|
You made it to the Index!
|
||||||
</h1>
|
</h1>
|
||||||
<h2 model="jsonmodel" datapath="name">
|
|
||||||
</h2>
|
|
||||||
<p model="jsonmodel" datapath="date">
|
|
||||||
</p>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</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