Add tooltips to metrics in WebsiteMetricsBar and MetricCard components

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

@@ -1,6 +1,7 @@
 import { LoadingPanel } from '@/components/common/LoadingPanel';
 import { useDateRange, useMessages } from '@/components/hooks';
 import { useWebsiteStatsQuery } from '@/components/hooks/queries/useWebsiteStatsQuery';
+import { messages } from '@/components/messages';
 import { MetricCard } from '@/components/metrics/MetricCard';
 import { MetricsBar } from '@/components/metrics/MetricsBar';
 import { formatLongNumber, formatShortTime } from '@/lib/format';
@@ -13,6 +14,7 @@ export function WebsiteMetricsBar({
   compareMode?: boolean;
 }) {
   const { isAllTime } = useDateRange();
+
   const { formatMessage, labels, getErrorMessage } = useMessages();
   const { data, isLoading, isFetching, error } = useWebsiteStatsQuery(websiteId);
 
@@ -25,18 +27,21 @@ export function WebsiteMetricsBar({
           label: formatMessage(labels.visitors),
           change: visitors - comparison.visitors,
           formatValue: formatLongNumber,
+          tooltipMessageId: messages.visitorsTooltip,
         },
         {
           value: visits,
           label: formatMessage(labels.visits),
           change: visits - comparison.visits,
           formatValue: formatLongNumber,
+          tooltipMessageId: messages.visitsTooltip,
         },
         {
           value: pageviews,
           label: formatMessage(labels.views),
           change: pageviews - comparison.pageviews,
           formatValue: formatLongNumber,
+          tooltipMessageId: messages.pageViewsTooltip,
         },
         {
           label: formatMessage(labels.bounceRate),
@@ -47,6 +52,7 @@ export function WebsiteMetricsBar({
             (Math.min(comparison.visits, comparison.bounces) / comparison.visits) * 100,
           formatValue: n => `${Math.round(+n)}%`,
           reverseColors: true,
+          tooltipMessageId: messages.bounceRateTooltip,
         },
         {
           label: formatMessage(labels.visitDuration),
@@ -55,6 +61,7 @@ export function WebsiteMetricsBar({
           change: totaltime / visits - comparison.totaltime / comparison.visits,
           formatValue: n =>
             `${+n < 0 ? '-' : ''}${formatShortTime(Math.abs(~~n), ['m', 's'], ' ')}`,
+          tooltipMessageId: messages.visitDurationTooltip,
         },
       ]
     : null;
@@ -68,20 +75,23 @@ export function WebsiteMetricsBar({
       minHeight="136px"
     >
       <MetricsBar>
-        {metrics?.map(({ label, value, prev, change, formatValue, reverseColors }) => {
-          return (
-            <MetricCard
-              key={label}
-              value={value}
-              previousValue={prev}
-              label={label}
-              change={change}
-              formatValue={formatValue}
-              reverseColors={reverseColors}
-              showChange={!isAllTime}
-            />
-          );
-        })}
+        {metrics?.map(
+          ({ label, value, prev, change, formatValue, reverseColors, tooltipMessageId }) => {
+            return (
+              <MetricCard
+                key={label}
+                value={value}
+                previousValue={prev}
+                label={label}
+                change={change}
+                formatValue={formatValue}
+                reverseColors={reverseColors}
+                showChange={!isAllTime}
+                tooltip={tooltipMessageId ? formatMessage(tooltipMessageId) : undefined}
+              />
+            );
+          },
+        )}
       </MetricsBar>
     </LoadingPanel>
   );

src/components/messages.ts

@@ -515,4 +515,24 @@ export const messages = defineMessages({
     id: 'message.sever-error',
     defaultMessage: 'Server error',
   },
+  visitorsTooltip: {
+    id: 'message.visitors-tooltip',
+    defaultMessage: 'Number of unique visitors to your website',
+  },
+  visitsTooltip: {
+    id: 'message.visits-tooltip',
+    defaultMessage: 'Total number of sessions on your website',
+  },
+  pageViewsTooltip: {
+    id: 'message.page-views-tooltip',
+    defaultMessage: 'Total number of pages viewed',
+  },
+  bounceRateTooltip: {
+    id: 'message.bounce-rate-tooltip',
+    defaultMessage: 'Percentage of visits that leave after viewing only one page',
+  },
+  visitDurationTooltip: {
+    id: 'message.visit-duration-tooltip',
+    defaultMessage: 'Average time spent on your website per visit',
+  },
 });

src/components/metrics/MetricCard.tsx

@@ -1,5 +1,6 @@
 import { useSpring } from '@react-spring/web';
-import { Column, Text } from '@umami/react-zen';
+import { Column, Focusable, Icon, Text, Tooltip, TooltipTrigger } from '@umami/react-zen';
+import { Info } from 'lucide-react';
 import { AnimatedDiv } from '@/components/common/AnimatedDiv';
 import { ChangeLabel } from '@/components/metrics/ChangeLabel';
 import { formatNumber } from '@/lib/format';
@@ -13,6 +14,7 @@ export interface MetricCardProps {
   formatValue?: (n: any) => string;
   showLabel?: boolean;
   showChange?: boolean;
+  tooltip?: string;
 }
 
 export const MetricCard = ({
@@ -23,6 +25,7 @@ export const MetricCard = ({
   formatValue = formatNumber,
   showLabel = true,
   showChange = false,
+  tooltip,
 }: MetricCardProps) => {
   const diff = value - change;
   const pct = ((value - diff) / diff) * 100;
@@ -39,8 +42,22 @@ export const MetricCard = ({
       border
     >
       {showLabel && (
-        <Text weight="bold" wrap="nowrap">
+        <Text
+          weight="bold"
+          wrap="nowrap"
+          style={{ display: 'flex', alignItems: 'center', gap: '4px' }}
+        >
           {label}
+          {tooltip && (
+            <TooltipTrigger delay={0}>
+              <Focusable aria-label="More info">
+                <Icon size="xs" style={{ cursor: 'pointer' }}>
+                  <Info />
+                </Icon>
+              </Focusable>
+              <Tooltip>{tooltip}</Tooltip>
+            </TooltipTrigger>
+          )}
         </Text>
       )}
       <Text size="8" weight="bold" wrap="nowrap">

src/lang/ar-SA.json

@@ -335,5 +335,10 @@
   "message.unauthorized": "Unauthorized",
   "message.user-deleted": "تم حذف المستخدم.",
   "message.viewed-page": "شوهدت الصفحة",
-  "message.visitor-log": "زائر من {country} يستخدم {browser} على {os} {device}"
+  "message.visitor-log": "زائر من {country} يستخدم {browser} على {os} {device}",
+  "message.visitors-tooltip": "عدد الزوار الفريدين لموقعك الإلكتروني",
+  "message.visits-tooltip": "إجمالي عدد الجلسات على موقعك الإلكتروني",
+  "message.page-views-tooltip": "إجمالي عدد الصفحات التي تم عرضها",
+  "message.bounce-rate-tooltip": "نسبة الزيارات التي تغادر الموقع بعد مشاهدة صفحة واحدة فقط",
+  "message.visit-duration-tooltip": "متوسط الوقت الذي يقضيه الزائر في موقعك الإلكتروني لكل زيارة"
 }

src/lang/be-BY.json

@@ -335,5 +335,10 @@
   "message.unauthorized": "Unauthorized",
   "message.user-deleted": "Карыстальнік выдалены.",
   "message.viewed-page": "Праглядзеў старонку",
-  "message.visitor-log": "Наведвальнік з {country} праз {browser} на {os} {device}"
+  "message.visitor-log": "Наведвальнік з {country} праз {browser} на {os} {device}",
+  "message.visitors-tooltip": "Колькасць унікальных наведвальнікаў вашага сайта",
+  "message.visits-tooltip": "Агульная колькасць сеансаў на вашым сайце",
+  "message.page-views-tooltip": "Агульная колькасць праглядаў старонак",
+  "message.bounce-rate-tooltip": "Працэнт наведванняў, якія заканчваюцца пасля прагляду толькі адной старонкі",
+  "message.visit-duration-tooltip": "Сярэдні час, праведзены на вашым сайце за адно наведванне"
 }

src/lang/bg-BG.json

@@ -335,5 +335,10 @@
   "message.unauthorized": "Unauthorized",
   "message.user-deleted": "Потребителят е изтрит.",
   "message.viewed-page": "Страницата е видяна",
-  "message.visitor-log": "Посетител от {country}, използващ {browser} на {os} {device}"
+  "message.visitor-log": "Посетител от {country}, използващ {browser} на {os} {device}",
+  "message.visitors-tooltip": "Брой уникални посетители на вашия уебсайт",
+  "message.visits-tooltip": "Общ брой сесии на вашия уебсайт",
+  "message.page-views-tooltip": "Общ брой прегледи на страници",
+  "message.bounce-rate-tooltip": "Процент на посещенията, които приключват след преглед само на една страница",
+  "message.visit-duration-tooltip": "Средно време, прекарано на вашия уебсайт за едно посещение"
 }

src/lang/bn-BD.json

@@ -335,5 +335,10 @@
   "message.unauthorized": "Unauthorized",
   "message.user-deleted": "User deleted.",
   "message.viewed-page": "Viewed page",
-  "message.visitor-log": "{country} থেকে একজন ভিসিটর {ব্রাউজার}, ব্যবহার করছেন {os} {device} এর মধ্যে।"
+  "message.visitor-log": "{country} থেকে একজন ভিসিটর {ব্রাউজার}, ব্যবহার করছেন {os} {device} এর মধ্যে।",
+  "message.visitors-tooltip": "আপনার ওয়েবসাইটে অনন্য দর্শনার্থীর সংখ্যা",
+  "message.visits-tooltip": "আপনার ওয়েবসাইটে মোট সেশনের সংখ্যা",
+  "message.page-views-tooltip": "মোট পৃষ্ঠা দেখার সংখ্যা",
+  "message.bounce-rate-tooltip": "শুধু একটি পৃষ্ঠা দেখার পর ওয়েবসাইট ত্যাগ করা ভিজিটের শতাংশ",
+  "message.visit-duration-tooltip": "প্রতি ভিজিটে আপনার ওয়েবসাইটে গড়ে ব্যয় করা সময়"
 }

src/lang/bs-BA.json

@@ -335,5 +335,10 @@
   "message.unauthorized": "Unauthorized",
   "message.user-deleted": "Korisnik obrisan.",
   "message.viewed-page": "Pogledana stranica",
-  "message.visitor-log": "Posjetitelj iz {country} koristi {browser} na {os} {device}"
+  "message.visitor-log": "Posjetitelj iz {country} koristi {browser} na {os} {device}",
+  "message.visitors-tooltip": "Broj jedinstvenih posjetilaca vaše web stranice",
+  "message.visits-tooltip": "Ukupan broj sesija na vašoj web stranici",
+  "message.page-views-tooltip": "Ukupan broj pregleda stranica",
+  "message.bounce-rate-tooltip": "Procenat posjeta koje se završe nakon pregleda samo jedne stranice",
+  "message.visit-duration-tooltip": "Prosječno vrijeme provedeno na vašoj web stranici po posjeti"
 }

src/lang/ca-ES.json

@@ -335,5 +335,10 @@
   "message.unauthorized": "Unauthorized",
   "message.user-deleted": "Usuari eliminat.",
   "message.viewed-page": "Pàgina vista",
-  "message.visitor-log": "Visitant de {country} usant {browser} a {os} {device}"
+  "message.visitor-log": "Visitant de {country} usant {browser} a {os} {device}",
+  "message.visitors-tooltip": "Nombre de visitants únics del teu lloc web",
+  "message.visits-tooltip": "Nombre total de sessions al teu lloc web",
+  "message.page-views-tooltip": "Nombre total de pàgines vistes",
+  "message.bounce-rate-tooltip": "Percentatge de visites que abandonen el lloc després de veure només una pàgina",
+  "message.visit-duration-tooltip": "Temps mitjà passat al teu lloc web per visita"
 }

src/lang/cs-CZ.json

@@ -335,5 +335,10 @@
   "message.unauthorized": "Unauthorized",
   "message.user-deleted": "User deleted.",
   "message.viewed-page": "Viewed page",
-  "message.visitor-log": "Návštěvník z {country} s prohlížečem {browser} na {os} {device}"
+  "message.visitor-log": "Návštěvník z {country} s prohlížečem {browser} na {os} {device}",
+  "message.visitors-tooltip": "Počet jedinečných návštěvníků vašeho webu",
+  "message.visits-tooltip": "Celkový počet relací na vašem webu",
+  "message.page-views-tooltip": "Celkový počet zobrazení stránek",
+  "message.bounce-rate-tooltip": "Procento návštěv, které skončí po zobrazení pouze jedné stránky",
+  "message.visit-duration-tooltip": "Průměrná doba strávená na vašem webu během jedné návštěvy"
 }

src/lang/da-DK.json

@@ -335,5 +335,10 @@
   "message.unauthorized": "Unauthorized",
   "message.user-deleted": "User deleted.",
   "message.viewed-page": "Viewed page",
-  "message.visitor-log": "Besøgende fra {country} bruger {browser} på {os} {device}"
+  "message.visitor-log": "Besøgende fra {country} bruger {browser} på {os} {device}",
+  "message.visitors-tooltip": "Antal unikke besøgende på dit website",
+  "message.visits-tooltip": "Samlet antal sessioner på dit website",
+  "message.page-views-tooltip": "Samlet antal sidevisninger",
+  "message.bounce-rate-tooltip": "Procentdel af besøg, der forlader websitet efter kun at have set én side",
+  "message.visit-duration-tooltip": "Gennemsnitlig tid brugt på dit website pr. besøg"
 }

src/lang/de-CH.json

@@ -335,5 +335,10 @@
   "message.unauthorized": "Unauthorized",
   "message.user-deleted": "Bnutzer glöscht.",
   "message.viewed-page": "Siite agluegt",
-  "message.visitor-log": "Bsuecher us {country} nutzt {browser} uf {os} {device}"
+  "message.visitor-log": "Bsuecher us {country} nutzt {browser} uf {os} {device}",
+  "message.visitors-tooltip": "Anzahl eindeutiger Besucher Ihrer Website",
+  "message.visits-tooltip": "Gesamtzahl der Sitzungen auf Ihrer Website",
+  "message.page-views-tooltip": "Gesamtzahl der Seitenaufrufe",
+  "message.bounce-rate-tooltip": "Prozentsatz der Besuche, die nach dem Aufrufen nur einer Seite beendet werden",
+  "message.visit-duration-tooltip": "Durchschnittliche Zeit, die pro Besuch auf Ihrer Website verbracht wird"
 }

src/lang/de-DE.json

@@ -335,5 +335,10 @@
   "message.unauthorized": "Unauthorized",
   "message.user-deleted": "Benutzer gelöscht.",
   "message.viewed-page": "Seite besucht",
-  "message.visitor-log": "Besucher aus {country} benutzt {browser} auf {os} {device}"
+  "message.visitor-log": "Besucher aus {country} benutzt {browser} auf {os} {device}",
+  "message.visitors-tooltip": "Anzahl der eindeutigen Besucher Ihrer Website",
+  "message.visits-tooltip": "Gesamtzahl der Sitzungen auf Ihrer Website",
+  "message.page-views-tooltip": "Gesamtzahl der Seitenaufrufe",
+  "message.bounce-rate-tooltip": "Prozentsatz der Besuche, die nach dem Aufruf nur einer Seite enden",
+  "message.visit-duration-tooltip": "Durchschnittliche Verweildauer auf Ihrer Website pro Besuch"
 }

