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

39 lines
937 B
React
Raw Normal View History

import React from 'react'
2019-01-04 10:07:24 +01:00
import { formatDuration } from '../../../utils/stats'
const formatValue = (displayedData, value) => displayedData === 'duration'
? formatDuration(value, true)
: displayedData === 'distance'
2019-01-04 11:10:07 +01:00
? value.toFixed(2)
: 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>
2019-01-04 11:10:07 +01:00
Total: {formatValue(displayedData, total)}
</p>
)}
</div>
)
}
return null
}