40 lines
991 B
React
40 lines
991 B
React
|
import React from 'react'
|
||
|
|
import { format } from 'date-fns'
|
||
|
|
|
||
|
|
import { formatDuration } from '../../utils'
|
||
|
|
|
||
|
|
const formatValue = (displayedData, value) => displayedData === 'duration'
|
||
|
|
? format(formatDuration(value), 'HH:mm')
|
||
|
|
: displayedData === 'distance'
|
||
|
|
? value.toFixed(3)
|
||
|
|
: value
|
||
|
|
|
||
|
|
|
||
|
|
/**
|
||
|
|
* @return {null}
|
||
|
|
*/
|
||
|
|
export default function CustomTooltip (props) {
|
||
|
|
const { active } = props
|
||
|
|
if (active) {
|
||
|
|
const { displayedData, payload, label } = props
|
||
|
|
let total = 0
|
||
|
|
payload.map(p => total += p.value)
|
||
|
|
return (
|
||
|
|
<div className="custom-tooltip">
|
||
|
|
<p className="custom-tooltip-label">{label}</p>
|
||
|
|
{payload.map(p => (
|
||
|
|
<p key={p.name} style={{ color: p.fill }}>
|
||
|
|
{p.name}: {formatValue(displayedData, p.value)} {p.unit}
|
||
|
|
</p>))
|
||
|
|
}
|
||
|
|
{payload.length > 0 && (
|
||
|
|
<p>
|
||
|
|
Total: {formatValue(displayedData, total)} {payload[0].unit}
|
||
|
|
</p>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
return null
|
||
|
|
}
|