Updated grid layouts. Fixed chart tooltip.

This commit is contained in:
Mike Cao 2025-04-06 08:13:55 -07:00
parent 96c2c32d14
commit 1d24e23a34
9 changed files with 64 additions and 79 deletions

View file

@ -10,15 +10,17 @@ import { WebsiteMenu } from '@/app/(main)/websites/[websiteId]/WebsiteMenu';
import { WebsiteCompareBar } from '@/app/(main)/websites/[websiteId]/WebsiteCompareBar';
export function WebsiteHeader({
websiteId,
showFilter = true,
allowEdit = true,
}: {
websiteId: string;
showFilter?: boolean;
allowEdit?: boolean;
compareMode?: boolean;
}) {
const website = useWebsite();
const { id: websiteId, name, domain } = website || {};
const { name, domain } = website || {};
return (
<Column marginY="6" gap="6">

View file

@ -1,4 +1,5 @@
import { Grid } from '@umami/react-zen';
import { GridRow } from '@/components/common/GridRow';
import { Panel } from '@/components/common/Panel';
import { PagesTable } from '@/components/metrics/PagesTable';
import { ReferrersTable } from '@/components/metrics/ReferrersTable';
@ -7,57 +8,37 @@ import { OSTable } from '@/components/metrics/OSTable';
import { DevicesTable } from '@/components/metrics/DevicesTable';
import { WorldMap } from '@/components/metrics/WorldMap';
import { CountriesTable } from '@/components/metrics/CountriesTable';
import { EventsTable } from '@/components/metrics/EventsTable';
import { EventsChart } from '@/components/metrics/EventsChart';
import { usePathname } from 'next/navigation';
export function WebsiteTableView({ websiteId }: { websiteId: string }) {
const pathname = usePathname();
const tableProps = {
websiteId,
limit: 10,
};
const isSharePage = pathname.includes('/share/');
return (
<Grid gap="3">
<Grid gap="3" columns="repeat(auto-fill, minmax(500px, 1fr))">
<GridRow layout="two">
<Panel>
<PagesTable {...tableProps} />
<PagesTable websiteId={websiteId} limit={10} />
</Panel>
<Panel>
<ReferrersTable {...tableProps} />
<ReferrersTable websiteId={websiteId} limit={10} />
</Panel>
</Grid>
<Grid gap="3" columns="repeat(auto-fill, minmax(400px, 1fr))">
</GridRow>
<GridRow layout="three">
<Panel>
<BrowsersTable {...tableProps} />
<BrowsersTable websiteId={websiteId} limit={10} />
</Panel>
<Panel>
<OSTable {...tableProps} />
<OSTable websiteId={websiteId} limit={10} />
</Panel>
<Panel>
<DevicesTable {...tableProps} />
<DevicesTable websiteId={websiteId} limit={10} />
</Panel>
</Grid>
<Grid gap="3" columns="2fr 1fr">
<Panel padding="0">
</GridRow>
<GridRow layout="two-one">
<Panel padding="0" gridColumn="span 2">
<WorldMap websiteId={websiteId} />
</Panel>
<Panel>
<CountriesTable {...tableProps} />
<CountriesTable websiteId={websiteId} limit={10} />
</Panel>
</Grid>
{isSharePage && (
<Grid gap="3">
<Panel>
<EventsTable {...tableProps} />
</Panel>
<Panel>
<EventsChart websiteId={websiteId} />
</Panel>
</Grid>
)}
</GridRow>
</Grid>
);
}