Merge remote-tracking branch 'upstream/master'

.github/stale.yml

@@ -0,0 +1,19 @@
+# Number of days of inactivity before an issue becomes stale
+daysUntilStale: 60
+# Number of days of inactivity before a stale issue is closed
+daysUntilClose: 7
+# Issues with these labels will never be considered stale
+exemptLabels:
+  - pinned
+  - security
+  - enhancement
+  - bug
+# Label to use when marking an issue as stale
+staleLabel: wontfix
+# Comment to post when marking an issue as stale. Set to `false` to disable
+markComment: >
+  This issue has been automatically marked as stale because it has not had
+  recent activity. It will be closed if no further activity occurs. Thank you
+  for your contributions.
+# Comment to post when closing a stale issue. Set to `false` to disable
+closeComment: false

assets/external-link.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M497.6,0,334.4.17A14.4,14.4,0,0,0,320,14.57V47.88a14.4,14.4,0,0,0,14.69,14.4l73.63-2.72,2.06,2.06L131.52,340.49a12,12,0,0,0,0,17l23,23a12,12,0,0,0,17,0L450.38,101.62l2.06,2.06-2.72,73.63A14.4,14.4,0,0,0,464.12,192h33.31a14.4,14.4,0,0,0,14.4-14.4L512,14.4A14.4,14.4,0,0,0,497.6,0ZM432,288H416a16,16,0,0,0-16,16V458a6,6,0,0,1-6,6H54a6,6,0,0,1-6-6V118a6,6,0,0,1,6-6H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V304A16,16,0,0,0,432,288Z"/></svg>

assets/logo.svg

@@ -1 +1,2 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 428 389.11"><defs><style>.cls-1{fill:#fff;stroke:#000;stroke-miterlimit:10;stroke-width:20px;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_4" data-name="Layer 4"><circle class="cls-1" cx="214.15" cy="181" r="171"/><path d="M413,134.11H15.29a15,15,0,0,0-15,15v15.3C.12,168,0,171.52,0,175.11c0,118.19,95.81,214,214,214,116.4,0,211.1-92.94,213.93-208.67,0-.44.07-.88.07-1.33v-30A15,15,0,0,0,413,134.11Z"/></g></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 428 389.11">
+    <circle cx="214.15" cy="181" r="171" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="20"/><path d="M413,134.11H15.29a15,15,0,0,0-15,15v15.3C.12,168,0,171.52,0,175.11c0,118.19,95.81,214,214,214,116.4,0,211.1-92.94,213.93-208.67,0-.44.07-.88.07-1.33v-30A15,15,0,0,0,413,134.11Z"/></svg>

assets/moon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1399.98 1400"><path d="M562.44,837.55C335.89,611,288.08,273.54,418.71,0A734.31,734.31,0,0,0,215.54,143.73c-287.39,287.39-287.39,753.33,0,1040.72s753.33,287.4,1040.74,0A733.8,733.8,0,0,0,1400,981.29C1126.45,1111.92,789,1064.09,562.44,837.55Z"/></svg>

assets/sun.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1400 1400"><path d="M367.43,422.13a54.44,54.44,0,0,1-38.66-16L205,282.35A54.69,54.69,0,0,1,282.37,205L406.11,328.79a54.68,54.68,0,0,1-38.68,93.34Z"/><path d="M1156.3,1211a54.51,54.51,0,0,1-38.67-16L993.89,1071.21a54.68,54.68,0,1,1,77.34-77.33L1195,1117.65A54.7,54.7,0,0,1,1156.3,1211Z"/><path d="M243.7,1211A54.7,54.7,0,0,1,205,1117.65L328.74,993.89a54.69,54.69,0,0,1,77.36,77.32L282.37,1195A54.51,54.51,0,0,1,243.7,1211Z"/><path d="M1032.57,422.13a54.68,54.68,0,0,1-38.68-93.34L1117.61,205A54.69,54.69,0,0,1,1195,282.35L1071.23,406.11A54.44,54.44,0,0,1,1032.57,422.13Z"/><path d="M229.69,754.69h-175a54.69,54.69,0,0,1,0-109.38h175a54.69,54.69,0,0,1,0,109.38Z"/><path d="M1345.31,754.69h-175a54.69,54.69,0,0,1,0-109.38h175a54.69,54.69,0,0,1,0,109.38Z"/><path d="M700,1400a54.68,54.68,0,0,1-54.69-54.69v-175a54.69,54.69,0,0,1,109.38,0v175A54.68,54.68,0,0,1,700,1400Z"/><path d="M700,284.38a54.7,54.7,0,0,1-54.69-54.69v-175a54.69,54.69,0,0,1,109.38,0v175A54.7,54.7,0,0,1,700,284.38Z"/><circle cx="700" cy="700" r="306.25"/></svg>

components/WebsiteDetails.js

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
+import { useRouter } from 'next/router';
 import classNames from 'classnames';
 import WebsiteChart from 'components/metrics/WebsiteChart';
 import WorldMap from 'components/common/WorldMap';
@@ -19,12 +20,29 @@ import EventsChart from './metrics/EventsChart';
 import useFetch from 'hooks/useFetch';
 import Loading from 'components/common/Loading';
 
