Realtime header component.

components/common/Table.js

@@ -10,6 +10,7 @@ export default function Table({
   className,
   bodyClassName,
   rowKey,
+  showHeader = true,
   children,
 }) {
   if (empty && rows.length === 0) {
@@ -18,17 +19,19 @@ export default function Table({
 
   return (
     <div className={classNames(styles.table, className)}>
-      <div className={classNames(styles.header, 'row')}>
-        {columns.map(({ key, label, className, style, header }) => (
-          <div
-            key={key}
-            className={classNames(styles.head, className, header?.className)}
-            style={{ ...style, ...header?.style }}
-          >
-            {label}
-          </div>
-        ))}
-      </div>
+      {showHeader && (
+        <div className={classNames(styles.header, 'row')}>
+          {columns.map(({ key, label, className, style, header }) => (
+            <div
+              key={key}
+              className={classNames(styles.head, className, header?.className)}
+              style={{ ...style, ...header?.style }}
+            >
+              {label}
+            </div>
+          ))}
+        </div>
+      )}
       <div className={classNames(styles.body, bodyClassName)}>
         {rows.length === 0 && <NoData />}
         {!children &&

components/common/Table.module.css

@@ -4,7 +4,6 @@
 }
 
 .header {
-  display: flex;
   border-bottom: 1px solid var(--gray300);
 }
 
@@ -21,7 +20,6 @@
 }
 
 .row {
-  display: flex;
   border-bottom: 1px solid var(--gray300);
   padding: 10px 0;
 }

components/common/Tag.module.css

@@ -1,5 +1,4 @@
 .tag {
-  font-size: var(--font-size-small);
   padding: 2px 4px;
   border: 1px solid var(--gray300);
   border-radius: 4px;

components/metrics/BarChart.js

@@ -5,17 +5,17 @@ import ChartJS from 'chart.js';
 import { formatLongNumber } from 'lib/format';
 import { dateFormat } from 'lib/lang';
 import useLocale from 'hooks/useLocale';
-import styles from './BarChart.module.css';
 import useTheme from 'hooks/useTheme';
-import { THEME_COLORS } from 'lib/constants';
+import { DEFAUL_CHART_HEIGHT, DEFAULT_ANIMATION_DURATION, THEME_COLORS } from 'lib/constants';
+import styles from './BarChart.module.css';
 
 export default function BarChart({
   chartId,
   datasets,
   unit,
   records,
-  height = 400,
-  animationDuration = 300,
+  height = DEFAUL_CHART_HEIGHT,
+  animationDuration = DEFAULT_ANIMATION_DURATION,
   className,
   stacked = false,
   loading = false,

components/metrics/PageviewsChart.js

@@ -14,6 +14,7 @@ export default function PageviewsChart({
   className,
   loading,
   animationDuration = DEFAULT_ANIMATION_DURATION,
+  ...props
 }) {
   const intl = useIntl();
   const [theme] = useTheme();
@@ -56,6 +57,7 @@ export default function PageviewsChart({
     <CheckVisible>
       {visible => (
         <BarChart
+          {...props}
           className={className}
           chartId={websiteId}
           datasets={[

components/metrics/RealtimeChart.js

@@ -49,6 +49,12 @@ export default function RealtimeChart({ data, unit, ...props }) {
   }, [data]);
 
   return (
-    <PageviewsChart {...props} unit={unit} data={chartData} animationDuration={animationDuration} />
+    <PageviewsChart
+      {...props}
+      height={300}
+      unit={unit}
+      data={chartData}
+      animationDuration={animationDuration}
+    />
   );
 }

components/metrics/RealtimeHeader.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import PageHeader from '../layout/PageHeader';
+import DropDown from '../common/DropDown';
+import MetricCard from './MetricCard';
+import styles from './RealtimeHeader.module.css';
+
+export default function RealtimeHeader({ websites, data, websiteId, onSelect }) {
+  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 { pageviews, sessions, events } = data;
+  const countries = sessions.reduce((obj, { country }) => {
+    if (country) {
+      if (!obj[country]) {
+        obj[country] = 1;
+      } else {
+        obj[country] += 1;
+      }
+    }
+    return obj;
+  }, {});
+
+  return (
+    <>
+      <PageHeader>
+        <div>
+          <FormattedMessage id="label.realtime" defaultMessage="Realtime" />
+        </div>
+        <DropDown value={websiteId} options={options} onChange={onSelect} />
+      </PageHeader>
+      <div className={styles.metrics}>
+        <MetricCard
+          label={<FormattedMessage id="metrics.views" defaultMessage="Views" />}
+          value={pageviews.length}
+        />
+        <MetricCard
+          label={<FormattedMessage id="metrics.visitors" defaultMessage="Visitors" />}
+          value={sessions.length}
+        />
+        <MetricCard
+          label={<FormattedMessage id="metrics.events" defaultMessage="Events" />}
+          value={events.length}
+        />
+        <MetricCard
+          label={<FormattedMessage id="metrics.countries" defaultMessage="Countries" />}
+          value={Object.keys(countries).length}
+        />
+      </div>
+    </>
+  );
+}

components/metrics/RealtimeHeader.module.css

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

components/metrics/RealtimeLog.js

@@ -1,6 +1,7 @@
 import React, { useMemo } from 'react';
-import { FormattedMessage, useIntl } from 'react-intl';
+import { FormattedMessage } from 'react-intl';
 import { FixedSizeList } from 'react-window';
+import classNames from 'classnames';
 import firstBy from 'thenby';
 import { format } from 'date-fns';
 import Icon from 'components/common/Icon';
@@ -14,8 +15,17 @@ import Visitor from 'assets/visitor.svg';
 import Eye from 'assets/eye.svg';
 import styles from './RealtimeLog.module.css';
 
+const TYPE_PAGEVIEW = 0;
+const TYPE_SESSION = 1;
+const TYPE_EVENT = 2;
+
+const TYPE_ICONS = {
+  [TYPE_PAGEVIEW]: <Eye />,
+  [TYPE_SESSION]: <Visitor />,
+  [TYPE_EVENT]: <Bolt />,
+};
+
 export default function RealtimeLog({ data, websites }) {
-  const intl = useIntl();
   const [locale] = useLocale();
   const countryNames = useCountryNames(locale);
   const logs = useMemo(() => {
@@ -26,24 +36,21 @@ export default function RealtimeLog({ data, websites }) {
   const columns = [
     {
       key: 'time',
-      label: <FormattedMessage id="label.time" defaultMessage="Time" />,
-      className: 'col-1',
-      render: ({ created_at }) => format(new Date(created_at), 'H:mm:ss'),
+      className: classNames(styles.time, 'col-3 col-lg-1'),
+      render: ({ created_at }) => format(new Date(created_at), 'h:mm:ss'),
     },
     {
       key: 'website',
-      label: <FormattedMessage id="label.website" defaultMessage="Website" />,
-      className: 'col-2',
+      className: classNames(styles.website, 'col-9 col-lg-2'),
       render: getWebsite,
     },
     {
-      key: 'type',
-      label: <FormattedMessage id="label.event" defaultMessage="Event" />,
-      className: 'col-9',
+      key: 'detail',
+      className: classNames(styles.detail, 'col-12 col-lg-9'),
       render: row => (
         <>
-          <Icon className={styles.icon} icon={getIcon(row)} title={getType(row)} />
-          {getDescription(row)}
+          <Icon className={styles.icon} icon={getIcon(row)} />
+          {getDetail(row)}
         </>
       ),
     },
@@ -51,35 +58,26 @@ export default function RealtimeLog({ data, websites }) {
 
   function getType({ view_id, session_id, event_id }) {
     if (event_id) {
-      return intl.formatMessage({ id: 'label.event', defaultMessage: 'Event' });
+      return TYPE_EVENT;
     }
     if (view_id) {
-      return intl.formatMessage({ id: 'label.pageview', defaultMessage: 'Pageview' });
+      return TYPE_PAGEVIEW;
     }
     if (session_id) {
-      return intl.formatMessage({ id: 'label.visitor', defaultMessage: 'Visitor' });
+      return TYPE_SESSION;
     }
     return null;
   }
 
-  function getIcon({ view_id, session_id, event_id }) {
-    if (event_id) {
-      return <Bolt />;
-    }
-    if (view_id) {
-      return <Eye />;
-    }
-    if (session_id) {
-      return <Visitor />;
-    }
-    return null;
+  function getIcon(row) {
+    return TYPE_ICONS[getType(row)];
   }
 
   function getWebsite({ website_id }) {
     return websites.find(n => n.website_id === website_id)?.name;
   }
 
-  function getDescription({
+  function getDetail({
     event_type,
     event_value,
     view_id,
@@ -121,8 +119,14 @@ export default function RealtimeLog({ data, websites }) {
 
   return (
     <div className={styles.log}>
-      <Table className={styles.table} bodyClassName={styles.body} columns={columns} rows={logs}>
-        <FixedSizeList height={600} itemCount={logs.length} itemSize={46}>
+      <Table
+        className={styles.table}
+        bodyClassName={styles.body}
+        columns={columns}
+        rows={logs}
+        showHeader={false}
+      >
+        <FixedSizeList height={300} itemCount={logs.length} itemSize={46}>
           {Row}
         </FixedSizeList>
       </Table>

components/metrics/RealtimeLog.module.css

@@ -1,5 +1,5 @@
 .table {
-  font-size: var(--font-size-small);
+  font-size: var(--font-size-xsmall);
 }
 
 .row {
@@ -16,3 +16,19 @@
   align-self: center;
   margin-right: 20px;
 }
+
+.website {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.detail {
+  flex: 1;
+}
+
+.detail span {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}

components/pages/RealtimeDashboard.js

@@ -1,12 +1,12 @@
 import React, { useState, useEffect, useMemo } from 'react';
-import { FormattedMessage } from 'react-intl';
+import classNames from 'classnames';
 import { subMinutes, startOfMinute } 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 RealtimeChart from '../metrics/RealtimeChart';
 import RealtimeLog from '../metrics/RealtimeLog';
+import styles from './RealtimeDashboard.module.css';
+import RealtimeHeader from '../metrics/RealtimeHeader';
 
 const REALTIME_RANGE = 30;
 const REALTIME_INTERVAL = 5000;
@@ -24,28 +24,27 @@ function filterWebsite(data, id) {
 
 export default function RealtimeDashboard() {
   const [data, setData] = useState();
-  const [website, setWebsite] = useState();
+  const [websiteId, setWebsiteId] = useState(0);
   const { data: init, loading } = useFetch('/api/realtime', { params: { type: 'init' } });
   const { data: updates } = useFetch('/api/realtime', {
     params: { type: 'update', start_at: data?.timestamp },
-    disabled: !init?.token || !data,
+    disabled: !init?.websites?.length || !data,
     interval: REALTIME_INTERVAL,
     headers: { 'x-umami-token': init?.token },
   });
 
   const realtimeData = useMemo(() => {
-    if (website) {
-      const { website_id } = website;
+    if (websiteId) {
       const { pageviews, sessions, events, ...props } = data;
       return {
-        pageviews: filterWebsite(pageviews, website_id),
-        sessions: filterWebsite(sessions, website_id),
-        events: filterWebsite(events, website_id),
+        pageviews: filterWebsite(pageviews, websiteId),
+        sessions: filterWebsite(sessions, websiteId),
+        events: filterWebsite(events, websiteId),
         ...props,
       };
     }
     return data;
-  }, [data, website]);
+  }, [data, websiteId]);
 
   useEffect(() => {
     if (init && !data) {
@@ -68,33 +67,27 @@ export default function RealtimeDashboard() {
 
   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(websites.find(({ website_id }) => website_id === value));
-  }
-
   return (
     <Page>
-      <PageHeader>
-        <div>
-          <FormattedMessage id="label.realtime" defaultMessage="Realtime" />
-        </div>
-        <DropDown value={selectedValue} options={options} onChange={handleSelect} />
-      </PageHeader>
-      <RealtimeChart
-        websiteId={website?.website_id}
+      <RealtimeHeader
+        websites={websites}
+        websiteId={websiteId}
         data={realtimeData}
-        unit="minute"
-        records={REALTIME_RANGE}
+        onSelect={setWebsiteId}
       />
-      <div className="row">
-        <div className="col-12">
+      <div className={styles.chart}>
+        <RealtimeChart
+          websiteId={websiteId}
+          data={realtimeData}
+          unit="minute"
+          records={REALTIME_RANGE}
+        />
+      </div>
+      <div className={classNames(styles.tables, 'row')}>
+        <div className="col-12 col-lg-8">
           <RealtimeLog data={realtimeData} websites={websites} />
         </div>
+        <div className="col-12 col-lg-4">hi.</div>
       </div>
     </Page>
   );

components/pages/RealtimeDashboard.module.css

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