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

feat(ui) - cards - icon display

Browse source
This commit is contained in:
Shekar Siri 2023-01-02 13:59:33 +01:00
parent b3a86ac23c
commit 08e300cb7f
1 changed files with 9 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,8 +1,9 @@
import React from 'react';
import React, { useEffect, useState } from 'react';
import { Icon, Checkbox, Tooltip } from 'UI';
import { checkForRecent } from 'App/date';
import { withRouter, RouteComponentProps } from 'react-router-dom';
import { withSiteId } from 'App/routes';
import { TYPES, TIMESERIES, TABLE, CLICKMAP, FUNNEL, ERRORS, RESOURCE_MONITORING } from 'App/constants/card';
interface Props extends RouteComponentProps {
metric: any;
@ -13,21 +14,16 @@ interface Props extends RouteComponentProps {
}
function MetricTypeIcon({ type }: any) {
const getIcon = () => {
switch (type) {
case 'funnel':
return 'filter';
case 'table':
return 'list-alt';
case 'timeseries':
return 'bar-chart-line';
}
};
const [card, setCard] = useState<any>('');
useEffect(() => {
const t = TYPES.find(i => i.slug === type);
setCard(t)
}, [type])
return (
<Tooltip title={<div className="capitalize">{type}</div>} >
<Tooltip title={<div className="capitalize">{card.title}</div>} >
<div className="w-9 h-9 rounded-full bg-tealx-lightest flex items-center justify-center mr-2">
<Icon name={getIcon()} size="16" color="tealx" />
{ card.icon && <Icon name={card.icon} size="16" color="tealx" /> }
</div>
</Tooltip>
);