github.com/arieschain/arieschain@v0.0.0-20191023063405-37c074544356/dashboard/assets/components/CustomTooltip.jsx (about)

     1  // @flow
     2  
     3  
     4  import React, {Component} from 'react';
     5  
     6  import Typography from 'material-ui/Typography';
     7  import {styles} from '../common';
     8  
     9  // multiplier multiplies a number by another.
    10  export const multiplier = <T>(by: number = 1) => (x: number) => x * by;
    11  
    12  // percentPlotter renders a tooltip, which displays the value of the payload followed by a percent sign.
    13  export const percentPlotter = <T>(text: string, mapper: (T => T) = multiplier(1)) => (payload: T) => {
    14  	const p = mapper(payload);
    15  	if (typeof p !== 'number') {
    16  		return null;
    17  	}
    18  	return (
    19  		<Typography type='caption' color='inherit'>
    20  			<span style={styles.light}>{text}</span> {p.toFixed(2)} %
    21  		</Typography>
    22  	);
    23  };
    24  
    25  // unit contains the units for the bytePlotter.
    26  const unit = ['', 'Ki', 'Mi', 'Gi', 'Ti', 'Pi', 'Ei', 'Zi', 'Yi'];
    27  
    28  // simplifyBytes returns the simplified version of the given value followed by the unit.
    29  const simplifyBytes = (x: number) => {
    30  	let i = 0;
    31  	for (; x > 1024 && i < 8; i++) {
    32  		x /= 1024;
    33  	}
    34  	return x.toFixed(2).toString().concat(' ', unit[i], 'B');
    35  };
    36  
    37  // bytePlotter renders a tooltip, which displays the payload as a byte value.
    38  export const bytePlotter = <T>(text: string, mapper: (T => T) = multiplier(1)) => (payload: T) => {
    39  	const p = mapper(payload);
    40  	if (typeof p !== 'number') {
    41  		return null;
    42  	}
    43  	return (
    44  		<Typography type='caption' color='inherit'>
    45  			<span style={styles.light}>{text}</span> {simplifyBytes(p)}
    46  		</Typography>
    47  	);
    48  };
    49  
    50  // bytePlotter renders a tooltip, which displays the payload as a byte value followed by '/s'.
    51  export const bytePerSecPlotter = <T>(text: string, mapper: (T => T) = multiplier(1)) => (payload: T) => {
    52  	const p = mapper(payload);
    53  	if (typeof p !== 'number') {
    54  		return null;
    55  	}
    56  	return (
    57  		<Typography type='caption' color='inherit'>
    58  			<span style={styles.light}>{text}</span> {simplifyBytes(p)}/s
    59  		</Typography>
    60  	);
    61  };
    62  
    63  export type Props = {
    64  	active: boolean,
    65  	payload: Object,
    66  	tooltip: <T>(text: string, mapper?: T => T) => (payload: mixed) => null | React$Element<any>,
    67  };
    68  
    69  // CustomTooltip takes a tooltip function, and uses it to plot the active value of the chart.
    70  class CustomTooltip extends Component<Props> {
    71  	render() {
    72  		const {active, payload, tooltip} = this.props;
    73  		if (!active || typeof tooltip !== 'function') {
    74  			return null;
    75  		}
    76  		return tooltip(payload[0].value);
    77  	}
    78  }
    79  
    80  export default CustomTooltip;