From b7c3b58072dd69d6a7026fae8a290d57456acaa6 Mon Sep 17 00:00:00 2001 From: Francis Cao Date: Thu, 30 Mar 2023 23:13:03 -0700 Subject: [PATCH 1/2] fix to page title collect --- tracker/index.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/tracker/index.js b/tracker/index.js index 698dd09e..68ee282e 100644 --- a/tracker/index.js +++ b/tracker/index.js @@ -132,7 +132,7 @@ const observeTitle = () => { const callback = ([entry]) => { - title = entry.target.data; + title = entry.target.text; }; const observer = new MutationObserver(callback); @@ -140,6 +140,7 @@ observer.observe(document.querySelector('head > title'), { subtree: true, characterData: true, + childList: true, }); }; From 9dd35b3766abe9b6d96725bca43b8c4e4ae1aba6 Mon Sep 17 00:00:00 2001 From: Mike Cao Date: Fri, 31 Mar 2023 05:55:28 -0700 Subject: [PATCH 2/2] Fixed metrics display. --- components/common/FilterLink.js | 27 +- components/common/FilterLink.module.css | 4 + components/common/Tag.module.css | 5 +- components/messages.js | 2 + components/metrics/CountriesTable.js | 6 +- components/metrics/DevicesTable.js | 2 +- components/metrics/LanguagesTable.js | 17 +- components/metrics/PagesTable.js | 31 +- components/metrics/ReferrersTable.js | 11 +- components/metrics/WebsiteChart.js | 11 +- components/metrics/WebsiteHeader.js | 6 +- components/metrics/WebsiteHeader.module.css | 2 +- components/pages/console/TestConsole.js | 2 +- components/pages/websites/WebsiteChartList.js | 2 +- components/pages/websites/WebsiteDetails.js | 2 +- components/pages/websites/WebsiteMenuView.js | 3 +- components/pages/websites/WebsiteTableView.js | 1 - pages/api/websites/[id]/metrics.ts | 10 +- tracker/index.js | 3 +- yarn.lock | 1006 +++++------------ 20 files changed, 345 insertions(+), 808 deletions(-) diff --git a/components/common/FilterLink.js b/components/common/FilterLink.js index 0b6c4a6d..2f99b15a 100644 --- a/components/common/FilterLink.js +++ b/components/common/FilterLink.js @@ -1,27 +1,32 @@ +import { Icon, Icons } from 'react-basics'; import classNames from 'classnames'; import Link from 'next/link'; import { safeDecodeURI } from 'next-basics'; import usePageQuery from 'hooks/usePageQuery'; -import { Icon, Icons } from 'react-basics'; +import useMessages from 'hooks/useMessages'; import styles from './FilterLink.module.css'; export default function FilterLink({ id, value, label, externalUrl }) { + const { formatMessage, labels } = useMessages(); const { resolveUrl, query } = usePageQuery(); const active = query[id] !== undefined; const selected = query[id] === value; return (
- - {safeDecodeURI(label || value)} - + {!value && {label || formatMessage(labels.unknown)}} + {value && ( + + {safeDecodeURI(label || value)} + + )} {externalUrl && ( diff --git a/components/common/FilterLink.module.css b/components/common/FilterLink.module.css index ce3ffa5f..aae750d2 100644 --- a/components/common/FilterLink.module.css +++ b/components/common/FilterLink.module.css @@ -30,3 +30,7 @@ .icon { cursor: pointer; } + +.empty { + color: var(--base400); +} diff --git a/components/common/Tag.module.css b/components/common/Tag.module.css index 95023bbf..a872a7bf 100644 --- a/components/common/Tag.module.css +++ b/components/common/Tag.module.css @@ -1,6 +1,7 @@ .tag { - padding: 2px 4px; - border: 1px solid var(--base300); + padding: 4px 6px; border-radius: 4px; margin-right: 10px; + color: var(--primary400); + background: var(--blue100); } diff --git a/components/messages.js b/components/messages.js index 46586916..bb1578d9 100644 --- a/components/messages.js +++ b/components/messages.js @@ -113,6 +113,8 @@ export const labels = defineMessages({ mobile: { id: 'label.mobile', defaultMessage: 'Mobile' }, toggleCharts: { id: 'label.toggle-charts', defaultMessage: 'Toggle charts' }, editDashboard: { id: 'label.edit-dashboard', defaultMessage: 'Edit dashboard' }, + title: { id: 'label.title', defaultMessage: 'Title' }, + url: { id: 'label.url', defaultMessage: 'URL' }, }); export const messages = defineMessages({ diff --git a/components/metrics/CountriesTable.js b/components/metrics/CountriesTable.js index 70d60e50..5e7d8a8d 100644 --- a/components/metrics/CountriesTable.js +++ b/components/metrics/CountriesTable.js @@ -13,11 +13,7 @@ export default function CountriesTable({ websiteId, onDataLoad, ...props }) { function renderLink({ x: code }) { return (
- +
); } diff --git a/components/metrics/DevicesTable.js b/components/metrics/DevicesTable.js index 53b13148..c877ab58 100644 --- a/components/metrics/DevicesTable.js +++ b/components/metrics/DevicesTable.js @@ -9,7 +9,7 @@ export default function DevicesTable({ websiteId, ...props }) { return ( ); diff --git a/components/metrics/LanguagesTable.js b/components/metrics/LanguagesTable.js index 2bc89076..b32fe2c8 100644 --- a/components/metrics/LanguagesTable.js +++ b/components/metrics/LanguagesTable.js @@ -1,27 +1,24 @@ import MetricsTable from './MetricsTable'; import { percentFilter } from 'lib/filters'; -import { FormattedMessage } from 'react-intl'; import useLanguageNames from 'hooks/useLanguageNames'; import useLocale from 'hooks/useLocale'; +import useMessages from 'hooks/useMessages'; export default function LanguagesTable({ websiteId, onDataLoad, ...props }) { + const { formatMessage, labels } = useMessages(); const { locale } = useLocale(); const languageNames = useLanguageNames(locale); - function renderLabel({ x }) { - return ( -
- {languageNames[x] ?? }{' '} -
- ); - } + const renderLabel = ({ x }) => { + return
{languageNames[x?.split('-')[0]] ?? x}
; + }; return ( } + title={formatMessage(labels.languages)} type="language" - metric={} + metric={formatMessage(labels.visitors)} websiteId={websiteId} onDataLoad={data => onDataLoad?.(percentFilter(data))} renderLabel={renderLabel} diff --git a/components/metrics/PagesTable.js b/components/metrics/PagesTable.js index e7b7e77a..615d6c25 100644 --- a/components/metrics/PagesTable.js +++ b/components/metrics/PagesTable.js @@ -1,19 +1,42 @@ import FilterLink from 'components/common/FilterLink'; +import FilterButtons from 'components/common/FilterButtons'; import MetricsTable from './MetricsTable'; import useMessages from 'hooks/useMessages'; +import usePageQuery from 'hooks/usePageQuery'; -export default function PagesTable({ websiteId, ...props }) { +export default function PagesTable({ websiteId, showFilters, ...props }) { + const { + router, + resolveUrl, + query: { view }, + } = usePageQuery(); const { formatMessage, labels } = useMessages(); - const renderLink = ({ x: url }) => { - return ; + const handleSelect = key => { + router.push(resolveUrl({ view: key }), null, { shallow: true }); + }; + + const buttons = [ + { + label: formatMessage(labels.url), + key: 'url', + }, + { + label: formatMessage(labels.title), + key: 'title', + }, + ]; + + const renderLink = ({ x }) => { + return ; }; return ( <> + {showFilters && } { - return referrer ? ( - - ) : ( - `(${formatMessage(labels.none)})` + return ( + ); }; diff --git a/components/metrics/WebsiteChart.js b/components/metrics/WebsiteChart.js index 0bf23b16..e94a0490 100644 --- a/components/metrics/WebsiteChart.js +++ b/components/metrics/WebsiteChart.js @@ -21,7 +21,7 @@ import useMessages from 'hooks/useMessages'; export default function WebsiteChart({ websiteId, - title, + name, domain, stickyHeader = false, showChart = true, @@ -33,7 +33,7 @@ export default function WebsiteChart({ const { startDate, endDate, unit, value, modified } = dateRange; const [timezone] = useTimezone(); const { - query: { url, referrer, os, browser, device, country }, + query: { url, referrer, os, browser, device, country, title }, } = usePageQuery(); const { get, useQuery } = useApi(); const { ref, isSticky } = useSticky({ enabled: stickyHeader }); @@ -68,7 +68,7 @@ export default function WebsiteChart({ return ( <> - + {showDetailsButton && (