Merge pull request #99 from mikecao/dev

v0.21.0

Author: mikecao

README.md

@@ -82,6 +82,16 @@ To build the umami container and start up a Postgres database, run:
 docker-compose up
 ```
 
+### Getting updates
+
+To get the latest features, simply do a pull, install any new dependencies, and rebuild:
+
+```
+git pull
+npm install
+npm run build
+```
+
 ## License
 
 MIT

components/common/RefreshButton.js

@@ -1,19 +1,28 @@
-import React from 'react';
-import { useDispatch } from 'react-redux';
+import React, { useState, useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
 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 { getDateRange } from '../../lib/date';
 
 export default function RefreshButton({ websiteId }) {
   const dispatch = useDispatch();
   const dateRange = useDateRange(websiteId);
+  const [loading, setLoading] = useState(false);
+  const completed = useSelector(state => state.queries[`/api/website/${websiteId}/metrics`]);
 
   function handleClick() {
     if (dateRange) {
-      dispatch(setDateRange(websiteId, dateRange));
+      setLoading(true);
+      dispatch(setDateRange(websiteId, getDateRange(dateRange.value)));
     }
   }
 
-  return <Button icon={<Refresh />} size="small" onClick={handleClick} />;
+  useEffect(() => {
+    setLoading(false);
+  }, [completed]);
+
+  return <Button icon={loading ? <Dots /> : <Refresh />} size="small" onClick={handleClick} />;
 }

components/metrics/BarChart.js

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 import ChartJS from 'chart.js';
 import styles from './BarChart.module.css';
 import { format } from 'date-fns';
-import { formatLongNumber } from '../../lib/format';
+import { formatLongNumber } from 'lib/format';
 
 export default function BarChart({
   chartId,
@@ -22,30 +22,39 @@ export default function BarChart({
   const chart = useRef();
   const [tooltip, setTooltip] = useState({});
 
-  const renderXLabel = (label, index, values) => {
+  function renderXLabel(label, index, values) {
     const d = new Date(values[index].value);
-    const n = records;
+    const w = canvas.current.width;
 
     switch (unit) {
       case 'hour':
         return format(d, 'ha');
       case 'day':
-        if (n >= 15) {
-          return index % ~~(n / 15) === 0 ? format(d, 'MMM d') : '';
+        if (records > 31) {
+          if (w <= 500) {
+            return index % 10 === 0 ? format(d, 'M/d') : '';
+          }
+          return index % 5 === 0 ? format(d, 'M/d') : '';
+        }
+        if (w <= 500) {
+          return index % 2 === 0 ? format(d, 'MMM d') : '';
         }
         return format(d, 'EEE M/d');
       case 'month':
+        if (w <= 660) {
+          return format(d, 'MMM');
+        }
         return format(d, 'MMMM');
       default:
         return label;
     }
-  };
+  }
 
-  const renderYLabel = label => {
+  function renderYLabel(label) {
     return +label > 1 ? formatLongNumber(label) : label;
-  };
+  }
 
-  const renderTooltip = model => {
+  function renderTooltip(model) {
     const { opacity, title, body, labelColors } = model;
 
     if (!opacity) {
@@ -60,9 +69,9 @@ export default function BarChart({
         labelColor: labelColors[0].backgroundColor,
       });
     }
-  };
+  }
 
-  const createChart = () => {
+  function createChart() {
     const options = {
       animation: {
         duration: animationDuration,
@@ -119,17 +128,17 @@ export default function BarChart({
       },
       options,
     });
-  };
+  }
 
-  const updateChart = () => {
+  function updateChart() {
     const { options } = chart.current;
 
     options.scales.xAxes[0].time.unit = unit;
     options.scales.xAxes[0].ticks.callback = renderXLabel;
     options.animation.duration = animationDuration;
 
     onUpdate(chart.current);
-  };
+  }
 
   useEffect(() => {
     if (datasets) {

components/metrics/WebsiteHeader.js

@@ -21,7 +21,7 @@ export default function WebsiteHeader({ websiteId, title, showLink = false }) {
           <Button
             icon={<Arrow />}
             onClick={() =>
-              router.push('/website/[...id]', `/website/${websiteId}/${name}`, {
+              router.push('/website/[...id]', `/website/${websiteId}/${title}`, {
                 shallow: true,
               })
             }

hooks/useFetch.js

@@ -1,7 +1,10 @@
 import { useState, useEffect } from 'react';
+import { useDispatch } from 'react-redux';
 import { get } from 'lib/web';
+import { updateQuery } from 'redux/actions/queries';
 
 export default function useFetch(url, params = {}, options = {}) {
+  const dispatch = useDispatch();
   const [data, setData] = useState();
   const [error, setError] = useState();
   const keys = Object.keys(params)
@@ -12,7 +15,11 @@ export default function useFetch(url, params = {}, options = {}) {
   async function loadData() {
     try {
       setError(null);
+      const time = performance.now();
       const data = await get(url, params);
+
+      dispatch(updateQuery({ url, time: performance.now() - time, completed: Date.now() }));
+
       setData(data);
       onDataLoad(data);
     } catch (e) {

lib/db.js

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

lib/filters.js

@@ -13,7 +13,11 @@ export const urlFilter = (data, { raw }) => {
 
   const cleanUrl = url => {
     try {
-      const { pathname, searchParams } = new URL(url);
+      const { pathname, search, searchParams } = new URL(url);
+
+      if (search.startsWith('?/')) {
+        return `${pathname}${search}`;
+      }
 
       const path = removeTrailingSlash(pathname);
       const ref = searchParams.get('ref');