Pixel/link metrics pages.

src/app/(main)/links/LinkEditForm.tsx

@@ -32,8 +32,8 @@ export function LinkEditForm({
   onSave?: () => void;
   onClose?: () => void;
 }) {
-  const { formatMessage, labels } = useMessages();
-  const { mutate, error, isPending, touch } = useUpdateQuery(
+  const { formatMessage, labels, messages } = useMessages();
+  const { mutate, error, isPending, touch, toast } = useUpdateQuery(
     linkId ? `/links/${linkId}` : '/links',
     {
       id: linkId,
@@ -48,6 +48,7 @@ export function LinkEditForm({
   const handleSubmit = async (data: any) => {
     mutate(data, {
       onSuccess: async () => {
+        toast(formatMessage(messages.saved));
         touch('links');
         onSave?.();
         onClose?.();

src/app/(main)/links/LinkProvider.tsx

@@ -0,0 +1,20 @@
+'use client';
+import { createContext, ReactNode } from 'react';
+import { useLinkQuery } from '@/components/hooks';
+import { Loading } from '@umami/react-zen';
+
+export const LinkContext = createContext(null);
+
+export function LinkProvider({ linkId, children }: { linkId?: string; children: ReactNode }) {
+  const { data: link, isLoading, isFetching } = useLinkQuery(linkId);
+
+  if (isFetching && isLoading) {
+    return <Loading position="page" />;
+  }
+
+  if (!link) {
+    return null;
+  }
+
+  return <LinkContext.Provider value={link}>{children}</LinkContext.Provider>;
+}

src/app/(main)/links/LinksTable.tsx

@@ -1,17 +1,16 @@
+import Link from 'next/link';
 import { DataTable, DataColumn, Row } from '@umami/react-zen';
-import { useConfig, useMessages, useNavigation } from '@/components/hooks';
+import { useMessages, useNavigation, useSlug } from '@/components/hooks';
 import { Empty } from '@/components/common/Empty';
 import { DateDistance } from '@/components/common/DateDistance';
 import { ExternalLink } from '@/components/common/ExternalLink';
 import { LinkEditButton } from './LinkEditButton';
 import { LinkDeleteButton } from './LinkDeleteButton';
-import { LINKS_URL } from '@/lib/constants';
 
 export function LinksTable({ data = [] }) {
   const { formatMessage, labels } = useMessages();
-  const { websiteId } = useNavigation();
-  const { linksUrl } = useConfig();
-  const hostUrl = linksUrl || LINKS_URL;
+  const { websiteId, renderUrl } = useNavigation();
+  const { getSlugUrl } = useSlug('link');
 
   if (data.length === 0) {
     return <Empty />;
@@ -19,10 +18,14 @@ export function LinksTable({ data = [] }) {
 
   return (
     <DataTable data={data}>
-      <DataColumn id="name" label={formatMessage(labels.name)} />
+      <DataColumn id="name" label={formatMessage(labels.name)}>
+        {({ id, name }: any) => {
+          return <Link href={renderUrl(`/links/${id}`)}>{name}</Link>;
+        }}
+      </DataColumn>
       <DataColumn id="slug" label={formatMessage(labels.link)}>
         {({ slug }: any) => {
-          const url = `${hostUrl}/${slug}`;
+          const url = getSlugUrl(slug);
           return <ExternalLink href={url}>{url}</ExternalLink>;
         }}
       </DataColumn>

src/app/(main)/links/[linkId]/LinkControls.tsx

@@ -0,0 +1,34 @@
+import { Column, Row } from '@umami/react-zen';
+import { WebsiteFilterButton } from '@/app/(main)/websites/[websiteId]/WebsiteFilterButton';
+import { WebsiteDateFilter } from '@/components/input/WebsiteDateFilter';
+import { FilterBar } from '@/components/input/FilterBar';
+import { WebsiteMonthSelect } from '@/components/input/WebsiteMonthSelect';
+import { ExportButton } from '@/components/input/ExportButton';
+
+export function LinkControls({
+  linkId: websiteId,
+  allowFilter = true,
+  allowDateFilter = true,
+  allowMonthFilter,
+  allowCompare,
+  allowDownload = false,
+}: {
+  linkId: string;
+  allowFilter?: boolean;
+  allowCompare?: boolean;
+  allowDateFilter?: boolean;
+  allowMonthFilter?: boolean;
+  allowDownload?: boolean;
+}) {
+  return (
+    <Column gap>
+      <Row alignItems="center" justifyContent="space-between" gap="3">
+        {allowFilter ? <WebsiteFilterButton websiteId={websiteId} /> : <div />}
+        {allowDateFilter && <WebsiteDateFilter websiteId={websiteId} allowCompare={allowCompare} />}
+        {allowDownload && <ExportButton websiteId={websiteId} />}
+        {allowMonthFilter && <WebsiteMonthSelect websiteId={websiteId} />}
+      </Row>
+      {allowFilter && <FilterBar websiteId={websiteId} />}
+    </Column>
+  );
+}

src/app/(main)/links/[linkId]/LinkHeader.tsx

@@ -0,0 +1,22 @@
+import { useLink, useMessages, useSlug } from '@/components/hooks';
+import { PageHeader } from '@/components/common/PageHeader';
+import { Icon, Text } from '@umami/react-zen';
+import { ExternalLink } from '@/components/icons';
+import { LinkButton } from '@/components/common/LinkButton';
+
+export function LinkHeader() {
+  const { formatMessage, labels } = useMessages();
+  const { getSlugUrl } = useSlug('link');
+  const link = useLink();
+
+  return (
+    <PageHeader title={link.name} description={link.url}>
+      <LinkButton href={getSlugUrl(link.slug)}>
+        <Icon>
+          <ExternalLink />
+        </Icon>
+        <Text>{formatMessage(labels.view)}</Text>
+      </LinkButton>
+    </PageHeader>
+  );
+}

src/app/(main)/links/[linkId]/LinkMetricsBar.tsx

@@ -0,0 +1,71 @@
+import { useDateRange, useMessages } from '@/components/hooks';
+import { MetricCard } from '@/components/metrics/MetricCard';
+import { MetricsBar } from '@/components/metrics/MetricsBar';
+import { formatLongNumber } from '@/lib/format';
+import { useWebsiteStatsQuery } from '@/components/hooks/queries/useWebsiteStatsQuery';
+import { LoadingPanel } from '@/components/common/LoadingPanel';
+
+export function LinkMetricsBar({
+  linkId,
+}: {
+  linkId: string;
+  showChange?: boolean;
+  compareMode?: boolean;
+}) {
+  const { dateRange } = useDateRange(linkId);
+  const { formatMessage, labels } = useMessages();
+  const { data, isLoading, isFetching, error } = useWebsiteStatsQuery(linkId);
+  const isAllTime = dateRange.value === 'all';
+
+  const { pageviews, visitors, visits, comparison } = data || {};
+
+  const metrics = data
+    ? [
+        {
+          value: visitors,
+          label: formatMessage(labels.visitors),
+          change: visitors - comparison.visitors,
+          formatValue: formatLongNumber,
+        },
+        {
+          value: visits,
+          label: formatMessage(labels.visits),
+          change: visits - comparison.visits,
+          formatValue: formatLongNumber,
+        },
+        {
+          value: pageviews,
+          label: formatMessage(labels.views),
+          change: pageviews - comparison.pageviews,
+          formatValue: formatLongNumber,
+        },
+      ]
+    : null;
+
+  return (
+    <LoadingPanel
+      data={metrics}
+      isLoading={isLoading}
+      isFetching={isFetching}
+      error={error}
+      minHeight="136px"
+    >
+      <MetricsBar>
+        {metrics?.map(({ label, value, prev, change, formatValue, reverseColors }: any) => {
+          return (
+            <MetricCard
+              key={label}
+              value={value}
+              previousValue={prev}
+              label={label}
+              change={change}
+              formatValue={formatValue}
+              reverseColors={reverseColors}
+              showChange={!isAllTime}
+            />
+          );
+        })}
+      </MetricsBar>
+    </LoadingPanel>
+  );
+}

src/app/(main)/links/[linkId]/LinkPage.tsx

@@ -0,0 +1,59 @@
+'use client';
+import { PageBody } from '@/components/common/PageBody';
+import { LinkProvider } from '@/app/(main)/links/LinkProvider';
+import { LinkHeader } from '@/app/(main)/links/[linkId]/LinkHeader';
+import { Panel } from '@/components/common/Panel';
+import { WebsiteChart } from '@/app/(main)/websites/[websiteId]/WebsiteChart';
+import { LinkMetricsBar } from '@/app/(main)/links/[linkId]/LinkMetricsBar';
+import { LinkControls } from '@/app/(main)/links/[linkId]/LinkControls';
+import { Grid } from '@umami/react-zen';
+import { GridRow } from '@/components/common/GridRow';
+import { ReferrersTable } from '@/components/metrics/ReferrersTable';
+import { BrowsersTable } from '@/components/metrics/BrowsersTable';
+import { OSTable } from '@/components/metrics/OSTable';
+import { DevicesTable } from '@/components/metrics/DevicesTable';
+import { WorldMap } from '@/components/metrics/WorldMap';
+import { CountriesTable } from '@/components/metrics/CountriesTable';
+
+export function LinkPage({ linkId }: { linkId: string }) {
+  const props = { websiteId: linkId, limit: 10, allowDownload: false };
+
+  return (
+    <LinkProvider linkId={linkId}>
+      <PageBody gap>
+        <LinkHeader />
+        <LinkControls linkId={linkId} />
+        <LinkMetricsBar linkId={linkId} showChange={true} />
+        <Panel>
+          <WebsiteChart websiteId={linkId} />
+        </Panel>
+        <GridRow layout="two">
+          <Panel>
+            <ReferrersTable {...props} />
+          </Panel>
+        </GridRow>
+        <Grid gap="3">
+          <GridRow layout="three">
+            <Panel>
+              <BrowsersTable {...props} />
+            </Panel>
+            <Panel>
+              <OSTable {...props} />
+            </Panel>
+            <Panel>
+              <DevicesTable {...props} />
+            </Panel>
+          </GridRow>
+          <GridRow layout="two-one">
+            <Panel gridColumn="span 2" noPadding>
+              <WorldMap websiteId={linkId} />
+            </Panel>
+            <Panel>
+              <CountriesTable {...props} />
+            </Panel>
+          </GridRow>
+        </Grid>
+      </PageBody>
+    </LinkProvider>
+  );
+}

src/app/(main)/links/[linkId]/page.tsx

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