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

Fixed journey calculations.

Browse source
This commit is contained in:
Mike Cao 2025-06-07 11:28:35 -07:00
parent fd7dddb43a
commit 28e872f219
5 changed files with 29 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/app/(main)/websites/[websiteId]/journeys/Journey.module.css
View file

@ -33,7 +33,6 @@
justify-content: flex-start;
gap: 10px;
width: 100%;
height: 60px;
}
.visitors {

37
src/app/(main)/websites/[websiteId]/journeys/Journey.tsx
View file

@ -1,5 +1,5 @@
import { useMemo, useState } from 'react';
import { TooltipTrigger, Tooltip, Focusable, Icon, Text, Row } from '@umami/react-zen';
import { TooltipTrigger, Tooltip, Focusable, Icon, Text, Row, Column } from '@umami/react-zen';
import { firstBy } from 'thenby';
import classNames from 'classnames';
import { useEscapeKey, useMessages, useResultQuery } from '@/components/hooks';
@ -169,8 +169,7 @@ export function Journey({
<LoadingPanel isEmpty={!data} isLoading={isLoading} error={error}>
<div className={styles.container}>
<div className={styles.view}>
{columns.map((column, columnIndex) => {
const dropOffPercent = `${~~column.dropOff}%`;
{columns.map(({ visitorCount, nodes }, columnIndex) => {
return (
<div
key={columnIndex}
@ -182,16 +181,13 @@ export function Journey({
<div className={styles.header}>
<div className={styles.num}>{columnIndex + 1}</div>
<div className={styles.stats}>
<div className={styles.visitors} title={column.visitorCount}>
{formatLongNumber(column.visitorCount)} {formatMessage(labels.visitors)}
</div>
<div>
{columnIndex > 0 && <div className={styles.dropoff}>{dropOffPercent}</div>}
<div className={styles.visitors} title={visitorCount}>
{formatLongNumber(visitorCount)} {formatMessage(labels.visitors)}
</div>
</div>
</div>
<div className={styles.nodes}>
{column.nodes.map(
{nodes.map(
({
name,
totalCount,
@ -208,6 +204,13 @@ export function Journey({
: selectedCount
: totalCount;
const remaining =
columnIndex > 0
? Math.round((nodeCount / columns[columnIndex - 1]?.visitorCount) * 100)
: 0;
const dropped = 100 - remaining;
return (
<div
key={name}
@ -229,12 +232,22 @@ export function Journey({
<Text truncate>{name}</Text>
</Row>
<div className={styles.count} title={nodeCount}>
<TooltipTrigger delay={0} isDisabled={columnIndex === 0}>
<TooltipTrigger
delay={0}
isDisabled={columnIndex === 0 || (selectedNode && !selected)}
>
<Focusable>
<div>{formatLongNumber(nodeCount)}</div>
</Focusable>
<Tooltip placement="right" offset={10}>
{dropOffPercent}
<Tooltip placement="top" offset={20} showArrow>
<Text transform="lowercase" color="ruby">
{`${dropped}% ${formatMessage(labels.dropoff)}`}
</Text>
<Column>
<Text transform="lowercase">
{`${remaining}% ${formatMessage(labels.conversion)}`}
</Text>
</Column>
</Tooltip>
</TooltipTrigger>
</div>