chore: line graph utils (#1349)

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

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

@@ -1,16 +1,8 @@
+external lineGraphOptionsToJson: LineGraphTypes.lineGraphOptions => JSON.t = "%identity"
 @react.component
-let make = (~entity) => {
+let make = (~entity, ~data: JSON.t) => {
   open NewAnalyticsTypes
-  open NewAnalyticsHelper
-
-  let options = JSON.Encode.string("")->entity.getObjects->entity.getChatOptions
-
-  <div>
-    <h2 className="font-semibold text-xl text-jp-gray-900 pb-5"> {entity.title->React.string} </h2>
-    <Card>
-      <div className="mr-3 my-10">
-        <Highcharts.Chart options highcharts={Highcharts.highcharts} />
-      </div>
-    </Card>
-  </div>
+  let data = entity.getObjects(data)
+  let options = entity.getChatOptions(data)
+  <Highcharts.Chart options={options->lineGraphOptionsToJson} highcharts={Highcharts.highcharts} />
 }

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

@@ -1,6 +1,84 @@
-type seriresType = {
-  showInLegend: bool,
-  name: string,
+type \"type" = string
+type spacingLeft = int
+type spacingRight = int
+
+type categories = array<string>
+type crosshair = bool
+type lineWidth = int
+type tickWidth = int
+type align = string
+type color = string
+type y = int
+type gridLineWidth = int
+type gridLineColor = string
+type gridLineDashStyle = string
+type tickmarkPlacement = string
+type endOnTick = bool
+type startOnTick = bool
+type min = int
+type showInLegend = bool
+type name = string
+
+type title = {text: string}
+type style = {color: color}
+type enabled = {enabled: bool}
+type credits = {
+  ...enabled,
+}
+type exporting = {
+  ...enabled,
+}
+type marker = {
+  ...enabled,
+}
+type line = {marker: marker}
+type plotOptions = {line: line}
+type labels = {
+  align: align,
+  style: style,
+  y: y,
+}
+type chart = {
+  \"type": \"type",
+  spacingLeft: spacingLeft,
+  spacingRight: spacingRight,
+}
+type data = {
+  showInLegend: showInLegend,
+  name: name,
   data: array<int>,
-  color: string,
+  color: color,
+}
+
+type yAxis = {
+  title: title,
+  gridLineWidth: gridLineWidth,
+  gridLineColor: gridLineColor,
+  gridLineDashStyle: gridLineDashStyle,
+  min: min,
+}
+
+type xAxis = {
+  categories: categories,
+  crosshair: crosshair,
+  lineWidth: lineWidth,
+  tickWidth: tickWidth,
+  labels: labels,
+  gridLineWidth: gridLineWidth,
+  gridLineColor: gridLineColor,
+  tickmarkPlacement: tickmarkPlacement,
+  endOnTick: endOnTick,
+  startOnTick: startOnTick,
+}
+
+type lineGraphOptions = {
+  chart: chart,
+  title: title,
+  xAxis: xAxis,
+  yAxis: yAxis,
+  plotOptions: plotOptions,
+  series: data,
+  credits: credits,
 }
+
+type lineGraphPayload = {categories: categories, data: data, title: title}

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

@@ -1 +1,50 @@
-
+open LineGraphTypes
+let getLineGraphOptions = (lineGraphOptions: lineGraphPayload) => {
+  let {categories, data, title} = lineGraphOptions
+  {
+    chart: {
+      \"type": "line",
+      spacingLeft: 20,
+      spacingRight: 20,
+    },
+    title: {
+      text: "",
+    },
+    xAxis: {
+      categories,
+      crosshair: true,
+      lineWidth: 1,
+      tickWidth: 1,
+      labels: {
+        align: "center",
+        style: {
+          color: "#666",
+        },
+        y: 35,
+      },
+      gridLineWidth: 1,
+      gridLineColor: "#e6e6e6",
+      tickmarkPlacement: "on",
+      endOnTick: false,
+      startOnTick: false,
+    },
+    yAxis: {
+      title,
+      gridLineWidth: 1,
+      gridLineColor: "#e6e6e6",
+      gridLineDashStyle: "Dash",
+      min: 0,
+    },
+    plotOptions: {
+      line: {
+        marker: {
+          enabled: false,
+        },
+      },
+    },
+    series: data,
+    credits: {
+      enabled: false,
+    },
+  }
+}

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

@@ -1,8 +1,12 @@
+external sankeyGraphOptionsToJson: SankeyGraphTypes.sankeyGraphOptions => JSON.t = "%identity"
+
 @react.component
-let make = (~options) => {
+let make = (~entity, ~data: JSON.t) => {
+  open NewAnalyticsTypes
   Highcharts.sankeyChartModule(Highcharts.highchartsModule)
-
+  let data = entity.getObjects(data)
+  let options = entity.getChatOptions(data)
   <Highcharts.Chart
-    options={options->Identity.genericTypeToJson} highcharts={Highcharts.highcharts}
+    options={options->sankeyGraphOptionsToJson} highcharts={Highcharts.highcharts}
   />
 }

src/screens/NewAnalytics/OverViewAnalytics/OverViewAnalytics.res

@@ -1,6 +1,34 @@
+module PaymentsProcessed = {
+  open NewAnalyticsTypes
+  open NewAnalyticsHelper
+  open LineGraphTypes
+  @react.component
+  let make = (~entity: entity<lineGraphPayload, lineGraphOptions>) => {
+    let (paymentsProcessed, setpaymentsProcessed) = React.useState(_ => JSON.Encode.null)
+    let getPaymentsProcessed = async () => {
+      try {
+        setpaymentsProcessed(_ => JSON.Encode.null)
+      } catch {
+      | _ => ()
+      }
+    }
+    React.useEffect(() => {
+      getPaymentsProcessed()->ignore
+      None
+    }, [])
+    <div>
+      <h2 className="font-600 text-xl text-jp-gray-900 pb-5"> {entity.title->React.string} </h2>
+      <Card>
+        <div className="mr-3 my-10">
+          <LineGraph entity={entity} data={paymentsProcessed} />
+        </div>
+      </Card>
+    </div>
+  }
+}
 @react.component
 let make = () => {
   <div className="flex flex-col gap-5 mt-5">
-    <LineGraph entity={NewPaymentAnalyticsEntity.paymentsProcessedEntity} />
+    <PaymentsProcessed entity={OverViewAnalyticsEntity.paymentsProcessed} />
   </div>
 }

src/screens/NewAnalytics/OverViewAnalytics/OverViewAnalyticsEntity.res

@@ -1 +1,11 @@
-
+open NewAnalyticsTypes
+let paymentsProcessed: entity<LineGraphTypes.lineGraphPayload, LineGraphTypes.lineGraphOptions> = {
+  requestBodyConfig: {
+    delta: false,
+    metrics: [#payment_processed_amount],
+  },
+  title: "Payments Processed",
+  domain: #payments,
+  getObjects: OverViewAnalyticsUtils.paymentsProcessedMapper,
+  getChatOptions: LineGraphUtils.getLineGraphOptions,
+}

src/screens/NewAnalytics/OverViewAnalytics/OverViewAnalyticsUtils.res

@@ -1 +1,26 @@
-
+let paymentsProcessedMapper = (_json): LineGraphTypes.lineGraphPayload => {
+  open LineGraphTypes
+  let categories = [
+    "01 Aug",
+    "02 Aug",
+    "03 Aug",
+    "04 Aug",
+    "05 Aug",
+    "06 Aug",
+    "07 Aug",
+    "08 Aug",
+    "09 Aug",
+    "10 Aug",
+    "11 Aug",
+  ]
+  let data = {
+    showInLegend: false,
+    name: "Series 1",
+    data: [3000, 5000, 7000, 5360, 4500, 6800, 5400, 3000, 0, 0],
+    color: "#2f7ed8",
+  }
+  let title = {
+    text: "USD",
+  }
+  {categories, data, title}
+}

src/screens/NewAnalytics/PaymentAnalytics/NewPaymentAnalytics.res

@@ -1,19 +1,15 @@
 // html code comes here
 
-module PaymentLifeCycle = {
+module PaymentsLifeCycle = {
   open NewAnalyticsTypes
   open NewAnalyticsHelper
   open SankeyGraphTypes
   @react.component
   let make = (~entity: entity<sankeyPayload, sankeyGraphOptions>) => {
-    let data = entity.getObjects(JSON.Encode.null)
-    let options = entity.getChatOptions(data)
-    let (lifeCycleOptions, setLifeCycleOptions) = React.useState(_ => options)
+    let (paymentsLifeCycle, setPaymentsLifeCycle) = React.useState(_ => JSON.Encode.null)
     let getPaymentLieCycleData = async () => {
       try {
-        let apiData = entity.getObjects(JSON.Encode.null)
-        let options = entity.getChatOptions(apiData)
-        setLifeCycleOptions(_ => options)
+        setPaymentsLifeCycle(_ => JSON.Encode.null)
       } catch {
       | _ => ()
       }
@@ -26,7 +22,7 @@ module PaymentLifeCycle = {
       <h2 className="font-600 text-xl text-jp-gray-900 pb-5"> {entity.title->React.string} </h2>
       <Card>
         <div className="mr-3 my-10">
-          <SankeyGraph options={lifeCycleOptions} />
+          <SankeyGraph entity={entity} data={paymentsLifeCycle} />
         </div>
       </Card>
     </div>
@@ -37,6 +33,6 @@ module PaymentLifeCycle = {
 let make = () => {
   open NewPaymentAnalyticsEntity
   <div className="flex flex-col gap-5 mt-5">
-    <PaymentLifeCycle entity={paymentLifeCycleEntity} />
+    <PaymentsLifeCycle entity={paymentsLifeCycleEntity} />
   </div>
 }

src/screens/NewAnalytics/PaymentAnalytics/NewPaymentAnalyticsEntity.res

@@ -1,17 +1,7 @@
 open NewAnalyticsTypes
-let paymentsProcessedEntity: entity<LineGraphTypes.seriresType, RescriptCore.JSON.t> = {
-  requestBodyConfig: {
-    delta: false,
-    metrics: [#payment_processed_amount],
-  },
-  title: "Payments Processed",
-  domain: #payments,
-  getObjects: NewPaymentAnalyticsUtils.getPaymentsProcessed,
-  getChatOptions: NewPaymentAnalyticsUtils.getPaymentsProcessedOptions,
-}
 
 // Need to be changed later
-let paymentLifeCycleEntity: entity<
+let paymentsLifeCycleEntity: entity<
   SankeyGraphTypes.sankeyPayload,
   SankeyGraphTypes.sankeyGraphOptions,
 > = {
@@ -21,6 +11,6 @@ let paymentLifeCycleEntity: entity<
   },
   title: "Payments Lifecycle",
   domain: #payments,
-  getObjects: NewPaymentAnalyticsUtils.transformPaymentLifeCycle,
+  getObjects: NewPaymentAnalyticsUtils.paymentsLifeCycleMapper,
   getChatOptions: SankeyGraphUtils.getSankyGraphOptions,
 }