jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ui: assign icon for event types in sankey nodes

Browse source
This commit is contained in:
nick-delirium 2024-12-23 16:28:12 +01:00
parent eb24893b2d
commit 78731fac37
No known key found for this signature in database
GPG key ID: 93ABD695DF5FDBA0
2 changed files with 78 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/app/components/shared/Filters/FilterModal/FilterModal.tsx
View file

@ -41,7 +41,7 @@ import stl from './FilterModal.module.css';
import { observer } from 'mobx-react-lite';
import { useStore } from 'App/mstore';
const IconMap = {
export const IconMap = {
[FilterKey.CLICK]: <Pointer size={14}/>,
[FilterKey.LOCATION]: <Navigation size={14} />,
[FilterKey.INPUT]: <RectangleEllipsis size={14} />,

130
frontend/app/components/shared/Insights/SankeyChart/NodeButton.tsx
View file

@ -1,67 +1,91 @@
import React from 'react';
import {Icon} from 'UI';
import {Popover} from 'antd';
import { Icon } from 'UI';
import { Popover } from 'antd';
import cn from 'classnames';
import { IconMap } from "../../Filters/FilterModal/FilterModal";
interface Props {
payload: any;
payload: any;
}
function NodeButton(props: Props) {
const {payload} = props;
const { payload } = props;
return (
<div className='relative'>
<Popover
content={<div className='bg-white rounded mt-1 text-xs'>
<div className='border-b py-1 px-2 flex items-center'>
<div className='w-6 shrink-0'>
<Icon name='link-45deg' size={18}/>
</div>
<div className='ml-1'>{payload.name}</div>
</div>
<div className='border-b py-1 px-2 flex items-center'>
<div className='w-6 shrink-0'>
<Icon name='arrow-right-short' size={18} color='green'/>
</div>
<div className='ml-1 font-medium'>Continuing {Math.round(payload.value)}%</div>
</div>
{payload.avgTimeFromPrevious && (
<div className='border-b py-1 px-2 flex items-center'>
<div className='w-6 shrink-0'>
<Icon name='clock-history' size={16}/>
</div>
const payloadStr = payload.name;
<div className='ml-1 font-medium'>
Average time from previous step <span>{payload.avgTimeFromPrevious}</span>
</div>
</div>
)}
</div>}>
<div
className='flex items-center copy-popover select-none rounded shadow'
style={{
backgroundColor: 'white',
padding: '3px 6px',
// width: 'fit-content',
maxWidth: '120px',
fontSize: '12px',
width: 'fit-content',
// we need to only trim the middle, so its readable
const safePName =
payloadStr.length > 70
? `${payloadStr.slice(0, 25)}...${payloadStr.slice(-25)}`
: payloadStr;
}}
>
<div style={{
maxWidth: '120px',
width: 'fit-content',
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
marginRight: '5px'
}}>{payload.name}</div>
<span style={{fontWeight: 'bold'}}>{Math.round(payload.value) + '%'}</span>
const eventIcon = IconMap[payload.eventType.toLowerCase()] ?? <Icon name='link-45deg' size={18}/>
return (
<div className="relative">
<Popover
content={
<div className="bg-white rounded mt-1 text-xs">
<div className="border-b py-1 px-2 flex items-center gap-1">
{eventIcon}
<div
className={cn(
'text-ellipsis overflow-hidden',
'max-w-80 whitespace-nowrap'
)}
>
{safePName}
</div>
</div>
<div className="border-b py-1 px-2 flex items-center gap-1">
<Icon name="arrow-right-short" size={18} color="green" />
<div className="ml-1 font-medium">
Continuing {Math.round(payload.value)}%
</div>
</div>
{payload.avgTimeFromPrevious && (
<div className="border-b py-1 px-2 flex items-center gap-1">
<Icon name="clock-history" size={16} />
<div className="ml-1 font-medium">
Average time from previous step{' '}
<span>{payload.avgTimeFromPrevious}</span>
</div>
</Popover>
</div>
)}
</div>
}
>
<div
className="flex items-center gap-1 copy-popover select-none rounded shadow"
style={{
backgroundColor: 'white',
padding: '3px 6px',
maxWidth: '180px',
overflow: 'hidden',
textOverflow: 'ellipsis',
fontSize: '12px',
width: 'fit-content',
}}
>
{eventIcon}
<div
style={{
maxWidth: '120px',
width: 'fit-content',
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
}}
>
{payload.name}
</div>
<span style={{ fontWeight: 'bold' }}>
{Math.round(payload.value) + '%'}
</span>
</div>
);
</Popover>
</div>
);
}
export default NodeButton;