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

change(ui) - insights improvements

Browse source
This commit is contained in:
Shekar Siri 2023-04-25 16:56:00 +02:00
parent ce2cb5e772
commit f4961547a9
1 changed files with 11 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -2,6 +2,7 @@ import { IssueCategory } from 'App/types/filter/filterType';
import React from 'react';
import { Icon } from 'UI';
import cn from 'classnames';
import { numberWithCommas } from 'App/utils'
interface Props {
item: any;
@ -29,7 +30,7 @@ function InsightItem(props: Props) {
export default InsightItem;
function Change({ change, isIncreased }: any) {
function Change({ change, isIncreased, unit = "%" }: any) {
return (
<div
className={cn('font-medium flex items-center', {
@ -42,7 +43,7 @@ function Change({ change, isIncreased }: any) {
color={isIncreased ? 'red' : 'tealx'}
size={18}
/>
{change}%
{numberWithCommas(Math.abs(change)) + unit}
</div>
);
}
@ -60,9 +61,9 @@ function ErrorItem({ item, className, onClick }: any) {
</>
) : (
<>
<div className="mx-1">Increase</div>
<div className="mx-1">{item.isIncreased ? 'Increase' : 'Decrease'}</div>
<div className="mx-1">in</div>
<div className="mx-1">{item.name}</div>
<div className="mx-1 bg-gray-100 px-2 rounded">{item.name}</div>
<Change change={item.change} isIncreased={item.isIncreased} />
</>
)}
@ -74,10 +75,10 @@ function NetworkItem({ item, className, onClick }: any) {
return (
<div className={className} onClick={onClick}>
<Icon name={item.icon} size={18} className="mr-2" color={item.iconColor} />
<div className="mx-1">Network request</div>
<div className="mx-1">Network request to path</div>
<div className="mx-1 bg-gray-100 px-2 rounded">{item.name}</div>
<div className="mx-1">{item.change > 0 ? 'increased' : 'decreased'}</div>
<Change change={item.change} isIncreased={item.isIncreased} />
<div className="mx-1">has {item.change > 0 ? 'increased' : 'decreased'}</div>
<Change change={item.change} isIncreased={item.isIncreased} unit="sec" />
</div>
);
}
@ -86,9 +87,10 @@ function ResourcesItem({ item, className, onClick }: any) {
return (
<div className={className} onClick={onClick}>
<Icon name={item.icon} size={18} className="mr-2" color={item.iconColor} />
<div className="mx-1">{item.change > 0 ? 'Inrease' : 'Decrease'}</div>
<div className="mx-1">{item.change > 0 ? 'Increase' : 'Decrease'}</div>
<div className="mx-1">in</div>
<div className="mx-1 bg-gray-100 px-2 rounded">{item.name}</div>
<div className="mx-1">usage by</div>
<Change change={item.change} isIncreased={item.isIncreased} />
</div>
);
@ -105,7 +107,7 @@ function RageItem({ item, className, onClick }: any) {
{item.isNew && <div className="mx-1">more clickrage than other raged elements.</div>}
{!item.isNew && (
<>
<div className="mx-1">increase by</div>
<div className="mx-1">{item.isIncreased ? 'increased' : 'decreased'} by</div>
<Change change={item.change} isIncreased={item.isIncreased} />
</>
)}