Refactored realtime.

src/components/hooks/queries/useRealtime.ts

@@ -1,87 +1,21 @@
-import { useMemo, useRef } from 'react';
 import { RealtimeData } from 'lib/types';
 import { useApi } from './useApi';
-import { REALTIME_INTERVAL, REALTIME_RANGE } from 'lib/constants';
-import { startOfMinute, subMinutes } from 'date-fns';
-import { percentFilter } from 'lib/filters';
-import thenby from 'thenby';
-
-function mergeData(state = [], data = [], time: number) {
-  const ids = state.map(({ id }) => id);
-  return state
-    .concat(data.filter(({ id }) => !ids.includes(id)))
-    .filter(({ timestamp }) => timestamp >= time);
-}
+import { REALTIME_INTERVAL } from 'lib/constants';
+import { useTimezone } from 'components/hooks';
 
 export function useRealtime(websiteId: string) {
-  const currentData = useRef({
-    pageviews: [],
-    sessions: [],
-    events: [],
-    countries: [],
-    visitors: [],
-    timestamp: 0,
-  });
   const { get, useQuery } = useApi();
+  const { timezone } = useTimezone();
   const { data, isLoading, error } = useQuery<RealtimeData>({
     queryKey: ['realtime', websiteId],
     queryFn: async () => {
-      const state = currentData.current;
-      const data = await get(`/realtime/${websiteId}`, { startAt: state?.timestamp || 0 });
-      const date = subMinutes(startOfMinute(new Date()), REALTIME_RANGE);
-      const time = date.getTime();
-      const { pageviews, sessions, events, timestamp } = data;
-
-      return {
-        pageviews: mergeData(state?.pageviews, pageviews, time),
-        sessions: mergeData(state?.sessions, sessions, time),
-        events: mergeData(state?.events, events, time),
-        timestamp,
-      };
+      return get(`/realtime/${websiteId}`, { timezone });
     },
     enabled: !!websiteId,
     refetchInterval: REALTIME_INTERVAL,
   });
 
-  const realtimeData: RealtimeData = useMemo(() => {
-    if (!data) {
-      return { pageviews: [], sessions: [], events: [], countries: [], visitors: [], timestamp: 0 };
-    }
-
-    data.countries = percentFilter(
-      data.sessions
-        .reduce((arr, data) => {
-          if (!arr.find(({ id }) => id === data.id)) {
-            return arr.concat(data);
-          }
-          return arr;
-        }, [])
-        .reduce((arr: { x: any; y: number }[], { country }: any) => {
-          if (country) {
-            const row = arr.find(({ x }) => x === country);
-
-            if (!row) {
-              arr.push({ x: country, y: 1 });
-            } else {
-              row.y += 1;
-            }
-          }
-          return arr;
-        }, [])
-        .sort(thenby.firstBy('y', -1)),
-    );
-
-    data.visitors = data.sessions.reduce((arr, val) => {
-      if (!arr.find(({ id }) => id === val.id)) {
-        return arr.concat(val);
-      }
-      return arr;
-    }, []);
-
-    return data;
-  }, [data]);
-
-  return { data: realtimeData, isLoading, error };
+  return { data, isLoading, error };
 }
 
 export default useRealtime;

src/components/hooks/useFields.ts

