github.com/sberex/go-sberex@v1.8.2-0.20181113200658-ed96ac38f7d7/dashboard/assets/components/CustomTooltip.jsx (about)

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