m/umami
1
0
Fork 0
mirror of https://github.com/kremalicious/umami.git synced 2024-12-23 18:04:47 +01:00
Code Issues Packages Projects Releases Wiki Activity

Added timezone and default date range settings.

Browse Source
This commit is contained in:
Mike Cao 2020-09-19 10:35:05 -07:00
parent bcd765e9d3
commit 33ac026637
30 changed files with 186 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/common/LanguageButton.js
View File

@ -3,7 +3,6 @@ import Head from 'next/head';
import Menu from './Menu';
import Button from './Button';
import { menuOptions } from 'lib/lang';
import { setItem } from 'lib/web';
import useLocale from 'hooks/useLocale';
import useDocumentClick from 'hooks/useDocumentClick';
import Globe from 'assets/globe.svg';
@ -17,7 +16,6 @@ export default function LanguageButton({ menuPosition = 'bottom', menuAlign = 'l
function handleSelect(value) {
setLocale(value);
setItem('umami.locale', value);
setShowMenu(false);
}

2
components/common/RefreshButton.js
View File

@ -10,7 +10,7 @@ import { getDateRange } from '../../lib/date';
export default function RefreshButton({ websiteId }) {
const dispatch = useDispatch();
const dateRange = useDateRange(websiteId);
const [dateRange] = useDateRange(websiteId);
const [loading, setLoading] = useState(false);
const completed = useSelector(state => state.queries[`/api/website/${websiteId}/metrics`]);

9
components/metrics/EventsChart.js
View File

@ -1,9 +1,10 @@
import React, { useMemo } from 'react';
import tinycolor from 'tinycolor2';
import BarChart from './BarChart';
import { getTimezone, getDateArray, getDateLength } from 'lib/date';
import { getDateArray, getDateLength } from 'lib/date';
import useFetch from 'hooks/useFetch';
import useDateRange from 'hooks/useDateRange';
import useTimezone from 'hooks/useTimezone';
const COLORS = [
'#2680eb',
@ -17,15 +18,17 @@ const COLORS = [
];
export default function EventsChart({ websiteId, token }) {
const dateRange = useDateRange(websiteId);
const [dateRange] = useDateRange(websiteId);
const { startDate, endDate, unit, modified } = dateRange;
const [timezone] = useTimezone();
const { data } = useFetch(
`/api/website/${websiteId}/events`,
{
start_at: +startDate,
end_at: +endDate,
unit,
tz: getTimezone(),
tz: timezone,
token,
},
{ update: [modified] },

2
components/metrics/MetricsBar.js
View File

@ -9,7 +9,7 @@ import MetricCard from './MetricCard';
import styles from './MetricsBar.module.css';
export default function MetricsBar({ websiteId, token, className }) {
const dateRange = useDateRange(websiteId);
const [dateRange] = useDateRange(websiteId);
const { startDate, endDate, modified } = dateRange;
const { data } = useFetch(
`/api/website/${websiteId}/metrics`,

2
components/metrics/MetricsTable.js
View File

@ -29,7 +29,7 @@ export default function MetricsTable({
onDataLoad = () => {},
onExpand = () => {},
}) {
const dateRange = useDateRange(websiteId);
const [dateRange] = useDateRange(websiteId);
const { startDate, endDate, modified } = dateRange;
const { data } = useFetch(
`/api/website/${websiteId}/rankings`,

17
components/metrics/WebsiteChart.js
View File

@ -1,5 +1,4 @@
import React, { useMemo } from 'react';
import { useDispatch } from 'react-redux';
import classNames from 'classnames';
import PageviewsChart from './PageviewsChart';
import MetricsBar from './MetricsBar';
@ -8,8 +7,8 @@ import DateFilter from 'components/common/DateFilter';
import StickyHeader from 'components/helpers/StickyHeader';
import useFetch from 'hooks/useFetch';
import useDateRange from 'hooks/useDateRange';
import { getDateArray, getDateLength, getTimezone } from 'lib/date';
import { setDateRange } from 'redux/actions/websites';
import useTimezone from 'hooks/useTimezone';
import { getDateArray, getDateLength } from 'lib/date';
import styles from './WebsiteChart.module.css';
export default function WebsiteChart({
@ -20,9 +19,9 @@ export default function WebsiteChart({
showLink = false,
onDataLoad = () => {},
}) {
const dispatch = useDispatch();
const dateRange = useDateRange(websiteId);
const [dateRange, setDateRange] = useDateRange(websiteId);
const { startDate, endDate, unit, value, modified } = dateRange;
const [timezone] = useTimezone();
const { data } = useFetch(
`/api/website/${websiteId}/pageviews`,
@ -30,7 +29,7 @@ export default function WebsiteChart({
start_at: +startDate,
end_at: +endDate,
unit,
tz: getTimezone(),
tz: timezone,
token,
},
{ onDataLoad, update: [modified] },
@ -46,10 +45,6 @@ export default function WebsiteChart({
return [[], []];
}, [data]);
function handleDateChange(values) {
dispatch(setDateRange(websiteId, values));
}
return (
<>
<WebsiteHeader websiteId={websiteId} token={token} title={title} showLink={showLink} />
@ -67,7 +62,7 @@ export default function WebsiteChart({
value={value}
startDate={startDate}
endDate={endDate}
onChange={handleDateChange}
onChange={setDateRange}
/>
</div>
</StickyHeader>

26
components/settings/DateRangeSetting.js Normal file
View File

@ -0,0 +1,26 @@
import React from 'react';
import { FormattedMessage } from 'react-intl';
import DateFilter from 'components/common/DateFilter';
import Button from 'components/common/Button';
import useDateRange from 'hooks/useDateRange';
import { DEFAULT_DATE_RANGE } from 'lib/constants';
import { getDateRange } from 'lib/date';
import styles from './DateRangeSetting.module.css';
export default function DateRangeSetting() {
const [dateRange, setDateRange] = useDateRange();
const { startDate, endDate, value } = dateRange;
function handleReset() {
setDateRange(getDateRange(DEFAULT_DATE_RANGE));
}
return (
<>
<DateFilter value={value} startDate={startDate} endDate={endDate} onChange={setDateRange} />
<Button className={styles.button} size="small" onClick={handleReset}>
<FormattedMessage id="button.reset" defaultMessage="Reset" />
</Button>
</>
);
}

3
components/settings/DateRangeSetting.module.css Normal file
View File

@ -0,0 +1,3 @@
.button {
margin-left: 10px;
}

34
components/settings/ProfileSettings.js
View File

@ -1,40 +1,27 @@
import React, { useState } from 'react';
import { FormattedMessage } from 'react-intl';
import { useDispatch, useSelector } from 'react-redux';
import { useSelector } from 'react-redux';
import PageHeader from 'components/layout/PageHeader';
import Button from 'components/common/Button';
import Modal from 'components/common/Modal';
import Toast from 'components/common/Toast';
import ChangePasswordForm from 'components/forms/ChangePasswordForm';
import DateFilter from 'components/common/DateFilter';
import TimezoneSetting from 'components/settings/TimezoneSetting';
import Dots from 'assets/ellipsis-h.svg';
import { getTimezone } from 'lib/date';
import { setItem } from 'lib/web';
import useDateRange from 'hooks/useDateRange';
import { setDateRange } from 'redux/actions/websites';
import styles from './ProfileSettings.module.css';
import DateRangeSetting from './DateRangeSetting';
export default function ProfileSettings() {
const dispatch = useDispatch();
const user = useSelector(state => state.user);
const [changePassword, setChangePassword] = useState(false);
const [message, setMessage] = useState();
const { user_id } = user;
const timezone = getTimezone();
const dateRange = useDateRange(0);
const { startDate, endDate, value } = dateRange;
function handleSave() {
setChangePassword(false);
setMessage(<FormattedMessage id="message.save-success" defaultMessage="Saved successfully." />);
}
function handleDateChange(values) {
const { value } = values;
setItem(`umami.date-range`, value === 'custom' ? values : value);
dispatch(setDateRange(0, values));
}
return (
<>
<PageHeader>
@ -47,7 +34,7 @@ export default function ProfileSettings() {
</div>
</Button>
</PageHeader>
<dl>
<dl className={styles.list}>
<dt>
<FormattedMessage id="label.username" defaultMessage="Username" />
</dt>
@ -55,17 +42,14 @@ export default function ProfileSettings() {
<dt>
<FormattedMessage id="label.timezone" defaultMessage="Timezone" />
</dt>
<dd>{timezone}</dd>
<dd>
<TimezoneSetting />
</dd>
<dt>
<FormattedMessage id="label.default-date-range" defaultMessage="Default date range" />
</dt>
<dd className={styles.date}>
<DateFilter
value={value}
startDate={startDate}
endDate={endDate}
onChange={handleDateChange}
/>
<dd>
<DateRangeSetting />
</dd>
</dl>
{changePassword && (

2
components/settings/ProfileSettings.module.css
View File

@ -1,3 +1,3 @@
.date {
.list dd {
display: flex;
}

31
components/settings/TimezoneSetting.js Normal file
View File

@ -0,0 +1,31 @@
import React from 'react';
import { FormattedMessage } from 'react-intl';
import { listTimeZones } from 'timezone-support';
import DropDown from '../common/DropDown';
import Button from '../common/Button';
import useTimezone from 'hooks/useTimezone';
import { getTimezone } from 'lib/date';
import styles from './TimezoneSetting.module.css';
export default function TimezoneSetting() {
const [timezone, saveTimezone] = useTimezone();
const options = listTimeZones().map(n => ({ label: n, value: n }));
function handleReset() {
saveTimezone(getTimezone());
}
return (
<>
<DropDown
menuClassName={styles.menu}
value={timezone}
options={options}
onChange={saveTimezone}
/>
<Button className={styles.button} size="small" onClick={handleReset}>
<FormattedMessage id="button.reset" defaultMessage="Reset" />
</Button>
</>
);
}

8
components/settings/TimezoneSetting.module.css Normal file
View File

@ -0,0 +1,8 @@
.menu {
max-height: 300px;
overflow-y: auto;
}
.button {
margin-left: 10px;
}

49
hooks/useDateRange.js
View File

@ -1,24 +1,41 @@
import { useSelector } from 'react-redux';
import { useDispatch, useSelector } from 'react-redux';
import { parseISO } from 'date-fns';
import { getDateRange } from 'lib/date';
import { getItem } from 'lib/web';
import { getItem, setItem } from 'lib/web';
import { setDateRange } from '../redux/actions/websites';
import { DATE_RANGE_CONFIG, DEFAULT_DATE_RANGE } from 'lib/constants';
import useForceUpdate from './useForceUpdate';
export default function useDateRange(websiteId, defaultDateRange = '24hour') {
const globalDefault = getItem('umami.date-range');
export default function useDateRange(websiteId, defaultDateRange = DEFAULT_DATE_RANGE) {
const dispatch = useDispatch();
const dateRange = useSelector(state => state.websites[websiteId]?.dateRange);
const forceUpdate = useForceUpdate();
const globalDefault = getItem(DATE_RANGE_CONFIG);
let globalDateRange;
if (typeof globalDefault === 'string') {
globalDateRange = getDateRange(globalDefault);
} else if (typeof globalDefault === 'object') {
globalDateRange = {
...globalDefault,
startDate: parseISO(globalDefault.startDate),
endDate: parseISO(globalDefault.endDate),
};
if (globalDefault) {
if (typeof globalDefault === 'string') {
globalDateRange = getDateRange(globalDefault);
} else if (typeof globalDefault === 'object') {
globalDateRange = {
...globalDefault,
startDate: parseISO(globalDefault.startDate),
endDate: parseISO(globalDefault.endDate),
};
}
}
return useSelector(
state =>
state.websites[websiteId]?.dateRange || globalDateRange || getDateRange(defaultDateRange),
);
function saveDateRange(values) {
const { value } = values;
if (websiteId) {
dispatch(setDateRange(websiteId, values));
} else {
setItem(DATE_RANGE_CONFIG, value === 'custom' ? values : value);
forceUpdate();
}
}
return [dateRange || globalDateRange || getDateRange(defaultDateRange), saveDateRange];
}

9
hooks/useForceUpdate.js Normal file
View File

@ -0,0 +1,9 @@
import { useCallback, useState } from 'react';
export default function useForceUpdate() {
const [, update] = useState(Object.create(null));
return useCallback(() => {
update(Object.create(null));
}, [update]);
}

3
hooks/useLocale.js
View File

@ -1,11 +1,14 @@
import { useDispatch, useSelector } from 'react-redux';
import { updateApp } from 'redux/actions/app';
import { setItem } from 'lib/web';
import { LOCALE_CONFIG } from 'lib/constants';
export default function useLocale() {
const locale = useSelector(state => state.app.locale);
const dispatch = useDispatch();
function setLocale(value) {
setItem(LOCALE_CONFIG, value);
dispatch(updateApp({ locale: value }));
}

17
hooks/useTimezone.js Normal file
View File

@ -0,0 +1,17 @@
import { useState, useCallback } from 'react';
import { getTimezone } from 'lib/date';
import { getItem, setItem } from 'lib/web';
export default function useTimezone() {
const [timezone, setTimezone] = useState(getItem('umami.timezone') || getTimezone());
const saveTimezone = useCallback(
value => {
setItem('umami.timezone', value);
setTimezone(value);
},
[setTimezone],
);
return [timezone, saveTimezone];
}

1
lang/de-DE.json
View File

@ -11,6 +11,7 @@
"button.login": "Anmelden",
"button.more": "Mehr",
"button.refresh": "Aktualisieren",
"button.reset": "Reset",
"button.save": "Speichern",
"button.single-day": "Ein Tag",
"button.view-details": "Details anzeigen",

1
lang/en-US.json
View File

@ -11,6 +11,7 @@
"button.login": "Login",
"button.more": "More",
"button.refresh": "Refresh",
"button.reset": "Reset",
"button.save": "Save",
"button.single-day": "Single day",
"button.view-details": "View details",

1
lang/es-MX.json
View File

@ -11,6 +11,7 @@
"button.login": "Iniciar sesión",
"button.more": "Más",
"button.refresh": "Refresh",
"button.reset": "Reset",
"button.save": "Guardar",
"button.single-day": "Single day",
"button.view-details": "Ver detalles",

1
lang/fr-FR.json
View File

@ -11,6 +11,7 @@
"button.login": "Connexion",
"button.more": "Plus",
"button.refresh": "Refresh",
"button.reset": "Reset",
"button.save": "Sauvegarder",
"button.single-day": "Single day",
"button.view-details": "Voir les details",

1
lang/ja-JP.json
View File

@ -11,6 +11,7 @@
"button.login": "ログイン",
"button.more": "さらに表示",
"button.refresh": "Refresh",
"button.reset": "Reset",
"button.save": "保存",
"button.single-day": "Single day",
"button.view-details": "詳細表示",

1
lang/mn-MN.json
View File

@ -11,6 +11,7 @@
"button.login": "Нэвтрэх",
"button.more": "Цааш",
"button.refresh": "Refresh",
"button.reset": "Reset",
"button.save": "Хадгалах",
"button.single-day": "Single day",
"button.view-details": "Дэлгэрүүлж харах",

1
lang/nl-NL.json
View File

@ -11,6 +11,7 @@
"button.login": "Inloggen",
"button.more": "Toon meer",
"button.refresh": "Refresh",
"button.reset": "Reset",
"button.save": "Opslaan",
"button.single-day": "Single day",
"button.view-details": "Meer details",

1
lang/ru-RU.json
View File

@ -11,6 +11,7 @@
"button.login": "Войти",
"button.more": "Больше",
"button.refresh": "Refresh",
"button.reset": "Reset",
"button.save": "Сохранить",
"button.single-day": "Single day",
"button.view-details": "Посмотреть детали",

1
lang/tr-TR.json
View File

@ -11,6 +11,7 @@
"button.login": "Giriş Yap",
"button.more": "Detaylı göster",
"button.refresh": "Refresh",
"button.reset": "Reset",
"button.save": "Kaydet",
"button.single-day": "Single day",
"button.view-details": "Detayı incele",

1
lang/zh-CN.json
View File

@ -11,6 +11,7 @@
"button.login": "登录",
"button.more": "更多",
"button.refresh": "刷新",
"button.reset": "Reset",
"button.save": "保存",
"button.single-day": "单日",
"button.view-details": "查看更多",

5
lib/constants.js
View File

@ -1,4 +1,9 @@
export const AUTH_COOKIE_NAME = 'umami.auth';
export const LOCALE_CONFIG = 'umami.locale';
export const TIMEZONE_CONFIG = 'umami.timezone';
export const DATE_RANGE_CONFIG = 'umami.date-range';
export const DEFAULT_DATE_RANGE = '24hour';
export const POSTGRESQL = 'postgresql';
export const MYSQL = 'mysql';

3
package.json
View File

@ -1,6 +1,6 @@
{
"name": "umami",
"version": "0.41.0",
"version": "0.42.0",
"description": "A simple, fast, website analytics alternative to Google Analytics. ",
"author": "Mike Cao <mike@mikecao.com>",
"license": "MIT",
@ -83,6 +83,7 @@
"redux-thunk": "^2.3.0",
"request-ip": "^2.1.3",
"thenby": "^1.3.4",
"timezone-support": "^2.0.2",
"tinycolor2": "^1.4.1",
"unfetch": "^4.1.0",
"uuid": "^8.3.0"

3
redux/actions/app.js
View File

@ -1,9 +1,10 @@
import { createSlice } from '@reduxjs/toolkit';
import { getItem } from 'lib/web';
import { LOCALE_CONFIG } from 'lib/constants';
const app = createSlice({
name: 'app',
initialState: { locale: getItem('umami.locale') || 'en-US' },
initialState: { locale: getItem(LOCALE_CONFIG) || 'en-US' },
reducers: {
updateApp(state, action) {
state = action.payload;

12
yarn.lock
View File

@ -2699,6 +2699,11 @@ commander@2, commander@^2.20.0:
resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
commander@2.20.0:
version "2.20.0"
resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.0.tgz#d58bb2b5c1ee8f87b0d340027e9e94e222c5a422"
integrity sha512-7j2y+40w61zy6YC2iRNpUe/NwhNyoXrYpHMrSunaMG64nRnaf96zO/KMQR4OyN/UnE5KLyEBnKHd4aG3rskjpQ==
commander@^6.0.0, commander@^6.1.0:
version "6.1.0"
resolved "https://registry.yarnpkg.com/commander/-/commander-6.1.0.tgz#f8d722b78103141006b66f4c7ba1e97315ba75bc"
@ -8608,6 +8613,13 @@ timers-browserify@^2.0.4:
dependencies:
setimmediate "^1.0.4"
timezone-support@^2.0.2:
version "2.0.2"
resolved "https://registry.yarnpkg.com/timezone-support/-/timezone-support-2.0.2.tgz#801d6924478b1b60f09b90699ce1127a6044cbe7"
integrity sha512-J/1PyHCX76vOPuJzCyHMQMH2wTjXCJ30R5EXaS/QTi+xYsL0thS0pubDrHCWnfG4zU1jpPJtctnBBRCOpcJZeQ==
dependencies:
commander "2.20.0"
tiny-lru@7.0.6:
version "7.0.6"
resolved "https://registry.yarnpkg.com/tiny-lru/-/tiny-lru-7.0.6.tgz#b0c3cdede1e5882aa2d1ae21cb2ceccf2a331f24"