Merge pull request #2689 from giuseongit/hosts-support

add host to visualization

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';
@@ -22,6 +23,7 @@ const views = {
   exit: PagesTable,
   title: PagesTable,
   referrer: ReferrersTable,
+  host: HostsTable,
   browser: BrowsersTable,
   os: OSTable,
   device: DevicesTable,
@@ -60,6 +62,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';
@@ -19,9 +20,10 @@ export default function WebsiteTableView({ websiteId }: { websiteId: string }) {
 
   return (
     <Grid>
-      <GridRow columns="two">
+      <GridRow columns="three">
         <PagesTable {...tableProps} />
         <ReferrersTable {...tableProps} />
+        <HostsTable {...tableProps} />
       </GridRow>
       <GridRow columns="three">
         <BrowsersTable {...tableProps} />

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

@@ -91,6 +91,7 @@ export const labels = defineMessages({
   entry: { id: 'label.entry', defaultMessage: 'Entry URL' },
   exit: { id: 'label.exit', defaultMessage: 'Exit URL' },
   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' },
@@ -202,6 +203,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/lib/constants.ts

@@ -31,8 +31,9 @@ export const FILTER_DAY = 'filter-day';
 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', 'minute'];
-export const EVENT_COLUMNS = ['url', 'entry', 'exit', 'referrer', 'title', 'query', 'event'];
+export const EVENT_COLUMNS = ['url', 'entry', 'exit', 'referrer', 'title', 'query', 'event', 'host'];
 
 export const SESSION_COLUMNS = [
   'browser',
@@ -43,13 +44,15 @@ export const SESSION_COLUMNS = [
   'country',
   'region',
   'city',
+  'host',
 ];
 
 export const FILTER_COLUMNS = {
   url: 'url_path',
   entry: 'url_path',
   exit: 'url_path',
   referrer: 'referrer_domain',
+  host: 'hostname',
   title: 'page_title',
   query: 'url_query',
   os: 'os',

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

@@ -17,6 +17,7 @@ export interface WebsitePageviewRequestQuery {
   timezone?: string;
   url?: string;
   referrer?: string;
+  host?: string;
   title?: string;
   os?: string;
   browser?: string;
@@ -36,6 +37,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

@@ -14,6 +14,7 @@ export interface WebsiteStatsRequestQuery {
   endAt: number;
   url?: string;
   referrer?: string;
+  host?: string;
   title?: string;
   query?: string;
   event?: string;
@@ -33,6 +34,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(),