fix: sanky flow chart change and tooltip ui advancements (#1820)

src/screens/NewAnalytics/Graphs/SankyGraph/SankeyGraphTypes.res

@@ -3,6 +3,25 @@ type options = {dataLabels: temp}
 type point = {sum: string, id: string, options: options}
 type nodeFormatter = {point: point}
 
+type tooltipType = Node | Link
+
+type fromNode = {options: options}
+
+type toNode = {options: options}
+
+type pointFormat = {
+  sum: string,
+  id: string,
+  options: options,
+  color: string,
+  formatPrefix: string,
+  to: string,
+  from: string,
+  fromNode: fromNode,
+  toNode: toNode,
+}
+type pointFormatter = {point: pointFormat, key: string}
+
 external asTooltipPointFormatter: Js_OO.Callback.arity1<'a> => nodeFormatter => string = "%identity"
 
 type enabled = {enabled: bool}
@@ -41,6 +60,7 @@ type style = {
   fontWeight: fontWeight,
   fontSize: fontSize,
   color: color,
+  fontFamily: string,
 }
 type dataLabels = {
   style: style,
@@ -56,6 +76,19 @@ type chart = {
   spacingLeft: int,
   spacingRight: int,
 }
+type tooltip = {
+  style: style,
+  enabled: bool,
+  useHTML: bool,
+  formatter: nodeFormatter => string,
+  crosshairs: bool,
+  shadow: bool,
+  shape: string,
+  backgroundColor: string,
+  borderColor: string,
+  borderWidth: float,
+}
+
 type series = {
   exporting: exporting,
   credits: credits,
@@ -70,7 +103,13 @@ type series = {
 }
 
 type title = {text: string}
-type sankeyGraphOptions = {title: title, series: array<series>, chart: chart, credits: credits}
+type sankeyGraphOptions = {
+  title: title,
+  series: array<series>,
+  chart: chart,
+  credits: credits,
+  tooltip: tooltip,
+}
 
 type sankeyPayload = {
   title: title,

src/screens/NewAnalytics/Graphs/SankyGraph/SankeyGraphUtils.res

@@ -5,11 +5,75 @@ let valueFormatter = (
   (this: nodeFormatter) => {
     let weight = this.point.options.dataLabels.name
     let sum = weight->Int.toFloat->NewAnalyticsUtils.valueFormatter(Volume)
-    let label = `<span style="font-size: 15px; font-weight: bold;">${sum}</span><br/> <span style="font-size: 13px;">${this.point.id}</span>`
+    let label = `<span style="font-size: 20px; font-weight: bold;">${sum}</span><br/> <span style="font-size: 14px;">${this.point.id}</span>`
     label
   }
 )->asTooltipPointFormatter
 
+let tooltipFormatter = (
+  @this
+  (this: pointFormatter) => {
+    let pointType = this.point.formatPrefix == "node" ? Node : Link
+
+    let format = value => value->Int.toFloat->NewAnalyticsUtils.valueFormatter(Volume)
+
+    let titleString = switch pointType {
+    | Node => this.key
+    | Link => `${this.point.from} -> ${this.point.to}`
+    }
+
+    let info = switch pointType {
+    | Node => this.point.options.dataLabels.name->format
+    | Link =>
+      let fromValue = this.point.fromNode.options.dataLabels.name
+      let toValue = this.point.toNode.options.dataLabels.name
+
+      let (fraction, percentage) = if toValue > fromValue {
+        (`${fromValue->format} to ${toValue->format}`, "100%")
+      } else {
+        let percentage = toValue->Int.toFloat /. fromValue->Int.toFloat *. 100.0
+        (
+          `${toValue->format} of ${fromValue->format}`,
+          `${percentage->NewAnalyticsUtils.valueFormatter(Rate)}`,
+        )
+      }
+
+      `${fraction} (${percentage})`
+    }
+
+    let title = `<div style="font-size: 16px; font-weight: bold;">${info}</div>`
+
+    let content = `
+          <div style="
+          padding:5px 12px;
+          border-left: 4px solid ${this.point.color};
+          display:flex;
+          flex-direction:column;
+          justify-content: space-between;
+          gap: 7px;">
+              ${title}
+              <div style="
+                display:flex;
+                flex-direction:column;
+                gap: 7px;">
+                ${titleString}
+              </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
+
 let getSankyGraphOptions = (payload: sankeyPayload) => {
   let {data, nodes, title, colors} = payload
   let options = {
@@ -27,13 +91,14 @@ let getSankyGraphOptions = (payload: sankeyPayload) => {
         keys: ["from", "to", "weight", "color"],
         data,
         nodePadding: 35,
-        borderRadius: 0, // Set the border radius of the bars to 0
+        borderRadius: 3, // Set the border radius of the bars to 0
         dataLabels: {
           nodeFormatter: valueFormatter,
           style: {
             fontWeight: "normal",
-            fontSize: "13px",
+            fontSize: "14px",
             color: "#333333",
+            fontFamily: "Arial, sans-serif",
           },
           allowOverlap: true, // Allow labels to overlap
           crop: false, // Prevent labels from being cropped
@@ -44,6 +109,23 @@ let getSankyGraphOptions = (payload: sankeyPayload) => {
         nodes,
       },
     ],
+    tooltip: {
+      enabled: true,
+      useHTML: true,
+      style: {
+        fontWeight: "normal",
+        fontSize: "14px",
+        color: "#333333",
+        fontFamily: "Arial, sans-serif",
+      },
+      formatter: tooltipFormatter,
+      crosshairs: false,
+      shape: "square",
+      shadow: false,
+      backgroundColor: "transparent",
+      borderColor: "transparent",
+      borderWidth: 0.0,
+    },
     chart: {
       spacingLeft: 150,
       spacingRight: 150,

src/screens/NewAnalytics/PaymentAnalytics/PaymentsLifeCycle/PaymentsLifeCycle.res

@@ -35,22 +35,7 @@ let make = (
         ]
         ->Dict.fromArray
         ->JSON.Encode.object
-      // Expected response
-      // let response = {
-      //   "normal_success": 15,
-      //   "normal_failure": 1,
-      //   "cancelled": 1,
-      //   "smart_retried_success": 1,
-      //   "smart_retried_failure": 0,
-      //   "pending": 0,
-      //   "partial_refunded": 0,
-      //   "refunded": 0,
-      //   "disputed": 0,
-      //   "pm_awaited": 0,
-      //   "customer_awaited": 2,
-      //   "merchant_awaited": 0,
-      //   "confirmation_awaited": 0,
-      // }->Identity.genericTypeToJson
+
       let paymentLifeCycleResponse = await updateDetails(url, paymentLifeCycleBody, Post)
 
       if paymentLifeCycleResponse->PaymentsLifeCycleUtils.getTotalPayments > 0 {

src/screens/NewAnalytics/PaymentAnalytics/PaymentsLifeCycle/PaymentsLifeCycleTypes.res

@@ -8,8 +8,30 @@ type paymentLifeCycle = {
   partialRefunded: int,
   refunded: int,
   disputed: int,
-  pmAwaited: int,
-  customerAwaited: int,
-  merchantAwaited: int,
-  confirmationAwaited: int,
+  drop_offs: int,
+}
+
+type status =
+  | Succeeded
+  | Failed
+  | Cancelled
+  | Processing
+  | RequiresCustomerAction
+  | RequiresMerchantAction
+  | RequiresPaymentMethod
+  | RequiresConfirmation
+  | RequiresCapture
+  | PartiallyCaptured
+  | PartiallyCapturedAndCapturable
+  | Full_Refunded
+  | Partial_Refunded
+  | Dispute_Present
+  | Null
+
+type query = {
+  count: int,
+  dispute_status: status,
+  first_attempt: int,
+  refunds_status: status,
+  status: status,
 }