From f4961547a98013368e392e21de064416a5ba0492 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Tue, 25 Apr 2023 16:56:00 +0200
Subject: [PATCH] change(ui) - insights improvements

---
 .../InsightsCard/InsightItem.tsx              | 20 ++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/InsightsCard/InsightItem.tsx b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/InsightsCard/InsightItem.tsx
index a8ac5b54d..31c8370c2 100644
--- a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/InsightsCard/InsightItem.tsx
+++ b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/InsightsCard/InsightItem.tsx
@@ -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} />
         </>
       )}