src/lang/el-GR.json

@@ -335,5 +335,10 @@
   "message.unauthorized": "Unauthorized",
   "message.user-deleted": "User deleted.",
   "message.viewed-page": "Viewed page",
-  "message.visitor-log": "Visitor from {country} using {browser} on {os} {device}"
+  "message.visitor-log": "Visitor from {country} using {browser} on {os} {device}",
+  "message.visitors-tooltip": "Αριθμός μοναδικών επισκεπτών στην ιστοσελίδα σας",
+  "message.visits-tooltip": "Συνολικός αριθμός επισκέψεων στην ιστοσελίδα σας",
+  "message.page-views-tooltip": "Συνολικός αριθμός προβολών σελίδων",
+  "message.bounce-rate-tooltip": "Ποσοστό επισκέψεων που φεύγουν μετά την προβολή μόνο μίας σελίδας",
+  "message.visit-duration-tooltip": "Μέσος χρόνος που ξοδεύεται στην ιστοσελίδα σας ανά επίσκεψη"
 }

src/lang/en-GB.json

@@ -335,5 +335,10 @@
   "message.unauthorized": "Unauthorized",
   "message.user-deleted": "User deleted.",
   "message.viewed-page": "Viewed page",
-  "message.visitor-log": "Visitor from {country} using {browser} on {os} {device}"
+  "message.visitor-log": "Visitor from {country} using {browser} on {os} {device}",
+  "message.visitors-tooltip": "Number of unique visitors to your website",
+  "message.visits-tooltip": "Total number of sessions on your website",
+  "message.page-views-tooltip": "Total number of page views",
+  "message.bounce-rate-tooltip": "Percentage of visits that leave after viewing only one page",
+  "message.visit-duration-tooltip": "Average time spent on your website per visit"
 }

