-
Notifications
You must be signed in to change notification settings - Fork 26
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: failed payment distribution graph (#1528)
Co-authored-by: Jeeva Ramachandran <[email protected]> Co-authored-by: Sagar Naik <[email protected]>
- Loading branch information
1 parent
d32e536
commit 470b582
Showing
10 changed files
with
337 additions
and
18 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
155 changes: 155 additions & 0 deletions
155
...s/NewAnalytics/PaymentAnalytics/FailedPaymentsDistribution/FailedPaymentsDistribution.res
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,155 @@ | ||
open NewAnalyticsTypes | ||
open NewAnalyticsHelper | ||
open NewPaymentAnalyticsEntity | ||
open BarGraphTypes | ||
open FailedPaymentsDistributionUtils | ||
|
||
module TableModule = { | ||
@react.component | ||
let make = (~data, ~className="", ~selectedTab: string) => { | ||
let (offset, setOffset) = React.useState(_ => 0) | ||
let defaultSort: Table.sortedObject = { | ||
key: "", | ||
order: Table.INC, | ||
} | ||
let tableBorderClass = "border-2 border-solid border-jp-gray-940 border-collapse border-opacity-30 dark:border-jp-gray-dark_table_border_color dark:border-opacity-30" | ||
let visibleColumns = visibleColumns->Array.concat([selectedTab->getDimentionType]) | ||
let tableData = getTableData(data) | ||
|
||
<div className> | ||
<LoadedTable | ||
visibleColumns | ||
title=" " | ||
hideTitle=true | ||
actualData={tableData} | ||
entity=failedPaymentsDistributionTableEntity | ||
resultsPerPage=10 | ||
totalResults={tableData->Array.length} | ||
offset | ||
setOffset | ||
defaultSort | ||
currrentFetchCount={tableData->Array.length} | ||
tableLocalFilter=false | ||
tableheadingClass=tableBorderClass | ||
tableBorderClass | ||
ignoreHeaderBg=true | ||
tableDataBorderClass=tableBorderClass | ||
isAnalyticsModule=true | ||
/> | ||
</div> | ||
} | ||
} | ||
|
||
module FailedPaymentsDistributionHeader = { | ||
@react.component | ||
let make = (~viewType, ~setViewType, ~groupBy, ~setGroupBy) => { | ||
let setViewType = value => { | ||
setViewType(_ => value) | ||
} | ||
|
||
let setGroupBy = value => { | ||
setGroupBy(_ => value) | ||
} | ||
|
||
<div className="w-full px-7 py-8 flex justify-between"> | ||
<Tabs option={groupBy} setOption={setGroupBy} options={tabs} /> | ||
<div className="flex gap-2"> | ||
<TabSwitch viewType setViewType /> | ||
</div> | ||
</div> | ||
} | ||
} | ||
|
||
@react.component | ||
let make = ( | ||
~entity: moduleEntity, | ||
~chartEntity: chartEntity<barGraphPayload, barGraphOptions, JSON.t>, | ||
) => { | ||
open LogicUtils | ||
open APIUtils | ||
let getURL = useGetURL() | ||
let updateDetails = useUpdateMethod() | ||
let {filterValueJson} = React.useContext(FilterContext.filterContext) | ||
let (screenState, setScreenState) = React.useState(_ => PageLoaderWrapper.Success) | ||
let (failedPaymentsDistribution, setfailedPaymentsDistribution) = React.useState(_ => | ||
JSON.Encode.array([]) | ||
) | ||
let (viewType, setViewType) = React.useState(_ => Graph) | ||
let (groupBy, setGroupBy) = React.useState(_ => defaulGroupBy) | ||
let startTimeVal = filterValueJson->getString("startTime", "") | ||
let endTimeVal = filterValueJson->getString("endTime", "") | ||
|
||
let getFailedPaymentsDistribution = async () => { | ||
try { | ||
setScreenState(_ => PageLoaderWrapper.Loading) | ||
let url = getURL( | ||
~entityName=ANALYTICS_PAYMENTS, | ||
~methodType=Post, | ||
~id=Some((entity.domain: domain :> string)), | ||
) | ||
|
||
let body = NewAnalyticsUtils.requestBody( | ||
~dimensions=[], | ||
~startTime=startTimeVal, | ||
~endTime=endTimeVal, | ||
~delta=entity.requestBodyConfig.delta, | ||
~filters=entity.requestBodyConfig.filters, | ||
~metrics=entity.requestBodyConfig.metrics, | ||
~groupByNames=[groupBy.value]->Some, | ||
~customFilter=entity.requestBodyConfig.customFilter, | ||
~applyFilterFor=entity.requestBodyConfig.applyFilterFor, | ||
) | ||
|
||
let response = await updateDetails(url, body, Post) | ||
let responseData = response->getDictFromJsonObject->getArrayFromDict("queryData", []) | ||
let arr = | ||
response | ||
->getDictFromJsonObject | ||
->getArrayFromDict("queryData", []) | ||
|
||
if arr->Array.length > 0 { | ||
setfailedPaymentsDistribution(_ => responseData->JSON.Encode.array) | ||
setScreenState(_ => PageLoaderWrapper.Success) | ||
} else { | ||
setScreenState(_ => PageLoaderWrapper.Custom) | ||
} | ||
} catch { | ||
| _ => setScreenState(_ => PageLoaderWrapper.Custom) | ||
} | ||
} | ||
|
||
React.useEffect(() => { | ||
if startTimeVal->isNonEmptyString && endTimeVal->isNonEmptyString { | ||
getFailedPaymentsDistribution()->ignore | ||
} | ||
None | ||
}, [startTimeVal, endTimeVal, groupBy.value]) | ||
|
||
<div> | ||
<ModuleHeader title={entity.title} /> | ||
<Card> | ||
<PageLoaderWrapper | ||
screenState customLoader={<Shimmer layoutId=entity.title />} customUI={<NoData />}> | ||
<FailedPaymentsDistributionHeader viewType setViewType groupBy setGroupBy /> | ||
<div className="mb-5"> | ||
{switch viewType { | ||
| Graph => | ||
<BarGraph | ||
entity={chartEntity} | ||
object={chartEntity.getObjects( | ||
~data=failedPaymentsDistribution, | ||
~xKey=getXKey(~isSmartRetry=false), | ||
~yKey=groupBy.value, | ||
)} | ||
className="mr-3" | ||
/> | ||
| Table => | ||
<TableModule | ||
data={failedPaymentsDistribution} className="mx-7" selectedTab={groupBy.value} | ||
/> | ||
}} | ||
</div> | ||
</PageLoaderWrapper> | ||
</Card> | ||
</div> | ||
} |
5 changes: 5 additions & 0 deletions
5
...Analytics/PaymentAnalytics/FailedPaymentsDistribution/FailedPaymentsDistributionTypes.res
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
type failedPaymentsDistributionObject = { | ||
payments_failure_rate_distribution: int, | ||
connector: string, | ||
payment_method: string, | ||
} |
117 changes: 117 additions & 0 deletions
117
...Analytics/PaymentAnalytics/FailedPaymentsDistribution/FailedPaymentsDistributionUtils.res
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,117 @@ | ||
open NewPaymentAnalyticsUtils | ||
open FailedPaymentsDistributionTypes | ||
open LogicUtils | ||
|
||
let getDimentionType = string => { | ||
switch string { | ||
| "connector" => #connector | ||
| "payment_method" => #payment_method | ||
| "payment_method_type" => #payment_method_type | ||
| "card_network" => #card_network | ||
| "authentication_type" | _ => #authentication_type | ||
} | ||
} | ||
|
||
let getXKey = (~isSmartRetry) => { | ||
switch isSmartRetry { | ||
| true => "payments_failure_rate_distribution" | ||
| false => "payments_failure_rate_distribution_without_smart_retries" | ||
} | ||
} | ||
|
||
let failedPaymentsDistributionMapper = ( | ||
~data: JSON.t, | ||
~xKey: string, | ||
~yKey: string, | ||
): BarGraphTypes.barGraphPayload => { | ||
open BarGraphTypes | ||
let categories = [data]->JSON.Encode.array->getCategories(0, yKey) | ||
let barGraphData = getBarGraphObj( | ||
~array=data->getArrayFromJson([]), | ||
~key=xKey, | ||
~name=xKey->snakeToTitle, | ||
~color="#BA3535", | ||
) | ||
let title = { | ||
text: "", | ||
} | ||
{categories, data: [barGraphData], title} | ||
} | ||
|
||
open NewAnalyticsTypes | ||
let visibleColumns: array<metrics> = [#payment_failed_rate] | ||
|
||
let tableItemToObjMapper: Dict.t<JSON.t> => failedPaymentsDistributionObject = dict => { | ||
{ | ||
payments_failure_rate_distribution: dict->getInt("payments_failure_rate_distribution", 0), | ||
connector: dict->getString((#connector: metrics :> string), ""), | ||
payment_method: dict->getString((#payment_method: metrics :> string), ""), | ||
} | ||
} | ||
|
||
let getObjects: JSON.t => array<failedPaymentsDistributionObject> = json => { | ||
json | ||
->LogicUtils.getArrayFromJson([]) | ||
->Array.map(item => { | ||
tableItemToObjMapper(item->getDictFromJsonObject) | ||
}) | ||
} | ||
|
||
let getHeading = (colType: metrics) => { | ||
switch colType { | ||
| #payment_failed_rate => | ||
Table.makeHeaderInfo( | ||
~key=(#payment_failed_rate: metrics :> string), | ||
~title="Payments Failed Rate", | ||
~dataType=TextType, | ||
) | ||
| #connector => | ||
Table.makeHeaderInfo( | ||
~key=(#connector: metrics :> string), | ||
~title="Connector", | ||
~dataType=TextType, | ||
) | ||
| #payment_method | _ => | ||
Table.makeHeaderInfo( | ||
~key=(#payment_method: metrics :> string), | ||
~title="Payment Method", | ||
~dataType=TextType, | ||
) | ||
} | ||
} | ||
|
||
let getCell = (obj, colType: metrics): Table.cell => { | ||
switch colType { | ||
| #payment_failed_rate => Text(obj.payments_failure_rate_distribution->Int.toString) | ||
| #connector => Text(obj.connector) | ||
| #payment_method | _ => Text(obj.payment_method) | ||
} | ||
} | ||
|
||
let getTableData = json => { | ||
json->getArrayDataFromJson(tableItemToObjMapper)->Array.map(Nullable.make) | ||
} | ||
|
||
let tabs = [ | ||
{ | ||
label: "Connector", | ||
value: (#connector: dimension :> string), | ||
}, | ||
{ | ||
label: "Payment Method", | ||
value: (#payment_method: dimension :> string), | ||
}, | ||
{ | ||
label: "Payment Method Type", | ||
value: (#payment_method_type: dimension :> string), | ||
}, | ||
{ | ||
label: "Authentication Type", | ||
value: (#authentication_type: dimension :> string), | ||
}, | ||
] | ||
|
||
let defaulGroupBy = { | ||
label: "Connector", | ||
value: (#connector: dimension :> string), | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.