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

Unified loading states.

Browse source
This commit is contained in:
Mike Cao 2025-06-13 21:13:11 -07:00
parent 7b5591a3ce
commit da8c7e99c5
52 changed files with 506 additions and 364 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -36,65 +36,70 @@ export function SessionsWeekly({ websiteId }: { websiteId: string }) {
: [];
return (
<LoadingPanel isEmpty={!data?.length} isLoading={isLoading} error={error}>
<LoadingPanel data={data} isLoading={isLoading} error={error}>
<Grid columns="repeat(8, 1fr)" gap>
<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" weight="bold">
{label}
</Text>
</Row>
);
})}
</Grid>
{data &&
daysOfWeek.map((index: number) => {
const day = data[index];
return (
<Grid
rows="repeat(25, 20px)"
justifyContent="center"
alignItems="center"
key={index}
gap="1"
>
<Row>
<Text weight="bold" align="center">
{format(getDayOfWeekAsDate(index), 'EEE', { locale: dateLocale })}
</Text>
</Row>
{day?.map((count: number, j) => {
const pct = count / max;
{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 (
<TooltipTrigger key={j} delay={0} isDisabled={count <= 0}>
<Focusable>
<Row backgroundColor="2" width="20px" height="20px" borderRadius="full">
<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>
<Row key={i} justifyContent="flex-end">
<Text color="muted" weight="bold">
{label}
</Text>
</Row>
);
})}
</Grid>
);
})}
</Grid>
{daysOfWeek.map((index: number) => {
const day = data[index];
return (
<Grid
rows="repeat(24, 20px)"
justifyContent="center"
alignItems="center"
key={index}
gap="1"
>
<Row marginBottom="3">
<Text weight="bold" align="center">
{format(getDayOfWeekAsDate(index), 'EEE', { locale: dateLocale })}
</Text>
</Row>
{day?.map((count: number, j) => {
const pct = count / max;
return (
<TooltipTrigger key={j} delay={0} isDisabled={count <= 0}>
<Focusable>
<Row backgroundColor="2" width="20px" height="20px" borderRadius="full">
<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>
);