- {dataKey}
+ {dataKey}
{DATA_TYPES[dataType]}
diff --git a/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionDetailsPage.tsx b/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionDetailsPage.tsx
index 766fd193..c16ecbcb 100644
--- a/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionDetailsPage.tsx
+++ b/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionDetailsPage.tsx
@@ -1,11 +1,11 @@
'use client';
+import { Grid, Row, Column } from '@umami/react-zen';
import { Avatar } from '@/components/common/Avatar';
import { LoadingPanel } from '@/components/common/LoadingPanel';
import { useWebsiteSessionQuery } from '@/components/hooks';
-import { WebsiteHeader } from '../../WebsiteHeader';
+import { WebsiteHeader } from '@/app/(main)/websites/[websiteId]/WebsiteHeader';
import { SessionActivity } from './SessionActivity';
import { SessionData } from './SessionData';
-import styles from './SessionDetailsPage.module.css';
import { SessionInfo } from './SessionInfo';
import { SessionStats } from './SessionStats';
@@ -21,12 +21,17 @@ export function SessionDetailsPage({
return (
-
+
+
);
}
diff --git a/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionInfo.tsx b/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionInfo.tsx
index 4374e6c2..c5594ea7 100644
--- a/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionInfo.tsx
+++ b/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionInfo.tsx
@@ -1,8 +1,7 @@
+import { Icon, TextField, Column, Row, Label, Box, Text } from '@umami/react-zen';
import { useFormat, useLocale, useMessages, useRegionNames, useTimezone } from '@/components/hooks';
import { TypeIcon } from '@/components/common/TypeIcon';
-import { Icon, CopyIcon } from '@umami/react-zen';
import { Icons } from '@/components/icons';
-import styles from './SessionInfo.module.css';
export function SessionInfo({ data }) {
const { locale } = useLocale();
@@ -12,59 +11,73 @@ export function SessionInfo({ data }) {
const { getRegionName } = useRegionNames(locale);
return (
-
-
- - ID
- -
- {data?.id}
-
+
+
+
+
+
- - {formatMessage(labels.lastSeen)}
- - {formatTimezoneDate(data?.lastAt, 'PPPPpp')}
+
+
+ {formatTimezoneDate(data?.lastAt, 'PPPPpp')}
+
- - {formatMessage(labels.firstSeen)}
- - {formatTimezoneDate(data?.firstAt, 'PPPPpp')}
+
+
+ {formatTimezoneDate(data?.firstAt, 'PPPPpp')}
+
- - {formatMessage(labels.country)}
- -
+
+
+
- {formatValue(data?.country, 'country')}
-
+ {formatValue(data?.country, 'country')}
+
+
- - {formatMessage(labels.region)}
- -
+
+
+
- {getRegionName(data?.subdivision1)}
-
+ {getRegionName(data?.subdivision1)}
+
+
- - {formatMessage(labels.city)}
- -
+
+
+
- {data?.city}
-
+ {data?.city}
+
+
- - {formatMessage(labels.os)}
- -
+
+
+
- {formatValue(data?.os, 'os')}
-
+ {formatValue(data?.os, 'os')}
+
+
- - {formatMessage(labels.device)}
- -
+
+
+
- {formatValue(data?.device, 'device')}
-
+ {formatValue(data?.device, 'device')}
+
+
- - {formatMessage(labels.browser)}
- -
+
+
+
- {formatValue(data?.browser, 'browser')}
-
-
-
+
{formatValue(data?.browser, 'browser')}
+
+
+
);
}
diff --git a/src/components/common/Avatar.tsx b/src/components/common/Avatar.tsx
index b3e8ccc4..f8ed7c94 100644
--- a/src/components/common/Avatar.tsx
+++ b/src/components/common/Avatar.tsx
@@ -17,5 +17,5 @@ export function Avatar({ seed, size = 128, ...props }: { seed: string; size?: nu
}).toDataUri();
}, []);
- return
;
+ return
;
}
diff --git a/src/components/common/DataGrid.tsx b/src/components/common/DataGrid.tsx
index 1e80bd33..04d51e61 100644
--- a/src/components/common/DataGrid.tsx
+++ b/src/components/common/DataGrid.tsx
@@ -3,7 +3,6 @@ import { Loading, SearchField, Row, Column } from '@umami/react-zen';
import { useMessages, useNavigation } from '@/components/hooks';
import { Empty } from '@/components/common/Empty';
import { Pager } from '@/components/common/Pager';
-import { Panel } from '@/components/layout/Panel';
import { LoadingPanel } from '@/components/common/LoadingPanel';
import { PagedQueryResult } from '@/lib/types';
@@ -60,14 +59,12 @@ export function DataGrid({
)}
-
-
- {hasData ? (typeof children === 'function' ? children(result) : children) : null}
- {isLoading && }
- {!isLoading && !hasData && !search && (renderEmpty ? renderEmpty() : )}
- {!isLoading && noResults && }
-
-
+
+ {hasData ? (typeof children === 'function' ? children(result) : children) : null}
+ {isLoading && }
+ {!isLoading && !hasData && !search && (renderEmpty ? renderEmpty() : )}
+ {!isLoading && noResults && }
+
{allowPaging && hasData && (
diff --git a/src/components/common/LinkButton.module.css b/src/components/common/LinkButton.module.css
index 5561f536..bb23aeba 100644
--- a/src/components/common/LinkButton.module.css
+++ b/src/components/common/LinkButton.module.css
@@ -36,7 +36,7 @@
.button.primary {
color: var(--light50);
- background: var(--primary400);
+ background: var(--primary-color);
}
.button.primary:hover {
diff --git a/src/components/common/TypeIcon.tsx b/src/components/common/TypeIcon.tsx
index 25e77e4c..39505265 100644
--- a/src/components/common/TypeIcon.tsx
+++ b/src/components/common/TypeIcon.tsx
@@ -1,4 +1,5 @@
import { ReactNode } from 'react';
+import { Row } from '@umami/react-zen';
export function TypeIcon({
type,
@@ -10,7 +11,7 @@ export function TypeIcon({
children?: ReactNode;
}) {
return (
- <>
+
{children}
-
+
);
}
diff --git a/src/components/declarations.d.ts b/src/components/declarations.d.ts
index ca55157b..4bce9eec 100644
--- a/src/components/declarations.d.ts
+++ b/src/components/declarations.d.ts
@@ -1,4 +1,5 @@
declare module '*.css';
declare module '*.svg';
declare module '*.json';
+declare module 'react-simple-maps';
declare module 'uuid';
diff --git a/src/components/hooks/useNavigation.ts b/src/components/hooks/useNavigation.ts
index e3371fe4..2cc65dab 100644
--- a/src/components/hooks/useNavigation.ts
+++ b/src/components/hooks/useNavigation.ts
@@ -8,7 +8,7 @@ export function useNavigation() {
const params = useSearchParams();
const [, teamId] = pathname.match(/^\/teams\/([a-f0-9-]+)/) || [];
- const query = useMemo(() => {
+ const query = useMemo<{ [key: string]: any }>(() => {
const obj = {};
for (const [key, value] of params.entries()) {
diff --git a/src/components/hooks/useWebsite.ts b/src/components/hooks/useWebsite.ts
new file mode 100644
index 00000000..daaf057b
--- /dev/null
+++ b/src/components/hooks/useWebsite.ts
@@ -0,0 +1,8 @@
+import { WebsiteContext } from '@/app/(main)/websites/[websiteId]/WebsiteProvider';
+import { useContext } from 'react';
+
+export function useWebsite() {
+ const website = useContext(WebsiteContext);
+
+ return website;
+}
diff --git a/src/components/input/DateFilter.tsx b/src/components/input/DateFilter.tsx
index 6a555deb..77c1c518 100644
--- a/src/components/input/DateFilter.tsx
+++ b/src/components/input/DateFilter.tsx
@@ -5,8 +5,6 @@ import { DatePickerForm } from '@/components/metrics/DatePickerForm';
import { useLocale, useMessages } from '@/components/hooks';
import { Icons } from '@/components/icons';
import { formatDate } from '@/lib/date';
-import styles from './DateFilter.module.css';
-import classNames from 'classnames';
export interface DateFilterProps {
value: string;
@@ -23,11 +21,8 @@ export function DateFilter({
startDate,
endDate,
value,
- offset = 0,
- className,
onChange,
showAllTime = false,
- alignment = 'end',
}: DateFilterProps) {
const { formatMessage, labels } = useMessages();
const [showPicker, setShowPicker] = useState(false);
@@ -38,19 +33,19 @@ export function DateFilter({
label: formatMessage(labels.lastHours, { x: 24 }),
value: '24hour',
},
- { divider: true },
{
label: formatMessage(labels.thisWeek),
value: '0week',
+ divider: true,
},
{
label: formatMessage(labels.lastDays, { x: 7 }),
value: '7day',
},
- { divider: true },
{
label: formatMessage(labels.thisMonth),
value: '0month',
+ divider: true,
},
{
label: formatMessage(labels.lastDays, { x: 30 }),
@@ -60,25 +55,25 @@ export function DateFilter({
label: formatMessage(labels.lastDays, { x: 90 }),
value: '90day',
},
- { divider: true },
{ label: formatMessage(labels.thisYear), value: '0year' },
{
label: formatMessage(labels.lastMonths, { x: 6 }),
value: '6month',
+ divider: true,
},
{
label: formatMessage(labels.lastMonths, { x: 12 }),
value: '12month',
},
- { divider: true },
showAllTime && {
label: formatMessage(labels.allTime),
value: 'all',
+ divider: true,
},
- { divider: true },
{
label: formatMessage(labels.customRange),
value: 'custom',
+ divider: true,
},
]
.filter(n => n)
@@ -97,50 +92,21 @@ export function DateFilter({
onChange(value.toString());
};
- /*
- const handleClose = () => setShowPicker(false);
-
- const renderValue = (value: string) => {
- const { unit } = parseDateValue(value) || {};
-
- if (offset && unit === 'year') {
- return formatDate(startDate, 'yyyy', locale);
- }
-
- if (offset && unit === 'month') {
- return formatDate(startDate, 'MMMM yyyy', locale);
- }
-
- if (value.startsWith('range') || offset) {
- return (
- handleChange('custom')}
- />
- );
- }
-
- return options.find(e => e.value === value)?.label;
- };*/
-
return (
<>
{showPicker && (
@@ -160,7 +126,7 @@ export function DateFilter({
);
}
-const CustomRange = ({ startDate, endDate, unit, onClick }) => {
+export const CustomRange = ({ startDate, endDate, unit, onClick }) => {
const { locale } = useLocale();
const monthFormat = unit === 'month';
diff --git a/src/components/layout/Grid.module.css b/src/components/layout/Grid.module.css
deleted file mode 100644
index 7a2b7124..00000000
--- a/src/components/layout/Grid.module.css
+++ /dev/null
@@ -1,76 +0,0 @@
-.grid {
- display: grid;
-}
-
-.row {
- display: grid;
- grid-template-columns: repeat(6, 1fr);
- border-top: 1px solid var(--base300);
-}
-
-.row.compare {
- grid-template-columns: max-content 1fr 1fr;
-}
-
-.col {
- padding: 20px;
- min-height: 430px;
- border-inline-start: 1px solid var(--base300);
-}
-
-.col:first-child {
- border-inline-start: 0;
- padding-inline-start: 0;
-}
-
-.col:last-child {
- padding-inline-end: 0;
-}
-
-.col.one {
- grid-column: span 6;
-}
-
-.col.two {
- grid-column: span 3;
-}
-
-.col.three {
- grid-column: span 2;
-}
-
-.col.two-one:first-child {
- grid-column: span 4;
-}
-
-.col.two-one:last-child {
- grid-column: span 2;
-}
-
-.col.one-two:first-child {
- grid-column: span 2;
-}
-
-.col.one-two:last-child {
- grid-column: span 4;
-}
-
-@media only screen and (max-width: 992px) {
- .row {
- border: 0;
- }
-
- .row > .col {
- border-top: 1px solid var(--base300);
- border-inline-start: 0;
- border-inline-end: 0;
- padding: 20px 0;
- }
-
- .col.two,
- .col.three,
- .col.one-two,
- .col.two-one {
- grid-column: span 6 !important;
- }
-}
diff --git a/src/components/layout/Grid.tsx b/src/components/layout/Grid.tsx
deleted file mode 100644
index b43a8ac8..00000000
--- a/src/components/layout/Grid.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { CSSProperties } from 'react';
-import classNames from 'classnames';
-import { mapChildren } from '@/lib/react';
-// eslint-disable-next-line css-modules/no-unused-class
-import styles from './Grid.module.css';
-
-export interface GridProps {
- className?: string;
- style?: CSSProperties;
- children?: any;
-}
-
-export function Grid({ className, style, children }: GridProps) {
- return (
-
- {children}
-
- );
-}
-
-export function GridRow(props: {
- [x: string]: any;
- columns?: 'one' | 'two' | 'three' | 'one-two' | 'two-one' | 'compare';
- className?: string;
- children?: any;
-}) {
- const { columns = 'two', className, children, ...otherProps } = props;
- return (
-
- {mapChildren(children, child => {
- return
{child}
;
- })}
-
- {items.map(({ key, label, url }) => {
- return (
-
- {label}
-
- );
- })}
-
- );
-}
-
-export function MenuNav2({ items, selectedKey }: MenuNavProps) {
- return (
-
- {items.map(({ key, label, url }) => {
- return (
-
- );
- })}
-
- );
-}
diff --git a/src/components/layout/Page.tsx b/src/components/layout/Page.tsx
index d259113b..9033a3f5 100644
--- a/src/components/layout/Page.tsx
+++ b/src/components/layout/Page.tsx
@@ -25,17 +25,7 @@ export function Page({
}
return (
-
+
{children}
);
diff --git a/src/components/layout/PageHeader.tsx b/src/components/layout/PageHeader.tsx
index cbbe12aa..7c0757a9 100644
--- a/src/components/layout/PageHeader.tsx
+++ b/src/components/layout/PageHeader.tsx
@@ -12,7 +12,7 @@ export function PageHeader({
children?: ReactNode;
}) {
return (
-
+
{icon && {icon}}
{title && {title}}
diff --git a/src/components/layout/Panel.tsx b/src/components/layout/Panel.tsx
index 7aad3c0c..8effe196 100644
--- a/src/components/layout/Panel.tsx
+++ b/src/components/layout/Panel.tsx
@@ -2,5 +2,14 @@ import { Box } from '@umami/react-zen';
import type { BoxProps } from '@umami/react-zen/Box';
export function Panel(props: BoxProps) {
- return ;
+ return (
+
+ );
}
diff --git a/src/components/layout/SideBar.tsx b/src/components/layout/SideBar.tsx
new file mode 100644
index 00000000..05816bb1
--- /dev/null
+++ b/src/components/layout/SideBar.tsx
@@ -0,0 +1,20 @@
+import { Text, List, ListItem } from '@umami/react-zen';
+
+export interface MenuNavProps {
+ items: any[];
+ selectedKey?: string;
+}
+
+export function SideBar({ items, selectedKey }: MenuNavProps) {
+ return (
+
+ {items.map(({ key, label, url }) => {
+ return (
+
+ {label}
+
+ );
+ })}
+
+ );
+}
diff --git a/src/components/metrics/ChangeLabel.module.css b/src/components/metrics/ChangeLabel.module.css
index 802a9931..96ad0ce4 100644
--- a/src/components/metrics/ChangeLabel.module.css
+++ b/src/components/metrics/ChangeLabel.module.css
@@ -2,8 +2,7 @@
display: flex;
align-items: center;
gap: 5px;
- font-size: 13px;
- font-weight: 700;
+ font-size: 12px;
padding: 0.1em 0.5em;
border-radius: 5px;
color: var(--base500);
@@ -11,16 +10,16 @@
}
.positive {
- color: var(--green700);
- background: var(--green100);
+ color: var(--success-color);
+ background: color-mix(in srgb, var(--success-color), var(--background-color) 85%);
}
.negative {
- color: var(--red700);
- background: var(--red100);
+ color: var(--danger-color);
+ background: color-mix(in srgb, var(--danger-color), var(--background-color) 85%);
}
.neutral {
- color: var(--base700);
- background: var(--base100);
+ color: var(--font-color-muted);
+ background: var(--base-color-2);
}
diff --git a/src/components/metrics/ListTable.module.css b/src/components/metrics/ListTable.module.css
index 405819b1..d75fef5a 100644
--- a/src/components/metrics/ListTable.module.css
+++ b/src/components/metrics/ListTable.module.css
@@ -43,7 +43,7 @@
}
.row:hover {
- background-color: var(--base75);
+ background-color: var(--base-color-2);
}
.label {
@@ -60,7 +60,7 @@
}
.label a:hover {
- color: var(--primary400);
+ color: var(--primary-color);
}
.label:empty {
@@ -83,8 +83,8 @@
.percent {
position: relative;
width: 50px;
- color: var(--base600);
- border-inline-start: 1px solid var(--base600);
+ color: var(--base-color-9);
+ border-inline-start: 1px solid var(--base-color-9);
padding-inline-start: 10px;
z-index: 1;
}
@@ -95,7 +95,7 @@
left: 0;
height: 30px;
opacity: 0.1;
- background: var(--primary400);
+ background: var(--primary-color);
z-index: -1;
}
diff --git a/src/components/metrics/ListTable.tsx b/src/components/metrics/ListTable.tsx
index 3d674ee8..fd89d868 100644
--- a/src/components/metrics/ListTable.tsx
+++ b/src/components/metrics/ListTable.tsx
@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
import { FixedSizeList } from 'react-window';
import { useSpring, config } from '@react-spring/web';
import classNames from 'classnames';
@@ -6,7 +7,6 @@ import { Empty } from '@/components/common/Empty';
import { formatLongNumber } from '@/lib/format';
import { useMessages } from '@/components/hooks';
import styles from './ListTable.module.css';
-import { ReactNode } from 'react';
const ITEM_SIZE = 30;
diff --git a/src/components/metrics/MetricsTable.module.css b/src/components/metrics/MetricsTable.module.css
deleted file mode 100644
index f04d9ae4..00000000
--- a/src/components/metrics/MetricsTable.module.css
+++ /dev/null
@@ -1,38 +0,0 @@
-.container {
- position: relative;
- min-height: 430px;
- display: flex;
- flex-direction: column;
- flex: 1;
-}
-
-.actions {
- display: flex;
- gap: 20px;
- align-items: center;
- justify-content: space-between;
- margin-bottom: 10px;
-}
-
-.footer {
- display: flex;
- justify-content: center;
-}
-
-.search {
- max-width: 300px;
-}
-
-@media only screen and (max-width: 992px) {
- .container {
- min-height: auto;
- }
-
- .actions {
- flex-direction: column;
- }
-
- .search {
- max-width: 100%;
- }
-}
diff --git a/src/components/metrics/MetricsTable.tsx b/src/components/metrics/MetricsTable.tsx
index 0af9d6bf..1947be64 100644
--- a/src/components/metrics/MetricsTable.tsx
+++ b/src/components/metrics/MetricsTable.tsx
@@ -1,5 +1,5 @@
import { ReactNode, useMemo, useState } from 'react';
-import { Loading, Icon, Text, SearchField, Row } from '@umami/react-zen';
+import { Loading, Icon, Text, SearchField, Row, Column } from '@umami/react-zen';
import { ErrorMessage } from '@/components/common/ErrorMessage';
import { LinkButton } from '@/components/common/LinkButton';
import { DEFAULT_ANIMATION_DURATION } from '@/lib/constants';
@@ -7,8 +7,6 @@ import { percentFilter } from '@/lib/filters';
import { useNavigation, useWebsiteMetricsQuery, useMessages, useFormat } from '@/components/hooks';
import { Icons } from '@/components/icons';
import { ListTable, ListTableProps } from './ListTable';
-import styles from './MetricsTable.module.css';
-import { Panel } from '@/components/layout/Panel';
export interface MetricsTableProps extends ListTableProps {
websiteId: string;
@@ -85,20 +83,12 @@ export function MetricsTable({
}, [data, dataFilter, search, limit, formatValue, type]);
return (
-
+
{error && }
-
- {allowSearch && (
-
- )}
+
+ {allowSearch && }
{children}
-
+
{data && !error && (
)}
@@ -113,6 +103,6 @@ export function MetricsTable({
)}
-
+
);
}
diff --git a/src/components/metrics/PageviewsChart.tsx b/src/components/metrics/PageviewsChart.tsx
index c5b7ca7b..c25b7dd2 100644
--- a/src/components/metrics/PageviewsChart.tsx
+++ b/src/components/metrics/PageviewsChart.tsx
@@ -2,7 +2,6 @@ import { useMemo } from 'react';
import { BarChart, BarChartProps } from '@/components/charts/BarChart';
import { useLocale, useTheme, useMessages } from '@/components/hooks';
import { renderDateLabels } from '@/lib/charts';
-import { Panel } from '@/components/layout/Panel';
export interface PageviewsChartProps extends BarChartProps {
data: {
@@ -77,15 +76,13 @@ export function PageviewsChart({
}, [data, locale]);
return (
-
-
-
+
);
}
diff --git a/src/components/metrics/QueryParametersTable.module.css b/src/components/metrics/QueryParametersTable.module.css
index 47b20a90..b21b9c96 100644
--- a/src/components/metrics/QueryParametersTable.module.css
+++ b/src/components/metrics/QueryParametersTable.module.css
@@ -6,7 +6,7 @@
.param {
padding: 0 8px;
- color: var(--primary400);
+ color: var(--primary-color);
background: var(--blue100);
border-radius: 4px;
}
diff --git a/src/components/metrics/ReferrersTable.tsx b/src/components/metrics/ReferrersTable.tsx
index 0092d3ef..baf92231 100644
--- a/src/components/metrics/ReferrersTable.tsx
+++ b/src/components/metrics/ReferrersTable.tsx
@@ -40,7 +40,7 @@ export function ReferrersTable({ allowFilter, ...props }: ReferrersTableProps) {
return `(${formatMessage(labels.other)})`;
} else {
return (
-
+
{GROUPED_DOMAINS.find(({ domain }) => domain === referrer)?.name}
diff --git a/src/components/metrics/WorldMap.tsx b/src/components/metrics/WorldMap.tsx
index a57fc489..42e1f495 100644
--- a/src/components/metrics/WorldMap.tsx
+++ b/src/components/metrics/WorldMap.tsx
@@ -1,16 +1,20 @@
+import { FloatingTooltip, Column } from '@umami/react-zen';
import { useState, useMemo, HTMLAttributes } from 'react';
import { ComposableMap, Geographies, Geography, ZoomableGroup } from 'react-simple-maps';
import classNames from 'classnames';
import { colord } from 'colord';
import { ISO_COUNTRIES, MAP_FILE } from '@/lib/constants';
-import { useDateRange, useTheme, useWebsiteMetricsQuery } from '@/components/hooks';
-import { useCountryNames } from '@/components/hooks';
-import { useLocale } from '@/components/hooks';
-import { useMessages } from '@/components/hooks';
+import {
+ useDateRange,
+ useTheme,
+ useWebsiteMetricsQuery,
+ useCountryNames,
+ useLocale,
+ useMessages,
+} from '@/components/hooks';
import { formatLongNumber } from '@/lib/format';
import { percentFilter } from '@/lib/filters';
import styles from './WorldMap.module.css';
-import { FloatingTooltip } from '@umami/react-zen';
export function WorldMap({
websiteId,
@@ -70,7 +74,7 @@ export function WorldMap({
};
return (
-
{tooltip && {tooltip}}
-
+
);
}
diff --git a/src/styles/global.css b/src/styles/global.css
index c9431a21..a7ae8720 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -16,12 +16,6 @@ a:hover {
text-decoration: none;
}
-svg {
- width: 16px;
- height: 16px;
- shape-rendering: geometricPrecision;
-}
-
::-webkit-scrollbar {
width: 15px;
background: transparent;