feat: add host

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,