m/umami
1
0
Fork 0
mirror of https://github.com/kremalicious/umami.git synced 2024-11-24 11:01:38 +01:00
Code Issues Packages Projects Releases Wiki Activity

Funnel report updates. Fixed insights report.

Browse Source
This commit is contained in:
Mike Cao 2024-04-03 14:44:49 -07:00
parent 3aee54009c
commit cf8d49f867
8 changed files with 94 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/(main)/reports/[reportId]/FieldFilterEditForm.tsx
View File

@ -191,7 +191,7 @@ export default function FieldFilterEditForm({
)}
</Flexbox>
<Button variant="primary" onClick={handleAdd} disabled={isDisabled}>
{isNew ? formatMessage(labels.add) : formatMessage(labels.update)}
{formatMessage(isNew ? labels.add : labels.update)}
</Button>
</FormRow>
</Form>

3
src/app/(main)/reports/[reportId]/FilterParameters.tsx
View File

@ -74,7 +74,8 @@ export function FilterParameters() {
return (
<ParameterList.Item key={name} onRemove={() => handleRemove(name)}>
<FilterParameter
{...dateRange}
startDate={dateRange.startDate}
endDate={dateRange.endDate}
websiteId={websiteId}
name={name}
label={label}

5
src/app/(main)/reports/[reportId]/ParameterList.tsx
View File

@ -4,6 +4,7 @@ import Icons from 'components/icons';
import Empty from 'components/common/Empty';
import { useMessages } from 'components/hooks';
import styles from './ParameterList.module.css';
import classNames from 'classnames';
export interface ParameterListProps {
children?: ReactNode;
@ -22,15 +23,17 @@ export function ParameterList({ children }: ParameterListProps) {
const Item = ({
children,
className,
onClick,
onRemove,
}: {
children?: ReactNode;
className?: string;
onClick?: () => void;
onRemove?: () => void;
}) => {
return (
<div className={styles.item} onClick={onClick}>
<div className={classNames(styles.item, className)} onClick={onClick}>
{children}
<Icon onClick={onRemove}>
<Icons.Close />

8
src/app/(main)/reports/funnel/FunnelChart.module.css
View File

@ -37,7 +37,7 @@
.card {
display: grid;
gap: 20px;
margin-top: 8px;
margin-top: 14px;
}
.header {
@ -73,7 +73,7 @@
}
.item {
font-size: 24px;
font-size: 20px;
color: var(--base900);
font-weight: 700;
}
@ -83,19 +83,19 @@
display: flex;
justify-content: space-between;
gap: 10px;
font-size: 24px;
margin: 10px 0;
text-transform: lowercase;
}
.visitors {
color: var(--base900);
font-size: 32px;
font-size: 24px;
font-weight: 900;
margin-right: 10px;
}
.percent {
font-size: 20px;
font-weight: 700;
align-self: flex-end;
}

7
src/app/(main)/reports/funnel/FunnelParameters.module.css
View File

@ -2,8 +2,15 @@
display: flex;
align-items: center;
gap: 10px;
width: 100%;
}
.type {
color: var(--base700);
}
.value {
display: flex;
align-self: center;
gap: 20px;
}

33
src/app/(main)/reports/funnel/FunnelParameters.tsx
View File

@ -41,6 +41,17 @@ export function FunnelParameters() {
updateReport({ parameters: { steps: parameters.steps.concat(step) } });
};
const handleUpdateStep = (
close: () => void,
index: number,
step: { type: string; value: string },
) => {
const steps = [...parameters.steps];
steps[index] = step;
updateReport({ parameters: { steps } });
close();
};
const handleRemoveStep = (index: number) => {
const steps = [...parameters.steps];
delete steps[index];
@ -57,7 +68,7 @@ export function FunnelParameters() {
</Button>
<Popup alignment="start">
<PopupForm>
<FunnelStepAddForm onAdd={handleAddStep} />
<FunnelStepAddForm onChange={handleAddStep} />
</PopupForm>
</Popup>
</PopupTrigger>
@ -79,14 +90,30 @@ export function FunnelParameters() {
<ParameterList>
{steps.map((step: { type: string; value: string }, index: number) => {
return (
<ParameterList.Item key={index} onRemove={() => handleRemoveStep(index)}>
<div className={styles.item}>
<PopupTrigger key={index}>
<ParameterList.Item
className={styles.item}
onRemove={() => handleRemoveStep(index)}
>
<div className={styles.value}>
<div className={styles.type}>
<Icon>{step.type === 'url' ? <Icons.Eye /> : <Icons.Bolt />}</Icon>
</div>
<div>{step.value}</div>
</div>
</ParameterList.Item>
<Popup alignment="start">
{(close: () => void) => (
<PopupForm>
<FunnelStepAddForm
type={step.type}
value={step.value}
onChange={handleUpdateStep.bind(null, close, index)}
/>
</PopupForm>
)}
</Popup>
</PopupTrigger>
);
})}
</ParameterList>

29
src/app/(main)/reports/funnel/FunnelStepAddForm.tsx
View File

@ -3,13 +3,18 @@ import { useMessages } from 'components/hooks';
import { Button, FormRow, TextField, Flexbox, Dropdown, Item } from 'react-basics';
import styles from './FunnelStepAddForm.module.css';
export interface UrlAddFormProps {
defaultValue?: string;
onAdd?: (step: { type: string; value: string }) => void;
export interface FunnelStepAddFormProps {
type?: string;
value?: string;
onChange?: (step: { type: string; value: string }) => void;
}
export function FunnelStepAddForm({ defaultValue = '', onAdd }: UrlAddFormProps) {
const [type, setType] = useState('url');
export function FunnelStepAddForm({
type: defaultType = 'url',
value: defaultValue = '',
onChange,
}: FunnelStepAddFormProps) {
const [type, setType] = useState(defaultType);
const [value, setValue] = useState(defaultValue);
const { formatMessage, labels } = useMessages();
const items = [
@ -19,7 +24,7 @@ export function FunnelStepAddForm({ defaultValue = '', onAdd }: UrlAddFormProps)
const isDisabled = !type || !value;
const handleSave = () => {
onAdd({ type, value });
onChange({ type, value });
setValue('');
};
@ -39,7 +44,8 @@ export function FunnelStepAddForm({ defaultValue = '', onAdd }: UrlAddFormProps)
};
return (
<FormRow label={formatMessage(labels.addStep)}>
<Flexbox direction="column" gap={10}>
<FormRow label={formatMessage(defaultValue ? labels.update : labels.add)}>
<Flexbox gap={10}>
<Dropdown
className={styles.dropdown}
@ -60,11 +66,14 @@ export function FunnelStepAddForm({ defaultValue = '', onAdd }: UrlAddFormProps)
autoComplete="off"
onKeyDown={handleKeyDown}
/>
<Button variant="primary" onClick={handleSave} disabled={isDisabled}>
{formatMessage(labels.add)}
</Button>
</Flexbox>
</FormRow>
<FormRow>
<Button variant="primary" onClick={handleSave} disabled={isDisabled}>
{formatMessage(defaultValue ? labels.update : labels.add)}
</Button>
</FormRow>
</Flexbox>
);
}

4
src/pages/api/reports/insights.ts
View File

@ -56,8 +56,8 @@ const schema = {
};
function convertFilters(filters: any[]) {
return filters.reduce((obj, { name, ...value }) => {
obj[name] = value;
return filters.reduce((obj, filter) => {
obj[filter.name] = filter;
return obj;
}, {});