feat: add host

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,