Refactored settings components.

components/pages/realtime/RealtimeDashboard.js

@@ -0,0 +1,157 @@
+import { useState, useEffect, useMemo, useCallback } from 'react';
+import { FormattedMessage } from 'react-intl';
+import { subMinutes, startOfMinute } from 'date-fns';
+import firstBy from 'thenby';
+import Page from 'components/layout/Page';
+import GridLayout, { GridRow, GridColumn } from 'components/layout/GridLayout';
+import RealtimeChart from 'components/metrics/RealtimeChart';
+import RealtimeLog from 'components/metrics/RealtimeLog';
+import RealtimeHeader from 'components/metrics/RealtimeHeader';
+import WorldMap from 'components/common/WorldMap';
+import DataTable from 'components/metrics/DataTable';
+import RealtimeViews from 'components/metrics/RealtimeViews';
+import useApi from 'hooks/useApi';
+import useLocale from 'hooks/useLocale';
+import useCountryNames from 'hooks/useCountryNames';
+import { percentFilter } from 'lib/filters';
+import { SHARE_TOKEN_HEADER, REALTIME_RANGE, REALTIME_INTERVAL } from 'lib/constants';
+import styles from './RealtimeDashboard.module.css';
+
+function mergeData(state, data, time) {
+  const ids = state.map(({ __id }) => __id);
+  return state
+    .concat(data.filter(({ __id }) => !ids.includes(__id)))
+    .filter(({ createdAt }) => new Date(createdAt).getTime() >= time);
+}
+
+function filterWebsite(data, id) {
+  return data.filter(({ websiteId }) => websiteId === id);
+}
+
+export default function RealtimeDashboard() {
+  const { locale } = useLocale();
+  const countryNames = useCountryNames(locale);
+  const [data, setData] = useState();
+  const [websiteId, setWebsiteId] = useState(null);
+  const { get, useQuery } = useApi();
+  const { data: init, isLoading } = useQuery(['realtime:init'], () => get('/realtime/init'));
+  const { data: updates } = useQuery(
+    ['realtime:updates'],
+    () =>
+      get('/realtime/update', { startAt: data?.timestamp }, { [SHARE_TOKEN_HEADER]: init?.token }),
+    {
+      disabled: !init?.websites?.length || !data,
+      retryInterval: REALTIME_INTERVAL,
+    },
+  );
+
+  const renderCountryName = useCallback(
+    ({ x }) => <span className={locale}>{countryNames[x]}</span>,
+    [countryNames],
+  );
+
+  const realtimeData = useMemo(() => {
+    if (data) {
+      const { pageviews, sessions, events } = data;
+
+      if (websiteId) {
+        const { id } = init.websites.find(n => n.id === websiteId);
+        return {
+          pageviews: filterWebsite(pageviews, id),
+          sessions: filterWebsite(sessions, id),
+          events: filterWebsite(events, id),
+        };
+      }
+    }
+
+    return data;
+  }, [data, websiteId]);
+
+  const countries = useMemo(() => {
+    if (realtimeData?.sessions) {
+      return percentFilter(
+        realtimeData.sessions
+          .reduce((arr, { country }) => {
+            if (country) {
+              const row = arr.find(({ x }) => x === country);
+
+              if (!row) {
+                arr.push({ x: country, y: 1 });
+              } else {
+                row.y += 1;
+              }
+            }
+            return arr;
+          }, [])
+          .sort(firstBy('y', -1)),
+      );
+    }
+    return [];
+  }, [realtimeData?.sessions]);
+
+  useEffect(() => {
+    if (init && !data) {
+      const { websites, data } = init;
+
+      setData({ websites, ...data });
+    }
+  }, [init]);
+
+  useEffect(() => {
+    if (updates) {
+      const { pageviews, sessions, events, timestamp } = updates;
+      const time = subMinutes(startOfMinute(new Date()), REALTIME_RANGE).getTime();
+
+      setData(state => ({
+        ...state,
+        pageviews: mergeData(state.pageviews, pageviews, time),
+        sessions: mergeData(state.sessions, sessions, time),
+        events: mergeData(state.events, events, time),
+        timestamp,
+      }));
+    }
+  }, [updates]);
+
+  if (!init || !data || isLoading) {
+    return null;
+  }
+
+  const { websites } = data;
+
+  return (
+    <Page>
+      <RealtimeHeader
+        websites={websites}
+        websiteId={websiteId}
+        data={{ ...realtimeData, countries }}
+        onSelect={setWebsiteId}
+      />
+      <div className={styles.chart}>
+        <RealtimeChart data={realtimeData} unit="minute" records={REALTIME_RANGE} />
+      </div>
+      <GridLayout>
+        <GridRow>
+          <GridColumn xs={12} lg={4}>
+            <RealtimeViews websiteId={websiteId} data={realtimeData} websites={websites} />
+          </GridColumn>
+          <GridColumn xs={12} lg={8}>
+            <RealtimeLog websiteId={websiteId} data={realtimeData} websites={websites} />
+          </GridColumn>
+        </GridRow>
+        <GridRow>
+          <GridColumn xs={12} lg={4}>
+            <DataTable
+              title={<FormattedMessage id="metrics.countries" defaultMessage="Countries" />}
+              metric={<FormattedMessage id="metrics.visitors" defaultMessage="Visitors" />}
+              data={countries}
+              renderLabel={renderCountryName}
+            />
+          </GridColumn>
+          <GridColumn xs={12} lg={8}>
+            <WorldMap data={countries} />
+          </GridColumn>
+        </GridRow>
+      </GridLayout>
+    </Page>
+  );
+}

components/pages/realtime/RealtimeDashboard.module.css

@@ -0,0 +1,7 @@
+.container {
+  display: flex;
+}
+
+.chart {
+  margin-bottom: 30px;
+}