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 && (