B&W graphs: Implementing disk and memory

spikes/graphs-matrix/chartjs-whiskers/client/actions.js

@@ -8,7 +8,7 @@ const actions = {
       disk: []
     });
 
-    const newData = ['cpu', 'mem'].reduce((sum, key) => {
+    const newData = ['cpu', 'mem', 'disk'].reduce((sum, key) => {
       const item = {
         ...action.payload.stats[key],
         when: action.payload.when

spikes/graphs-matrix/chartjs-whiskers/client/chart/base.js

@@ -19,7 +19,9 @@ module.exports = React.createClass({
       stacked = false,
       xAxe = false,
       yAxe = false,
-      legend = false
+      legend = false,
+      max = 100,
+      min = 0
     } = this.props;
 
     const _labels = !Array.isArray(labels)
@@ -33,13 +35,13 @@ module.exports = React.createClass({
         scales: {
           xAxes: [{
             barPercentage: 1.0,
-            categoryPercentage: 1.0,
+            categoryPercentage: 1.0
           }],
           yAxes: [{
             ticks: {
-              min: 0,
-              max: 100
-            },
+              min: min,
+              max: max
+            }
           }]
         },
         legend: {

spikes/graphs-matrix/chartjs-whiskers/client/chart/cpu.js

@@ -18,7 +18,7 @@ module.exports = ({
       label: key,
       backgroundColor: colors[key],
       altBackgroundColor: colors['alt'],
-      data: buildArray(windowSize).map((v, i) => ((data[i] || {})[key] || { firstQuartile: 0, thirdQuartile: 0, median: 0, max: 0, min: 0 }))
+      data: buildArray(windowSize).map((v, i) => ((data[i] || {})[key] || { firstQuartile: 0, thirdQuartile: 0, median: 0, max: 0, min: 0 })).reverse()
     };
   });
 

spikes/graphs-matrix/chartjs-whiskers/client/chart/disk.js

@@ -4,8 +4,8 @@ const Chart = require('./base');
 const React = require('react');
 
 const colors = {
-  user: 'rgb(255, 99, 132)',
-  sys: 'rgb(255, 159, 64)'
+  perc: 'rgba(54, 74, 205, 0.2)',
+  alt: 'rgba(245, 93, 93, 0.2)'
 };
 
 module.exports = ({
@@ -14,20 +14,15 @@ module.exports = ({
 }) => {
   const datasets = [{
     label: 'disk',
-    backgroundColor: 'rgb(255, 159, 64)',
-    data: buildArray(windowSize).map((v, i) => {
-      return data[i] ? (data[i].total - data[i].free) : 0;
-    })
+    backgroundColor: colors['perc'],
+    altBackgroundColor: colors['alt'],
+    data: buildArray(windowSize).map((v, i) => ((data[i] || {})['perc'] || { firstQuartile: 0, thirdQuartile: 0, median: 0, max: 0, min: 0 })).reverse()
   }];
 
-  const labels = buildArray(windowSize).map((v, i) => {
-    return data[i] ? pretty(datasets[0].data[i]) : '';
-  });
-
   return (
     <Chart
       datasets={datasets}
-      labels={labels}
+      labels={datasets[0].data.length}
       legend={true}
     />
   );

spikes/graphs-matrix/chartjs-whiskers/client/chart/mem.js

@@ -3,8 +3,8 @@ const Chart = require('./base');
 const React = require('react');
 
 const colors = {
-  user: 'rgb(255, 99, 132)',
-  sys: 'rgb(255, 159, 64)'
+  perc: 'rgba(54, 74, 205, 0.2)',
+  alt: 'rgba(245, 93, 93, 0.2)'
 };
 
 module.exports = ({
@@ -13,8 +13,9 @@ module.exports = ({
 }) => {
   const datasets = [{
     label: 'mem',
-    backgroundColor: 'rgb(255, 99, 132)',
-    data: buildArray(windowSize).map((v, i) => ((data[i] || {}).used || 0))
+    backgroundColor: colors['perc'],
+    altBackgroundColor: colors['alt'],
+    data: buildArray(windowSize).map((v, i) => ((data[i] || {}).perc || { firstQuartile: 0, thirdQuartile: 0, median: 0, max: 0, min: 0 })).reverse()
   }];
 
   return (

spikes/graphs-matrix/chartjs-whiskers/client/whisker.js

@@ -104,7 +104,6 @@ module.exports = function(Chart) {
       var obj = me.getDataset().data[index];
       var value = Number(obj.stddev);
 
-      console.log('stddev >>', value);
       return value;
     },
 

spikes/graphs-matrix/chartjs-whiskers/server/metric.js

@@ -15,7 +15,7 @@ const getCPU = (fn) => {
 };
 
 const getPerc = (fn) => {
-  async.timesSeries(20, (n, next) => {
+  async.timesSeries(5, (n, next) => {
     osutils.cpuUsage((p) => {
       const percentage = p * 100;
       next(null, percentage);
@@ -35,18 +35,48 @@ const getPerc = (fn) => {
 };
 
 const getMem = (fn) => {
-  const free = os.freemem();
-  const total = os.totalmem();
-  const using = total - free;
-  const perc = (using / total) * 100;
-
-  return fn(null, {
-    used: perc
+  async.timesSeries(10, (n, next) => {
+    const free = os.freemem();
+    const total = os.totalmem();
+    const using = total - free;
+    const perc = (using / total) * 100;
+    setTimeout(() => {
+      next(null, perc);
+    }, 500);
+  }, (err, sample) => {
+    fn(err, {
+      perc: {
+        firstQuartile: statistics.quantile(sample, 0.25),
+        median: statistics.median(sample),
+        thirdQuartile: statistics.quantile(sample, 0.75),
+        max: statistics.max(sample),
+        min: statistics.min(sample),
+        stddev: statistics.sampleStandardDeviation(sample)
+      }
+    });
   });
 };
 
 const getDisk = (fn) => {
-  disk.check('/', fn);
+  async.timesSeries(5, (n, next) => {
+    disk.check('/', (err, data) => {
+      setTimeout(() => {
+        const perc = (data.available / data.total) * 100;
+        next(err, perc);
+      }, 2000);
+    });
+  }, (err, sample) => {
+    fn(err, {
+      perc: {
+        firstQuartile: statistics.quantile(sample, 0.25),
+        median: statistics.median(sample),
+        thirdQuartile: statistics.quantile(sample, 0.75),
+        max: statistics.max(sample),
+        min: statistics.min(sample),
+        stddev: statistics.sampleStandardDeviation(sample)
+      }
+    });
+  });
 };
 
 const getStats = (fn) => {