dashboard, p2p, vendor: visualize peers (#19247)

* dashboard, p2p: visualize peers

* dashboard: change scale to green to red

dashboard/assets/components/CustomTooltip.jsx

@@ -18,8 +18,8 @@
 
 import React, {Component} from 'react';
 
-import Typography from 'material-ui/Typography';
-import {styles} from '../common';
+import Typography from '@material-ui/core/Typography';
+import {styles, simplifyBytes} from '../common';
 
 // multiplier multiplies a number by another.
 export const multiplier = <T>(by: number = 1) => (x: number) => x * by;
@@ -37,18 +37,6 @@ export const percentPlotter = <T>(text: string, mapper: (T => T) = multiplier(1)
 	);
 };
 
-// unit contains the units for the bytePlotter.
-const unit = ['', 'Ki', 'Mi', 'Gi', 'Ti', 'Pi', 'Ei', 'Zi', 'Yi'];
-
-// simplifyBytes returns the simplified version of the given value followed by the unit.
-const simplifyBytes = (x: number) => {
-	let i = 0;
-	for (; x > 1024 && i < 8; i++) {
-		x /= 1024;
-	}
-	return x.toFixed(2).toString().concat(' ', unit[i], 'B');
-};
-
 // bytePlotter renders a tooltip, which displays the payload as a byte value.
 export const bytePlotter = <T>(text: string, mapper: (T => T) = multiplier(1)) => (payload: T) => {
 	const p = mapper(payload);
@@ -70,7 +58,8 @@ export const bytePerSecPlotter = <T>(text: string, mapper: (T => T) = multiplier
 	}
 	return (
 		<Typography type='caption' color='inherit'>
-			<span style={styles.light}>{text}</span> {simplifyBytes(p)}/s
+			<span style={styles.light}>{text}</span>
+			{simplifyBytes(p)}/s
 		</Typography>
 	);
 };