src/lang/en-US.json

@@ -335,5 +335,10 @@
   "message.unauthorized": "Unauthorized",
   "message.user-deleted": "User deleted.",
   "message.viewed-page": "Viewed page",
-  "message.visitor-log": "Visitor from {country} using {browser} on {os} {device}"
+  "message.visitor-log": "Visitor from {country} using {browser} on {os} {device}",
+  "message.visitors-tooltip": "Number of unique visitors to your website",
+  "message.visits-tooltip": "Total number of sessions on your website",
+  "message.page-views-tooltip": "Total number of pages viewed",
+  "message.bounce-rate-tooltip": "Percentage of visits that leave after viewing only one page",
+  "message.visit-duration-tooltip": "Average time spent on your website per visit"
 }

src/lang/es-ES.json

@@ -336,5 +336,10 @@
   "message.unauthorized": "Unauthorized",
   "message.user-deleted": "Usuario eliminado.",
   "message.viewed-page": "Página vista",
-  "message.visitor-log": "Visitante desde {country} usando {browser} en {os} {device}"
+  "message.visitor-log": "Visitante desde {country} usando {browser} en {os} {device}",
+  "message.visitors-tooltip": "Número de visitantes únicos en tu sitio web",
+  "message.visits-tooltip": "Número total de sesiones en tu sitio web",
+  "message.page-views-tooltip": "Número total de páginas vistas",
+  "message.bounce-rate-tooltip": "Porcentaje de visitas que abandonan tras ver solo una página",
+  "message.visit-duration-tooltip": "Tiempo medio que se pasa en tu sitio web por visita"
 }

