Files
umami/src/components/metrics/PagesTable.tsx
2025-04-19 10:09:59 -07:00

73 lines
1.8 KiB
TypeScript

import { WebsiteContext } from '@/app/(main)/websites/[websiteId]/WebsiteProvider';
import { FilterButtons } from '@/components/common/FilterButtons';
import { FilterLink } from '@/components/common/FilterLink';
import { useMessages, useNavigation } from '@/components/hooks';
import { emptyFilter } from '@/lib/filters';
import { useContext } from 'react';
import { MetricsTable, MetricsTableProps } from './MetricsTable';
export interface PagesTableProps extends MetricsTableProps {
allowFilter?: boolean;
}
export function PagesTable({ allowFilter, ...props }: PagesTableProps) {
const {
router,
renderUrl,
query: { view = 'url' },
} = useNavigation();
const { formatMessage, labels } = useMessages();
const { domain } = useContext(WebsiteContext);
const handleChange = (id: any) => {
router.push(renderUrl({ view: id }));
};
const buttons = [
{
id: 'url',
label: formatMessage(labels.path),
},
{
id: 'entry',
label: formatMessage(labels.entry),
},
{
id: 'exit',
label: formatMessage(labels.exit),
},
{
id: 'title',
label: formatMessage(labels.title),
},
];
const renderLink = ({ x }) => {
return (
<FilterLink
id={view === 'entry' || view === 'exit' ? 'url' : view}
value={x}
label={!x && formatMessage(labels.none)}
externalUrl={
view !== 'title'
? `${domain.startsWith('http') ? domain : `https://${domain}`}${x}`
: null
}
/>
);
};
return (
<MetricsTable
{...props}
title={formatMessage(labels.pages)}
type={view}
metric={formatMessage(labels.views)}
dataFilter={emptyFilter}
renderLabel={renderLink}
>
{allowFilter && <FilterButtons items={buttons} value={view} onChange={handleChange} />}
</MetricsTable>
);
}