60 lines
1.3 KiB
JavaScript
60 lines
1.3 KiB
JavaScript
|
// 3rd party.
|
||
|
|
import React, {useEffect, useState} from 'react';
|
||
|
|
// 2nd party.
|
||
|
|
import {compose} from '@avocado/core';
|
||
|
|
import contempo from 'contempo';
|
||
|
|
// 1st party.
|
||
|
|
import {WorldTime} from '../../common/world-time';
|
||
|
|
|
||
|
|
const decorate = compose(
|
||
|
|
contempo(`
|
||
|
|
.throughput {
|
||
|
|
background-color: rgba(0, 0, 0, .3);
|
||
|
|
color: white;
|
||
|
|
font-size: 0.6em;
|
||
|
|
position: absolute;
|
||
|
|
top: 0.5em;
|
||
|
|
left: 0.5em;
|
||
|
|
line-height: 1em;
|
||
|
|
width: 11em;
|
||
|
|
padding: 0.5em;
|
||
|
|
font-family: monospace;
|
||
|
|
}
|
||
|
|
.throughput .input:before {
|
||
|
|
content: 'kbps \\a0in: ';
|
||
|
|
}
|
||
|
|
.throughput .output:before {
|
||
|
|
content: 'kbps out: ';
|
||
|
|
}
|
||
|
|
.throughput p {
|
||
|
|
margin: 0.25em;
|
||
|
|
}
|
||
|
|
`),
|
||
|
|
);
|
||
|
|
|
||
|
|
const formatKbps = (bytes) => {
|
||
|
|
const bps = bytes * 8;
|
||
|
|
const kbps = bps / 1000;
|
||
|
|
return Math.floor(kbps * 100) / 100;
|
||
|
|
}
|
||
|
|
|
||
|
|
const ThroughputComponent = ({ticker}) => {
|
||
|
|
const [throughput, setThroughput] = useState([0, 0]);
|
||
|
|
useEffect(() => {
|
||
|
|
const updater = (throughput) => {
|
||
|
|
setThroughput(throughput);
|
||
|
|
};
|
||
|
|
ticker.on('updateThroughput', updater);
|
||
|
|
return () => {
|
||
|
|
ticker.off('updateThroughput', updater);
|
||
|
|
};
|
||
|
|
}, []);
|
||
|
|
return <div className="throughput unselectable">
|
||
|
|
<p className="input">{formatKbps(throughput[0])}</p>
|
||
|
|
<p className="output">{formatKbps(throughput[1])}</p>
|
||
|
|
|
||
|
|
</div>;
|
||
|
|
}
|
||
|
|
|
||
|
|
export default decorate(ThroughputComponent);
|