Merged compare logic. Removed compare page.

src/app/(main)/websites/[websiteId]/compare/WebsiteComparePage.tsx

@@ -1,24 +0,0 @@
-'use client';
-import { Grid } from '@umami/react-zen';
-import { Panel } from '@/components/common/Panel';
-import { WebsiteHeader } from '../WebsiteHeader';
-import { WebsiteMetricsBar } from '../WebsiteMetricsBar';
-import { FilterBar } from '@/components/metrics/FilterBar';
-import { WebsiteChart } from '../WebsiteChart';
-import { WebsiteCompareTables } from './WebsiteCompareTables';
-
-export function WebsiteComparePage({ websiteId }) {
-  return (
-    <Grid gap="3">
-      <WebsiteHeader websiteId={websiteId} />
-      <FilterBar websiteId={websiteId} />
-      <WebsiteMetricsBar websiteId={websiteId} compareMode={true} showFilter={true} />
-      <Panel>
-        <WebsiteChart websiteId={websiteId} compareMode={true} />
-      </Panel>
-      <Panel>
-        <WebsiteCompareTables websiteId={websiteId} />
-      </Panel>
-    </Grid>
-  );
-}

src/app/(main)/websites/[websiteId]/compare/WebsiteCompareTables.module.css

@@ -1,14 +0,0 @@
-.container {
-  margin-bottom: 60px;
-}
-
-.nav {
-  width: 200px;
-  margin-top: 40px;
-}
-
-.title {
-  color: var(--base800);
-  text-align: center;
-  font-weight: 700;
-}

src/app/(main)/websites/[websiteId]/compare/WebsiteCompareTables.tsx

@@ -1,163 +0,0 @@
-import { Grid, Heading, Column } from '@umami/react-zen';
-import { useDateRange, useMessages, useNavigation } from '@/components/hooks';
-import { SideBar } from '@/components/common/SideBar';
-import { BrowsersTable } from '@/components/metrics/BrowsersTable';
-import { ChangeLabel } from '@/components/metrics/ChangeLabel';
-import { CitiesTable } from '@/components/metrics/CitiesTable';
-import { CountriesTable } from '@/components/metrics/CountriesTable';
-import { DevicesTable } from '@/components/metrics/DevicesTable';
-import { EventsTable } from '@/components/metrics/EventsTable';
-import { LanguagesTable } from '@/components/metrics/LanguagesTable';
-import { MetricsTable } from '@/components/metrics/MetricsTable';
-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 { RegionsTable } from '@/components/metrics/RegionsTable';
-import { ScreenTable } from '@/components/metrics/ScreenTable';
-import { TagsTable } from '@/components/metrics/TagsTable';
-import { getCompareDate } from '@/lib/date';
-import { formatNumber } from '@/lib/format';
-import { useState } from 'react';
-import { useWebsites } from '@/store/websites';
-
-const views = {
-  url: PagesTable,
-  title: PagesTable,
-  referrer: ReferrersTable,
-  browser: BrowsersTable,
-  os: OSTable,
-  device: DevicesTable,
-  screen: ScreenTable,
-  country: CountriesTable,
-  region: RegionsTable,
-  city: CitiesTable,
-  language: LanguagesTable,
-  event: EventsTable,
-  query: QueryParametersTable,
-  tag: TagsTable,
-};
-
-export function WebsiteCompareTables({ websiteId }: { websiteId: string }) {
-  const [data, setData] = useState([]);
-  const { dateRange } = useDateRange(websiteId);
-  const dateCompare = useWebsites(state => state[websiteId]?.dateCompare);
-  const { formatMessage, labels } = useMessages();
-  const {
-    renderUrl,
-    query: { view },
-  } = useNavigation();
-  const Component: typeof MetricsTable = views[view || 'url'] || (() => null);
-
-  const items = [
-    {
-      key: 'url',
-      label: formatMessage(labels.pages),
-      url: renderUrl({ view: 'url' }),
-    },
-    {
-      key: 'referrer',
-      label: formatMessage(labels.referrers),
-      url: renderUrl({ view: 'referrer' }),
-    },
-    {
-      key: 'browser',
-      label: formatMessage(labels.browsers),
-      url: renderUrl({ view: 'browser' }),
-    },
-    {
-      key: 'os',
-      label: formatMessage(labels.os),
-      url: renderUrl({ view: 'os' }),
-    },
-    {
-      key: 'device',
-      label: formatMessage(labels.devices),
-      url: renderUrl({ view: 'device' }),
-    },
-    {
-      key: 'country',
-      label: formatMessage(labels.countries),
-      url: renderUrl({ view: 'country' }),
-    },
-    {
-      key: 'region',
-      label: formatMessage(labels.regions),
-      url: renderUrl({ view: 'region' }),
-    },
-    {
-      key: 'city',
-      label: formatMessage(labels.cities),
-      url: renderUrl({ view: 'city' }),
-    },
-    {
-      key: 'language',
-      label: formatMessage(labels.languages),
-      url: renderUrl({ view: 'language' }),
-    },
-    {
-      key: 'screen',
-      label: formatMessage(labels.screens),
-      url: renderUrl({ view: 'screen' }),
-    },
-    {
-      key: 'event',
-      label: formatMessage(labels.events),
-      url: renderUrl({ view: 'event' }),
-    },
-    {
-      key: 'query',
-      label: formatMessage(labels.queryParameters),
-      url: renderUrl({ view: 'query' }),
-    },
-    {
-      key: 'host',
-      label: formatMessage(labels.hosts),
-      url: renderUrl({ view: 'host' }),
-    },
-    {
-      key: 'tag',
-      label: formatMessage(labels.tags),
-      url: renderUrl({ view: 'tag' }),
-    },
-  ];
-
-  const renderChange = ({ x, y }) => {
-    const prev = data.find(d => d.x === x)?.y;
-    const value = y - prev;
-    const change = Math.abs(((y - prev) / prev) * 100);
-
-    return !isNaN(change) && <ChangeLabel value={value}>{formatNumber(change)}%</ChangeLabel>;
-  };
-
-  const { startDate, endDate } = getCompareDate(
-    dateCompare,
-    dateRange.startDate,
-    dateRange.endDate,
-  );
-
-  const params = {
-    startAt: startDate.getTime(),
-    endAt: endDate.getTime(),
-  };
-
-  return (
-    <Grid columns="300px 1fr 1fr" gap="3">
-      <SideBar items={items} selectedKey={view} />
-      <Column>
-        <Heading>{formatMessage(labels.previous)}</Heading>
-        <Component
-          websiteId={websiteId}
-          limit={20}
-          showMore={false}
-          onDataLoad={setData}
-          params={params}
-        />
-      </Column>
-      <Column>
-        <Heading> {formatMessage(labels.current)}</Heading>
-        <Component websiteId={websiteId} limit={20} showMore={false} renderChange={renderChange} />
-      </Column>
-    </Grid>
-  );
-}

src/app/(main)/websites/[websiteId]/compare/page.tsx

@@ -1,12 +0,0 @@
-import { WebsiteComparePage } from './WebsiteComparePage';
-import { Metadata } from 'next';
-
-export default async function ({ params }: { params: Promise<{ websiteId: string }> }) {
-  const { websiteId } = await params;
-
-  return <WebsiteComparePage websiteId={websiteId} />;
-}
-
-export const metadata: Metadata = {
-  title: 'Website Comparison',
-};