feat: add client screen size statics

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

@@ -23,6 +23,7 @@ import useFetch from 'hooks/useFetch';
 import usePageQuery from 'hooks/usePageQuery';
 import useShareToken from 'hooks/useShareToken';
 import { DEFAULT_ANIMATION_DURATION, TOKEN_HEADER } from 'lib/constants';
+import ScreenTable from 'components/metrics/ScreenTable';
 
 const views = {
   url: PagesTable,
@@ -68,6 +69,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' }),
@@ -130,12 +135,15 @@ export default function WebsiteDetails({ websiteId }) {
       {chartLoaded && !view && (
         <GridLayout>
           <GridRow>
-            <GridColumn md={12} lg={6}>
+            <GridColumn md={12} lg={4}>
               <PagesTable {...tableProps} />
             </GridColumn>
-            <GridColumn md={12} lg={6}>
+            <GridColumn md={12} lg={4}>
               <ReferrersTable {...tableProps} />
             </GridColumn>
+            <GridColumn md={12} lg={4}>
+              <ScreenTable {...tableProps} />
+            </GridColumn>
           </GridRow>
           <GridRow>
             <GridColumn md={12} lg={4}>

lang/en-GB.json

@@ -104,5 +104,7 @@
   "metrics.referrers": "Referrers",
   "metrics.unique-visitors": "Unique visitors",
   "metrics.views": "Views",
-  "metrics.visitors": "Visitors"
+  "metrics.visitors": "Visitors",
+  "metrics.screens": "Screens"
+  
 }

lang/en-US.json

@@ -104,5 +104,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

@@ -104,5 +104,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

@@ -2,7 +2,7 @@ import { getPageviewMetrics, getSessionMetrics, getWebsiteById } from 'lib/queri
 import { ok, methodNotAllowed, unauthorized, badRequest } from 'lib/response';
 import { allowQuery } from 'lib/auth';
 
-const sessionColumns = ['browser', 'os', 'device', 'country', 'language'];
+const sessionColumns = ['browser', 'os', 'device', 'country', 'screen', 'language'];
 const pageviewColumns = ['url', 'referrer'];
 
 function getTable(type) {