FitTrackee/fittrackee_client/src/components/Common/Stats/CustomTooltip.jsx

39 lines
949 B
React
Raw Normal View History

import React from 'react'
2019-01-03 12:53:47 +01:00
import { formatDuration } from '../../../utils'
const formatValue = (displayedData, value) => displayedData === 'duration'
? formatDuration(value, true)
: 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
}