Merge pull request umami-software#853 from mikecao/dev

v1.24.0
dedoyle · Nov 22, 2021 · eba1b1d · eba1b1d
2 parents 2575cbf + 3079319
commit eba1b1d
Show file tree

Hide file tree

Showing 75 changed files with 1,583 additions and 1,583 deletions.
diff --git a/app.json b/app.json
@@ -0,0 +1,26 @@
+{
+    "name": "Umami",
+    "description": "Umami is a simple, fast, website analytics alternative to Google Analytics.",
+    "keywords": [
+      "analytics",
+      "charts",
+      "statistics",
+      "web-analytics"
+    ],
+    "website": "https://umami.is",
+    "repository": "https://github.com/mikecao/umami",
+    "addons": [
+      "heroku-postgresql"
+    ],
+    "env": {
+      "HASH_SALT": {
+        "description": "Used to generate unique values for your installation",
+        "required": true,
+        "generator": "secret"
+      }
+    },
+    "scripts": {
+      "postdeploy": "psql $DATABASE_URL -f sql/schema.postgresql.sql"
+    },
+    "success_url": "/"
+}
diff --git a/assets/arrow-up-right-from-square.svg b/assets/arrow-up-right-from-square.svg
diff --git a/components/common/Calendar.js b/components/common/Calendar.js
@@ -20,7 +20,7 @@ import Button from './Button';
 import useLocale from 'hooks/useLocale';
 import { dateFormat } from 'lib/date';
 import { chunk } from 'lib/array';
-import { dateLocales } from 'lib/lang';
+import { getDateLocale } from 'lib/lang';
 import Chevron from 'assets/chevron-down.svg';
 import Cross from 'assets/times.svg';
 import styles from './Calendar.module.css';
