watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-24 06:25:43 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Fixed retention report showing wrong dates. Changed Breakdown field select to modal.

Browse source
This commit is contained in:
Mike Cao 2025-06-29 15:36:43 -07:00
parent ee8750d9df
commit ea83afbc13
20 changed files with 108 additions and 277 deletions
Download patch file Download diff file Expand all files Collapse all files

86
src/app/(main)/websites/[websiteId]/reports/breakdown/BreakdownPage.tsx
View file

@ -1,22 +1,12 @@
'use client';
import { useState } from 'react';
import {
List,
ListItem,
Button,
Column,
Box,
Grid,
Text,
Icon,
Popover,
DialogTrigger,
} from '@umami/react-zen';
import { useDateRange, useMessages, useFields } from '@/components/hooks';
import { SquarePlus, Chevron } from '@/components/icons';
import { Button, Column, Box, Text, Icon, DialogTrigger, Modal, Dialog } from '@umami/react-zen';
import { useDateRange, useMessages } from '@/components/hooks';
import { ListCheck } from '@/components/icons';
import { Panel } from '@/components/common/Panel';
import { Breakdown } from './Breakdown';
import { WebsiteControls } from '@/app/(main)/websites/[websiteId]/WebsiteControls';
import { FieldSelectForm } from '@/app/(main)/websites/[websiteId]/reports/breakdown/FieldSelectForm';
export function BreakdownPage({ websiteId }: { websiteId: string }) {
const {
@ -27,9 +17,7 @@ export function BreakdownPage({ websiteId }: { websiteId: string }) {
return (
<Column gap>
<WebsiteControls websiteId={websiteId} />
<Box>
<FieldsButton value={fields} onChange={setFields} />
</Box>
<FieldsButton value={fields} onChange={setFields} />
<Panel height="900px" overflow="auto" allowFullscreen>
<Breakdown
websiteId={websiteId}
@ -43,55 +31,25 @@ export function BreakdownPage({ websiteId }: { websiteId: string }) {
}
const FieldsButton = ({ value, onChange }) => {
const [selected, setSelected] = useState(value);
const [isOpen, setIsOpen] = useState(false);
const { formatMessage, labels } = useMessages();
const { fields } = useFields();
const handleChange = value => {
setSelected(value);
};
const handleApply = () => {
setIsOpen(false);
onChange?.(selected);
};
const handleClose = () => {
setIsOpen(false);
setSelected(value);
};
return (
<DialogTrigger>
<Button variant="quiet" onPress={() => setIsOpen(!isOpen)}>
<Icon>
<SquarePlus />
</Icon>
<Text>Fields</Text>
<Icon rotate={90}>
<Chevron />
</Icon>
</Button>
<Popover placement="bottom start" isOpen={isOpen}>
<Column width="300px" padding="2" border borderRadius shadow="3" backgroundColor gap>
<List value={selected} onChange={handleChange} selectionMode="multiple">
{fields.map(({ name, label }) => {
return (
<ListItem key={name} id={name}>
{label}
</ListItem>
);
})}
</List>
<Grid columns="1fr 1fr" gap>
<Button onPress={handleClose}>{formatMessage(labels.cancel)}</Button>
<Button onPress={handleApply} variant="primary">
{formatMessage(labels.apply)}
</Button>
</Grid>
</Column>
</Popover>
</DialogTrigger>
<Box>
<DialogTrigger>
<Button>
<Icon>
<ListCheck />
</Icon>
<Text>Fields</Text>
</Button>
<Modal>
<Dialog title={formatMessage(labels.fields)}>
{({ close }) => (
<FieldSelectForm selectedFields={value} onChange={onChange} onClose={close} />
)}
</Dialog>
</Modal>
</DialogTrigger>
</Box>
);
};