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

implement UTM filters and fields

Browse source
This commit is contained in:
Francis Cao 2026-02-05 16:30:46 -08:00
parent 7514af4236
commit 49adaa32d0
11 changed files with 336 additions and 55 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,6 +1,6 @@
import { Button, Column, Grid, List, ListItem } from '@umami/react-zen';
import { Button, Column, Grid, List, ListItem, ListSection } from '@umami/react-zen';
import { useState } from 'react';
import { useFields, useMessages } from '@/components/hooks';
import { type FieldGroup, useFields, useMessages } from '@/components/hooks';
export function FieldSelectForm({
selectedFields = [],
@ -13,7 +13,7 @@ export function FieldSelectForm({
}) {
const [selected, setSelected] = useState(selectedFields);
const { formatMessage, labels } = useMessages();
const { fields } = useFields();
const { fields, groupLabels } = useFields();
const handleChange = (value: string[]) => {
setSelected(value);
@ -24,17 +24,38 @@ export function FieldSelectForm({
onClose();
};
const groupedFields = fields
.filter(field => field.name !== 'event')
.reduce(
(acc, field) => {
const group = field.group;
if (!acc[group]) {
acc[group] = [];
}
acc[group].push(field);
return acc;
},
{} as Record<FieldGroup, typeof fields>,
);
return (
<Column gap="6">
<List value={selected} onChange={handleChange} selectionMode="multiple">
{fields.map(({ name, label }) => {
return (
<ListItem key={name} id={name}>
{label}
</ListItem>
);
})}
</List>
<Column gap="3" overflowY="auto" maxHeight="400px">
<List value={selected} onChange={handleChange} selectionMode="multiple">
{groupLabels.map(({ key: groupKey, label }) => {
const groupFields = groupedFields[groupKey];
return (
<ListSection key={groupKey} title={label}>
{groupFields.map(field => (
<ListItem key={field.name} id={field.name}>
{field.filterLabel}
</ListItem>
))}
</ListSection>
);
})}
</List>
</Column>
<Grid columns="1fr 1fr" gap>
<Button onPress={onClose}>{formatMessage(labels.cancel)}</Button>
<Button onPress={handleApply} variant="primary">