Updated fetch hook.

components/metrics/RealtimeLog.js

@@ -94,14 +94,24 @@ export default function RealtimeLog({ data, websites }) {
     }
   }
 
+  function getTime({ created_at }) {
+    return format(new Date(created_at), 'h:mm:ss');
+  }
+
+  function getColor(row) {
+    const { session_id } = row;
+
+    return stringToColor(uuids[session_id] || `${session_id}${getWebsite(row)}`);
+  }
+
   const Row = ({ index, style }) => {
     const row = logs[index];
     return (
       <div className={styles.row} style={style}>
         <div>
-          <Dot color={stringToColor(uuids[row.session_id] || `${row.session_id}`)} />
+          <Dot color={getColor(row)} />
         </div>
-        <div className={styles.time}>{format(new Date(row.created_at), 'h:mm:ss')}</div>
+        <div className={styles.time}>{getTime(row)}</div>
         <div className={styles.detail}>
           <Icon className={styles.icon} icon={getIcon(row)} />
           {getDetail(row)}

components/metrics/RealtimeLog.module.css

@@ -34,15 +34,12 @@
 
 .website {
   text-align: right;
-  padding-right: 20px;
+  padding: 0 20px;
 }
 
 .detail {
   display: flex;
   flex: 1;
-}
-
-.detail span {
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;

components/pages/RealtimeDashboard.js

@@ -80,7 +80,7 @@ export default function RealtimeDashboard() {
       );
     }
     return [];
-  }, [realtimeData]);
+  }, [realtimeData?.sessions]);
 
   const referrers = useMemo(() => {
     if (realtimeData?.pageviews) {
@@ -89,12 +89,15 @@ export default function RealtimeDashboard() {
           .reduce((arr, { referrer }) => {
             if (referrer?.startsWith('http')) {
               const { hostname } = new URL(referrer);
-              const row = arr.find(({ x }) => x === hostname);
 
-              if (!row) {
-                arr.push({ x: hostname, y: 1 });
-              } else {
-                row.y += 1;
+              if (!data.domains.includes(hostname)) {
+                const row = arr.find(({ x }) => x === hostname);
+
+                if (!row) {
+                  arr.push({ x: hostname, y: 1 });
+                } else {
+                  row.y += 1;
+                }
               }
             }
             return arr;
@@ -103,7 +106,7 @@ export default function RealtimeDashboard() {
       );
     }
     return [];
-  }, [realtimeData]);
+  }, [realtimeData?.pageviews]);
 
   useEffect(() => {
     if (init && !data) {
@@ -111,7 +114,11 @@ export default function RealtimeDashboard() {
       const domains = init.websites.map(({ domain }) => domain);
 
       setData({ websites, domains, ...data });
-    } else if (updates) {
+    }
+  }, [init]);
+
+  useEffect(() => {
+    if (updates) {
       const { pageviews, sessions, events, timestamp } = updates;
       const time = subMinutes(startOfMinute(new Date()), REALTIME_RANGE).getTime();
 
@@ -123,16 +130,14 @@ export default function RealtimeDashboard() {
         timestamp,
       }));
     }
-  }, [init, updates]);
+  }, [updates]);
 
-  if (!init || loading || !data) {
+  if (!init || !data || loading) {
     return null;
   }
 
   const { websites } = data;
 
-  //console.log({realtimeData, countries});
-
   return (
     <Page>
       <RealtimeHeader