Merge branch 'master' into feature/add-docker

README.md

@@ -1,7 +1,18 @@
 # umami
 
+Umami is a simple, fast, website analytics alternative to Google Analytics.
+
+## Getting started
+
+A detailed getting started guide can be found at [https://umami.is/docs/](https://umami.is/docs/)
+
 ## Installation from source
 
+### Requirements
+
+- A server with Node.js 10.13 or newer
+- A database (MySQL or Postgresql)
+
 ### Get the source code
 
 ```
@@ -37,6 +48,8 @@ For Postgresql:
 psql -h hostname -U username -d databasename -f sql/schema.postgresql.sql
 ```
 
+This will also create a login account with username **admin** and password **umami**.
+
 ### Configure umami
 
 Create an `.env` file with the following

components/charts/MetricCard.js

@@ -1,12 +1,9 @@
 import React from 'react';
 import { useSpring, animated } from 'react-spring';
+import { formatNumber } from '../../lib/format';
 import styles from './MetricCard.module.css';
 
-function defaultFormat(n) {
-  return Number(n).toFixed(0);
-}
-
-const MetricCard = ({ value = 0, label, format = defaultFormat }) => {
+const MetricCard = ({ value = 0, label, format = formatNumber }) => {
   const props = useSpring({ x: value, from: { x: 0 } });
 
   return (

components/charts/MetricCard.module.css

@@ -2,7 +2,7 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
-  width: 140px;
+  min-width: 140px;
 }
 
 .value {

components/charts/MetricsBar.js

@@ -2,13 +2,16 @@ import React, { useState, useEffect } from 'react';
 import classNames from 'classnames';
 import MetricCard from './MetricCard';
 import { get } from 'lib/web';
-import { formatShortTime } from 'lib/format';
+import { formatShortTime, formatNumber, formatLongNumber } from 'lib/format';
 import styles from './MetricsBar.module.css';
 
 export default function MetricsBar({ websiteId, startDate, endDate, className }) {
   const [data, setData] = useState({});
+  const [format, setFormat] = useState(true);
   const { pageviews, uniques, bounces, totaltime } = data;
 
+  const formatFunc = format ? formatLongNumber : formatNumber;
+
   async function loadData() {
     setData(
       await get(`/api/website/${websiteId}/metrics`, {
@@ -18,14 +21,18 @@ export default function MetricsBar({ websiteId, startDate, endDate, className })
     );
   }
 
+  function handleSetFormat() {
+    setFormat(state => !state);
+  }
+
   useEffect(() => {
     loadData();
   }, [websiteId, startDate, endDate]);
 
   return (
-    <div className={classNames(styles.container, className)}>
-      <MetricCard label="Views" value={pageviews} />
-      <MetricCard label="Visitors" value={uniques} />
+    <div className={classNames(styles.bar, className)} onClick={handleSetFormat}>
+      <MetricCard label="Views" value={pageviews} format={formatFunc} />
+      <MetricCard label="Visitors" value={uniques} format={formatFunc} />
       <MetricCard
         label="Bounce rate"
         value={uniques ? (bounces / uniques) * 100 : 0}

components/charts/MetricsBar.module.css

@@ -1,8 +1,9 @@
-.container {
+.bar {
   display: flex;
+  cursor: pointer;
 }
 
-@media only screen and (max-width: 1000px) {
+@media only screen and (max-width: 992px) {
   .container > div:last-child {
     display: none;
   }

components/charts/RankingsChart.js

@@ -2,11 +2,11 @@ import React, { useState, useEffect, useMemo } from 'react';
 import { FixedSizeList } from 'react-window';
 import { useSpring, animated, config } from 'react-spring';
 import classNames from 'classnames';
-import CheckVisible from 'components/helpers/CheckVisible';
 import Button from 'components/common/Button';
 import Arrow from 'assets/arrow-right.svg';
 import { get } from 'lib/web';
 import { percentFilter } from 'lib/filters';
+import { formatNumber, formatLongNumber } from 'lib/format';
 import styles from './RankingsChart.module.css';
 
 export default function RankingsChart({
@@ -23,6 +23,8 @@ export default function RankingsChart({
   onExpand = () => {},
 }) {
   const [data, setData] = useState();
+  const [format, setFormat] = useState(true);
+  const formatFunc = format ? formatLongNumber : formatNumber;
 
   const rankings = useMemo(() => {
     if (data) {
@@ -48,6 +50,19 @@ export default function RankingsChart({
     onDataLoad(updated);
   }
 
+  function handleSetFormat() {
+    setFormat(state => !state);
+  }
+
+  const Row = ({ index, style }) => {
+    const { x, y, z } = rankings[index];
+    return (
+      <div style={style}>
+        <AnimatedRow key={x} label={x} value={y} percent={z} animate={limit} format={formatFunc} />
+      </div>
+    );
+  };
+
   useEffect(() => {
     if (websiteId) {
       loadData();
@@ -58,25 +73,23 @@ export default function RankingsChart({
     return null;
   }
 
-  const Row = ({ index, style }) => {
-    const { x, y, z } = rankings[index];
-    return (
-      <div style={style}>
-        <AnimatedRow key={x} label={x} value={y} percent={z} animate={limit} />
-      </div>
-    );
-  };
-
   return (
     <div className={classNames(styles.container, className)}>
-      <div className={styles.header}>
+      <div className={styles.header} onClick={handleSetFormat}>
         <div className={styles.title}>{title}</div>
         <div className={styles.heading}>{heading}</div>
       </div>
       <div className={styles.body}>
         {limit ? (
           rankings.map(({ x, y, z }) => (
-            <AnimatedRow key={x} label={x} value={y} percent={z} animate={limit} />
+            <AnimatedRow
+              key={x}
+              label={x}
+              value={y}
+              percent={z}
+              animate={limit}
+              format={formatFunc}
+            />
           ))
         ) : (
           <FixedSizeList height={600} itemCount={rankings.length} itemSize={30}>
@@ -95,7 +108,7 @@ export default function RankingsChart({
   );
 }
 
-const AnimatedRow = ({ label, value, percent, animate }) => {
+const AnimatedRow = ({ label, value = 0, percent, animate, format }) => {
   const props = useSpring({
     width: percent,
     y: value,
@@ -106,7 +119,7 @@ const AnimatedRow = ({ label, value, percent, animate }) => {
   return (
     <div className={styles.row}>
       <div className={styles.label}>{label}</div>
-      <animated.div className={styles.value}>{props.y.interpolate(n => n.toFixed(0))}</animated.div>
+      <animated.div className={styles.value}>{props.y?.interpolate(format)}</animated.div>
       <div className={styles.percent}>
         <animated.div
           className={styles.bar}

components/charts/RankingsChart.module.css

@@ -10,6 +10,7 @@
 .header {
   display: flex;
   line-height: 40px;
+  cursor: pointer;
 }
 
 .title {

components/common/Modal.js

@@ -1,16 +1,18 @@
 import React from 'react';
+import ReactDOM from 'react-dom';
 import { useSpring, animated } from 'react-spring';
 import styles from './Modal.module.css';
 
 export default function Modal({ title, children }) {
   const props = useSpring({ opacity: 1, from: { opacity: 0 } });
 
-  return (
+  return ReactDOM.createPortal(
     <animated.div className={styles.modal} style={props}>
       <div className={styles.content}>
         {title && <div className={styles.header}>{title}</div>}
         <div className={styles.body}>{children}</div>
       </div>
-    </animated.div>
+    </animated.div>,
+    document.getElementById('__modals'),
   );
 }

components/forms/LoginForm.js

@@ -32,10 +32,10 @@ export default function LoginForm() {
   const handleSubmit = async ({ username, password }) => {
     const response = await post('/api/auth/login', { username, password });
 
-    if (response?.token) {
+    if (typeof response !== 'string') {
       await Router.push('/');
     } else {
-      setMessage('Incorrect username/password');
+      setMessage(response.startsWith('401') ? 'Incorrect username/password' : response);
     }
   };
 

components/forms/TrackingCodeForm.js

@@ -18,7 +18,7 @@ export default function TrackingCodeForm({ values, onClose }) {
           rows={3}
           cols={60}
           spellCheck={false}
-          defaultValue={`<script async defer data-website-id="${values.website_uuid}" src="${document.location.origin}/umami.js" />`}
+          defaultValue={`<script async defer data-website-id="${values.website_uuid}" src="${document.location.origin}/umami.js"></script>`}
           readOnly
         />
       </FormRow>

components/layout/Layout.js

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

components/layout/MenuLayout.module.css

@@ -1,20 +1,15 @@
 .container {
   display: flex;
   flex: 1;
-  position: relative;
   height: 100%;
 }
 
 .container .menu {
-  display: flex;
-  flex-direction: column;
   padding: 30px 0;
   border: 0;
 }
 
 .container .content {
-  display: flex;
-  flex-direction: column;
   border-left: 1px solid var(--gray300);
   padding-left: 30px;
 }

components/layout/Page.module.css

@@ -2,4 +2,5 @@
   padding: 0 30px;
   background: var(--gray50);
   height: 100%;
+  overflow: hidden;
 }

lib/crypto.js

@@ -2,9 +2,11 @@ import crypto from 'crypto';
 import { v4, v5, validate } from 'uuid';
 import bcrypt from 'bcrypt';
 import { JWT, JWE, JWK } from 'jose';
+import { startOfMonth } from 'date-fns';
 
 const SALT_ROUNDS = 10;
 const KEY = JWK.asKey(Buffer.from(secret()));
+const ROTATING_SALT = hash(startOfMonth(new Date()).toUTCString());
 const CHARS = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
 
 export function hash(...args) {
@@ -15,10 +17,14 @@ export function secret() {
   return hash(process.env.HASH_SALT);
 }
 
+export function salt() {
+  return v5([secret(), ROTATING_SALT].join(''), v5.DNS);
+}
+
 export function uuid(...args) {
   if (!args.length) return v4();
 
-  return v5(args.join(''), v5.DNS);
+  return v5(args.join(''), salt());
 }
 
 export function isValidId(s) {

lib/db.js

@@ -35,6 +35,5 @@ export default prisma;
 export async function runQuery(query) {
   return query.catch(e => {
     console.error(e);
-    throw e;
   });
 }

lib/format.js

@@ -39,3 +39,26 @@ export function formatShortTime(val, formats = ['m', 's'], space = '') {
 
   return t;
 }
+
+export function formatNumber(n) {
+  return Number(n).toFixed(0);
+}
+
+export function formatLongNumber(value) {
+  const n = Number(value);
+
+  if (n >= 1000000) {
+    return `${(n / 1000000).toFixed(1)}m`;
+  }
+  if (n >= 100000) {
+    return `${(n / 1000).toFixed(0)}k`;
+  }
+  if (n >= 10000) {
+    return `${(n / 1000).toFixed(1)}k`;
+  }
+  if (n >= 1000) {
+    return `${(n / 1000).toFixed(2)}k`;
+  }
+
+  return formatNumber(n);
+}

lib/request.js

@@ -68,13 +68,13 @@ export async function getCountry(req, ip) {
 
   lookup.close();
 
-  return result.country.iso_code;
+  return result?.country?.iso_code;
 }
 
 export async function getClientInfo(req, { screen }) {
+  const userAgent = req.headers['user-agent'];
   const ip = getIpAddress(req);
   const country = await getCountry(req, ip);
-  const userAgent = req.headers['user-agent'];
   const browser = browserName(userAgent);
   const os = detectOS(userAgent);
   const device = getDevice(screen, browser, os);

lib/session.js

@@ -1,6 +1,6 @@
 import { getWebsiteByUuid, getSessionByUuid, createSession } from 'lib/queries';
 import { getClientInfo } from 'lib/request';
-import { uuid, isValidId, parseToken } from 'lib/crypto';
+import { uuid, isValidId } from 'lib/crypto';
 
 export async function verifySession(req) {
   const { payload } = req.body;
@@ -9,49 +9,42 @@ export async function verifySession(req) {
     throw new Error('Invalid request');
   }
 
-  const { website: website_uuid, hostname, screen, language, session } = payload;
-  const token = await parseToken(session);
+  const { website: website_uuid, hostname, screen, language } = payload;
 
   if (!isValidId(website_uuid)) {
     throw new Error(`Invalid website: ${website_uuid}`);
   }
 
-  if (!token || token.website_uuid !== website_uuid) {
-    const { userAgent, browser, os, ip, country, device } = await getClientInfo(req, payload);
+  const { userAgent, browser, os, ip, country, device } = await getClientInfo(req, payload);
 
-    const website = await getWebsiteByUuid(website_uuid);
+  const website = await getWebsiteByUuid(website_uuid);
 
-    if (!website) {
-      throw new Error(`Website not found: ${website_uuid}`);
-    }
-
-    const { website_id } = website;
-    const session_uuid = uuid(website_id, hostname, ip, userAgent, os);
-
-    let session = await getSessionByUuid(session_uuid);
-
-    if (!session) {
-      session = await createSession(website_id, {
-        session_uuid,
-        hostname,
-        browser,
-        os,
-        screen,
-        language,
-        country,
-        device,
-      });
-    }
-
-    const { session_id } = session;
-
-    return {
-      website_id,
-      website_uuid,
-      session_id,
-      session_uuid,
-    };
+  if (!website) {
+    throw new Error(`Website not found: ${website_uuid}`);
   }
 
-  return token;
+  const { website_id } = website;
+  const session_uuid = uuid(website_id, hostname, ip, userAgent, os);
+
+  let session = await getSessionByUuid(session_uuid);
+
+  if (!session) {
+    session = await createSession(website_id, {
+      session_uuid,
+      hostname,
+      browser,
+      os,
+      screen,
+      language,
+      country,
+      device,
+    });
+  }
+
+  const { session_id } = session;
+
+  return {
+    website_id,
+    session_id,
+  };
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "umami",
-  "version": "0.5.0",
+  "version": "0.12.0",
   "description": "A simple, fast, website analytics alternative to Google Analytics. ",
   "author": "Mike Cao <mike@mikecao.com>",
   "license": "MIT",

pages/api/auth/login.js

@@ -15,6 +15,7 @@ export default async (req, res) => {
     const cookie = serialize(AUTH_COOKIE_NAME, token, {
       path: '/',
       httpOnly: true,
+      sameSite: true,
       maxAge: 60 * 60 * 24 * 365,
     });
 

pages/api/collect.js

@@ -1,16 +1,15 @@
 import { savePageView, saveEvent } from 'lib/queries';
 import { useCors, useSession } from 'lib/middleware';
-import { createToken } from 'lib/crypto';
 import { ok, badRequest } from 'lib/response';
 
 export default async (req, res) => {
   await useCors(req, res);
   await useSession(req, res);
 
-  const { session } = req;
-  const token = await createToken(session);
-  const { website_id, session_id } = session;
   const { type, payload } = req.body;
+  const {
+    session: { website_id, session_id },
+  } = req;
 
   if (type === 'pageview') {
     const { url, referrer } = payload;
@@ -24,5 +23,5 @@ export default async (req, res) => {
     return badRequest(res);
   }
 
-  return ok(res, { session: token });
+  return ok(res);
 };

pages/share/[...id].js

@@ -16,7 +16,7 @@ export default function SharePage() {
 
     if (website) {
       setWebsiteId(website.website_id);
-    } else {
+    } else if (typeof window !== 'undefined') {
       setNotFound(true);
     }
   }

sql/schema.mysql.sql

@@ -104,4 +104,4 @@ end;
 
 $$
 
-insert into account (username, password, is_admin) values ('admin', '$2a$10$jsVC1XMAIIQtL0On8twztOmAr20YTVcsd4.yJncKspEwsBkeq6VFW', true);
+insert into account (username, password, is_admin) values ('admin', '$2b$10$BUli0c.muyCW1ErNJc3jL.vFRFtFJWrT8/GcR4A.sUdCznaXiqFXa', true);

sql/schema.postgresql.sql

@@ -69,4 +69,4 @@ create index event_created_at_idx on event(created_at);
 create index event_website_id_idx on event(website_id);
 create index event_session_id_idx on event(session_id);
 
-insert into account (username, password, is_admin) values ('admin', '$2a$10$jsVC1XMAIIQtL0On8twztOmAr20YTVcsd4.yJncKspEwsBkeq6VFW', true);
+insert into account (username, password, is_admin) values ('admin', '$2b$10$BUli0c.muyCW1ErNJc3jL.vFRFtFJWrT8/GcR4A.sUdCznaXiqFXa', true);

tracker/index.js

@@ -2,18 +2,20 @@ import 'promise-polyfill/src/polyfill';
 import 'unfetch/polyfill';
 import { post, hook } from '../lib/web';
 
-((window, sessionKey) => {
+(window => {
   const {
     screen: { width, height },
     navigator: { language },
     location: { hostname, pathname, search },
-    localStorage: store,
     document,
     history,
   } = window;
 
   const script = document.querySelector('script[data-website-id]');
-  const website = script && script.getAttribute('data-website-id');
+
+  if (!script) return;
+
+  const website = script.getAttribute('data-website-id');
   const hostUrl = new URL(script.src).origin;
   const screen = `${width}x${height}`;
   const listeners = [];
@@ -21,9 +23,10 @@ import { post, hook } from '../lib/web';
   let currentUrl = `${pathname}${search}`;
   let currentRef = document.referrer;
 
+  /* Collect metrics */
+
   const collect = (type, params) => {
     const payload = {
-      session: store.getItem(sessionKey),
       url: currentUrl,
       referrer: currentRef,
       website,
@@ -41,7 +44,7 @@ import { post, hook } from '../lib/web';
     return post(`${hostUrl}/api/collect`, {
       type,
       payload,
-    }).then(({ session }) => session && store.setItem(sessionKey, session));
+    });
   };
 
   const pageView = () => collect('pageview').then(() => setTimeout(loadEvents, 300));
@@ -86,4 +89,4 @@ import { post, hook } from '../lib/web';
   /* Start */
 
   pageView();
-})(window, 'umami.session');
+})(window);