Add device traffic history chart and total breakdown

src/web/utils/format.js

@@ -37,6 +37,17 @@ export function positiveByteDelta(previous, current) {
   return after > before ? formatByteString((after - before).toString()) : '';
 }
 
+export function trafficSampleMetrics(gatewayValue, proxyValue, maxValue) {
+  const gateway = byteString(gatewayValue);
+  const proxy = byteString(proxyValue);
+  const total = gateway + proxy;
+  const max = byteString(maxValue);
+  return {
+    height: max && total ? Math.max(10, Math.min(100, Number(total * 100n / max))) : 0,
+    gatewayShare: total ? Number(gateway * 100n / total) : 0,
+  };
+}
+
 export function sortDevicesByTraffic(devices, direction = 'desc') {
   const factor = direction === 'asc' ? 1 : -1;
   return (Array.isArray(devices) ? devices : [])