Add links to referrer urls.

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>

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;
 }

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}
     />
   );
 }

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",