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

feat(ui) - insights - data format arrow

Browse source
This commit is contained in:
Shekar Siri 2023-01-13 18:28:54 +01:00
parent 16c22f8cf6
commit 0d83e0d94a
1 changed files with 24 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/InsightsCard/InsightItem.tsx
View file

@ -1,6 +1,7 @@
import { IssueCategory } from 'App/types/filter/filterType';
import React from 'react';
import { Icon } from 'UI';
import cn from 'classnames';
interface Props {
item: any;
@ -27,6 +28,25 @@ function InsightItem(props: Props) {
export default InsightItem;
function Change({ change, isIncreased }: any) {
return (
<div
className={cn('font-medium flex items-center', {
'text-red': isIncreased,
'text-tealx': !isIncreased,
})}
>
<Icon
name={isIncreased ? 'arrow-up-short' : 'arrow-down-short'}
color={isIncreased ? 'red' : 'tealx'}
size={20}
/>
{change}%
</div>
);
}
function ErrorItem({ item, className, onClick }: any) {
return (
<div className={className} onClick={onClick}>
@ -43,7 +63,7 @@ function ErrorItem({ item, className, onClick }: any) {
<div className="mx-1">Increase</div>
<div className="mx-1">in</div>
<div className="mx-1">{item.name}</div>
<div className="mx-1 font-medium color-red">{item.change}%</div>
<Change change={item.change} isIncreased={item.isIncreased} />
</>
)}
</div>
@ -57,7 +77,7 @@ function NetworkItem({ item, className, onClick }: any) {
<div className="mx-1">Network request</div>
<div className="mx-1 bg-gray-100 px-2 rounded">{item.name}</div>
<div className="mx-1">{item.change > 0 ? 'increased' : 'decreased'}</div>
<div className="font-medium text-red">{item.change}%</div>
<Change change={item.change} isIncreased={item.isIncreased} />
</div>
);
}
@ -69,7 +89,7 @@ function ResourcesItem({ item, className, onClick }: any) {
<div className="mx-1">{item.change > 0 ? 'Inrease' : 'Decrease'}</div>
<div className="mx-1">in</div>
<div className="mx-1 bg-gray-100 px-2 rounded">{item.name}</div>
<div className="font-medium text-red">{item.change}%</div>
<Change change={item.change} isIncreased={item.isIncreased} />
</div>
);
}
@ -86,7 +106,7 @@ function RageItem({ item, className, onClick }: any) {
{!item.isNew && (
<>
<div className="mx-1">increase by</div>
<div className="mx-1">{item.change}</div>
<Change change={item.change} isIncreased={item.isIncreased} />
</>
)}
</div>