From 00bfa5f523b2a91bc742a3116fa5eaa4d68579bc Mon Sep 17 00:00:00 2001 From: Sasha Mysak Date: Thu, 16 Jan 2025 13:46:12 +0100 Subject: [PATCH 1/2] fix: chart graph cut off --- .../WebsiteCredibility/WebsiteCredibility.tsx | 122 ++++++++++++++---- 1 file changed, 96 insertions(+), 26 deletions(-) diff --git a/packages/ui/src/components/templates/report/components/WebsiteCredibility/WebsiteCredibility.tsx b/packages/ui/src/components/templates/report/components/WebsiteCredibility/WebsiteCredibility.tsx index 546d0f2628..1d296ffe6e 100644 --- a/packages/ui/src/components/templates/report/components/WebsiteCredibility/WebsiteCredibility.tsx +++ b/packages/ui/src/components/templates/report/components/WebsiteCredibility/WebsiteCredibility.tsx @@ -1,20 +1,5 @@ -import { ctw } from '@/common'; -import { Card, CardContent, CardHeader } from '@/components'; -import { - CardDescription, - ChartContainer, - ChartTooltip, - ChartTooltipContent, - Tooltip, - TooltipContent, - TooltipProvider, - TooltipTrigger, -} from '@/components/atoms'; -import { BallerineLink } from '@/components/atoms/BallerineLink/BallerineLink'; -import { ContentTooltip } from '@/components/molecules/ContentTooltip/ContentTooltip'; -import { RiskIndicators } from '@/components/molecules/RiskIndicators/RiskIndicators'; import dayjs from 'dayjs'; -import { InfoIcon } from 'lucide-react'; +import { InfoIcon, TrendingDown, TrendingUp } from 'lucide-react'; import { FunctionComponent, useMemo } from 'react'; import { Area, @@ -30,6 +15,23 @@ import { } from 'recharts'; import { capitalize } from 'string-ts'; +import { ctw } from '@/common'; +import { Card, CardContent, CardHeader } from '@/components'; +import { + CardDescription, + CardFooter, + ChartContainer, + ChartTooltip, + ChartTooltipContent, + Tooltip, + TooltipContent, + TooltipProvider, + TooltipTrigger, +} from '@/components/atoms'; +import { BallerineLink } from '@/components/atoms/BallerineLink/BallerineLink'; +import { ContentTooltip } from '@/components/molecules/ContentTooltip/ContentTooltip'; +import { RiskIndicators } from '@/components/molecules/RiskIndicators/RiskIndicators'; + const engagementMetricsMapper = { 'Time on site': { description: 'The average amount of time visitors spend on the website.', @@ -77,17 +79,58 @@ export const WebsiteCredibility: FunctionComponent<{ const trafficSources = useMemo(() => { if (!trafficAnalysis?.trafficSources?.length) return []; - return trafficAnalysis.trafficSources - .map(({ label, value }) => ({ label, value: parseFloat(value) })) - .concat({ - label: 'Other', - value: - 100 - - trafficAnalysis.trafficSources.reduce((acc, item) => acc + parseFloat(item.value), 0), - }) - .map(({ label, value }) => ({ label, value: parseFloat(value.toFixed(2)) })); + const values = trafficAnalysis.trafficSources.map(({ label, value }) => ({ + label, + value: parseFloat(value), + })); + + const remainder = 100 - values.reduce((acc, item) => acc + item.value, 0); + + const existingOtherIdx = values.findIndex(({ label }) => label === 'other'); + + if (existingOtherIdx > -1) { + values[existingOtherIdx]!.value = values[existingOtherIdx]!.value + remainder; + } else if (remainder > 0) { + values.push({ label: 'other', value: remainder }); + } + + return values; }, [trafficAnalysis.trafficSources]); + let minVisitors = 0; + let maxVisitors = 0; + + trafficAnalysis.montlyVisitsIndicators.forEach(({ value }) => { + const num = parseInt(value); + + if (num < minVisitors) { + minVisitors = num; + } + + if (num > maxVisitors) { + maxVisitors = num; + } + }); + + const visitorsTotalArea = maxVisitors - minVisitors; + + const calculateTrend = (data: Array<{ label: string; value: string }>) => { + if (data.length < 2) { + return { direction: 'No trend data', percentage: 0 }; + } + + const lastMonthValue = parseInt(data[data.length - 1]?.value ?? '0'); + const previousMonthValue = parseInt(data[data.length - 2]?.value ?? '0'); + const percentageChange = ((lastMonthValue - previousMonthValue) / previousMonthValue) * 100; + const direction = lastMonthValue > previousMonthValue ? 'up' : 'down'; + + return { direction, percentage: Math.abs(percentageChange) }; + }; + + const trend = calculateTrend( + trafficAnalysis.montlyVisitsIndicators.map(({ label, value }) => ({ label, value })), + ); + return (
@@ -216,7 +259,14 @@ export const WebsiteCredibility: FunctionComponent<{ tickFormatter={value => dayjs(value, 'MMMM YYYY').format('MMM YYYY')} /> Math.ceil(dataMax * 1.2)]} + ticks={[ + minVisitors, + Math.trunc(visitorsTotalArea / 4), + Math.trunc(visitorsTotalArea / 2), + Math.trunc((3 * visitorsTotalArea) / 4), + maxVisitors, + ]} + domain={[minVisitors - (maxVisitors * 1.2 - maxVisitors), maxVisitors * 1.2]} tickFormatter={value => Intl.NumberFormat('en', { notation: 'compact' }).format(value) } @@ -249,6 +299,26 @@ export const WebsiteCredibility: FunctionComponent<{
)} + +
+
+
+ {trend.direction !== 'No trend data' && ( + <> + {trend.direction === 'up' ? ( + + ) : ( + + )} + {`Trending ${trend.direction} by ${trend.percentage.toFixed( + 1, + )}% this month`} + + )} +
+
+
+
From f7d40bf8bd90bbded98cd887721b16b6b6aac93d Mon Sep 17 00:00:00 2001 From: Sasha Mysak Date: Thu, 16 Jan 2025 16:04:02 +0100 Subject: [PATCH 2/2] changeset --- apps/kyb-app/CHANGELOG.md | 7 +++++++ apps/kyb-app/package.json | 4 ++-- packages/react-pdf-toolkit/CHANGELOG.md | 7 +++++++ packages/react-pdf-toolkit/package.json | 4 ++-- packages/ui/CHANGELOG.md | 6 ++++++ packages/ui/package.json | 2 +- pnpm-lock.yaml | 12 ++++++------ 7 files changed, 31 insertions(+), 11 deletions(-) diff --git a/apps/kyb-app/CHANGELOG.md b/apps/kyb-app/CHANGELOG.md index 3ce302e21d..58746cba7c 100644 --- a/apps/kyb-app/CHANGELOG.md +++ b/apps/kyb-app/CHANGELOG.md @@ -1,5 +1,12 @@ # kyb-app +## 0.3.111 + +### Patch Changes + +- Updated dependencies + - @ballerine/ui@0.5.64 + ## 0.3.110 ### Patch Changes diff --git a/apps/kyb-app/package.json b/apps/kyb-app/package.json index 4e4d538006..9c6360da61 100644 --- 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.110", + "version": "0.3.111", "type": "module", "scripts": { "dev": "vite", @@ -19,7 +19,7 @@ "@ballerine/blocks": "0.2.32", "@ballerine/common": "^0.9.66", "@ballerine/workflow-browser-sdk": "0.6.85", - "@ballerine/ui": "0.5.63", + "@ballerine/ui": "0.5.64", "@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 index ee9f9a4456..b86f96d41e 100644 --- a/packages/react-pdf-toolkit/CHANGELOG.md +++ b/packages/react-pdf-toolkit/CHANGELOG.md @@ -1,5 +1,12 @@ # @ballerine/react-pdf-toolkit +## 1.2.64 + +### Patch Changes + +- Updated dependencies + - @ballerine/ui@0.5.64 + ## 1.2.63 ### Patch Changes diff --git a/packages/react-pdf-toolkit/package.json b/packages/react-pdf-toolkit/package.json index 39661eb59a..3450d9a987 100644 --- 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.63", + "version": "1.2.64", "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.30", - "@ballerine/ui": "0.5.63", + "@ballerine/ui": "0.5.64", "@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 index e93634bd7e..3ae07fdfbb 100644 --- a/packages/ui/CHANGELOG.md +++ b/packages/ui/CHANGELOG.md @@ -1,5 +1,11 @@ # @ballerine/ui +## 0.5.64 + +### Patch Changes + +- Fixed graph cut off issue + ## 0.5.63 ### Patch Changes diff --git a/packages/ui/package.json b/packages/ui/package.json index ae8b3c0e27..5bf026f7a0 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -1,7 +1,7 @@ { "name": "@ballerine/ui", "private": false, - "version": "0.5.63", + "version": "0.5.64", "type": "module", "main": "dist/index.js", "types": "dist/index.d.ts", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 86f7dda3fa..82cc83ff72 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -536,7 +536,7 @@ importers: specifier: ^0.9.66 version: link:../../packages/common '@ballerine/ui': - specifier: 0.5.63 + specifier: 0.5.64 version: link:../../packages/ui '@ballerine/workflow-browser-sdk': specifier: 0.6.85 @@ -1516,7 +1516,7 @@ importers: specifier: ^1.1.30 version: link:../config '@ballerine/ui': - specifier: 0.5.63 + specifier: 0.5.64 version: link:../ui '@react-pdf/renderer': specifier: ^3.1.14 @@ -20306,7 +20306,7 @@ packages: '@babel/plugin-transform-react-jsx-source': 7.23.3(@babel/core@7.23.3) '@types/babel__core': 7.20.4 react-refresh: 0.14.0 - vite: 4.5.3(@types/node@20.9.2) + vite: 4.5.3(@types/node@18.17.19) transitivePeerDependencies: - supports-color dev: true @@ -38536,7 +38536,7 @@ packages: strip-ansi: 6.0.1 tiny-invariant: 1.3.1 typescript: 5.1.6 - vite: 4.5.3(@types/node@20.9.2) + vite: 4.5.3(@types/node@18.17.19) vscode-languageclient: 7.0.0 vscode-languageserver: 7.0.0 vscode-languageserver-textdocument: 1.0.11 @@ -38667,7 +38667,7 @@ packages: kolorist: 1.8.0 sirv: 2.0.3 ufo: 1.3.2 - vite: 4.5.3(@types/node@20.9.2) + vite: 4.5.3(@types/node@18.17.19) transitivePeerDependencies: - rollup - supports-color @@ -38746,7 +38746,7 @@ packages: debug: 4.3.4(supports-color@8.1.1) globrex: 0.1.2 tsconfck: 2.1.2(typescript@5.1.6) - vite: 4.5.3(@types/node@20.9.2) + vite: 4.5.3(@types/node@18.17.19) transitivePeerDependencies: - supports-color - typescript