feat: api integration new analytics (#1521)

Co-authored-by: Jeeva Ramachandran <[email protected]>

src/container/NewAnalyticsContainer.res

@@ -24,21 +24,34 @@ let make = () => {
     None
   }, [])
 
+  let tabs: array<Tabs.tab> = [
+    {
+      title: "Payments",
+      renderContent: () =>
+        <div className="mt-5">
+          <NewPaymentAnalytics />
+        </div>,
+    },
+  ]
+
   <div>
     <PageUtils.PageHeading title="Analytics" />
-    <DynamicFilter
-      initialFilters=[]
-      options=[]
-      popupFilterFields=[]
-      initialFixedFilters={initialFixedFilterFields()}
-      defaultFilterKeys=[]
-      tabNames=[]
-      updateUrlWith=updateExistingKeys //
-      key="1"
-      filterFieldsPortalName={HSAnalyticsUtils.filterFieldsPortalName}
-      showCustomFilter=false
-      refreshFilters=false
-    />
+    <div
+      className="-ml-1 sticky top-0 z-30 p-1 bg-hyperswitch_background py-1 rounded-lg border my-2">
+      <DynamicFilter
+        initialFilters=[]
+        options=[]
+        popupFilterFields=[]
+        initialFixedFilters={initialFixedFilterFields()}
+        defaultFilterKeys=[startTimeFilterKey, endTimeFilterKey]
+        tabNames=[]
+        key="0"
+        updateUrlWith=updateExistingKeys
+        filterFieldsPortalName={HSAnalyticsUtils.filterFieldsPortalName}
+        showCustomFilter=false
+        refreshFilters=false
+      />
+    </div>
     <Tabs
       initialIndex={url->getPageIndex}
       tabs

src/libraries/FramerMotion.res

@@ -18,7 +18,7 @@ type animate = {
   y?: int,
   x?: int,
   opacity?: float,
-  backgroundPosition?: array<string>,
+  backgroundPosition?: string,
   height?: string,
   width?: string,
   background?: string,

src/screens/APIUtils/APIUtils.res

@@ -349,7 +349,33 @@ let useGetURL = () => {
         }
       | _ => ""
       }
+    | NEW_ANALYTICS =>
+      switch methodType {
+      | Get =>
+        switch id {
+        // Need to write seperate enum for info api
+        | Some(domain) =>
+          switch analyticsEntity {
+          | #Organization => `analytics/v2/org/${domain}/info`
+          | #Merchant => `analytics/v2/merchant/${domain}/info`
+          | #Profile => `analytics/v2/profile/${domain}/info`
+          }
+
+        | _ => ""
+        }
+      | Post =>
+        switch id {
+        | Some(domain) =>
+          switch analyticsEntity {
+          | #Organization => `analytics/v2/org/metrics/${domain}`
+          | #Merchant => `analytics/v2/merchant/metrics/${domain}`
+          | #Profile => `analytics/v2/profile/metrics/${domain}`
+          }
 
+        | _ => ""
+        }
+      | _ => ""
+      }
     /* PAYOUTS ROUTING */
     | PAYOUT_DEFAULT_FALLBACK => `routing/payouts/default`
     | PAYOUT_ROUTING =>

src/screens/APIUtils/APIUtilsTypes.res

@@ -15,6 +15,7 @@ type entityName =
   | ANALYTICS_REFUNDS
   | ANALYTICS_AUTHENTICATION
   | ANALYTICS_ACTIVE_PAYMENTS
+  | NEW_ANALYTICS
   | API_KEYS
   | ORDERS
   | ORDER_FILTERS

src/screens/NewAnalytics/Graphs/LineGraph/LineGraphTypes.res

@@ -104,7 +104,7 @@ type lineGraphOptions = {
   xAxis: xAxis,
   yAxis: yAxis,
   plotOptions: plotOptions,
-  series: array<data>,
+  series: data,
   credits: credits,
   tooltip: tooltip,
 }

src/screens/NewAnalytics/Graphs/LineGraph/LineGraphUtils.res

@@ -105,7 +105,7 @@ let getLineGraphOptions = (lineGraphOptions: lineGraphPayload) => {
         },
       },
     },
-    series: [data],
+    series: data,
     credits: {
       enabled: false,
     },

src/screens/NewAnalytics/NewAnalyticsContainerUtils.res

@@ -1,15 +1,5 @@
 open NewAnalyticsTypes
 
