From 9d09d89aefe326a01ad4e3bf6acd49023fb778f2 Mon Sep 17 00:00:00 2001
From: Mike Cao <mike@mikecao.com>
Date: Thu, 6 Aug 2020 19:37:19 -0700
Subject: [PATCH] Update device filtering.

---
 components/WebsiteDetails.js       |  2 +-
 lib/constants.js                   |  8 ++++++++
 lib/filters.js                     | 26 +++-----------------------
 lib/request.js                     | 20 +++++++++++++++++++-
 pages/api/website/[id]/rankings.js |  2 +-
 5 files changed, 32 insertions(+), 26 deletions(-)

diff --git a/components/WebsiteDetails.js b/components/WebsiteDetails.js
index 7e24afaf..3b84f2f0 100644
--- a/components/WebsiteDetails.js
+++ b/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}
diff --git a/lib/constants.js b/lib/constants.js
index c6e97e2e..f1c151e7 100644
--- a/lib/constants.js
+++ b/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',
diff --git a/lib/filters.js b/lib/filters.js
index a6a3dbad..ed4c038a 100644
--- a/lib/filters.js
+++ b/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 }));
diff --git a/lib/request.js b/lib/request.js
index f2b70c54..e0d02232 100644
--- a/lib/request.js
+++ b/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) {
diff --git a/pages/api/website/[id]/rankings.js b/pages/api/website/[id]/rankings.js
index d4942b65..4be955cf 100644
--- a/pages/api/website/[id]/rankings.js
+++ b/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) => {