Added icons for browsers, OS and devices.

components/metrics/BrowsersTable.js

@@ -2,12 +2,23 @@ import FilterLink from 'components/common/FilterLink';
 import MetricsTable from 'components/metrics/MetricsTable';
 import { BROWSERS } from 'lib/constants';
 import useMessages from 'hooks/useMessages';
+import { useRouter } from 'next/router';
 
 export function BrowsersTable({ websiteId, ...props }) {
   const { formatMessage, labels } = useMessages();
+  const { basePath } = useRouter();
 
   function renderLink({ x: browser }) {
-    return <FilterLink id="browser" value={browser} label={BROWSERS[browser] || browser} />;
+    return (
+      <FilterLink id="browser" value={browser} label={BROWSERS[browser] || browser}>
+        <img
+          src={`${basePath}/images/browsers/${browser || 'unknown'}.png`}
+          alt={browser}
+          width={16}
+          height={16}
+        />
+      </FilterLink>
+    );
   }
 
   return (

components/metrics/DevicesTable.js

@@ -1,9 +1,11 @@
 import MetricsTable from './MetricsTable';
 import FilterLink from 'components/common/FilterLink';
 import useMessages from 'hooks/useMessages';
+import { useRouter } from 'next/router';
 
 export function DevicesTable({ websiteId, ...props }) {
   const { formatMessage, labels } = useMessages();
+  const { basePath } = useRouter();
 
   function renderLink({ x: device }) {
     return (
@@ -11,7 +13,14 @@ export function DevicesTable({ websiteId, ...props }) {
         id="device"
         value={labels[device] && device}
         label={formatMessage(labels[device] || labels.unknown)}
-      />
+      >
+        <img
+          src={`${basePath}/images/device/${device.toLowerCase() || 'unknown'}.png`}
+          alt={device}
+          width={16}
+          height={16}
+        />
+      </FilterLink>
     );
   }
 

components/metrics/OSTable.js

@@ -1,12 +1,25 @@
 import MetricsTable from './MetricsTable';
 import FilterLink from 'components/common/FilterLink';
 import useMessages from 'hooks/useMessages';
+import { useRouter } from 'next/router';
 
 export function OSTable({ websiteId, ...props }) {
   const { formatMessage, labels } = useMessages();
+  const { basePath } = useRouter();
 
   function renderLink({ x: os }) {
-    return <FilterLink id="os" value={os} />;
+    return (
+      <FilterLink id="os" value={os}>
+        <img
+          src={`${basePath}/images/os/${
+            os.toLowerCase().replaceAll(/[^\w]+/g, '-') || 'unknown'
+          }.png`}
+          alt={os}
+          width={16}
+          height={16}
+        />
+      </FilterLink>
+    );
   }
 
   return (

lib/constants.ts

@@ -182,7 +182,7 @@ export const DESKTOP_OS = [
   'BeOS',
   'Chrome OS',
   'Linux',
-  'macOS',
+  'Mac OS',
   'Open BSD',
   'OS/2',
   'QNX',
@@ -204,33 +204,34 @@ export const DESKTOP_OS = [
 export const MOBILE_OS = ['Amazon OS', 'Android OS', 'BlackBerry OS', 'iOS', 'Windows Mobile'];
 
 export const BROWSERS = {
+  android: 'Android',
   aol: 'AOL',
-  edge: 'Edge',
-  'edge-ios': 'Edge (iOS)',
-  yandexbrowser: 'Yandex',
-  kakaotalk: 'KaKaoTalk',
-  samsung: 'Samsung',
-  silk: 'Silk',
-  miui: 'MIUI',
   beaker: 'Beaker',
-  'edge-chromium': 'Edge (Chromium)',
+  bb10: 'BlackBerry 10',
   chrome: 'Chrome',
   'chromium-webview': 'Chrome (webview)',
-  phantomjs: 'PhantomJS',
   crios: 'Chrome (iOS)',
+  curl: 'Curl',
+  edge: 'Edge',
+  'edge-chromium': 'Edge (Chromium)',
+  'edge-ios': 'Edge (iOS)',
+  facebook: 'Facebook',
   firefox: 'Firefox',
   fxios: 'Firefox (iOS)',
-  'opera-mini': 'Opera Mini',
-  opera: 'Opera',
   ie: 'IE',
-  bb10: 'BlackBerry 10',
-  android: 'Android',
-  ios: 'iOS',
-  safari: 'Safari',
-  facebook: 'Facebook',
   instagram: 'Instagram',
+  ios: 'iOS',
   'ios-webview': 'iOS (webview)',
+  kakaotalk: 'KaKaoTalk',
+  miui: 'MIUI',
+  opera: 'Opera',
+  'opera-mini': 'Opera Mini',
+  phantomjs: 'PhantomJS',
+  safari: 'Safari',
+  samsung: 'Samsung',
+  silk: 'Silk',
   searchbot: 'Searchbot',
+  yandexbrowser: 'Yandex',
 };
 
 export const MAP_FILE = '/datamaps.world.json';