84 lines
No EOL
2.5 KiB
JavaScript
84 lines
No EOL
2.5 KiB
JavaScript
import React from 'react';
|
|
import { Popup } from 'UI';
|
|
import { percentOf } from 'App/utils';
|
|
import styles from './barRow.module.css'
|
|
import tableStyles from './timeTable.module.css';
|
|
|
|
const formatTime = time => time < 1000 ? `${ time.toFixed(2) }ms` : `${ time / 1000 }s`;
|
|
|
|
const BarRow = ({ resource: { time, ttfb = 0, duration, key }, popup=false, timestart = 0, timewidth }) => {
|
|
const timeOffset = time - timestart;
|
|
ttfb = ttfb || 0;
|
|
const trigger = (
|
|
<div
|
|
className={ styles.barWrapper }
|
|
style={ {
|
|
left: `${ percentOf(timeOffset, timewidth) }%`,
|
|
right: `${ 100 - percentOf(timeOffset + duration, timewidth) }%`,
|
|
minWidth: '5px'
|
|
} }
|
|
>
|
|
<div
|
|
className={ styles.ttfbBar }
|
|
style={ {
|
|
width: `${ percentOf(ttfb, duration) }%`,
|
|
} }
|
|
/>
|
|
<div
|
|
className={ styles.downloadBar }
|
|
style={ {
|
|
width: `${ percentOf(duration - ttfb, duration) }%`,
|
|
minWidth: '5px'
|
|
} }
|
|
/>
|
|
</div>
|
|
);
|
|
if (!popup) return <div key={ key } className={ tableStyles.row } > { trigger } </div>;
|
|
|
|
return (
|
|
<div key={ key } className={ tableStyles.row } >
|
|
<Popup
|
|
basic
|
|
unmountHTMLWhenHide
|
|
content={
|
|
<React.Fragment>
|
|
{ ttfb != null &&
|
|
<div className={ styles.popupRow }>
|
|
<div className={ styles.title }>{ 'Waiting (TTFB)' }</div>
|
|
<div className={ styles.popupBarWrapper} >
|
|
<div
|
|
className={ styles.ttfbBar }
|
|
style={{
|
|
left: 0,
|
|
width: `${ percentOf(ttfb, duration) }%`,
|
|
}}
|
|
/>
|
|
</div>
|
|
<div className={ styles.time } >{ formatTime(ttfb) }</div>
|
|
</div>
|
|
}
|
|
<div className={ styles.popupRow }>
|
|
<div className={ styles.title } >{ 'Content Download' }</div>
|
|
<div className= { styles.popupBarWrapper }>
|
|
<div
|
|
className={ styles.downloadBar }
|
|
style={{
|
|
left: `${ percentOf(ttfb, duration) }%`,
|
|
width: `${ percentOf(duration - ttfb, duration) }%`,
|
|
}}
|
|
/>
|
|
</div>
|
|
<div className={ styles.time }>{ formatTime(duration - ttfb) }</div>
|
|
</div>
|
|
</React.Fragment>
|
|
}
|
|
>
|
|
{trigger}
|
|
</Popup>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
BarRow.displayName = "BarRow";
|
|
|
|
export default BarRow; |