diff --git a/README.md b/README.md index dd9e65ed..0898a8f3 100644 --- a/README.md +++ b/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 diff --git a/components/charts/MetricCard.js b/components/charts/MetricCard.js index 4ebbe28a..ad6c62eb 100644 --- a/components/charts/MetricCard.js +++ b/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 ( diff --git a/components/charts/MetricCard.module.css b/components/charts/MetricCard.module.css index 96adad3c..7f03049a 100644 --- a/components/charts/MetricCard.module.css +++ b/components/charts/MetricCard.module.css @@ -2,7 +2,7 @@ display: flex; flex-direction: column; justify-content: center; - width: 140px; + min-width: 140px; } .value { diff --git a/components/charts/MetricsBar.js b/components/charts/MetricsBar.js index 6a6c20a1..18a1a43b 100644 --- a/components/charts/MetricsBar.js +++ b/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 ( -