github.com/cheng762/platon-go@v1.8.17-0.20190529111256-7deff2d7be26/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;