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

ui: fix icons in list view

Browse source
This commit is contained in:
nick-delirium 2024-12-16 13:20:38 +01:00
parent cddb933e0a
commit ab0a14fcb2
No known key found for this signature in database
GPG key ID: 93ABD695DF5FDBA0
2 changed files with 35 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
frontend/app/components/Dashboard/components/MetricListItem/MetricListItem.tsx
View file

@ -4,7 +4,7 @@ import { Tooltip, Input, Button, Dropdown, Menu, Tag, Modal as AntdModal, Form,
import { TeamOutlined, LockOutlined, EditOutlined, DeleteOutlined, MoreOutlined } from '@ant-design/icons';
import { RouteComponentProps } from 'react-router-dom';
import { withSiteId } from 'App/routes';
import { TYPES } from 'App/constants/card';
import { TYPE_ICONS, TYPE_NAMES } from 'App/constants/card';
import { useStore } from 'App/mstore';
import { observer } from 'mobx-react-lite';
import { toast } from 'react-toastify';
@ -20,15 +20,9 @@ interface Props extends RouteComponentProps {
}
function MetricTypeIcon({ type }: any) {
const [card, setCard] = useState<any>('');
useEffect(() => {
const t = TYPES.find((i) => i.slug === type);
setCard(t || {});
}, [type]);
return (
<Tooltip title={<div className="capitalize">{card.title}</div>}>
<Avatar src={card.icon && <Icon name={card.icon} size="16" color="tealx" />} size="small" className="bg-tealx-lightest mr-2" />
<Tooltip title={<div className="capitalize">{TYPE_NAMES[type]}</div>}>
<Avatar src={<Icon name={TYPE_ICONS[type]} size="16" color="tealx" />} size="small" className="bg-tealx-lightest mr-2" />
</Tooltip>
);
}

41
frontend/app/constants/card.ts
View file

@ -37,23 +37,46 @@ export interface Option {
disabled?: boolean;
}
export const TYPE_ICONS = {
[LIBRARY]: 'grid',
[TIMESERIES]: 'graph-up',
[TABLE]: 'list-alt',
[HEATMAP]: 'puzzle-piece',
[FUNNEL]: 'funnel',
[ERRORS]: 'exclamation-triangle',
[USER_PATH]: 'signpost-split',
[TABLE]: 'list-alt',
} as const
export const TYPE_NAMES = {
[LIBRARY]: 'Library',
[TIMESERIES]: 'Timeseries',
[TABLE]: 'Table',
[HEATMAP]: 'Heatmap',
[FUNNEL]: 'Funnel',
[ERRORS]: 'Errors',
[USER_PATH]: 'User Path',
[RETENTION]: 'Retention',
[INSIGHTS]: 'Insights',
[PERFORMANCE]: 'Performance',
} as const
export const TYPES: CardType[] = [
{
title: 'Add from Library',
icon: 'grid',
icon: TYPE_ICONS[LIBRARY],
description: 'Select an existing card from your library',
slug: LIBRARY,
},
{
title: 'Timeseries',
icon: 'graph-up',
title: TYPE_NAMES[TIMESERIES],
icon: TYPE_ICONS[TIMESERIES],
description: 'Combine captured events and filters to track trends over time.',
slug: TIMESERIES,
subTypes: [{ title: 'Session Count', slug: 'sessionCount', description: '' }],
},
{
title: 'Heatmap',
icon: 'puzzle-piece',
title: TYPE_NAMES[HEATMAP],
icon: TYPE_ICONS[HEATMAP],
description: 'See where users click and where they get frustrated.',
slug: HEATMAP,
subTypes: [{ title: 'Visited URL', slug: FilterKey.CLICKMAP_URL, description: '' }],
@ -75,14 +98,14 @@ export const TYPES: CardType[] = [
// ],
// },
{
title: 'Funnel',
icon: 'funnel',
title: TYPE_NAMES[FUNNEL],
icon: TYPE_ICONS[FUNNEL],
description: 'Find out where users are dropping and understand why.',
slug: FUNNEL,
},
{
title: 'Path Analysis',
icon: 'signpost-split',
title: TYPE_NAMES[USER_PATH],
icon: TYPE_ICONS[USER_PATH],
description: 'See where users are flowing and explore their journeys.',
slug: USER_PATH,
},