Added active user count to realtime page.

components/metrics/ActiveUsers.js

@@ -7,15 +7,15 @@ import { TOKEN_HEADER } from 'lib/constants';
 import useShareToken from 'hooks/useShareToken';
 import styles from './ActiveUsers.module.css';
 
-export default function ActiveUsers({ websiteId, className }) {
+export default function ActiveUsers({ websiteId, className, value, interval = 60000 }) {
   const shareToken = useShareToken();
-  const { data } = useFetch(`/api/website/${websiteId}/active`, {
-    interval: 60000,
+  const { data } = useFetch(!value && `/api/website/${websiteId}/active`, {
+    interval,
     headers: { [TOKEN_HEADER]: shareToken?.token },
   });
   const count = useMemo(() => {
-    return data?.[0]?.x || 0;
-  }, [data]);
+    return value || data?.[0]?.x || 0;
+  }, [data, value]);
 
   if (count === 0) {
     return null;

components/metrics/RealtimeHeader.js

@@ -1,5 +1,6 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { FormattedMessage } from 'react-intl';
+import { differenceInMinutes } from 'date-fns';
 import PageHeader from '../layout/PageHeader';
 import DropDown from '../common/DropDown';
 import ActiveUsers from './ActiveUsers';
@@ -19,6 +20,12 @@ export default function RealtimeHeader({ websites, data, websiteId, onSelect })
 
   const { pageviews, sessions, events, countries } = data;
 
+  const count = useMemo(() => {
+    return sessions.filter(
+      ({ created_at }) => differenceInMinutes(new Date(), new Date(created_at)) < 5,
+    ).length;
+  }, [sessions]);
+
   return (
     <>
       <PageHeader>
@@ -26,7 +33,7 @@ export default function RealtimeHeader({ websites, data, websiteId, onSelect })
           <FormattedMessage id="label.realtime" defaultMessage="Realtime" />
         </div>
         <div>
-          <ActiveUsers className={styles.active} websiteId={websiteId} />
+          <ActiveUsers className={styles.active} value={count} />
         </div>
         <DropDown value={websiteId} options={options} onChange={onSelect} />
       </PageHeader>

components/metrics/RealtimeHeader.module.css

@@ -2,3 +2,9 @@
   display: flex;
   margin-bottom: 10px;
 }
+
+@media only screen and (max-width: 576px) {
+  .active {
+    display: none;
+  }
+}