Merge pull request #560 from filecoin-project/feat/nicer-townhall
townhall: More colors, weight/height diff
This commit is contained in:
commit
7150ee811d
@ -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> 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
|
||||
})
|
||||
|
Loading…
Reference in New Issue
Block a user