diff --git a/src/app/(main)/websites/[websiteId]/WebsiteDetails.tsx b/src/app/(main)/websites/[websiteId]/WebsiteDetails.tsx index 1a131da1..8c8ab2f2 100644 --- a/src/app/(main)/websites/[websiteId]/WebsiteDetails.tsx +++ b/src/app/(main)/websites/[websiteId]/WebsiteDetails.tsx @@ -9,6 +9,7 @@ import WebsiteExpandedView from './WebsiteExpandedView'; import WebsiteHeader from './WebsiteHeader'; import WebsiteMetricsBar from './WebsiteMetricsBar'; import WebsiteTableView from './WebsiteTableView'; +import { FILTER_COLUMNS } from 'lib/constants'; export default function WebsiteDetails({ websiteId }: { websiteId: string }) { const { data: website, isLoading, error } = useWebsite(websiteId); @@ -20,13 +21,20 @@ export default function WebsiteDetails({ websiteId }: { websiteId: string }) { } const showLinks = !pathname.includes('/share/'); - const { view, ...params } = query; + const { view } = query; + + const params = Object.keys(query).reduce((obj, key) => { + if (FILTER_COLUMNS[key]) { + obj[key] = query[key]; + } + return obj; + }, {}); return ( <> - + {!website && } {website && ( diff --git a/src/app/(main)/websites/[websiteId]/WebsiteFilterButton.tsx b/src/app/(main)/websites/[websiteId]/WebsiteFilterButton.tsx index a9671757..1d0c7a6a 100644 --- a/src/app/(main)/websites/[websiteId]/WebsiteFilterButton.tsx +++ b/src/app/(main)/websites/[websiteId]/WebsiteFilterButton.tsx @@ -9,9 +9,15 @@ import styles from './WebsiteFilterButton.module.css'; export function WebsiteFilterButton({ websiteId, className, + position = 'bottom', + alignment = 'end', + showText = true, }: { websiteId: string; className?: string; + position?: 'bottom' | 'top' | 'left' | 'right'; + alignment?: 'end' | 'center' | 'start'; + showText?: boolean; }) { const { formatMessage, labels } = useMessages(); const { renderUrl, router } = useNavigation(); @@ -30,9 +36,9 @@ export function WebsiteFilterButton({ - {formatMessage(labels.filter)} + {showText && {formatMessage(labels.filter)}} - + {(close: () => void) => { return ( diff --git a/src/app/(main)/websites/[websiteId]/WebsiteHeader.tsx b/src/app/(main)/websites/[websiteId]/WebsiteHeader.tsx index dc0f4338..0cbaeb44 100644 --- a/src/app/(main)/websites/[websiteId]/WebsiteHeader.tsx +++ b/src/app/(main)/websites/[websiteId]/WebsiteHeader.tsx @@ -30,6 +30,11 @@ export function WebsiteHeader({ icon: , path: '', }, + { + label: formatMessage(labels.compare), + icon: , + path: '/compare', + }, { label: formatMessage(labels.realtime), icon: , diff --git a/src/app/(main)/websites/[websiteId]/WebsiteMetricsBar.module.css b/src/app/(main)/websites/[websiteId]/WebsiteMetricsBar.module.css index db48bd55..e9863961 100644 --- a/src/app/(main)/websites/[websiteId]/WebsiteMetricsBar.module.css +++ b/src/app/(main)/websites/[websiteId]/WebsiteMetricsBar.module.css @@ -38,9 +38,3 @@ border-bottom: 1px solid var(--base300); } } - -@media screen and (max-width: 768px) { - .button { - display: none; - } -} diff --git a/src/app/(main)/websites/[websiteId]/WebsiteMetricsBar.tsx b/src/app/(main)/websites/[websiteId]/WebsiteMetricsBar.tsx index e4acea3b..06947a51 100644 --- a/src/app/(main)/websites/[websiteId]/WebsiteMetricsBar.tsx +++ b/src/app/(main)/websites/[websiteId]/WebsiteMetricsBar.tsx @@ -5,18 +5,10 @@ import MetricCard from 'components/metrics/MetricCard'; import MetricsBar from 'components/metrics/MetricsBar'; import { formatShortTime } from 'lib/format'; import WebsiteFilterButton from './WebsiteFilterButton'; -import styles from './WebsiteMetricsBar.module.css'; import useWebsiteStats from 'components/hooks/queries/useWebsiteStats'; +import styles from './WebsiteMetricsBar.module.css'; -export function WebsiteMetricsBar({ - websiteId, - showFilter = true, - sticky, -}: { - websiteId: string; - showFilter?: boolean; - sticky?: boolean; -}) { +export function WebsiteMetricsBar({ websiteId, sticky }: { websiteId: string; sticky?: boolean }) { const { formatMessage, labels } = useMessages(); const { ref, isSticky } = useSticky({ enabled: sticky }); const { data, isLoading, isFetched, error } = useWebsiteStats(websiteId); @@ -89,7 +81,7 @@ export function WebsiteMetricsBar({ )}
- {showFilter && } +
diff --git a/src/app/(main)/websites/[websiteId]/compare/WebsiteComparePage.tsx b/src/app/(main)/websites/[websiteId]/compare/WebsiteComparePage.tsx new file mode 100644 index 00000000..2fe971ae --- /dev/null +++ b/src/app/(main)/websites/[websiteId]/compare/WebsiteComparePage.tsx @@ -0,0 +1,13 @@ +import WebsiteHeader from '../WebsiteHeader'; +import WebsiteMetricsBar from '../WebsiteMetricsBar'; + +export function WebsiteComparePage({ websiteId }) { + return ( + <> + + + + ); +} + +export default WebsiteComparePage; diff --git a/src/app/(main)/websites/[websiteId]/compare/page.tsx b/src/app/(main)/websites/[websiteId]/compare/page.tsx new file mode 100644 index 00000000..b3009fca --- /dev/null +++ b/src/app/(main)/websites/[websiteId]/compare/page.tsx @@ -0,0 +1,10 @@ +import WebsiteComparePage from './WebsiteComparePage'; +import { Metadata } from 'next'; + +export default function ({ params: { websiteId } }) { + return ; +} + +export const metadata: Metadata = { + title: 'Website Comparison', +}; diff --git a/src/assets/compare.svg b/src/assets/compare.svg new file mode 100644 index 00000000..e037c243 --- /dev/null +++ b/src/assets/compare.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/target.svg b/src/assets/target.svg index 000f34c7..c2e47e32 100644 --- a/src/assets/target.svg +++ b/src/assets/target.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/components/icons.ts b/src/components/icons.ts index 3cbb09d2..8e5a481c 100644 --- a/src/components/icons.ts +++ b/src/components/icons.ts @@ -6,6 +6,7 @@ import Bolt from 'assets/bolt.svg'; import Calendar from 'assets/calendar.svg'; import Change from 'assets/change.svg'; import Clock from 'assets/clock.svg'; +import Compare from 'assets/compare.svg'; import Dashboard from 'assets/dashboard.svg'; import Eye from 'assets/eye.svg'; import Gear from 'assets/gear.svg'; @@ -32,6 +33,7 @@ const icons = { Calendar, Change, Clock, + Compare, Dashboard, Eye, Gear, diff --git a/src/components/messages.ts b/src/components/messages.ts index 238ebf52..6231c6f3 100644 --- a/src/components/messages.ts +++ b/src/components/messages.ts @@ -247,6 +247,7 @@ export const labels = defineMessages({ id: 'label.journey-description', defaultMessage: 'Understand how users nagivate through your website.', }, + compare: { id: 'label.compare', defaultMessage: 'Compare' }, }); export const messages = defineMessages({ diff --git a/src/components/metrics/FilterTags.module.css b/src/components/metrics/FilterTags.module.css index fe5c345c..ea7714f4 100644 --- a/src/components/metrics/FilterTags.module.css +++ b/src/components/metrics/FilterTags.module.css @@ -2,6 +2,12 @@ display: flex; align-items: center; gap: 10px; + background: var(--base75); + padding: 10px 20px; + border: 1px solid var(--base400); + border-radius: 8px; + margin-bottom: 20px; + flex-wrap: wrap; } .label { @@ -12,12 +18,13 @@ display: flex; flex-direction: row; align-items: center; - gap: 10px; - background: var(--base75); + gap: 4px; + font-size: 12px; + background: var(--base50); border: 1px solid var(--base400); border-radius: var(--border-radius); box-shadow: 1px 1px 1px var(--base500); - padding: 8px 16px; + padding: 6px 14px; cursor: pointer; } @@ -27,6 +34,8 @@ .close { font-weight: 700; + align-self: center; + margin-left: auto; } .name, diff --git a/src/components/metrics/FilterTags.tsx b/src/components/metrics/FilterTags.tsx index 35d12556..ee136ae3 100644 --- a/src/components/metrics/FilterTags.tsx +++ b/src/components/metrics/FilterTags.tsx @@ -13,6 +13,7 @@ import FieldFilterEditForm from 'app/(main)/reports/[reportId]/FieldFilterEditFo import { OPERATOR_PREFIXES } from 'lib/constants'; import { isSearchOperator, parseParameterValue } from 'lib/params'; import styles from './FilterTags.module.css'; +import WebsiteFilterButton from 'app/(main)/websites/[websiteId]/WebsiteFilterButton'; export function FilterTags({ websiteId, @@ -100,6 +101,7 @@ export function FilterTags({ ); })} +