Merge branch 'dev' into analytics

next.config.mjs

@@ -1,5 +1,9 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-require('dotenv').config();
+import dotenv from 'dotenv';
+import { createRequire } from 'module';
+
+dotenv.config();
+
+const require = createRequire(import.meta.url);
 const pkg = require('./package.json');
 
 const TRACKER_SCRIPT = '/script.js';
@@ -12,6 +16,7 @@ const corsMaxAge = process.env.CORS_MAX_AGE;
 const defaultLocale = process.env.DEFAULT_LOCALE;
 const disableLogin = process.env.DISABLE_LOGIN;
 const disableUI = process.env.DISABLE_UI;
+const faviconURL = process.env.FAVICON_URL;
 const forceSSL = process.env.FORCE_SSL;
 const frameAncestors = process.env.ALLOWED_FRAME_URLS;
 const privateMode = process.env.PRIVATE_MODE;
@@ -180,17 +185,17 @@ if (cloudMode && cloudUrl) {
 }
 
 /** @type {import('next').NextConfig} */
-const config = {
+export default {
   reactStrictMode: false,
   env: {
     basePath,
     cloudMode,
     cloudUrl,
-    configUrl: '/config',
     currentVersion: pkg.version,
     defaultLocale,
     disableLogin,
     disableUI,
+    faviconURL,
     privateMode,
   },
   basePath,
@@ -237,5 +242,3 @@ const config = {
     return [...redirects];
   },
 };
-
-module.exports = config;

package.json

@@ -1,7 +1,7 @@
 {
   "name": "umami",
   "version": "2.18.0",
-  "description": "A simple, fast, privacy-focused alternative to Google Analytics.",
+  "description": "A modern, privacy-focused alternative to Google Analytics.",
   "author": "Umami Software, Inc. <hello@umami.is>",
   "license": "MIT",
   "homepage": "https://umami.is",

src/app/(main)/websites/[websiteId]/events/EventsPage.tsx

@@ -4,27 +4,33 @@ import EventsDataTable from './EventsDataTable';
 import EventsMetricsBar from './EventsMetricsBar';
 import EventsChart from '@/components/metrics/EventsChart';
 import { GridRow } from '@/components/layout/Grid';
-import MetricsTable from '@/components/metrics/MetricsTable';
+import EventsTable from '@/components/metrics/EventsTable';
 import { useMessages } from '@/components/hooks';
 import { Item, Tabs } from 'react-basics';
 import { useState } from 'react';
 import EventProperties from './EventProperties';
 
 export default function EventsPage({ websiteId }) {
+  const [label, setLabel] = useState(null);
   const [tab, setTab] = useState('activity');
   const { formatMessage, labels } = useMessages();
 
+  const handleLabelClick = (value: string) => {
+    setLabel(value !== label ? value : '');
+  };
+
   return (
     <>
       <WebsiteHeader websiteId={websiteId} />
       <EventsMetricsBar websiteId={websiteId} />
       <GridRow columns="two-one">
-        <EventsChart websiteId={websiteId} />
-        <MetricsTable
+        <EventsChart websiteId={websiteId} focusLabel={label} />
+        <EventsTable
           websiteId={websiteId}
           type="event"
           title={formatMessage(labels.events)}
           metric={formatMessage(labels.actions)}
+          onLabelClick={handleLabelClick}
         />
       </GridRow>
       <div>

src/app/api/send/route.ts

@@ -55,7 +55,7 @@ export async function POST(request: Request) {
       title,
       tag,
       timestamp,
-      id = '',
+      id,
     } = payload;
 
     // Cache check
@@ -101,7 +101,7 @@ export async function POST(request: Request) {
     const sessionSalt = hash(startOfMonth(createdAt).toUTCString());
     const visitSalt = hash(startOfHour(createdAt).toUTCString());
 
-    const sessionId = uuid(websiteId, ip, userAgent, sessionSalt, id);
+    const sessionId = id ? uuid(websiteId, id) : uuid(websiteId, ip, userAgent, sessionSalt);
 
     // Find session
     if (!clickhouse.enabled && !cache?.sessionId) {
@@ -148,6 +148,10 @@ export async function POST(request: Request) {
       const urlQuery = currentUrl.search.substring(1);
       const urlDomain = currentUrl.hostname.replace(/^www./, '');
 
+      let referrerPath: string;
+      let referrerQuery: string;
+      let referrerDomain: string;
+
       // UTM Params
       const utmSource = currentUrl.searchParams.get('utm_source');
       const utmMedium = currentUrl.searchParams.get('utm_medium');
@@ -167,10 +171,6 @@ export async function POST(request: Request) {
         urlPath = urlPath.replace(/(.+)\/$/, '$1');
       }
 
-      let referrerPath: string;
-      let referrerQuery: string;
-      let referrerDomain: string;
-
       if (referrer) {
         const referrerUrl = new URL(referrer, base);
 

src/components/charts/Chart.tsx

@@ -34,7 +34,7 @@ export function Chart({
   className,
   chartOptions,
 }: ChartProps) {
-  const canvas = useRef();
+  const canvas = useRef(null);
   const chart = useRef(null);
   const [legendItems, setLegendItems] = useState([]);
 
@@ -86,7 +86,7 @@ export function Chart({
             dataset.data = data?.datasets[index]?.data;
 
             if (chart.current.legend.legendItems[index]) {
-              chart.current.legend.legendItems[index].text = data?.datasets[index]?.label;
+              chart.current.legend.legendItems[index].text = data.datasets[index]?.label;
             }
           }
         });
@@ -95,6 +95,12 @@ export function Chart({
       }
     }
 
+    if (data.focusLabel !== null) {
+      chart.current.data.datasets.forEach(ds => {
+        ds.hidden = data.focusLabel ? ds.label !== data.focusLabel : false;
+      });
+    }
+
     chart.current.options = options;
 
     // Allow config changes before update
@@ -105,16 +111,6 @@ export function Chart({
     setLegendItems(chart.current.legend.legendItems);
   };
 
-  useEffect(() => {
-    if (data) {
-      if (!chart.current) {
-        createChart(data);
-      } else {
-        updateChart(data);
-      }
-    }
-  }, [data, options]);
-
   const handleLegendClick = (item: LegendItem) => {
     if (type === 'bar') {
       const { datasetIndex } = item;
@@ -136,6 +132,16 @@ export function Chart({
     setLegendItems(chart.current.legend.legendItems);
   };
 
+  useEffect(() => {
+    if (data) {
+      if (!chart.current) {
+        createChart(data);
+      } else {
+        updateChart(data);
+      }
+    }
+  }, [data, options]);
+
   return (
     <>
       <div className={classNames(styles.chart, className)}>

src/components/common/Favicon.tsx

@@ -1,4 +1,4 @@
-import { GROUPED_DOMAINS } from '@/lib/constants';
+import { FAVICON_URL, GROUPED_DOMAINS } from '@/lib/constants';
 
 function getHostName(url: string) {
   const match = url.match(/^(?:https?:\/\/)?(?:[^@\n]+@)?([^:/\n?=]+)/im);
@@ -10,10 +10,10 @@ export function Favicon({ domain, ...props }) {
     return null;
   }
 
+  const url = process.env.faviconURL || FAVICON_URL;
   const hostName = domain ? getHostName(domain) : null;
-  const src = hostName
-    ? `https://icons.duckduckgo.com/ip3/${GROUPED_DOMAINS[hostName]?.domain || hostName}.ico`
-    : null;
+  const domainName = GROUPED_DOMAINS[hostName]?.domain || hostName;
+  const src = hostName ? url.replace(/\{\{\s*domain\s*}}/, domainName) : null;
 
   return hostName ? <img src={src} width={16} height={16} alt="" {...props} /> : null;
 }

src/components/metrics/EventsChart.tsx

@@ -1,21 +1,23 @@
+import { useMemo, useState, useEffect } from 'react';
 import { colord } from 'colord';
 import BarChart from '@/components/charts/BarChart';
 import { useDateRange, useLocale, useWebsiteEventsSeries } from '@/components/hooks';
 import { renderDateLabels } from '@/lib/charts';
 import { CHART_COLORS } from '@/lib/constants';
-import { useMemo } from 'react';
 
 export interface EventsChartProps {
   websiteId: string;
   className?: string;
+  focusLabel?: string;
 }
 
-export function EventsChart({ websiteId, className }: EventsChartProps) {
+export function EventsChart({ websiteId, className, focusLabel }: EventsChartProps) {
   const {
     dateRange: { startDate, endDate, unit, value },
   } = useDateRange(websiteId);
   const { locale } = useLocale();
   const { data, isLoading } = useWebsiteEventsSeries(websiteId);
+  const [label, setLabel] = useState<string>(focusLabel);
 
   const chartData = useMemo(() => {
     if (!data) return [];
@@ -42,8 +44,15 @@ export function EventsChart({ websiteId, className }: EventsChartProps) {
           borderWidth: 1,
         };
       }),
+      focusLabel,
     };
-  }, [data, startDate, endDate, unit]);
+  }, [data, startDate, endDate, unit, focusLabel]);
+
+  useEffect(() => {
+    if (label !== focusLabel) {
+      setLabel(focusLabel);
+    }
+  }, [focusLabel]);
 
   return (
     <BarChart

src/components/metrics/EventsTable.tsx

@@ -1,12 +1,28 @@
 import MetricsTable, { MetricsTableProps } from './MetricsTable';
 import { useMessages } from '@/components/hooks';
 
-export function EventsTable(props: MetricsTableProps) {
+export interface EventsTableProps extends MetricsTableProps {
+  onLabelClick?: (value: string) => void;
+}
+
+export function EventsTable({ onLabelClick, ...props }: EventsTableProps) {
   const { formatMessage, labels } = useMessages();
 
-  function handleDataLoad(data: any) {
+  const handleDataLoad = (data: any) => {
     props.onDataLoad?.(data);
-  }
+  };
+
+  const renderLabel = ({ x: label }) => {
+    if (onLabelClick) {
+      return (
+        <div onClick={() => onLabelClick(label)} style={{ cursor: 'pointer' }}>
+          {label}
+        </div>
+      );
+    }
+
+    return label;
+  };
 
   return (
     <MetricsTable
@@ -15,6 +31,7 @@ export function EventsTable(props: MetricsTableProps) {
       type="event"
       metric={formatMessage(labels.actions)}
       onDataLoad={handleDataLoad}
+      renderLabel={renderLabel}
     />
   );
 }

src/lib/constants.ts

@@ -1,4 +1,3 @@
-/* eslint-disable no-unused-vars */
 export const CURRENT_VERSION = process.env.currentVersion;
 export const AUTH_TOKEN = 'umami.auth';
 export const LOCALE_CONFIG = 'umami.locale';
@@ -12,6 +11,7 @@ export const HOMEPAGE_URL = 'https://umami.is';
 export const REPO_URL = 'https://github.com/umami-software/umami';
 export const UPDATES_URL = 'https://api.umami.is/v1/updates';
 export const TELEMETRY_PIXEL = 'https://i.umami.is/a.png';
+export const FAVICON_URL = 'https://icons.duckduckgo.com/ip3/{{domain}}.ico';
 
 export const DEFAULT_LOCALE = process.env.defaultLocale || 'en-US';
 export const DEFAULT_THEME = 'light';

src/queries/sql/events/getWebsiteEvents.ts

@@ -52,7 +52,7 @@ async function relationalQuery(websiteId: string, filters: QueryFilters, pagePar
     limit 1000)
     select * from events
     `,
-    { ...params, query: `%${search}%` },
+    { ...params, search: `%${search}%` },
     pageParams,
   );
 }