Renamed methods. Initial work on realtime dashboard.

components/common/RefreshButton.js

@@ -12,7 +12,7 @@ export default function RefreshButton({ websiteId }) {
   const dispatch = useDispatch();
   const [dateRange] = useDateRange(websiteId);
   const [loading, setLoading] = useState(false);
-  const completed = useSelector(state => state.queries[`/api/website/${websiteId}/metrics`]);
+  const completed = useSelector(state => state.queries[`/api/website/${websiteId}/stats`]);
 
   function handleClick() {
     if (dateRange) {

components/layout/Header.js

@@ -30,6 +30,9 @@ export default function Header() {
               <Link href="/dashboard">
                 <FormattedMessage id="label.dashboard" defaultMessage="Dashboard" />
               </Link>
+              <Link href="/realtime">
+                <FormattedMessage id="label.realtime" defaultMessage="Realtime" />
+              </Link>
               <Link href="/settings">
                 <FormattedMessage id="label.settings" defaultMessage="Settings" />
               </Link>

components/metrics/MetricsBar.js

@@ -19,7 +19,7 @@ export default function MetricsBar({ websiteId, token, className }) {
   } = usePageQuery();
 
   const { data, error, loading } = useFetch(
-    `/api/website/${websiteId}/metrics`,
+    `/api/website/${websiteId}/stats`,
     {
       start_at: +startDate,
       end_at: +endDate,

components/metrics/MetricsTable.js

@@ -38,7 +38,7 @@ export default function MetricsTable({
   } = usePageQuery();
 
   const { data, loading, error } = useFetch(
-    `/api/website/${websiteId}/rankings`,
+    `/api/website/${websiteId}/metrics`,
     {
       type,
       start_at: +startDate,

components/metrics/RealtimeChart.js

@@ -0,0 +1,80 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+import tinycolor from 'tinycolor2';
+import BarChart from './BarChart';
+import useTheme from 'hooks/useTheme';
+import { THEME_COLORS } from 'lib/constants';
+
+export default function RealtimeChart({ websiteId, data, unit, records, className, loading }) {
+  const intl = useIntl();
+  const [theme] = useTheme();
+  const primaryColor = tinycolor(THEME_COLORS[theme].primary);
+  const colors = {
+    views: {
+      background: primaryColor.setAlpha(0.4).toRgbString(),
+      border: primaryColor.setAlpha(0.5).toRgbString(),
+    },
+    visitors: {
+      background: primaryColor.setAlpha(0.6).toRgbString(),
+      border: primaryColor.setAlpha(0.7).toRgbString(),
+    },
+  };
+
+  const handleUpdate = chart => {
+    const {
+      data: { datasets },
+    } = chart;
+
+    datasets[0].data = data.uniques;
+    datasets[0].label = intl.formatMessage({
+      id: 'metrics.unique-visitors',
+      defaultMessage: 'Unique visitors',
+    });
+    datasets[1].data = data.pageviews;
+    datasets[1].label = intl.formatMessage({
+      id: 'metrics.page-views',
+      defaultMessage: 'Page views',
+    });
+
+    chart.update();
+  };
+
+  if (!data) {
+    return null;
+  }
+
+  return (
+    <BarChart
+      className={className}
+      chartId={`realtime-${websiteId}`}
+      datasets={[
+        {
+          label: intl.formatMessage({
+            id: 'metrics.unique-visitors',
+            defaultMessage: 'Unique visitors',
+          }),
+          data: data.uniques,
+          lineTension: 0,
+          backgroundColor: colors.visitors.background,
+          borderColor: colors.visitors.border,
+          borderWidth: 1,
+        },
+        {
+          label: intl.formatMessage({
+            id: 'metrics.page-views',
+            defaultMessage: 'Page views',
+          }),
+          data: data.pageviews,
+          lineTension: 0,
+          backgroundColor: colors.views.background,
+          borderColor: colors.views.border,
+          borderWidth: 1,
+        },
+      ]}
+      unit={unit}
+      records={records}
+      onUpdate={handleUpdate}
+      loading={loading}
+    />
+  );
+}

components/pages/RealtimeDashboard.js

@@ -0,0 +1,36 @@
+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';
+
+export default function TestConsole() {
+  const user = useSelector(state => state.user);
+  const [website, setWebsite] = useState();
+  const { data } = useFetch('/api/websites');
+
+  if (!data || !user?.is_admin) {
+    return null;
+  }
+
+  const options = [{ label: 'All websites', value: 0 }].concat(
+    data.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));
+  }
+
+  return (
+    <Page>
+      <PageHeader>
+        <div>Real time</div>
+        <DropDown value={selectedValue} options={options} onChange={handleSelect} />
+      </PageHeader>
+      <RealtimeChart websiteId={website?.website_id} />
+    </Page>
+  );
+}

components/pages/RealtimeDashboard.module.css

@@ -0,0 +1,3 @@
+.container {
+  display: flex;
+}

components/pages/TestConsole.js

@@ -7,7 +7,7 @@ import Page from '../layout/Page';
 import PageHeader from '../layout/PageHeader';
 import useFetch from '../../hooks/useFetch';
 import DropDown from '../common/DropDown';
-import styles from './Test.module.css';
+import styles from './TestConsole.module.css';
 import WebsiteChart from '../metrics/WebsiteChart';
 import EventsChart from '../metrics/EventsChart';
 import Button from '../common/Button';