70 lines
2.1 KiB
TypeScript
70 lines
2.1 KiB
TypeScript
import React from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { Tooltip } from 'UI';
|
|
|
|
const MIN_WIDTH = '20px';
|
|
interface Props {
|
|
issue: any;
|
|
}
|
|
function FunnelIssueGraph(props: Props) {
|
|
const { t } = useTranslation();
|
|
const { issue } = props;
|
|
|
|
return (
|
|
<div className="flex rounded-sm" style={{ width: '600px' }}>
|
|
<div
|
|
style={{
|
|
width: `${issue.unaffectedSessionsPer}%`,
|
|
minWidth: MIN_WIDTH,
|
|
}}
|
|
className="relative"
|
|
>
|
|
<Tooltip title={t('Unaffected sessions')} placement="top">
|
|
<div
|
|
className="w-full relative rounded-tl-sm rounded-bl-sm"
|
|
style={{
|
|
height: '18px',
|
|
backgroundColor: 'rgba(217, 219, 238, 0.7)',
|
|
}}
|
|
/>
|
|
<div className="absolute ml-2 font-bold top-0 bottom-0 text-sm">
|
|
{issue.unaffectedSessions}
|
|
</div>
|
|
</Tooltip>
|
|
</div>
|
|
<div
|
|
style={{ width: `${issue.affectedSessionsPer}%`, minWidth: MIN_WIDTH }}
|
|
className="border-l relative"
|
|
>
|
|
<Tooltip title={t('Affected sessions')} placement="top">
|
|
<div
|
|
className="w-full relative"
|
|
style={{
|
|
height: '18px',
|
|
backgroundColor: 'rgba(238, 238, 238, 0.7)',
|
|
}}
|
|
/>
|
|
<div className="absolute ml-2 font-bold top-0 bottom-0 text-sm">
|
|
{issue.affectedSessions}
|
|
</div>
|
|
</Tooltip>
|
|
</div>
|
|
<div
|
|
style={{ width: `${issue.lostConversionsPer}%`, minWidth: MIN_WIDTH }}
|
|
className="border-l relative"
|
|
>
|
|
<Tooltip title={t('Conversion lost')} placement="top">
|
|
<div
|
|
className="w-full relative rounded-tr-sm rounded-br-sm"
|
|
style={{ height: '18px', backgroundColor: 'rgba(204, 0, 0, 0.26)' }}
|
|
/>
|
|
<div className="absolute ml-2 font-bold top-0 bottom-0 text-sm color-red">
|
|
{issue.lostConversions}
|
|
</div>
|
|
</Tooltip>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default FunnelIssueGraph;
|