-let tabs: array<Tabs.tab> = [
-  {
-    title: "Payments",
-    renderContent: () =>
-      <div className="mt-5">
-        <NewPaymentAnalytics />
-      </div>,
-  },
-]
-
 let getPageVariant = string => {
   switch string {
   | "new-analytics-payment" | _ => NewAnalyticsPayment

src/screens/NewAnalytics/NewAnalyticsHelper.res

@@ -11,12 +11,24 @@ module Card = {
 module NoData = {
   @react.component
   let make = (~height="h-96") => {
-    <Card>
-      <div
-        className={`${height} border-2 flex justify-center items-center border-dashed opacity-70 rounded-lg p-5 m-7`}>
-        {"No Data"->React.string}
-      </div>
-    </Card>
+    <div
+      className={`${height} border-2 flex justify-center items-center border-dashed opacity-70 rounded-lg p-5 m-7`}>
+      {"No entires in selected time period."->React.string}
+    </div>
+  }
+}
+
+module Shimmer = {
+  @react.component
+  let make = (~className="w-full h-96", ~layoutId) => {
+    <FramerMotion.Motion.Div
+      className={`${className} bg-gradient-to-r from-gray-100 via-gray-200 to-gray-100`}
+      initial={{backgroundPosition: "-200% 0"}}
+      animate={{backgroundPosition: "200% 0"}}
+      transition={{duration: 1.5, ease: "easeInOut", repeat: 10000}}
+      style={{backgroundSize: "200% 100%"}}
+      layoutId
+    />
   }
 }
 

src/screens/NewAnalytics/NewAnalyticsTypes.res

@@ -13,11 +13,19 @@ type dimension = [
   | #authentication_type
 ]
 type status = [#charged | #failure]
-type metrics = [#payment_processed_amount | #payment_success_rate]
+type metrics = [
+  | #payment_processed_amount
+  | #payment_count
+  | #payment_success_rate
+  | #time_bucket
+  | #connector
+  | #payment_method
+  | #payment_method_type
+  | #card_network
+  | #authentication_type
+]
 type granularity = [
-  | #hour_wise
-  | #day_wise
-  | #week_wise
+  | #G_ONEDAY
 ]
 // will change this once we get the api srtcuture
 type requestBodyConfig = {

src/screens/NewAnalytics/NewAnalyticsUtils.res

@@ -22,7 +22,7 @@ let fillMissingDataPoints = (
 
   for x in 1 to endingPoint.diff(startingPoint.toString(), gap) {
     let newDict = defaultValue->getDictFromJsonObject->Dict.copy
-    let timeVal = startingPoint.add(x, gap).endOf(gap).format("YYYY-MM-DD")
+    let timeVal = startingPoint.add(x, gap).endOf(gap).format("YYYY-MM-DD 00:00:00")
     newDict->Dict.set(timeKey, timeVal->JSON.Encode.string)
     dataPoints->Dict.set(timeVal, newDict->JSON.Encode.object)
   }
@@ -34,3 +34,34 @@ let fillMissingDataPoints = (
 
   dataPoints->Dict.valuesToArray
 }
+
+open NewAnalyticsTypes
+
+let requestBody = (
+  ~dimensions as _: array<dimension>,
+  ~startTime: string,
+  ~endTime: string,
+  ~metrics: array<metrics>,
+  ~groupByNames: option<array<string>>=None,
+  ~filters as _: option<array<dimension>>=[]->Some,
+  ~customFilter as _: option<dimension>=None,
+  ~excludeFilterValue as _: option<array<status>>=None,
+  ~applyFilterFor as _: option<array<status>>=None,
+  ~delta: option<bool>=None,
+  ~granularity: option<string>=None,
+) => {
+  let metrics = metrics->Array.map(v => (v: metrics :> string))
+  let filter = Dict.make()->JSON.Encode.object->Some
+
+  [
+    AnalyticsUtils.getFilterRequestBody(
+      ~metrics=Some(metrics),
+      ~delta=delta->Option.getOr(false),
+      ~groupByNames,
+      ~filter,
+      ~startDateTime=startTime,
+      ~endDateTime=endTime,
+      ~granularity,
+    )->JSON.Encode.object,
+  ]->JSON.Encode.array
+}

src/screens/NewAnalytics/PaymentAnalytics/NewPaymentAnalytics.res

@@ -9,12 +9,12 @@ let make = () => {
     <PaymentsProcessed
       entity={paymentsProcessedEntity} chartEntity={paymentsProcessedChartEntity}
     />
-    <PaymentsSuccessRate
-      entity={paymentsSuccessRateEntity} chartEntity={paymentsSuccessRateChartEntity}
-    />
-    <SuccessfulPaymentsDistribution
-      entity={successfulPaymentsDistributionEntity}
-      chartEntity={successfulPaymentsDistributionChartEntity}
-    />
+    // <PaymentsSuccessRate
+    //   entity={paymentsSuccessRateEntity} chartEntity={paymentsSuccessRateChartEntity}
+    // />
+    // <SuccessfulPaymentsDistribution
+    //   entity={successfulPaymentsDistributionEntity}
+    //   chartEntity={successfulPaymentsDistributionChartEntity}
+    // />
   </div>
 }

src/screens/NewAnalytics/PaymentAnalytics/NewPaymentAnalyticsEntity.res

@@ -21,7 +21,7 @@ let paymentsLifeCycleChartEntity: chartEntity<
 let paymentsProcessedEntity: moduleEntity = {
   requestBodyConfig: {
     delta: false,
-    metrics: [#payment_processed_amount],
+    metrics: [#payment_processed_amount, #payment_count],
   },
   title: "Payments Processed",
   domain: #payments,

src/screens/NewAnalytics/PaymentAnalytics/NewPaymentAnalyticsUtils.res

@@ -1,13 +1,40 @@
 open LogicUtils
 
+let getMonthName = month => {
+  switch month {
+  | 0 => "Jan"
+  | 1 => "Feb"
+  | 2 => "Mar"
+  | 3 => "Apr"
+  | 4 => "May"
+  | 5 => "Jun"
+  | 6 => "Jul"
+  | 7 => "Aug"
+  | 8 => "Sep"
+  | 9 => "Oct"
+  | 10 => "Nov"
+  | 11 => "Dec"
+  | _ => ""
+  }
+}
+
 let getCategories = (json: JSON.t, key: string): array<string> => {
   json
   ->getArrayFromJson([])
   ->Array.flatMap(item => {
     item
     ->getDictFromJsonObject
     ->getArrayFromDict("queryData", [])
-    ->Array.map(item => item->getDictFromJsonObject->getString(key, ""))
+    ->Array.map(item => {
+      let value = item->getDictFromJsonObject->getString(key, "")
+
+      if value->LogicUtils.isNonEmptyString && key == "time_bucket" {
+        let dateObj = value->DayJs.getDayJsForString
+        `${dateObj.month()->getMonthName} ${dateObj.format("DD")}`
+      } else {
+        value
+      }
+    })
   })
 }