-export default function WebsiteDetails({ websiteId }) {
+const views = {
-  const { data } = useFetch(`/api/website/${websiteId}`);
+  url: PagesTable,
+  referrer: ReferrersTable,
+  browser: BrowsersTable,
+  os: OSTable,
+  device: DevicesTable,
+  country: CountriesTable,
+  event: EventsTable,
+};
+
+export default function WebsiteDetails({ websiteId, token }) {
+  const router = useRouter();
+  const { data } = useFetch(`/api/website/${websiteId}`, { token });
   const [chartLoaded, setChartLoaded] = useState(false);
   const [countryData, setCountryData] = useState();
   const [eventsData, setEventsData] = useState();
-  const [expand, setExpand] = useState();
+  const {
+    query: { id, view },
+    basePath,
+    asPath,
+  } = router;
+
+  const path = `${basePath}/${asPath.split('/')[1]}/${id.join('/')}`;
 
   const BackButton = () => (
     <Button
@@ -32,7 +50,7 @@ export default function WebsiteDetails({ websiteId }) {
       className={styles.backButton}
       icon={<Arrow />}
       size="xsmall"
-      onClick={() => setExpand(null)}
+      onClick={() => router.push(path)}
     >
       <div>
         <FormattedMessage id="button.back" defaultMessage="Back" />
@@ -46,53 +64,43 @@ export default function WebsiteDetails({ websiteId }) {
     },
     {
       label: <FormattedMessage id="metrics.pages" defaultMessage="Pages" />,
-      value: 'url',
+      value: `${path}?view=url`,
-      component: PagesTable,
     },
     {
       label: <FormattedMessage id="metrics.referrers" defaultMessage="Referrers" />,
-      value: 'referrer',
+      value: `${path}?view=referrer`,
-      component: ReferrersTable,
     },
     {
       label: <FormattedMessage id="metrics.browsers" defaultMessage="Browsers" />,
-      value: 'browser',
+      value: `${path}?view=browser`,
-      component: BrowsersTable,
     },
     {
       label: <FormattedMessage id="metrics.operating-systems" defaultMessage="Operating system" />,
-      value: 'os',
+      value: `${path}?view=os`,
-      component: OSTable,
     },
     {
       label: <FormattedMessage id="metrics.devices" defaultMessage="Devices" />,
-      value: 'device',
+      value: `${path}?view=device`,
-      component: DevicesTable,
     },
     {
       label: <FormattedMessage id="metrics.countries" defaultMessage="Countries" />,
-      value: 'country',
+      value: `${path}?view=country`,
-      component: CountriesTable,
     },
     {
       label: <FormattedMessage id="metrics.events" defaultMessage="Events" />,
-      value: 'event',
+      value: `${path}?view=event`,
-      component: EventsTable,
     },
   ];
 
   const tableProps = {
     websiteId,
+    token,
     websiteDomain: data?.domain,
     limit: 10,
     onExpand: handleExpand,
   };
 
-  const DetailsComponent = expand?.component;
+  const DetailsComponent = views[view];
-
-  function getSelectedMenuOption(value) {
-    return menuOptions.find(e => e.value === value);
-  }
 
   function handleDataLoad() {
     if (!chartLoaded) {
@@ -101,11 +109,7 @@ export default function WebsiteDetails({ websiteId }) {
   }
 
   function handleExpand(value) {
-    setExpand(getSelectedMenuOption(value));
+    router.push(`${path}?view=${value}`);
-  }
-
-  function handleMenuSelect(value) {
-    setExpand(getSelectedMenuOption(value));
   }
 
   if (!data) {
@@ -118,6 +122,7 @@ export default function WebsiteDetails({ websiteId }) {
         <div className={classNames(styles.chart, 'col')}>
           <WebsiteChart
             websiteId={websiteId}
+            token={token}
             title={data.name}
             onDataLoad={handleDataLoad}
             showLink={false}
@@ -126,7 +131,7 @@ export default function WebsiteDetails({ websiteId }) {
         </div>
       </div>
       {!chartLoaded && <Loading />}
-      {chartLoaded && !expand && (
+      {chartLoaded && !view && (
         <>
           <div className={classNames(styles.row, 'row')}>
             <div className="col-md-12 col-lg-6">
@@ -162,19 +167,17 @@ export default function WebsiteDetails({ websiteId }) {
               <EventsTable {...tableProps} onDataLoad={setEventsData} />
             </div>
             <div className="col-12 col-md-12 col-lg-8 pt-5 pb-5">
-              <EventsChart websiteId={websiteId} />
+              <EventsChart websiteId={websiteId} token={token} />
             </div>
           </div>
         </>
       )}
-      {expand && (
+      {view && (
         <MenuLayout
-          className={styles.expand}
+          className={styles.view}
           menuClassName={styles.menu}
-          optionClassName={styles.option}
+          contentClassName={styles.content}
           menu={menuOptions}
-          selectedOption={expand.value}
-          onMenuSelect={handleMenuSelect}
         >
           <DetailsComponent {...tableProps} limit={false} />
         </MenuLayout>

components/WebsiteDetails.module.css

@@ -2,7 +2,7 @@
   margin-bottom: 30px;
 }
 
-.expand {
+.view {
   border-top: 1px solid var(--gray300);
 }
 
@@ -10,8 +10,9 @@
   font-size: var(--font-size-small);
 }
 
-.menu .option {
+.content {
-  font-size: var(--font-size-small);
+  min-height: 600px;
+  padding: 20px 0;
 }
 
 .backButton {
@@ -30,7 +31,7 @@
 
 .row > [class*='col-'] {
   border-left: 1px solid var(--gray300);
-  padding: 0 20px;
+  padding: 20px;
 }
 
 .row > [class*='col-']:first-child {

components/WebsiteList.js

@@ -11,7 +11,7 @@ import styles from './WebsiteList.module.css';
 
 export default function WebsiteList({ userId }) {
   const router = useRouter();
-  const { data } = useFetch('/api/websites', { userId });
+  const { data } = useFetch('/api/websites', { user_id: userId });
 
   if (!data) {
     return null;
@@ -28,17 +28,14 @@ export default function WebsiteList({ userId }) {
         <EmptyPlaceholder
           msg={
             <FormattedMessage
-              id="placeholder.message.no-websites-configured"
+              id="message.no-websites-configured"
               defaultMessage="You don't have any websites configured."
             />
           }
         >
           <Button icon={<Arrow />} size="medium" onClick={() => router.push('/settings')}>
             <div>
-              <FormattedMessage
+              <FormattedMessage id="message.go-to-settings" defaultMessage="Go to settings" />
-                id="placeholder.message.go-to-settings"
-                defaultMessage="Go to settings"
-              />
             </div>
           </Button>
         </EmptyPlaceholder>

components/common/Button.module.css

@@ -3,6 +3,7 @@
   justify-content: center;
   align-items: center;
   font-size: var(--font-size-normal);
+  color: var(--gray900);
   background: var(--gray100);
   padding: 8px 16px;
   border-radius: 4px;
@@ -18,7 +19,7 @@
 }
 
 .button:active {
-  color: initial;
+  color: var(--gray900);
 }
 
 .large {
@@ -56,11 +57,11 @@
 }
 
 .light {
-  background: var(--gray50);
+  background: transparent;
 }
 
 .light:hover {
-  background: var(--gray75);
+  background: inherit;
 }
 
 .button:disabled {

components/common/ButtonGroup.module.css

@@ -7,6 +7,7 @@
 
 .group .button {
   border-radius: 0;
+  color: var(--gray800);
   background: var(--gray50);
   border-left: 1px solid var(--gray500);
   padding: 4px 8px;
@@ -24,6 +25,7 @@
   margin: 0;
 }
 
-.selected {
+.group .button.selected {
+  color: var(--gray900);
   font-weight: 600;
 }

components/common/Calendar.js

@@ -70,34 +70,36 @@ export default function Calendar({ date, minDate, maxDate, onChange }) {
           <Icon className={styles.icon} icon={selectYear ? <Cross /> : <Chevron />} size="small" />
         </div>
       </div>
-      {!selectMonth && !selectYear && (
+      <div className={styles.body}>
-        <DaySelector
+        {!selectMonth && !selectYear && (
-          date={date}
+          <DaySelector
-          minDate={minDate}
+            date={date}
-          maxDate={maxDate}
+            minDate={minDate}
-          locale={locale}
+            maxDate={maxDate}
-          onSelect={handleChange}
+            locale={locale}
-        />
+            onSelect={handleChange}
-      )}
+          />
-      {selectMonth && (
+        )}
-        <MonthSelector
+        {selectMonth && (
-          date={date}
+          <MonthSelector
-          minDate={minDate}
+            date={date}
-          maxDate={maxDate}
+            minDate={minDate}
-          locale={locale}
+            maxDate={maxDate}
-          onSelect={handleChange}
+            locale={locale}
-          onClose={toggleMonthSelect}
+            onSelect={handleChange}
-        />
+            onClose={toggleMonthSelect}
-      )}
+          />
-      {selectYear && (
+        )}
-        <YearSelector
+        {selectYear && (
-          date={date}
+          <YearSelector
-          minDate={minDate}
+            date={date}
-          maxDate={maxDate}
+            minDate={minDate}
-          onSelect={handleChange}
+            maxDate={maxDate}
-          onClose={toggleYearSelect}
+            onSelect={handleChange}
-        />
+            onClose={toggleYearSelect}
-      )}
+          />
+        )}
+      </div>
     </div>
   );
 }
@@ -105,7 +107,7 @@ export default function Calendar({ date, minDate, maxDate, onChange }) {
 const DaySelector = ({ date, minDate, maxDate, locale, onSelect }) => {
   const startWeek = startOfWeek(date);
   const startMonth = startOfMonth(date);
-  const startDay = subDays(startMonth, startMonth.getDay() + 1);
+  const startDay = subDays(startMonth, startMonth.getDay());
   const month = date.getMonth();
   const year = date.getFullYear();
 
@@ -220,42 +222,46 @@ const YearSelector = ({ date, minDate, maxDate, onSelect }) => {
 
   return (
     <div className={styles.pager}>
-      <Button
+      <div className={styles.left}>
-        icon={<Chevron />}
+        <Button
-        size="small"
+          icon={<Chevron />}
-        className={styles.left}
+          size="small"
-        onClick={handlePrevClick}
+          onClick={handlePrevClick}
-        disabled={years[0] <= minYear}
+          disabled={years[0] <= minYear}
-        variant="light"
+          variant="light"
-      />
+        />
-      <table>
+      </div>
-        <tbody>
+      <div className={styles.middle}>
-          {chunk(years, 5).map((row, i) => (
+        <table>
-            <tr key={i}>
+          <tbody>
-              {row.map((n, j) => (
+            {chunk(years, 5).map((row, i) => (
-                <td
+              <tr key={i}>
-                  key={j}
+                {row.map((n, j) => (
-                  className={classNames({
+                  <td
-                    [styles.selected]: n === year,
+                    key={j}
-                    [styles.disabled]: n < minYear || n > maxYear,
+                    className={classNames({
-                  })}
+                      [styles.selected]: n === year,
-                  onClick={() => (n < minYear || n > maxYear ? null : handleSelect(n))}
+                      [styles.disabled]: n < minYear || n > maxYear,
-                >
+                    })}
-                  {n}
+                    onClick={() => (n < minYear || n > maxYear ? null : handleSelect(n))}
-                </td>
+                  >
-              ))}
+                    {n}
-            </tr>
+                  </td>
-          ))}
+                ))}
-        </tbody>
+              </tr>
-      </table>
+            ))}
-      <Button
+          </tbody>
-        icon={<Chevron />}
+        </table>
-        size="small"
+      </div>
-        className={styles.right}
+      <div className={styles.right}>
-        onClick={handleNextClick}
+        <Button
-        disabled={years[years.length - 1] > maxYear}
+          icon={<Chevron />}
-        variant="light"
+          size="small"
-      />
+          onClick={handleNextClick}
+          disabled={years[years.length - 1] > maxYear}
+          variant="light"
+        />
+      </div>
     </div>
   );
 };

components/common/Calendar.module.css

@@ -3,11 +3,12 @@
   flex-direction: column;
   font-size: var(--font-size-small);
   flex: 1;
-  min-height: 285px;
+  min-height: 306px;
 }
 
 .calendar table {
-  flex: 1;
+  width: 100%;
+  border-spacing: 5px;
 }
 
 .calendar td {
@@ -16,12 +17,14 @@
   text-align: center;
   vertical-align: center;
   height: 40px;
-  min-width: 40px;
+  width: 40px;
   border-radius: 5px;
+  border: 1px solid transparent;
 }
 
 .calendar td:hover {
-  background: var(--gray100);
+  border: 1px solid var(--gray300);
+  background: var(--gray75);
 }
 
 .calendar td.faded {
@@ -45,6 +48,7 @@
 .calendar td.disabled:hover {
   cursor: default;
   background: var(--gray75);
+  border-color: transparent;
 }
 
 .calendar td.faded.disabled {
@@ -60,18 +64,34 @@
   font-size: var(--font-size-normal);
 }
 
+.body {
+  display: flex;
+}
+
 .selector {
   cursor: pointer;
 }
 
 .pager {
   display: flex;
+  flex: 1;
 }
 
 .pager button {
   align-self: center;
 }
 
+.middle {
+  flex: 1;
+}
+
+.left,
+.right {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
 .left svg {
   transform: rotate(90deg);
 }
@@ -83,3 +103,9 @@
 .icon {
   margin-left: 10px;
 }
+
+@media only screen and (max-width: 992px) {
+  .calendar table {
+    max-width: calc(100vw - 30px);
+  }
+}

components/common/DateFilter.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
-import { endOfYear } from 'date-fns';
+import { endOfYear, isSameDay } from 'date-fns';
 import Modal from './Modal';
 import DropDown from './DropDown';
 import DatePickerForm from 'components/forms/DatePickerForm';
@@ -112,7 +112,8 @@ const CustomRange = ({ startDate, endDate, onClick }) => {
   return (
     <>
       <Icon icon={<Calendar />} className="mr-2" onClick={handleClick} />
-      {`${dateFormat(startDate, 'd LLL y', locale)} — ${dateFormat(endDate, 'd LLL y', locale)}`}
+      {dateFormat(startDate, 'd LLL y', locale)}
+      {!isSameDay(startDate, endDate) && ` — ${dateFormat(endDate, 'd LLL y', locale)}`}
     </>
   );
 };

components/common/DropDown.js

@@ -15,6 +15,7 @@ export default function DropDown({
 }) {
   const [showMenu, setShowMenu] = useState(false);
   const ref = useRef();
+  const selectedOption = options.find(e => e.value === value);
 
   function handleShowMenu() {
     setShowMenu(state => !state);
@@ -40,7 +41,13 @@ export default function DropDown({
         <Icon icon={<Chevron />} className={styles.icon} size="small" />
       </div>
       {showMenu && (
-        <Menu className={menuClassName} options={options} onSelect={handleSelect} float="bottom" />
+        <Menu
+          className={menuClassName}
+          options={options}
+          selectedOption={selectedOption}
+          onSelect={handleSelect}
+          float="bottom"
+        />
       )}
     </div>
   );

components/common/Dropdown.module.css

@@ -20,5 +20,5 @@
 }
 
 .icon {
-  padding-left: 10px;
+  padding-left: 20px;
 }

components/common/LanguageButton.js

@@ -1,65 +0,0 @@
-import React, { useState, useRef } from 'react';
-import Head from 'next/head';
-import Globe from 'assets/globe.svg';
-import useDocumentClick from 'hooks/useDocumentClick';
-import Menu from './Menu';
-import Button from './Button';
-import { menuOptions } from 'lib/lang';
-import styles from './LanguageButton.module.css';
-import useLocale from '../../hooks/useLocale';
-
-export default function LanguageButton({ menuPosition = 'bottom', menuAlign = 'left' }) {
-  const [showMenu, setShowMenu] = useState(false);
-  const [locale, setLocale] = useLocale();
-  const ref = useRef();
-  const selectedLocale = menuOptions.find(e => e.value === locale)?.display;
-
-  function handleSelect(value) {
-    setLocale(value);
-    window.localStorage.setItem('locale', value);
-    setShowMenu(false);
-  }
-
-  function toggleMenu() {
-    setShowMenu(state => !state);
-  }
-
-  useDocumentClick(e => {
-    if (!ref.current.contains(e.target)) {
-      setShowMenu(false);
-    }
-  });
-
-  return (
-    <>
-      <Head>
-        {locale === 'zh-CN' && (
-          <link
-            href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap"
-            rel="stylesheet"
-          />
-        )}
-        {locale === 'ja-JP' && (
-          <link
-            href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap"
-            rel="stylesheet"
-          />
-        )}
-      </Head>
-      <div ref={ref} className={styles.container}>
-        <Button icon={<Globe />} onClick={toggleMenu} size="small">
-          <div className={locale}>{selectedLocale}</div>
-        </Button>
-        {showMenu && (
-          <Menu
-            className={styles.menu}
-            options={menuOptions}
-            onSelect={handleSelect}
-            float={menuPosition}
-            align={menuAlign}
-          />
-        )}
-      </div>
-    </>
-  );
-}

components/common/LanguageButton.module.css

@@ -1,9 +0,0 @@
-.container {
-  display: flex;
-  position: relative;
-  cursor: pointer;
-}
-
-.menu {
-  z-index: 100;
-}

components/common/Link.module.css

@@ -1,23 +1,23 @@
-.link,
+a.link,
-.link:active,
+a.link:active,
-.link:visited {
+a.link:visited {
   position: relative;
-  color: #2c2c2c;
+  color: var(--gray900);
   text-decoration: none;
 }
 
-.link:before {
+a.link:before {
   content: '';
   position: absolute;
   bottom: -2px;
   width: 0;
   height: 2px;
-  background: #2680eb;
+  background: var(--primary400);
   opacity: 0.5;
   transition: width 100ms;
 }
 
-.link:hover:before {
+a.link:hover:before {
   width: 100%;
   transition: width 100ms;
 }

components/common/Menu.js

@@ -33,7 +33,8 @@ export default function Menu({
             <div
               key={value}
               className={classNames(styles.option, optionClassName, customClassName, {
-                [selectedClassName]: selectedOption === value,
+                [selectedClassName]: selectedOption === option,
+                [styles.selected]: selectedOption === option,
                 [styles.divider]: divider,
               })}
               onClick={e => onSelect(value, e)}

components/common/Menu.module.css

@@ -8,14 +8,14 @@
 .option {
   font-size: var(--font-size-small);
   font-weight: normal;
-  background: #fff;
+  background: var(--gray50);
   padding: 4px 16px;
   cursor: pointer;
   white-space: nowrap;
 }
 
 .option:hover {
-  background: #f5f5f5;
+  background: var(--gray100);
 }
 
 .float {
@@ -44,3 +44,7 @@
 .divider {
   border-top: 1px solid var(--gray300);
 }
+
+.selected {
+  font-weight: 600;
+}

components/common/MenuButton.js

@@ -0,0 +1,58 @@
+import React, { useState, useRef } from 'react';
+import classNames from 'classnames';
+import Menu from 'components/common/Menu';
+import Button from 'components/common/Button';
+import useDocumentClick from 'hooks/useDocumentClick';
+import styles from './MenuButton.module.css';
+
+export default function MenuButton({
+  icon,
+  value,
+  options,
+  menuPosition = 'bottom',
+  menuAlign = 'right',
+  onSelect,
+  renderValue,
+}) {
+  const [showMenu, setShowMenu] = useState(false);
+  const ref = useRef();
+  const selectedOption = options.find(e => e.value === value);
+
+  function handleSelect(value) {
+    onSelect(value);
+    setShowMenu(false);
+  }
+
+  function toggleMenu() {
+    setShowMenu(state => !state);
+  }
+
+  useDocumentClick(e => {
+    if (!ref.current.contains(e.target)) {
+      setShowMenu(false);
+    }
+  });
+
+  return (
+    <div className={styles.container} ref={ref}>
+      <Button
+        icon={icon}
+        className={classNames(styles.button, { [styles.open]: showMenu })}
+        onClick={toggleMenu}
+        variant="light"
+      >
+        <div className={styles.text}>{renderValue ? renderValue(selectedOption) : value}</div>
+      </Button>
+      {showMenu && (
+        <Menu
+          className={styles.menu}
+          options={options}
+          selectedOption={selectedOption}
+          onSelect={handleSelect}
+          float={menuPosition}
+          align={menuAlign}
+        />
+      )}
+    </div>
+  );
+}

components/common/MenuButton.module.css

@@ -0,0 +1,24 @@
+.container {
+  display: flex;
+  position: relative;
+  cursor: pointer;
+}
+
+.button {
+  border: 1px solid transparent;
+  border-radius: 4px;
+}
+
+.menu {
+  z-index: 100;
+}
+
+.text {
+  font-size: var(--font-size-small);
+}
+
+.open,
+.open:hover {
+  background: var(--gray50);
+  border: 1px solid var(--gray500);
+}

components/common/Modal.module.css

@@ -16,8 +16,8 @@
   right: 0;
   bottom: 0;
   margin: auto;
-  background: var(--gray900);
+  background: #000;
-  opacity: 0.1;
+  opacity: 0.5;
 }
 
 .content {

components/common/NavMenu.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { useRouter } from 'next/router';
+import classNames from 'classnames';
+import styles from './NavMenu.module.css';
+
+export default function NavMenu({ options = [], className, onSelect = () => {} }) {
+  const router = useRouter();
+
+  return (
+    <div className={classNames(styles.menu, className)}>
+      {options
+        .filter(({ hidden }) => !hidden)
+        .map(option => {
+          const { label, value, className: customClassName, render } = option;
+
+          return render ? (
+            render(option)
+          ) : (
+            <div
+              key={value}
+              className={classNames(styles.option, customClassName, {
+                [styles.selected]: router.asPath === value,
+              })}
+              onClick={e => onSelect(value, e)}
+            >
+              {label}
+            </div>
+          );
+        })}
+    </div>
+  );
+}

components/common/NavMenu.module.css

@@ -0,0 +1,22 @@
+.menu {
+  color: var(--gray800);
+  border: 1px solid var(--gray500);
+  border-radius: 4px;
+  overflow: hidden;
+  z-index: 2;
+}
+
+.option {
+  padding: 8px 16px;
+  cursor: pointer;
+  border-radius: 4px;
+}
+
+.option:hover {
+  background: var(--gray75);
+}
+
+.selected {
+  color: var(--gray900);
+  font-weight: 600;
+}

components/common/RefreshButton.js

@@ -1,15 +1,16 @@
 import React, { useState, useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
+import { FormattedMessage } from 'react-intl';
 import { setDateRange } from 'redux/actions/websites';
 import Button from './Button';
 import Refresh from 'assets/redo.svg';
 import Dots from 'assets/ellipsis-h.svg';
-import { useDateRange } from 'hooks/useDateRange';
+import useDateRange from 'hooks/useDateRange';
 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`]);
 
@@ -24,5 +25,13 @@ export default function RefreshButton({ websiteId }) {
     setLoading(false);
   }, [completed]);
 
-  return <Button icon={loading ? <Dots /> : <Refresh />} size="small" onClick={handleClick} />;
+  return (
+    <Button
+      icon={loading ? <Dots /> : <Refresh />}
+      tooltip={<FormattedMessage id="button.refresh" defaultMessage="Refresh" />}
+      tooltipId="button-refresh"
+      size="small"
+      onClick={handleClick}
+    />
+  );
 }

components/common/Toast.module.css

@@ -9,7 +9,7 @@
   justify-content: space-between;
   align-items: center;
   padding: 8px 16px;
-  color: var(--gray50);
+  color: var(--msgColor);
   background: var(--green400);
   margin: auto;
   z-index: 2;

components/common/UserButton.module.css

@@ -1,22 +0,0 @@
-.container {
-  display: flex;
-  position: relative;
-  cursor: pointer;
-}
-
-.button {
-  display: flex;
-  flex-wrap: nowrap;
-}
-
-.username {
-  border-bottom: 1px solid var(--gray500);
-}
-
-.username:hover {
-  background: var(--gray50);
-}
-
-.menu {
-  z-index: 100;
-}

components/common/WorldMap.js

@@ -1,44 +1,57 @@
-import React, { useState } from 'react';
+import React, { useState, useMemo } from 'react';
 import ReactTooltip from 'react-tooltip';
+import { ComposableMap, Geographies, Geography, ZoomableGroup } from 'react-simple-maps';
 import classNames from 'classnames';
 import tinycolor from 'tinycolor2';
-import { ComposableMap, Geographies, Geography, ZoomableGroup } from 'react-simple-maps';
+import useTheme from 'hooks/useTheme';
+import { THEME_COLORS } from 'lib/constants';
 import styles from './WorldMap.module.css';
 
 const geoUrl = '/world-110m.json';
 
-export default function WorldMap({
+export default function WorldMap({ data, className }) {
-  data,
-  className,
-  baseColor = '#e9f3fd',
-  fillColor = '#f5f5f5',
-  strokeColor = '#2680eb',
-  hoverColor = '#2680eb',
-}) {
   const [tooltip, setTooltip] = useState();
+  const [theme] = useTheme();
+  const colors = useMemo(
+    () => ({
+      baseColor: THEME_COLORS[theme].primary,
+      fillColor: THEME_COLORS[theme].gray100,
+      strokeColor: THEME_COLORS[theme].primary,
+      hoverColor: THEME_COLORS[theme].primary,
+    }),
+    [theme],
+  );
 
   function getFillColor(code) {
-    if (code === 'AQ') return '#ffffff';
+    if (code === 'AQ') return;
     const country = data?.find(({ x }) => x === code);
-    return country ? tinycolor(baseColor).darken(country.z) : fillColor;
+
+    if (!country) {
+      return colors.fillColor;
+    }
+
+    return tinycolor(colors.baseColor)[theme === 'light' ? 'lighten' : 'darken'](
+      40 * (1.0 - country.z / 100),
+    );
   }
 
-  function getStrokeColor(code) {
+  function getOpacity(code) {
-    return code === 'AQ' ? '#ffffff' : strokeColor;
+    return code === 'AQ' ? 0 : 1;
-  }
-
-  function getHoverColor(code) {
-    return code === 'AQ' ? '#ffffff' : hoverColor;
   }
 
   function handleHover({ ISO_A2: code, NAME: name }) {
+    if (code === 'AQ') return;
     const country = data?.find(({ x }) => x === code);
     setTooltip(`${name}: ${country?.y || 0} visitors`);
   }
 
   return (
-    <div className={classNames(styles.container, className)}>
+    <div
-      <ComposableMap data-tip="" projection="geoMercator">
+      className={classNames(styles.container, className)}
+      data-tip=""
+      data-for="world-map-tooltip"
+    >
+      <ComposableMap projection="geoMercator">
         <ZoomableGroup zoom={0.8} minZoom={0.7} center={[0, 40]}>
           <Geographies geography={geoUrl}>
             {({ geographies }) => {
@@ -50,10 +63,11 @@ export default function WorldMap({
                     key={geo.rsmKey}
                     geography={geo}
                     fill={getFillColor(code)}
-                    stroke={getStrokeColor(code)}
+                    stroke={colors.strokeColor}
+                    opacity={getOpacity(code)}
                     style={{
                       default: { outline: 'none' },
-                      hover: { outline: 'none', fill: getHoverColor(code) },
+                      hover: { outline: 'none', fill: colors.hoverColor },
                       pressed: { outline: 'none' },
                     }}
                     onMouseOver={() => handleHover(geo.properties)}
@@ -65,7 +79,7 @@ export default function WorldMap({
           </Geographies>
         </ZoomableGroup>
       </ComposableMap>
-      <ReactTooltip>{tooltip}</ReactTooltip>
+      <ReactTooltip id="world-map-tooltip">{tooltip}</ReactTooltip>
     </div>
   );
 }

components/common/WorldMap.module.css

@@ -1,5 +1,4 @@
 .container {
   overflow: hidden;
   position: relative;
-  background: #fff;
 }

components/forms/DatePickerForm.js

@@ -1,11 +1,15 @@
 import React, { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
-import { isAfter } from 'date-fns';
+import { isAfter, isBefore, isSameDay } from 'date-fns';
 import Calendar from 'components/common/Calendar';
 import Button from 'components/common/Button';
 import { FormButtons } from 'components/layout/FormLayout';
 import { getDateRangeValues } from 'lib/date';
 import styles from './DatePickerForm.module.css';
+import ButtonGroup from 'components/common/ButtonGroup';
+
+const FILTER_DAY = 0;
+const FILTER_RANGE = 1;
 
 export default function DatePickerForm({
   startDate: defaultStartDate,
@@ -15,21 +19,59 @@ export default function DatePickerForm({
   onChange,
   onClose,
 }) {
+  const [selected, setSelected] = useState(
+    isSameDay(defaultStartDate, defaultEndDate) ? FILTER_DAY : FILTER_RANGE,
+  );
+  const [date, setDate] = useState(defaultStartDate);
   const [startDate, setStartDate] = useState(defaultStartDate);
   const [endDate, setEndDate] = useState(defaultEndDate);
 
+  const disabled =
+    selected === FILTER_DAY
+      ? isAfter(minDate, date) && isBefore(maxDate, date)
+      : isAfter(startDate, endDate);
+
+  const buttons = [
+    {
+      label: <FormattedMessage id="button.single-day" defaultMessage="Single day" />,
+      value: FILTER_DAY,
+    },
+    {
+      label: <FormattedMessage id="button.date-range" defaultMessage="Date range" />,
+      value: FILTER_RANGE,
+    },
+  ];
+
   function handleSave() {
-    onChange({ ...getDateRangeValues(startDate, endDate), value: 'custom' });
+    if (selected === FILTER_DAY) {
+      onChange({ ...getDateRangeValues(date, date), value: 'custom' });
+    } else {
+      onChange({ ...getDateRangeValues(startDate, endDate), value: 'custom' });
+    }
   }
 
   return (
     <div className={styles.container}>
+      <div className={styles.filter}>
+        <ButtonGroup size="small" items={buttons} selectedItem={selected} onClick={setSelected} />
+      </div>
       <div className={styles.calendars}>
-        <Calendar date={startDate} minDate={minDate} maxDate={endDate} onChange={setStartDate} />
+        {selected === FILTER_DAY ? (
-        <Calendar date={endDate} minDate={startDate} maxDate={maxDate} onChange={setEndDate} />
+          <Calendar date={date} minDate={minDate} maxDate={maxDate} onChange={setDate} />
+        ) : (
+          <>
+            <Calendar
+              date={startDate}
+              minDate={minDate}
+              maxDate={endDate}
+              onChange={setStartDate}
+            />
+            <Calendar date={endDate} minDate={startDate} maxDate={maxDate} onChange={setEndDate} />
+          </>
+        )}
       </div>
       <FormButtons>
-        <Button variant="action" onClick={handleSave} disabled={isAfter(startDate, endDate)}>
+        <Button variant="action" onClick={handleSave} disabled={disabled}>
           <FormattedMessage id="button.save" defaultMessage="Save" />
         </Button>
         <Button onClick={onClose}>

components/forms/DatePickerForm.module.css

@@ -1,25 +1,40 @@
 .container {
   display: flex;
   flex-direction: column;
-  width: 800px;
   max-width: 100vw;
 }
 
 .calendars {
   display: flex;
+  justify-content: center;
 }
 
-.calendars > div:first-child {
+.calendars > div {
-  padding-right: 20px;
+  width: 380px;
-  border-right: 1px solid var(--gray300);
 }
 
-.calendars > div:last-child {
+.calendars > div + div {
+  margin-left: 20px;
   padding-left: 20px;
+  border-left: 1px solid var(--gray300);
+}
+
+.filter {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 20px;
 }
 
 @media only screen and (max-width: 768px) {
   .calendars {
     flex-direction: column;
   }
+
+  .calendars > div + div {
+    padding: 0;
+    margin-left: 0;
+    margin-top: 20px;
+    border: 0;
+  }
 }

components/forms/TrackingCodeForm.js

@@ -2,7 +2,7 @@ import React, { useRef } from 'react';
 import { FormattedMessage } from 'react-intl';
 import Button from 'components/common/Button';
 import FormLayout, { FormButtons, FormRow } from 'components/layout/FormLayout';
-import CopyButton from '../common/CopyButton';
+import CopyButton from 'components/common/CopyButton';
 
 export default function TrackingCodeForm({ values, onClose }) {
   const ref = useRef();

components/layout/ButtonLayout.js

@@ -2,6 +2,16 @@ import React from 'react';
 import classNames from 'classnames';
 import styles from './ButtonLayout.module.css';
 
-export default function ButtonLayout({ className, children }) {
+export default function ButtonLayout({ className, children, align = 'center' }) {
-  return <div className={classNames(styles.buttons, className)}>{children}</div>;
+  return (
+    <div
+      className={classNames(styles.buttons, className, {
+        [styles.left]: align === 'left',
+        [styles.center]: align === 'center',
+        [styles.right]: align === 'right',
+      })}
+    >
+      {children}
+    </div>
+  );
 }

components/layout/ButtonLayout.module.css

@@ -1,7 +1,20 @@
 .buttons {
   display: flex;
+  align-items: center;
 }
 
-.buttons button + button {
+.buttons button + * {
   margin-left: 10px;
 }
+
+.center {
+  justify-content: center;
+}
+
+.left {
+  justify-content: flex-start;
+}
+
+.right {
+  justify-content: flex-end;
+}

components/layout/Footer.js

@@ -1,21 +1,27 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
-import classNames from 'classnames';
+import Link from 'components/common/Link';
-import Button from 'components/common/Button';
-import Logo from 'assets/logo.svg';
 import styles from './Footer.module.css';
 
 export default function Footer() {
   const version = process.env.VERSION;
   return (
     <footer className="container">
-      <div className={classNames(styles.footer, 'row justify-content-center')}>
+      <div className={styles.footer}>
-        <FormattedMessage id="footer.powered-by" defaultMessage="Powered by" />
+        <div />
-        <a href="https://umami.is">
+        <div>
-          <Button className={styles.button} icon={<Logo />} size="small">
+          <FormattedMessage
-            <b>umami</b>
+            id="message.powered-by"
-          </Button>
+            defaultMessage="Powered by {name}"
-        </a>
+            values={{
+              name: (
+                <Link href="https://umami.is">
+                  <b>umami</b>
+                </Link>
+              ),
+            }}
+          />
+        </div>
         <div>{`v${version}`}</div>
       </div>
     </footer>

components/layout/Footer.module.css

@@ -5,11 +5,3 @@
   font-size: var(--font-size-small);
   min-height: 100px;
 }
-
-.footer a {
-  text-decoration: none;
-}
-
-.button {
-  margin: 0 5px;
-}

components/layout/FormLayout.module.css

@@ -39,7 +39,7 @@
 }
 
 .msg {
-  color: var(--gray50);
+  color: var(--msgColor);
   background: var(--red400);
   font-size: var(--font-size-small);
   padding: 4px 8px;

components/layout/Header.js

@@ -3,11 +3,12 @@ import { FormattedMessage } from 'react-intl';
 import { useSelector } from 'react-redux';
 import classNames from 'classnames';
 import Link from 'components/common/Link';
-import UserButton from '../common/UserButton';
+import Icon from 'components/common/Icon';
-import Icon from '../common/Icon';
+import LanguageButton from 'components/settings/LanguageButton';
+import ThemeButton from 'components/settings/ThemeButton';
+import UserButton from 'components/settings/UserButton';
 import Logo from 'assets/logo.svg';
 import styles from './Header.module.css';
-import LanguageButton from '../common/LanguageButton';
 
 export default function Header() {
   const user = useSelector(state => state.user);
@@ -15,28 +16,29 @@ export default function Header() {
   return (
     <header className="container">
       <div className={classNames(styles.header, 'row align-items-center')}>
-        <div className="col-12 col-md-3">
+        <div className="col-12 col-md-12 col-lg-3">
           <div className={styles.title}>
             <Icon icon={<Logo />} size="large" className={styles.logo} />
             <Link href={user ? '/' : 'https://umami.is'}>umami</Link>
           </div>
         </div>
-        <div className="col-12 col-md-9">
+        <div className="col-12 col-md-12 col-lg-6">
-          <div className={styles.nav}>
+          {user && (
-            {user ? (
+            <div className={styles.nav}>
-              <>
+              <Link href="/dashboard">
-                <Link href="/dashboard">
+                <FormattedMessage id="label.dashboard" defaultMessage="Dashboard" />
-                  <FormattedMessage id="header.nav.dashboard" defaultMessage="Dashboard" />
+              </Link>
-                </Link>
+              <Link href="/settings">
-                <Link href="/settings">
+                <FormattedMessage id="label.settings" defaultMessage="Settings" />
-                  <FormattedMessage id="header.nav.settings" defaultMessage="Settings" />
+              </Link>
-                </Link>
+            </div>
-                <LanguageButton menuAlign="right" />
+          )}
-                <UserButton />
+        </div>
-              </>
+        <div className="col-12 col-md-12 col-lg-3">
-            ) : (
+          <div className={styles.buttons}>
-              <LanguageButton menuAlign="right" />
+            <ThemeButton />
-            )}
+            <LanguageButton menuAlign="right" />
+            {user && <UserButton />}
           </div>
         </div>
       </div>

components/layout/Header.module.css

@@ -13,18 +13,33 @@
 
 .nav {
   display: flex;
-  justify-content: flex-end;
+  justify-content: center;
   align-items: center;
   font-size: var(--font-size-normal);
   font-weight: 600;
 }
 
-.nav > * {
+.nav a + a {
   margin-left: 40px;
 }
 
-@media only screen and (max-width: 768px) {
+.buttons {
+  display: flex;
+  justify-content: flex-end;
+}
+
+@media only screen and (max-width: 992px) {
   .title {
     text-align: center;
   }
+
+  .nav {
+    font-size: var(--font-size-large);
+    justify-content: center;
+    padding: 20px 0;
+  }
+
+  .buttons {
+    justify-content: center;
+  }
 }

components/layout/Layout.js

@@ -16,8 +16,8 @@ export default function Layout({ title, children, header = true, footer = true }
       </Head>
       {header && <Header />}
       <main className="container">{children}</main>
-      <div id="__modals" />
       {footer && <Footer />}
+      <div id="__modals" />
     </>
   );
 }

components/layout/Layout.module.css

@@ -0,0 +1,6 @@
+.layout {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+}

components/layout/MenuLayout.js

@@ -1,29 +1,37 @@
 import React from 'react';
+import { useRouter } from 'next/router';
 import classNames from 'classnames';
-import Menu from 'components/common/Menu';
+import NavMenu from 'components/common/NavMenu';
 import styles from './MenuLayout.module.css';
 
 export default function MenuLayout({
   menu,
   selectedOption,
-  onMenuSelect,
   className,
   menuClassName,
   contentClassName,
-  optionClassName,
   children,
+  replace = false,
 }) {
+  const router = useRouter();
+
+  function handleSelect(url) {
+    if (replace) {
+      router.replace(url);
+    } else {
+      router.push(url);
+    }
+  }
+
   return (
     <div className={classNames(styles.container, className, 'row')}>
-      <Menu
+      <NavMenu
         options={menu}
         selectedOption={selectedOption}
-        className={classNames(styles.menu, menuClassName, 'col-12 col-lg-3')}
+        className={classNames(styles.menu, menuClassName, 'col-12 col-lg-2')}
-        selectedClassName={styles.selected}
+        onSelect={handleSelect}
-        optionClassName={classNames(styles.option, optionClassName)}
-        onSelect={onMenuSelect}
       />
-      <div className={classNames(styles.content, contentClassName, 'col-12 col-lg-9')}>
+      <div className={classNames(styles.content, contentClassName, 'col-12 col-lg-10')}>
         {children}
       </div>
     </div>

components/layout/MenuLayout.module.css

@@ -10,25 +10,11 @@
 }
 
 .container .content {
+  flex: 1;
   position: relative;
   border-left: 1px solid var(--gray300);
   padding-left: 30px;
-}
+  margin-left: 30px;
-
-.option {
-  font-size: var(--font-size-normal);
-  padding: 8px 16px;
-  cursor: pointer;
-  margin-right: 30px;
-  border-radius: 4px;
-}
-
-.option:hover {
-  background: var(--gray75);
-}
-
-.selected {
-  font-weight: 600;
 }
 
 @media only screen and (max-width: 992px) {
@@ -40,5 +26,6 @@
     border-top: 1px solid var(--gray300);
     border-left: 0;
     padding-left: 0;
+    margin-left: 0;
   }
 }

components/layout/Page.module.css

@@ -1,6 +1,7 @@
 .page {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
   padding: 0 30px;
   background: var(--gray50);
-  height: 100%;
-  overflow: hidden;
 }

components/layout/PageHeader.js

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

components/messages.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { defineMessages, FormattedMessage } from 'react-intl';
+
+export const labels = defineMessages({
+  unknown: { id: 'label.unknown', defaultMessage: 'Unknown' },
+});
+
+export const devices = defineMessages({
+  desktop: { id: 'metrics.device.desktop', defaultMessage: 'Desktop' },
+  laptop: { id: 'metrics.device.laptop', defaultMessage: 'Laptop' },
+  tablet: { id: 'metrics.device.tablet', defaultMessage: 'Tablet' },
+  mobile: { id: 'metrics.device.mobile', defaultMessage: 'Mobile' },
+});
+
+export function getDeviceMessage(device) {
+  return <FormattedMessage {...(devices[device] || labels.unknown)} />;
+}

components/metrics/ActiveUsers.js

@@ -4,8 +4,8 @@ import useFetch from 'hooks/useFetch';
 import styles from './ActiveUsers.module.css';
 import { FormattedMessage } from 'react-intl';
 
-export default function ActiveUsers({ websiteId, className }) {
+export default function ActiveUsers({ websiteId, token, className }) {
-  const { data } = useFetch(`/api/website/${websiteId}/active`, {}, { interval: 60000 });
+  const { data } = useFetch(`/api/website/${websiteId}/active`, { token }, { interval: 60000 });
   const count = useMemo(() => {
     return data?.[0]?.x || 0;
   }, [data]);
@@ -20,7 +20,7 @@ export default function ActiveUsers({ websiteId, className }) {
       <div className={styles.text}>
         <div>
           <FormattedMessage
-            id="active-users.message"
+            id="message.active-users"
             defaultMessage="{x} current {x, plural, one {visitor} other {visitors}}"
             values={{ x: count }}
           />

components/metrics/BarChart.js

@@ -6,6 +6,8 @@ import { formatLongNumber } from 'lib/format';
 import { dateFormat } from 'lib/lang';
 import useLocale from 'hooks/useLocale';
 import styles from './BarChart.module.css';
+import useTheme from 'hooks/useTheme';
+import { THEME_COLORS } from 'lib/constants';
 
 export default function BarChart({
   chartId,
@@ -16,15 +18,23 @@ export default function BarChart({
   animationDuration = 300,
   className,
   stacked = false,
+  loading = false,
   onCreate = () => {},
   onUpdate = () => {},
 }) {
   const canvas = useRef();
   const chart = useRef();
-  const [tooltip, setTooltip] = useState({});
+  const [tooltip, setTooltip] = useState(null);
   const [locale] = useLocale();
+  const [theme] = useTheme();
+  const colors = {
+    text: THEME_COLORS[theme].gray700,
+    line: THEME_COLORS[theme].gray200,
+    zeroLine: THEME_COLORS[theme].gray500,
+  };
 
   function renderXLabel(label, index, values) {
+    if (loading) return '';
     const d = new Date(values[index].value);
     const w = canvas.current.width;
 
@@ -59,18 +69,19 @@ export default function BarChart({
   function renderTooltip(model) {
     const { opacity, title, body, labelColors } = model;
 
-    if (!opacity) {
+    if (!opacity || !title) {
       setTooltip(null);
-    } else {
+      return;
-      const [label, value] = body[0].lines[0].split(':');
-
-      setTooltip({
-        title: dateFormat(new Date(+title[0]), getTooltipFormat(unit), locale),
-        value,
-        label,
-        labelColor: labelColors[0].backgroundColor,
-      });
     }
+
+    const [label, value] = body[0].lines[0].split(':');
+
+    setTooltip({
+      title: dateFormat(new Date(+title[0]), getTooltipFormat(unit), locale),
+      value,
+      label,
+      labelColor: labelColors[0].backgroundColor,
+    });
   }
 
   function getTooltipFormat(unit) {
@@ -97,6 +108,11 @@ export default function BarChart({
       responsive: true,
       responsiveAnimationDuration: 0,
       maintainAspectRatio: false,
+      legend: {
+        labels: {
+          fontColor: colors.text,
+        },
+      },
       scales: {
         xAxes: [
           {
@@ -110,6 +126,7 @@ export default function BarChart({
               callback: renderXLabel,
               minRotation: 0,
               maxRotation: 0,
+              fontColor: colors.text,
             },
             gridLines: {
               display: false,
@@ -123,6 +140,11 @@ export default function BarChart({
             ticks: {
               callback: renderYLabel,
               beginAtZero: true,
+              fontColor: colors.text,
+            },
+            gridLines: {
+              color: colors.line,
+              zeroLineColor: colors.zeroLine,
             },
             stacked,
           },
@@ -144,8 +166,13 @@ export default function BarChart({
   function updateChart() {
     const { options } = chart.current;
 
+    options.legend.labels.fontColor = colors.text;
     options.scales.xAxes[0].time.unit = unit;
     options.scales.xAxes[0].ticks.callback = renderXLabel;
+    options.scales.xAxes[0].ticks.fontColor = colors.text;
+    options.scales.yAxes[0].ticks.fontColor = colors.text;
+    options.scales.yAxes[0].gridLines.color = colors.line;
+    options.scales.yAxes[0].gridLines.zeroLineColor = colors.zeroLine;
     options.animation.duration = animationDuration;
     options.tooltips.custom = renderTooltip;
 
@@ -161,7 +188,7 @@ export default function BarChart({
         updateChart();
       }
     }
-  }, [datasets, unit, animationDuration, locale]);
+  }, [datasets, unit, animationDuration, locale, theme]);
 
   return (
     <>

components/metrics/BarChart.module.css

@@ -3,6 +3,7 @@
 }
 
 .tooltip {
+  color: var(--msgColor);
   pointer-events: none;
   z-index: 1;
 }
@@ -12,7 +13,6 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  color: var(--gray50);
   text-align: center;
 }
 

components/metrics/BrowsersTable.js

@@ -3,13 +3,14 @@ import { FormattedMessage } from 'react-intl';
 import MetricsTable from './MetricsTable';
 import { browserFilter } from 'lib/filters';
 
-export default function BrowsersTable({ websiteId, limit, onExpand }) {
+export default function BrowsersTable({ websiteId, token, limit, onExpand }) {
   return (
     <MetricsTable
       title={<FormattedMessage id="metrics.browsers" defaultMessage="Browsers" />}
       type="browser"
       metric={<FormattedMessage id="metrics.visitors" defaultMessage="Visitors" />}
       websiteId={websiteId}
+      token={token}
       limit={limit}
       dataFilter={browserFilter}
       onExpand={onExpand}

components/metrics/CountriesTable.js

@@ -3,13 +3,20 @@ import MetricsTable from './MetricsTable';
 import { countryFilter, percentFilter } from 'lib/filters';
 import { FormattedMessage } from 'react-intl';
 
-export default function CountriesTable({ websiteId, limit, onDataLoad = () => {}, onExpand }) {
+export default function CountriesTable({
+  websiteId,
+  token,
+  limit,
+  onDataLoad = () => {},
+  onExpand,
+}) {
   return (
     <MetricsTable
       title={<FormattedMessage id="metrics.countries" defaultMessage="Countries" />}
       type="country"
       metric={<FormattedMessage id="metrics.visitors" defaultMessage="Visitors" />}
       websiteId={websiteId}
+      token={token}
       limit={limit}
       dataFilter={countryFilter}
       onDataLoad={data => onDataLoad(percentFilter(data))}

components/metrics/DevicesTable.js

@@ -2,16 +2,19 @@ import React from 'react';
 import MetricsTable from './MetricsTable';
 import { deviceFilter } from 'lib/filters';
 import { FormattedMessage } from 'react-intl';
+import { getDeviceMessage } from 'components/messages';
 
-export default function DevicesTable({ websiteId, limit, onExpand }) {
+export default function DevicesTable({ websiteId, token, limit, onExpand }) {
   return (
     <MetricsTable
       title={<FormattedMessage id="metrics.devices" defaultMessage="Devices" />}
       type="device"
       metric={<FormattedMessage id="metrics.visitors" defaultMessage="Visitors" />}
       websiteId={websiteId}
+      token={token}
       limit={limit}
       dataFilter={deviceFilter}
+      renderLabel={({ x }) => getDeviceMessage(x)}
       onExpand={onExpand}
     />
   );

components/metrics/EventsChart.js

@@ -1,31 +1,25 @@
 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 useDateRange from 'hooks/useDateRange';
+import useTimezone from 'hooks/useTimezone';
+import { EVENT_COLORS } from 'lib/constants';
 
-const COLORS = [
+export default function EventsChart({ websiteId, token }) {
-  '#2680eb',
+  const [dateRange] = useDateRange(websiteId);
-  '#9256d9',
-  '#44b556',
-  '#e68619',
-  '#e34850',
-  '#1b959a',
-  '#d83790',
-  '#85d044',
-];
-
-export default function EventsChart({ 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] },
   );
@@ -47,13 +41,13 @@ export default function EventsChart({ websiteId }) {
     });
 
     return Object.keys(map).map((key, index) => {
-      const color = tinycolor(COLORS[index]);
+      const color = tinycolor(EVENT_COLORS[index]);
       return {
         label: key,
         data: map[key],
         lineTension: 0,
-        backgroundColor: color.setAlpha(0.4).toRgbString(),
+        backgroundColor: color.setAlpha(0.6).toRgbString(),
-        borderColor: color.setAlpha(0.5).toRgbString(),
+        borderColor: color.setAlpha(0.7).toRgbString(),
         borderWidth: 1,
       };
     });

components/metrics/EventsTable.js

@@ -3,13 +3,14 @@ import { FormattedMessage } from 'react-intl';
 import MetricsTable from './MetricsTable';
 import styles from './EventsTable.module.css';
 
-export default function EventsTable({ websiteId, limit, onExpand, onDataLoad }) {
+export default function EventsTable({ websiteId, token, limit, onExpand, onDataLoad }) {
   return (
     <MetricsTable
       title={<FormattedMessage id="metrics.events" defaultMessage="Events" />}
       type="event"
       metric={<FormattedMessage id="metrics.actions" defaultMessage="Actions" />}
       websiteId={websiteId}
+      token={token}
       limit={limit}
       renderLabel={({ x }) => <Label value={x} />}
       onExpand={onExpand}

components/metrics/MetricCard.module.css

@@ -3,7 +3,6 @@
   flex-direction: column;
   justify-content: center;
   min-width: 140px;
-  padding-right: 20px;
 }
 
 .value {

components/metrics/MetricsBar.js

@@ -3,19 +3,20 @@ import { FormattedMessage } from 'react-intl';
 import classNames from 'classnames';
 import Loading from 'components/common/Loading';
 import useFetch from 'hooks/useFetch';
-import { useDateRange } from 'hooks/useDateRange';
+import useDateRange from 'hooks/useDateRange';
 import { formatShortTime, formatNumber, formatLongNumber } from 'lib/format';
 import MetricCard from './MetricCard';
 import styles from './MetricsBar.module.css';
 
-export default function MetricsBar({ websiteId, className }) {
+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`,
     {
       start_at: +startDate,
       end_at: +endDate,
+      token,
     },
     {
       update: [modified],

components/metrics/MetricsBar.module.css

@@ -3,11 +3,15 @@
   cursor: pointer;
 }
 
+.bar > div + div {
+  padding-left: 20px;
+}
+
 @media only screen and (max-width: 992px) {
   .bar {
     justify-content: space-between;
   }
-  .bar > div:last-child {
+  .bar > div:nth-child(n + 3) {
     display: none;
   }
 }

components/metrics/MetricsTable.js

@@ -10,12 +10,13 @@ import useFetch from 'hooks/useFetch';
 import Arrow from 'assets/arrow-right.svg';
 import { percentFilter } from 'lib/filters';
 import { formatNumber, formatLongNumber } from 'lib/format';
-import { useDateRange } from 'hooks/useDateRange';
+import useDateRange from 'hooks/useDateRange';
 import styles from './MetricsTable.module.css';
 
 export default function MetricsTable({
   websiteId,
   websiteDomain,
+  token,
   title,
   metric,
   type,
@@ -23,12 +24,11 @@ export default function MetricsTable({
   dataFilter,
   filterOptions,
   limit,
-  headerComponent,
   renderLabel,
   onDataLoad = () => {},
   onExpand = () => {},
 }) {
-  const dateRange = useDateRange(websiteId);
+  const [dateRange] = useDateRange(websiteId);
   const { startDate, endDate, modified } = dateRange;
   const { data } = useFetch(
     `/api/website/${websiteId}/rankings`,
@@ -37,6 +37,7 @@ export default function MetricsTable({
       start_at: +startDate,
       end_at: +endDate,
       domain: websiteDomain,
+      token,
     },
     { onDataLoad, delay: 300, update: [modified] },
   );
@@ -83,7 +84,6 @@ export default function MetricsTable({
         <>
           <div className={styles.header}>
             <div className={styles.title}>{title}</div>
-            {headerComponent}
             <div className={styles.metric} onClick={handleSetFormat}>
               {metric}
             </div>

components/metrics/MetricsTable.module.css

@@ -2,7 +2,6 @@
   position: relative;
   min-height: 460px;
   font-size: var(--font-size-small);
-  padding: 20px 0;
   display: flex;
   flex-direction: column;
 }
@@ -74,7 +73,7 @@
   position: relative;
   width: 50px;
   color: #6e6e6e;
-  border-left: 1px solid var(--gray600);
+  border-left: 1px solid var(--gray500);
   padding-left: 10px;
   z-index: 1;
 }

components/metrics/OSTable.js

@@ -3,13 +3,14 @@ import MetricsTable from './MetricsTable';
 import { osFilter } from 'lib/filters';
 import { FormattedMessage } from 'react-intl';
 
-export default function OSTable({ websiteId, limit, onExpand }) {
+export default function OSTable({ websiteId, token, limit, onExpand }) {
   return (
     <MetricsTable
       title={<FormattedMessage id="metrics.operating-systems" defaultMessage="Operating system" />}
       type="os"
       metric={<FormattedMessage id="metrics.visitors" defaultMessage="Visitors" />}
       websiteId={websiteId}
+      token={token}
       limit={limit}
       dataFilter={osFilter}
       onExpand={onExpand}

components/metrics/PagesTable.js

@@ -4,8 +4,9 @@ import ButtonGroup from 'components/common/ButtonGroup';
 import { urlFilter } from 'lib/filters';
 import { FILTER_COMBINED, FILTER_RAW } from 'lib/constants';
 import MetricsTable from './MetricsTable';
+import ButtonLayout from '../layout/ButtonLayout';
 
-export default function PagesTable({ websiteId, websiteDomain, limit, onExpand }) {
+export default function PagesTable({ websiteId, token, websiteDomain, limit, onExpand }) {
   const [filter, setFilter] = useState(FILTER_COMBINED);
 
   const buttons = [
@@ -17,23 +18,28 @@ export default function PagesTable({ websiteId, websiteDomain, limit, onExpand }
   ];
 
   return (
-    <MetricsTable
+    <>
-      title={<FormattedMessage id="metrics.pages" defaultMessage="Pages" />}
+      {!limit && <FilterButtons buttons={buttons} selected={filter} onClick={setFilter} />}
-      type="url"
+      <MetricsTable
-      metric={<FormattedMessage id="metrics.views" defaultMessage="Views" />}
+        title={<FormattedMessage id="metrics.pages" defaultMessage="Pages" />}
-      headerComponent={
+        type="url"
-        limit ? null : <FilterButtons buttons={buttons} selected={filter} onClick={setFilter} />
+        metric={<FormattedMessage id="metrics.views" defaultMessage="Views" />}
-      }
+        websiteId={websiteId}
-      websiteId={websiteId}
+        token={token}
-      limit={limit}
+        limit={limit}
-      dataFilter={urlFilter}
+        dataFilter={urlFilter}
-      filterOptions={{ domain: websiteDomain, raw: filter === FILTER_RAW }}
+        filterOptions={{ domain: websiteDomain, raw: filter === FILTER_RAW }}
-      renderLabel={({ x }) => decodeURI(x)}
+        renderLabel={({ x }) => decodeURI(x)}
-      onExpand={onExpand}
+        onExpand={onExpand}
-    />
+      />
+    </>
   );
 }
 
 const FilterButtons = ({ buttons, selected, onClick }) => {
-  return <ButtonGroup size="xsmall" items={buttons} selectedItem={selected} onClick={onClick} />;
+  return (
+    <ButtonLayout>
+      <ButtonGroup size="xsmall" items={buttons} selectedItem={selected} onClick={onClick} />
+    </ButtonLayout>
+  );
 };

components/metrics/PageviewsChart.js

@@ -1,10 +1,25 @@
 import React from 'react';
 import { useIntl } from 'react-intl';
+import tinycolor from 'tinycolor2';
 import CheckVisible from 'components/helpers/CheckVisible';
 import BarChart from './BarChart';
+import useTheme from 'hooks/useTheme';
+import { THEME_COLORS } from 'lib/constants';
 
-export default function PageviewsChart({ websiteId, data, unit, records, className }) {
+export default function PageviewsChart({ websiteId, data, unit, records, className, loading }) {
   const intl = useIntl();
+  const [theme] = useTheme();
+  const primaryColor = tinycolor(THEME_COLORS[theme].primary);
+  const colors = {
+    views: {
+      background: primaryColor.setAlpha(0.4).toRgbString(),
+      border: primaryColor.setAlpha(0.5).toRgbString(),
+    },
+    visitors: {
+      background: primaryColor.setAlpha(0.6).toRgbString(),
+      border: primaryColor.setAlpha(0.7).toRgbString(),
+    },
+  };
 
   const handleUpdate = chart => {
     const {
@@ -43,8 +58,8 @@ export default function PageviewsChart({ websiteId, data, unit, records, classNa
               }),
               data: data.uniques,
               lineTension: 0,
-              backgroundColor: 'rgb(38, 128, 235, 0.4)',
+              backgroundColor: colors.visitors.background,
-              borderColor: 'rgb(13, 102, 208, 0.4)',
+              borderColor: colors.visitors.border,
               borderWidth: 1,
             },
             {
@@ -54,8 +69,8 @@ export default function PageviewsChart({ websiteId, data, unit, records, classNa
               }),
               data: data.pageviews,
               lineTension: 0,
-              backgroundColor: 'rgb(38, 128, 235, 0.2)',
+              backgroundColor: colors.views.background,
-              borderColor: 'rgb(13, 102, 208, 0.2)',
+              borderColor: colors.views.border,
               borderWidth: 1,
             },
           ]}
@@ -63,6 +78,7 @@ export default function PageviewsChart({ websiteId, data, unit, records, classNa
           records={records}
           animationDuration={visible ? 300 : 0}
           onUpdate={handleUpdate}
+          loading={loading}
         />
       )}
     </CheckVisible>

components/metrics/QuickButtons.js

@@ -1,30 +0,0 @@
-import React from 'react';
-import ButtonGroup from 'components/common/ButtonGroup';
-import { getDateRange } from 'lib/date';
-import styles from './QuickButtons.module.css';
-
-const options = [
-  { label: '24h', value: '24hour' },
-  { label: '7d', value: '7day' },
-  { label: '30d', value: '30day' },
-];
-
-export default function QuickButtons({ value, onChange }) {
-  const selectedItem = options.find(item => item.value === value)?.value;
-
-  function handleClick(selected) {
-    if (selected !== value) {
-      onChange(getDateRange(selected));
-    }
-  }
-
-  return (
-    <ButtonGroup
-      size="xsmall"
-      className={styles.buttons}
-      items={options}
-      selectedItem={selectedItem}
-      onClick={handleClick}
-    />
-  );
-}

components/metrics/QuickButtons.module.css

@@ -1,33 +0,0 @@
-.buttons {
-  display: flex;
-  align-content: center;
-  position: absolute;
-  top: 0;
-  right: 0;
-  margin: auto;
-}
-
-.buttons button + button {
-  margin-left: 10px;
-}
-
-.buttons .button {
-  font-size: var(--font-size-xsmall);
-  padding: 4px 8px;
-}
-
-.active {
-  font-weight: 600;
-}
-
-@media only screen and (max-width: 768px) {
-  .buttons button:last-child {
-    display: none;
-  }
-}
-
-@media only screen and (max-width: 576px) {
-  .buttons {
-    display: none;
-  }
-}

components/metrics/ReferrersTable.js

@@ -4,8 +4,15 @@ import MetricsTable from './MetricsTable';
 import { refFilter } from 'lib/filters';
 import ButtonGroup from 'components/common/ButtonGroup';
 import { FILTER_DOMAIN_ONLY, FILTER_COMBINED, FILTER_RAW } from 'lib/constants';
+import ButtonLayout from '../layout/ButtonLayout';
 
-export default function ReferrersTable({ websiteId, websiteDomain, limit, onExpand = () => {} }) {
+export default function ReferrersTable({
+  websiteId,
+  websiteDomain,
+  token,
+  limit,
+  onExpand = () => {},
+}) {
   const [filter, setFilter] = useState(FILTER_COMBINED);
 
   const buttons = [
@@ -20,9 +27,9 @@ export default function ReferrersTable({ websiteId, websiteDomain, limit, onExpa
     { label: <FormattedMessage id="metrics.filter.raw" defaultMessage="Raw" />, value: FILTER_RAW },
   ];
 
-  const renderLink = ({ x: url }) => {
+  const renderLink = ({ w: href, x: url }) => {
-    return url.startsWith('http') ? (
+    return (href || url).startsWith('http') ? (
-      <a href={url} target="_blank" rel="noreferrer">
+      <a href={href || url} target="_blank" rel="noreferrer">
         {decodeURI(url)}
       </a>
     ) : (
@@ -31,28 +38,33 @@ export default function ReferrersTable({ websiteId, websiteDomain, limit, onExpa
   };
 
   return (
-    <MetricsTable
+    <>
-      title={<FormattedMessage id="metrics.referrers" defaultMessage="Referrers" />}
+      {!limit && <FilterButtons buttons={buttons} selected={filter} onClick={setFilter} />}
-      type="referrer"
+      <MetricsTable
-      metric={<FormattedMessage id="metrics.views" defaultMessage="Views" />}
+        title={<FormattedMessage id="metrics.referrers" defaultMessage="Referrers" />}
-      headerComponent={
+        type="referrer"
-        limit ? null : <FilterButtons buttons={buttons} selected={filter} onClick={setFilter} />
+        metric={<FormattedMessage id="metrics.views" defaultMessage="Views" />}
-      }
+        websiteId={websiteId}
-      websiteId={websiteId}
+        websiteDomain={websiteDomain}
-      websiteDomain={websiteDomain}
+        token={token}
-      limit={limit}
+        limit={limit}
-      dataFilter={refFilter}
+        dataFilter={refFilter}
-      filterOptions={{
+        filterOptions={{
-        domain: websiteDomain,
+          domain: websiteDomain,
-        domainOnly: filter === FILTER_DOMAIN_ONLY,
+          domainOnly: filter === FILTER_DOMAIN_ONLY,
-        raw: filter === FILTER_RAW,
+          raw: filter === FILTER_RAW,
-      }}
+        }}
-      onExpand={onExpand}
+        onExpand={onExpand}
-      renderLabel={renderLink}
+        renderLabel={renderLink}
-    />
+      />
+    </>
   );
 }
 
 const FilterButtons = ({ buttons, selected, onClick }) => {
-  return <ButtonGroup size="xsmall" items={buttons} selectedItem={selected} onClick={onClick} />;
+  return (
+    <ButtonLayout>
+      <ButtonGroup size="xsmall" items={buttons} selectedItem={selected} onClick={onClick} />
+    </ButtonLayout>
+  );
 };

components/metrics/WebsiteChart.js

@@ -1,35 +1,36 @@
 import React, { useMemo } from 'react';
-import { useDispatch } from 'react-redux';
 import classNames from 'classnames';
 import PageviewsChart from './PageviewsChart';
 import MetricsBar from './MetricsBar';
+import WebsiteHeader from './WebsiteHeader';
 import DateFilter from 'components/common/DateFilter';
 import StickyHeader from 'components/helpers/StickyHeader';
 import useFetch from 'hooks/useFetch';
-import { getDateArray, getDateLength, getTimezone } from 'lib/date';
+import useDateRange from 'hooks/useDateRange';
-import { setDateRange } from 'redux/actions/websites';
+import useTimezone from 'hooks/useTimezone';
+import { getDateArray, getDateLength } from 'lib/date';
 import styles from './WebsiteChart.module.css';
-import WebsiteHeader from './WebsiteHeader';
-import { useDateRange } from '../../hooks/useDateRange';
 
 export default function WebsiteChart({
   websiteId,
+  token,
   title,
   stickyHeader = false,
   showLink = false,
   onDataLoad = () => {},
 }) {
-  const dispatch = useDispatch();
+  const [dateRange, setDateRange] = useDateRange(websiteId);
-  const dateRange = useDateRange(websiteId);
   const { startDate, endDate, unit, value, modified } = dateRange;
+  const [timezone] = useTimezone();
 
-  const { data } = useFetch(
+  const { data, loading } = useFetch(
     `/api/website/${websiteId}/pageviews`,
     {
       start_at: +startDate,
       end_at: +endDate,
       unit,
-      tz: getTimezone(),
+      tz: timezone,
+      token,
     },
     { onDataLoad, update: [modified] },
   );
@@ -44,13 +45,9 @@ export default function WebsiteChart({
     return [[], []];
   }, [data]);
 
-  function handleDateChange(values) {
-    dispatch(setDateRange(websiteId, values));
-  }
-
   return (
     <>
-      <WebsiteHeader websiteId={websiteId} title={title} showLink={showLink} />
+      <WebsiteHeader websiteId={websiteId} token={token} title={title} showLink={showLink} />
       <div className={classNames(styles.header, 'row')}>
         <StickyHeader
           className={classNames(styles.metrics, 'col row')}
@@ -58,14 +55,14 @@ export default function WebsiteChart({
           enabled={stickyHeader}
         >
           <div className="col-12 col-lg-9">
-            <MetricsBar websiteId={websiteId} />
+            <MetricsBar websiteId={websiteId} token={token} />
           </div>
           <div className={classNames(styles.filter, 'col-12 col-lg-3')}>
             <DateFilter
               value={value}
               startDate={startDate}
               endDate={endDate}
-              onChange={handleDateChange}
+              onChange={setDateRange}
             />
           </div>
         </StickyHeader>
@@ -77,6 +74,7 @@ export default function WebsiteChart({
             data={{ pageviews, uniques }}
             unit={unit}
             records={getDateLength(startDate, endDate, unit)}
+            loading={loading}
           />
         </div>
       </div>

components/metrics/WebsiteHeader.js

@@ -1,37 +1,30 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
-import { useRouter } from 'next/router';
+import Link from 'components/common/Link';
 import PageHeader from 'components/layout/PageHeader';
-import Button from 'components/common/Button';
+import RefreshButton from 'components/common/RefreshButton';
+import ButtonLayout from 'components/layout/ButtonLayout';
+import Icon from 'components/common/Icon';
 import ActiveUsers from './ActiveUsers';
 import Arrow from 'assets/arrow-right.svg';
 import styles from './WebsiteHeader.module.css';
-import RefreshButton from '../common/RefreshButton';
-import ButtonLayout from '../layout/ButtonLayout';
-
-export default function WebsiteHeader({ websiteId, title, showLink = false }) {
-  const router = useRouter();
 
+export default function WebsiteHeader({ websiteId, token, title, showLink = false }) {
   return (
     <PageHeader>
       <div className={styles.title}>{title}</div>
-      <ActiveUsers className={styles.active} websiteId={websiteId} />
+      <ActiveUsers className={styles.active} websiteId={websiteId} token={token} />
-      <ButtonLayout>
+      <ButtonLayout align="right">
         <RefreshButton websiteId={websiteId} />
         {showLink && (
-          <Button
+          <Link
-            icon={<Arrow />}
+            href="/website/[...id]"
-            onClick={() =>
+            as={`/website/${websiteId}/${title}`}
-              router.push('/website/[...id]', `/website/${websiteId}/${title}`, {
+            className={styles.link}
-                shallow: true,
-              })
-            }
-            size="small"
           >
-            <div>
+            <FormattedMessage id="button.view-details" defaultMessage="View details" />
-              <FormattedMessage id="button.view-details" defaultMessage="View details" />
+            <Icon icon={<Arrow />} size="small" />
-            </div>
+          </Link>
-          </Button>
         )}
       </ButtonLayout>
     </PageHeader>

components/metrics/WebsiteHeader.module.css

@@ -4,8 +4,13 @@
   line-height: var(--font-size-large);
 }
 
-.button {
+.link {
   font-size: var(--font-size-small);
+  font-weight: 600;
+}
+
+.link svg {
+  margin-left: 10px;
 }
 
 @media only screen and (max-width: 576px) {

components/settings/AccountSettings.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
-import { useRouter } from 'next/router';
+import Link from 'next/link';
 import classNames from 'classnames';
 import PageHeader from 'components/layout/PageHeader';
 import Button from 'components/common/Button';
@@ -16,11 +16,10 @@ import Pen from 'assets/pen.svg';
 import Plus from 'assets/plus.svg';
 import Trash from 'assets/trash.svg';
 import Check from 'assets/check.svg';
-import List from 'assets/list-ul.svg';
+import LinkIcon from 'assets/external-link.svg';
 import styles from './AccountSettings.module.css';
 
 export default function AccountSettings() {
-  const router = useRouter();
   const [addAccount, setAddAccount] = useState();
   const [editAccount, setEditAccount] = useState();
   const [deleteAccount, setDeleteAccount] = useState();
@@ -30,16 +29,18 @@ export default function AccountSettings() {
 
   const Checkmark = ({ is_admin }) => (is_admin ? <Icon icon={<Check />} size="medium" /> : null);
 
+  const DashboardLink = row =>
+    row.is_admin ? null : (
+      <Link href={`/dashboard/${row.user_id}/${row.username}`}>
+        <a>
+          <Icon icon={<LinkIcon />} />
+        </a>
+      </Link>
+    );
+
   const Buttons = row =>
     row.username !== 'admin' ? (
-      <ButtonLayout>
+      <ButtonLayout align="right">
-        <Button
-          icon={<List />}
-          size="small"
-          tooltip={<FormattedMessage id="button.websites" defaultMessage="Websites" />}
-          tooltipId={`button-websites-${row.username}`}
-          onClick={() => router.push(`/dashboard/${row.user_id}/${row.username}`)}
-        />
         <Button icon={<Pen />} size="small" onClick={() => setEditAccount(row)}>
           <div>
             <FormattedMessage id="button.edit" defaultMessage="Edit" />
@@ -57,17 +58,23 @@ export default function AccountSettings() {
     {
       key: 'username',
       label: <FormattedMessage id="label.username" defaultMessage="Username" />,
-      className: 'col-6 col-md-4',
+      className: 'col-4 col-md-3',
     },
     {
       key: 'is_admin',
       label: <FormattedMessage id="label.administrator" defaultMessage="Administrator" />,
-      className: 'col-6 col-md-4',
+      className: 'col-4 col-md-3',
       render: Checkmark,
     },
+    {
+      key: 'dashboard',
+      label: <FormattedMessage id="label.dashboard" defaultMessage="Dashboard" />,
+      className: 'col-4 col-md-3',
+      render: DashboardLink,
+    },
     {
       key: 'actions',
-      className: classNames(styles.buttons, 'col-12 col-md-4 pt-2 pt-md-0'),
+      className: classNames(styles.buttons, 'col-12 col-md-3 pt-2 pt-md-0'),
       render: Buttons,
     },
   ];
@@ -92,7 +99,7 @@ export default function AccountSettings() {
     <>
       <PageHeader>
         <div>
-          <FormattedMessage id="settings.accounts" defaultMessage="Accounts" />
+          <FormattedMessage id="label.accounts" defaultMessage="Accounts" />
         </div>
         <Button icon={<Plus />} size="small" onClick={() => setAddAccount(true)}>
           <div>

components/settings/AccountSettings.module.css

@@ -1,4 +1,5 @@
 .buttons {
   display: flex;
   justify-content: flex-end;
+  flex: 1;
 }

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/LanguageButton.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import Head from 'next/head';
+import { menuOptions } from 'lib/lang';
+import useLocale from 'hooks/useLocale';
+import MenuButton from 'components/common/MenuButton';
+import Globe from 'assets/globe.svg';
+
+export default function LanguageButton() {
+  const [locale, setLocale] = useLocale();
+
+  function handleSelect(value) {
+    setLocale(value);
+  }
+
+  return (
+    <>
+      <Head>
+        {locale === 'zh-CN' && (
+          <link
+            href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap"
+            rel="stylesheet"
+          />
+        )}
+        {locale === 'ja-JP' && (
+          <link
+            href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap"
+            rel="stylesheet"
+          />
+        )}
+      </Head>
+      <MenuButton
+        icon={<Globe />}
+        options={menuOptions}
+        value={locale}
+        renderValue={option => option?.display}
+        onSelect={handleSelect}
+      />
+    </>
+  );
+}

components/settings/ProfileSettings.js

@@ -6,7 +6,10 @@ 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 TimezoneSetting from 'components/settings/TimezoneSetting';
 import Dots from 'assets/ellipsis-h.svg';
+import styles from './ProfileSettings.module.css';
+import DateRangeSetting from './DateRangeSetting';
 
 export default function ProfileSettings() {
   const user = useSelector(state => state.user);
@@ -23,7 +26,7 @@ export default function ProfileSettings() {
     <>
       <PageHeader>
         <div>
-          <FormattedMessage id="settings.profile" defaultMessage="Profile" />
+          <FormattedMessage id="label.profile" defaultMessage="Profile" />
         </div>
         <Button icon={<Dots />} size="small" onClick={() => setChangePassword(true)}>
           <div>
@@ -31,11 +34,23 @@ export default function ProfileSettings() {
           </div>
         </Button>
       </PageHeader>
-      <dl>
+      <dl className={styles.list}>
         <dt>
           <FormattedMessage id="label.username" defaultMessage="Username" />
         </dt>
         <dd>{user.username}</dd>
+        <dt>
+          <FormattedMessage id="label.timezone" defaultMessage="Timezone" />
+        </dt>
+        <dd>
+          <TimezoneSetting />
+        </dd>
+        <dt>
+          <FormattedMessage id="label.default-date-range" defaultMessage="Default date range" />
+        </dt>
+        <dd>
+          <DateRangeSetting />
+        </dd>
       </dl>
       {changePassword && (
         <Modal

components/settings/ProfileSettings.module.css

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

components/settings/Settings.js

@@ -1,4 +1,5 @@
 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 './WebsiteSettings';
@@ -7,33 +8,38 @@ import ProfileSettings from './ProfileSettings';
 import { useSelector } from 'react-redux';
 import { FormattedMessage } from 'react-intl';
 
-const WEBSITES = 1;
+const WEBSITES = '/settings';
-const ACCOUNTS = 2;
+const ACCOUNTS = '/settings/accounts';
-const PROFILE = 3;
+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="settings.websites" defaultMessage="Websites" />,
+      label: <FormattedMessage id="label.websites" defaultMessage="Websites" />,
       value: WEBSITES,
     },
     {
-      label: <FormattedMessage id="settings.accounts" defaultMessage="Accounts" />,
+      label: <FormattedMessage id="label.accounts" defaultMessage="Accounts" />,
       value: ACCOUNTS,
       hidden: !user.is_admin,
     },
-    { label: <FormattedMessage id="settings.profile" defaultMessage="Profile" />, value: PROFILE },
+    {
+      label: <FormattedMessage id="label.profile" defaultMessage="Profile" />,
+      value: PROFILE,
+    },
   ];
 
   return (
     <Page>
       <MenuLayout menu={menuOptions} selectedOption={option} onMenuSelect={setOption}>
-        {option === WEBSITES && <WebsiteSettings />}
+        {pathname === WEBSITES && <WebsiteSettings />}
-        {option === ACCOUNTS && <AccountSettings />}
+        {pathname === ACCOUNTS && <AccountSettings />}
-        {option === PROFILE && <ProfileSettings />}
+        {pathname === PROFILE && <ProfileSettings />}
       </MenuLayout>
     </Page>
   );

components/settings/ThemeButton.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import { useTransition, animated } from 'react-spring';
+import Button from 'components/common/Button';
+import useTheme from 'hooks/useTheme';
+import Sun from 'assets/sun.svg';
+import Moon from 'assets/moon.svg';
+import styles from './ThemeButton.module.css';
+import Icon from '../common/Icon';
+
+export default function ThemeButton() {
+  const [theme, setTheme] = useTheme();
+
+  const transitions = useTransition(theme, theme => theme, {
+    from: {
+      opacity: 0,
+      transform: `translateY(${theme === 'light' ? '20px' : '-20px'}) scale(0.5)`,
+    },
+    enter: { opacity: 1, transform: 'translateY(0px) scale(1)' },
+    leave: {
+      opacity: 0,
+      transform: `translateY(${theme === 'light' ? '-20px' : '20px'}) scale(0.5)`,
+    },
+  });
+
+  function handleClick() {
+    setTheme(theme === 'light' ? 'dark' : 'light');
+  }
+
+  return (
+    <Button className={styles.button} variant="light" onClick={handleClick}>
+      {transitions.map(({ item, key, props }) =>
+        item === 'light' ? (
+          <animated.div key={key} style={props}>
+            <Icon icon={<Sun />} />
+          </animated.div>
+        ) : (
+          <animated.div key={key} style={props}>
+            <Icon icon={<Moon />} />
+          </animated.div>
+        ),
+      )}
+    </Button>
+  );
+}

components/settings/ThemeButton.module.css

@@ -0,0 +1,7 @@
+.button {
+  width: 50px;
+}
+
+.button svg {
+  position: absolute;
+}

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 'components/common/DropDown';
+import Button from 'components/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;
+}

components/settings/UserButton.js

@@ -1,18 +1,15 @@
-import React, { useState, useRef } from 'react';
+import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { useSelector } from 'react-redux';
 import { useRouter } from 'next/router';
-import Menu from './Menu';
+import MenuButton from 'components/common/MenuButton';
-import Icon from './Icon';
+import Icon from 'components/common/Icon';
-import useDocumentClick from 'hooks/useDocumentClick';
 import User from 'assets/user.svg';
 import Chevron from 'assets/chevron-down.svg';
 import styles from './UserButton.module.css';
 
 export default function UserButton() {
-  const [showMenu, setShowMenu] = useState(false);
   const user = useSelector(state => state.user);
-  const ref = useRef();
   const router = useRouter();
 
   const menuOptions = [
@@ -27,38 +24,24 @@ export default function UserButton() {
       value: 'username',
       className: styles.username,
     },
+    { label: <FormattedMessage id="label.profile" defaultMessage="Profile" />, value: 'profile' },
     { label: <FormattedMessage id="label.logout" defaultMessage="Logout" />, value: 'logout' },
   ];
 
   function handleSelect(value) {
-    setShowMenu(false);
-
     if (value === 'logout') {
       router.push('/logout');
+    } else if (value === 'profile') {
+      router.push('/settings/profile');
     }
   }
 
-  useDocumentClick(e => {
-    if (!ref.current.contains(e.target)) {
-      setShowMenu(false);
-    }
-  });
-
   return (
-    <div ref={ref} className={styles.container}>
+    <MenuButton
-      <div className={styles.button} onClick={() => setShowMenu(state => !state)}>
+      icon={<Icon icon={<User />} size="large" />}
-        <Icon icon={<User />} size="large" />
+      value={<Icon icon={<Chevron />} size="small" />}
-        <Icon icon={<Chevron />} size="small" />
+      options={menuOptions}
-      </div>
+      onSelect={handleSelect}
-      {showMenu && (
+    />
-        <Menu
-          className={styles.menu}
-          options={menuOptions}
-          onSelect={handleSelect}
-          float="bottom"
-          align="right"
-        />
-      )}
-    </div>
   );
 }

components/settings/UserButton.module.css

@@ -0,0 +1,7 @@
+.username {
+  border-bottom: 1px solid var(--gray500);
+}
+
+.username:hover {
+  background: var(--gray50);
+}

components/settings/WebsiteSettings.js

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import classNames from 'classnames';
+import Link from 'components/common/Link';
 import Table from 'components/common/Table';
 import Button from 'components/common/Button';
 import PageHeader from 'components/layout/PageHeader';
@@ -16,7 +17,7 @@ import Pen from 'assets/pen.svg';
 import Trash from 'assets/trash.svg';
 import Plus from 'assets/plus.svg';
 import Code from 'assets/code.svg';
-import Link from 'assets/link.svg';
+import LinkIcon from 'assets/link.svg';
 import useFetch from 'hooks/useFetch';
 import styles from './WebsiteSettings.module.css';
 
@@ -31,12 +32,12 @@ export default function WebsiteSettings() {
   const { data } = useFetch(`/api/websites`, {}, { update: [saved] });
 
   const Buttons = row => (
-    <ButtonLayout>
+    <ButtonLayout align="right">
       {row.share_id && (
         <Button
-          icon={<Link />}
+          icon={<LinkIcon />}
           size="small"
-          tooltip={<FormattedMessage id="tooltip.get-share-url" defaultMessage="Get share URL" />}
+          tooltip={<FormattedMessage id="message.get-share-url" defaultMessage="Get share URL" />}
           tooltipId={`button-share-${row.website_id}`}
           onClick={() => setShowUrl(row)}
         />
@@ -45,7 +46,7 @@ export default function WebsiteSettings() {
         icon={<Code />}
         size="small"
         tooltip={
-          <FormattedMessage id="tooltip.get-tracking-code" defaultMessage="Get tracking code" />
+          <FormattedMessage id="message.get-tracking-code" defaultMessage="Get tracking code" />
         }
         tooltipId={`button-code-${row.website_id}`}
         onClick={() => setShowCode(row)}
@@ -63,11 +64,18 @@ export default function WebsiteSettings() {
     </ButtonLayout>
   );
 
+  const DetailsLink = ({ website_id, name }) => (
+    <Link href="/website/[...id]" as={`/website/${website_id}/${name}`}>
+      {name}
+    </Link>
+  );
+
   const columns = [
     {
       key: 'name',
       label: <FormattedMessage id="label.name" defaultMessage="Name" />,
       className: 'col-6 col-xl-4',
+      render: DetailsLink,
     },
     {
       key: 'domain',
@@ -103,7 +111,7 @@ export default function WebsiteSettings() {
     <EmptyPlaceholder
       msg={
         <FormattedMessage
-          id="placeholder.message.no-websites-configured"
+          id="message.no-websites-configured"
           defaultMessage="You don't have any websites configured."
         />
       }
@@ -120,7 +128,7 @@ export default function WebsiteSettings() {
     <>
       <PageHeader>
         <div>
-          <FormattedMessage id="settings.websites" defaultMessage="Websites" />
+          <FormattedMessage id="label.websites" defaultMessage="Websites" />
         </div>
         <Button icon={<Plus />} size="small" onClick={() => setAddWebsite(true)}>
           <div>

hooks/useDateRange.js

@@ -1,8 +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, 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 function useDateRange(websiteId, defaultDateRange = '7day') {
+export default function useDateRange(websiteId, defaultDateRange = DEFAULT_DATE_RANGE) {
-  return useSelector(
+  const dispatch = useDispatch();
-    state => state.websites[websiteId]?.dateRange || getDateRange(defaultDateRange),
+  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') {
+      globalDateRange = {
+        ...globalDefault,
+        startDate: parseISO(globalDefault.startDate),
+        endDate: parseISO(globalDefault.endDate),
+      };
+    }
+  }
+
+  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/useFetch.js

@@ -7,6 +7,7 @@ export default function useFetch(url, params = {}, options = {}) {
   const dispatch = useDispatch();
   const [data, setData] = useState();
   const [error, setError] = useState();
+  const [loading, setLoadiing] = useState(false);
   const keys = Object.keys(params)
     .sort()
     .map(key => params[key]);
@@ -14,6 +15,7 @@ export default function useFetch(url, params = {}, options = {}) {
 
   async function loadData() {
     try {
+      setLoadiing(true);
       setError(null);
       const time = performance.now();
       const data = await get(url, params);
@@ -25,6 +27,8 @@ export default function useFetch(url, params = {}, options = {}) {
     } catch (e) {
       console.error(e);
       setError(e);
+    } finally {
+      setLoadiing(false);
     }
   }
 
@@ -42,5 +46,5 @@ export default function useFetch(url, params = {}, options = {}) {
     }
   }, [url, ...keys, ...update]);
 
-  return { data, error, loadData };
+  return { data, error, loading, loadData };
 }

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,13 +1,16 @@
 import { useDispatch, useSelector } from 'react-redux';
-import { updateApp } from 'redux/actions/app';
+import { setLocale } 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) {
+  function saveLocale(value) {
-    dispatch(updateApp({ locale: value }));
+    setItem(LOCALE_CONFIG, value);
+    dispatch(setLocale(value));
   }
 
-  return [locale, setLocale];
+  return [locale, saveLocale];
 }

hooks/useTheme.js

@@ -0,0 +1,21 @@
+import { useDispatch, useSelector } from 'react-redux';
+import { setTheme } from 'redux/actions/app';
+import { getItem, setItem } from 'lib/web';
+import { THEME_CONFIG } from 'lib/constants';
+import { useEffect } from 'react';
+
+export default function useLocale() {
+  const theme = useSelector(state => state.app.theme || getItem(THEME_CONFIG) || 'light');
+  const dispatch = useDispatch();
+
+  function saveTheme(value) {
+    setItem(THEME_CONFIG, value);
+    dispatch(setTheme(value));
+  }
+
+  useEffect(() => {
+    document.body.setAttribute('data-theme', theme);
+  }, [theme]);
+
+  return [theme, saveTheme];
+}

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/da-DK.json

@@ -0,0 +1,95 @@
+{
+  "button.add-account": "Tilføj konto",
+  "button.add-website": "Tilføj hjemmeside",
+  "button.back": "Tilbage",
+  "button.cancel": "Afvis",
+  "button.change-password": "Skift adgangskode",
+  "button.copy-to-clipboard": "Kopier til udklipsholder",
+  "button.date-range": "Datointerval",
+  "button.delete": "Slet",
+  "button.edit": "Rediger",
+  "button.login": "Log ind",
+  "button.more": "Mere",
+  "button.refresh": "Opdater",
+  "button.reset": "Reset",
+  "button.save": "Gem",
+  "button.single-day": "Enkelt dag",
+  "button.view-details": "Vis detajler",
+  "label.accounts": "Kontoer",
+  "label.administrator": "Administrator",
+  "label.confirm-password": "Godkendt adgangskode",
+  "label.current-password": "Nuværende adgangskode",
+  "label.custom-range": "Tilpasset interval",
+  "label.dashboard": "Betjeningspanel",
+  "label.default-date-range": "Default date range",
+  "label.domain": "Domæne",
+  "label.enable-share-url": "Aktivér delings-URL",
+  "label.invalid": "Ugyldig",
+  "label.invalid-domain": "Ugyldigt domæne",
+  "label.last-days": "Sidste {x} dage",
+  "label.last-hours": "Sidste {x} timer",
+  "label.logged-in-as": "Loggede ind som {username}",
+  "label.logout": "Log ud",
+  "label.name": "Navn",
+  "label.new-password": "Ny adgangskode",
+  "label.password": "Adgangskode",
+  "label.passwords-dont-match": "Adgangskoder matcher ikke",
+  "label.profile": "Profil",
+  "label.required": "Påkrævet",
+  "label.settings": "Indstillinger",
+  "label.this-month": "Denne måned",
+  "label.this-week": "Denne uge",
+  "label.this-year": "Dette år",
+  "label.timezone": "Timezone",
+  "label.today": "Idag",
+  "label.unknown": "Ukendt",
+  "label.username": "Brugernavn",
+  "label.websites": "Hjemmesider",
+  "message.active-users": "{x} Nuværende brugere {x, plural, one {visitor} other {visitors}}",
+  "message.confirm-delete": "Er du sikker på at du vil slette {target}?",
+  "message.copied": "Kopieret!",
+  "message.delete-warning": "Alle tilknyttede data slettes også.",
+  "message.failure": "Noget gik galt.",
+  "message.get-share-url": "Få delings-URL",
+  "message.get-tracking-code": "Få sporingskode",
+  "message.go-to-settings": "Gå til betjeningspanel",
+  "message.incorrect-username-password": "Ugyldigt brugernavn/adgangskode.",
+  "message.no-data-available": "Ingen data tilgængelig.",
+  "message.no-websites-configured": "Du har ikke konfigureret nogen websteder.",
+  "message.page-not-found": "Side ikke fundet.",
+  "message.powered-by": "Drevet af {name}",
+  "message.save-success": "Gemt.",
+  "message.share-url": "Dette er den offentligt delings-URL til {target}.",
+  "message.track-stats": "For at spore statistik for {target} skal du placere følgende kode i {head} sektionen på dit websted.",
+  "message.type-delete": "Skriv {delete} i boksen nedenfor, for at bekræfte.",
+  "metrics.actions": "Handlinger",
+  "metrics.average-visit-time": "Gennemsnitlig besøgstid",
+  "metrics.bounce-rate": "Afvisningsprocent",
+  "metrics.browsers": "Browsere",
+  "metrics.countries": "Lande",
+  "metrics.device.desktop": "Desktop",
+  "metrics.device.laptop": "Laptop",
+  "metrics.device.mobile": "Mobil",
+  "metrics.device.tablet": "Tablet",
+  "metrics.devices": "Enheder",
+  "metrics.events": "Hændelser",
+  "metrics.filter.combined": "Kombineret",
+  "metrics.filter.domain-only": "Kun domæne",
+  "metrics.filter.raw": "Rå",
+  "metrics.operating-systems": "Operativsystemer",
+  "metrics.page-views": "Sidevisninger",
+  "metrics.pages": "Sider",
+  "metrics.referrers": "Henvisninger",
+  "metrics.unique-visitors": "Unikke besøgende",
+  "metrics.views": "Visninger",
+  "metrics.visitors": "Besøgende",
+  "title.add-account": "Tilføj konto",
+  "title.add-website": "Tilføj hjemmeside",
+  "title.change-password": "Skift adgangskode",
+  "title.delete-account": "Slet konto",
+  "title.delete-website": "Slet hjemmeside",
+  "title.edit-account": "Rediger konto",
+  "title.edit-website": "Rediger hjemmeside",
+  "title.share-url": "Del URL",
+  "title.tracking-code": "Sporingskode"
+}

lang/de-DE.json

@@ -1,25 +1,27 @@
 {
-  "active-users.message": "{x} {x, plural, one {aktiver Besucher} other {aktive Besucher}}",
   "button.add-account": "Konto hinzufügen",
   "button.add-website": "Webseite hinzufügen",
   "button.back": "Zurück",
   "button.cancel": "Abbrechen",
   "button.change-password": "Passwort ändern",
   "button.copy-to-clipboard": "In die Zwischenablage kopieren",
+  "button.date-range": "Datumsbereich",
   "button.delete": "Löschen",
   "button.edit": "Bearbeiten",
   "button.login": "Anmelden",
   "button.more": "Mehr",
+  "button.refresh": "Aktualisieren",
+  "button.reset": "Zurücksetzen",
   "button.save": "Speichern",
+  "button.single-day": "Ein Tag",
   "button.view-details": "Details anzeigen",
-  "button.websites": "Webseiten",
+  "label.accounts": "Konten",
-  "footer.powered-by": "Powered by",
-  "header.nav.dashboard": "Übersicht",
-  "header.nav.settings": "Einstellungen",
   "label.administrator": "Administrator",
   "label.confirm-password": "Passwort wiederholen",
   "label.current-password": "Derzeitiges Passwort",
-  "label.custom-range": "Custom range",
+  "label.custom-range": "Benutzerdefinierter Bereich",
+  "label.dashboard": "Übersicht",
+  "label.default-date-range": "Voreingestellter Datumsbereich",
   "label.domain": "Domain",
   "label.enable-share-url": "Freigabe-URL aktivieren",
   "label.invalid": "Ungültig",
@@ -32,19 +34,30 @@
   "label.new-password": "Neues Passwort",
   "label.password": "Passwort",
   "label.passwords-dont-match": "Passwörter stimmen nicht überein",
+  "label.profile": "Profil",
   "label.required": "Erforderlich",
+  "label.settings": "Einstellungen",
   "label.this-month": "Diesen Monat",
   "label.this-week": "Diese Woche",
   "label.this-year": "Dieses Jahr",
+  "label.timezone": "Zeitzone",
   "label.today": "Heute",
+  "label.unknown": "Unbekannt",
   "label.username": "Benutzername",
+  "label.websites": "Webseiten",
+  "message.active-users": "{x} {x, plural, one {aktiver Besucher} other {aktive Besucher}}",
   "message.confirm-delete": "Sind sie sich sicher {target} zu löschen?",
   "message.copied": "In Zwischenablage kopiert!",
   "message.delete-warning": "Alle zugehörigen Daten werden auch gelöscht.",
   "message.failure": "Es it ein Fehler aufgetreten.",
+  "message.get-share-url": "Freigabe-URL abrufen",
+  "message.get-tracking-code": "Erstelle Tracking Kennung",
+  "message.go-to-settings": "Zu den Einstellungen",
   "message.incorrect-username-password": "Falsches Passwort oder Benutzername.",
   "message.no-data-available": "Keine Daten vorhanden.",
+  "message.no-websites-configured": "Es ist keine Webseite vorhanden.",
   "message.page-not-found": "Seite nicht gefunden.",
+  "message.powered-by": "Ermöglicht durch {name}",
   "message.save-success": "Erfolgreich gespeichert.",
   "message.share-url": "Dies ist der öffentliche URL zum Teilen für {target}.",
   "message.track-stats": "Um die Statistiken für {target} zu übermitteln, platzieren Sie bitte den folgenden Quelltext im {head} ihrer Homepage.",
@@ -54,8 +67,12 @@
   "metrics.bounce-rate": "Absprungrate",
   "metrics.browsers": "Browsers",
   "metrics.countries": "Länder",
+  "metrics.device.desktop": "Desktop",
+  "metrics.device.laptop": "Laptop",
+  "metrics.device.mobile": "Mobiltelefon",
+  "metrics.device.tablet": "Tablet",
   "metrics.devices": "Geräte",
-  "metrics.events": "Events",
+  "metrics.events": "Ereignisse",
   "metrics.filter.combined": "Kombiniert",
   "metrics.filter.domain-only": "Nur diese Domain",
   "metrics.filter.raw": "Rohdaten",
@@ -66,11 +83,6 @@
   "metrics.unique-visitors": "Eindeutige Besucher",
   "metrics.views": "Aufrufe",
   "metrics.visitors": "Besucher",
-  "placeholder.message.go-to-settings": "Zu den Einstellungen",
-  "placeholder.message.no-websites-configured": "Es ist keine Webseite vorhanden.",
-  "settings.accounts": "Konten",
-  "settings.profile": "Profil",
-  "settings.websites": "Webseiten",
   "title.add-account": "Konto hinzugfügen",
   "title.add-website": "Webseite hinzufügen",
   "title.change-password": "Passwort ändern",
@@ -79,7 +91,5 @@
   "title.edit-account": "Konto bearbeiten",
   "title.edit-website": "Webseite bearbeiten",
   "title.share-url": "Freigabe-URL",
-  "title.tracking-code": "Tracking Kennung",
+  "title.tracking-code": "Tracking Kennung"
-  "tooltip.get-share-url": "Freigabe-URL abrufen",
-  "tooltip.get-tracking-code": "Erstelle Tracking Kennung"
 }

lang/el-GR.json

@@ -0,0 +1,95 @@
+{
+  "button.add-account": "Προσθήκη λογαριασμού",
+  "button.add-website": "Προσθήκη ιστότοπου",
+  "button.back": "Πίσω",
+  "button.cancel": "Ακύρωση",
+  "button.change-password": "Αλλαγή κωδικού",
+  "button.copy-to-clipboard": "Αντιγραφή στο πρόχειρο",
+  "button.date-range": "Εύρος ημερομηνιών",
+  "button.delete": "Διαγραφή",
+  "button.edit": "Επεξεργασία",
+  "button.login": "Είσοδος",
+  "button.more": "Περισσότερα",
+  "button.refresh": "Ανανέωση",
+  "button.reset": "Επαναφορά",
+  "button.save": "Αποθήκευση",
+  "button.single-day": "Ημερήσια",
+  "button.view-details": "Λεπτομέρειες",
+  "label.accounts": "Λογαριασμοί",
+  "label.administrator": "Διαχειριστής",
+  "label.confirm-password": "Επιβεβαίωση κωδικού",
+  "label.current-password": "Τωρινός κωδικός πρόσβασης",
+  "label.custom-range": "Προσαρμοσμένο εύρος",
+  "label.dashboard": "Πίνακας",
+  "label.default-date-range": "Προεπιλεγμένο εύρος ημερομηνιών",
+  "label.domain": "Τομέας",
+  "label.enable-share-url": "Ενεργοποίηση κοινής χρήσης URL",
+  "label.invalid": "Μη έγκυρο",
+  "label.invalid-domain": "Μη έγκυρος τομέας",
+  "label.last-days": "Τελευταίες {x} ημέρες",
+  "label.last-hours": "Τελευταίες {x} ώρες",
+  "label.logged-in-as": "Συνδεθήκατε ως {username}",
+  "label.logout": "Αποσύνδεση",
+  "label.name": "Όνομα",
+  "label.new-password": "Νέος κωδικός",
+  "label.password": "Κωδικός",
+  "label.passwords-dont-match": "Οι κωδικοί πρόσβασης δεν ταιριάζουν",
+  "label.profile": "Προφίλ",
+  "label.required": "Απαιτείται",
+  "label.settings": "Ρυθμίσεις",
+  "label.this-month": "Αυτο το μήνα",
+  "label.this-week": "Αυτή την εβδομάδα",
+  "label.this-year": "Αυτή την χρονιά",
+  "label.timezone": "Ζώνη ώρας",
+  "label.today": "Σήμερα",
+  "label.unknown": "Άγνωστο",
+  "label.username": "Όνομα χρήστη",
+  "label.websites": "Ιστότοποι",
+  "message.active-users": "{x} ενεργοί {x, plural, one {επισκέπτης} other {επισκέπτες}}",
+  "message.confirm-delete": "Είστε βέβαιοι ότι θέλετε να διαγράψετε το {target};",
+  "message.copied": "Αντιγράφηκε!",
+  "message.delete-warning": "Όλα τα σχετικά δεδομένα θα διαγραφούν επίσης.",
+  "message.failure": "Κάτι πήγε στραβά.",
+  "message.get-share-url": "Λήψη URL κοινής χρήσης",
+  "message.get-tracking-code": "Λήψη κώδικα παρακολούθησης",
+  "message.go-to-settings": "Μεταβείτε στις ρυθμίσεις",
+  "message.incorrect-username-password": "Εσφαλμένο όνομα χρήστη / κωδικός πρόσβασης.",
+  "message.no-data-available": "Δεν υπάρχουν διαθέσιμα δεδομένα.",
+  "message.no-websites-configured": "Δεν έχετε ρυθμίσει κανένα ιστότοπο.",
+  "message.page-not-found": "Η σελίδα δεν βρέθηκε.",
+  "message.powered-by": "Με την υποστήριξη του {name}",
+  "message.save-success": "Αποθηκεύτηκε επιτυχώς.",
+  "message.share-url": "Αυτό είναι το κοινόχρηστο URL για το {target}.",
+  "message.track-stats": "Για να παρακολουθείτε στατιστικά στοιχεία για {target}, τοποθετήστε τον ακόλουθο κώδικα στην ενότητα {head} του ιστότοπού σας.",
+  "message.type-delete": "Πληκτρολογήστε {delete} στο παρακάτω πλαίσιο για επιβεβαίωση.",
+  "metrics.actions": "Ενέργειες",
+  "metrics.average-visit-time": "Μέσος χρόνος επίσκεψης",
+  "metrics.bounce-rate": "Ποσοστό αναπήδησης",
+  "metrics.browsers": "Προγράμματα περιήγησης",
+  "metrics.countries": "Χώρες",
+  "metrics.device.desktop": "Σταθερός υπολογιστής",
+  "metrics.device.laptop": "Λάπτοπ",
+  "metrics.device.mobile": "Κινητό",
+  "metrics.device.tablet": "Τάμπλετ",
+  "metrics.devices": "Συσκευές",
+  "metrics.events": "Γεγονότα",
+  "metrics.filter.combined": "Σε συνδυασμό",
+  "metrics.filter.domain-only": "Μόνο τομέας",
+  "metrics.filter.raw": "Ακατέργαστο",
+  "metrics.operating-systems": "Λειτουργικά συστήματα",
+  "metrics.page-views": "Προβολές σελίδας",
+  "metrics.pages": "Σελίδες",
+  "metrics.referrers": "Παραπομπές",
+  "metrics.unique-visitors": "Μοναδικοί επισκέπτες",
+  "metrics.views": "Προβολές",
+  "metrics.visitors": "Επισκέπτες",
+  "title.add-account": "Προσθήκη λογαριασμού",
+  "title.add-website": "Προσθήκη ιστότοπου",
+  "title.change-password": "Αλλαγή κωδικού",
+  "title.delete-account": "Διαγραφή λογαριασμού",
+  "title.delete-website": "Διαγραφή ιστότοπου",
+  "title.edit-account": "Επεξεργασία λογαριασμού",
+  "title.edit-website": "Επεξεργασία ιστότοπου",
+  "title.share-url": "Κοινοποίηση διεύθυνσης URL",
+  "title.tracking-code": "Κωδικός παρακολούθησης"
+}

lang/en-US.json

@@ -1,25 +1,27 @@
 {
-  "active-users.message": "{x} current {x, plural, one {visitor} other {visitors}}",
   "button.add-account": "Add account",
   "button.add-website": "Add website",
   "button.back": "Back",
   "button.cancel": "Cancel",
   "button.change-password": "Change password",
   "button.copy-to-clipboard": "Copy to clipboard",
+  "button.date-range": "Date range",
   "button.delete": "Delete",
   "button.edit": "Edit",
   "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",
-  "button.websites": "Websites",
+  "label.accounts": "Accounts",
-  "footer.powered-by": "Powered by",
-  "header.nav.dashboard": "Dashboard",
-  "header.nav.settings": "Settings",
   "label.administrator": "Administrator",
   "label.confirm-password": "Confirm password",
   "label.current-password": "Current password",
   "label.custom-range": "Custom range",
+  "label.dashboard": "Dashboard",
+  "label.default-date-range": "Default date range",
   "label.domain": "Domain",
   "label.enable-share-url": "Enable share URL",
   "label.invalid": "Invalid",
@@ -32,19 +34,30 @@
   "label.new-password": "New password",
   "label.password": "Password",
   "label.passwords-dont-match": "Passwords don't match",
+  "label.profile": "Profile",
   "label.required": "Required",
+  "label.settings": "Settings",
   "label.this-month": "This month",
   "label.this-week": "This week",
   "label.this-year": "This year",
+  "label.timezone": "Timezone",
   "label.today": "Today",
+  "label.unknown": "Unknown",
   "label.username": "Username",
+  "label.websites": "Websites",
+  "message.active-users": "{x} current {x, plural, one {visitor} other {visitors}}",
   "message.confirm-delete": "Are your sure you want to delete {target}?",
   "message.copied": "Copied!",
   "message.delete-warning": "All associated data will be deleted as well.",
   "message.failure": "Something went wrong.",
+  "message.get-share-url": "Get share URL",
+  "message.get-tracking-code": "Get tracking code",
+  "message.go-to-settings": "Go to settings",
   "message.incorrect-username-password": "Incorrect username/password.",
   "message.no-data-available": "No data available.",
+  "message.no-websites-configured": "You don't have any websites configured.",
   "message.page-not-found": "Page not found.",
+  "message.powered-by": "Powered by {name}",
   "message.save-success": "Saved successfully.",
   "message.share-url": "This is the publicly shared URL for {target}.",
   "message.track-stats": "To track stats for {target}, place the following code in the {head} section of your website.",
@@ -54,6 +67,10 @@
   "metrics.bounce-rate": "Bounce rate",
   "metrics.browsers": "Browsers",
   "metrics.countries": "Countries",
+  "metrics.device.desktop": "Desktop",
+  "metrics.device.laptop": "Laptop",
+  "metrics.device.mobile": "Mobile",
+  "metrics.device.tablet": "Tablet",
   "metrics.devices": "Devices",
   "metrics.events": "Events",
   "metrics.filter.combined": "Combined",
@@ -66,11 +83,6 @@
   "metrics.unique-visitors": "Unique visitors",
   "metrics.views": "Views",
   "metrics.visitors": "Visitors",
-  "placeholder.message.go-to-settings": "Go to settings",
-  "placeholder.message.no-websites-configured": "You don't have any websites configured.",
-  "settings.accounts": "Accounts",
-  "settings.profile": "Profile",
-  "settings.websites": "Websites",
   "title.add-account": "Add account",
   "title.add-website": "Add website",
   "title.change-password": "Change password",
@@ -79,7 +91,5 @@
   "title.edit-account": "Edit account",
   "title.edit-website": "Edit website",
   "title.share-url": "Share URL",
-  "title.tracking-code": "Tracking code",
+  "title.tracking-code": "Tracking code"
-  "tooltip.get-share-url": "Get share URL",
-  "tooltip.get-tracking-code": "Get tracking code"
 }

lang/es-MX.json

@@ -1,25 +1,27 @@
 {
-  "active-users.message": "{x} {x, plural, one {activo} other {activos}}",
   "button.add-account": "Agregar usuario",
   "button.add-website": "Agregar sitio",
   "button.back": "Atrás",
   "button.cancel": "Cancelar",
   "button.change-password": "Cambiar contraseña",
   "button.copy-to-clipboard": "Copiar al portapapeles",
+  "button.date-range": "Date range",
   "button.delete": "Eliminar",
   "button.edit": "Editar",
   "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",
-  "button.websites": "Sitios",
+  "label.accounts": "Usuarios",
-  "footer.powered-by": "Desarrollado con",
-  "header.nav.dashboard": "Panel de control",
-  "header.nav.settings": "Configuraciones",
   "label.administrator": "Administrador",
   "label.confirm-password": "Confirmar contraseña",
   "label.current-password": "Contraseña actual",
   "label.custom-range": "Custom range",
+  "label.dashboard": "Panel de control",
+  "label.default-date-range": "Default date range",
   "label.domain": "Dominio",
   "label.enable-share-url": "Habilitar compartir URL",
   "label.invalid": "Inválido",
@@ -32,19 +34,30 @@
   "label.new-password": "Nueva contraseña",
   "label.password": "Contraseña",
   "label.passwords-dont-match": "Las contraseñas no coinciden",
+  "label.profile": "Perfil",
   "label.required": "Requerido",
+  "label.settings": "Configuraciones",
   "label.this-month": "Este mes",
   "label.this-week": "Esta semana",
   "label.this-year": "Este año",
+  "label.timezone": "Timezone",
   "label.today": "Hoy",
+  "label.unknown": "Unknown",
   "label.username": "Nombre de usuario",
+  "label.websites": "Sitios",
+  "message.active-users": "{x} {x, plural, one {activo} other {activos}}",
   "message.confirm-delete": "¿Estás seguro(a) de querer eliminar {target}?",
   "message.copied": "Copiado!",
   "message.delete-warning": "Toda la información relacionada será eliminada.",
   "message.failure": "Algo falló.",
+  "message.get-share-url": "Obtener URL para compartir",
+  "message.get-tracking-code": "Obtener código de rastreo",
+  "message.go-to-settings": "Ir a la configuración",
   "message.incorrect-username-password": "Nombre de usuario o contraseña incorrectos.",
   "message.no-data-available": "Sin información disponible.",
+  "message.no-websites-configured": "No tienes ningún sitio configurado.",
   "message.page-not-found": "Page not found",
+  "message.powered-by": "Desarrollado con {name}",
   "message.save-success": "Guardado exitosamente.",
   "message.share-url": "Esta es la URL compartida públicamente para {target}.",
   "message.track-stats": "Para registrar estadísticas para {target}, copia el siguiente código dentro de la etiqueta {head} de tu sitio.",
@@ -54,6 +67,10 @@
   "metrics.bounce-rate": "Porcentaje de rebote",
   "metrics.browsers": "Navegadores",
   "metrics.countries": "Países",
+  "metrics.device.desktop": "Desktop",
+  "metrics.device.laptop": "Laptop",
+  "metrics.device.mobile": "Mobile",
+  "metrics.device.tablet": "Tablet",
   "metrics.devices": "Dispositivos",
   "metrics.events": "Eventos",
   "metrics.filter.combined": "Combinado",
@@ -66,11 +83,6 @@
   "metrics.unique-visitors": "Visitantes únicos",
   "metrics.views": "Vistas",
   "metrics.visitors": "Visitantes",
-  "placeholder.message.go-to-settings": "Ir a la configuración",
-  "placeholder.message.no-websites-configured": "No tienes ningún sitio configurado.",
-  "settings.accounts": "Usuarios",
-  "settings.profile": "Perfil",
-  "settings.websites": "Sitios",
   "title.add-account": "Agregar usuario",
   "title.add-website": "Agregar sitio",
   "title.change-password": "Cambiar contraseña",
@@ -79,7 +91,5 @@
   "title.edit-account": "Editar usuario",
   "title.edit-website": "Editar sitio",
   "title.share-url": "Compartir URL",
-  "title.tracking-code": "Código de rastreo",
+  "title.tracking-code": "Código de rastreo"
-  "tooltip.get-share-url": "Obtener URL para compartir",
-  "tooltip.get-tracking-code": "Obtener código de rastreo"
 }

lang/fr-FR.json

@@ -0,0 +1,95 @@
+{
+  "button.add-account": "Ajouter un compte",
+  "button.add-website": "Ajouter un site",
+  "button.back": "Retour",
+  "button.cancel": "Annuler",
+  "button.change-password": "Changer de mot de passse",
+  "button.copy-to-clipboard": "Copier dans le presse papier",
+  "button.date-range": "Date range",
+  "button.delete": "Supprimer",
+  "button.edit": "Modifier",
+  "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",
+  "label.accounts": "Comptes",
+  "label.administrator": "Administrateur",
+  "label.confirm-password": "Confirmation du mot de passe",
+  "label.current-password": "Mot de passe actuel",
+  "label.custom-range": "Plage personnalisée",
+  "label.dashboard": "Tableau de bord",
+  "label.default-date-range": "Default date range",
+  "label.domain": "Domaine",
+  "label.enable-share-url": "Activer le partage d'URL",
+  "label.invalid": "Invalide",
+  "label.invalid-domain": "Domaine invalide",
+  "label.last-days": "{x} derniers jours",
+  "label.last-hours": "{x} dernières heures",
+  "label.logged-in-as": "Connecté en tant que {username}",
+  "label.logout": "Déconnexion",
+  "label.name": "Nom",
+  "label.new-password": "Nouveau mot de passe",
+  "label.password": "Mot de passe",
+  "label.passwords-dont-match": "Les mots de passe ne correspondent pas",
+  "label.profile": "Profile",
+  "label.required": "Requis",
+  "label.settings": "Paramètres",
+  "label.this-month": "Ce mois ci",
+  "label.this-week": "Cette semaine",
+  "label.this-year": "Cette année",
+  "label.timezone": "Timezone",
+  "label.today": "Aujourd'hui",
+  "label.unknown": "Unknown",
+  "label.username": "Nom d'utilisateur",
+  "label.websites": "Sites",
+  "message.active-users": "{x} {x, plural, one {visiteur} other {visiteurs}} actuellement",
+  "message.confirm-delete": "Êtes-vous sur de vouloir supprimer {target}?",
+  "message.copied": "Copié !",
+  "message.delete-warning": "Toutes les données associées seront également supprimées.",
+  "message.failure": "Un problème est survenu.",
+  "message.get-share-url": "Obtenez l'URL de partage",
+  "message.get-tracking-code": "Obtenez le code de suivi",
+  "message.go-to-settings": "Aller aux paramètres",
+  "message.incorrect-username-password": "nom d'utilisateurs/mot de passe incorrect.",
+  "message.no-data-available": "Pas de données disponibles.",
+  "message.no-websites-configured": "Vous n'avez configuré aucun site Web.",
+  "message.page-not-found": "Page non trouvée.",
+  "message.powered-by": "Propulsé par {name}",
+  "message.save-success": "Enregistré avec succès.",
+  "message.share-url": "Ceci est l'URL partagée pour {target}.",
+  "message.track-stats": "Pour suivre les statistiques de {target}, placez le code suivant dans la section {head} de votre site Web.",
+  "message.type-delete": "Tapez {delete} dans la case ci-dessous pour confirmer.",
+  "metrics.actions": "Actions",
+  "metrics.average-visit-time": "Temps de visite moyen",
+  "metrics.bounce-rate": "Taux de rebond",
+  "metrics.browsers": "Navigateurs",
+  "metrics.countries": "Pays",
+  "metrics.device.desktop": "Desktop",
+  "metrics.device.laptop": "Laptop",
+  "metrics.device.mobile": "Mobile",
+  "metrics.device.tablet": "Tablet",
+  "metrics.devices": "Appareils",
+  "metrics.events": "Événements",
+  "metrics.filter.combined": "Combiné",
+  "metrics.filter.domain-only": "Domaine uniquement",
+  "metrics.filter.raw": "Brute",
+  "metrics.operating-systems": "Systèmes d'exploitation",
+  "metrics.page-views": "Pages vues",
+  "metrics.pages": "Pages",
+  "metrics.referrers": "URL Référentes",
+  "metrics.unique-visitors": "Visiteurs uniques",
+  "metrics.views": "Vues",
+  "metrics.visitors": "Visiteurs",
+  "title.add-account": "Ajouter un compte",
+  "title.add-website": "Ajouter un site",
+  "title.change-password": "Changer le mot de passe",
+  "title.delete-account": "Supprimer le compte",
+  "title.delete-website": "Suprimer le site",
+  "title.edit-account": "Modifier le compte",
+  "title.edit-website": "Modifier le site",
+  "title.share-url": "Partager l'URL",
+  "title.tracking-code": "Code de suivi"
+}

lang/ja-JP.json

@@ -1,25 +1,27 @@
 {
-  "active-users.message": "{x}人が閲覧中です。",
   "button.add-account": "アカウントを追加する",
   "button.add-website": "Webサイトを追加する",
   "button.back": "戻る",
   "button.cancel": "キャンセル",
   "button.change-password": "パスワード変更",
   "button.copy-to-clipboard": "クリップボードにコピー",
+  "button.date-range": "期間",
   "button.delete": "削除",
   "button.edit": "編集",
   "button.login": "ログイン",
   "button.more": "さらに表示",
+  "button.refresh": "更新",
+  "button.reset": "リセット",
   "button.save": "保存",
+  "button.single-day": "一日のみ",
   "button.view-details": "詳細表示",
-  "button.websites": "Webサイト",
+  "label.accounts": "アカウント",
-  "footer.powered-by": "Powered by",
-  "header.nav.dashboard": "ダッシュボード",
-  "header.nav.settings": "設定",
   "label.administrator": "管理者",
   "label.confirm-password": "パスワード（確認）",
   "label.current-password": "現在のパスワード",
-  "label.custom-range": "Custom range",
+  "label.custom-range": "期間を指定する",
+  "label.dashboard": "ダッシュボード",
+  "label.default-date-range": "最初に表示する期間",
   "label.domain": "ドメイン",
   "label.enable-share-url": "共有リンクを有効にする",
   "label.invalid": "無効",
@@ -32,19 +34,30 @@
   "label.new-password": "新しいパスワード",
   "label.password": "パスワード",
   "label.passwords-dont-match": "パスワードが一致しません",
+  "label.profile": "プロファイル",
   "label.required": "必須",
+  "label.settings": "設定",
   "label.this-month": "今月",
   "label.this-week": "今週",
   "label.this-year": "今年",
+  "label.timezone": "タイムゾーン",
   "label.today": "今日",
+  "label.unknown": "不明",
   "label.username": "ユーザー名",
+  "label.websites": "Webサイト",
+  "message.active-users": "{x}人が閲覧中です。",
   "message.confirm-delete": "{target}を削除してもよろしいですか？",
   "message.copied": "コピーしました！",
   "message.delete-warning": "関連するすべてのデータも削除されます。",
   "message.failure": "問題が発生しました。",
+  "message.get-share-url": "共有リンクを取得",
+  "message.get-tracking-code": "トラッキングコードを取得",
+  "message.go-to-settings": "設定する",
   "message.incorrect-username-password": "ユーザー名/パスワードが正しくありません。",
   "message.no-data-available": "データがありません。",
+  "message.no-websites-configured": "Webサイトが設定されていません。",
   "message.page-not-found": "ページが見つかりません。",
+  "message.powered-by": "Powered by {name}",
   "message.save-success": "正常に保存されました。",
   "message.share-url": "これは {target} の共有リンクです。",
   "message.track-stats": "{target}のアクセス解析を開始するには、次のコードをWebサイトの{head}セクションへ追加してください。",
@@ -54,6 +67,10 @@
   "metrics.bounce-rate": "直帰率",
   "metrics.browsers": "ブラウザ",
   "metrics.countries": "国",
+  "metrics.device.desktop": "デスクトップ",
+  "metrics.device.laptop": "ノートPC",
+  "metrics.device.mobile": "携帯電話",
+  "metrics.device.tablet": "タブレット",
   "metrics.devices": "デバイス",
   "metrics.events": "イベント",
   "metrics.filter.combined": "パスまで",
@@ -66,11 +83,6 @@
   "metrics.unique-visitors": "ユニーク訪問者数",
   "metrics.views": "閲覧数",
   "metrics.visitors": "訪問者数",
-  "placeholder.message.go-to-settings": "設定する",
-  "placeholder.message.no-websites-configured": "Webサイトが設定されていません。",
-  "settings.accounts": "アカウント",
-  "settings.profile": "プロファイル",
-  "settings.websites": "Webサイト",
   "title.add-account": "アカウントの追加",
   "title.add-website": "Webサイトの追加",
   "title.change-password": "パスワード変更",
@@ -79,7 +91,5 @@
   "title.edit-account": "アカウントの編集",
   "title.edit-website": "Webサイトの編集",
   "title.share-url": "共有リンク",
-  "title.tracking-code": "トラッキングコード",
+  "title.tracking-code": "トラッキングコード"
-  "tooltip.get-share-url": "共有リンクを取得",
-  "tooltip.get-tracking-code": "トラッキングコードを取得"
 }

lang/mn-MN.json

@@ -1,25 +1,27 @@
 {
-  "active-users.message": "одоо {x} {x, plural, one {зочин} other {зочин}} байна",
   "button.add-account": "Хэрэглэгч нэмэх",
   "button.add-website": "Веб нэмэх",
   "button.back": "Буцах",
   "button.cancel": "Цуцлах",
   "button.change-password": "Нууц үг солих",
   "button.copy-to-clipboard": "Хуулах",
+  "button.date-range": "Date range",
   "button.delete": "Устгах",
   "button.edit": "Засах",
   "button.login": "Нэвтрэх",
   "button.more": "Цааш",
+  "button.refresh": "Refresh",
+  "button.reset": "Reset",
   "button.save": "Хадгалах",
+  "button.single-day": "Single day",
   "button.view-details": "Дэлгэрүүлж харах",
-  "button.websites": "Вебүүд",
+  "label.accounts": "Хэрэглэгчид",
-  "footer.powered-by": "Powered by",
-  "header.nav.dashboard": "Хянах самбар",
-  "header.nav.settings": "Тохиргоо",
   "label.administrator": "Админ",
   "label.confirm-password": "Шинэ нууц үгээ давтах",
   "label.current-password": "Ашиглаж буй нууц үг",
   "label.custom-range": "Дурын хугацаа",
+  "label.dashboard": "Хянах самбар",
+  "label.default-date-range": "Default date range",
   "label.domain": "Домэйн",
   "label.enable-share-url": "Хуваалцах холбоос идэвхжүүлэх",
   "label.invalid": "Буруу",
@@ -32,19 +34,30 @@
   "label.new-password": "Шинэ нууц үг",
   "label.password": "Нууц үг",
   "label.passwords-dont-match": "Нууц үг тохирохгүй байна",
+  "label.profile": "Бүртгэл",
   "label.required": "Шаардлагатай",
+  "label.settings": "Тохиргоо",
   "label.this-month": "Энэ сар",
   "label.this-week": "Энэ долоо хоног",
   "label.this-year": "Энэ жил",
+  "label.timezone": "Timezone",
   "label.today": "Өнөөдөр",
+  "label.unknown": "Unknown",
   "label.username": "Хэрэглэгчийн нэр",
+  "label.websites": "Вебүүд",
+  "message.active-users": "одоо {x} {x, plural, one {зочин} other {зочин}} байна",
   "message.confirm-delete": "Та {target}-г устгахдаа итгэлтэй байна уу?",
   "message.copied": "Хуулсан!",
   "message.delete-warning": "Үүнтэй холбоотой бүх өгөгдөл устах болно.",
   "message.failure": "Ямар нэг зүйл буруу боллоо.",
+  "message.get-share-url": "Хуваалцах холбоос авах",
+  "message.get-tracking-code": "Мөрдөх код авах",
+  "message.go-to-settings": "Тохиргоо руу очих",
   "message.incorrect-username-password": "Буруу хэрэглэгчийн нэр/нууц үг.",
   "message.no-data-available": "Өгөгдөл алга.",
+  "message.no-websites-configured": "Та ямар нэгэн веб тохируулаагүй байна.",
   "message.page-not-found": "Хуудас олдсонгүй.",
+  "message.powered-by": "Powered by {name}",
   "message.save-success": "Амжилттай хадгаллаа.",
   "message.share-url": "{target}-г нийтэд хуваалцах холбоос.",
   "message.track-stats": "{target} вебийн статистикийг бүртгэхийн тулд доорх кодыг вебийнхээ {head} хэсэгт байрлуулна уу.",
@@ -54,6 +67,10 @@
   "metrics.bounce-rate": "Нэг хуудас үзээд гарсан",
   "metrics.browsers": "Хөтөч",
   "metrics.countries": "Улс",
+  "metrics.device.desktop": "Desktop",
+  "metrics.device.laptop": "Laptop",
+  "metrics.device.mobile": "Mobile",
+  "metrics.device.tablet": "Tablet",
   "metrics.devices": "Төхөөрөмж",
   "metrics.events": "Үйлдэл",
   "metrics.filter.combined": "Нэгтгэсэн",
@@ -66,11 +83,6 @@
   "metrics.unique-visitors": "Зочид",
   "metrics.views": "Үзсэн",
   "metrics.visitors": "Зочид",
-  "placeholder.message.go-to-settings": "Тохиргоо руу очих",
-  "placeholder.message.no-websites-configured": "Та ямар нэгэн веб тохируулаагүй байна.",
-  "settings.accounts": "Хэрэглэгчид",
-  "settings.profile": "Бүртгэл",
-  "settings.websites": "Вебүүд",
   "title.add-account": "Хэрэглэгч нэмэх",
   "title.add-website": "Веб нэмэх",
   "title.change-password": "Нууц үг солих",
@@ -79,7 +91,5 @@
   "title.edit-account": "Хэрэглэгч засах",
   "title.edit-website": "Веб засах",
   "title.share-url": "Хуваалцах холбоос",
-  "title.tracking-code": "Мөрдөх код",
+  "title.tracking-code": "Мөрдөх код"
-  "tooltip.get-share-url": "Хуваалцах холбоос авах",
-  "tooltip.get-tracking-code": "Мөрдөх код авах"
 }

lang/nl-NL.json

@@ -1,25 +1,27 @@
 {
-  "active-users.message": "{x} actieve {x, plural, one {bezoeker} other {bezoekers}}",
   "button.add-account": "Account toevoegen",
   "button.add-website": "Website toevoegen",
   "button.back": "Terug",
   "button.cancel": "Annuleren",
   "button.change-password": "Wachtwoord wijzigen",
   "button.copy-to-clipboard": "Kopiëer naar klembord",
+  "button.date-range": "Datumbereik",
   "button.delete": "Verwijderen",
   "button.edit": "Bewerken",
   "button.login": "Inloggen",
   "button.more": "Toon meer",
+  "button.refresh": "Vernieuwen",
+  "button.reset": "Reset",
   "button.save": "Opslaan",
+  "button.single-day": "Enkele dag",
   "button.view-details": "Meer details",
-  "button.websites": "Websites",
+  "label.accounts": "Accounts",
-  "footer.powered-by": "mogelijk gemaakt door",
-  "header.nav.dashboard": "Dashboard",
-  "header.nav.settings": "Instellingen",
   "label.administrator": "Administrator",
   "label.confirm-password": "Wachtwoord bevestigen",
   "label.current-password": "Huidig wachtwoord",
-  "label.custom-range": "Custom range",
+  "label.custom-range": "Aangepast bereik",
+  "label.dashboard": "Dashboard",
+  "label.default-date-range": "Default date range",
   "label.domain": "Domein",
   "label.enable-share-url": "Sta delen via openbare URL toe",
   "label.invalid": "Ongeldig",
@@ -32,19 +34,30 @@
   "label.new-password": "Nieuw wachtwoord",
   "label.password": "Wachtwoord",
   "label.passwords-dont-match": "Wachtwoorden komen niet overeen",
+  "label.profile": "Profiel",
   "label.required": "Verplicht",
+  "label.settings": "Instellingen",
   "label.this-month": "Deze maand",
   "label.this-week": "Deze week",
   "label.this-year": "Dit jaar",
+  "label.timezone": "Timezone",
   "label.today": "Vandaag",
+  "label.unknown": "Onbekend",
   "label.username": "Gebruikersnaam",
+  "label.websites": "Websites",
+  "message.active-users": "{x} actieve {x, plural, one {bezoeker} other {bezoekers}}",
   "message.confirm-delete": "Weet je zeker dat je {target} wilt verwijderen?",
   "message.copied": "Gekopiëerd!",
   "message.delete-warning": "Alle verwante gegezens zullen ook verwijderd worden.",
   "message.failure": "Er is iets misgegaan.",
+  "message.get-share-url": "Openbare URL",
+  "message.get-tracking-code": "Tracking code",
+  "message.go-to-settings": "Naar instellingen",
   "message.incorrect-username-password": "Incorrecte gebruikersnaam/wachtwoord.",
   "message.no-data-available": "Geen gegevens beschikbaar.",
+  "message.no-websites-configured": "Je hebt geen websites ingesteld.",
   "message.page-not-found": "Pagina niet gevonden.",
+  "message.powered-by": "mogelijk gemaakt door {name}",
   "message.save-success": "Opslaan succesvol.",
   "message.share-url": "Met deze URL kan {target} openbaar gedeeld worden.",
   "message.track-stats": "Om statistieken voor {target} bij te houden, plaats je de volgende code in het {head} gedeelte van je website.",
@@ -54,6 +67,10 @@
   "metrics.bounce-rate": "Bouncepercentage",
   "metrics.browsers": "Browsers",
   "metrics.countries": "Landen",
+  "metrics.device.desktop": "Desktop",
+  "metrics.device.laptop": "Laptop",
+  "metrics.device.mobile": "Mobiel",
+  "metrics.device.tablet": "Tablet",
   "metrics.devices": "Apparaten",
   "metrics.events": "Gebeurtenissen",
   "metrics.filter.combined": "Gecombineerd",
@@ -66,11 +83,6 @@
   "metrics.unique-visitors": "Unieke bezoekers",
   "metrics.views": "Weergaven",
   "metrics.visitors": "Bezoekers",
-  "placeholder.message.go-to-settings": "Naar instellingen",
-  "placeholder.message.no-websites-configured": "Je hebt geen websites ingesteld.",
-  "settings.accounts": "Accounts",
-  "settings.profile": "Profiel",
-  "settings.websites": "Websites",
   "title.add-account": "Account toevoegen",
   "title.add-website": "Website toevoegen",
   "title.change-password": "Wachtwoord wijzigen",
@@ -79,7 +91,5 @@
   "title.edit-account": "Account bewerken",
   "title.edit-website": "Website bewerken",
   "title.share-url": "URL delen",
-  "title.tracking-code": "Tracking code",
+  "title.tracking-code": "Tracking code"
-  "tooltip.get-share-url": "Openbare URL",
-  "tooltip.get-tracking-code": "Tracking code"
 }

lang/ru-RU.json

@@ -1,25 +1,27 @@
 {
-  "active-users.message": "{x} текущих посетителей",
   "button.add-account": "Добавить аккаунт",
   "button.add-website": "Добавить сайт",
   "button.back": "Назад",
   "button.cancel": "Отменить",
   "button.change-password": "Изменить пароль",
   "button.copy-to-clipboard": "Скопировать в буфер обмена",
+  "button.date-range": "Диапазон дат",
   "button.delete": "Удалить",
   "button.edit": "Редактировать",
   "button.login": "Войти",
   "button.more": "Больше",
+  "button.refresh": "Обновить",
+  "button.reset": "Сбросить",
   "button.save": "Сохранить",
+  "button.single-day": "Один день",
   "button.view-details": "Посмотреть детали",
-  "button.websites": "Сайты",
+  "label.accounts": "Аккаунты",
-  "footer.powered-by": "на движке",
-  "header.nav.dashboard": "Информационная панель",
-  "header.nav.settings": "Настройки",
   "label.administrator": "Администратор",
   "label.confirm-password": "Подтвердить пароль",
   "label.current-password": "Текущий пароль",
-  "label.custom-range": "Custom range",
+  "label.custom-range": "Другой период",
+  "label.dashboard": "Информационная панель",
+  "label.default-date-range": "Диапазон дат по-умолчанию",
   "label.domain": "Домен",
   "label.enable-share-url": "Разрешить делиться ссылкой",
   "label.invalid": "Некорректный",
@@ -32,19 +34,30 @@
   "label.new-password": "Новый пароль",
   "label.password": "Пароль",
   "label.passwords-dont-match": "Пароли не совпадают",
+  "label.profile": "Профиль",
   "label.required": "Обязательное",
+  "label.settings": "Настройки",
   "label.this-month": "Этот месяц",
   "label.this-week": "Эта неделя",
   "label.this-year": "Этот год",
+  "label.timezone": "Часовой пояс",
   "label.today": "Сегодня",
+  "label.unknown": "Неизвестно",
   "label.username": "Имя пользователя",
+  "label.websites": "Сайты",
+  "message.active-users": "{x} текущих посетителей",
   "message.confirm-delete": "Вы уверены, что хотите удалить {target}?",
   "message.copied": "Скопировано!",
   "message.delete-warning": "Все связанные данные будут также удалены.",
   "message.failure": "Что-то пошло не так.",
+  "message.get-share-url": "Получить публичную ссылку",
+  "message.get-tracking-code": "Получить код отслеживания",
+  "message.go-to-settings": "Перейти к настройкам",
   "message.incorrect-username-password": "Неверное имя пользователя/пароль.",
   "message.no-data-available": "Нет данных.",
+  "message.no-websites-configured": "У вас нет настроенных сайтов.",
   "message.page-not-found": "Страница не найдена.",
+  "message.powered-by": "На движке {name}",
   "message.save-success": "Успешно сохранено.",
   "message.share-url": "Это публичная ссылка для {target}.",
   "message.track-stats": "Чтобы отслеживать статистику для {target}, поместите следующий код в раздел {head} вашего сайта.",
@@ -54,6 +67,10 @@
   "metrics.bounce-rate": "Отказы",
   "metrics.browsers": "Браузеры",
   "metrics.countries": "Страны",
+  "metrics.device.desktop": "Настольный компьютер",
+  "metrics.device.laptop": "Ноутбук",
+  "metrics.device.mobile": "Смартфон",
+  "metrics.device.tablet": "Планшет",
   "metrics.devices": "Устройства",
   "metrics.events": "События",
   "metrics.filter.combined": "Объединенные",
@@ -66,11 +83,6 @@
   "metrics.unique-visitors": "Уникальные посетители",
   "metrics.views": "Просмотры",
   "metrics.visitors": "Посетители",
-  "placeholder.message.go-to-settings": "Перейти к настройкам",
-  "placeholder.message.no-websites-configured": "У вас нет настроенных сайтов.",
-  "settings.accounts": "Аккаунты",
-  "settings.profile": "Профиль",
-  "settings.websites": "Сайты",
   "title.add-account": "Добавить аккаунт",
   "title.add-website": "Добавить сайт",
   "title.change-password": "Изменить пароль",
@@ -79,7 +91,5 @@
   "title.edit-account": "Редактировать аккаунт",
   "title.edit-website": "Редактировать сайт",
   "title.share-url": "Поделиться ссылкой",
-  "title.tracking-code": "Код отслеживания",
+  "title.tracking-code": "Код отслеживания"
-  "tooltip.get-share-url": "Получить публичную ссылку",
-  "tooltip.get-tracking-code": "Получить код отслеживания"
 }