feat: improved traffic visualization (BAL-3271) (#2922)

ballerine-io · Jan 1, 2025 · 8fabbc9 · 8fabbc9
1 parent bcd15d5
commit 8fabbc9
Show file tree

Hide file tree

Showing 15 changed files with 317 additions and 85 deletions.
diff --git a/apps/backoffice-v2/CHANGELOG.md b/apps/backoffice-v2/CHANGELOG.md
@@ -1,5 +1,14 @@
 # @ballerine/backoffice-v2
 
+## 0.7.88
+
+### Patch Changes
+
+- Updated traffic-related stats in the "Website credibility" tab.
+- Updated dependencies
+  - @ballerine/react-pdf-toolkit@1.2.57
+  - @ballerine/ui@0.5.57
+
 ## 0.7.87
 
 ### Patch Changes

diff --git a/apps/backoffice-v2/package.json b/apps/backoffice-v2/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ballerine/backoffice-v2",
-  "version": "0.7.87",
+  "version": "0.7.88",
   "description": "Ballerine - Backoffice",
   "homepage": "https://github.com/ballerine-io/ballerine",
   "type": "module",
@@ -53,10 +53,10 @@
   "dependencies": {
     "@ballerine/blocks": "0.2.30",
     "@ballerine/common": "0.9.63",
-    "@ballerine/react-pdf-toolkit": "^1.2.54",
-    "@ballerine/ui": "^0.5.54",
     "@ballerine/workflow-browser-sdk": "0.6.82",
     "@ballerine/workflow-node-sdk": "0.6.82",
+    "@ballerine/react-pdf-toolkit": "^1.2.57",
+    "@ballerine/ui": "^0.5.57",
     "@botpress/webchat": "^2.1.10",
     "@botpress/webchat-generator": "^0.2.9",
     "@fontsource/inter": "^4.5.15",

diff --git a/apps/kyb-app/CHANGELOG.md b/apps/kyb-app/CHANGELOG.md
@@ -1,5 +1,13 @@
 # kyb-app
 
+## 0.3.103
+
+### Patch Changes
+
+- Updated traffic-related stats in the "Website credibility" tab.
+- Updated dependencies
+  - @ballerine/ui@0.5.57
+
 ## 0.3.102
 
 ### Patch Changes

diff --git a/apps/kyb-app/package.json b/apps/kyb-app/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@ballerine/kyb-app",
   "private": true,
-  "version": "0.3.102",
+  "version": "0.3.103",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -17,8 +17,8 @@
   "dependencies": {
     "@ballerine/blocks": "0.2.30",
     "@ballerine/common": "^0.9.63",
-    "@ballerine/ui": "0.5.56",
     "@ballerine/workflow-browser-sdk": "0.6.82",
+    "@ballerine/ui": "0.5.57",
     "@lukemorales/query-key-factory": "^1.0.3",
     "@radix-ui/react-icons": "^1.3.0",
     "@rjsf/core": "^5.9.0",

diff --git a/packages/react-pdf-toolkit/CHANGELOG.md b/packages/react-pdf-toolkit/CHANGELOG.md
@@ -1,5 +1,13 @@
 # @ballerine/react-pdf-toolkit
 
+## 1.2.57
+
+### Patch Changes
+
+- Updated traffic-related stats in the "Website credibility" tab.
+- Updated dependencies
+  - @ballerine/ui@0.5.57
+
 ## 1.2.56
 
 ### Patch Changes

diff --git a/packages/react-pdf-toolkit/package.json b/packages/react-pdf-toolkit/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@ballerine/react-pdf-toolkit",
   "private": false,
-  "version": "1.2.56",
+  "version": "1.2.57",
   "types": "./dist/build.d.ts",
   "main": "./dist/react-pdf-toolkit.js",
   "module": "./dist/react-pdf-toolkit.mjs",
@@ -27,7 +27,7 @@
   },
   "dependencies": {
     "@ballerine/config": "^1.1.28",
-    "@ballerine/ui": "0.5.56",
+    "@ballerine/ui": "0.5.57",
     "@react-pdf/renderer": "^3.1.14",
     "@sinclair/typebox": "^0.31.7",
     "ajv": "^8.12.0",

diff --git a/packages/ui/CHANGELOG.md b/packages/ui/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @ballerine/ui
 
+## 0.5.57
+
+### Patch Changes
+
+- Updated traffic-related stats in the "Website credibility" tab.
+
 ## 0.5.56
 
 ### Patch Changes

diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@ballerine/ui",
   "private": false,
-  "version": "0.5.56",
+  "version": "0.5.57",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -44,6 +44,7 @@
     "@radix-ui/react-radio-group": "^1.1.3",
     "@radix-ui/react-scroll-area": "^1.0.2",
     "@radix-ui/react-slot": "^1.0.1",
+    "@radix-ui/react-tooltip": "^1.0.7",
     "@rjsf/core": "^5.9.0",
     "@rjsf/utils": "^5.9.0",
     "@rjsf/validator-ajv8": "^5.9.0",
@@ -61,6 +62,7 @@
     "react-image": "^4.1.0",
     "react-json-view": "^1.21.3",
     "react-phone-input-2": "^2.15.1",
+    "recharts": "^2.7.2",
     "string-ts": "^1.2.0",
     "tailwind-merge": "^1.10.0",
     "zod": "^3.23.4"

diff --git a/packages/ui/src/components/atoms/Tooltip/Tooltip.tsx b/packages/ui/src/components/atoms/Tooltip/Tooltip.tsx
@@ -0,0 +1,29 @@
+'use client';
+
+import { ctw } from '@/common/utils/ctw';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import * as React from 'react';
+
+const Tooltip = TooltipPrimitive.Root;
+
+const TooltipProvider = TooltipPrimitive.Provider;
+
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={ctw(
+      'z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+      className,
+    )}
+    {...props}
+  />
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+export { Tooltip, TooltipContent, TooltipTrigger, TooltipProvider };
diff --git a/packages/ui/src/components/atoms/Tooltip/index.ts b/packages/ui/src/components/atoms/Tooltip/index.ts
@@ -0,0 +1 @@
+export * from './Tooltip';
diff --git a/packages/ui/src/components/atoms/index.ts b/packages/ui/src/components/atoms/index.ts
@@ -23,4 +23,5 @@ export * from './ScrollArea';
 export * from './Skeleton';
 export * from './Table';
 export * from './TextWithNAFallback';
+export * from './Tooltip';
 export * from './WarningFilledSvg';
diff --git a/packages/ui/src/components/templates/report/adapters/report-adapter.ts b/packages/ui/src/components/templates/report/adapters/report-adapter.ts
@@ -72,6 +72,15 @@ const normalizeRiskLevel = (riskTypeLevels: Record<string, SeverityType>) => {
   }, {} as Record<string, SeverityType>);
 };
 
+const normalizeHyphenedDataString = (str: string) => {
+  const parts = str.split(' - ');
+
+  return {
+    label: parts.length > 1 ? parts.slice(0, -1).join(' - ') : parts.at(0),
+    value: parts.at(-1),
+  };
+};
+
 export const reportAdapter = {
   DEFAULT: (report: Record<string, any>) => {
     return {
@@ -170,23 +179,17 @@ export const reportAdapter = {
       pricingAnalysis: report?.transactionLaundering?.pricingAnalysis?.indicators,
       websiteStructureAndContentEvaluation:
         report?.transactionLaundering?.websiteStructureEvaluation?.indicators,
-      trafficAnalysis: [
-        {
-          label: 'Estimated Monthly Visits',
-          items: report?.transactionLaundering?.trafficAnalysis?.montlyVisitsIndicators ?? [],
-        },
-        {
-          label: 'Traffic Sources',
-          items: report?.transactionLaundering?.trafficAnalysis?.trafficSources ?? [],
-        },
-        {
-          label: 'Engagements',
-          items: report?.transactionLaundering?.trafficAnalysis?.engagements ?? [],
-        },
-      ] satisfies Array<{
-        label: string;
-        items: string[];
-      }>,
+      trafficAnalysis: {
+        montlyVisitsIndicators: (
+          report?.transactionLaundering?.trafficAnalysis?.montlyVisitsIndicators ?? []
+        ).map(normalizeHyphenedDataString),
+        trafficSources: (report?.transactionLaundering?.trafficAnalysis?.trafficSources ?? []).map(
+          normalizeHyphenedDataString,
+        ),
+        engagements: (report?.transactionLaundering?.trafficAnalysis?.engagements ?? []).map(
+          normalizeHyphenedDataString,
+        ),
+      },
       homepageScreenshotUrl: report?.homepageScreenshot,
       formattedMcc: report?.lineOfBusiness?.formattedMcc,
     };