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

Refactored tables.

Browse source
This commit is contained in:
Mike Cao 2025-08-23 01:12:37 -07:00
parent 600a3d28c3
commit c8fe93dd9d
56 changed files with 643 additions and 1038 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/app/(main)/websites/[websiteId]/sessions/SessionProperties.tsx
View file

@ -71,9 +71,9 @@ const SessionValues = ({ websiteId, propertyName }) => {
const tableData = useMemo(() => {
if (!propertyName || !data || propertySum === 0) return [];
return data.map(({ value, total }) => ({
x: value,
y: total,
z: 100 * (total / propertySum),
label: value,
count: total,
percent: 100 * (total / propertySum),
}));
}, [propertyName, data, propertySum]);

112
src/app/(main)/websites/[websiteId]/sessions/SessionsWeekly.tsx
View file

@ -1,112 +0,0 @@
import { Row, Grid, Text } from '@umami/react-zen';
import { format, startOfDay, addHours } from 'date-fns';
import { useLocale, useMessages, useWebsiteSessionsWeeklyQuery } from '@/components/hooks';
import { LoadingPanel } from '@/components/common/LoadingPanel';
import { getDayOfWeekAsDate } from '@/lib/date';
import { Focusable, Tooltip, TooltipTrigger } from '@umami/react-zen';
export function SessionsWeekly({ websiteId }: { websiteId: string }) {
const { data, isLoading, error } = useWebsiteSessionsWeeklyQuery(websiteId);
const { dateLocale } = useLocale();
const { labels, formatMessage } = useMessages();
const { weekStartsOn } = dateLocale.options;
const daysOfWeek = Array(7)
.fill(weekStartsOn)
.map((d, i) => (d + i) % 7);
const [, max = 1] = data
? data.reduce((arr: number[], hours: number[], index: number) => {
const min = Math.min(...hours);
const max = Math.max(...hours);
if (index === 0) {
return [min, max];
}
if (min < arr[0]) {
arr[0] = min;
}
if (max > arr[1]) {
arr[1] = max;
}
return arr;
}, [])
: [];
return (
<LoadingPanel data={data} isLoading={isLoading} error={error}>
<Grid columns="repeat(8, 1fr)" gap>
{data && (
<>
<Grid rows="repeat(25, 20px)" gap="1">
<Row>&nbsp;</Row>
{Array(24)
.fill(null)
.map((_, i) => {
const label = format(addHours(startOfDay(new Date()), i), 'p', {
locale: dateLocale,
})
.replace(/\D00 ?/, '')
.toLowerCase();
return (
<Row key={i} justifyContent="flex-end">
<Text color="muted">{label}</Text>
</Row>
);
})}
</Grid>
{daysOfWeek.map((index: number) => {
const day = data[index];
return (
<Grid
rows="repeat(24, 20px)"
justifyContent="center"
alignItems="center"
key={index}
gap="1"
>
<Row alignItems="center" justifyContent="center" marginBottom="3">
<Text weight="bold" align="center">
{format(getDayOfWeekAsDate(index), 'EEE', { locale: dateLocale })}
</Text>
</Row>
{day?.map((count: number, j) => {
const pct = max ? count / max : 0;
return (
<TooltipTrigger key={j} delay={0} isDisabled={count <= 0}>
<Focusable>
<Row
alignItems="center"
justifyContent="center"
backgroundColor="2"
width="20px"
height="20px"
borderRadius="full"
style={{ margin: '0 auto' }}
>
<Row
backgroundColor="primary"
width="20px"
height="20px"
borderRadius="full"
style={{ opacity: pct, transform: `scale(${pct})` }}
/>
</Row>
</Focusable>
<Tooltip placement="right">{`${formatMessage(
labels.visitors,
)}: ${count}`}</Tooltip>
</TooltipTrigger>
);
})}
</Grid>
);
})}
</>
)}
</Grid>
</LoadingPanel>
);
}