feat: tooltip fix and enhancement (#1571)

juspay · Oct 8, 2024 · 0cda40b · 0cda40b
1 parent 5e36d6f
commit 0cda40b
Show file tree

Hide file tree

Showing 14 changed files with 151 additions and 91 deletions.
diff --git a/src/screens/NewAnalytics/Graphs/LineGraph/LineGraphTypes.res b/src/screens/NewAnalytics/Graphs/LineGraph/LineGraphTypes.res
@@ -2,7 +2,8 @@ type \"type" = string
 type spacingLeft = int
 type spacingRight = int
 
-type point = {color: string, x: string, y: float}
+type info = {index: int}
+type point = {color: string, x: string, y: float, point: info}
 type pointFormatter = {points: array<point>}
 
 external asTooltipPointFormatter: Js_OO.Callback.arity1<'a> => pointFormatter => string =
@@ -73,6 +74,7 @@ type xAxis = {
   lineWidth: lineWidth,
   tickWidth: tickWidth,
   labels: labels,
+  tickInterval: int,
   gridLineWidth: gridLineWidth,
   gridLineColor: gridLineColor,
   tickmarkPlacement: tickmarkPlacement,
@@ -109,4 +111,9 @@ type lineGraphOptions = {
   tooltip: tooltip,
 }
 
-type lineGraphPayload = {categories: categories, data: data, title: title}
+type lineGraphPayload = {
+  categories: categories,
+  data: data,
+  title: title,
+  tooltipFormatter: pointFormatter => string,
+}
diff --git a/src/screens/NewAnalytics/Graphs/LineGraph/LineGraphUtils.res b/src/screens/NewAnalytics/Graphs/LineGraph/LineGraphUtils.res
@@ -1,55 +1,13 @@
 open LineGraphTypes
-let tooltipFormatter = (~title: LineGraphTypes.title) =>
-  (
-    @this
-    (this: pointFormatter) => {
-      let title = `<div style="font-size: 16px; font-weight: bold;">${title.text}</div>`
 
-      let tableItems =
-        this.points
-        ->Array.map(point =>
-          `<div style="display: flex; align-items: center;">
-                  <div style="width: 10px; height: 10px; background-color:${point.color}; border-radius:3px;"></div>
-                  <div style="margin-left: 8px;">${point.x}</div>
-                  <div style="flex: 1; text-align: right; font-weight: bold;">${point.y->Float.toString} USD</div>
-                </div>`
-        )
-        ->Array.joinWith("")
-
-      let content = `
-          <div style=" 
-          padding:5px 12px;
-          border-left: 3px solid #0069FD;
-          display:flex;
-          flex-direction:column;
-          justify-content: space-between;
-          gap: 7px;">
-              ${title}
-              <div style="
-                margin-top: 5px;
-                display:flex;
-                flex-direction:column;
-                gap: 7px;">
-                ${tableItems}
-              </div>
-        </div>`
+let getLineGraphOptions = (lineGraphOptions: lineGraphPayload) => {
+  let {categories, data, title, tooltipFormatter} = lineGraphOptions
 
-      `<div style="
-    padding: 10px;
-    width:fit-content;
-    border-radius: 7px;
-    background-color:#FFFFFF;
-    padding:10px;
-    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
-    border: 1px solid #E5E5E5;
-    position:relative;">
-        ${content}
-    </div>`
-    }
-  )->asTooltipPointFormatter
+  let stepInterval = Js.Math.max_int(
+    Js.Math.ceil_int(categories->Array.length->Int.toFloat /. 20.0),
+    1,
+  )
 
-let getLineGraphOptions = (lineGraphOptions: lineGraphPayload) => {
-  let {categories, data, title} = lineGraphOptions
   {
     chart: {
       \"type": "line",
@@ -71,6 +29,7 @@ let getLineGraphOptions = (lineGraphOptions: lineGraphPayload) => {
         },
         y: 35,
       },
+      tickInterval: stepInterval,
       gridLineWidth: 1,
       gridLineColor: "#e6e6e6",
       tickmarkPlacement: "on",
@@ -88,7 +47,7 @@ let getLineGraphOptions = (lineGraphOptions: lineGraphPayload) => {
       backgroundColor: "transparent",
       borderColor: "transparent",
       borderWidth: 0.0,
-      formatter: tooltipFormatter(~title),
+      formatter: tooltipFormatter,
       useHTML: true,
       shared: true, // Allows multiple series' data to be shown in a single tooltip
     },

diff --git a/src/screens/NewAnalytics/NewAnalyticsHelper.res b/src/screens/NewAnalytics/NewAnalyticsHelper.res
@@ -83,6 +83,7 @@ module Tabs = {
       {options
       ->Array.mapWithIndex((tabValue, index) =>
         <div
+          key={index->Int.toString}
           className={`px-3 py-2 ${tabValue.value->getStyle(index)} selection:bg-white`}
           onClick={_ => setOption(tabValue)}>
           {tabValue.label->React.string}
@@ -172,6 +173,7 @@ module StatisticsCard = {
     let (bgColor, textColor) = switch direction {
     | Upward => ("bg-green-light", "text-green-dark")
     | Downward => ("bg-red-light", "text-red-dark")
+    | No_Change => ("bg-gray-100", "text-gray-500")
     }
 
     <div className={`${bgColor} ${textColor} w-fit h-fit rounded-2xl flex px-2 pt-0.5`}>

diff --git a/src/screens/NewAnalytics/NewAnalyticsTypes.res b/src/screens/NewAnalytics/NewAnalyticsTypes.res
@@ -1,6 +1,6 @@
 type analyticsPages = Payment
 type viewType = Graph | Table
-type statisticsDirection = Upward | Downward
+type statisticsDirection = Upward | Downward | No_Change
 
 type analyticsPagesRoutes = | @as("new-analytics-payment") NewAnalyticsPayment
 

diff --git a/src/screens/NewAnalytics/NewAnalyticsUtils.res b/src/screens/NewAnalytics/NewAnalyticsUtils.res
@@ -98,3 +98,32 @@ let getComparisionTimePeriod = (~startDate, ~endDate) => {
 
   (startTimeValue, endTimeVal)
 }
+
+let calculatePercentageChange = (~primaryValue, ~secondaryValue) => {
+  open NewAnalyticsTypes
+  let change = secondaryValue -. primaryValue
+
+  if primaryValue === 0.0 || change === 0.0 {
+    (0.0, No_Change)
+  } else if change > 0.0 {
+    let diff = change /. primaryValue
+    let percentage = diff *. 100.0
+    (percentage, Upward)
+  } else {
+    let diff = change *. -1.0 /. primaryValue
+    let percentage = diff *. 100.0
+    (percentage, Downward)
+  }
+}
+
+let getToolTipConparision = (~primaryValue, ~secondaryValue) => {
+  let (value, direction) = calculatePercentageChange(~primaryValue, ~secondaryValue)
+
+  let (textColor, icon) = switch direction {
+  | Upward => ("#12B76A", "▲")
+  | Downward => ("#F04E42", "▼")
+  | No_Change => ("#A0A0A0", "")
+  }
+
+  `<span style="color:${textColor};margin-left:7px;" >${icon}${value->valueFormatter(Rate)}</span>`
+}
diff --git a/src/screens/NewAnalytics/PaymentAnalytics/NewPaymentAnalyticsUtils.res b/src/screens/NewAnalytics/PaymentAnalytics/NewPaymentAnalyticsUtils.res
@@ -18,8 +18,12 @@ let getMonthName = month => {
   }
 }
 
-let getCategories = (data: array<JSON.t>, key: string) => {
-  data->Array.map(item => {
+let getCategories = (data: JSON.t, index: int, key: string) => {
+  data
+  ->getArrayFromJson([])
+  ->getValueFromArray(index, []->JSON.Encode.array)
+  ->getArrayFromJson([])
+  ->Array.map(item => {
     let value = item->getDictFromJsonObject->getString(key, "")
 
     if value->isNonEmptyString && key == "time_bucket" {
@@ -127,19 +131,71 @@ let getMetaDataValue = (~data, ~index, ~key) => {
   ->getFloat(key, 0.0)
 }
 
-let calculatePercentageChange = (~primaryValue, ~secondaryValue) => {
-  open NewAnalyticsTypes
-  let change = secondaryValue -. primaryValue
-
-  if primaryValue === 0.0 || change === 0.0 {
-    (0.0, Upward)
-  } else if change > 0.0 {
-    let diff = change /. primaryValue
-    let percentage = diff *. 100.0
-    (percentage, Upward)
-  } else {
-    let diff = change *. -1.0 /. primaryValue
-    let percentage = diff *. 100.0
-    (percentage, Downward)
-  }
+open LineGraphTypes
+let tooltipFormatter = (~secondaryCategories, ~title, ~metricType) => {
+  open NewAnalyticsUtils
+
+  (
+    @this
+    (this: pointFormatter) => {
+      let title = `<div style="font-size: 16px; font-weight: bold;">${title}</div>`
+
+      let defaultValue = {color: "", x: "", y: 0.0, point: {index: 0}}
+      let primartPoint = this.points->getValueFromArray(0, defaultValue)
+      let secondaryPoint = this.points->getValueFromArray(1, defaultValue)
+
+      let getRowsHtml = (~iconColor, ~date, ~value, ~comparisionComponent="") => {
+        let valueString = valueFormatter(value, metricType)
+        `<div style="display: flex; align-items: center;">
+            <div style="width: 10px; height: 10px; background-color:${iconColor}; border-radius:3px;"></div>
+            <div style="margin-left: 8px;">${date}${comparisionComponent}</div>
+            <div style="flex: 1; text-align: right; font-weight: bold;margin-left: 25px;">${valueString}</div>
+        </div>`
+      }
+
+      let tableItems =
+        [
+          getRowsHtml(~iconColor=primartPoint.color, ~date=primartPoint.x, ~value=primartPoint.y),
+          getRowsHtml(
+            ~iconColor=secondaryPoint.color,
+            ~date=secondaryCategories->getValueFromArray(secondaryPoint.point.index, ""),
+            ~value=secondaryPoint.y,
+            ~comparisionComponent=getToolTipConparision(
+              ~primaryValue=primartPoint.y,
+              ~secondaryValue=secondaryPoint.y,
+            ),
+          ),
+        ]->Array.joinWith("")
+
+      let content = `
+          <div style=" 
+          padding:5px 12px;
+          border-left: 3px solid #0069FD;
+          display:flex;
+          flex-direction:column;
+          justify-content: space-between;
+          gap: 7px;">
+              ${title}
+              <div style="
+                margin-top: 5px;
+                display:flex;
+                flex-direction:column;
+                gap: 7px;">
+                ${tableItems}
+              </div>
+        </div>`
+
+      `<div style="
+    padding: 10px;
+    width:fit-content;
+    border-radius: 7px;
+    background-color:#FFFFFF;
+    padding:10px;
+    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
+    border: 1px solid #E5E5E5;
+    position:relative;">
+        ${content}
+    </div>`
+    }
+  )->asTooltipPointFormatter
 }
diff --git a/src/screens/NewAnalytics/PaymentAnalytics/PaymentsLifeCycle/PaymentsLifeCycleUtils.res b/src/screens/NewAnalytics/PaymentAnalytics/PaymentsLifeCycle/PaymentsLifeCycleUtils.res
@@ -34,7 +34,7 @@ let paymentsLifeCycleMapper = (
   let customerAwaited = data.customerAwaited // DropOff2
   let attemptedPayments = pending + customerAwaited + success + failure
   let pmAwaited = data.pmAwaited // Dropoff1
-  let totalPayment = pmAwaited + attemptedPayments + cancelled
+  let _totalPayment = pmAwaited + attemptedPayments + cancelled
 
   let disputed = data.disputed
 

diff --git a/...eens/NewAnalytics/PaymentAnalytics/PaymentsOverviewSection/NewPaymentsOverviewSection.res b/...eens/NewAnalytics/PaymentAnalytics/PaymentsOverviewSection/NewPaymentsOverviewSection.res
@@ -4,7 +4,6 @@ module SmartRetryCard = {
   open NewAnalyticsHelper
   open NewPaymentsOverviewSectionTypes
   open NewPaymentsOverviewSectionUtils
-  open NewPaymentAnalyticsUtils
   open NewAnalyticsUtils
   @react.component
   let make = (~metric, ~data) => {
@@ -38,7 +37,6 @@ module SmartRetryCard = {
 module OverViewStat = {
   open NewAnalyticsHelper
   open NewAnalyticsUtils
-  open NewPaymentAnalyticsUtils
   open NewPaymentsOverviewSectionTypes
   open NewPaymentsOverviewSectionUtils
   @react.component

diff --git a/src/screens/NewAnalytics/PaymentAnalytics/PaymentsProcessed/PaymentsProcessed.res b/src/screens/NewAnalytics/PaymentAnalytics/PaymentsProcessed/PaymentsProcessed.res
@@ -47,6 +47,7 @@ module TableModule = {
 
 module PaymentsProcessedHeader = {
   open NewAnalyticsTypes
+  open NewAnalyticsUtils
   open NewPaymentAnalyticsUtils
   @react.component
   let make = (

diff --git a/src/screens/NewAnalytics/PaymentAnalytics/PaymentsProcessed/PaymentsProcessedUtils.res b/src/screens/NewAnalytics/PaymentAnalytics/PaymentsProcessed/PaymentsProcessedUtils.res
@@ -8,12 +8,8 @@ let paymentsProcessedMapper = (
   ~yKey: string,
 ): LineGraphTypes.lineGraphPayload => {
   open LineGraphTypes
-  let categories =
-    data
-    ->getArrayFromJson([])
-    ->getValueFromArray(0, []->JSON.Encode.array)
-    ->getArrayFromJson([])
-    ->getCategories(yKey)
+  let primaryCategories = data->getCategories(0, yKey)
+  let secondaryCategories = data->getCategories(1, yKey)
 
   let lineGraphData =
     data
@@ -26,7 +22,16 @@ let paymentsProcessedMapper = (
   let title = {
     text: "Payments Processed",
   }
-  {categories, data: lineGraphData, title}
+  {
+    categories: primaryCategories,
+    data: lineGraphData,
+    title,
+    tooltipFormatter: tooltipFormatter(
+      ~secondaryCategories,
+      ~title="Payments Processed",
+      ~metricType=Amount,
+    ),
+  }
 }
 // Need to modify
 let getMetaData = json =>

diff --git a/src/screens/NewAnalytics/PaymentAnalytics/PaymentsSuccessRate/PaymentsSuccessRate.res b/src/screens/NewAnalytics/PaymentAnalytics/PaymentsSuccessRate/PaymentsSuccessRate.res
@@ -5,6 +5,7 @@ open PaymentsSuccessRateUtils
 
 module PaymentsSuccessRateHeader = {
   open NewPaymentAnalyticsUtils
+  open NewAnalyticsUtils
   @react.component
   let make = (~data, ~keyValue, ~granularity, ~setGranularity) => {
     let setGranularity = value => {

diff --git a/src/screens/NewAnalytics/PaymentAnalytics/PaymentsSuccessRate/PaymentsSuccessRateUtils.res b/src/screens/NewAnalytics/PaymentAnalytics/PaymentsSuccessRate/PaymentsSuccessRateUtils.res
@@ -19,12 +19,8 @@ let paymentsSuccessRateMapper = (
   ~yKey: string,
 ): LineGraphTypes.lineGraphPayload => {
   open LineGraphTypes
-  let categories =
-    data
-    ->getArrayFromJson([])
-    ->getValueFromArray(0, []->JSON.Encode.array)
-    ->getArrayFromJson([])
-    ->getCategories(yKey)
+  let primaryCategories = data->getCategories(0, yKey)
+  let secondaryCategories = data->getCategories(1, yKey)
 
   let lineGraphData =
     data
@@ -37,7 +33,16 @@ let paymentsSuccessRateMapper = (
   let title = {
     text: "Payments Success Rate",
   }
-  {categories, data: lineGraphData, title}
+  {
+    categories: primaryCategories,
+    data: lineGraphData,
+    title,
+    tooltipFormatter: tooltipFormatter(
+      ~secondaryCategories,
+      ~title="Payments Success Rate",
+      ~metricType=Rate,
+    ),
+  }
 }
 
 open NewAnalyticsTypes

diff --git a/...lytics/PaymentAnalytics/SuccessfulPaymentsDistribution/SuccessfulPaymentsDistribution.res b/...lytics/PaymentAnalytics/SuccessfulPaymentsDistribution/SuccessfulPaymentsDistribution.res
@@ -107,7 +107,7 @@ let make = (
         ->getArrayFromDict("queryData", [])
 
       if arr->Array.length > 0 {
-        setpaymentsDistribution(_ => responseData->JSON.Encode.array)
+        setpaymentsDistribution(_ => [responseData->JSON.Encode.array]->JSON.Encode.array)
         setScreenState(_ => PageLoaderWrapper.Success)
       } else {
         setScreenState(_ => PageLoaderWrapper.Custom)

diff --git a/...s/PaymentAnalytics/SuccessfulPaymentsDistribution/SuccessfulPaymentsDistributionUtils.res b/...s/PaymentAnalytics/SuccessfulPaymentsDistribution/SuccessfulPaymentsDistributionUtils.res
@@ -18,10 +18,7 @@ let successfulPaymentsDistributionMapper = (
   ~yKey: string,
 ): BarGraphTypes.barGraphPayload => {
   open BarGraphTypes
-  let categories =
-    data
-    ->getArrayFromJson([])
-    ->getCategories(yKey)
+  let categories = data->getCategories(0, yKey)
 
   let barGraphData = getBarGraphObj(
     ~array=data->getArrayFromJson([]),