feat: auto format byte values

src/StatsCollector.js

@@ -24,7 +24,7 @@ class StatsCollelector extends EventEmitter {
 
   _sumStats(stats, newStat) {
     stats.cpu += Math.floor(newStat.cpu / cpuCount);
-    stats.mem += Math.floor(newStat.memory / 1024 / 1024); //Mb;
+    stats.mem += Math.floor(newStat.memory);
     return stats;
   }
 
@@ -75,7 +75,7 @@ class StatsCollelector extends EventEmitter {
     this._intervalId = setInterval(() => {
       this.emit('stats', {
         cpu: (Math.sin(+new Date() / 1000) + 1) / 2 * 100,
-        mem: Math.random() * 100 //Mb
+        mem: Math.random() * 2 * 1024 * 1024 * 1024
       });
     }, this.props.interval);
     return this;

src/UILayout.js

@@ -2,9 +2,12 @@
 
 const EventEmitter = require('events');
 const blessed = require('blessed');
+const formatBytes = require('./formatBytes');
 const Header = require('./ui/Header');
 const SparklineChart = require('./ui/SparklineChart');
 
+const SPARKLINE_VALUE_PADDING = 6;
+
 function createTopCalculator() {
   let top = 0;
   return (height = 0) => {
@@ -65,7 +68,7 @@ class UILayout extends EventEmitter {
   }
 
   _renderSparkline(props) {
-    return new SparklineChart({screen: this.screen, ...props});
+    return new SparklineChart({screen: this.screen, valuePadding: SPARKLINE_VALUE_PADDING, ...props});
   }
 
   _renderLogBox(props) {
@@ -157,14 +160,12 @@ class UILayout extends EventEmitter {
       this._uiCpuChart = this._renderSparkline({
         top: calculateTop(2),
         maxValue: 100,
-        title: 'CPU:',
-        postfix: '%'
+        title: 'CPU:'
       });
 
       this._uiMemChart = this._renderSparkline({
         top: calculateTop(2),
         title: 'Mem:',
-        postfix: 'Mb', //TODO replace
         colorOk: 'cyan',
         colorWarn: 'blue'
       });
@@ -196,12 +197,19 @@ class UILayout extends EventEmitter {
   }
 
   addCpu(value) {
-    this._uiCpuChart.add(value);
+    this._uiCpuChart.add(
+      value,
+      Math.round(value)
+        .toString()
+        .padStart(SPARKLINE_VALUE_PADDING - 1, ' '),
+      '%'
+    );
     return this;
   }
 
   addMem(value) {
-    this._uiMemChart.add(value);
+    const [textValue, postfix] = formatBytes(value, SPARKLINE_VALUE_PADDING);
+    this._uiMemChart.add(value, textValue.padStart(SPARKLINE_VALUE_PADDING - postfix.length, ' '), postfix);
     return this;
   }
 

src/formatBytes.js

@@ -0,0 +1,31 @@
+'use strict';
+
+const NA = 'N/A';
+const TITLES = ['B', 'Kb', 'Mb', 'Gb', 'Tb', 'Pb', 'Eb', 'Zb', 'Yb'];
+
+function formatBytes(rawValue, width = 6) {
+  let value = rawValue || 0;
+  let postfix = TITLES[0];
+
+  if (value > 0) {
+    const index = Math.floor(Math.log2(value || 0) / 10);
+    if (TITLES[index]) {
+      value = value / Math.pow(2, index * 10);
+      if (value.toFixed(1).length <= width - TITLES[index].length) {
+        value = value.toFixed(1);
+      } else {
+        value = value.toFixed(0);
+      }
+      postfix = TITLES[index];
+    } else {
+      value = NA;
+      postfix = '';
+    }
+  } else {
+    value = value.toString();
+  }
+
+  return [value, postfix];
+}
+
+module.exports = formatBytes;

src/ui/Header.js

@@ -17,7 +17,7 @@ class Header {
   _render() {
     const content = [
       `{bold}${blessed.escape(this.command)}{/bold} `,
-      `[PID: {bold}${this.pid}{/bold}]`,
+      `[PID: {bold}${this.pid}{/bold}] `,
       `[uptime: {bold}${this.time}{/bold}]`,
       '{|}',
       `UTop ver.${this.version}`

src/ui/SparklineChart.js

@@ -4,20 +4,10 @@ const blessed = require('blessed');
 const sparkline = require('sparkline');
 
 class SparklineChart {
-  constructor({
-    title,
-    maxValue = 0,
-    valuePadding = 7,
-    postfix = '',
-    colorOk = 'yellow',
-    colorWarn = 'red',
-    screen,
-    ...props
-  }) {
+  constructor({title, maxValue = 0, valuePadding = 6, colorOk = 'yellow', colorWarn = 'red', screen, ...props}) {
     this.title = title;
     this.maxValue = maxValue;
     this.valuePadding = valuePadding;
-    this.postfix = postfix;
     this.colorOk = colorOk;
     this.colorWarn = colorWarn;
     this.screen = screen;
@@ -35,7 +25,7 @@ class SparklineChart {
   }
 
   _init() {
-    const countLimit = Math.max(this.screen.width - this.title.length - this.valuePadding, 1);
+    const countLimit = Math.max(this.screen.width - this.title.length - this.valuePadding - 1, 1);
 
     let oldDataArray = this._dataArray;
     if (oldDataArray.length > countLimit) {
@@ -45,7 +35,7 @@ class SparklineChart {
     this._dataArray = new Array(countLimit - oldDataArray.length).fill(0).concat(oldDataArray);
   }
 
-  _render(value = 0) {
+  _render(value = 0, printValue = '', postfix = '') {
     // first one is allways 100% for the right 0-maxValue scale
     const graphString = sparkline([this.maxValue].concat(this._dataArray.slice(1)))
       .split('')
@@ -60,7 +50,7 @@ class SparklineChart {
       })
       .join('');
 
-    const content = `${this.title} ${graphString} {bold}${value}{/bold}${this.postfix}`;
+    const content = `${this.title} ${graphString} {bold}${printValue}{/bold}${postfix}`;
 
     if (this._chart) {
       this._chart.setContent(content);
@@ -75,15 +65,15 @@ class SparklineChart {
     }
   }
 
-  add(value) {
-    let validatedValue = Math.ceil(value);
+  add(rawValue, printValue = '', postfix = '') {
+    let validatedValue = Math.ceil(rawValue);
     if (this.maxValue) {
       validatedValue = Math.min(validatedValue, this.maxValue);
     }
 
     this._dataArray.push(validatedValue);
     this._dataArray.shift();
-    this._render(validatedValue);
+    this._render(validatedValue, printValue, postfix);
   }
 }