49 lines
1.9 KiB
JavaScript
49 lines
1.9 KiB
JavaScript
import React from 'react';
|
|
import styles from './loadInfo.module.css';
|
|
import { numberWithCommas } from 'App/utils'
|
|
|
|
const LoadInfo = ({ showInfo = false, onClick, event: { fcpTime, visuallyComplete, timeToInteractive }, prorata: { a, b, c } }) => (
|
|
<div>
|
|
<div className={ styles.bar } onClick={ onClick }>
|
|
{ typeof fcpTime === 'number' && <div style={ { width: `${ a }%` } } /> }
|
|
{ typeof visuallyComplete === 'number' && <div style={ { width: `${ b }%` } } /> }
|
|
{ typeof timeToInteractive === 'number' && <div style={ { width: `${ c }%` } } /> }
|
|
</div>
|
|
<div className={ styles.bottomBlock } data-hidden={ !showInfo }>
|
|
{ typeof fcpTime === 'number' &&
|
|
<div className={ styles.wrapper }>
|
|
<div className={ styles.lines } />
|
|
<div className={ styles.label } >{ 'Time to Render' }</div>
|
|
<div className={ styles.value }>{ `${ numberWithCommas(fcpTime || 0) }ms` }</div>
|
|
</div>
|
|
}
|
|
{ typeof visuallyComplete === 'number' &&
|
|
<div className={ styles.wrapper }>
|
|
<div className={ styles.lines } />
|
|
<div className={ styles.label } >{ 'Visually Complete' }</div>
|
|
<div className={ styles.value }>{ `${ numberWithCommas(visuallyComplete || 0) }ms` }</div>
|
|
</div>
|
|
}
|
|
{ typeof timeToInteractive === 'number' &&
|
|
<div className={ styles.wrapper }>
|
|
<div className={ styles.lines } />
|
|
<div className={ styles.label } >{ 'Time To Interactive' }</div>
|
|
<div className={ styles.value }>{ `${ numberWithCommas(timeToInteractive || 0) }ms` }</div>
|
|
</div>
|
|
}
|
|
{/* <div className={ styles.download }>
|
|
<a>
|
|
<Icon name="download" />
|
|
{ '.HAR' }
|
|
</a>
|
|
<div>
|
|
{ new Date().toString() }
|
|
</div>
|
|
</div> */}
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
LoadInfo.displayName = 'LoadInfo';
|
|
|
|
export default LoadInfo;
|