Use LocationData type in MapComponent props type. (#42)

* Refactor types on map page to a common file.

This helps in using them later from other places.

* Use LocationData type in MapComponent props type.

* Fix logic issue when getting minimum value.

The current logic will give minimum value as Infinity incase the
array has all values as 0.

* Rename shared metric types.

Author: sbansal1999

apps/dashboard/app/(main)/websites/[id]/map/page.tsx

@@ -11,26 +11,9 @@ import { Skeleton } from '@/components/ui/skeleton';
 import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { useMapLocationData } from '@/hooks/use-dynamic-query';
 import { cn } from '@/lib/utils';
+import type { LocationData } from '@databuddy/shared';
 import { WebsitePageHeader } from '../_components/website-page-header';
 
-interface CountryData {
-	country: string;
-	country_code?: string;
-	visitors: number;
-	pageviews: number;
-}
-
-interface RegionData {
-	country: string;
-	visitors: number;
-	pageviews: number;
-}
-
-interface LocationData {
-	countries: CountryData[];
-	regions: RegionData[];
-}
-
 const MapComponent = dynamic(
 	() =>
 		import('@/components/analytics/map-component').then((mod) => ({

apps/dashboard/components/analytics/map-component.tsx

@@ -8,6 +8,7 @@ import { useEffect, useMemo, useRef, useState } from 'react';
 import { GeoJSON, MapContainer } from 'react-leaflet';
 import { getCountryPopulation } from '@/lib/data';
 import { useCountries } from '@/lib/geo';
+import type { LocationData } from '@databuddy/shared';
 import { CountryFlag } from './icons/CountryFlag';
 
 interface TooltipContent {
@@ -35,7 +36,7 @@ export function MapComponent({
 }: {
 	height: string;
 	mode?: 'total' | 'perCapita';
-	locationData?: any;
+	locationData?: LocationData;
 	isLoading?: boolean;
 }) {
 	const locationsData = locationData;
@@ -46,14 +47,14 @@ export function MapComponent({
 		}
 
 		const validCountries = locationsData.countries.filter(
-			(country: any) => country.country && country.country.trim() !== ''
+			(country) => country.country && country.country.trim() !== ''
 		);
 
 		const totalVisitors =
-			validCountries.reduce((sum: number, c: any) => sum + c.visitors, 0) || 1;
+			validCountries.reduce((sum, c) => sum + c.visitors, 0) || 1;
 
 		return {
-			data: validCountries.map((country: any) => ({
+			data: validCountries.map((country) => ({
 				value:
 					country.country_code?.toUpperCase() || country.country.toUpperCase(),
 				count: country.visitors,
@@ -85,7 +86,7 @@ export function MapComponent({
 			return null;
 		}
 
-		return countryData.data.map((item: any) => {
+		return countryData.data.map((item) => {
 			const population = getCountryPopulation(item.value);
 			const perCapitaValue = population > 0 ? item.count / population : 0;
 			return {
@@ -101,9 +102,10 @@ export function MapComponent({
 		}
 
 		const metricToUse = mode === 'perCapita' ? 'perCapita' : 'count';
-		const values = processedCountryData?.map((d: any) => d[metricToUse]) || [0];
+		const values = processedCountryData?.map((d) => d[metricToUse]) || [0];
 		const maxValue = Math.max(...values);
-		const minValue = Math.min(...values.filter((v: number) => v > 0));
+		const nonZeroValues = values.filter((v) => v > 0);
+		const minValue = nonZeroValues.length > 0 ? Math.min(...nonZeroValues) : 0;
 
 		const baseBlue = '59, 130, 246';
 		const lightBlue = '147, 197, 253';
@@ -135,7 +137,7 @@ export function MapComponent({
 	const handleStyle = (feature: Feature<any>) => {
 		const dataKey = feature?.properties?.ISO_A2;
 		const foundData = processedCountryData?.find(
-			({ value }: any) => value === dataKey
+			({ value }) => value === dataKey
 		);
 
 		const metricValue =
@@ -177,7 +179,7 @@ export function MapComponent({
 
 				const name = feature.properties?.ADMIN;
 				const foundData = processedCountryData?.find(
-					({ value }: any) => value === code
+					({ value }) => value === code
 				);
 				const count = foundData?.count || 0;
 				const percentage = foundData?.percentage || 0;

packages/shared/src/types/metrics.ts

@@ -7,19 +7,19 @@ export interface BaseMetricData {
 	pageviews: number;
 }
 
-export interface DeviceTypeData extends BaseMetricData {}
+export interface DeviceTypeMetricData extends BaseMetricData {}
 
-export interface BrowserData extends BaseMetricData {}
+export interface BrowserMetricData extends BaseMetricData {}
 
-export interface CountryData extends BaseMetricData {}
+export interface CountryMetricData extends BaseMetricData {}
 
-export interface RegionData extends BaseMetricData {}
+export interface RegionMetricData extends BaseMetricData {}
 
-export interface PageData extends BaseMetricData {}
+export interface PageMetricData extends BaseMetricData {}
 
-export interface ReferrerData extends BaseMetricData {}
+export interface ReferrerMetricData extends BaseMetricData {}
 
-export interface PerformanceData extends BaseMetricData {
+export interface PerformanceMetricData extends BaseMetricData {
 	sessions: number;
 	avg_load_time: number;
 	avg_ttfb?: number;

packages/shared/src/types/website.ts

@@ -46,3 +46,21 @@ export interface WebsitesApiResponse {
 	data?: Website[];
 	error?: string;
 }
+
+export interface CountryData {
+	country: string;
+	country_code?: string;
+	visitors: number;
+	pageviews: number;
+}
+
+export interface RegionData {
+	country: string;
+	visitors: number;
+	pageviews: number;
+}
+
+export interface LocationData {
+	countries: CountryData[];
+	regions: RegionData[];
+}