@@ -106,8 +106,8 @@ export default function Calendar({ date, minDate, maxDate, onChange }) {
 }
 
 const DaySelector = ({ date, minDate, maxDate, locale, onSelect }) => {
-  const startWeek = startOfWeek(date, { locale: dateLocales[locale] });
-  const startMonth = startOfMonth(date, { locale: dateLocales[locale] });
+  const startWeek = startOfWeek(date, { locale: getDateLocale(locale) });
+  const startMonth = startOfMonth(date, { locale: getDateLocale(locale) });
   const startDay = subDays(startMonth, startMonth.getDay());
   const month = date.getMonth();
   const year = date.getFullYear();

diff --git a/components/common/ErrorMessage.module.css b/components/common/ErrorMessage.module.css
@@ -6,6 +6,8 @@
   margin: auto;
   display: flex;
   z-index: 1;
+  background-color: var(--gray50);
+  padding: 10px;
 }
 
 .icon {

diff --git a/components/common/MenuButton.js b/components/common/MenuButton.js
@@ -16,6 +16,7 @@ function MenuButton({
   menuAlign = 'right',
   onSelect,
   renderValue,
+  hideLabel,
 }) {
   const [showMenu, setShowMenu] = useState(false);
   const ref = useRef();
@@ -44,7 +45,9 @@ function MenuButton({
         onClick={toggleMenu}
         variant="light"
       >
-        <div className={styles.text}>{renderValue ? renderValue(selectedOption) : value}</div>
+        {!hideLabel && (
+          <div className={styles.text}>{renderValue ? renderValue(selectedOption) : value}</div>
+        )}
       </Button>
       {showMenu && (
         <Menu

diff --git a/components/layout/Footer.js b/components/layout/Footer.js
@@ -5,14 +5,13 @@ import Link from 'components/common/Link';
 import styles from './Footer.module.css';
 import useVersion from 'hooks/useVersion';
 import useLocale from 'hooks/useLocale';
-import { rtlLocales } from 'lib/lang';
 
 export default function Footer() {
   const { current } = useVersion();
-  const { locale } = useLocale();
+  const { dir } = useLocale();
 
   return (
-    <footer className="container" dir={rtlLocales.includes(locale) ? 'rtl' : 'ltr'}>
+    <footer className="container" dir={dir}>
       <div className={classNames(styles.footer, 'row')}>
         <div className="col-12 col-md-4" />
         <div className="col-12 col-md-4">

diff --git a/components/layout/Header.js b/components/layout/Header.js
@@ -12,21 +12,20 @@ import Button from 'components/common/Button';
 import Logo from 'assets/logo.svg';
 import styles from './Header.module.css';
 import useLocale from 'hooks/useLocale';
-import { rtlLocales } from 'lib/lang';
 import XMark from 'assets/xmark.svg';
 import Bars from 'assets/bars.svg';
 
 export default function Header() {
   const user = useSelector(state => state.user);
   const [active, setActive] = useState(false);
-  const { locale } = useLocale();
+  const { locale, dir } = useLocale();
 
   function handleClick() {
     setActive(state => !state);
   }
 
   return (
-    <nav className="container" dir={rtlLocales.includes(locale) ? 'rtl' : 'ltr'}>
+    <nav className="container" dir={dir}>
       {user?.is_admin && <UpdateNotice />}
       <div className={classNames(styles.header, 'row align-items-center')}>
         <div className={styles.nav}>

diff --git a/components/layout/Layout.js b/components/layout/Layout.js
@@ -3,11 +3,9 @@ import Head from 'next/head';
 import Header from 'components/layout/Header';
 import Footer from 'components/layout/Footer';
 import useLocale from 'hooks/useLocale';
-import { rtlLocales } from 'lib/lang';
 
 export default function Layout({ title, children, header = true, footer = true }) {
-  const { locale } = useLocale();
-  const dir = rtlLocales.includes(locale) ? 'rtl' : 'ltr';
+  const { dir } = useLocale();
 
   return (
     <>

diff --git a/components/layout/PageHeader.module.css b/components/layout/PageHeader.module.css
@@ -5,4 +5,5 @@
   align-content: center;
   min-height: 80px;
   align-self: stretch;
+  font-weight: bold;
 }
diff --git a/components/metrics/FilterTags.js b/components/metrics/FilterTags.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import classNames from 'classnames';
+import Button from 'components/common/Button';
+import Times from 'assets/times.svg';
+import styles from './FilterTags.module.css';
+
+export default function FilterTags({ params, onClick }) {
+  if (Object.keys(params).filter(key => params[key]).length === 0) {
+    return null;
+  }
+  return (
+    <div className={classNames(styles.filters, 'col-12')}>
+      {Object.keys(params).map(key => {
+        if (!params[key]) {
+          return null;
+        }
+        return (
+          <div className={styles.tag}>
+            <Button icon={<Times />} onClick={() => onClick(key)} variant="action" iconRight>
+              {`${key}: ${params[key]}`}
+            </Button>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/components/metrics/FilterTags.module.css b/components/metrics/FilterTags.module.css
@@ -0,0 +1,14 @@
+.filters {
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+}
+
+.tag {
+  text-align: center;
+  margin-bottom: 10px;
+}
+
+.tag + .tag {
+  margin-left: 20px;
+}
diff --git a/components/metrics/MetricsBar.js b/components/metrics/MetricsBar.js
@@ -18,7 +18,7 @@ export default function MetricsBar({ websiteId, className }) {
   const { startDate, endDate, modified } = dateRange;
   const [format, setFormat] = useState(true);
   const {
-    query: { url },
+    query: { url, ref },
   } = usePageQuery();
 
   const { data, error, loading } = useFetch(
@@ -28,10 +28,11 @@ export default function MetricsBar({ websiteId, className }) {
         start_at: +startDate,
         end_at: +endDate,
         url,
+        ref,
       },
       headers: { [TOKEN_HEADER]: shareToken?.token },
     },
-    [url, modified],
+    [modified, url, ref],
   );
 
   const formatFunc = format

diff --git a/components/metrics/PagesTable.js b/components/metrics/PagesTable.js
@@ -4,6 +4,7 @@ import classNames from 'classnames';
 import Link from 'next/link';
 import FilterButtons from 'components/common/FilterButtons';
 import { urlFilter } from 'lib/filters';
+import { safeDecodeURI } from 'lib/url';
 import usePageQuery from 'hooks/usePageQuery';
 import MetricsTable from './MetricsTable';
 import styles from './PagesTable.module.css';
@@ -15,7 +16,7 @@ export default function PagesTable({ websiteId, websiteDomain, showFilters, ...p
   const [filter, setFilter] = useState(FILTER_COMBINED);
   const {
     resolve,
-    query: { url },
+    query: { url: currentUrl },
   } = usePageQuery();
 
   const buttons = [
@@ -26,16 +27,16 @@ export default function PagesTable({ websiteId, websiteDomain, showFilters, ...p
     { label: <FormattedMessage id="metrics.filter.raw" defaultMessage="Raw" />, value: FILTER_RAW },
   ];
 
-  const renderLink = ({ x }) => {
+  const renderLink = ({ x: url }) => {
     return (
-      <Link href={resolve({ url: x })} replace={true}>
+      <Link href={resolve({ url })} replace={true}>
         <a
           className={classNames({
-            [styles.inactive]: url && x !== url,
-            [styles.active]: x === url,
+            [styles.inactive]: currentUrl && url !== currentUrl,
+            [styles.active]: url === currentUrl,
           })}
         >
-          {decodeURI(x)}
+          {safeDecodeURI(url)}
         </a>
       </Link>
     );

diff --git a/components/metrics/ReferrersTable.js b/components/metrics/ReferrersTable.js
@@ -3,13 +3,24 @@ import { FormattedMessage } from 'react-intl';
 import MetricsTable from './MetricsTable';
 import FilterButtons from 'components/common/FilterButtons';
 import { refFilter } from 'lib/filters';
+import { safeDecodeURI } from 'lib/url';
+import Link from 'next/link';
+import classNames from 'classnames';
+import usePageQuery from 'hooks/usePageQuery';
+import External from 'assets/arrow-up-right-from-square.svg';
+import Icon from '../common/Icon';
+import styles from './ReferrersTable.module.css';
 
 export const FILTER_DOMAIN_ONLY = 0;
 export const FILTER_COMBINED = 1;
 export const FILTER_RAW = 2;
 
 export default function ReferrersTable({ websiteId, websiteDomain, showFilters, ...props }) {
   const [filter, setFilter] = useState(FILTER_COMBINED);
+  const {
+    resolve,
+    query: { ref: currentRef },
+  } = usePageQuery();
 
   const buttons = [
     {
@@ -23,13 +34,24 @@ export default function ReferrersTable({ websiteId, websiteDomain, showFilters,
     { label: <FormattedMessage id="metrics.filter.raw" defaultMessage="Raw" />, value: FILTER_RAW },
   ];
 
-  const renderLink = ({ w: href, x: url }) => {
-    return (href || url).startsWith('http') ? (
-      <a href={href || url} target="_blank" rel="noreferrer">
-        {decodeURI(url)}
-      </a>
-    ) : (
-      decodeURI(url)
+  const renderLink = ({ w: link, x: label }) => {
+    console.log({ link, label });
+    return (
+      <div className={styles.row}>
+        <Link href={resolve({ ref: label })} replace={true}>
+          <a
+            className={classNames(styles.label, {
+              [styles.inactive]: currentRef && label !== currentRef,
+              [styles.active]: label === currentRef,
+            })}
+          >
+            {safeDecodeURI(label)}
+          </a>
+        </Link>
+        <a href={link || label} target="_blank" rel="noreferrer noopener" className={styles.link}>
+          <Icon icon={<External />} className={styles.icon} />
+        </a>
+      </div>
     );
   };
 

diff --git a/components/metrics/ReferrersTable.module.css b/components/metrics/ReferrersTable.module.css
@@ -0,0 +1,31 @@
+body .inactive {
+  color: var(--gray500);
+}
+
+body .active {
+  color: var(--gray900);
+  font-weight: 600;
+}
+
+.row {
+  display: flex;
+  justify-content: space-between;
+}
+
+.row .link {
+  display: none;
+}
+
+.row .label {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.row:hover .link {
+  display: block;
+}
+
+.icon {
+  cursor: pointer;
+}