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

v1.22.0
fidelise · Aug 20, 2021 · 9b1a75f · 9b1a75f
2 parents ae7186c + 98bd599
commit 9b1a75f
Show file tree

Hide file tree

Showing 16 changed files with 915 additions and 724 deletions.
diff --git a/components/forms/ResetForm.js b/components/forms/ResetForm.js
@@ -0,0 +1,98 @@
+import React, { useState } from 'react';
+import { FormattedMessage } from 'react-intl';
+import { Formik, Form, Field } from 'formik';
+import Button from 'components/common/Button';
+import FormLayout, {
+  FormButtons,
+  FormError,
+  FormMessage,
+  FormRow,
+} from 'components/layout/FormLayout';
+import usePost from 'hooks/usePost';
+
+const CONFIRMATION_WORD = 'RESET';
+
+const validate = ({ confirmation }) => {
+  const errors = {};
+
+  if (confirmation !== CONFIRMATION_WORD) {
+    errors.confirmation = !confirmation ? (
+      <FormattedMessage id="label.required" defaultMessage="Required" />
+    ) : (
+      <FormattedMessage id="label.invalid" defaultMessage="Invalid" />
+    );
+  }
+
+  return errors;
+};
+
+export default function ResetForm({ values, onSave, onClose }) {
+  const post = usePost();
+  const [message, setMessage] = useState();
+
+  const handleSubmit = async ({ type, id }) => {
+    const { ok, data } = await post(`/api/${type}/${id}/reset`);
+
+    if (ok) {
+      onSave();
+    } else {
+      setMessage(
+        data || <FormattedMessage id="message.failure" defaultMessage="Something went wrong." />,
+      );
+    }
+  };
+
+  return (
+    <FormLayout>
+      <Formik
+        initialValues={{ confirmation: '', ...values }}
+        validate={validate}
+        onSubmit={handleSubmit}
+      >
+        {props => (
+          <Form>
+            <div>
+              <FormattedMessage
+                id="message.confirm-reset"
+                defaultMessage="Are your sure you want to reset {target}'s statistics?"
+                values={{ target: <b>{values.name}</b> }}
+              />
+            </div>
+            <div>
+              <FormattedMessage
+                id="message.reset-warning"
+                defaultMessage="All statistics for this website will be deleted, but your tracking code will remain intact."
+              />
+            </div>
+            <p>
+              <FormattedMessage
+                id="message.type-reset"
+                defaultMessage="Type {reset} in the box below to confirm."
+                values={{ reset: <b>{CONFIRMATION_WORD}</b> }}
+              />
+            </p>
+            <FormRow>
+              <div>
+                <Field name="confirmation" type="text" />
+                <FormError name="confirmation" />
+              </div>
+            </FormRow>
+            <FormButtons>
+              <Button
+                type="submit"
+                variant="danger"
+                disabled={props.values.confirmation !== CONFIRMATION_WORD}
+              >
+                <FormattedMessage id="label.reset" defaultMessage="Reset" />
+              </Button>
+              <Button onClick={onClose}>
+                <FormattedMessage id="label.cancel" defaultMessage="Cancel" />
+              </Button>
+            </FormButtons>
+            <FormMessage>{message}</FormMessage>
+          </Form>
+        )}
+      </Formik>
+    </FormLayout>
+  );
+}
diff --git a/components/metrics/MetricCard.js b/components/metrics/MetricCard.js
@@ -3,13 +3,38 @@ import { useSpring, animated } from 'react-spring';
 import { formatNumber } from '../../lib/format';
 import styles from './MetricCard.module.css';
 