@@ -7,7 +7,6 @@ export function useFields() {
     { name: 'url', type: 'string', label: formatMessage(labels.url) },
     { name: 'title', type: 'string', label: formatMessage(labels.pageTitle) },
     { name: 'referrer', type: 'string', label: formatMessage(labels.referrer) },
-    { name: 'host', type: 'string', label: formatMessage(labels.host) },
     { name: 'query', type: 'string', label: formatMessage(labels.query) },
     { name: 'browser', type: 'string', label: formatMessage(labels.browser) },
     { name: 'os', type: 'string', label: formatMessage(labels.os) },
@@ -15,6 +14,7 @@ export function useFields() {
     { name: 'country', type: 'string', label: formatMessage(labels.country) },
     { name: 'region', type: 'string', label: formatMessage(labels.region) },
     { name: 'city', type: 'string', label: formatMessage(labels.city) },
+    { name: 'host', type: 'string', label: formatMessage(labels.host) },
   ];
 
   return { fields };

src/components/metrics/PageviewsChart.tsx

@@ -5,11 +5,11 @@ import { renderDateLabels } from 'lib/charts';
 
 export interface PageviewsChartProps extends BarChartProps {
   data: {
-    pageviews: any[];
-    sessions: any[];
+    views: any[];
+    visitors: any[];
     compare?: {
-      pageviews: any[];
-      sessions: any[];
+      views: any[];
+      visitors: any[];
     };
   };
   unit: string;
@@ -30,14 +30,14 @@ export function PageviewsChart({ data, unit, isLoading, ...props }: PageviewsCha
       datasets: [
         {
           label: formatMessage(labels.visitors),
-          data: data.sessions,
+          data: data.visitors,
           borderWidth: 1,
           ...colors.chart.visitors,
           order: 3,
         },
         {
           label: formatMessage(labels.views),
-          data: data.pageviews,
+          data: data.views,
           borderWidth: 1,
           ...colors.chart.views,
           order: 4,
@@ -47,7 +47,7 @@ export function PageviewsChart({ data, unit, isLoading, ...props }: PageviewsCha
               {
                 type: 'line',
                 label: `${formatMessage(labels.views)} (${formatMessage(labels.previous)})`,
-                data: data.compare.pageviews,
+                data: data.compare.views,
                 borderWidth: 2,
                 backgroundColor: '#8601B0',
                 borderColor: '#8601B0',
@@ -56,7 +56,7 @@ export function PageviewsChart({ data, unit, isLoading, ...props }: PageviewsCha
               {
                 type: 'line',
                 label: `${formatMessage(labels.visitors)} (${formatMessage(labels.previous)})`,
-                data: data.compare.sessions,
+                data: data.compare.visitors,
                 borderWidth: 2,
                 backgroundColor: '#f15bb5',
                 borderColor: '#f15bb5',

src/components/metrics/RealtimeChart.tsx

@@ -1,29 +1,10 @@
 import { useMemo, useRef } from 'react';
-import { format, startOfMinute, subMinutes, isBefore } from 'date-fns';
+import { startOfMinute, subMinutes, isBefore } from 'date-fns';
 import PageviewsChart from './PageviewsChart';
 import { getDateArray } from 'lib/date';
 import { DEFAULT_ANIMATION_DURATION, REALTIME_RANGE } from 'lib/constants';
 import { RealtimeData } from 'lib/types';
 
-function mapData(data: any[]) {
-  let last = 0;
-  const arr = [];
-
-  data?.reduce((obj, { timestamp }) => {
-    const t = startOfMinute(new Date(timestamp));
-    if (t.getTime() > last) {
-      obj = { x: format(t, 'yyyy-LL-dd HH:mm:00'), y: 1 };
-      arr.push(obj);
-      last = t.getTime();
-    } else {
-      obj.y += 1;
-    }
-    return obj;
-  }, {});
-
-  return arr;
-}
-
 export interface RealtimeChartProps {
   data: RealtimeData;
   unit: string;
@@ -37,12 +18,12 @@ export function RealtimeChart({ data, unit, ...props }: RealtimeChartProps) {
 
   const chartData = useMemo(() => {
     if (!data) {
-      return { pageviews: [], sessions: [] };
+      return { views: [], visitors: [] };
     }
 
     return {
-      pageviews: getDateArray(mapData(data.pageviews), startDate, endDate, unit),
-      sessions: getDateArray(mapData(data.visitors), startDate, endDate, unit),
+      views: getDateArray(data.series.views, startDate, endDate, unit),
+      visitors: getDateArray(data.series.visitors, startDate, endDate, unit),
     };
   }, [data, startDate, endDate, unit]);