m
/
umami
mirror of https://github.com/kremalicious/umami.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Funnel Table/Chart hooked up.

This commit is contained in:
Brian Cao 2023-05-14 21:38:03 -07:00
parent 1130bca195
commit 07cb9f621d
13 changed files with 170 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
components/input/DateFilter.js
View File

@ -9,7 +9,7 @@ import useApi from 'hooks/useApi';
import useDateRange from 'hooks/useDateRange';
import useMessages from 'hooks/useMessages';
export function DateFilter({ websiteId, value, className, onChange, isForm, alignment }) {
export function DateFilter({ websiteId, value, className, onChange, alignment }) {
const { formatMessage, labels } = useMessages();
const { get } = useApi();
const [dateRange, setDateRange] = useDateRange(websiteId);
@ -23,7 +23,7 @@ export function DateFilter({ websiteId, value, className, onChange, isForm, alig
if (data) {
const websiteRange = { value, ...getDateRangeValues(new Date(data.createdAt), Date.now()) };
if (!isForm) {
if (!onChange) {
setDateRange(websiteRange);
}
@ -32,15 +32,13 @@ export function DateFilter({ websiteId, value, className, onChange, isForm, alig
}
}
} else if (value !== 'all') {
if (!isForm) {
if (!onChange) {
setDateRange(value);
}
if (onChange) {
onChange(value);
}
console.log(value);
}
}

1
components/layout/SettingsLayout.js
View File

@ -15,6 +15,7 @@ export function SettingsLayout({ children }) {
const items = [
{ key: 'websites', label: formatMessage(labels.websites), url: '/settings/websites' },
{ key: 'teams', label: formatMessage(labels.teams), url: '/settings/teams' },
{ key: 'reports', label: 'Reports', url: '/settings/reports/funnel' },
user.isAdmin && { key: 'users', label: formatMessage(labels.users), url: '/settings/users' },
{ key: 'profile', label: formatMessage(labels.profile), url: '/settings/profile' },
].filter(n => n);

6
components/messages.js
View File

@ -18,7 +18,9 @@ export const labels = defineMessages({
admin: { id: 'label.admin', defaultMessage: 'Administrator' },
confirm: { id: 'label.confirm', defaultMessage: 'Confirm' },
details: { id: 'label.details', defaultMessage: 'Details' },
website: { id: 'label.website', defaultMessage: 'Website' },
websites: { id: 'label.websites', defaultMessage: 'Websites' },
reports: { id: 'label.reports', defaultMessage: 'Reports' },
created: { id: 'label.created', defaultMessage: 'Created' },
edit: { id: 'label.edit', defaultMessage: 'Edit' },
name: { id: 'label.name', defaultMessage: 'Name' },
@ -183,6 +185,10 @@ export const messages = defineMessages({
id: 'message.delete-website-warning',
defaultMessage: 'All website data will be deleted.',
},
noResultsFound: {
id: 'messages.no-results-found',
defaultMessage: 'No results were found.',
},
noWebsitesConfigured: {
id: 'messages.no-websites-configured',
defaultMessage: 'You do not have any websites configured.',

57
components/pages/reports/FunnelChart.js
View File

@ -1,43 +1,40 @@
import FunnelGraph from 'funnel-graph-js/dist/js/funnel-graph';
import { useEffect, useRef } from 'react';
import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
import useMessages from 'hooks/useMessages';
export default function FunnelChart() {
export default function FunnelChart({ data }) {
const { formatMessage, labels, messages } = useMessages();
const funnel = useRef(null);
useEffect(() => {
funnel.current.innerHTML = '';
if (data && data.length > 0) {
funnel.current.innerHTML = '';
const data = {
labels: ['Cv Sent', '1st Interview', '2nd Interview', '3rd Interview', 'Offer'],
subLabels: ['Cv Sent', '1st Interview', '2nd Interview', '3rd Interview', 'Offer'],
colors: [
['#FFB178', '#FF78B1', '#FF3C8E'],
['#FFB178', '#FF78B1', '#FF3C8E'],
['#A0BBFF', '#EC77FF'],
['#A0F9FF', '#7795FF'],
['#FFB178', '#FF78B1', '#FF3C8E'],
],
values: [[3500], [3300], [2000], [600], [330]],
};
const chartData = {
labels: data.map(a => a.url),
colors: ['#147af3', '#e0f2ff'],
values: data.map(a => a.count),
};
const graph = new FunnelGraph({
container: '.funnel',
gradientDirection: 'horizontal',
data: data,
displayPercent: true,
direction: 'Vertical',
width: 1000,
height: 350,
subLabelValue: 'values',
});
const graph = new FunnelGraph({
container: '.funnel',
gradientDirection: 'horizontal',
data: chartData,
displayPercent: true,
direction: 'Vertical',
width: 1000,
height: 350,
});
graph.draw();
}, []);
graph.draw();
}
}, [data]);
return (
<div>
FunnelChart
<div className="funnel" ref={funnel} />
</div>
<>
{data?.length > 0 && <div className="funnel" ref={funnel} />}
{data?.length === 0 && <EmptyPlaceholder message={formatMessage(messages.noResultsFound)} />}
</>
);
}

56
components/pages/reports/FunnelForm.js
View File

@ -1,12 +1,8 @@
import { useMutation } from '@tanstack/react-query';
import DateFilter from 'components/input/DateFilter';
import WebsiteSelect from 'components/input/WebsiteSelect';
import useApi from 'hooks/useApi';
import useMessages from 'hooks/useMessages';
import useUser from 'hooks/useUser';
import { parseDateRange } from 'lib/date';
import { useRouter } from 'next/router';
import { useEffect, useState } from 'react';
import { useState } from 'react';
import {
Button,
Form,
@ -17,15 +13,15 @@ import {
TextField,
} from 'react-basics';
import styles from './FunnelForm.module.css';
import { getNextInternalQuery } from 'next/dist/server/request-meta';
export function FunnelForm({ onSearch }) {
const { formatMessage, labels, getMessage } = useMessages();
const [dateRange, setDateRange] = useState(null);
const [startDate, setStartDate] = useState(null);
const [endDate, setEndDate] = useState(null);
const { formatMessage, labels } = useMessages();
const [dateRange, setDateRange] = useState('');
const [startAt, setStartAt] = useState();
const [endAt, setEndAt] = useState();
const [urls, setUrls] = useState(['']);
const [websiteId, setWebsiteId] = useState('');
const [window, setWindow] = useState(60);
const handleSubmit = async data => {
onSearch(data);
@ -35,14 +31,16 @@ export function FunnelForm({ onSearch }) {
const { startDate, endDate } = parseDateRange(value);
setDateRange(value);
setStartDate(startDate);
setEndDate(endDate);
setStartAt(startDate.getTime());
setEndAt(endDate.getTime());
};
const handleAddUrl = () => setUrls([...urls, 'meow']);
const handleAddUrl = () => setUrls([...urls, '']);
const handleRemoveUrl = i => setUrls(urls.splice(i, 1));
const handleWindowChange = value => setWindow(value.target.value);
const handleUrlChange = (value, i) => {
const nextUrls = [...urls];
@ -55,13 +53,14 @@ export function FunnelForm({ onSearch }) {
<Form
values={{
websiteId,
startDate,
endDate,
startAt,
endAt,
urls,
window,
}}
onSubmit={handleSubmit}
>
<FormRow label="website">
<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} />
@ -73,28 +72,39 @@ export function FunnelForm({ onSearch }) {
value={dateRange}
alignment="start"
onChange={handleDateChange}
isF
/>
<FormInput
name="startDate"
name="startAt"
className={styles.hiddenInput}
rules={{ required: formatMessage(labels.required) }}
>
<TextField value={startDate} />
<TextField value={startAt} />
</FormInput>
<FormInput name="endDate" rules={{ required: formatMessage(labels.required) }}>
<TextField value={endDate} className={styles.hiddenInput} />
<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 key={`url${i}`} label={`URL ${i + 1}`}>
<Button onClick={() => handleRemoveUrl(i)}>Remove URL</Button>
<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">Search</SubmitButton>
<SubmitButton variant="primary" disabled={false}>
Search
</SubmitButton>
</FormButtons>
</Form>
</>

9
components/pages/reports/FunnelForm.module.css
View File

@ -17,3 +17,12 @@
min-height: 0px;
max-height: 0px;
}
.urlFormRow {
flex-direction: row;
gap: 0em;
}
.urlFormRow label {
min-width: 80px;
}

34
components/pages/reports/FunnelPage.js
View File

@ -1,26 +1,38 @@
import { useMutation } from '@tanstack/react-query';
import Page from 'components/layout/Page';
import PageHeader from 'components/layout/PageHeader';
import useApi from 'hooks/useApi';
import { useState } from 'react';
import FunnelChart from './FunnelChart';
import FunnelTable from './FunnelTable';
import FunnelForm from './FunnelForm';
import styles from './FunnelPage.module.css';
export default function FunnelPage() {
function handleOnSearch() {
const { post } = useApi();
const { mutate, error, isLoading } = useMutation(data => post('/reports/funnel', data));
const [data, setData] = useState();
function handleOnSearch(data) {
// do API CALL to api/reports/funnel to get funnelData
// Get DATA
mutate(data, {
onSuccess: async data => {
setData(data);
},
});
}
return (
<Page>
funnelPage
<PageHeader title="Funnel Report"></PageHeader>
<FunnelChart data={data} />
<FunnelTable data={data} />
{/* <ReportForm /> */}
<FunnelForm onSearchClick={handleOnSearch} /> website / start/endDate urls: []
<FunnelChart />
{/* {!chartLoaded && <Loading icon="dots" style={{ minHeight: 300 }} />}
{chartLoaded && (
<>
{!view && <WebsiteTableView websiteId={websiteId} />}
{view && <WebsiteMenuView websiteId={websiteId} />}
</>
)} */}
<div>
<h2>Filters</h2>
<FunnelForm onSearch={handleOnSearch} />
</div>
</Page>
);
}

10
components/pages/reports/FunnelPage.module.css Normal file
View File

@ -0,0 +1,10 @@
.filters {
display: flex;
flex-direction: column;
justify-content: space-between;
border: 1px solid var(--base400);
border-radius: var(--border-radius);
line-height: 32px;
padding: 10px;
overflow: hidden;
}

17
components/pages/reports/FunnelTable.js Normal file
View File

@ -0,0 +1,17 @@
import DataTable from 'components/metrics/DataTable';
import useMessages from 'hooks/useMessages';
import { useState } from 'react';
export function DevicesTable({ ...props }) {
const { formatMessage, labels } = useMessages();
const { data } = props;
const tableData =
data?.map(a => ({ x: a.url, y: a.count, z: (a.count / data[0].count) * 100 })) || [];
console.log(tableData);
return <DataTable data={tableData} title="Url" type="device" />;
}
export default DevicesTable;

32
db/postgresql/schema.prisma
View File

@ -17,9 +17,9 @@ model User {
updatedAt DateTime? @updatedAt @map("updated_at") @db.Timestamptz(6)
deletedAt DateTime? @map("deleted_at") @db.Timestamptz(6)
website Website[]
teamUser TeamUser[]
ReportTemplate UserReport[]
website Website[]
teamUser TeamUser[]
Report Report[]
@@map("user")
}
@ -60,6 +60,7 @@ model Website {
user User? @relation(fields: [userId], references: [id])
teamWebsite TeamWebsite[]
eventData EventData[]
Report Report[]
@@index([userId])
@@index([createdAt])
@ -156,18 +157,21 @@ model TeamWebsite {
@@map("team_website")
}
model UserReport {
id String @id() @unique() @map("report_id") @db.Uuid
userId String @map("user_id") @db.Uuid
websiteId String @map("website_id") @db.Uuid
reportName String @map("report_name") @db.VarChar(200)
templateName String @map("template_name") @db.VarChar(200)
parameters String @map("parameters") @db.VarChar(6000)
createdAt DateTime? @default(now()) @map("created_at") @db.Timestamptz(6)
updatedAt DateTime? @updatedAt @map("updated_at") @db.Timestamptz(6)
model Report {
id String @id() @unique() @map("report_id") @db.Uuid
userId String @map("user_id") @db.Uuid
websiteId String @map("website_id") @db.Uuid
type String @map("type") @db.VarChar(200)
name String @map("name") @db.VarChar(200)
description String @map("description") @db.VarChar(500)
parameters String @map("parameters") @db.VarChar(6000)
createdAt DateTime? @default(now()) @map("created_at") @db.Timestamptz(6)
updatedAt DateTime? @updatedAt @map("updated_at") @db.Timestamptz(6)
user User @relation(fields: [userId], references: [id])
user User @relation(fields: [userId], references: [id])
website Website @relation(fields: [websiteId], references: [id])
@@index([userId])
@@map("user_report")
@@index([websiteId])
@@map("report")
}

2
pages/api/reports/funnel.ts
View File

@ -40,7 +40,7 @@ export default async (
startDate,
endDate,
urls,
windowMinutes: window,
windowMinutes: +window,
});
return ok(res, data);

16
pages/settings/reports/funnel.js Normal file
View File

@ -0,0 +1,16 @@
import AppLayout from 'components/layout/AppLayout';
import SettingsLayout from 'components/layout/SettingsLayout';
import FunnelPage from 'components/pages/reports/FunnelPage';
import useMessages from 'hooks/useMessages';
export default function DetailsPage() {
const { formatMessage, labels } = useMessages();
return (
<AppLayout title={`${formatMessage(labels.settings)} - ${formatMessage(labels.reports)}`}>
<SettingsLayout>
<FunnelPage />
</SettingsLayout>
</AppLayout>
);
}

9
pages/reports/funnel.js → pages/settings/reports/index.js
View File

@ -2,6 +2,7 @@ import { useRouter } from 'next/router';
import AppLayout from 'components/layout/AppLayout';
import FunnelPage from 'components/pages/reports/FunnelPage';
import useMessages from 'hooks/useMessages';
import SettingsLayout from 'components/layout/SettingsLayout';
export default function DetailsPage() {
// const { formatMessage, labels } = useMessages();
@ -15,8 +16,10 @@ export default function DetailsPage() {
// return <AppLayout title={formatMessage(labels.websites)}>{/* <FunnelPage /> */}</AppLayout>;
return (
<div>
<FunnelPage />
</div>
<AppLayout>
<SettingsLayout>
<FunnelPage />
</SettingsLayout>
</AppLayout>
);
}