watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-10 07:37:11 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

Add tooltips to metrics in WebsiteMetricsBar and MetricCard components

Browse source
This commit is contained in:
Fahleen1 2026-01-30 18:25:57 +05:00
parent 860e6390f1
commit 552b7d5669
No known key found for this signature in database
2 changed files with 26 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -25,18 +25,21 @@ export function WebsiteMetricsBar({
label: formatMessage(labels.visitors),
change: visitors - comparison.visitors,
formatValue: formatLongNumber,
tooltip: 'Number of unique visitors to your website',
},
{
value: visits,
label: formatMessage(labels.visits),
change: visits - comparison.visits,
formatValue: formatLongNumber,
tooltip: 'Total number of sessions on your website',
},
{
value: pageviews,
label: formatMessage(labels.views),
change: pageviews - comparison.pageviews,
formatValue: formatLongNumber,
tooltip: 'Total number of pages viewed',
},
{
label: formatMessage(labels.bounceRate),
@ -47,6 +50,7 @@ export function WebsiteMetricsBar({
(Math.min(comparison.visits, comparison.bounces) / comparison.visits) * 100,
formatValue: n => `${Math.round(+n)}%`,
reverseColors: true,
tooltip: 'Percentage of visits that leave after viewing only one page',
},
{
label: formatMessage(labels.visitDuration),
@ -55,6 +59,7 @@ export function WebsiteMetricsBar({
change: totaltime / visits - comparison.totaltime / comparison.visits,
formatValue: n =>
`${+n < 0 ? '-' : ''}${formatShortTime(Math.abs(~~n), ['m', 's'], ' ')}`,
tooltip: 'Average time spent on your website per visit',
},
]
: null;
@ -68,7 +73,7 @@ export function WebsiteMetricsBar({
minHeight="136px"
>
<MetricsBar>
{metrics?.map(({ label, value, prev, change, formatValue, reverseColors }) => {
{metrics?.map(({ label, value, prev, change, formatValue, reverseColors, tooltip }) => {
return (
<MetricCard
key={label}
@ -79,6 +84,7 @@ export function WebsiteMetricsBar({
formatValue={formatValue}
reverseColors={reverseColors}
showChange={!isAllTime}
tooltip={tooltip}
/>
);
})}