Skip to content

Commit

Permalink
wip
Browse files Browse the repository at this point in the history
  • Loading branch information
@r4zendev
r4zendev committed Dec 31, 2024
1 parent 8e9968f commit eb3d3fb
Show file tree
Hide file tree
Showing 5 changed files with 1,342 additions and 77 deletions.
1 change: 1 addition & 0 deletions packages/ui/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,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"
Expand Down
57 changes: 40 additions & 17 deletions packages/ui/src/components/templates/report/adapters/report-adapter.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -170,23 +179,37 @@ 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[];
}>,
// Example data:
// {
// "trafficSources": [
// "search / organic - 46.31%",
// "direct - 42.68%"
// ],
// "engagements": [
// "Time on site - 117.09 seconds",
// "Page per visit - 2.71",
// "Bounce rate - 44.76%"
// ],
// "montlyVisitsIndicators": [
// "May 2024 - 1987263",
// "June 2024 - 3500503",
// "July 2024 - 1671071",
// "August 2024 - 1793033",
// "September 2024 - 2520118",
// "October 2024 - 3384101"
// ]
// }
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,
};
Expand Down
144 changes: 116 additions & 28 deletions ...s/ui/src/components/templates/report/components/WebsiteCredibility/WebsiteCredibility.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,17 @@
import { RiskIndicators } from '@/components/molecules/RiskIndicators/RiskIndicators';
import {
Bar,
BarChart,
CartesianGrid,
Cell,
Legend,
Pie,
PieChart,
ResponsiveContainer,
Tooltip,
XAxis,
YAxis,
} from 'recharts';
import React, { FunctionComponent } from 'react';
import { Card, CardContent, CardHeader } from '@/components';
import { ctw } from '@/common';
Expand All @@ -12,18 +25,22 @@ export const WebsiteCredibility: FunctionComponent<{
onlineReputationAnalysis: Array<{ label: string; url: string }>;
pricingAnalysis: string[];
websiteStructureAndContentEvaluation: string[];
trafficAnalysis: Array<{
label: string;
items: string[];
}>;
trafficAnalysis: Record<
'trafficSources' | 'montlyVisitsIndicators' | 'engagements',
Array<{
label: string;
value: string;
}>
>;
}> = ({
violations,
onlineReputationAnalysis,
pricingAnalysis,
websiteStructureAndContentEvaluation,
trafficAnalysis,
}) => {
const isEmptyTrafficAnalysis = !trafficAnalysis.flatMap(({ items }) => items)?.length;
console.log(trafficAnalysis);
// const isEmptyTrafficAnalysis = !trafficAnalysis.flatMap(({ items }) => items)?.length;

return (
<div className={'space-y-8'}>
Expand Down Expand Up @@ -90,29 +107,100 @@ export const WebsiteCredibility: FunctionComponent<{
</ol>
</CardContent>
</Card>
<Card>
<CardHeader className={'pt-4 font-bold'}>Traffic Analysis</CardHeader>
<CardContent className={'space-y-4'}>
{!isEmptyTrafficAnalysis &&
trafficAnalysis?.map(({ label, items }) => (
<ul className={'ps-4'} key={label}>
<li className={'list-disc'}>{label}</li>
<ul className={'ps-4'}>
{!!items?.length &&
items.map(item => (
<li key={label} className={'list-disc'}>
{item}
</li>
))}
{!isEmptyTrafficAnalysis && !items?.length && (
<li>No {label?.toLowerCase()} detected.</li>
)}
</ul>
</ul>
))}
{isEmptyTrafficAnalysis && <>No traffic data detected.</>}
</CardContent>
</Card>
{/* <Card> */}
<h3 className={'pt-4 font-bold'}>Traffic Analysis</h3>
{/* <CardContent className={'space-y-4'}> */}
<div className="flex gap-8 w-full h-80">
<div className="h-full w-3/5">
<ResponsiveContainer width="100%" height="100%">
<BarChart
data={trafficAnalysis.montlyVisitsIndicators}
margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
barSize={46}
>
<CartesianGrid vertical={false} strokeDasharray="0" />
<XAxis dataKey="label" />
<YAxis />
<Tooltip />
{/* <Legend verticalAlign="top" align={'right'} content={<CustomLegend />} /> */}
<Bar dataKey="value" fill="rgb(0, 122, 255)" radius={10} />
</BarChart>
</ResponsiveContainer>
</div>

<div className="flex flex-col gap-8 h-full w-2/5">
<ResponsiveContainer width="100%" height="50%">
<PieChart>
<text
x={35}
y={37}
textAnchor="middle"
dominantBaseline="middle"
// className={ctw('font-bold', {
// 'text-sm': assignedTags?.toString().length >= 5,
// })}
>
Hello world
</text>
<Pie
data={trafficAnalysis.trafficSources}
cx={30}
cy={30}
innerRadius={28}
outerRadius={35}
fill="#8884d8"
paddingAngle={5}
dataKey="value"
cornerRadius={9999}
>
{/* {tagsWithColor?.map(filter => {
return (
<Cell
className={'outline-none'}
key={filter.id}
style={{
fill: filter.color,
}}
/>
);
})} */}
</Pie>
</PieChart>
</ResponsiveContainer>

<Card className="h-1/2 w-full">
<CardHeader className="pt-4 font-bold">Engagement</CardHeader>
<CardContent className="flex items-center gap-6">
{trafficAnalysis?.engagements.map(({ label, value }) => (
<div key={label} className="basis-1/3">
<p className="text-gray-500">{label}</p>
<p className="font-bold">{value}</p>
</div>
))}
</CardContent>
</Card>
</div>
</div>
{/* {!isEmptyTrafficAnalysis &&
trafficAnalysis?.map(({ label, items }) => (
<ul className={'ps-4'} key={label}>
<li className={'list-disc'}>{label}</li>
<ul className={'ps-4'}>
{!!items?.length &&
items.map(item => (
<li key={label} className={'list-disc'}>
{item}
</li>
))}
{!isEmptyTrafficAnalysis && !items?.length && (
<li>No {label?.toLowerCase()} detected.</li>
)}
</ul>
</ul>
))} */}
{/* {isEmptyTrafficAnalysis && <>No traffic data detected.</>} */}
{/* </CardContent>
</Card> */}
</div>
);
};
Loading

0 comments on commit eb3d3fb

Please sign in to comment.