From e7f83c084e74a9053bc01fe11d9e67cfdce69fae Mon Sep 17 00:00:00 2001
From: Mike Cao <mike@mikecao.com>
Date: Sun, 23 Aug 2020 00:23:47 -0700
Subject: [PATCH] Add links to referrer urls.

---
 components/metrics/MetricsTable.js         |  6 ++++--
 components/metrics/MetricsTable.module.css |  9 +++++++++
 components/metrics/ReferrersTable.js       | 11 +++++++++++
 package.json                               |  2 +-
 4 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/components/metrics/MetricsTable.js b/components/metrics/MetricsTable.js
index bc41aa3d..207366fc 100644
--- a/components/metrics/MetricsTable.js
+++ b/components/metrics/MetricsTable.js
@@ -23,6 +23,7 @@ export default function MetricsTable({
   headerComponent,
   onDataLoad = () => {},
   onExpand = () => {},
+  labelRenderer = e => e,
 }) {
   const [data, setData] = useState();
   const [format, setFormat] = useState(true);
@@ -65,6 +66,7 @@ export default function MetricsTable({
         animate={shouldAnimate}
         format={formatFunc}
         onClick={handleSetFormat}
+        labelRenderer={labelRenderer}
       />
     );
   }
@@ -113,7 +115,7 @@ export default function MetricsTable({
   );
 }
 
-const AnimatedRow = ({ label, value = 0, percent, animate, format, onClick }) => {
+const AnimatedRow = ({ label, value = 0, percent, animate, format, onClick, labelRenderer }) => {
   const props = useSpring({
     width: percent,
     y: value,
@@ -123,7 +125,7 @@ const AnimatedRow = ({ label, value = 0, percent, animate, format, onClick }) =>
 
   return (
     <div className={styles.row}>
-      <div className={styles.label}>{decodeURI(label)}</div>
+      <div className={styles.label}>{labelRenderer(decodeURI(label))}</div>
       <div className={styles.value} onClick={onClick}>
         <animated.div className={styles.value}>{props.y?.interpolate(format)}</animated.div>
       </div>
diff --git a/components/metrics/MetricsTable.module.css b/components/metrics/MetricsTable.module.css
index fb1d928e..7e79c078 100644
--- a/components/metrics/MetricsTable.module.css
+++ b/components/metrics/MetricsTable.module.css
@@ -45,6 +45,15 @@
   flex: 2;
 }
 
+.label a {
+  color: inherit;
+  text-decoration: none;
+}
+
+.label a:hover {
+  color: var(--primary400);
+}
+
 .label:empty {
   color: #b3b3b3;
 }
diff --git a/components/metrics/ReferrersTable.js b/components/metrics/ReferrersTable.js
index fbcfff87..480a299e 100644
--- a/components/metrics/ReferrersTable.js
+++ b/components/metrics/ReferrersTable.js
@@ -13,6 +13,16 @@ export default function Referrers({
 }) {
   const [filter, setFilter] = useState('Combined');
 
+  const renderLink = url => {
+    return url.startsWith('http') ? (
+      <a href={url} target="_blank" rel="noreferrer">
+        {url}
+      </a>
+    ) : (
+      url
+    );
+  };
+
   return (
     <MetricsTable
       title="Referrers"
@@ -30,6 +40,7 @@ export default function Referrers({
         raw: filter === 'Raw',
       }}
       onExpand={onExpand}
+      labelRenderer={renderLink}
     />
   );
 }
diff --git a/package.json b/package.json
index c653fe6a..df0eb3ca 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "umami",
-  "version": "0.16.0",
+  "version": "0.16.1",
   "description": "A simple, fast, website analytics alternative to Google Analytics. ",
   "author": "Mike Cao <mike@mikecao.com>",
   "license": "MIT",