diff --git a/components/metrics/FilterTags.js b/components/metrics/FilterTags.js index 37f5981c..637ea066 100644 --- a/components/metrics/FilterTags.js +++ b/components/metrics/FilterTags.js @@ -32,15 +32,13 @@ export default function FilterTags({ websiteId, params, onClick }) { return null; } return ( -
- +
handleCloseFilter(key)}> + + {`${key}`} = {`${safeDecodeURI(params[key])}`} + + + +
); })} diff --git a/components/metrics/FilterTags.module.css b/components/metrics/FilterTags.module.css index 50ae60a0..1c8458ac 100644 --- a/components/metrics/FilterTags.module.css +++ b/components/metrics/FilterTags.module.css @@ -1,11 +1,22 @@ .filters { display: flex; - justify-content: flex-start; - align-items: flex-start; + align-items: center; + gap: 10px; } .tag { - text-align: center; - margin-bottom: 10px; - margin-right: 20px; + display: flex; + flex-direction: row; + align-items: center; + gap: 10px; + font-size: var(--font-size-sm); + border: 1px solid var(--base600); + border-radius: var(--border-radius); + line-height: 30px; + padding: 0 8px; + cursor: pointer; +} + +.tag:hover { + background: var(--base75); } diff --git a/components/pages/settings/teams/TeamWebsitesTable.js b/components/pages/settings/teams/TeamWebsitesTable.js index a596204c..52141523 100644 --- a/components/pages/settings/teams/TeamWebsitesTable.js +++ b/components/pages/settings/teams/TeamWebsitesTable.js @@ -17,14 +17,14 @@ import { labels } from 'components/messages'; import useUser from 'hooks/useUser'; import useApi from 'hooks/useApi'; -export default function TeamWebsitesTable({ teamId, data = [], onSave }) { +export default function TeamWebsitesTable({ data = [], onSave }) { const { formatMessage } = useIntl(); const { user } = useUser(); const { del, useMutation } = useApi(); - const { mutate } = useMutation(data => del(`/teamWebsites/${data.teamWebsiteId}`)); + const { mutate } = useMutation(({ teamWebsiteId }) => del(`/teamWebsites/${teamWebsiteId}`)); const columns = [ - { name: 'name', label: formatMessage(labels.name), style: { flex: 2 } }, + { name: 'name', label: formatMessage(labels.name) }, { name: 'domain', label: formatMessage(labels.domain) }, { name: 'action', label: ' ' }, ]; diff --git a/lib/filters.js b/lib/filters.js index 7e247220..9681a802 100644 --- a/lib/filters.js +++ b/lib/filters.js @@ -1,30 +1,10 @@ export const urlFilter = data => { - const isValidUrl = url => { - return url !== '' && url !== null; - }; - - const cleanUrl = url => { - try { - const { pathname } = new URL(url, location.origin); - - return pathname; - } catch { - return null; - } - }; - const map = data.reduce((obj, { x, y }) => { - if (!isValidUrl(x)) { - return obj; - } - - const url = cleanUrl(x); - - if (url) { - if (!obj[url]) { - obj[url] = y; + if (x) { + if (!obj[x]) { + obj[x] = y; } else { - obj[url] += y; + obj[x] += y; } }