Merge pull request #560 from filecoin-project/feat/nicer-townhall

townhall: More colors, weight/height diff
This commit is contained in:
Łukasz Magiera 2019-11-09 18:59:27 +01:00 committed by GitHub
commit 7150ee811d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -1,6 +1,15 @@
import React from 'react';
import './App.css';
function colForH(besth, height) {
const diff = besth - height
if(diff === 0) return '#6f6'
if(diff === 1) return '#df4'
if(diff < 4) return '#ff0'
if(diff < 10) return '#f60'
return '#f00'
}
class App extends React.Component {
constructor(props) {
super(props);
@ -21,18 +30,18 @@ class App extends React.Component {
}
render() {
let best = Object.keys(this.state).map(k => this.state[k]).reduce((p, n) => p > n.Height ? p : n.Height, -1)
console.log(best)
let besth = Object.keys(this.state).map(k => this.state[k]).reduce((p, n) => p > n.Height ? p : n.Height, -1)
let bestw = Object.keys(this.state).map(k => this.state[k]).reduce((p, n) => p > n.Weight ? p : n.Weight, -1)
return <table>{Object.keys(this.state).map(k => [k, this.state[k]]).map(([k, v]) => {
let mnrs = v.Blocks.map(b => <span>&nbsp;m:{b.Miner}</span>)
let l = [<td>{k}</td>, <td>{v.NodeName}</td>, <td>{v.Height}</td>, <td>{mnrs}</td>]
if (best !== v.Height) {
l = <tr style={{color: '#f00'}}>{l}</tr>
} else {
let l = [<td>{k}</td>,
<td>{v.NodeName}</td>,
<td style={{color: bestw !== v.Weight ? '#f00' : '#afa'}}>{v.Weight}({bestw - v.Weight})</td>,
<td style={{color: colForH(besth, v.Height)}}>{v.Height}({besth - v.Height})</td>,
<td>{mnrs}</td>]
l = <tr>{l}</tr>
}
return l
})