watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-19 03:55:37 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

Merge branch 'master' into f-nikin-fix-main-page-layout

Browse source
This commit is contained in:
nikin-devstark 2020-11-24 15:35:25 +03:00 • committed by GitHub
commit a2b78b2eaa
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
38 changed files with 642 additions and 390 deletions
Download patch file Download diff file Expand all files Collapse all files

4
components/common/WorldMap.js
View file

@ -8,10 +8,12 @@ import { THEME_COLORS } from 'lib/constants';
import styles from './WorldMap.module.css';
import useCountryNames from 'hooks/useCountryNames';
import useLocale from 'hooks/useLocale';
import { useRouter } from 'next/router';
const geoUrl = '/world-110m.json';
export default function WorldMap({ data, className }) {
const { basePath } = useRouter();
const [tooltip, setTooltip] = useState();
const [theme] = useTheme();
const colors = useMemo(
@ -57,7 +59,7 @@ export default function WorldMap({ data, className }) {
>
<ComposableMap projection="geoMercator">
<ZoomableGroup zoom={0.8} minZoom={0.7} center={[0, 40]}>
<Geographies geography={geoUrl}>
<Geographies geography={`${basePath}${geoUrl}`}>
{({ geographies }) => {
return geographies.map(geo => {
const code = geo.properties.ISO_A2;

7
components/forms/AccountEditForm.js
View file

@ -1,8 +1,6 @@
import React, { useState } from 'react';
import { FormattedMessage } from 'react-intl';
import { Formik, Form, Field } from 'formik';
import { useRouter } from 'next/router';
import { post } from 'lib/web';
import Button from 'components/common/Button';
import FormLayout, {
FormButtons,
@ -10,6 +8,7 @@ import FormLayout, {
FormMessage,
FormRow,
} from 'components/layout/FormLayout';
import usePost from 'hooks/usePost';
const initialValues = {
username: '',
@ -30,11 +29,11 @@ const validate = ({ user_id, username, password }) => {
};
export default function AccountEditForm({ values, onSave, onClose }) {
const { basePath } = useRouter();
const post = usePost();
const [message, setMessage] = useState();
const handleSubmit = async values => {
const { ok, data } = await post(`${basePath}/api/account`, values);
const { ok, data } = await post('/api/account', values);
if (ok) {
onSave();

7
components/forms/ChangePasswordForm.js
View file

@ -1,8 +1,6 @@
import React, { useState } from 'react';
import { FormattedMessage } from 'react-intl';
import { useRouter } from 'next/router';
import { Formik, Form, Field } from 'formik';
import { post } from 'lib/web';
import Button from 'components/common/Button';
import FormLayout, {
FormButtons,
@ -10,6 +8,7 @@ import FormLayout, {
FormMessage,
FormRow,
} from 'components/layout/FormLayout';
import usePost from 'hooks/usePost';
const initialValues = {
current_password: '',
@ -38,11 +37,11 @@ const validate = ({ current_password, new_password, confirm_password }) => {
};
export default function ChangePasswordForm({ values, onSave, onClose }) {
const { basePath } = useRouter();
const post = usePost();
const [message, setMessage] = useState();
const handleSubmit = async values => {
const { ok, data } = await post(`${basePath}/api/account/password`, values);
const { ok, data } = await post('/api/account/password', values);
if (ok) {
onSave();

7
components/forms/DeleteForm.js
View file

@ -1,8 +1,6 @@
import React, { useState } from 'react';
import { FormattedMessage } from 'react-intl';
import { useRouter } from 'next/router';
import { Formik, Form, Field } from 'formik';
import { del } from 'lib/web';
import Button from 'components/common/Button';
import FormLayout, {
FormButtons,
@ -10,6 +8,7 @@ import FormLayout, {
FormMessage,
FormRow,
} from 'components/layout/FormLayout';
import useDelete from 'hooks/useDelete';
const CONFIRMATION_WORD = 'DELETE';
@ -28,11 +27,11 @@ const validate = ({ confirmation }) => {
};
export default function DeleteForm({ values, onSave, onClose }) {
const { basePath } = useRouter();
const del = useDelete();
const [message, setMessage] = useState();
const handleSubmit = async ({ type, id }) => {
const { ok, data } = await del(`${basePath}/api/${type}/${id}`);
const { ok, data } = await del(`/api/${type}/${id}`);
if (ok) {
onSave();

11
components/forms/LoginForm.js
View file

@ -2,7 +2,6 @@ import React, { useState } from 'react';
import { FormattedMessage } from 'react-intl';
import { Formik, Form, Field } from 'formik';
import { useRouter } from 'next/router';
import { post } from 'lib/web';
import Button from 'components/common/Button';
import FormLayout, {
FormButtons,
@ -13,6 +12,7 @@ import FormLayout, {
import Icon from 'components/common/Icon';
import Logo from 'assets/logo.svg';
import styles from './LoginForm.module.css';
import usePost from 'hooks/usePost';
const validate = ({ username, password }) => {
const errors = {};
@ -28,11 +28,12 @@ const validate = ({ username, password }) => {
};
export default function LoginForm() {
const post = usePost();
const router = useRouter();
const [message, setMessage] = useState();
const handleSubmit = async ({ username, password }) => {
const { ok, status, data } = await post(`${router.basePath}/api/auth/login`, {
const { ok, status, data } = await post('/api/auth/login', {
username,
password,
});
@ -65,8 +66,10 @@ export default function LoginForm() {
>
{() => (
<Form>
<Icon icon={<Logo />} size="xlarge" className={styles.icon} />
<h1 className="center">umami</h1>
<div className={styles.header}>
<Icon icon={<Logo />} size="xlarge" className={styles.icon} />
<h1 className="center">umami</h1>
</div>
<FormRow>
<label htmlFor="username">
<FormattedMessage id="label.username" defaultMessage="Username" />

8
components/forms/LoginForm.module.css
View file

@ -13,3 +13,11 @@
justify-content: center;
margin: 0 auto;
}
.header {
margin-bottom: 30px;
}
.header h1 {
margin: 12px 0;
}

7
components/forms/WebsiteEditForm.js
View file

@ -1,7 +1,6 @@
import React, { useState } from 'react';
import { FormattedMessage } from 'react-intl';
import { Formik, Form, Field } from 'formik';
import { post } from 'lib/web';
import Button from 'components/common/Button';
import FormLayout, {
FormButtons,
@ -11,7 +10,7 @@ import FormLayout, {
} from 'components/layout/FormLayout';
import Checkbox from 'components/common/Checkbox';
import { DOMAIN_REGEX } from 'lib/constants';
import { useRouter } from 'next/router';
import usePost from 'hooks/usePost';
const initialValues = {
name: '',
@ -35,11 +34,11 @@ const validate = ({ name, domain }) => {
};
export default function WebsiteEditForm({ values, onSave, onClose }) {
const { basePath } = useRouter();
const post = usePost();
const [message, setMessage] = useState();
const handleSubmit = async values => {
const { ok, data } = await post(`${basePath}/api/website`, values);
const { ok, data } = await post('/api/website', values);
if (ok) {
onSave();

2
components/metrics/MetricsBar.js
View file

@ -60,7 +60,7 @@ export default function MetricsBar({ websiteId, className }) {
/>
<MetricCard
label={<FormattedMessage id="metrics.bounce-rate" defaultMessage="Bounce rate" />}
value={pageviews ? (bounces / pageviews) * 100 : 0}
value={uniques ? (bounces / uniques) * 100 : 0}
format={n => Number(n).toFixed(0) + '%'}
/>
<MetricCard

10
components/metrics/RealtimeLog.js
View file

@ -29,7 +29,7 @@ const TYPE_ICONS = {
[TYPE_EVENT]: <Bolt />,
};
export default function RealtimeLog({ data, websites }) {
export default function RealtimeLog({ data, websites, websiteId }) {
const intl = useIntl();
const [locale] = useLocale();
const countryNames = useCountryNames(locale);
@ -88,7 +88,7 @@ export default function RealtimeLog({ data, websites }) {
}
function getWebsite({ website_id }) {
return websites.find(n => n.website_id === website_id)?.name;
return websites.find(n => n.website_id === website_id);
}
function getDetail({
@ -111,7 +111,7 @@ export default function RealtimeLog({ data, websites }) {
);
}
if (view_id) {
const domain = getWebsite({ website_id });
const domain = getWebsite({ website_id })?.domain;
return (
<a
className={styles.link}
@ -161,7 +161,9 @@ export default function RealtimeLog({ data, websites }) {
<Icon className={styles.icon} icon={getIcon(row)} />
{getDetail(row)}
</div>
<div className={styles.website}>{getWebsite(row)}</div>
{!websiteId && websites.length > 1 && (
<div className={styles.website}>{getWebsite(row)?.domain}</div>
)}
</div>
);
};

12
components/metrics/RealtimeViews.js
View file

@ -28,6 +28,15 @@ export default function RealtimeViews({ websiteId, data, websites }) {
},
];
const renderLink = ({ x }) => {
const domain = x.startsWith('/') ? getDomain(websiteId) : '';
return (
<a href={`//${domain}${x}`} target="_blank" rel="noreferrer noopener">
{x}
</a>
);
};
const [referrers, pages] = useMemo(() => {
if (pageviews) {
const referrers = percentFilter(
@ -55,7 +64,7 @@ export default function RealtimeViews({ websiteId, data, websites }) {
pageviews
.reduce((arr, { url, website_id }) => {
if (url?.startsWith('/')) {
if (!websiteId) {
if (!websiteId && websites.length > 1) {
url = `${getDomain(website_id)}${url}`;
}
const row = arr.find(({ x }) => x === url);
@ -91,6 +100,7 @@ export default function RealtimeViews({ websiteId, data, websites }) {
<DataTable
title={<FormattedMessage id="metrics.pages" defaultMessage="Pages" />}
metric={<FormattedMessage id="metrics.views" defaultMessage="Views" />}
renderLabel={renderLink}
data={pages}
height={400}
/>

2
components/pages/RealtimeDashboard.js
View file

@ -135,7 +135,7 @@ export default function RealtimeDashboard() {
<RealtimeViews websiteId={websiteId} data={realtimeData} websites={websites} />
</GridColumn>
<GridColumn xs={12} lg={8}>
<RealtimeLog data={realtimeData} websites={websites} />
<RealtimeLog websiteId={websiteId} data={realtimeData} websites={websites} />
</GridColumn>
</GridRow>
<GridRow>

9
components/pages/WebsiteDetails.js
View file

@ -43,19 +43,12 @@ export default function WebsiteDetails({ websiteId }) {
const [eventsData, setEventsData] = useState();
const {
resolve,
router,
query: { view },
} = usePageQuery();
const BackButton = () => (
<div key="back-button" className={styles.backButton}>
<Link
key="back-button"
href={router.pathname}
as={resolve({ view: undefined })}
icon={<Arrow />}
size="small"
>
<Link key="back-button" href={resolve({ view: undefined })} icon={<Arrow />} size="small">
<FormattedMessage id="label.back" defaultMessage="Back" />
</Link>
</div>