From 8d358ccb9d74f66ac50321e8c0fc6833e7059677 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tobias=20H=C3=BCske?= <thueske@users.noreply.github.com>
Date: Sat, 16 Jul 2022 07:29:55 +0200
Subject: [PATCH] Feature: Add screensize to UI

---
 components/metrics/ScreenTable.js  | 15 +++++++++++++++
 components/pages/WebsiteDetails.js |  6 ++++++
 lang/de-DE.json                    |  3 ++-
 lang/en-GB.json                    |  3 ++-
 lang/en-US.json                    |  3 ++-
 lang/tr-TR.json                    |  3 ++-
 pages/api/website/[id]/metrics.js  |  2 +-
 7 files changed, 30 insertions(+), 5 deletions(-)
 create mode 100644 components/metrics/ScreenTable.js

diff --git a/components/metrics/ScreenTable.js b/components/metrics/ScreenTable.js
new file mode 100644
index 00000000..5ad3b43a
--- /dev/null
+++ b/components/metrics/ScreenTable.js
@@ -0,0 +1,15 @@
+import React from 'react';
+import MetricsTable from './MetricsTable';
+import { FormattedMessage } from 'react-intl';
+
+export default function ScreenTable({ websiteId, ...props }) {
+  return (
+    <MetricsTable
+      {...props}
+      title={<FormattedMessage id="metrics.screens" defaultMessage="Screen" />}
+      type="screen"
+      metric={<FormattedMessage id="metrics.visitors" defaultMessage="Visitors" />}
+      websiteId={websiteId}
+    />
+  );
+}
diff --git a/components/pages/WebsiteDetails.js b/components/pages/WebsiteDetails.js
index df31b4d9..1b22d9ed 100644
--- a/components/pages/WebsiteDetails.js
+++ b/components/pages/WebsiteDetails.js
@@ -22,6 +22,7 @@ import useFetch from 'hooks/useFetch';
 import usePageQuery from 'hooks/usePageQuery';
 import { DEFAULT_ANIMATION_DURATION } from 'lib/constants';
 import styles from './WebsiteDetails.module.css';
+import ScreenTable from 'components/metrics/ScreenTable';
 
 const views = {
   url: PagesTable,
@@ -29,6 +30,7 @@ const views = {
   browser: BrowsersTable,
   os: OSTable,
   device: DevicesTable,
+  screen: ScreenTable,
   country: CountriesTable,
   language: LanguagesTable,
   event: EventsTable,
@@ -64,6 +66,10 @@ export default function WebsiteDetails({ websiteId }) {
       label: <FormattedMessage id="metrics.referrers" defaultMessage="Referrers" />,
       value: resolve({ view: 'referrer' }),
     },
+    {
+      label: <FormattedMessage id="metrics.screens" defaultMessage="Screens" />,
+      value: resolve({ view: 'screen' }),
+    },
     {
       label: <FormattedMessage id="metrics.browsers" defaultMessage="Browsers" />,
       value: resolve({ view: 'browser' }),
diff --git a/lang/de-DE.json b/lang/de-DE.json
index 50832c21..74e13b8d 100644
--- a/lang/de-DE.json
+++ b/lang/de-DE.json
@@ -106,5 +106,6 @@
   "metrics.referrers": "Referrer",
   "metrics.unique-visitors": "Eindeutige Besucher",
   "metrics.views": "Aufrufe",
-  "metrics.visitors": "Besucher"
+  "metrics.visitors": "Besucher",
+  "metrics.screens": "Bildschirmauflösungen"
 }
diff --git a/lang/en-GB.json b/lang/en-GB.json
index d5001caa..2da0da58 100644
--- a/lang/en-GB.json
+++ b/lang/en-GB.json
@@ -106,5 +106,6 @@
   "metrics.referrers": "Referrers",
   "metrics.unique-visitors": "Unique visitors",
   "metrics.views": "Views",
-  "metrics.visitors": "Visitors"
+  "metrics.visitors": "Visitors",
+  "metrics.screens": "Screens"
 }
diff --git a/lang/en-US.json b/lang/en-US.json
index d5001caa..2da0da58 100644
--- a/lang/en-US.json
+++ b/lang/en-US.json
@@ -106,5 +106,6 @@
   "metrics.referrers": "Referrers",
   "metrics.unique-visitors": "Unique visitors",
   "metrics.views": "Views",
-  "metrics.visitors": "Visitors"
+  "metrics.visitors": "Visitors",
+  "metrics.screens": "Screens"
 }
diff --git a/lang/tr-TR.json b/lang/tr-TR.json
index dcc88fdc..04ebe32d 100644
--- a/lang/tr-TR.json
+++ b/lang/tr-TR.json
@@ -106,5 +106,6 @@
   "metrics.referrers": "Yönlendirenler",
   "metrics.unique-visitors": "Tekil kullanıcı",
   "metrics.views": "Görüntüleme",
-  "metrics.visitors": "Ziyaretçi"
+  "metrics.visitors": "Ziyaretçi",
+  "metrics.screens": "Ekranlar"
 }
diff --git a/pages/api/website/[id]/metrics.js b/pages/api/website/[id]/metrics.js
index 54c5bf3e..da2fd354 100644
--- a/pages/api/website/[id]/metrics.js
+++ b/pages/api/website/[id]/metrics.js
@@ -3,7 +3,7 @@ import { ok, methodNotAllowed, unauthorized, badRequest } from 'lib/response';
 import { allowQuery } from 'lib/auth';
 import { useCors } from 'lib/middleware';
 
-const sessionColumns = ['browser', 'os', 'device', 'country', 'language'];
+const sessionColumns = ['browser', 'os', 'device', 'screen', 'country', 'language'];
 const pageviewColumns = ['url', 'referrer'];
 
 function getTable(type) {