cleanup data & processing in audience tab

Author: izadoesdev

apps/api/src/query/builders/devices.ts

@@ -134,6 +134,13 @@ export const DevicesBuilders: Record<string, SimpleQueryConfig> = {
 					label: 'Visitors',
 					description: 'Unique visitors with this resolution',
 				},
+				{
+					name: 'percentage',
+					type: 'number',
+					label: 'Traffic %',
+					description: 'Percentage of total traffic',
+					unit: '%',
+				},
 			],
 			default_visualization: 'table',
 			supports_granularity: ['hour', 'day'],
@@ -144,6 +151,7 @@ export const DevicesBuilders: Record<string, SimpleQueryConfig> = {
 			'screen_resolution as name',
 			'COUNT(*) as pageviews',
 			'COUNT(DISTINCT anonymous_id) as visitors',
+			'ROUND((COUNT(*) / SUM(COUNT(*)) OVER()) * 100, 2) as percentage',
 		],
 		where: ["screen_resolution != ''", "event_name = 'screen_view'"],
 		groupBy: ['screen_resolution'],
@@ -349,9 +357,11 @@ export const DevicesBuilders: Record<string, SimpleQueryConfig> = {
 	browser_versions: {
 		table: Analytics.events,
 		fields: [
-			"CONCAT(browser_name, ' ', browser_version) as name",
+			'browser_name',
+			'browser_version',
 			'COUNT(*) as pageviews',
 			'COUNT(DISTINCT anonymous_id) as visitors',
+			'ROUND((COUNT(*) / SUM(COUNT(*)) OVER()) * 100, 2) as percentage',
 		],
 		where: [
 			"browser_name != ''",

apps/api/src/query/builders/geo.ts

@@ -97,16 +97,18 @@ export const GeoBuilders: Record<string, SimpleQueryConfig> = {
 		table: Analytics.events,
 		fields: [
 			'region as name',
+			'country',
 			'COUNT(*) as pageviews',
 			'COUNT(DISTINCT anonymous_id) as visitors',
 			'ROUND((COUNT(*) / SUM(COUNT(*)) OVER()) * 100, 2) as percentage',
 		],
 		where: ["region != ''", "event_name = 'screen_view'"],
-		groupBy: ['region'],
+		groupBy: ['region', 'country'],
 		orderBy: 'pageviews DESC',
 		limit: 100,
 		timeField: 'time',
 		customizable: true,
+		plugins: { normalizeGeo: true, deduplicateGeo: true },
 	},
 
 	timezone: {
@@ -182,15 +184,17 @@ export const GeoBuilders: Record<string, SimpleQueryConfig> = {
 		table: Analytics.events,
 		fields: [
 			'city as name',
+			'country',
 			'COUNT(*) as pageviews',
 			'COUNT(DISTINCT anonymous_id) as visitors',
 			'ROUND((COUNT(*) / SUM(COUNT(*)) OVER()) * 100, 2) as percentage',
 		],
 		where: ["city != ''", "event_name = 'screen_view'"],
-		groupBy: ['city'],
+		groupBy: ['city', 'country'],
 		orderBy: 'pageviews DESC',
 		limit: 100,
 		timeField: 'time',
 		customizable: true,
+		plugins: { normalizeGeo: true, deduplicateGeo: true },
 	},
 };

apps/api/src/query/utils.ts

@@ -190,7 +190,7 @@ function applyReferrerParsing(
 
 function applyGeoNormalization(data: DataRow[]): DataRow[] {
 	return data.map((row) => {
-		const currentName = getString(row.name) || getString(row.country);
+		const currentName = getString(row.country) || getString(row.name);
 		if (!currentName) {
 			return row;
 		}

apps/dashboard/app/(main)/observability/database/[id]/page.tsx

@@ -10,7 +10,7 @@ import {
 } from '@phosphor-icons/react';
 import type { ColumnDef } from '@tanstack/react-table';
 import { use } from 'react';
-import { DataTable } from '@/components/analytics/data-table';
+import { DataTable } from '@/components/table/data-table';
 import { Badge } from '@/components/ui/badge';
 import { Card } from '@/components/ui/card';
 import { useDbConnection } from '@/hooks/use-db-connections';

apps/dashboard/app/(main)/observability/database/[id]/performance/page.tsx

@@ -11,7 +11,8 @@ import {
 	WarningIcon,
 } from '@phosphor-icons/react';
 import { use, useCallback, useMemo, useState } from 'react';
-import { DataTable, StatCard } from '@/components/analytics';
+import { StatCard } from '@/components/analytics';
+import { DataTable } from '@/components/table/data-table';
 import { Alert, AlertDescription } from '@/components/ui/alert';
 import { Button } from '@/components/ui/button';
 import {