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

Report updates.

Browse source
This commit is contained in:
Mike Cao 2023-05-20 09:02:08 -07:00
parent 40f53e8856
commit 0fb93ff00b
147 changed files with 1095 additions and 628 deletions
Download patch file Download diff file Expand all files Collapse all files

118
components/pages/reports/funnel/FunnelForm.js
View file

@ -1,118 +0,0 @@
import DateFilter from 'components/input/DateFilter';
import WebsiteSelect from 'components/input/WebsiteSelect';
import useMessages from 'hooks/useMessages';
import { parseDateRange } from 'lib/date';
import { useState } from 'react';
import {
Button,
Form,
FormButtons,
FormInput,
FormRow,
SubmitButton,
TextField,
} from 'react-basics';
import styles from './FunnelForm.module.css';
export function FunnelForm({ onSearch }) {
const { formatMessage, labels } = useMessages();
const [dateRange, setDateRange] = useState('');
const [startAt, setStartAt] = useState();
const [endAt, setEndAt] = useState();
const [urls, setUrls] = useState(['/', '/docs/getting-started', '/docs/intall']);
const [websiteId, setWebsiteId] = useState('');
const [window, setWindow] = useState(60);
const handleSubmit = async data => {
onSearch(data);
};
const handleDateChange = value => {
const { startDate, endDate } = parseDateRange(value);
setDateRange(value);
setStartAt(startDate.getTime());
setEndAt(endDate.getTime());
};
const handleAddUrl = () => setUrls([...urls, '']);
const handleRemoveUrl = i => {
const nextUrls = [...urls];
nextUrls.splice(i, 1);
setUrls(nextUrls);
};
const handleWindowChange = value => setWindow(value.target.value);
const handleUrlChange = (value, i) => {
const nextUrls = [...urls];
nextUrls[i] = value.target.value;
setUrls(nextUrls);
};
return (
<>
<Form
values={{
websiteId,
startAt,
endAt,
urls,
window,
}}
onSubmit={handleSubmit}
>
<FormRow label={formatMessage(labels.website)}>
<WebsiteSelect websiteId={websiteId} onSelect={value => setWebsiteId(value)} />
<FormInput name="websiteId" rules={{ required: formatMessage(labels.required) }}>
<TextField value={websiteId} className={styles.hiddenInput} />
</FormInput>
</FormRow>
<FormRow label="Date">
<DateFilter
className={styles.filter}
value={dateRange}
alignment="start"
onChange={handleDateChange}
isF
/>
<FormInput
name="startAt"
className={styles.hiddenInput}
rules={{ required: formatMessage(labels.required) }}
>
<TextField value={startAt} />
</FormInput>
<FormInput name="endAt" rules={{ required: formatMessage(labels.required) }}>
<TextField value={endAt} className={styles.hiddenInput} />
</FormInput>
</FormRow>
<FormRow label="Window (minutes)">
<FormInput
name="window"
rules={{ required: formatMessage(labels.required), pattern: /[0-9]+/ }}
>
<TextField value={window} onChange={handleWindowChange} />
</FormInput>
</FormRow>
<Button onClick={handleAddUrl}>Add URL</Button>
{urls.map((a, i) => (
<FormRow className={styles.urlFormRow} key={`url${i}`} label={`URL ${i + 1}`}>
<TextField value={urls[i]} onChange={value => handleUrlChange(value, i)} />
<Button onClick={() => handleRemoveUrl(i)}>Remove URL</Button>
</FormRow>
))}
<FormButtons>
<SubmitButton variant="primary" disabled={false}>
Query
</SubmitButton>
</FormButtons>
</Form>
</>
);
}
export default FunnelForm;

13
components/pages/reports/funnel/FunnelForm.module.css
View file

@ -1,13 +0,0 @@
.filter {
min-width: 200px;
}
.hiddenInput {
visibility: hidden;
min-height: 0px;
max-height: 0px;
}
.urlFormRow label {
min-width: 80px;
}

36
components/pages/reports/funnel/FunnelPage.js
View file

