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

Use getRequestDateRange in all routes.

Browse source
This commit is contained in:
Mike Cao 2025-06-25 22:53:07 -07:00
parent b0023feee9
commit 5171bdaf47
21 changed files with 72 additions and 173 deletions
Download patch file Download diff file Expand all files Collapse all files

25
src/app/(main)/websites/[websiteId]/sessions/SessionProperties.module.css
View file

@ -1,25 +0,0 @@
.container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
gap: 60px;
margin-bottom: 40px;
}
.table {
align-self: flex-start;
}
.link:hover {
cursor: pointer;
color: var(--primary-color);
}
.title {
text-align: center;
font-weight: bold;
margin: 20px 0;
}
.chart {
min-height: 620px;
}

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

@ -1,4 +1,4 @@
import { DataColumn, DataTable } from '@umami/react-zen';
import { Grid, DataColumn, DataTable } from '@umami/react-zen';
import {
useSessionDataPropertiesQuery,
useSessionDataValuesQuery,
@ -8,12 +8,11 @@ import { LoadingPanel } from '@/components/common/LoadingPanel';
import { PieChart } from '@/components/charts/PieChart';
import { useState } from 'react';
import { CHART_COLORS } from '@/lib/constants';
import styles from './SessionProperties.module.css';
export function SessionProperties({ websiteId }: { websiteId: string }) {
const [propertyName, setPropertyName] = useState('');
const { formatMessage, labels } = useMessages();
const { data, isLoading, isFetched, error } = useSessionDataPropertiesQuery(websiteId);
const { data, isLoading, isFetching, error } = useSessionDataPropertiesQuery(websiteId);
const { data: values } = useSessionDataValuesQuery(websiteId, propertyName);
const chartData =
propertyName && values
@ -30,25 +29,23 @@ export function SessionProperties({ websiteId }: { websiteId: string }) {
: null;
return (
<LoadingPanel isLoading={isLoading} isFetched={isFetched} error={error}>
<div className={styles.container}>
<DataTable data={data} className={styles.table}>
<LoadingPanel data={data} isLoading={isLoading} isFetching={isFetching} error={error}>
<Grid>
<DataTable data={data}>
<DataColumn id="propertyName" label={formatMessage(labels.property)}>
{(row: any) => (
<div className={styles.link} onClick={() => setPropertyName(row.propertyName)}>
{row.propertyName}
</div>
<div onClick={() => setPropertyName(row.propertyName)}>{row.propertyName}</div>
)}
</DataColumn>
<DataColumn id="total" label={formatMessage(labels.count)} align="end" />
</DataTable>
{propertyName && (
<div className={styles.chart}>
<div className={styles.title}>{propertyName}</div>
<div>
<div>{propertyName}</div>
<PieChart key={propertyName} type="doughnut" chartData={chartData} />
</div>
)}
</div>
</Grid>
</LoadingPanel>
);
}

5
src/app/(main)/websites/[websiteId]/sessions/SessionsTable.module.css
View file

@ -1,5 +0,0 @@
.link {
display: flex;
align-items: center;
gap: 20px;
}

3
src/app/(main)/websites/[websiteId]/sessions/SessionsTable.tsx
View file

@ -2,7 +2,6 @@ import Link from 'next/link';
import { DataColumn, DataTable } from '@umami/react-zen';
import { useFormat, useMessages, useTimezone } from '@/components/hooks';
import { Avatar } from '@/components/common/Avatar';
import styles from './SessionsTable.module.css';
import { TypeIcon } from '@/components/common/TypeIcon';
export function SessionsTable({ data = [] }: { data: any[]; showDomain?: boolean }) {
@ -14,7 +13,7 @@ export function SessionsTable({ data = [] }: { data: any[]; showDomain?: boolean
<DataTable data={data}>
<DataColumn id="id" label={formatMessage(labels.session)} width="100px">
{(row: any) => (
<Link href={`sessions/${row.id}`} className={styles.link}>
<Link href={`sessions/${row.id}`}>
<Avatar seed={row.id} size={64} />
</Link>
)}

43
src/app/(main)/websites/[websiteId]/sessions/SessionsWeekly.module.css
View file

@ -1,43 +0,0 @@
.week {
display: flex;
justify-content: space-between;
position: relative;
}
.header {
text-align: center;
font-weight: 700;
margin-bottom: 10px;
}
.day {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
gap: 1px;
position: relative;
}
.cell {
display: flex;
background-color: var(--base-color-2);
width: 20px;
height: 20px;
margin: auto;
border-radius: 100%;
align-items: flex-start;
}
.hour {
font-weight: 700;
color: var(--font-color);
height: 20px;
}
.block {
background-color: var(--primary-color);
width: 20px;
height: 20px;
border-radius: 100%;
}

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

@ -14,7 +14,7 @@ export function SessionsWeekly({ websiteId }: { websiteId: string }) {
.fill(weekStartsOn)
.map((d, i) => (d + i) % 7);
const [, max] = data
const [, max = 1] = data
? data.reduce((arr: number[], hours: number[], index: number) => {
const min = Math.min(...hours);
const max = Math.max(...hours);
@ -69,17 +69,25 @@ export function SessionsWeekly({ websiteId }: { websiteId: string }) {
key={index}
gap="1"
>
<Row marginBottom="3">
<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 = count / max;
const pct = max ? count / max : 0;
return (
<TooltipTrigger key={j} delay={0} isDisabled={count <= 0}>
<Focusable>
<Row backgroundColor="2" width="20px" height="20px" borderRadius="full">
<Row
alignItems="center"
justifyContent="center"
backgroundColor="2"
width="20px"
height="20px"
borderRadius="full"
style={{ margin: '0 auto' }}
>
<Row
backgroundColor="primary"
width="20px"