Merge pull request #1304 from thueske/feature/screensize

Feature: Add screensize to UI

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}
+    />
+  );
+}

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' }),

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"
 }

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"
 }

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"
 }

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"
 }

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) {