mirror of
https://github.com/umami-software/umami.git
synced 2025-12-08 05:12:36 +01:00
Moved files around. Updated test page.
This commit is contained in:
Mike Cao
parent
890b209527
commit
6bb34cd3a5
19 changed files with 136 additions and 69 deletions
46
components/pages/Settings.js
Normal file
46
components/pages/Settings.js
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
import React, { useState } from 'react';
|
||||
import { useRouter } from 'next/router';
|
||||
import Page from 'components/layout/Page';
|
||||
import MenuLayout from 'components/layout/MenuLayout';
|
||||
import WebsiteSettings from '../settings/WebsiteSettings';
|
||||
import AccountSettings from '../settings/AccountSettings';
|
||||
import ProfileSettings from '../settings/ProfileSettings';
|
||||
import { useSelector } from 'react-redux';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
|
||||
const WEBSITES = '/settings';
|
||||
const ACCOUNTS = '/settings/accounts';
|
||||
const PROFILE = '/settings/profile';
|
||||
|
||||
export default function Settings() {
|
||||
const user = useSelector(state => state.user);
|
||||
const [option, setOption] = useState(WEBSITES);
|
||||
const router = useRouter();
|
||||
const { pathname } = router;
|
||||
|
||||
const menuOptions = [
|
||||
{
|
||||
label: <FormattedMessage id="label.websites" defaultMessage="Websites" />,
|
||||
value: WEBSITES,
|
||||
},
|
||||
{
|
||||
label: <FormattedMessage id="label.accounts" defaultMessage="Accounts" />,
|
||||
value: ACCOUNTS,
|
||||
hidden: !user.is_admin,
|
||||
},
|
||||
{
|
||||
label: <FormattedMessage id="label.profile" defaultMessage="Profile" />,
|
||||
value: PROFILE,
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<Page>
|
||||
<MenuLayout menu={menuOptions} selectedOption={option} onMenuSelect={setOption}>
|
||||
{pathname === WEBSITES && <WebsiteSettings />}
|
||||
{pathname === ACCOUNTS && <AccountSettings />}
|
||||
{pathname === PROFILE && <ProfileSettings />}
|
||||
</MenuLayout>
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
92
components/pages/Test.js
Normal file
92
components/pages/Test.js
Normal 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
5
components/pages/Test.module.css
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
.test {
|
||||
border: 1px solid var(--gray200);
|
||||
border-radius: 5px;
|
||||
padding: 0 20px 20px 20px;
|
||||
}
|
||||
178
components/pages/WebsiteDetails.js
Normal file
178
components/pages/WebsiteDetails.js
Normal file
|
|
@ -0,0 +1,178 @@
|
|||
import React, { useState } from 'react';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
import classNames from 'classnames';
|
||||
import WebsiteChart from 'components/metrics/WebsiteChart';
|
||||
import WorldMap from 'components/common/WorldMap';
|
||||
import Page from 'components/layout/Page';
|
||||
import MenuLayout from 'components/layout/MenuLayout';
|
||||
import Link from 'components/common/Link';
|
||||
import Loading from 'components/common/Loading';
|
||||
import Arrow from 'assets/arrow-right.svg';
|
||||
import styles from './WebsiteDetails.module.css';
|
||||
import PagesTable from '../metrics/PagesTable';
|
||||
import ReferrersTable from '../metrics/ReferrersTable';
|
||||
import BrowsersTable from '../metrics/BrowsersTable';
|
||||
import OSTable from '../metrics/OSTable';
|
||||
import DevicesTable from '../metrics/DevicesTable';
|
||||
import CountriesTable from '../metrics/CountriesTable';
|
||||
import EventsTable from '../metrics/EventsTable';
|
||||
import EventsChart from '../metrics/EventsChart';
|
||||
import useFetch from 'hooks/useFetch';
|
||||
import usePageQuery from 'hooks/usePageQuery';
|
||||
|
||||
const views = {
|
||||
url: PagesTable,
|
||||
referrer: ReferrersTable,
|
||||
browser: BrowsersTable,
|
||||
os: OSTable,
|
||||
device: DevicesTable,
|
||||
country: CountriesTable,
|
||||
event: EventsTable,
|
||||
};
|
||||
|
||||
export default function WebsiteDetails({ websiteId, token }) {
|
||||
const { data } = useFetch(`/api/website/${websiteId}`, { token });
|
||||
const [chartLoaded, setChartLoaded] = useState(false);
|
||||
const [countryData, setCountryData] = useState();
|
||||
const [eventsData, setEventsData] = useState();
|
||||
const {
|
||||
resolve,
|
||||
router,
|
||||
query: { view },
|
||||
} = usePageQuery();
|
||||
|
||||
const BackButton = () => (
|
||||
<Link
|
||||
key="back-button"
|
||||
className={styles.backButton}
|
||||
href={router.pathname}
|
||||
as={resolve({ view: undefined })}
|
||||
icon={<Arrow />}
|
||||
size="small"
|
||||
>
|
||||
<FormattedMessage id="button.back" defaultMessage="Back" />
|
||||
</Link>
|
||||
);
|
||||
|
||||
const menuOptions = [
|
||||
{
|
||||
render: BackButton,
|
||||
},
|
||||
{
|
||||
label: <FormattedMessage id="metrics.pages" defaultMessage="Pages" />,
|
||||
value: resolve({ view: 'url' }),
|
||||
},
|
||||
{
|
||||
label: <FormattedMessage id="metrics.referrers" defaultMessage="Referrers" />,
|
||||
value: resolve({ view: 'referrer' }),
|
||||
},
|
||||
{
|
||||
label: <FormattedMessage id="metrics.browsers" defaultMessage="Browsers" />,
|
||||
value: resolve({ view: 'browser' }),
|
||||
},
|
||||
{
|
||||
label: <FormattedMessage id="metrics.operating-systems" defaultMessage="Operating system" />,
|
||||
value: resolve({ view: 'os' }),
|
||||
},
|
||||
{
|
||||
label: <FormattedMessage id="metrics.devices" defaultMessage="Devices" />,
|
||||
value: resolve({ view: 'device' }),
|
||||
},
|
||||
{
|
||||
label: <FormattedMessage id="metrics.countries" defaultMessage="Countries" />,
|
||||
value: resolve({ view: 'country' }),
|
||||
},
|
||||
{
|
||||
label: <FormattedMessage id="metrics.events" defaultMessage="Events" />,
|
||||
value: resolve({ view: 'event' }),
|
||||
},
|
||||
];
|
||||
|
||||
const tableProps = {
|
||||
websiteId,
|
||||
token,
|
||||
websiteDomain: data?.domain,
|
||||
limit: 10,
|
||||
};
|
||||
|
||||
const DetailsComponent = views[view];
|
||||
|
||||
function handleDataLoad() {
|
||||
if (!chartLoaded) {
|
||||
setTimeout(() => setChartLoaded(true), 300);
|
||||
}
|
||||
}
|
||||
|
||||
if (!data) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<Page>
|
||||
<div className="row">
|
||||
<div className={classNames(styles.chart, 'col')}>
|
||||
<WebsiteChart
|
||||
websiteId={websiteId}
|
||||
token={token}
|
||||
title={data.name}
|
||||
onDataLoad={handleDataLoad}
|
||||
showLink={false}
|
||||
stickyHeader
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{!chartLoaded && <Loading />}
|
||||
{chartLoaded && !view && (
|
||||
<>
|
||||
<div className={classNames(styles.row, 'row')}>
|
||||
<div className="col-md-12 col-lg-6">
|
||||
<PagesTable {...tableProps} />
|
||||
</div>
|
||||
<div className="col-md-12 col-lg-6">
|
||||
<ReferrersTable {...tableProps} />
|
||||
</div>
|
||||
</div>
|
||||
<div className={classNames(styles.row, 'row')}>
|
||||
<div className="col-md-12 col-lg-4">
|
||||
<BrowsersTable {...tableProps} />
|
||||
</div>
|
||||
<div className="col-md-12 col-lg-4">
|
||||
<OSTable {...tableProps} />
|
||||
</div>
|
||||
<div className="col-md-12 col-lg-4">
|
||||
<DevicesTable {...tableProps} />
|
||||
</div>
|
||||
</div>
|
||||
<div className={classNames(styles.row, 'row')}>
|
||||
<div className="col-12 col-md-12 col-lg-8">
|
||||
<WorldMap data={countryData} />
|
||||
</div>
|
||||
<div className="col-12 col-md-12 col-lg-4">
|
||||
<CountriesTable {...tableProps} onDataLoad={setCountryData} />
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className={classNames(styles.row, 'row', { [styles.hidden]: !eventsData?.length > 0 })}
|
||||
>
|
||||
<div className="col-12 col-md-12 col-lg-4">
|
||||
<EventsTable {...tableProps} onDataLoad={setEventsData} />
|
||||
</div>
|
||||
<div className="col-12 col-md-12 col-lg-8 pt-5 pb-5">
|
||||
<EventsChart websiteId={websiteId} token={token} />
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
{view && (
|
||||
<MenuLayout
|
||||
className={styles.view}
|
||||
menuClassName={styles.menu}
|
||||
contentClassName={styles.content}
|
||||
menu={menuOptions}
|
||||
>
|
||||
<DetailsComponent {...tableProps} limit={false} showFilters={true} />
|
||||
</MenuLayout>
|
||||
)}
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
59
components/pages/WebsiteDetails.module.css
Normal file
59
components/pages/WebsiteDetails.module.css
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
.chart {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.view {
|
||||
border-top: 1px solid var(--gray300);
|
||||
}
|
||||
|
||||
.menu {
|
||||
font-size: var(--font-size-small);
|
||||
}
|
||||
|
||||
.content {
|
||||
min-height: 600px;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.backButton {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.backButton svg {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.row {
|
||||
border-top: 1px solid var(--gray300);
|
||||
min-height: 430px;
|
||||
}
|
||||
|
||||
.row > [class*='col-'] {
|
||||
border-left: 1px solid var(--gray300);
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.row > [class*='col-']:first-child {
|
||||
border-left: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.row > [class*='col-']:last-child {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 992px) {
|
||||
.row {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.row > [class*='col-'] {
|
||||
border-top: 1px solid var(--gray300);
|
||||
border-left: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
43
components/pages/WebsiteList.js
Normal file
43
components/pages/WebsiteList.js
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
import React from 'react';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
import { useRouter } from 'next/router';
|
||||
import WebsiteChart from 'components/metrics/WebsiteChart';
|
||||
import Page from 'components/layout/Page';
|
||||
import Button from 'components/common/Button';
|
||||
import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
|
||||
import useFetch from 'hooks/useFetch';
|
||||
import Arrow from 'assets/arrow-right.svg';
|
||||
import styles from './WebsiteList.module.css';
|
||||
|
||||
export default function WebsiteList({ userId }) {
|
||||
const router = useRouter();
|
||||
const { data } = useFetch('/api/websites', { user_id: userId });
|
||||
|
||||
if (!data) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<Page>
|
||||
{data.map(({ website_id, name }) => (
|
||||
<div key={website_id} className={styles.website}>
|
||||
<WebsiteChart websiteId={website_id} title={name} showLink />
|
||||
</div>
|
||||
))}
|
||||
{data.length === 0 && (
|
||||
<EmptyPlaceholder
|
||||
msg={
|
||||
<FormattedMessage
|
||||
id="message.no-websites-configured"
|
||||
defaultMessage="You don't have any websites configured."
|
||||
/>
|
||||
}
|
||||
>
|
||||
<Button icon={<Arrow />} size="medium" onClick={() => router.push('/settings')}>
|
||||
<FormattedMessage id="message.go-to-settings" defaultMessage="Go to settings" />
|
||||
</Button>
|
||||
</EmptyPlaceholder>
|
||||
)}
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
11
components/pages/WebsiteList.module.css
Normal file
11
components/pages/WebsiteList.module.css
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
.website {
|
||||
padding-bottom: 30px;
|
||||
border-bottom: 1px solid var(--gray300);
|
||||
margin-bottom: 30px;
|
||||
align-self: stretch;
|
||||
}
|
||||
|
||||
.website:last-child {
|
||||
border-bottom: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue