Realtime header component.

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;
+}