Update realtime chart.

components/metrics/ActiveUsers.js

@@ -1,8 +1,8 @@
 import React, { useMemo } from 'react';
+import { FormattedMessage } from 'react-intl';
 import classNames from 'classnames';
 import useFetch from 'hooks/useFetch';
 import styles from './ActiveUsers.module.css';
-import { FormattedMessage } from 'react-intl';
 
 export default function ActiveUsers({ websiteId, token, className }) {
   const { data } = useFetch(`/api/website/${websiteId}/active`, { token }, { interval: 60000 });

components/metrics/BarChart.js

@@ -39,6 +39,8 @@ export default function BarChart({
     const w = canvas.current.width;
 
     switch (unit) {
+      case 'minute':
+        return dateFormat(d, 'h:mm', locale);
       case 'hour':
         return dateFormat(d, 'ha', locale);
       case 'day':

components/metrics/PageviewsChart.js

@@ -26,7 +26,7 @@ export default function PageviewsChart({ websiteId, data, unit, records, classNa
       data: { datasets },
     } = chart;
 
-    datasets[0].data = data.uniques;
+    datasets[0].data = data.sessions;
     datasets[0].label = intl.formatMessage({
       id: 'metrics.unique-visitors',
       defaultMessage: 'Unique visitors',
@@ -56,7 +56,7 @@ export default function PageviewsChart({ websiteId, data, unit, records, classNa
                 id: 'metrics.unique-visitors',
                 defaultMessage: 'Unique visitors',
               }),
-              data: data.uniques,
+              data: data.sessions,
               lineTension: 0,
               backgroundColor: colors.visitors.background,
               borderColor: colors.visitors.border,

components/metrics/WebsiteChart.js

@@ -45,14 +45,14 @@ export default function WebsiteChart({
     { onDataLoad, update: [modified] },
   );
 
-  const [pageviews, uniques] = useMemo(() => {
+  const chartData = useMemo(() => {
     if (data) {
-      return [
-        getDateArray(data.pageviews, startDate, endDate, unit),
-        getDateArray(data.uniques, startDate, endDate, unit),
-      ];
+      return {
+        pageviews: getDateArray(data.pageviews, startDate, endDate, unit),
+        sessions: getDateArray(data.sessions, startDate, endDate, unit),
+      };
     }
-    return [[], []];
+    return { pageviews: [], sessions: [] };
   }, [data]);
 
   function handleCloseFilter() {
@@ -87,7 +87,7 @@ export default function WebsiteChart({
           {error && <ErrorMessage />}
           <PageviewsChart
             websiteId={websiteId}
-            data={{ pageviews, uniques }}
+            data={chartData}
             unit={unit}
             records={getDateLength(startDate, endDate, unit)}
             loading={loading}

components/pages/RealtimeDashboard.js

@@ -1,36 +1,101 @@
-import React, { useState } from 'react';
-import { useSelector } from 'react-redux';
-import Page from '../layout/Page';
-import PageHeader from '../layout/PageHeader';
-import useFetch from '../../hooks/useFetch';
-import DropDown from '../common/DropDown';
-import RealtimeChart from '../metrics/RealtimeChart';
+import React, { useState, useEffect, useMemo } from 'react';
+import { FormattedMessage } from 'react-intl';
+import { subMinutes, startOfMinute, parseISO, format } from 'date-fns';
+import Page from 'components/layout/Page';
+import PageHeader from 'components/layout/PageHeader';
+import DropDown from 'components/common/DropDown';
+import useFetch from 'hooks/useFetch';
+import PageviewsChart from '../metrics/PageviewsChart';
+import { getDateArray } from '../../lib/date';
 
-export default function TestConsole() {
-  const user = useSelector(state => state.user);
+function filterTime(data, time) {
+  return data.filter(({ created_at }) => new Date(created_at).getTime() > time);
+}
+
+function mapData(data) {
+  let last = 0;
+  const arr = [];
+
+  data.reduce((obj, val) => {
+    const { created_at } = val;
+    const t = startOfMinute(parseISO(created_at));
+    if (t.getTime() > last) {
+      obj = { t: format(t, 'yyyy-LL-dd HH:mm:00'), y: 1 };
+      arr.push(obj);
+      last = t;
+    } else {
+      obj.y += 1;
+    }
+    return obj;
+  }, {});
+
+  return arr;
+}
+
+export default function RealtimeDashboard() {
+  const [data, setData] = useState();
   const [website, setWebsite] = useState();
-  const { data } = useFetch('/api/websites');
+  const { data: init, loading } = useFetch('/api/realtime', { type: 'init' });
+  const { data: updates } = useFetch(
+    '/api/realtime',
+    { type: 'update' },
+    { disabled: !init?.token, interval: 5000, headers: { 'x-umami-token': init?.token } },
+  );
 
-  if (!data || !user?.is_admin) {
+  const chartData = useMemo(() => {
+    if (data) {
+      const endDate = startOfMinute(new Date());
+      const startDate = subMinutes(endDate, 30);
+      const unit = 'minute';
+
+      console.log({ data });
+
+      return {
+        pageviews: getDateArray(mapData(data.pageviews), startDate, endDate, unit),
+        sessions: getDateArray(mapData(data.sessions), startDate, endDate, unit),
+      };
+    }
+    return { pageviews: [], sessions: [] };
+  }, [data]);
+
+  useEffect(() => {
+    if (init && !data) {
+      setData(init.data);
+    } else if (updates) {
+      const { pageviews, sessions, events } = updates;
+      const time = subMinutes(startOfMinute(new Date()), 30).getTime();
+      setData(state => ({
+        pageviews: filterTime(state.pageviews, time).concat(pageviews),
+        sessions: filterTime(state.sessions, time).concat(sessions),
+        events: filterTime(state.events, time).concat(events),
+      }));
+    }
+  }, [updates, init]);
+
+  if (!init || loading || !data) {
     return null;
   }
 
-  const options = [{ label: 'All websites', value: 0 }].concat(
-    data.map(({ name, website_id }) => ({ label: name, value: website_id })),
-  );
+  const { websites } = init;
+
+  const options = [
+    { label: <FormattedMessage id="label.all-websites" defaultMessage="All websites" />, value: 0 },
+  ].concat(websites.map(({ name, website_id }) => ({ label: name, value: website_id })));
   const selectedValue = options.find(({ value }) => value === website?.website_id)?.value || 0;
 
   function handleSelect(value) {
-    setWebsite(data.find(({ website_id }) => website_id === value));
+    setWebsite(websites.find(({ website_id }) => website_id === value));
   }
 
   return (
     <Page>
       <PageHeader>
-        <div>Real time</div>
+        <div>
+          <FormattedMessage id="label.realtime" defaultMessage="Realtime" />
+        </div>
         <DropDown value={selectedValue} options={options} onChange={handleSelect} />
       </PageHeader>
-      <RealtimeChart websiteId={website?.website_id} />
+      <PageviewsChart websiteId={website?.website_id} data={chartData} unit="minute" records={30} />
     </Page>
   );
 }