@ -1,36 +0,0 @@
import { useMutation } from '@tanstack/react-query';
import Page from 'components/layout/Page';
import PageHeader from 'components/layout/PageHeader';
import ReportsLayout from 'components/layout/ReportsLayout';
import useApi from 'hooks/useApi';
import { useState } from 'react';
import FunnelChart from './FunnelChart';
import FunnelTable from './FunnelTable';
import FunnelForm from './FunnelForm';
export default function FunnelPage() {
const { post } = useApi();
const { mutate } = useMutation(data => post('/reports/funnel', data));
const [data, setData] = useState([{}]);
const [setFormData] = useState();
function handleOnSearch(data) {
setFormData(data);
mutate(data, {
onSuccess: async data => {
setData(data);
},
});
}
return (
<ReportsLayout filter={<FunnelForm onSearch={handleOnSearch} />} header={'test'}>
<Page>
<PageHeader title="Funnel Report"></PageHeader>
<FunnelChart data={data} />
<FunnelTable data={data} />
</Page>
</ReportsLayout>
);
}

67
components/pages/reports/funnel/FunnelParameters.js Normal file
View file

@ -0,0 +1,67 @@
import { useMessages } from 'hooks';
import {
Icon,
Form,
FormButtons,
FormInput,
FormRow,
PopupTrigger,
Popup,
SubmitButton,
TextField,
} from 'react-basics';
import Icons from 'components/icons';
import { updateReport } from 'store/reports';
import { useRef } from 'react';
import styles from './FunnelParameters.module.css';
export function FunnelParameters({ report }) {
const { formatMessage, labels } = useMessages();
const ref = useRef(null);
const { id, websiteId, parameters, isLoading } = report || {};
const handleSubmit = values => {
console.log({ values });
updateReport(id, { parameters: values, isLoading: false });
};
console.log('PARAMETERS', parameters);
return (
<>
<Form ref={ref} values={parameters} onSubmit={handleSubmit}>
<FormRow label="Window (minutes)">
<FormInput
name="window"
rules={{ required: formatMessage(labels.required), pattern: /[0-9]+/ }}
>
<TextField autoComplete="off" />
</FormInput>
</FormRow>
<FormRow label={formatMessage(labels.urls)} action={<AddURLButton />}>
hi
</FormRow>
<FormButtons>
<SubmitButton variant="primary" disabled={!websiteId} loading={isLoading}>
{formatMessage(labels.query)}
</SubmitButton>
</FormButtons>
</Form>
</>
);
}
function AddURLButton() {
return (
<PopupTrigger>
<Icon>
<Icons.Plus />
</Icon>
<Popup className={styles.popup} position="right" alignment="start">
HALLO
</Popup>
</PopupTrigger>
);
}
export default FunnelParameters;

7
components/pages/reports/funnel/FunnelParameters.module.css Normal file
View file

@ -0,0 +1,7 @@
.popup {
background: var(--base50);
padding: 20px;
margin-left: 10px;
border: 1px solid var(--base400);
border-radius: var(--border-radius);
}

28
components/pages/reports/funnel/FunnelReport.js Normal file
View file

@ -0,0 +1,28 @@
import FunnelChart from './FunnelChart';
import FunnelTable from './FunnelTable';
import FunnelParameters from './FunnelParameters';
import Report from '../Report';
import ReportHeader from '../ReportHeader';
import ReportMenu from '../ReportMenu';
import ReportBody from '../ReportBody';
import Funnel from 'assets/funnel.svg';
import { useReport } from 'hooks';
export default function FunnelReport({ reportId }) {
const report = useReport(reportId);
console.log('REPORT', { report });
return (
<Report>
<ReportHeader icon={<Funnel />} report={report} />
<ReportMenu>
<FunnelParameters report={report} />
</ReportMenu>
<ReportBody>
<FunnelChart report={report} />
<FunnelTable report={report} />
</ReportBody>
</Report>
);
}

0
components/pages/reports/funnel/FunnelPage.module.css → components/pages/reports/funnel/FunnelReport.module.css
View file