Updated expanded view. Some style fixes.

2025-12-06 01:18:00 +01:00 · 2025-08-23 03:05:21 -07:00 · 2025-08-23 03:05:21 -07:00 · 08f9adaddf
commit 08f9adaddf
parent c8fe93dd9d
13 changed files with 164 additions and 115 deletions
--- a/src/app/(main)/websites/[websiteId]/WebsiteChart.tsx
+++ b/src/app/(main)/websites/[websiteId]/WebsiteChart.tsx
@ -47,13 +47,7 @@ export function WebsiteChart({
  }, [data, startDate, endDate, unit]);

  return (
-    <LoadingPanel
-      data={data}
-      isFetching={isFetching}
-      isLoading={isLoading}
-      error={error}
-      minHeight="520px"
-    >
+    <LoadingPanel data={data} isFetching={isFetching} isLoading={isLoading} error={error}>
      <PageviewsChart
        key={value}
        data={chartData}
--- a/src/app/(main)/websites/[websiteId]/WebsiteExpandedView.tsx
+++ b/src/app/(main)/websites/[websiteId]/WebsiteExpandedView.tsx
@ -1,7 +1,7 @@
-import Link from 'next/link';
-import { Grid, Column, NavMenu, NavMenuItem } from '@umami/react-zen';
+import { Grid, Column } from '@umami/react-zen';
 import { useMessages, useNavigation } from '@/components/hooks';
 import { MetricsExpandedTable } from '@/components/metrics/MetricsExpandedTable';
+import { SideMenu } from '@/components/common/SideMenu';

 export function WebsiteExpandedView({
  websiteId,
@ -18,94 +18,131 @@ export function WebsiteExpandedView({

  const items = [
    {
-      id: 'path',
      label: formatMessage(labels.pages),
-      path: updateParams({ view: 'path' }),
+      items: [
+        {
+          id: 'path',
+          label: formatMessage(labels.path),
+          path: updateParams({ view: 'path' }),
+        },
+        {
+          id: 'entry',
+          label: formatMessage(labels.entry),
+          path: updateParams({ view: 'entry' }),
+        },
+        {
+          id: 'exit',
+          label: formatMessage(labels.exit),
+          path: updateParams({ view: 'exit' }),
+        },
+        {
+          id: 'title',
+          label: formatMessage(labels.title),
+          path: updateParams({ view: 'title' }),
+        },
+        {
+          id: 'query',
+          label: formatMessage(labels.query),
+          path: updateParams({ view: 'query' }),
+        },
+      ],
    },
    {
-      id: 'referrer',
-      label: formatMessage(labels.referrers),
-      path: updateParams({ view: 'referrer' }),
+      label: formatMessage(labels.sources),
+      items: [
+        {
+          id: 'referrer',
+          label: formatMessage(labels.referrers),
+          path: updateParams({ view: 'referrer' }),
+        },
+        {
+          id: 'channel',
+          label: formatMessage(labels.channels),
+          path: updateParams({ view: 'channel' }),
+        },
+        {
+          id: 'domain',
+          label: formatMessage(labels.domain),
+          path: updateParams({ view: 'domain' }),
+        },
+      ],
    },
    {
-      id: 'channel',
-      label: formatMessage(labels.channels),
-      path: updateParams({ view: 'channel' }),
+      label: formatMessage(labels.location),
+      items: [
+        {
+          id: 'country',
+          label: formatMessage(labels.countries),
+          path: updateParams({ view: 'country' }),
+        },
+        {
+          id: 'region',
+          label: formatMessage(labels.regions),
+          path: updateParams({ view: 'region' }),
+        },
+        {
+          id: 'city',
+          label: formatMessage(labels.cities),
+          path: updateParams({ view: 'city' }),
+        },
+      ],
    },
    {
-      id: 'browser',
-      label: formatMessage(labels.browsers),
-      path: updateParams({ view: 'browser' }),
+      label: formatMessage(labels.environment),
+      items: [
+        {
+          id: 'browser',
+          label: formatMessage(labels.browsers),
+          path: updateParams({ view: 'browser' }),
+        },
+        {
+          id: 'os',
+          label: formatMessage(labels.os),
+          path: updateParams({ view: 'os' }),
+        },
+        {
+          id: 'device',
+          label: formatMessage(labels.devices),
+          path: updateParams({ view: 'device' }),
+        },
+        {
+          id: 'language',
+          label: formatMessage(labels.languages),
+          path: updateParams({ view: 'language' }),
+        },
+        {
+          id: 'screen',
+          label: formatMessage(labels.screens),
+          path: updateParams({ view: 'screen' }),
+        },
+      ],
    },
    {
-      id: 'os',
-      label: formatMessage(labels.os),
-      path: updateParams({ view: 'os' }),
-    },
-    {
-      id: 'device',
-      label: formatMessage(labels.devices),
-      path: updateParams({ view: 'device' }),
-    },
-    {
-      id: 'country',
-      label: formatMessage(labels.countries),
-      path: updateParams({ view: 'country' }),
-    },
-    {
-      id: 'region',
-      label: formatMessage(labels.regions),
-      path: updateParams({ view: 'region' }),
-    },
-    {
-      id: 'city',
-      label: formatMessage(labels.cities),
-      path: updateParams({ view: 'city' }),
-    },
-    {
-      id: 'language',
-      label: formatMessage(labels.languages),
-      path: updateParams({ view: 'language' }),
-    },
-    {
-      id: 'screen',
-      label: formatMessage(labels.screens),
-      path: updateParams({ view: 'screen' }),
-    },
-    {
-      id: 'event',
-      label: formatMessage(labels.events),
-      path: updateParams({ view: 'event' }),
-    },
-    {
-      id: 'query',
-      label: formatMessage(labels.queryParameters),
-      path: updateParams({ view: 'query' }),
-    },
-    {
-      id: 'hostname',
-      label: formatMessage(labels.hostname),
-      path: updateParams({ view: 'hostname' }),
-    },
-    {
-      id: 'tag',
-      label: formatMessage(labels.tags),
-      path: updateParams({ view: 'tag' }),
+      label: formatMessage(labels.other),
+      items: [
+        {
+          id: 'event',
+          label: formatMessage(labels.events),
+          path: updateParams({ view: 'event' }),
+        },
+        {
+          id: 'hostname',
+          label: formatMessage(labels.hostname),
+          path: updateParams({ view: 'hostname' }),
+        },
+        {
+          id: 'tag',
+          label: formatMessage(labels.tags),
+          path: updateParams({ view: 'tag' }),
+        },
+      ],
    },
  ];

  return (
    <Grid columns="auto 1fr" gap="6" height="100%" overflow="hidden">
-      <Column gap="6" width="200px" border="right" paddingRight="3">
-        <NavMenu position="sticky" top="0">
-          {items.map(({ id, label, path }) => {
-            return (
-              <Link key={id} href={path}>
-                <NavMenuItem isSelected={id === view}>{label}</NavMenuItem>
-              </Link>
-            );
-          })}
-        </NavMenu>
+      <Column gap="6" border="right" paddingRight="3">
+        <SideMenu items={items} selectedKey={view} />
      </Column>
      <Column overflow="hidden">
        <MetricsExpandedTable
@ -113,8 +150,6 @@ export function WebsiteExpandedView({
          type={view}
          websiteId={websiteId}
          onClose={onClose}
-          allowSearch
-          allowDownload
        />
      </Column>
    </Grid>
--- a/src/app/(main)/websites/[websiteId]/WebsitePage.tsx
+++ b/src/app/(main)/websites/[websiteId]/WebsitePage.tsx
@ -29,7 +29,7 @@ export function WebsitePage({ websiteId }: { websiteId: string }) {
    <Column gap>
      <WebsiteControls websiteId={websiteId} allowCompare={true} />
      <WebsiteMetricsBar websiteId={websiteId} showChange={true} />
-      <Panel>
+      <Panel minHeight="520px">
        <WebsiteChart websiteId={websiteId} compareMode={compare} />
      </Panel>
      <WebsitePanels websiteId={websiteId} />
--- a/src/app/(main)/websites/[websiteId]/WebsitePanels.tsx
+++ b/src/app/(main)/websites/[websiteId]/WebsitePanels.tsx
@ -24,11 +24,11 @@ export function WebsitePanels({ websiteId }: { websiteId: string }) {
          <Heading size="2">{formatMessage(labels.pages)}</Heading>
          <Tabs>
            <TabList>
-              <Tab id="page">{formatMessage(labels.pages)}</Tab>
+              <Tab id="path">{formatMessage(labels.path)}</Tab>
              <Tab id="entry">{formatMessage(labels.entry)}</Tab>
              <Tab id="exit">{formatMessage(labels.exit)}</Tab>
            </TabList>
-            <TabPanel id="page">
+            <TabPanel id="path">
              <MetricsTable type="path" title={formatMessage(labels.path)} {...tableProps} />
            </TabPanel>
            <TabPanel id="entry">
@ -47,10 +47,14 @@ export function WebsitePanels({ websiteId }: { websiteId: string }) {
              <Tab id="channel">{formatMessage(labels.channels)}</Tab>
            </TabList>
            <TabPanel id="referrer">
-              <MetricsTable type="referrer" title={formatMessage(labels.domain)} {...tableProps} />
+              <MetricsTable
+                type="referrer"
+                title={formatMessage(labels.referrer)}
+                {...tableProps}
+              />
            </TabPanel>
            <TabPanel id="channel">
-              <MetricsTable type="channel" title={formatMessage(labels.type)} {...tableProps} />
+              <MetricsTable type="channel" title={formatMessage(labels.channel)} {...tableProps} />
            </TabPanel>
          </Tabs>
        </Panel>
--- a/src/components/common/FilterLink.tsx
+++ b/src/components/common/FilterLink.tsx
@ -1,6 +1,6 @@
 import { HTMLAttributes, ReactNode, useState } from 'react';
 import Link from 'next/link';
-import { Icon, Row } from '@umami/react-zen';
+import { Icon, Row, Text } from '@umami/react-zen';
 import { useMessages, useNavigation } from '@/components/hooks';
 import { ExternalLink } from '@/components/icons';

@ -31,9 +31,11 @@ export function FilterLink({ type, value, label, externalUrl, icon }: FilterLink
      {icon}
      {!value && `(${label || formatMessage(labels.unknown)})`}
      {value && (
-        <Link href={updateParams({ [type]: `eq.${value}` })} replace>
-          {label || value}
-        </Link>
+        <Text title={label || value} truncate>
+          <Link href={updateParams({ [type]: `eq.${value}` })} replace>
+            {label || value}
+          </Link>
+        </Text>
      )}
      {externalUrl && showLink && (
        <a href={externalUrl} target="_blank" rel="noreferrer noopener">
--- a/src/components/common/SideMenu.tsx
+++ b/src/components/common/SideMenu.tsx
@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import {
  Text,
  Heading,
@ -7,15 +8,16 @@ import {
  Row,
  Column,
  NavMenuGroup,
+  NavMenuProps,
 } from '@umami/react-zen';
 import Link from 'next/link';

-export interface SideMenuProps {
+export interface SideMenuProps extends NavMenuProps {
  items: { label: string; items: { id: string; label: string; icon?: any; path: string }[] }[];
  title?: string;
  selectedKey?: string;
  allowMinimize?: boolean;
-  children?: React.ReactNode;
+  children?: ReactNode;
 }

 export function SideMenu({
@ -24,6 +26,7 @@ export function SideMenu({
  selectedKey,
  allowMinimize,
  children,
+  ...props
 }: SideMenuProps) {
  return (
    <Column
@ -42,12 +45,12 @@ export function SideMenu({
          <Heading size="1">{title}</Heading>
        </Row>
      )}
-      <NavMenu muteItems={false} gap="6">
-        {items?.map(({ label, items }) => {
+      <NavMenu muteItems={false} gap="6" {...props}>
+        {items?.map(({ label, items }, index) => {
          return (
            <NavMenuGroup
              title={label}
-              key={label}
+              key={`${label}${index}`}
              gap="1"
              allowMinimize={allowMinimize}
              marginBottom="3"
--- a/src/components/messages.ts
+++ b/src/components/messages.ts
@ -94,6 +94,7 @@ export const labels = defineMessages({
  entry: { id: 'label.entry', defaultMessage: 'Entry' },
  exit: { id: 'label.exit', defaultMessage: 'Exit' },
  referrers: { id: 'label.referrers', defaultMessage: 'Referrers' },
+  screen: { id: 'label.screen', defaultMessage: 'Screen' },
  screens: { id: 'label.screens', defaultMessage: 'Screens' },
  browsers: { id: 'label.browsers', defaultMessage: 'Browsers' },
  os: { id: 'label.os', defaultMessage: 'OS' },
@ -301,6 +302,7 @@ export const labels = defineMessages({
  lastSeen: { id: 'label.last-seen', defaultMessage: 'Last seen' },
  firstSeen: { id: 'label.first-seen', defaultMessage: 'First seen' },
  properties: { id: 'label.properties', defaultMessage: 'Properties' },
+  channel: { id: 'label.channel', defaultMessage: 'Channel' },
  channels: { id: 'label.channels', defaultMessage: 'Channels' },
  sources: { id: 'label.sources', defaultMessage: 'Sources' },
  medium: { id: 'label.medium', defaultMessage: 'Medium' },
@ -355,7 +357,6 @@ export const labels = defineMessages({
  audience: { id: 'label.audience', defaultMessage: 'Audience' },
  invalidUrl: { id: 'label.invalid-url', defaultMessage: 'Invalid URL' },
  environment: { id: 'label.environment', defaultMessage: 'Environment' },
-  weekly: { id: 'label.weekly', defaultMessage: 'Weekly' },
 });

 export const messages = defineMessages({
--- a/src/components/metrics/MetricLabel.tsx
+++ b/src/components/metrics/MetricLabel.tsx
@ -115,14 +115,20 @@ export function MetricLabel({ type, data }: MetricLabelProps) {
        />
      );

-    case 'grouped':
+    case 'domain':
      if (label === 'Other') {
        return `(${formatMessage(labels.other)})`;
      } else {
+        const name = GROUPED_DOMAINS.find(({ domain }) => domain === label)?.name;
+
+        if (!name) {
+          return null;
+        }
+
        return (
          <Row alignItems="center" gap="3">
            <Favicon domain={label} />
-            {GROUPED_DOMAINS.find(({ domain }) => domain === label)?.name}
+            {name}
          </Row>
        );
      }
--- a/src/components/metrics/MetricsExpandedTable.tsx
+++ b/src/components/metrics/MetricsExpandedTable.tsx
@ -70,7 +70,11 @@ export function MetricsExpandedTable({
          {items && (
            <DataTable data={items}>
              <DataColumn id="label" label={title} width="2fr" align="start">
-                {row => <MetricLabel type={type} data={row} />}
+                {row => (
+                  <Row overflow="hidden">
+                    <MetricLabel type={type} data={row} />
+                  </Row>
+                )}
              </DataColumn>
              <DataColumn id="visitors" label={formatMessage(labels.visitors)} align="end">
                {row => row?.['visitors']?.toLocaleString()}
--- a/src/components/metrics/MetricsTable.tsx
+++ b/src/components/metrics/MetricsTable.tsx
@ -55,8 +55,8 @@ export function MetricsTable({
    return [];
  }, [data, dataFilter, limit, type]);

-  const renderLabel = (data: any) => {
-    return <MetricLabel type={type} data={data} />;
+  const renderLabel = (row: any) => {
+    return <MetricLabel type={type} data={row} />;
  };

  return (
--- a/src/lib/constants.ts
+++ b/src/lib/constants.ts
@ -34,7 +34,7 @@ export const EVENT_COLUMNS = [
  'entry',
  'exit',
  'referrer',
-  'grouped',
+  'domain',
  'title',
  'query',
  'event',
@ -63,7 +63,7 @@ export const FILTER_COLUMNS = {
  entry: 'url_path',
  exit: 'url_path',
  referrer: 'referrer_domain',
-  grouped: 'referrer_domain',
+  domain: 'referrer_domain',
  hostname: 'hostname',
  title: 'page_title',
  query: 'url_query',
--- a/src/queries/sql/events/getEventMetrics.ts
+++ b/src/queries/sql/events/getEventMetrics.ts
@ -4,21 +4,21 @@ import { CLICKHOUSE, PRISMA, runQuery } from '@/lib/db';
 import prisma from '@/lib/prisma';
 import { QueryFilters } from '@/lib/types';

-export interface WebsiteEventMetricParameters {
+export interface EventMetricParameters {
  type: string;
  limit?: string;
  offset?: string;
 }

-export interface WebsiteEventMetricData {
+export interface EventMetricData {
  x: string;
  t: string;
  y: number;
 }

 export async function getEventMetrics(
-  ...args: [websiteId: string, parameters: WebsiteEventMetricParameters, filters: QueryFilters]
-): Promise<WebsiteEventMetricData[]> {
+  ...args: [websiteId: string, parameters: EventMetricParameters, filters: QueryFilters]
+): Promise<EventMetricData[]> {
  return runQuery({
    [PRISMA]: () => relationalQuery(...args),
    [CLICKHOUSE]: () => clickhouseQuery(...args),
@ -27,7 +27,7 @@ export async function getEventMetrics(

 async function relationalQuery(
  websiteId: string,
-  parameters: WebsiteEventMetricParameters,
+  parameters: EventMetricParameters,
  filters: QueryFilters,
 ) {
  const { type, limit = 500, offset = 0 } = parameters;
@ -63,9 +63,9 @@ async function relationalQuery(

 async function clickhouseQuery(
  websiteId: string,
-  parameters: WebsiteEventMetricParameters,
+  parameters: EventMetricParameters,
  filters: QueryFilters,
-): Promise<WebsiteEventMetricData[]> {
+): Promise<EventMetricData[]> {
  const { type, limit = 500, offset = 0 } = parameters;
  const column = FILTER_COLUMNS[type] || type;
  const { rawQuery, parseFilters } = clickhouse;
--- a/src/queries/sql/pageviews/getPageviewExpandedMetrics.ts
+++ b/src/queries/sql/pageviews/getPageviewExpandedMetrics.ts
@ -111,7 +111,7 @@ async function clickhouseQuery(

  if (column === 'referrer_domain') {
    excludeDomain = `and referrer_domain != hostname and referrer_domain != ''`;
-    if (type === 'grouped') {
+    if (type === 'domain') {
      column = toClickHouseGroupedReferrer(GROUPED_DOMAINS);
    }
  }