add tags table and filters logic

src/components/hooks/useFields.ts

@@ -15,6 +15,7 @@ export function useFields() {
     { name: 'region', type: 'string', label: formatMessage(labels.region) },
     { name: 'city', type: 'string', label: formatMessage(labels.city) },
     { name: 'host', type: 'string', label: formatMessage(labels.host) },
+    { name: 'tag', type: 'string', label: formatMessage(labels.tag) },
   ];
 
   return { fields };

src/components/hooks/useFilterParams.ts

@@ -7,7 +7,21 @@ export function useFilterParams(websiteId: string) {
   const { startDate, endDate, unit } = dateRange;
   const { timezone, toUtc } = useTimezone();
   const {
-    query: { url, referrer, title, query, host, os, browser, device, country, region, city, event },
+    query: {
+      url,
+      referrer,
+      title,
+      query,
+      host,
+      os,
+      browser,
+      device,
+      country,
+      region,
+      city,
+      event,
+      tag,
+    },
   } = useNavigation();
 
   return {
@@ -27,5 +41,6 @@ export function useFilterParams(websiteId: string) {
     region,
     city,
     event,
+    tag,
   };
 }

src/components/messages.ts

@@ -98,6 +98,7 @@ export const labels = defineMessages({
   devices: { id: 'label.devices', defaultMessage: 'Devices' },
   countries: { id: 'label.countries', defaultMessage: 'Countries' },
   languages: { id: 'label.languages', defaultMessage: 'Languages' },
+  tags: { id: 'label.tags', defaultMessage: 'Tags' },
   count: { id: 'label.count', defaultMessage: 'Count' },
   average: { id: 'label.average', defaultMessage: 'Average' },
   sum: { id: 'label.sum', defaultMessage: 'Sum' },
@@ -220,6 +221,7 @@ export const labels = defineMessages({
   browser: { id: 'label.browser', defaultMessage: 'Browser' },
   device: { id: 'label.device', defaultMessage: 'Device' },
   pageTitle: { id: 'label.pageTitle', defaultMessage: 'Page title' },
+  tag: { id: 'label.tag', defaultMessage: 'Tag' },
   day: { id: 'label.day', defaultMessage: 'Day' },
   date: { id: 'label.date', defaultMessage: 'Date' },
   pageOf: { id: 'label.page-of', defaultMessage: 'Page {current} of {total}' },

src/components/metrics/HostsTable.tsx

@@ -25,7 +25,7 @@ export function HostsTable(props: MetricsTableProps) {
         {...props}
         title={formatMessage(labels.hosts)}
         type="host"
-        metric={formatMessage(labels.views)}
+        metric={formatMessage(labels.visitors)}
         renderLabel={renderLink}
       />
     </>

src/components/metrics/TagsTable.tsx

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