-const MetricCard = ({ value = 0, label, format = formatNumber }) => {
+const MetricCard = ({
+  value = 0,
+  change = 0,
+  label,
+  reverseColors = false,
+  format = formatNumber,
+}) => {
   const props = useSpring({ x: Number(value) || 0, from: { x: 0 } });
+  const changeProps = useSpring({ x: Number(change) || 0, from: { x: 0 } });
 
   return (
     <div className={styles.card}>
       <animated.div className={styles.value}>{props.x.interpolate(x => format(x))}</animated.div>
-      <div className={styles.label}>{label}</div>
+      <div className={styles.label}>
+        {label}
+        {~~change === 0 && <span className={styles.change}>{format(0)}</span>}
+        {~~change !== 0 && (
+          <animated.span
+            className={`${styles.change} ${
+              change >= 0
+                ? !reverseColors
+                  ? styles.positive
+                  : styles.negative
+                : !reverseColors
+                ? styles.negative
+                : styles.positive
+            }`}
+          >
+            {changeProps.x.interpolate(x => `${change >= 0 ? '+' : ''}${format(x)}`)}
+          </animated.span>
+        )}
+      </div>
     </div>
   );
 };

diff --git a/components/metrics/MetricCard.module.css b/components/metrics/MetricCard.module.css
@@ -16,4 +16,24 @@
 .label {
   font-size: var(--font-size-normal);
   white-space: nowrap;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.change {
+  font-size: 12px;
+  padding: 0 5px;
+  border-radius: 5px;
+  margin-left: 4px;
+  border: 1px solid var(--gray200);
+  color: var(--gray500);
+}
+
+.change.positive {
+  color: var(--green500);
+}
+
+.change.negative {
+  color: var(--red500);
 }
diff --git a/components/metrics/MetricsBar.js b/components/metrics/MetricsBar.js
@@ -34,14 +34,22 @@ export default function MetricsBar({ websiteId, className }) {
     [url, modified],
   );
 
-  const formatFunc = format ? formatLongNumber : formatNumber;
+  const formatFunc = format
+    ? n => (n >= 0 ? formatLongNumber(n) : `-${formatLongNumber(Math.abs(n))}`)
+    : formatNumber;
 
   function handleSetFormat() {
     setFormat(state => !state);
   }
 
   const { pageviews, uniques, bounces, totaltime } = data || {};
-  const num = Math.min(uniques, bounces);
+  const num = Math.min(data && uniques.value, data && bounces.value);
+  const diffs = data && {
+    pageviews: pageviews.value - pageviews.change,
+    uniques: uniques.value - uniques.change,
+    bounces: bounces.value - bounces.change,
+    totaltime: totaltime.value - totaltime.change,
+  };
 
   return (
     <div className={classNames(styles.bar, className)} onClick={handleSetFormat}>
@@ -51,18 +59,27 @@ export default function MetricsBar({ websiteId, className }) {
         <>
           <MetricCard
             label={<FormattedMessage id="metrics.views" defaultMessage="Views" />}
-            value={pageviews}
+            value={pageviews.value}
+            change={pageviews.change}
             format={formatFunc}
           />
           <MetricCard
             label={<FormattedMessage id="metrics.visitors" defaultMessage="Visitors" />}
-            value={uniques}
+            value={uniques.value}
+            change={uniques.change}
             format={formatFunc}
           />
           <MetricCard
             label={<FormattedMessage id="metrics.bounce-rate" defaultMessage="Bounce rate" />}
-            value={uniques ? (num / uniques) * 100 : 0}
+            value={uniques.value ? (num / uniques.value) * 100 : 0}
+            change={
+              uniques.value && uniques.change
+                ? (num / uniques.value) * 100 -
+                    (Math.min(diffs.uniques, diffs.bounces) / diffs.uniques) * 100 || 0
+                : 0
+            }
             format={n => Number(n).toFixed(0) + '%'}
+            reverseColors
           />
           <MetricCard
             label={
@@ -71,8 +88,19 @@ export default function MetricsBar({ websiteId, className }) {
                 defaultMessage="Average visit time"
               />
             }
-            value={totaltime && pageviews ? totaltime / (pageviews - bounces) : 0}
-            format={n => formatShortTime(n, ['m', 's'], ' ')}
+            value={
+              totaltime.value && pageviews.value
+                ? totaltime.value / (pageviews.value - bounces.value)
+                : 0
+            }
+            change={
+              totaltime.value && pageviews.value
+                ? (diffs.totaltime / (diffs.pageviews - diffs.bounces) -
+                    totaltime.value / (pageviews.value - bounces.value)) *
+                    -1 || 0
+                : 0
+            }
+            format={n => `${n < 0 ? '-' : ''}${formatShortTime(Math.abs(~~n), ['m', 's'], ' ')}`}
           />
         </>
       )}

diff --git a/components/settings/WebsiteSettings.js b/components/settings/WebsiteSettings.js
@@ -7,6 +7,7 @@ import Button from 'components/common/Button';
 import PageHeader from 'components/layout/PageHeader';
 import Modal from 'components/common/Modal';
 import WebsiteEditForm from 'components/forms/WebsiteEditForm';
+import ResetForm from 'components/forms/ResetForm';
 import DeleteForm from 'components/forms/DeleteForm';
 import TrackingCodeForm from 'components/forms/TrackingCodeForm';
 import ShareUrlForm from 'components/forms/ShareUrlForm';
@@ -16,6 +17,7 @@ import Toast from 'components/common/Toast';
 import Favicon from 'components/common/Favicon';
 import Pen from 'assets/pen.svg';
 import Trash from 'assets/trash.svg';
+import Reset from 'assets/redo.svg';
 import Plus from 'assets/plus.svg';
 import Code from 'assets/code.svg';
 import LinkIcon from 'assets/link.svg';
@@ -24,6 +26,7 @@ import styles from './WebsiteSettings.module.css';
 
 export default function WebsiteSettings() {
   const [editWebsite, setEditWebsite] = useState();
+  const [resetWebsite, setResetWebsite] = useState();
   const [deleteWebsite, setDeleteWebsite] = useState();
   const [addWebsite, setAddWebsite] = useState();
   const [showCode, setShowCode] = useState();
@@ -55,6 +58,9 @@ export default function WebsiteSettings() {
       <Button icon={<Pen />} size="small" onClick={() => setEditWebsite(row)}>
         <FormattedMessage id="label.edit" defaultMessage="Edit" />
       </Button>
+      <Button icon={<Reset />} size="small" onClick={() => setResetWebsite(row)}>
+        <FormattedMessage id="label.reset" defaultMessage="Reset" />
+      </Button>
       <Button icon={<Trash />} size="small" onClick={() => setDeleteWebsite(row)}>
         <FormattedMessage id="label.delete" defaultMessage="Delete" />
       </Button>
@@ -96,6 +102,7 @@ export default function WebsiteSettings() {
   function handleClose() {
     setAddWebsite(null);
     setEditWebsite(null);
+    setResetWebsite(null);
     setDeleteWebsite(null);
     setShowCode(null);
     setShowUrl(null);
@@ -141,6 +148,17 @@ export default function WebsiteSettings() {
           <WebsiteEditForm onSave={handleSave} onClose={handleClose} />
         </Modal>
       )}
+      {resetWebsite && (
+        <Modal
+          title={<FormattedMessage id="label.reset-website" defaultMessage="Reset statistics" />}
+        >
+          <ResetForm
+            values={{ type: 'website', id: resetWebsite.website_id, name: resetWebsite.name }}
+            onSave={handleSave}
+            onClose={handleClose}
+          />
+        </Modal>
+      )}
       {deleteWebsite && (
         <Modal
           title={<FormattedMessage id="label.delete-website" defaultMessage="Delete website" />}

diff --git a/lang/en-US.json b/lang/en-US.json
@@ -19,6 +19,7 @@
   "label.delete": "Delete",
   "label.delete-account": "Delete account",
   "label.delete-website": "Delete website",
+  "label.reset-website": "Reset statistics",
   "label.dismiss": "Dismiss",
   "label.domain": "Domain",
   "label.edit": "Edit",
@@ -58,8 +59,10 @@
   "label.view-details": "View details",
   "label.websites": "Websites",
   "message.active-users": "{x} current {x, plural, one {visitor} other {visitors}}",
+  "message.confirm-reset": "Are your sure you want to reset {target}'s statistics?",
   "message.confirm-delete": "Are your sure you want to delete {target}?",
   "message.copied": "Copied!",
+  "message.reset-warning": "All statistics for this website will be deleted, but your tracking code will remain intact.",
   "message.delete-warning": "All associated data will be deleted as well.",
   "message.failure": "Something went wrong.",
   "message.get-share-url": "Get share URL",

diff --git a/lang/pl-PL.json b/lang/pl-PL.json
@@ -5,6 +5,7 @@
   "label.administrator": "Administrator",
   "label.all": "Wszystkie",
   "label.all-websites": "Wszystkie witryny",
+  "label.all-events": "Wszystkie wydarzenia",
   "label.back": "Powrót",
   "label.cancel": "Anuluj",
   "label.change-password": "Zmień hasło",