ambiser
/
umami
9
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Moved files around. Updated test page.

pull/234/head
Mike Cao 2020-09-27 00:51:29 -07:00
parent 890b209527
commit 6bb34cd3a5
19 changed files with 136 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/common/DropDown.js
View File

@ -37,7 +37,7 @@ export default function DropDown({
return ( return (
<div ref={ref} className={classNames(styles.dropdown, className)} onClick={handleShowMenu}> <div ref={ref} className={classNames(styles.dropdown, className)} onClick={handleShowMenu}>
<div className={styles.value}> <div className={styles.value}>
{options.find(e => e.value === value)?.label || value} <div className={styles.text}>{options.find(e => e.value === value)?.label || value}</div>
<Icon icon={<Chevron />} className={styles.icon} size="small" /> <Icon icon={<Chevron />} className={styles.icon} size="small" />
</div> </div>
{showMenu && ( {showMenu && (

4
components/common/Dropdown.module.css
View File

@ -19,6 +19,10 @@
min-width: 160px; min-width: 160px;
} }
.text {
flex: 1;
}
.icon { .icon {
padding-left: 20px; padding-left: 20px;
} }

5
components/layout/Page.js
View File

@ -1,6 +1,7 @@
import React from 'react'; import React from 'react';
import classNames from 'classnames';
import styles from './Page.module.css'; import styles from './Page.module.css';
export default function Page({ children }) { export default function Page({ className, children }) {
return <div className={styles.page}>{children}</div>; return <div className={classNames(styles.page, className)}>{children}</div>;
} }

1
components/layout/PageHeader.module.css
View File

@ -4,4 +4,5 @@
align-items: center; align-items: center;
align-content: center; align-content: center;
min-height: 80px; min-height: 80px;
align-self: stretch;
} }

4
components/metrics/WebsiteChart.js
View File

@ -59,7 +59,7 @@ export default function WebsiteChart({
} }
return ( return (
<> <div className={styles.container}>
<WebsiteHeader websiteId={websiteId} token={token} title={title} showLink={showLink} /> <WebsiteHeader websiteId={websiteId} token={token} title={title} showLink={showLink} />
<div className={classNames(styles.header, 'row')}> <div className={classNames(styles.header, 'row')}>
<StickyHeader <StickyHeader
@ -92,7 +92,7 @@ export default function WebsiteChart({
/> />
</div> </div>
</div> </div>
</> </div>
); );
} }

1
components/metrics/WebsiteChart.module.css
View File

@ -1,6 +1,7 @@
.container { .container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-self: stretch;
} }
.title { .title {

6
components/settings/Settings.js → components/pages/Settings.js
View File

@ -2,9 +2,9 @@ import React, { useState } from 'react';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import Page from 'components/layout/Page'; import Page from 'components/layout/Page';
import MenuLayout from 'components/layout/MenuLayout'; import MenuLayout from 'components/layout/MenuLayout';
import WebsiteSettings from './WebsiteSettings'; import WebsiteSettings from '../settings/WebsiteSettings';
import AccountSettings from './AccountSettings'; import AccountSettings from '../settings/AccountSettings';
import ProfileSettings from './ProfileSettings'; import ProfileSettings from '../settings/ProfileSettings';
import { useSelector } from 'react-redux'; import { useSelector } from 'react-redux';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';

92
components/pages/Test.js Normal file
View File

@ -0,0 +1,92 @@
import React, { useState } from 'react';
import classNames from 'classnames';
import Head from 'next/head';
import Link from 'next/link';
import Page from '../layout/Page';
import PageHeader from '../layout/PageHeader';
import useFetch from '../../hooks/useFetch';
import DropDown from '../common/DropDown';
import styles from './Test.module.css';
import WebsiteChart from '../metrics/WebsiteChart';
import EventsChart from '../metrics/EventsChart';
import Button from '../common/Button';
import EmptyPlaceholder from '../common/EmptyPlaceholder';
export default function Test() {
const [website, setWebsite] = useState();
const { data } = useFetch('/api/websites');
if (!data) {
return null;
}
const options = data.map(({ name, website_id }) => ({ label: name, value: website_id }));
const selectedValue = options.find(({ value }) => value === website?.website_id)?.value;
function handleSelect(value) {
setWebsite(data.find(({ website_id }) => website_id === value));
}
function handleClick() {
window.umami('event (default)');
window.umami.trackView('/page-view', 'https://www.google.com');
window.umami.trackEvent('event (custom)', 'custom-type');
}
return (
<Page>
<Head>
{typeof window !== 'undefined' && website && (
<script async defer data-website-id={website.website_uuid} src="/umami.js" />
)}
</Head>
<PageHeader>
<div>Test Console</div>
<DropDown
value={selectedValue || 'Select website'}
options={options}
onChange={handleSelect}
/>
</PageHeader>
{!selectedValue && <EmptyPlaceholder msg="I hope you know what you're doing here" />}
{selectedValue && (
<>
<div className={classNames(styles.test, 'row')}>
<div className="col-4">
<PageHeader>Page links</PageHeader>
<div>
<Link href={`?page=1`}>
<a>page one</a>
</Link>
</div>
<div>
<Link href={`?page=2`}>
<a>page two</a>
</Link>
</div>
</div>
<div className="col-4">
<PageHeader>CSS events</PageHeader>
<Button id="primary-button" className="umami--click--primary-button" variant="action">
Send event
</Button>
</div>
<div className="col-4">
<PageHeader>Javascript events</PageHeader>
<Button id="manual-button" variant="action" onClick={handleClick}>
Run script
</Button>
</div>
</div>
<div className="row">
<div className="col-12">
<WebsiteChart websiteId={website.website_id} title={website.name} showLink />
<PageHeader>Events</PageHeader>
<EventsChart websiteId={website.website_id} />
</div>
</div>
</>
)}
</Page>
);
}

5
components/pages/Test.module.css Normal file
View File

@ -0,0 +1,5 @@
.test {
border: 1px solid var(--gray200);
border-radius: 5px;
padding: 0 20px 20px 20px;
}

16
components/WebsiteDetails.js → components/pages/WebsiteDetails.js
View File

@ -9,14 +9,14 @@ import Link from 'components/common/Link';
import Loading from 'components/common/Loading'; import Loading from 'components/common/Loading';
import Arrow from 'assets/arrow-right.svg'; import Arrow from 'assets/arrow-right.svg';
import styles from './WebsiteDetails.module.css'; import styles from './WebsiteDetails.module.css';
import PagesTable from './metrics/PagesTable'; import PagesTable from '../metrics/PagesTable';
import ReferrersTable from './metrics/ReferrersTable'; import ReferrersTable from '../metrics/ReferrersTable';
import BrowsersTable from './metrics/BrowsersTable'; import BrowsersTable from '../metrics/BrowsersTable';
import OSTable from './metrics/OSTable'; import OSTable from '../metrics/OSTable';
import DevicesTable from './metrics/DevicesTable'; import DevicesTable from '../metrics/DevicesTable';
import CountriesTable from './metrics/CountriesTable'; import CountriesTable from '../metrics/CountriesTable';
import EventsTable from './metrics/EventsTable'; import EventsTable from '../metrics/EventsTable';
import EventsChart from './metrics/EventsChart'; import EventsChart from '../metrics/EventsChart';
import useFetch from 'hooks/useFetch'; import useFetch from 'hooks/useFetch';
import usePageQuery from 'hooks/usePageQuery'; import usePageQuery from 'hooks/usePageQuery';

0
components/WebsiteDetails.module.css → components/pages/WebsiteDetails.module.css
View File

0
components/WebsiteList.js → components/pages/WebsiteList.js
View File

1
components/WebsiteList.module.css → components/pages/WebsiteList.module.css
View File

@ -2,6 +2,7 @@
padding-bottom: 30px; padding-bottom: 30px;
border-bottom: 1px solid var(--gray300); border-bottom: 1px solid var(--gray300);
margin-bottom: 30px; margin-bottom: 30px;
align-self: stretch;
} }
.website:last-child { .website:last-child {

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "umami", "name": "umami",
"version": "0.58.0", "version": "0.59.0",
"description": "A simple, fast, website analytics alternative to Google Analytics. ", "description": "A simple, fast, website analytics alternative to Google Analytics. ",
"author": "Mike Cao <mike@mikecao.com>", "author": "Mike Cao <mike@mikecao.com>",
"license": "MIT", "license": "MIT",

2
pages/dashboard/[[...id]].js
View File

@ -1,7 +1,7 @@
import React from 'react'; import React from 'react';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import Layout from 'components/layout/Layout'; import Layout from 'components/layout/Layout';
import WebsiteList from 'components/WebsiteList'; import WebsiteList from 'components/pages/WebsiteList';
import useRequireLogin from 'hooks/useRequireLogin'; import useRequireLogin from 'hooks/useRequireLogin';
export default function DashboardPage() { export default function DashboardPage() {

2
pages/settings/index.js
View File

@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import Layout from 'components/layout/Layout'; import Layout from 'components/layout/Layout';
import Settings from 'components/settings/Settings'; import Settings from 'components/pages/Settings';
import useRequireLogin from 'hooks/useRequireLogin'; import useRequireLogin from 'hooks/useRequireLogin';
export default function SettingsPage() { export default function SettingsPage() {

2
pages/share/[...id].js
View File

@ -1,7 +1,7 @@
import React from 'react'; import React from 'react';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import Layout from 'components/layout/Layout'; import Layout from 'components/layout/Layout';
import WebsiteDetails from 'components/WebsiteDetails'; import WebsiteDetails from 'components/pages/WebsiteDetails';
import useFetch from 'hooks/useFetch'; import useFetch from 'hooks/useFetch';
export default function SharePage() { export default function SharePage() {

54
pages/test.js
View File

@ -1,56 +1,18 @@
import Head from 'next/head'; import React from 'react';
import Link from 'next/link';
import { useRouter } from 'next/router';
import Layout from 'components/layout/Layout'; import Layout from 'components/layout/Layout';
import Test from 'components/pages/Test';
import useRequireLogin from 'hooks/useRequireLogin';
export default function Test() { export default function TestPage() {
const router = useRouter(); const { loading } = useRequireLogin();
const { id } = router.query;
if (!id) { if (loading) {
return <h1>No id query specified.</h1>; return null;
}
function handleClick() {
window.umami('Custom event');
window.umami.pageView('/fake', 'https://www.google.com');
window.umami.pageEvent('pageEvent', 'custom-type');
} }
return ( return (
<>
<Head>
{typeof window !== 'undefined' && (
<script async defer data-website-id={id} src="/umami.js" />
)}
</Head>
<Layout> <Layout>
<p> <Test />
Here you can test if your umami installation works. Open the network tab in your browser
developer console and watch for requests to the url <b>collect</b>. The links below should
trigger page views. Clicking on the button should trigger an event.
</p>
<h2>Page links</h2>
<Link href={`?id=${id}&q=1`}>
<a>Page One</a>
</Link>
<br />
<Link href={`?id=${id}&q=2`}>
<a>Page Two</a>
</Link>
<h2>Events</h2>
<button
id="primary-button"
className="otherClass umami--click--primary-button align-self-start"
type="button"
>
Button
</button>
<h2>Manual trigger</h2>
<button id="manual-button" type="button" onClick={handleClick}>
Button
</button>
</Layout> </Layout>
</>
); );
} }

2
pages/website/[...id].js
View File

@ -1,7 +1,7 @@
import React from 'react'; import React from 'react';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import Layout from 'components/layout/Layout'; import Layout from 'components/layout/Layout';
import WebsiteDetails from 'components/WebsiteDetails'; import WebsiteDetails from 'components/pages/WebsiteDetails';
import useRequireLogin from 'hooks/useRequireLogin'; import useRequireLogin from 'hooks/useRequireLogin';
export default function DetailsPage() { export default function DetailsPage() {