diff --git a/src/app/(main)/websites/[websiteId]/WebsiteExpandedView.tsx b/src/app/(main)/websites/[websiteId]/WebsiteExpandedView.tsx index ea037852..56197ea9 100644 --- a/src/app/(main)/websites/[websiteId]/WebsiteExpandedView.tsx +++ b/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), diff --git a/src/app/(main)/websites/[websiteId]/WebsiteTableView.tsx b/src/app/(main)/websites/[websiteId]/WebsiteTableView.tsx index 7cc415e5..6825ed45 100644 --- a/src/app/(main)/websites/[websiteId]/WebsiteTableView.tsx +++ b/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 ( - + + diff --git a/src/components/hooks/queries/useWebsitePageviews.ts b/src/components/hooks/queries/useWebsitePageviews.ts index 2d6e3428..7dd05659 100644 --- a/src/components/hooks/queries/useWebsitePageviews.ts +++ b/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, diff --git a/src/components/hooks/queries/useWebsiteStats.ts b/src/components/hooks/queries/useWebsiteStats.ts index 2ada662f..a00b221d 100644 --- a/src/components/hooks/queries/useWebsiteStats.ts +++ b/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, diff --git a/src/components/hooks/useFields.ts b/src/components/hooks/useFields.ts index 05d2b458..d08a2340 100644 --- a/src/components/hooks/useFields.ts +++ b/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) }, diff --git a/src/components/messages.ts b/src/components/messages.ts index 79a6b92c..f31cd555 100644 --- a/src/components/messages.ts +++ b/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' }, diff --git a/src/components/metrics/HostsTable.tsx b/src/components/metrics/HostsTable.tsx new file mode 100644 index 00000000..d3a0f3bf --- /dev/null +++ b/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 ( + + + + ); + }; + + return ( + <> + + + ); +} + +export default HostsTable; diff --git a/src/components/metrics/MetricsTable.tsx b/src/components/metrics/MetricsTable.tsx index 26355018..28883528 100644 --- a/src/components/metrics/MetricsTable.tsx +++ b/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, diff --git a/src/lib/constants.ts b/src/lib/constants.ts index 66e17dfb..7d47e0c2 100644 --- a/src/lib/constants.ts +++ b/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', diff --git a/src/pages/api/websites/[websiteId]/pageviews.ts b/src/pages/api/websites/[websiteId]/pageviews.ts index 19671064..c1c08174 100644 --- a/src/pages/api/websites/[websiteId]/pageviews.ts +++ b/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(), diff --git a/src/pages/api/websites/[websiteId]/stats.ts b/src/pages/api/websites/[websiteId]/stats.ts index 81a6d835..3d15e438 100644 --- a/src/pages/api/websites/[websiteId]/stats.ts +++ b/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(),