fix: map dashboard filters to db enums

core/db/filter.go

@@ -1,9 +1,11 @@
 package db
 
 import (
+	"strconv"
 	"strings"
 
 	"github.com/medama-io/medama/api"
+	"github.com/medama-io/medama/model"
 )
 
 // FilterField represents a mapping of the filter field to the database column.
@@ -106,6 +108,20 @@ func NewFilter(field FilterField, param interface{}) *Filter {
 	case api.OptFilterFixed:
 		if v.IsSet() {
 			value, operation = FilterFixedToValues(v.Value)
+
+			// Convert the value to the enum integer for the database
+			//nolint:exhaustive // No other fields use uint8 enums
+			switch field {
+			case FilterBrowser:
+				value = strconv.Itoa(int(model.NewBrowserName(value)))
+			case FilterOS:
+				value = strconv.Itoa(int(model.NewOSName(value)))
+			case FilterDevice:
+				value = strconv.Itoa(int(model.NewDeviceTypeString(value)))
+			default:
+				// Do nothing
+			}
+
 		} else {
 			return nil
 		}

core/model/event.go

@@ -160,6 +160,21 @@ func NewDeviceType(desktop bool, mobile bool, tablet bool, tv bool) DeviceType {
 	}
 }
 
+func NewDeviceTypeString(name string) DeviceType {
+	switch name {
+	case "Desktop":
+		return DesktopDevice
+	case "Mobile":
+		return MobileDevice
+	case "Tablet":
+		return TabletDevice
+	case "TV":
+		return TVDevice
+	default:
+		return UnknownDevice
+	}
+}
+
 func (d DeviceType) String() string {
 	switch d {
 	case DesktopDevice:

dashboard/app/components/stats/Filter.tsx

@@ -97,17 +97,20 @@ const filterOptions: FilterOptions = {
 			Firefox: { label: 'Firefox', value: 'Firefox' },
 			Opera: { label: 'Opera', value: 'Opera' },
 			Safari: { label: 'Safari', value: 'Safari' },
+			Unknown: { label: 'Unknown', value: 'Unknown' },
 		},
 	},
 	os: {
 		label: 'OS',
 		type: 'fixed',
 		choices: {
 			Windows: { label: 'Windows', value: 'Windows' },
-			'Mac OS': { label: 'Mac OS', value: 'MacOS' },
+			MacOS: { label: 'MacOS', value: 'MacOS' },
 			Linux: { label: 'Linux', value: 'Linux' },
 			iOS: { label: 'iOS', value: 'iOS' },
 			Android: { label: 'Android', value: 'Android' },
+			ChromeOS: { label: 'ChromeOS', value: 'ChromeOS' },
+			Unknown: { label: 'Unknown', value: 'Unknown' },
 		},
 	},
 	device: {
@@ -117,6 +120,8 @@ const filterOptions: FilterOptions = {
 			Desktop: { label: 'Desktop', value: 'Desktop' },
 			Mobile: { label: 'Mobile', value: 'Mobile' },
 			Tablet: { label: 'Tablet', value: 'Tablet' },
+			TV: { label: 'TV', value: 'TV' },
+			Unknown: { label: 'Unknown', value: 'Unknown' },
 		},
 	},
 	country: {

dashboard/app/components/stats/StatsTable.tsx

@@ -93,7 +93,7 @@ const pageviewsPercentage: DataTableColumn = {
 };
 const bounceRate: DataTableColumn = {
 	accessor: 'bounce_rate',
-	title: 'Bounce Rate %',
+	title: 'Bounce %',
 	render: (record: DataRow) =>
 		formatPercentage((record.bounces ?? 0) / (record.visitors ?? 0)),
 };
@@ -133,22 +133,25 @@ const QueryTable = ({ query, data }: QueryTableProps) => {
 		setPageSize(newSize);
 	};
 
-	useEffect(() => {
-		const from = (page - 1) * pageSize;
-		const to = from + pageSize;
-		setRecords(data.slice(from, to));
-	}, [data, page, pageSize]);
-
 	// Sorting
 	const [sortStatus, setSortStatus] = useState<DataTableSortStatus<DataRow>>({
 		columnAccessor: 'visitors',
 		direction: 'desc',
 	});
 
 	useEffect(() => {
+		// Calculate the range of records to display
+		const from = (page - 1) * pageSize;
+		const to = from + pageSize;
+
+		// Sort and slice the data to page size
 		const temp = [...data].sort(sortBy(sortStatus.columnAccessor));
-		setRecords(sortStatus.direction === 'desc' ? temp.reverse() : temp);
-	}, [sortStatus, data]);
+		setRecords(
+			sortStatus.direction === 'desc'
+				? temp.reverse().slice(from, to)
+				: temp.slice(from, to)
+		);
+	}, [sortStatus, data, page, pageSize]);
 
 	// Define columns based on query
 	const columns: DataTableColumn[] = [];