Added timezone and default date range settings.

components/common/LanguageButton.js

@@ -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);
   }
 

components/common/RefreshButton.js

@@ -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`]);
 

components/metrics/EventsChart.js

@@ -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] },

components/metrics/MetricsBar.js

@@ -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`,

components/metrics/MetricsTable.js

@@ -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`,

components/metrics/WebsiteChart.js

@@ -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>

components/settings/DateRangeSetting.js

@@ -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>
+    </>
+  );
+}

components/settings/DateRangeSetting.module.css

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

components/settings/ProfileSettings.js

@@ -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 && (

components/settings/ProfileSettings.module.css

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

components/settings/TimezoneSetting.js

@@ -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>
+    </>
+  );
+}

components/settings/TimezoneSetting.module.css

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

hooks/useDateRange.js

@@ -1,12 +1,20 @@
-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 (globalDefault) {
     if (typeof globalDefault === 'string') {
       globalDateRange = getDateRange(globalDefault);
     } else if (typeof globalDefault === 'object') {
@@ -16,9 +24,18 @@ export default function useDateRange(websiteId, defaultDateRange = '24hour') {
         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];
 }

hooks/useForceUpdate.js

@@ -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]);
+}

hooks/useLocale.js

@@ -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 }));
   }
 

hooks/useTimezone.js

@@ -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];
+}

lang/de-DE.json

@@ -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",

lang/en-US.json

@@ -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",

lang/es-MX.json

@@ -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",

lang/fr-FR.json

@@ -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",

lang/ja-JP.json

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

lang/mn-MN.json

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

lang/nl-NL.json

@@ -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",

lang/ru-RU.json

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

lang/tr-TR.json

@@ -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",

lang/zh-CN.json

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

lib/constants.js

@@ -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';

package.json

@@ -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"

redux/actions/app.js

@@ -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;

yarn.lock

@@ -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"