mirror/Stacer
1
0
Fork 0
mirror of https://github.com/oguzhaninan/Stacer.git synced 2026-05-25 00:40:40 -04:00
Code Issues Packages Projects Releases Wiki Activity

add memory chart

Browse Source
This commit is contained in:
Oguzhan Inan
2017-03-27 13:17:25 +03:00
parent 7ab7e0ec21
commit d4cadebc70
3 changed files with 52 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
assets/css/style.css
View File

@@ -627,12 +627,14 @@ input[type=checkbox] {
margin: 0;
}
#cpus-chart {
#cpus-chart,
#memory-chart {
background-color: #293945;
height: 200px;
height: 130px;
width: calc(100% - 20px);
padding: 10px;
border-radius: 4px;
margin-bottom: 5px;
}
/*---------STATISTICS---------*/

2
src/components/App.js
View File

@@ -14,7 +14,7 @@ export default {
<li><label :class="{'nav-active': activeNav == 3}" @click="activeNav = 3">Startup Apps</label></li>
<li><label :class="{'nav-active': activeNav == 4}" @click="activeNav = 4">Services</label></li>
<li><label :class="{'nav-active': activeNav == 5}" @click="activeNav = 5">Uninstaller</label></li>
<li><label :class="{'nav-active': activeNav == 6}" @click="activeNav = 6">Statistics</label></li>
<li><label :class="{'nav-active': activeNav == 6}" @click="activeNav = 6">Resources</label></li>
</ul>
<dashboard v-show="activeNav == 1" />

54
src/components/resources/Resources.js
View File

@@ -1,3 +1,4 @@
import helpers from '../../utils/helpers'
import 'chart.js'
import Chartkick from 'chartkick'
import si from 'systeminformation'
@@ -8,16 +9,20 @@ export default {
<div class="resources">
<h4>Cpu History</h4>
<div id="cpus-chart"></div>
<h4>Memory History</h4>
<div id="memory-chart"></div>
</div>
</div>
</transition>`,
data() {
return ({
cpuValues: [],
cpuData: [],
memoryValues: [],
memoryData: [],
labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15,
seconds: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15,
16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30],
data: [],
})
},
mounted() {
@@ -28,7 +33,7 @@ export default {
this.cpuValues.push([0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0])
let chart = new Chartkick.LineChart('cpus-chart', this.data, {
let cpuChart = new Chartkick.LineChart('cpus-chart', this.cpuData, {
legend: true,
min: 0,
max: 100,
@@ -39,14 +44,49 @@ export default {
si.currentLoad(val => {
this.cpuValues.forEach((cpu, i) => this.cpuValues[i].splice(0, 1))
this.cpuValues.forEach((cpu, i) => this.cpuValues[i].push(val.cpus[i].load.toFixed(1)))
this.data = []
this.cpuData = []
this.cpuValues.forEach((cpu, i) => {
let name = 'Cpu' + (i+1) + ' ' + val.cpus[i].load.toFixed(1) + '%'
this.data.push({name: name, data: this.cpuValues[i].map((d, i) => [this.labels[i], d]) })
let name = 'CPU' + (i+1) + ' ' + val.cpus[i].load.toFixed(1) + '%'
this.cpuData.push({name: name, data: this.cpuValues[i].map((d, i) => [this.seconds[i], d]) })
})
chart.updateData(this.data)
cpuChart.updateData(this.cpuData)
})
}, 1000)
})
si.mem(ram => {
let totalMem = helpers.prettyMemSize(ram.total)
for (var i = 0; i < 2; i++)
this.memoryValues.push([0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0])
let memoryChart = new Chartkick.LineChart('memory-chart', this.memoryData, {
colors: ['#2ecc71', '#e74c3c', '#3498db', '#f1c40f'],
min: 0,
max: totalMem,
legend: true
})
setInterval(() => {
si.mem(ram => {
let usedMem = helpers.prettyMemSize(ram.total - ram.available)
let usedSwap = helpers.prettyMemSize(ram.swapused)
this.memoryValues.forEach((cpu, i) => this.memoryValues[i].splice(0, 1))
this.memoryValues[0].push(usedMem)
this.memoryValues[1].push(usedSwap)
this.memoryData = []
this.memoryData.push({name: "Memory", data: this.memoryValues[0].map((d, i) => [this.seconds[i], d]) })
this.memoryData.push({name: "Swap", data: this.memoryValues[1].map((d, i) => [this.seconds[i], d]) })
memoryChart.updateData(this.memoryData)
})
}, 1000)
})
}
}