umami/components/pages/console/TestConsole.js

135 lines
4.0 KiB
JavaScript
Raw Normal View History

import WebsiteSelect from 'components/input/WebsiteSelect';
2022-01-15 04:10:46 +01:00
import Page from 'components/layout/Page';
import PageHeader from 'components/layout/PageHeader';
import EventsChart from 'components/metrics/EventsChart';
import WebsiteChart from 'components/metrics/WebsiteChart';
import useApi from 'hooks/useApi';
2023-03-30 19:45:58 +02:00
import Head from 'next/head';
import Link from 'next/link';
import { useRouter } from 'next/router';
import Script from 'next/script';
import { Button, Column, Row } from 'react-basics';
import styles from './TestConsole.module.css';
2020-09-27 09:51:29 +02:00
export default function TestConsole() {
const { get, useQuery } = useApi();
2023-02-15 11:27:18 +01:00
const { data, isLoading, error } = useQuery(['websites:me'], () => get('/me/websites'));
const router = useRouter();
const {
basePath,
query: { id },
} = router;
2020-09-27 09:51:29 +02:00
2023-01-31 06:44:07 +01:00
function handleChange(value) {
router.push(`/console/${value}`);
2020-09-27 09:51:29 +02:00
}
function handleClick() {
2023-03-26 13:15:08 +02:00
window.umami.track({ url: '/page-view', referrer: 'https://www.google.com' });
window.umami.track('track-event-no-data');
window.umami.track('track-event-with-data', {
data: {
test: 'test-data',
2023-03-26 13:15:08 +02:00
time: new Date(),
number: 1,
2023-03-26 13:15:08 +02:00
time2: new Date().toISOString(),
nested: {
test: 'test-data',
2023-03-26 13:15:08 +02:00
number: 1,
object: {
test: 'test-data',
},
},
2023-03-26 13:15:08 +02:00
array: [1, 2, 3],
},
});
2020-09-27 09:51:29 +02:00
}
2023-01-31 06:44:07 +01:00
if (!data) {
return null;
}
2023-04-04 09:27:25 +02:00
const [websiteId] = id || [];
2023-01-31 06:44:07 +01:00
const website = data.find(({ id }) => websiteId === id);
2020-09-27 09:51:29 +02:00
return (
2023-01-31 06:44:07 +01:00
<Page loading={isLoading} error={error}>
2023-03-30 19:45:58 +02:00
<Head>
2023-04-04 09:27:25 +02:00
<title>{website ? `${website.name} | Umami Console` : 'Umami Console'}</title>
2023-03-30 19:45:58 +02:00
</Head>
2023-01-31 06:44:07 +01:00
<PageHeader title="Test console">
2023-02-15 11:27:18 +01:00
<WebsiteSelect websiteId={website?.id} onSelect={handleChange} />
2020-09-27 09:51:29 +02:00
</PageHeader>
{website && (
2020-09-27 09:51:29 +02:00
<>
2023-03-26 13:15:08 +02:00
<Script
async
data-website-id={website.id}
src={`${basePath}/script.js`}
data-cache="true"
/>
<Row className={styles.test}>
<Column xs="4">
2023-01-31 06:44:07 +01:00
<div className={styles.header}>Page links</div>
<div>
2023-04-04 09:27:25 +02:00
<Link href={`/console/${websiteId}/page/1/?q=abc`}>page one</Link>
</div>
<div>
2023-04-04 09:27:25 +02:00
<Link href={`/console/${websiteId}/page/2/?q=123 `}>page two</Link>
2020-09-27 09:51:29 +02:00
</div>
<div>
2023-03-26 13:15:08 +02:00
<a href="https://www.google.com" data-umami-event="external-link-direct">
external link (direct)
</a>
2022-01-15 04:10:46 +01:00
</div>
<div>
<a
href="https://www.google.com"
2023-03-26 13:15:08 +02:00
data-umami-event="external-link-tab"
target="_blank"
rel="noreferrer"
>
external link (tab)
</a>
2020-09-27 09:51:29 +02:00
</div>
</Column>
<Column xs="4">
2023-03-26 13:15:08 +02:00
<div className={styles.header}>Click events</div>
<Button id="send-event-button" data-umami-event="button-click" variant="action">
Send event
</Button>
2023-03-26 13:15:08 +02:00
<p />
<Button
id="send-event-data-button"
data-umami-event="button-click"
data-umami-event-name="bob"
data-umami-event-id="123"
variant="action"
>
Send event with data
</Button>
</Column>
<Column xs="4">
2023-01-31 06:44:07 +01:00
<div className={styles.header}>Javascript events</div>
<Button id="manual-button" variant="action" onClick={handleClick}>
Run script
</Button>
</Column>
</Row>
<Row>
<Column>
2020-10-21 15:44:43 +02:00
<WebsiteChart
2022-11-01 07:42:37 +01:00
websiteId={website.id}
2023-03-31 14:55:28 +02:00
name={website.name}
2020-10-21 15:44:43 +02:00
domain={website.domain}
showLink
/>
2022-11-01 07:42:37 +01:00
<EventsChart websiteId={website.id} />
</Column>
</Row>
2020-09-27 09:51:29 +02:00
</>
)}
</Page>
);
}