github.com/YoungNK/go-ethereum@v1.9.7/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/core/Typography';
    22  import {styles, simplifyBytes} 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  // bytePlotter renders a tooltip, which displays the payload as a byte value.
    41  export const bytePlotter = <T>(text: string, mapper: (T => T) = multiplier(1)) => (payload: T) => {
    42  	const p = mapper(payload);
    43  	if (typeof p !== 'number') {
    44  		return null;
    45  	}
    46  	return (
    47  		<Typography type='caption' color='inherit'>
    48  			<span style={styles.light}>{text}</span> {simplifyBytes(p)}
    49  		</Typography>
    50  	);
    51  };
    52  
    53  // bytePlotter renders a tooltip, which displays the payload as a byte value followed by '/s'.
    54  export const bytePerSecPlotter = <T>(text: string, mapper: (T => T) = multiplier(1)) => (payload: T) => {
    55  	const p = mapper(payload);
    56  	if (typeof p !== 'number') {
    57  		return null;
    58  	}
    59  	return (
    60  		<Typography type='caption' color='inherit'>
    61  			<span style={styles.light}>{text}</span>
    62  			{simplifyBytes(p)}/s
    63  		</Typography>
    64  	);
    65  };
    66  
    67  export type Props = {
    68  	active: boolean,
    69  	payload: Object,
    70  	tooltip: <T>(text: string, mapper?: T => T) => (payload: mixed) => null | React$Element<any>,
    71  };
    72  
    73  // CustomTooltip takes a tooltip function, and uses it to plot the active value of the chart.
    74  class CustomTooltip extends Component<Props> {
    75  	render() {
    76  		const {active, payload, tooltip} = this.props;
    77  		if (!active || typeof tooltip !== 'function' || !Array.isArray(payload) || payload.length < 1) {
    78  			return null;
    79  		}
    80  		return tooltip(payload[0].value);
    81  	}
    82  }
    83  
    84  export default CustomTooltip;