openreplay/frontend/app/components/Dashboard/Widgets/common/CustomTooltip.js
2021-05-01 15:12:01 +05:30

28 lines
762 B
JavaScript

import React from 'react';
import { numberWithCommas } from 'App/utils';
const TooltipLabel = ({ payload, unit = false }) => {
if (!payload) return '';
const value = numberWithCommas(Math.round(payload.value));
return (
<div className="text-sm">
{`${payload.name}: ${value}`}
{ unit && <span className="ml-1 text-xs">ms</span>}
</div>
)
}
const CustomTooltip = ({ active, payload, label, unit }) => {
if (active && payload && payload[0]) {
return (
<div className="border rounded p-2 bg-white leading-5">
<div className="text-xs color-gray-medium">{`${label}`}</div>
{payload.map(p => ( <TooltipLabel payload={p} unit={unit} /> ))}
</div>
);
}
return null;
}
export default CustomTooltip