github.com/xxRanger/go-ethereum@v1.8.23/dashboard/assets/components/CustomTooltip.jsx (about) 1 // @flow 2 3 // Copyright 2018 The go-ethereum Authors 4 // This file is part of the go-ethereum library. 5 // 6 // The go-ethereum library is free software: you can redistribute it and/or modify 7 // it under the terms of the GNU Lesser General Public License as published by 8 // the Free Software Foundation, either version 3 of the License, or 9 // (at your option) any later version. 10 // 11 // The go-ethereum library is distributed in the hope that it will be useful, 12 // but WITHOUT ANY WARRANTY; without even the implied warranty of 13 // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 14 // GNU Lesser General Public License for more details. 15 // 16 // You should have received a copy of the GNU Lesser General Public License 17 // along with the go-ethereum library. If not, see <http://www.gnu.org/licenses/>. 18 19 import React, {Component} from 'react'; 20 21 import Typography from 'material-ui/Typography'; 22 import {styles} from '../common'; 23 24 // multiplier multiplies a number by another. 25 export const multiplier = <T>(by: number = 1) => (x: number) => x * by; 26 27 // percentPlotter renders a tooltip, which displays the value of the payload followed by a percent sign. 28 export const percentPlotter = <T>(text: string, mapper: (T => T) = multiplier(1)) => (payload: T) => { 29 const p = mapper(payload); 30 if (typeof p !== 'number') { 31 return null; 32 } 33 return ( 34 <Typography type='caption' color='inherit'> 35 <span style={styles.light}>{text}</span> {p.toFixed(2)} % 36 </Typography> 37 ); 38 }; 39 40 // unit contains the units for the bytePlotter. 41 const unit = ['', 'Ki', 'Mi', 'Gi', 'Ti', 'Pi', 'Ei', 'Zi', 'Yi']; 42 43 // simplifyBytes returns the simplified version of the given value followed by the unit. 44 const simplifyBytes = (x: number) => { 45 let i = 0; 46 for (; x > 1024 && i < 8; i++) { 47 x /= 1024; 48 } 49 return x.toFixed(2).toString().concat(' ', unit[i], 'B'); 50 }; 51 52 // bytePlotter renders a tooltip, which displays the payload as a byte value. 53 export const bytePlotter = <T>(text: string, mapper: (T => T) = multiplier(1)) => (payload: T) => { 54 const p = mapper(payload); 55 if (typeof p !== 'number') { 56 return null; 57 } 58 return ( 59 <Typography type='caption' color='inherit'> 60 <span style={styles.light}>{text}</span> {simplifyBytes(p)} 61 </Typography> 62 ); 63 }; 64 65 // bytePlotter renders a tooltip, which displays the payload as a byte value followed by '/s'. 66 export const bytePerSecPlotter = <T>(text: string, mapper: (T => T) = multiplier(1)) => (payload: T) => { 67 const p = mapper(payload); 68 if (typeof p !== 'number') { 69 return null; 70 } 71 return ( 72 <Typography type='caption' color='inherit'> 73 <span style={styles.light}>{text}</span> {simplifyBytes(p)}/s 74 </Typography> 75 ); 76 }; 77 78 export type Props = { 79 active: boolean, 80 payload: Object, 81 tooltip: <T>(text: string, mapper?: T => T) => (payload: mixed) => null | React$Element<any>, 82 }; 83 84 // CustomTooltip takes a tooltip function, and uses it to plot the active value of the chart. 85 class CustomTooltip extends Component<Props> { 86 render() { 87 const {active, payload, tooltip} = this.props; 88 if (!active || typeof tooltip !== 'function' || !Array.isArray(payload) || payload.length < 1) { 89 return null; 90 } 91 return tooltip(payload[0].value); 92 } 93 } 94 95 export default CustomTooltip;