diff --git a/.eslintrc.json b/.eslintrc.json
index 9cbbd586..d0f2ba18 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -42,7 +42,8 @@
"@typescript-eslint/no-var-requires": "off",
"@typescript-eslint/no-empty-interface": "off",
"@typescript-eslint/no-unused-vars": ["error", { "ignoreRestSiblings": true }],
- "@typescript-eslint/no-namespace": ["error", { "allowDeclarations": true }]
+ "@typescript-eslint/no-namespace": ["error", { "allowDeclarations": true }],
+ "@typescript-eslint/triple-slash-reference": "off"
},
"globals": {
"React": "writable"
diff --git a/next-env.d.ts b/next-env.d.ts
index 1b3be084..830fb594 100644
--- a/next-env.d.ts
+++ b/next-env.d.ts
@@ -1,5 +1,6 @@
///
///
+///
// NOTE: This file should not be edited
// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/src/app/(main)/links/[linkId]/LinkHeader.tsx b/src/app/(main)/links/[linkId]/LinkHeader.tsx
index 6f8f7a57..37e64214 100644
--- a/src/app/(main)/links/[linkId]/LinkHeader.tsx
+++ b/src/app/(main)/links/[linkId]/LinkHeader.tsx
@@ -11,7 +11,7 @@ export function LinkHeader() {
return (
-
+
diff --git a/src/app/(main)/links/[linkId]/LinkPage.tsx b/src/app/(main)/links/[linkId]/LinkPage.tsx
index d57f937a..d349dc8c 100644
--- a/src/app/(main)/links/[linkId]/LinkPage.tsx
+++ b/src/app/(main)/links/[linkId]/LinkPage.tsx
@@ -6,7 +6,7 @@ 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 { Grid, Tab, TabList, TabPanel, Tabs } from '@umami/react-zen';
import { GridRow } from '@/components/common/GridRow';
import { ReferrersTable } from '@/components/metrics/ReferrersTable';
import { BrowsersTable } from '@/components/metrics/BrowsersTable';
@@ -14,9 +14,16 @@ import { OSTable } from '@/components/metrics/OSTable';
import { DevicesTable } from '@/components/metrics/DevicesTable';
import { WorldMap } from '@/components/metrics/WorldMap';
import { CountriesTable } from '@/components/metrics/CountriesTable';
+import { ChannelsTable } from '@/components/metrics/ChannelsTable';
+import { RegionsTable } from '@/components/metrics/RegionsTable';
+import { CitiesTable } from '@/components/metrics/CitiesTable';
+import { SessionsWeekly } from '@/app/(main)/websites/[websiteId]/sessions/SessionsWeekly';
+import { useMessages } from '@/components/hooks';
export function LinkPage({ linkId }: { linkId: string }) {
- const props = { websiteId: linkId, limit: 10, allowDownload: false };
+ const { formatMessage, labels } = useMessages();
+ const tableProps = { websiteId: linkId, limit: 10, allowDownload: false };
+ const rowProps = { minHeight: 570 };
return (
@@ -27,29 +34,67 @@ export function LinkPage({ linkId }: { linkId: string }) {
-
-
-
-
-
-
-
+
+
-
-
-
-
-
-
-
+
+
+ {formatMessage(labels.referrers)}
+ {formatMessage(labels.channels)}
+
+
+
+
+
+
+
+
-
+
-
+
+
+ {formatMessage(labels.countries)}
+ {formatMessage(labels.regions)}
+ {formatMessage(labels.cities)}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {formatMessage(labels.browsers)}
+ {formatMessage(labels.os)}
+ {formatMessage(labels.devices)}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/app/(main)/pixels/[pixelId]/PixelHeader.tsx b/src/app/(main)/pixels/[pixelId]/PixelHeader.tsx
index ad81a9bf..4b4357de 100644
--- a/src/app/(main)/pixels/[pixelId]/PixelHeader.tsx
+++ b/src/app/(main)/pixels/[pixelId]/PixelHeader.tsx
@@ -11,7 +11,7 @@ export function PixelHeader() {
return (
-
+
diff --git a/src/app/(main)/pixels/[pixelId]/PixelPage.tsx b/src/app/(main)/pixels/[pixelId]/PixelPage.tsx
index eb42b125..45192801 100644
--- a/src/app/(main)/pixels/[pixelId]/PixelPage.tsx
+++ b/src/app/(main)/pixels/[pixelId]/PixelPage.tsx
@@ -6,7 +6,7 @@ import { Panel } from '@/components/common/Panel';
import { WebsiteChart } from '@/app/(main)/websites/[websiteId]/WebsiteChart';
import { PixelMetricsBar } from '@/app/(main)/pixels/[pixelId]/PixelMetricsBar';
import { PixelControls } from '@/app/(main)/pixels/[pixelId]/PixelControls';
-import { Grid } from '@umami/react-zen';
+import { Grid, Tab, TabList, TabPanel, Tabs } from '@umami/react-zen';
import { GridRow } from '@/components/common/GridRow';
import { ReferrersTable } from '@/components/metrics/ReferrersTable';
import { BrowsersTable } from '@/components/metrics/BrowsersTable';
@@ -14,9 +14,16 @@ import { OSTable } from '@/components/metrics/OSTable';
import { DevicesTable } from '@/components/metrics/DevicesTable';
import { WorldMap } from '@/components/metrics/WorldMap';
import { CountriesTable } from '@/components/metrics/CountriesTable';
+import { useMessages } from '@/components/hooks';
+import { ChannelsTable } from '@/components/metrics/ChannelsTable';
+import { RegionsTable } from '@/components/metrics/RegionsTable';
+import { CitiesTable } from '@/components/metrics/CitiesTable';
+import { SessionsWeekly } from '@/app/(main)/websites/[websiteId]/sessions/SessionsWeekly';
export function PixelPage({ pixelId }: { pixelId: string }) {
- const props = { websiteId: pixelId, limit: 10, allowDownload: false };
+ const { formatMessage, labels } = useMessages();
+ const tableProps = { websiteId: pixelId, limit: 10, allowDownload: false };
+ const rowProps = { minHeight: 570 };
return (
@@ -27,29 +34,67 @@ export function PixelPage({ pixelId }: { pixelId: string }) {
-
-
-
-
-
-
-
+
+
-
-
-
-
-
-
-
+
+
+ {formatMessage(labels.referrers)}
+ {formatMessage(labels.channels)}
+
+
+
+
+
+
+
+
-
+
-
+
+
+ {formatMessage(labels.countries)}
+ {formatMessage(labels.regions)}
+ {formatMessage(labels.cities)}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {formatMessage(labels.browsers)}
+ {formatMessage(labels.os)}
+ {formatMessage(labels.devices)}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/app/(main)/websites/[websiteId]/WebsiteLayout.tsx b/src/app/(main)/websites/[websiteId]/WebsiteLayout.tsx
index 152c2a8f..cf75e86a 100644
--- a/src/app/(main)/websites/[websiteId]/WebsiteLayout.tsx
+++ b/src/app/(main)/websites/[websiteId]/WebsiteLayout.tsx
@@ -1,10 +1,10 @@
'use client';
import { ReactNode } from 'react';
import { Column, Grid } from '@umami/react-zen';
-import { WebsiteProvider } from './WebsiteProvider';
+import { WebsiteProvider } from '@/app/(main)/websites/WebsiteProvider';
import { PageBody } from '@/components/common/PageBody';
import { WebsiteHeader } from './WebsiteHeader';
-import { WebsiteNav } from '@/app/(main)/websites/[websiteId]/WebsiteNav';
+import { WebsiteNav } from './WebsiteNav';
export function WebsiteLayout({ websiteId, children }: { websiteId: string; children: ReactNode }) {
return (
diff --git a/src/app/(main)/websites/[websiteId]/WebsiteTableView.tsx b/src/app/(main)/websites/[websiteId]/WebsiteTableView.tsx
index 93567cc1..f3a14418 100644
--- a/src/app/(main)/websites/[websiteId]/WebsiteTableView.tsx
+++ b/src/app/(main)/websites/[websiteId]/WebsiteTableView.tsx
@@ -1,4 +1,4 @@
-import { Grid } from '@umami/react-zen';
+import { Grid, Tabs, Tab, TabList, TabPanel } from '@umami/react-zen';
import { GridRow } from '@/components/common/GridRow';
import { Panel } from '@/components/common/Panel';
import { PagesTable } from '@/components/metrics/PagesTable';
@@ -8,37 +8,97 @@ import { OSTable } from '@/components/metrics/OSTable';
import { DevicesTable } from '@/components/metrics/DevicesTable';
import { WorldMap } from '@/components/metrics/WorldMap';
import { CountriesTable } from '@/components/metrics/CountriesTable';
+import { useMessages } from '@/components/hooks';
+import { ChannelsTable } from '@/components/metrics/ChannelsTable';
+import { RegionsTable } from '@/components/metrics/RegionsTable';
+import { CitiesTable } from '@/components/metrics/CitiesTable';
+import { SessionsWeekly } from '@/app/(main)/websites/[websiteId]/sessions/SessionsWeekly';
export function WebsiteTableView({ websiteId }: { websiteId: string }) {
- const props = { websiteId, limit: 10, allowDownload: false };
+ const { formatMessage, labels } = useMessages();
+ const tableProps = { websiteId, limit: 10, allowDownload: false };
+ const rowProps = { minHeight: 570 };
return (
-
+
-
+
+
+ {formatMessage(labels.pages)}
+ {formatMessage(labels.entry)}
+ {formatMessage(labels.exit)}
+
+
+
+
+
+
+
+
+
+
+
-
+
+
+ {formatMessage(labels.referrers)}
+ {formatMessage(labels.channels)}
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
+
-
+
+
+ {formatMessage(labels.countries)}
+ {formatMessage(labels.regions)}
+ {formatMessage(labels.cities)}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {formatMessage(labels.browsers)}
+ {formatMessage(labels.os)}
+ {formatMessage(labels.devices)}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/app/(main)/websites/[websiteId]/sessions/SessionsWeekly.tsx b/src/app/(main)/websites/[websiteId]/sessions/SessionsWeekly.tsx
index d4a45ad3..a2055b80 100644
--- a/src/app/(main)/websites/[websiteId]/sessions/SessionsWeekly.tsx
+++ b/src/app/(main)/websites/[websiteId]/sessions/SessionsWeekly.tsx
@@ -52,9 +52,7 @@ export function SessionsWeekly({ websiteId }: { websiteId: string }) {
.toLowerCase();
return (
-
- {label}
-
+ {label}
);
})}
diff --git a/src/components/metrics/MetricsTable.tsx b/src/components/metrics/MetricsTable.tsx
index 1db956ca..2e50ef77 100644
--- a/src/components/metrics/MetricsTable.tsx
+++ b/src/components/metrics/MetricsTable.tsx
@@ -1,5 +1,5 @@
import { ReactNode, useMemo, useState } from 'react';
-import { Button, Column, Icon, Row, SearchField, Text, Grid } from '@umami/react-zen';
+import { Button, Column, Icon, Row, SearchField, Text } from '@umami/react-zen';
import { LinkButton } from '@/components/common/LinkButton';
import { LoadingPanel } from '@/components/common/LoadingPanel';
import {
@@ -114,11 +114,18 @@ export function MetricsTable({
}, [data, dataFilter, search, limit, formatValue, type]);
const downloadData = isExpanded ? data : filteredData;
+ const hasActions = data && (allowSearch || allowDownload || onClose || children);
return (
-
-
-
+
+ {hasActions && (
+
{allowSearch && }
{children}
@@ -132,25 +139,32 @@ export function MetricsTable({
)}
-
- {data &&
- (isExpanded ? (
-
- ) : (
-
- ))}
- {showMore && limit && (
-
-
-
-
-
- {formatMessage(labels.more)}
-
-
- )}
-
-
+ )}
+
+ {data &&
+ (isExpanded ? (
+
+ ) : (
+
+ ))}
+
+ {showMore && limit && (
+
+
+
+
+
+ {formatMessage(labels.more)}
+
+
+ )}
);
}
diff --git a/src/components/metrics/PagesTable.tsx b/src/components/metrics/PagesTable.tsx
index a4705960..26f3caa7 100644
--- a/src/components/metrics/PagesTable.tsx
+++ b/src/components/metrics/PagesTable.tsx
@@ -7,15 +7,12 @@ import { useContext } from 'react';
import { MetricsTable, MetricsTableProps } from './MetricsTable';
export interface PagesTableProps extends MetricsTableProps {
+ type: string;
allowFilter?: boolean;
}
-export function PagesTable({ allowFilter, ...props }: PagesTableProps) {
- const {
- router,
- updateParams,
- query: { view = 'path' },
- } = useNavigation();
+export function PagesTable({ type, allowFilter, ...props }: PagesTableProps) {
+ const { router, updateParams } = useNavigation();
const { formatMessage, labels } = useMessages();
const { domain } = useContext(WebsiteContext);
@@ -45,11 +42,11 @@ export function PagesTable({ allowFilter, ...props }: PagesTableProps) {
const renderLink = ({ x }) => {
return (
- {allowFilter && }
+ {allowFilter && }
);
}
diff --git a/src/components/metrics/QueryParametersTable.tsx b/src/components/metrics/QueryParametersTable.tsx
index 90fc42a6..3816a40b 100644
--- a/src/components/metrics/QueryParametersTable.tsx
+++ b/src/components/metrics/QueryParametersTable.tsx
@@ -16,7 +16,7 @@ const filters = {
export function QueryParametersTable({
allowFilter,
...props
-}: { allowFilter: boolean } & MetricsTableProps) {
+}: { allowFilter?: boolean } & MetricsTableProps) {
const [filter, setFilter] = useState(FILTER_COMBINED);
const { formatMessage, labels } = useMessages();