Added dependency on bowser to have a more accurate browser and OS detection

package-lock.json

@@ -3460,6 +3460,11 @@
       "resolved": "https://registry.npmjs.org/bottlejs/-/bottlejs-1.7.2.tgz",
       "integrity": "sha512-voMPQ+g8/4GBiDE5lp43fgfoBn7Q5fZI7k3ye8ErrPoHzuuRS0Gff9lZYeyalh86uz5P304iZ14wNAM+3TZguQ=="
     },
+    "bowser": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/bowser/-/bowser-2.9.0.tgz",
+      "integrity": "sha512-2ld76tuLBNFekRgmJfT2+3j5MIrP6bFict8WAIT3beq+srz1gcKNAdNKMqHqauQt63NmAa88HfP1/Ypa9Er3HA=="
+    },
     "boxen": {
       "version": "1.3.0",
       "resolved": "https://registry.yarnpkg.com/boxen/-/boxen-1.3.0.tgz",

package.json

@@ -33,6 +33,7 @@
     "axios": "^0.19.0",
     "bootstrap": "^4.3.1",
     "bottlejs": "^1.7.2",
+    "bowser": "^2.9.0",
     "chart.js": "^2.8.0",
     "classnames": "^2.2.6",
     "compare-versions": "^3.5.1",

src/utils/helpers/visits.js

@@ -1,26 +1,27 @@
+import bowser from 'bowser';
 import { hasValue } from '../utils';
 
 const DEFAULT = 'Others';
+const BROWSERS_WHITELIST = [
+  'Android Browser',
+  'Chrome',
+  'Chromium',
+  'Firefox',
+  'Internet Explorer',
+  'Microsoft Edge',
+  'Opera',
+  'Safari',
+  'Samsung Internet for Android',
+  'Vivaldi',
+  'WeChat',
+];
 
 export const osFromUserAgent = (userAgent) => {
   if (!hasValue(userAgent)) {
     return DEFAULT;
   }
 
-  const lowerUserAgent = userAgent.toLowerCase();
+  return bowser.parse(userAgent).os.name || DEFAULT;
-
-  switch (true) {
-    case lowerUserAgent.includes('linux'):
-      return 'Linux';
-    case lowerUserAgent.includes('windows'):
-      return 'Windows';
-    case lowerUserAgent.includes('mac'):
-      return 'MacOS';
-    case lowerUserAgent.includes('mobi'):
-      return 'Mobile';
-    default:
-      return DEFAULT;
-  }
 };
 
 export const browserFromUserAgent = (userAgent) => {
@@ -28,24 +29,9 @@ export const browserFromUserAgent = (userAgent) => {
     return DEFAULT;
   }
 
-  const lowerUserAgent = userAgent.toLowerCase();
+  const { name: browser } = bowser.parse(userAgent).browser;
 
-  switch (true) {
+  return browser && BROWSERS_WHITELIST.includes(browser) ? browser : DEFAULT;
-    case lowerUserAgent.includes('opera') || lowerUserAgent.includes('opr'):
-      return 'Opera';
-    case lowerUserAgent.includes('firefox'):
-      return 'Firefox';
-    case lowerUserAgent.includes('chrome'):
-      return 'Chrome';
-    case lowerUserAgent.includes('safari'):
-      return 'Safari';
-    case lowerUserAgent.includes('edg'):
-      return 'Microsoft Edge';
-    case lowerUserAgent.includes('msie'):
-      return 'Internet Explorer';
-    default:
-      return DEFAULT;
-  }
 };
 
 export const extractDomain = (url) => {

src/visits/GraphCard.js

@@ -24,12 +24,16 @@ const generateGraphData = (title, isBarChart, labels, data, highlightedData) =>
       data,
       backgroundColor: isBarChart ? 'rgba(70, 150, 229, 0.4)' : [
         '#97BBCD',
-        '#DCDCDC',
         '#F7464A',
         '#46BFBD',
         '#FDB45C',
         '#949FB1',
-        '#4D5360',
+        '#57A773',
+        '#414066',
+        '#08B2E3',
+        '#B6C454',
+        '#DCDCDC',
+        '#463730',
       ],
       borderColor: isBarChart ? 'rgba(70, 150, 229, 1)' : 'white',
       borderWidth: 2,

test/visits/GraphCard.test.js

@@ -31,12 +31,16 @@ describe('<GraphCard />', () => {
     expect(datasets).toHaveLength(1);
     expect(backgroundColor).toEqual([
       '#97BBCD',
-      '#DCDCDC',
       '#F7464A',
       '#46BFBD',
       '#FDB45C',
       '#949FB1',
-      '#4D5360',
+      '#57A773',
+      '#414066',
+      '#08B2E3',
+      '#B6C454',
+      '#DCDCDC',
+      '#463730',
     ]);
     expect(borderColor).toEqual('white');
     expect(legend).toEqual({ position: 'right' });

test/visits/services/VisitsParser.test.js

@@ -56,7 +56,7 @@ describe('VisitsParser', () => {
       expect(os).toEqual({
         Linux: 3,
         Windows: 1,
-        MacOS: 1,
+        macOS: 1,
       });
     });
 
@@ -137,7 +137,7 @@ describe('VisitsParser', () => {
         },
         {
           browser: 'Firefox',
-          os: 'MacOS',
+          os: 'macOS',
           referer: 'google.com',
           country: 'United States',
           city: 'New York',