Update device filtering.

components/WebsiteDetails.js

@@ -105,7 +105,7 @@ export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' })
             <div className={sessionClasses}>
               <RankingsChart
                 title="Devices"
-                type="screen"
+                type="device"
                 heading="Visitors"
                 websiteId={websiteId}
                 startDate={startDate}

lib/constants.js

@@ -1,6 +1,7 @@
 export const AUTH_COOKIE_NAME = 'umami.auth';
 
 export const DESKTOP_SCREEN_WIDTH = 1920;
+export const LAPTOP_SCREEN_WIDTH = 1024;
 export const MOBILE_SCREEN_WIDTH = 479;
 
 export const OPERATING_SYSTEMS = [
@@ -56,6 +57,13 @@ export const DESKTOP_OS = [
 
 export const MOBILE_OS = ['iOS', 'Android OS', 'BlackBerry OS', 'Windows Mobile', 'Amazon OS'];
 
+export const DEVICES = {
+  desktop: 'Desktop',
+  laptop: 'Laptop',
+  tablet: 'Tablet',
+  mobile: 'Mobile',
+};
+
 export const BROWSERS = {
   aol: 'AOL',
   edge: 'Edge',

lib/filters.js

@@ -1,4 +1,4 @@
-import { BROWSERS, ISO_COUNTRIES } from './constants';
+import { BROWSERS, ISO_COUNTRIES, DEVICES } from './constants';
 
 export const browserFilter = data =>
   data.map(({ x, ...props }) => ({ x: BROWSERS[x] || x, ...props }));
@@ -8,28 +8,8 @@ export const urlFilter = data => data.filter(({ x }) => x !== '' && !x.startsWit
 export const refFilter = data =>
   data.filter(({ x }) => x !== '' && !x.startsWith('/') && !x.startsWith('#'));
 
-export const deviceFilter = data => {
-  if (data.length === 0) return [];
-
-  const devices = data.reduce(
-    (obj, { x, y }) => {
-      const [width] = x.split('x');
-      if (width >= 1920) {
-        obj.Desktop += +y;
-      } else if (width >= 1024) {
-        obj.Laptop += +y;
-      } else if (width >= 767) {
-        obj.Tablet += +y;
-      } else {
-        obj.Mobile += +y;
-      }
-      return obj;
-    },
-    { Desktop: 0, Laptop: 0, Tablet: 0, Mobile: 0 },
-  );
-
-  return percentFilter(Object.keys(devices).map(key => ({ x: key, y: devices[key] })));
-};
+export const deviceFilter = data =>
+  data.map(({ x, ...props }) => ({ x: DEVICES[x] || x, ...props }));
 
 export const countryFilter = data =>
   data.map(({ x, ...props }) => ({ x: ISO_COUNTRIES[x] || x, ...props }));

lib/request.js

@@ -3,7 +3,13 @@ import { browserName, detectOS } from 'detect-browser';
 import isLocalhost from 'is-localhost-ip';
 import maxmind from 'maxmind';
 import geolite2 from 'geolite2-redist';
-import { DESKTOP_OS, MOBILE_OS, DESKTOP_SCREEN_WIDTH, MOBILE_SCREEN_WIDTH } from './constants';
+import {
+  DESKTOP_OS,
+  MOBILE_OS,
+  DESKTOP_SCREEN_WIDTH,
+  LAPTOP_SCREEN_WIDTH,
+  MOBILE_SCREEN_WIDTH,
+} from './constants';
 
 export function getIpAddress(req) {
   // Cloudflare
@@ -15,6 +21,8 @@ export function getIpAddress(req) {
 }
 
 export function getDevice(screen, browser, os) {
+  if (!screen) return;
+
   const [width] = screen.split('x');
 
   if (DESKTOP_OS.includes(os)) {
@@ -28,6 +36,16 @@ export function getDevice(screen, browser, os) {
     }
     return 'mobile';
   }
+
+  if (width >= DESKTOP_SCREEN_WIDTH) {
+    return 'desktop';
+  } else if (width >= LAPTOP_SCREEN_WIDTH) {
+    return 'laptop';
+  } else if (width >= MOBILE_SCREEN_WIDTH) {
+    return 'tablet';
+  } else {
+    return 'mobile';
+  }
 }
 
 export async function getCountry(req, ip) {

pages/api/website/[id]/rankings.js

@@ -1,7 +1,7 @@
 import { getRankings } from 'lib/db';
 import { useAuth } from 'lib/middleware';
 
-const sessionColumns = ['browser', 'os', 'screen', 'country'];
+const sessionColumns = ['browser', 'os', 'device', 'country'];
 const pageviewColumns = ['url', 'referrer'];
 
 export default async (req, res) => {