watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-04 04:37:11 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

Created ExpandedViewModal component.

Browse source
This commit is contained in:
Mike Cao 2025-10-09 14:31:53 -07:00
parent 038f397503
commit e4ce7c9071
4 changed files with 53 additions and 92 deletions
Download patch file Download diff file Expand all files Collapse all files

36
src/app/(main)/links/[linkId]/LinkPage.tsx
View file

@ -7,30 +7,12 @@ import { WebsiteChart } from '@/app/(main)/websites/[websiteId]/WebsiteChart';
import { LinkMetricsBar } from '@/app/(main)/links/[linkId]/LinkMetricsBar'; import { LinkMetricsBar } from '@/app/(main)/links/[linkId]/LinkMetricsBar';
import { LinkControls } from '@/app/(main)/links/[linkId]/LinkControls'; import { LinkControls } from '@/app/(main)/links/[linkId]/LinkControls';
import { LinkPanels } from '@/app/(main)/links/[linkId]/LinkPanels'; import { LinkPanels } from '@/app/(main)/links/[linkId]/LinkPanels';
import { Column, Dialog, Grid, Modal } from '@umami/react-zen'; import { Column, Grid } from '@umami/react-zen';
import { WebsiteExpandedView } from '@/app/(main)/websites/[websiteId]/WebsiteExpandedView'; import { ExpandedViewModal } from '@/app/(main)/websites/[websiteId]/ExpandedViewModal';
import { useNavigation } from '@/components/hooks';
const excludedIds = ['path', 'entry', 'exit', 'title', 'language', 'screen', 'event']; const excludedIds = ['path', 'entry', 'exit', 'title', 'language', 'screen', 'event'];
export function LinkPage({ linkId }: { linkId: string }) { export function LinkPage({ linkId }: { linkId: string }) {
const {
router,
query: { view },
updateParams,
} = useNavigation();
const handleClose = (close: () => void) => {
router.push(updateParams({ view: undefined }));
close();
};
const handleOpenChange = (isOpen: boolean) => {
if (!isOpen) {
router.push(updateParams({ view: undefined }));
}
};
return ( return (
<LinkProvider linkId={linkId}> <LinkProvider linkId={linkId}>
<Grid width="100%" height="100%"> <Grid width="100%" height="100%">
@ -44,19 +26,7 @@ export function LinkPage({ linkId }: { linkId: string }) {
</Panel> </Panel>
<LinkPanels linkId={linkId} /> <LinkPanels linkId={linkId} />
</PageBody> </PageBody>
<Modal isOpen={!!view} onOpenChange={handleOpenChange} isDismissable> <ExpandedViewModal websiteId={linkId} excludedIds={excludedIds} />
<Dialog style={{ maxWidth: 1320, width: '100vw', height: 'calc(100vh - 40px)' }}>
{({ close }) => {
return (
<WebsiteExpandedView
websiteId={linkId}
excludedIds={excludedIds}
onClose={() => handleClose(close)}
/>
);
}}
</Dialog>
</Modal>
</Column> </Column>
</Grid> </Grid>
</LinkProvider> </LinkProvider>

36
src/app/(main)/pixels/[pixelId]/PixelPage.tsx
View file

@ -7,30 +7,12 @@ import { WebsiteChart } from '@/app/(main)/websites/[websiteId]/WebsiteChart';
import { PixelMetricsBar } from '@/app/(main)/pixels/[pixelId]/PixelMetricsBar'; import { PixelMetricsBar } from '@/app/(main)/pixels/[pixelId]/PixelMetricsBar';
import { PixelControls } from '@/app/(main)/pixels/[pixelId]/PixelControls'; import { PixelControls } from '@/app/(main)/pixels/[pixelId]/PixelControls';
import { PixelPanels } from '@/app/(main)/pixels/[pixelId]/PixelPanels'; import { PixelPanels } from '@/app/(main)/pixels/[pixelId]/PixelPanels';
import { Column, Dialog, Grid, Modal } from '@umami/react-zen'; import { Column, Grid } from '@umami/react-zen';
import { WebsiteExpandedView } from '@/app/(main)/websites/[websiteId]/WebsiteExpandedView'; import { ExpandedViewModal } from '@/app/(main)/websites/[websiteId]/ExpandedViewModal';
import { useNavigation } from '@/components/hooks';
const excludedIds = ['path', 'entry', 'exit', 'title', 'language', 'screen', 'event']; const excludedIds = ['path', 'entry', 'exit', 'title', 'language', 'screen', 'event'];
export function PixelPage({ pixelId }: { pixelId: string }) { export function PixelPage({ pixelId }: { pixelId: string }) {
const {
router,
query: { view },
updateParams,
} = useNavigation();
const handleClose = (close: () => void) => {
router.push(updateParams({ view: undefined }));
close();
};
const handleOpenChange = (isOpen: boolean) => {
if (!isOpen) {
router.push(updateParams({ view: undefined }));
}
};
return ( return (
<PixelProvider pixelId={pixelId}> <PixelProvider pixelId={pixelId}>
<Grid width="100%" height="100%"> <Grid width="100%" height="100%">
@ -44,19 +26,7 @@ export function PixelPage({ pixelId }: { pixelId: string }) {
</Panel> </Panel>
<PixelPanels pixelId={pixelId} /> <PixelPanels pixelId={pixelId} />
</PageBody> </PageBody>
<Modal isOpen={!!view} onOpenChange={handleOpenChange} isDismissable> <ExpandedViewModal websiteId={pixelId} excludedIds={excludedIds} />
<Dialog style={{ maxWidth: 1320, width: '100vw', height: 'calc(100vh - 40px)' }}>
{({ close }) => {
return (
<WebsiteExpandedView
websiteId={pixelId}
excludedIds={excludedIds}
onClose={() => handleClose(close)}
/>
);
}}
</Dialog>
</Modal>
</Column> </Column>
</Grid> </Grid>
</PixelProvider> </PixelProvider>

44
src/app/(main)/websites/[websiteId]/ExpandedViewModal.tsx Normal file
View file

@ -0,0 +1,44 @@
import { Dialog, Modal } from '@umami/react-zen';
import { WebsiteExpandedView } from '@/app/(main)/websites/[websiteId]/WebsiteExpandedView';
import { useNavigation } from '@/components/hooks';
export function ExpandedViewModal({
websiteId,
excludedIds,
}: {
websiteId: string;
excludedIds?: string[];
}) {
const {
router,
query: { view },
updateParams,
} = useNavigation();
const handleClose = (close: () => void) => {
router.push(updateParams({ view: undefined }));
close();
};
const handleOpenChange = (isOpen: boolean) => {
if (!isOpen) {
router.push(updateParams({ view: undefined }));
}
};
return (
<Modal isOpen={!!view} onOpenChange={handleOpenChange} isDismissable>
<Dialog style={{ maxWidth: 1320, width: '100vw', height: 'calc(100vh - 40px)' }}>
{({ close }) => {
return (
<WebsiteExpandedView
websiteId={websiteId}
excludedIds={excludedIds}
onClose={() => handleClose(close)}
/>
);
}}
</Dialog>
</Modal>
);
}

29
src/app/(main)/websites/[websiteId]/WebsitePage.tsx
View file

@ -1,30 +1,13 @@
'use client'; 'use client';
import { Column, Modal, Dialog } from '@umami/react-zen'; import { Column } from '@umami/react-zen';
import { useNavigation } from '@/components/hooks';
import { Panel } from '@/components/common/Panel'; import { Panel } from '@/components/common/Panel';
import { WebsiteChart } from './WebsiteChart'; import { WebsiteChart } from './WebsiteChart';
import { WebsiteExpandedView } from './WebsiteExpandedView';
import { WebsiteMetricsBar } from './WebsiteMetricsBar'; import { WebsiteMetricsBar } from './WebsiteMetricsBar';
import { WebsitePanels } from './WebsitePanels'; import { WebsitePanels } from './WebsitePanels';
import { WebsiteControls } from './WebsiteControls'; import { WebsiteControls } from './WebsiteControls';
import { ExpandedViewModal } from '@/app/(main)/websites/[websiteId]/ExpandedViewModal';
export function WebsitePage({ websiteId }: { websiteId: string }) { export function WebsitePage({ websiteId }: { websiteId: string }) {
const {
router,
query: { view },
updateParams,
} = useNavigation();
const handleClose = (close: () => void) => {
router.push(updateParams({ view: undefined }));
close();
};
const handleOpenChange = (isOpen: boolean) => {
if (!isOpen) {
router.push(updateParams({ view: undefined }));
}
};
return ( return (
<Column gap> <Column gap>
<WebsiteControls websiteId={websiteId} /> <WebsiteControls websiteId={websiteId} />
@ -33,13 +16,7 @@ export function WebsitePage({ websiteId }: { websiteId: string }) {
<WebsiteChart websiteId={websiteId} /> <WebsiteChart websiteId={websiteId} />
</Panel> </Panel>
<WebsitePanels websiteId={websiteId} /> <WebsitePanels websiteId={websiteId} />
<Modal isOpen={!!view} onOpenChange={handleOpenChange} isDismissable> <ExpandedViewModal websiteId={websiteId} />
<Dialog style={{ maxWidth: 1320, width: '100vw', height: 'calc(100vh - 40px)' }}>
{({ close }) => {
return <WebsiteExpandedView websiteId={websiteId} onClose={() => handleClose(close)} />;
}}
</Dialog>
</Modal>
</Column> </Column>
); );
} }