feat: add host

src/app/(main)/websites/[websiteId]/WebsiteExpandedView.tsx

@@ -9,6 +9,7 @@ import OSTable from 'components/metrics/OSTable';
 import PagesTable from 'components/metrics/PagesTable';
 import QueryParametersTable from 'components/metrics/QueryParametersTable';
 import ReferrersTable from 'components/metrics/ReferrersTable';
+import HostsTable from 'components/metrics/HostsTable';
 import ScreenTable from 'components/metrics/ScreenTable';
 import EventsTable from 'components/metrics/EventsTable';
 import SideNav from 'components/layout/SideNav';
@@ -20,6 +21,7 @@ const views = {
   url: PagesTable,
   title: PagesTable,
   referrer: ReferrersTable,
+  host: HostsTable,
   browser: BrowsersTable,
   os: OSTable,
   device: DevicesTable,
@@ -58,6 +60,11 @@ export default function WebsiteExpandedView({
       label: formatMessage(labels.referrers),
       url: renderUrl({ view: 'referrer' }),
     },
+    {
+      key: 'host',
+      label: formatMessage(labels.hosts),
+      url: renderUrl({ view: 'host' }),
+    },
     {
       key: 'browser',
       label: formatMessage(labels.browsers),

src/app/(main)/websites/[websiteId]/WebsiteTableView.tsx

@@ -2,6 +2,7 @@ import { useState } from 'react';
 import { Grid, GridRow } from 'components/layout/Grid';
 import PagesTable from 'components/metrics/PagesTable';
 import ReferrersTable from 'components/metrics/ReferrersTable';
+import HostsTable from 'components/metrics/HostsTable';
 import BrowsersTable from 'components/metrics/BrowsersTable';
 import OSTable from 'components/metrics/OSTable';
 import DevicesTable from 'components/metrics/DevicesTable';
@@ -26,9 +27,10 @@ export default function WebsiteTableView({
 
   return (
     <Grid>
-      <GridRow columns="two">
+      <GridRow columns="three">
         <PagesTable {...tableProps} />
         <ReferrersTable {...tableProps} />
+        <HostsTable {...tableProps} />
       </GridRow>
       <GridRow columns="three">
         <BrowsersTable {...tableProps} />

src/components/hooks/queries/useWebsitePageviews.ts

@@ -7,7 +7,7 @@ export function useWebsitePageviews(websiteId: string, options?: { [key: string]
   const { startDate, endDate, unit } = dateRange;
   const { timezone } = useTimezone();
   const {
-    query: { url, referrer, os, browser, device, country, region, city, title },
+    query: { url, referrer, host, os, browser, device, country, region, city, title },
   } = useNavigation();
 
   const params = {
@@ -17,6 +17,7 @@ export function useWebsitePageviews(websiteId: string, options?: { [key: string]
     timezone,
     url,
     referrer,
+    host,
     os,
     browser,
     device,

src/components/hooks/queries/useWebsiteStats.ts

@@ -5,7 +5,7 @@ export function useWebsiteStats(websiteId: string, options?: { [key: string]: st
   const [dateRange] = useDateRange(websiteId);
   const { startDate, endDate } = dateRange;
   const {
-    query: { url, referrer, title, os, browser, device, country, region, city },
+    query: { url, referrer, host, title, os, browser, device, country, region, city },
   } = useNavigation();
 
   const params = {
@@ -13,6 +13,7 @@ export function useWebsiteStats(websiteId: string, options?: { [key: string]: st
     endAt: +endDate,
     url,
     referrer,
+    host,
     title,
     os,
     browser,

src/components/hooks/useFields.ts

@@ -7,6 +7,7 @@ export function useFields() {
     { name: 'url', type: 'string', label: formatMessage(labels.url) },
     { name: 'title', type: 'string', label: formatMessage(labels.pageTitle) },
     { name: 'referrer', type: 'string', label: formatMessage(labels.referrer) },
+    { name: 'host', type: 'string', label: formatMessage(labels.host) },
     { name: 'query', type: 'string', label: formatMessage(labels.query) },
     { name: 'browser', type: 'string', label: formatMessage(labels.browser) },
     { name: 'os', type: 'string', label: formatMessage(labels.os) },

src/components/messages.ts

@@ -87,6 +87,7 @@ export const labels = defineMessages({
   refresh: { id: 'label.refresh', defaultMessage: 'Refresh' },
   pages: { id: 'label.pages', defaultMessage: 'Pages' },
   referrers: { id: 'label.referrers', defaultMessage: 'Referrers' },
+  hosts: { id: 'label.hosts', defaultMessage: 'Hosts' },
   screens: { id: 'label.screens', defaultMessage: 'Screens' },
   browsers: { id: 'label.browsers', defaultMessage: 'Browsers' },
   os: { id: 'label.os', defaultMessage: 'OS' },
@@ -196,6 +197,7 @@ export const labels = defineMessages({
   },
   dropoff: { id: 'label.dropoff', defaultMessage: 'Dropoff' },
   referrer: { id: 'label.referrer', defaultMessage: 'Referrer' },
+  host: { id: 'label.host', defaultMessage: 'Host' },
   country: { id: 'label.country', defaultMessage: 'Country' },
   region: { id: 'label.region', defaultMessage: 'Region' },
   city: { id: 'label.city', defaultMessage: 'City' },

src/components/metrics/HostsTable.tsx

@@ -0,0 +1,35 @@
+import MetricsTable, { MetricsTableProps } from './MetricsTable';
+import FilterLink from 'components/common/FilterLink';
+import { useMessages } from 'components/hooks';
+import { Flexbox } from 'react-basics';
+
+export function HostsTable(props: MetricsTableProps) {
+  const { formatMessage, labels } = useMessages();
+
+  const renderLink = ({ x: host }) => {
+    return (
+      <Flexbox alignItems="center">
+        <FilterLink
+          id="host"
+          value={host}
+          externalUrl={`https://${host}`}
+          label={!host && formatMessage(labels.none)}
+        />
+      </Flexbox>
+    );
+  };
+
+  return (
+    <>
+      <MetricsTable
+        {...props}
+        title={formatMessage(labels.hosts)}
+        type="host"
+        metric={formatMessage(labels.views)}
+        renderLabel={renderLink}
+      />
+    </>
+  );
+}
+
+export default HostsTable;

src/components/metrics/MetricsTable.tsx

@@ -48,7 +48,7 @@ export function MetricsTable({
   const [{ startDate, endDate }] = useDateRange(websiteId);
   const {
     renderUrl,
-    query: { url, referrer, title, os, browser, device, country, region, city },
+    query: { url, referrer, host, title, os, browser, device, country, region, city },
   } = useNavigation();
   const { formatMessage, labels } = useMessages();
   const { dir } = useLocale();
@@ -61,6 +61,7 @@ export function MetricsTable({
       endAt: +endDate,
       url,
       referrer,
+      host,
       os,
       title,
       browser,

src/lib/constants.ts

@@ -31,7 +31,7 @@ export const FILTER_RANGE = 'filter-range';
 export const FILTER_REFERRERS = 'filter-referrers';
 export const FILTER_PAGES = 'filter-pages';
 export const UNIT_TYPES = ['year', 'month', 'hour', 'day'];
-export const EVENT_COLUMNS = ['url', 'referrer', 'title', 'query', 'event'];
+export const EVENT_COLUMNS = ['url', 'referrer', 'title', 'query', 'event', 'host'];
 
 export const SESSION_COLUMNS = [
   'browser',
@@ -42,11 +42,13 @@ export const SESSION_COLUMNS = [
   'country',
   'region',
   'city',
+  'host',
 ];
 
 export const FILTER_COLUMNS = {
   url: 'url_path',
   referrer: 'referrer_domain',
+  host: 'hostname',
   title: 'page_title',
   query: 'url_query',
   os: 'os',

src/pages/api/websites/[websiteId]/pageviews.ts

@@ -14,6 +14,7 @@ export interface WebsitePageviewRequestQuery {
   timezone?: string;
   url?: string;
   referrer?: string;
+  host?: string;
   title?: string;
   os?: string;
   browser?: string;
@@ -34,6 +35,7 @@ const schema = {
     timezone: TimezoneTest,
     url: yup.string(),
     referrer: yup.string(),
+    host: yup.string(),
     title: yup.string(),
     os: yup.string(),
     browser: yup.string(),

src/pages/api/websites/[websiteId]/stats.ts

@@ -13,6 +13,7 @@ export interface WebsiteStatsRequestQuery {
   endAt: number;
   url?: string;
   referrer?: string;
+  host?: string;
   title?: string;
   query?: string;
   event?: string;
@@ -32,6 +33,7 @@ const schema = {
     endAt: yup.number().required(),
     url: yup.string(),
     referrer: yup.string(),
+    host: yup.string(),
     title: yup.string(),
     query: yup.string(),
     event: yup.string(),