src/lang/fa-IR.json

@@ -335,5 +335,10 @@
   "message.unauthorized": "Unauthorized",
   "message.user-deleted": "کاربر حذف شد.",
   "message.viewed-page": "صفحه مشاهده شد",
-  "message.visitor-log": "بازدیدکننده از کشور {country} با مروگر {browser} در {os} {device}"
+  "message.visitor-log": "بازدیدکننده از کشور {country} با مروگر {browser} در {os} {device}",
+  "message.visitors-tooltip": "تعداد بازدیدکنندگان یکتا از وب‌سایت شما",
+  "message.visits-tooltip": "کل تعداد جلسات در وب‌سایت شما",
+  "message.page-views-tooltip": "کل تعداد بازدید صفحات",
+  "message.bounce-rate-tooltip": "درصد بازدیدهایی که پس از مشاهده تنها یک صفحه ترک می‌شوند",
+  "message.visit-duration-tooltip": "میانگین زمان صرف شده در وب‌سایت شما به ازای هر بازدید"
 }

src/lang/fi-FI.json

@@ -335,5 +335,10 @@
   "message.unauthorized": "Unauthorized",
   "message.user-deleted": "User deleted.",
   "message.viewed-page": "Viewed page",
-  "message.visitor-log": "Vierailija maasta {country} selaimella {browser} laitteella {os} {device}"
+  "message.visitor-log": "Vierailija maasta {country} selaimella {browser} laitteella {os} {device}",
+  "message.visitors-tooltip": "Verkkosivustosi yksilöllisten kävijöiden määrä",
+  "message.visits-tooltip": "Verkkosivustosi kokonaisistuntojen määrä",
+  "message.page-views-tooltip": "Sivunäyttöjen kokonaismäärä",
+  "message.bounce-rate-tooltip": "Käyntien prosenttiosuus, jotka poistuvat nähtyään vain yhden sivun",
+  "message.visit-duration-tooltip": "Keskimääräinen aika, jonka vierailija viettää verkkosivustollasi per käynti"
 }