98 lines
2.6 KiB
TypeScript
98 lines
2.6 KiB
TypeScript
'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 { Panel } from '@/components/common/Panel';
|
|
import { Breakdown } from './Breakdown';
|
|
import { WebsiteControls } from '@/app/(main)/websites/[websiteId]/WebsiteControls';
|
|
|
|
export function BreakdownPage({ websiteId }: { websiteId: string }) {
|
|
const {
|
|
dateRange: { startDate, endDate },
|
|
} = useDateRange(websiteId);
|
|
const [fields, setFields] = useState([]);
|
|
|
|
return (
|
|
<Column gap>
|
|
<WebsiteControls websiteId={websiteId} />
|
|
<Box>
|
|
<FieldsButton value={fields} onChange={setFields} />
|
|
</Box>
|
|
<Panel height="900px" overflow="auto" allowFullscreen>
|
|
<Breakdown
|
|
websiteId={websiteId}
|
|
startDate={startDate}
|
|
endDate={endDate}
|
|
parameters={{ fields }}
|
|
/>
|
|
</Panel>
|
|
</Column>
|
|
);
|
|
}
|
|
|
|
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>
|
|
);
|
|
};
|