From d4cadebc7063936d438c5ceac20fc26856b300d5 Mon Sep 17 00:00:00 2001
From: Oguzhan Inan <oguzhan3488@gmail.com>
Date: Mon, 27 Mar 2017 13:17:25 +0300
Subject: [PATCH] add memory chart

---
 assets/css/style.css                  |  6 ++-
 src/components/App.js                 |  2 +-
 src/components/resources/Resources.js | 54 +++++++++++++++++++++++----
 3 files changed, 52 insertions(+), 10 deletions(-)

diff --git a/assets/css/style.css b/assets/css/style.css
index d26e3e13..86589c26 100755
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -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---------*/
diff --git a/src/components/App.js b/src/components/App.js
index f4066879..5584048b 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -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" />
diff --git a/src/components/resources/Resources.js b/src/components/resources/Resources.js
index 376d5046..3ce4ad98 100644
--- a/src/components/resources/Resources.js
+++ b/src/components/resources/Resources.js
@@ -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)
+
+		})
+
 	}
 }
\ No newline at end of file