Added country data to visitors

elysia/src/index.ts

@@ -65,6 +65,7 @@ app.get(
 
 		const visitor_data = {
 			shortener_id: shortener[0].id,
+			country: geolocation.data.location.country.name as string,
 			country_code: geolocation.data.location.country.alpha2 as string,
 		}
 
@@ -104,10 +105,11 @@ app.get('/link/:shortenerCode', async ({ params: { shortenerCode } }) => {
 		.selectFrom('visitor')
 		.select(({ fn }) => [
 			'visitor.country_code',
+			'visitor.country',
 			fn.count<number>('visitor.id').as('visitor_count'),
 		])
 		.where('visitor.shortener_id', '=', shorteners[0].id)
-		.groupBy('visitor.country_code')
+		.groupBy(['visitor.country_code', 'visitor.country'])
 		.execute()
 
 	return { shorteners, visitors }

elysia/src/types.ts

@@ -25,6 +25,7 @@ export type ShortenerUpdate = Updateable<ShortenerTable>
 export interface VisitorTable {
 	id: Generated<number>
 	shortener_id: number
+	country: string
 	country_code: string
 	created_at: ColumnType<Date, string | undefined, never>
 }

react-frontend/src/pages/dashboard.tsx

@@ -33,6 +33,11 @@ const months = [
 ] as const
 
 type VisitorData = { name: string; total: number }
+type CountryData = {
+	country_code: string
+	country: string
+	visitor_count: string
+}
 let visitor_data: VisitorData[] = []
 months.forEach((months) => {
 	visitor_data.push({ name: months, total: 0 })
@@ -45,6 +50,7 @@ export default function Dashboard() {
 	const [shorteners, setShorteners] = useState<Shortener[]>([])
 	const [isLoading, setIsLoading] = useState<boolean>(false)
 	const { shortenerId } = useParams()
+	const [countryVisitor, setCountryVisitor] = useState<CountryData[]>([])
 
 	const [visitorData, setVisitorData] = useState<VisitorData[]>(visitor_data)
 
@@ -53,11 +59,13 @@ export default function Dashboard() {
 		const response = await fetch(backend_url + '/link/' + shortenerId, {
 			method: 'GET',
 		})
+		const data = await response.json()
+		const shortenersData = data.shorteners as Shortener[]
+		const countryData = data.visitors as CountryData[]
 
-		const data = (await response.json()).shorteners as Shortener[]
-
-		setShorteners(data)
-		calculateShortenerData(data[0])
+		setShorteners(shortenersData)
+		setCountryVisitor(countryData)
+		calculateShortenerData(shortenersData[0])
 		setIsLoading(false)
 	}
 
@@ -142,6 +150,28 @@ export default function Dashboard() {
 									<Overview visitorData={visitorData} />
 								</CardContent>
 							</Card>
+							<Card className='col-span-3'>
+								<CardHeader>
+									<CardTitle>Top Countries</CardTitle>
+								</CardHeader>
+								<CardContent>
+									{countryVisitor.map((country) => {
+										return (
+											<div className='flex w-full items-center justify-between'>
+												<div className='flex w-1/2 items-center justify-between gap-2'>
+													<img
+														src={`https://flagsapi.com/${country.country_code}/flat/64.png`}
+													/>
+													<div>{country.country}</div>
+												</div>
+												<div>
+													{country.visitor_count}
+												</div>
+											</div>
+										)
+									})}
+								</CardContent>
+							</Card>
 						</div>
 					</div>
 				</div>