refactor: througput formatting

client/ui/throughput.js

@@ -1,4 +1,5 @@
 // 3rd party.
+import classnames from 'classnames';
 import React, {useEffect, useState} from 'react';
 // 2nd party.
 import {compose} from '@avocado/core';
@@ -22,9 +23,13 @@ const decorate = compose(
   font-family: monospace;
 }
 .throughput .kbps:before {
-  color: rgb(180, 180, 180);
+  color: rgb(0, 255, 0);
   content: 'kb/s ';
 }
+.throughput .mbps:before {
+  color: rgb(255, 180, 0);
+  content: 'mb/s ';
+}
 .throughput .input:before {
   content: '\\a0in: ';
 }
@@ -37,14 +42,39 @@ const decorate = compose(
   `),
 );
 
-const formatKbps = (bytes) => {
-  const bps = bytes * 8;
+function formatKbps(bps) {
   const kbps = bps / 1000;
   return Math.floor(kbps * 100) / 100;
 }
 
+function formatMbps(bps) {
+  const mbps = bps / 1000000;
+  return Math.floor(mbps * 100) / 100;
+}
+
+function format(bps) {
+  const unit = preferredUnit(bps);
+  switch (unit) {
+    case 'kbps':
+      return formatKbps(bps);
+    case 'mbps':
+      return formatMbps(bps);
+  }
+}
+
+function preferredUnit(bps) {
+  if (bps > 1000000) {
+    return 'mbps';
+  }
+  else {
+    return 'kbps';
+  }
+}
+
 const ThroughputComponent = ({Parser}) => {
   const [throughput, setThroughput] = useState([0, 0]);
+  const [inUnit, setInUnit] = useState('kbps');
+  const [outUnit, setOutUnit] = useState('kbps');
   useEffect(() => {
     const {Decoder, Encoder} = Parser;
     const throughputSampleTime = 0.5;
@@ -53,8 +83,10 @@ const ThroughputComponent = ({Parser}) => {
       const throughput = Vector.scale([
         Decoder.throughput || 0,
         Encoder.throughput || 0,
-      ], 1 / throughputSampleTime);
+      ], 8 * (1 / throughputSampleTime));
       setThroughput(throughput);
+      setInUnit(preferredUnit(throughput[0]));
+      setOutUnit(preferredUnit(throughput[1]));
       Decoder.throughput = 0;
       Encoder.throughput = 0;
     }, throughputSampleTime * 1000);
@@ -63,14 +95,20 @@ const ThroughputComponent = ({Parser}) => {
     };
   }, []);
   return <div className="throughput unselectable">
-    <p className="unit kbps">
+    <p className={classnames(
+      'unit',
+      inUnit,
+    )}>
       <span className="input">
-        {formatKbps(throughput[0])}
+        {format(throughput[0])}
       </span>
     </p>
-    <p className="unit kbps">
+    <p className={classnames(
+      'unit',
+      outUnit,
+    )}>
       <span className="output">
-        {formatKbps(throughput[1])}
+        {format(throughput[1])}
       </span>
     </p>
   </div>;

package.json

@@ -36,6 +36,7 @@
     "@avocado/state": "1.x",
     "@avocado/timing": "1.x",
     "@avocado/topdown": "1.x",
+    "classnames": "2.2.6",
     "contempo": "1.x",
     "glob": "^7.1.3",
     "immutablediff": "0.4.4",

yarn.lock

@@ -1334,6 +1334,10 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
+classnames@^2.2.6:
+  version "2.2.6"
+  resolved "https://npm.i12e.cha0s.io/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
+
 clean-css@4.2.x:
   version "4.2.1"
   resolved "https://npm.i12e.cha0s.io/clean-css/-/clean-css-4.2.1.tgz#2d411ef76b8569b6d0c84068dabe85b0aa5e5c17"