diff --git a/src/app/(main)/websites/[websiteId]/(reports)/retention/Retention.tsx b/src/app/(main)/websites/[websiteId]/(reports)/retention/Retention.tsx index 4b9053d51..89b14080b 100644 --- a/src/app/(main)/websites/[websiteId]/(reports)/retention/Retention.tsx +++ b/src/app/(main)/websites/[websiteId]/(reports)/retention/Retention.tsx @@ -1,5 +1,6 @@ import { Column, Grid, Icon, Row, Text } from '@umami/react-zen'; import type { ReactNode } from 'react'; +import { differenceInCalendarDays } from 'date-fns'; import { LoadingPanel } from '@/components/common/LoadingPanel'; import { Panel } from '@/components/common/Panel'; import { useLocale, useMessages, useResultQuery } from '@/components/hooks'; @@ -45,8 +46,6 @@ export function Retention({ websiteId, days = DAYS, startDate, endDate }: Retent return arr; }, []) || []; - const totalDays = rows.length; - return ( {data && ( @@ -84,6 +83,7 @@ export function Retention({ websiteId, days = DAYS, startDate, endDate }: Retent ))} {rows.map(({ date, visitors, records }: any, rowIndex: number) => { + const maxDay = differenceInCalendarDays(endDate, new Date(date)); return ( {days.map(day => { - if (totalDays - rowIndex < day) { - return null; - } - const percentage = records.filter(a => a.day === day)[0]?.percentage; + if (day > maxDay) return null; + const percentage = records.find(a => a.day === day)?.percentage; return ( {percentage ? `${Number(percentage).toFixed(2)}%` : ''}