fix: analytics minor changes (#1897)

juspay · Dec 10, 2024 · feae8ba · feae8ba
1 parent 9212683
commit feae8ba
Show file tree

Hide file tree

Showing 10 changed files with 94 additions and 55 deletions.
diff --git a/src/components/Calendar.res b/src/components/Calendar.res
@@ -146,7 +146,7 @@ module TableRow = {
             ) {
               "cursor-not-allowed"
             } else {
-              "cursor-default"
+              "cursor-pointer"
             }
             let getDate = date => {
               let datevalue = Js.Date.makeWithYMD(

diff --git a/src/screens/NewAnalytics/NewAnalyticsHelper.res b/src/screens/NewAnalytics/NewAnalyticsHelper.res
@@ -169,7 +169,7 @@ module CustomDropDown = {
 module StatisticsCard = {
   open NewAnalyticsTypes
   @react.component
-  let make = (~value, ~direction) => {
+  let make = (~value, ~tooltipValue, ~direction, ~isOverviewComponent=false) => {
     let (bgColor, textColor) = switch direction {
     | Upward => ("bg-green-light", "text-green-dark")
     | Downward => ("bg-red-light", "text-red-dark")
@@ -181,14 +181,23 @@ module StatisticsCard = {
     | Upward | No_Change => <Icon className="mt-1 -mr-1" name="arrow-increasing" size=25 />
     }
 
-    <div className={`${bgColor} ${textColor} w-fit h-fit rounded-2xl flex px-2 pt-0.5`}>
-      <div className="-mb-0.5 flex">
-        {icon}
-        <div className="font-semibold text-sm pt-0.5 pr-0.5">
-          {`${value->NewAnalyticsUtils.valueFormatter(Rate)}`->React.string}
+    let wrapperClass = isOverviewComponent ? "scale-[0.9]" : ""
+
+    <ToolTip
+      description=tooltipValue
+      toolTipFor={<div
+        className={`${wrapperClass} ${bgColor} ${textColor} cursor-pointer w-fit h-fit rounded-2xl flex px-2 pt-0.5`}>
+        <div className="-mb-0.5 flex">
+          {icon}
+          <div className="font-semibold text-sm pt-0.5 pr-0.5">
+            {`${value->NewAnalyticsUtils.valueFormatter(Rate)}`->React.string}
+          </div>
         </div>
-      </div>
-    </div>
+      </div>}
+      toolTipPosition={Top}
+      newDesign=true
+      tooltipArrowSize=0
+    />
   }
 }
 
@@ -209,24 +218,6 @@ module ModuleHeader = {
   }
 }
 
-module GraphHeader = {
-  open NewAnalyticsTypes
-  @react.component
-  let make = (~title, ~showTabSwitch, ~viewType, ~setViewType=_ => ()) => {
-    <div className="w-full px-7 py-8 flex justify-between">
-      <div className="flex gap-2 items-center">
-        <div className="text-3xl font-600"> {title->React.string} </div>
-        <StatisticsCard value=8.8 direction={Upward} />
-      </div>
-      <RenderIf condition={showTabSwitch}>
-        <div className="flex gap-2">
-          <TabSwitch viewType setViewType />
-        </div>
-      </RenderIf>
-    </div>
-  }
-}
-
 module SmartRetryToggle = {
   open LogicUtils
   open NewAnalyticsContainerUtils

diff --git a/src/screens/NewAnalytics/NewAnalyticsUtils.res b/src/screens/NewAnalytics/NewAnalyticsUtils.res
@@ -180,6 +180,24 @@ let sortQueryDataByDate = query => {
   query
 }
 
+let getMaxValue = (data: JSON.t, index: int, key: string) => {
+  data
+  ->getArrayFromJson([])
+  ->getValueFromArray(index, []->JSON.Encode.array)
+  ->getArrayFromJson([])
+  ->Array.reduce(0.0, (acc, item) => {
+    let value = item->getDictFromJsonObject->getFloat(key, 0.0)
+    Math.max(acc, value)
+  })
+}
+
+let isEmptyGraph = (data: JSON.t, key: string) => {
+  let primaryMaxValue = data->getMaxValue(0, key)
+  let secondaryMaxValue = data->getMaxValue(1, key)
+
+  Math.max(primaryMaxValue, secondaryMaxValue) == 0.0
+}
+
 let getCategories = (data: JSON.t, index: int, key: string) => {
   data
   ->getArrayFromJson([])

diff --git a/...eens/NewAnalytics/PaymentAnalytics/FailureReasonsPayments/FailureReasonsPaymentsUtils.res b/...eens/NewAnalytics/PaymentAnalytics/FailureReasonsPayments/FailureReasonsPaymentsUtils.res
@@ -156,7 +156,7 @@ let modifyQuery = (queryData, metaData) => {
   | _ => 0
   }
 
-  if totalCount > 0 {
+  let modifiedQuery = if totalCount > 0 {
     queryData->Array.map(query => {
       let valueDict = query->getDictFromJsonObject
       let failure_reason_count = valueDict->getInt(Failure_Reason_Count->getStringFromVariant, 0)
@@ -168,4 +168,16 @@ let modifyQuery = (queryData, metaData) => {
   } else {
     queryData
   }
+
+  modifiedQuery->Array.sort((queryA, queryB) => {
+    let valueDictA = queryA->getDictFromJsonObject
+    let valueDictB = queryB->getDictFromJsonObject
+
+    let failure_reason_countA = valueDictA->getInt(Failure_Reason_Count->getStringFromVariant, 0)
+    let failure_reason_countB = valueDictB->getInt(Failure_Reason_Count->getStringFromVariant, 0)
+
+    compareLogic(failure_reason_countA, failure_reason_countB)
+  })
+
+  modifiedQuery
 }
diff --git a/src/screens/NewAnalytics/PaymentAnalytics/NewPaymentAnalyticsUtils.res b/src/screens/NewAnalytics/PaymentAnalytics/NewPaymentAnalyticsUtils.res
@@ -112,7 +112,23 @@ let tooltipFormatter = (
       }
 
       let tableItems = [
-        getRowsHtml(~iconColor=primartPoint.color, ~date=primartPoint.x, ~value=primartPoint.y),
+        getRowsHtml(
+          ~iconColor=primartPoint.color,
+          ~date=primartPoint.x,
+          ~value=primartPoint.y,
+          ~comparisionComponent={
+            switch comparison {
+            | Some(value) =>
+              value == DateRangeUtils.EnableComparison
+                ? getToolTipConparision(
+                    ~primaryValue=primartPoint.y,
+                    ~secondaryValue=secondaryPoint.y,
+                  )
+                : ""
+            | None => ""
+            }
+          },
+        ),
         {
           switch comparison {
           | Some(value) =>
@@ -121,10 +137,6 @@ let tooltipFormatter = (
                   ~iconColor=secondaryPoint.color,
                   ~date=secondaryCategories->getValueFromArray(secondaryPoint.point.index, ""),
                   ~value=secondaryPoint.y,
-                  ~comparisionComponent=getToolTipConparision(
-                    ~primaryValue=primartPoint.y,
-                    ~secondaryValue=secondaryPoint.y,
-                  ),
                 )
               : ""
           | None => ""

diff --git a/...ewAnalytics/PaymentAnalytics/PaymentsOverviewSection/NewPaymentsOverviewSectionHelper.res b/...ewAnalytics/PaymentAnalytics/PaymentsOverviewSection/NewPaymentsOverviewSectionHelper.res
@@ -22,11 +22,14 @@ module SmartRetryCard = {
             <div className="font-semibold  text-2xl dark:text-white">
               {`Saved ${valueFormatter(primaryValue, config.valueType)} USD`->React.string} // TODO:Currency need to be picked from filter
             </div>
-            <div className="scale-[0.9]">
-              <RenderIf condition={comparison === EnableComparison}>
-                <StatisticsCard value direction />
-              </RenderIf>
-            </div>
+            <RenderIf condition={comparison === EnableComparison}>
+              <StatisticsCard
+                value
+                direction
+                isOverviewComponent=true
+                tooltipValue={`${valueFormatter(secondaryValue, config.valueType)} USD`}
+              />
+            </RenderIf>
           </div>
           <div className="opacity-50 text-sm"> {config.description->React.string} </div>
         </div>
@@ -52,23 +55,22 @@ module OverViewStat = {
 
     let (value, direction) = calculatePercentageChange(~primaryValue, ~secondaryValue)
 
+    let displayValue = valueFormatter(primaryValue, config.valueType)
+    let suffix = config.valueType == Amount ? "USD" : ""
+
     <Card>
       <div className="p-6 flex flex-col gap-4 justify-between h-full gap-auto relative">
         <div className="flex justify-between w-full items-end">
           <div className="flex gap-1 items-center">
-            <div className="font-bold text-3xl">
-              {
-                let value = valueFormatter(primaryValue, config.valueType)
-                let suffix = config.valueType == Amount ? "USD" : ""
-
-                `${value} ${suffix}`->React.string
-              }
-            </div>
-            <div className="scale-[0.9]">
-              <RenderIf condition={comparison === EnableComparison}>
-                <StatisticsCard value direction />
-              </RenderIf>
-            </div>
+            <div className="font-bold text-3xl"> {`${displayValue} ${suffix}`->React.string} </div>
+            <RenderIf condition={comparison === EnableComparison}>
+              <StatisticsCard
+                value
+                direction
+                isOverviewComponent=true
+                tooltipValue={`${valueFormatter(secondaryValue, config.valueType)} ${suffix}`}
+              />
+            </RenderIf>
           </div>
         </div>
         <div className={"flex flex-col gap-1  text-black"}>

diff --git a/src/screens/NewAnalytics/PaymentAnalytics/PaymentsProcessed/PaymentsProcessed.res b/src/screens/NewAnalytics/PaymentAnalytics/PaymentsProcessed/PaymentsProcessed.res
@@ -125,7 +125,9 @@ module PaymentsProcessedHeader = {
           {`${primaryValue->valueFormatter(metricType)} ${suffix}`->React.string} // TODO:Currency need to be picked from filter
         </div>
         <RenderIf condition={comparison == EnableComparison}>
-          <StatisticsCard value direction />
+          <StatisticsCard
+            value direction tooltipValue={`${secondaryValue->valueFormatter(metricType)} ${suffix}`}
+          />
         </RenderIf>
       </div>
       // will enable it in future

diff --git a/src/screens/NewAnalytics/PaymentAnalytics/PaymentsSuccessRate/PaymentsSuccessRate.res b/src/screens/NewAnalytics/PaymentAnalytics/PaymentsSuccessRate/PaymentsSuccessRate.res
@@ -39,7 +39,7 @@ module PaymentsSuccessRateHeader = {
           {primaryValue->valueFormatter(Rate)->React.string}
         </div>
         <RenderIf condition={comparison == EnableComparison}>
-          <StatisticsCard value direction />
+          <StatisticsCard value direction tooltipValue={secondaryValue->valueFormatter(Rate)} />
         </RenderIf>
       </div>
       <RenderIf condition={false}>

diff --git a/...Analytics/SmartRetryAnalytics/SmartRetryPaymentsProcessed/SmartRetryPaymentsProcessed.res b/...Analytics/SmartRetryAnalytics/SmartRetryPaymentsProcessed/SmartRetryPaymentsProcessed.res
@@ -111,7 +111,9 @@ module SmartRetryPaymentsProcessedHeader = {
           {`${primaryValue->valueFormatter(metricType)} ${suffix}`->React.string} // TODO:Currency need to be picked from filter
         </div>
         <RenderIf condition={comparison == EnableComparison}>
-          <StatisticsCard value direction />
+          <StatisticsCard
+            value direction tooltipValue={`${secondaryValue->valueFormatter(metricType)} ${suffix}`}
+          />
         </RenderIf>
       </div>
       // will enable it in future

diff --git a/...tics/SmartRetryAnalytics/SmartRetryPaymentsProcessed/SmartRetryPaymentsProcessedUtils.res b/...tics/SmartRetryAnalytics/SmartRetryPaymentsProcessed/SmartRetryPaymentsProcessedUtils.res
@@ -71,7 +71,7 @@ let smartRetryPaymentsProcessedMapper = (
     categories: primaryCategories,
     data: lineGraphData,
     title,
-    yAxisMaxValue: None,
+    yAxisMaxValue: data->isEmptyGraph(xKey) ? Some(1) : None,
     tooltipFormatter: tooltipFormatter(
       ~secondaryCategories,
       ~title="Smart Retry Payments Processed",