Initial commit

Created from https://vercel.com/new

components/metrics/ActiveUsers.js

@@ -0,0 +1,38 @@
+import React, { useMemo } from 'react';
+import { FormattedMessage } from 'react-intl';
+import classNames from 'classnames';
+import useFetch from 'hooks/useFetch';
+import Dot from 'components/common/Dot';
+import { TOKEN_HEADER } from 'lib/constants';
+import useShareToken from 'hooks/useShareToken';
+import styles from './ActiveUsers.module.css';
+
+export default function ActiveUsers({ websiteId, className }) {
+  const shareToken = useShareToken();
+  const { data } = useFetch(`/api/website/${websiteId}/active`, {
+    interval: 60000,
+    headers: { [TOKEN_HEADER]: shareToken?.token },
+  });
+  const count = useMemo(() => {
+    return data?.[0]?.x || 0;
+  }, [data]);
+
+  if (count === 0) {
+    return null;
+  }
+
+  return (
+    <div className={classNames(styles.container, className)}>
+      <Dot />
+      <div className={styles.text}>
+        <div>
+          <FormattedMessage
+            id="message.active-users"
+            defaultMessage="{x} current {x, plural, one {visitor} other {visitors}}"
+            values={{ x: count }}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

components/metrics/ActiveUsers.module.css

@@ -0,0 +1,14 @@
+.container {
+  display: flex;
+  align-items: center;
+}
+
+.text {
+  display: flex;
+  font-size: var(--font-size-normal);
+}
+
+.value {
+  font-weight: 600;
+  margin-right: 4px;
+}

components/metrics/BarChart.js

@@ -0,0 +1,226 @@
+import React, { useState, useRef, useEffect } from 'react';
+import classNames from 'classnames';
+import ChartJS from 'chart.js';
+import Legend from 'components/metrics/Legend';
+import { formatLongNumber } from 'lib/format';
+import { dateFormat } from 'lib/date';
+import useLocale from 'hooks/useLocale';
+import useTheme from 'hooks/useTheme';
+import { DEFAUL_CHART_HEIGHT, DEFAULT_ANIMATION_DURATION, THEME_COLORS } from 'lib/constants';
+import styles from './BarChart.module.css';
+import ChartTooltip from './ChartTooltip';
+import useForceUpdate from '../../hooks/useForceUpdate';
+
+export default function BarChart({
+  chartId,
+  datasets,
+  unit,
+  records,
+  height = DEFAUL_CHART_HEIGHT,
+  animationDuration = DEFAULT_ANIMATION_DURATION,
+  className,
+  stacked = false,
+  loading = false,
+  onCreate = () => {},
+  onUpdate = () => {},
+}) {
+  const canvas = useRef();
+  const chart = useRef();
+  const [tooltip, setTooltip] = useState(null);
+  const { locale } = useLocale();
+  const [theme] = useTheme();
+  const forceUpdate = useForceUpdate();
+
+  const colors = {
+    text: THEME_COLORS[theme].gray700,
+    line: THEME_COLORS[theme].gray200,
+    zeroLine: THEME_COLORS[theme].gray500,
+  };
+
+  function renderXLabel(label, index, values) {
+    if (loading) return '';
+    const d = new Date(values[index].value);
+    const sw = canvas.current.width / window.devicePixelRatio;
+
+    switch (unit) {
+      case 'minute':
+        return index % 2 === 0 ? dateFormat(d, 'H:mm', locale) : '';
+      case 'hour':
+        return dateFormat(d, 'p', locale);
+      case 'day':
+        if (records > 25) {
+          if (sw <= 275) {
+            return index % 10 === 0 ? dateFormat(d, 'M/d', locale) : '';
+          }
+          if (sw <= 550) {
+            return index % 5 === 0 ? dateFormat(d, 'M/d', locale) : '';
+          }
+          if (sw <= 700) {
+            return index % 2 === 0 ? dateFormat(d, 'M/d', locale) : '';
+          }
+          return dateFormat(d, 'MMM d', locale);
+        }
+        if (sw <= 375) {
+          return index % 2 === 0 ? dateFormat(d, 'MMM d', locale) : '';
+        }
+        if (sw <= 425) {
+          return dateFormat(d, 'MMM d', locale);
+        }
+        return dateFormat(d, 'EEE M/d', locale);
+      case 'month':
+        if (sw <= 330) {
+          return index % 2 === 0 ? dateFormat(d, 'MMM', locale) : '';
+        }
+        return dateFormat(d, 'MMM', locale);
+      default:
+        return label;
+    }
+  }
+
+  function renderYLabel(label) {
+    return +label > 1000 ? formatLongNumber(label) : label;
+  }
+
+  function renderTooltip(model) {
+    const { opacity, title, body, labelColors } = model;
+
+    if (!opacity || !title) {
+      setTooltip(null);
+      return;
+    }
+
+    const [label, value] = body[0].lines[0].split(':');
+
+    setTooltip({
+      title: dateFormat(new Date(+title[0]), getTooltipFormat(unit), locale),
+      value,
+      label,
+      labelColor: labelColors[0].backgroundColor,
+    });
+  }
+
+  function getTooltipFormat(unit) {
+    switch (unit) {
+      case 'hour':
+        return 'EEE p — PPP';
+      default:
+        return 'PPPP';
+    }
+  }
+
+  function createChart() {
+    const options = {
+      animation: {
+        duration: animationDuration,
+      },
+      tooltips: {
+        enabled: false,
+        custom: renderTooltip,
+      },
+      hover: {
+        animationDuration: 0,
+      },
+      responsive: true,
+      responsiveAnimationDuration: 0,
+      maintainAspectRatio: false,
+      legend: {
+        display: false,
+      },
+      scales: {
+        xAxes: [
+          {
+            type: 'time',
+            distribution: 'series',
+            time: {
+              unit,
+              tooltipFormat: 'x',
+            },
+            ticks: {
+              callback: renderXLabel,
+              minRotation: 0,
+              maxRotation: 0,
+              fontColor: colors.text,
+              autoSkipPadding: 1,
+            },
+            gridLines: {
+              display: false,
+            },
+            offset: true,
+            stacked: true,
+          },
+        ],
+        yAxes: [
+          {
+            ticks: {
+              callback: renderYLabel,
+              beginAtZero: true,
+              fontColor: colors.text,
+            },
+            gridLines: {
+              color: colors.line,
+              zeroLineColor: colors.zeroLine,
+            },
+            stacked,
+          },
+        ],
+      },
+    };
+
+    onCreate(options);
+
+    chart.current = new ChartJS(canvas.current, {
+      type: 'bar',
+      data: {
+        datasets,
+      },
+      options,
+    });
+  }
+
+  function updateChart() {
+    const { options } = chart.current;
+
+    options.legend.labels.fontColor = colors.text;
+    options.scales.xAxes[0].time.unit = unit;
+    options.scales.xAxes[0].ticks.callback = renderXLabel;
+    options.scales.xAxes[0].ticks.fontColor = colors.text;
+    options.scales.yAxes[0].ticks.fontColor = colors.text;
+    options.scales.yAxes[0].ticks.precision = 0;
+    options.scales.yAxes[0].gridLines.color = colors.line;
+    options.scales.yAxes[0].gridLines.zeroLineColor = colors.zeroLine;
+    options.animation.duration = animationDuration;
+    options.tooltips.custom = renderTooltip;
+
+    onUpdate(chart.current);
+
+    chart.current.update();
+
+    forceUpdate();
+  }
+
+  useEffect(() => {
+    if (datasets) {
+      if (!chart.current) {
+        createChart();
+      } else {
+        setTooltip(null);
+        updateChart();
+      }
+    }
+  }, [datasets, unit, animationDuration, locale, theme]);
+
+  return (
+    <>
+      <div
+        data-tip=""
+        data-for={`${chartId}-tooltip`}
+        className={classNames(styles.chart, className)}
+        style={{ height }}
+      >
+        <canvas ref={canvas} />
+      </div>
+      <Legend chart={chart.current} />
+      <ChartTooltip chartId={chartId} tooltip={tooltip} />
+    </>
+  );
+}

components/metrics/BarChart.module.css

@@ -0,0 +1,3 @@
+.chart {
+  position: relative;
+}

components/metrics/BrowsersTable.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import MetricsTable from './MetricsTable';
+import { browserFilter } from 'lib/filters';
+
+export default function BrowsersTable({ websiteId, ...props }) {
+  return (
+    <MetricsTable
+      {...props}
+      title={<FormattedMessage id="metrics.browsers" defaultMessage="Browsers" />}
+      type="browser"
+      metric={<FormattedMessage id="metrics.visitors" defaultMessage="Visitors" />}
+      websiteId={websiteId}
+      dataFilter={browserFilter}
+    />
+  );
+}

components/metrics/ChartTooltip.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import Dot from 'components/common/Dot';
+import styles from './ChartTooltip.module.css';
+import ReactTooltip from 'react-tooltip';
+
+export default function ChartTooltip({ chartId, tooltip }) {
+  if (!tooltip) {
+    return null;
+  }
+
+  const { title, value, label, labelColor } = tooltip;
+
+  return (
+    <ReactTooltip id={`${chartId}-tooltip`}>
+      <div className={styles.tooltip}>
+        <div className={styles.content}>
+          <div className={styles.title}>{title}</div>
+          <div className={styles.metric}>
+            <Dot color={labelColor} />
+            {value} {label}
+          </div>
+        </div>
+      </div>
+    </ReactTooltip>
+  );
+}

components/metrics/ChartTooltip.module.css

@@ -0,0 +1,43 @@
+.chart {
+  position: relative;
+}
+
+.tooltip {
+  color: var(--msgColor);
+  pointer-events: none;
+  z-index: 1;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+
+.title {
+  font-size: var(--font-size-xsmall);
+  font-weight: 600;
+}
+
+.metric {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: var(--font-size-small);
+  font-weight: 600;
+}
+
+.dot {
+  position: relative;
+  overflow: hidden;
+  border-radius: 100%;
+  margin-right: 8px;
+  background: var(--gray50);
+}
+
+.color {
+  width: 10px;
+  height: 10px;
+}

components/metrics/CountriesTable.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import MetricsTable from './MetricsTable';
+import { percentFilter } from 'lib/filters';
+import { FormattedMessage } from 'react-intl';
+import useCountryNames from 'hooks/useCountryNames';
+import useLocale from 'hooks/useLocale';
+
+export default function CountriesTable({ websiteId, onDataLoad, ...props }) {
+  const { locale } = useLocale();
+  const countryNames = useCountryNames(locale);
+
+  function renderLabel({ x }) {
+    return (
+      <div className={locale}>
+        {countryNames[x] ?? <FormattedMessage id="label.unknown" defaultMessage="Unknown" />}
+      </div>
+    );
+  }
+
+  return (
+    <MetricsTable
+      {...props}
+      title={<FormattedMessage id="metrics.countries" defaultMessage="Countries" />}
+      type="country"
+      metric={<FormattedMessage id="metrics.visitors" defaultMessage="Visitors" />}
+      websiteId={websiteId}
+      onDataLoad={data => onDataLoad?.(percentFilter(data))}
+      renderLabel={renderLabel}
+    />
+  );
+}

components/metrics/DataTable.js

@@ -0,0 +1,96 @@
+import React, { useState } from 'react';
+import { FixedSizeList } from 'react-window';
+import { useSpring, animated, config } from 'react-spring';
+import classNames from 'classnames';
+import { FormattedMessage } from 'react-intl';
+import NoData from 'components/common/NoData';
+import { formatNumber, formatLongNumber } from 'lib/format';
+import styles from './DataTable.module.css';
+
+export default function DataTable({
+  data,
+  title,
+  metric,
+  className,
+  renderLabel,
+  height,
+  animate = true,
+  virtualize = false,
+}) {
+  const [format, setFormat] = useState(true);
+  const formatFunc = format ? formatLongNumber : formatNumber;
+
+  const handleSetFormat = () => setFormat(state => !state);
+
+  const getRow = row => {
+    const { x: label, y: value, z: percent } = row;
+
+    return (
+      <AnimatedRow
+        key={label}
+        label={
+          renderLabel
+            ? renderLabel(row)
+            : label ?? <FormattedMessage id="label.unknown" defaultMessage="Unknown" />
+        }
+        value={value}
+        percent={percent}
+        animate={animate && !virtualize}
+        format={formatFunc}
+        onClick={handleSetFormat}
+      />
+    );
+  };
+
+  const Row = ({ index, style }) => {
+    return <div style={style}>{getRow(data[index])}</div>;
+  };
+
+  return (
+    <div className={classNames(styles.table, className)}>
+      <div className={styles.header}>
+        <div className={styles.title}>{title}</div>
+        <div className={styles.metric} onClick={handleSetFormat}>
+          {metric}
+        </div>
+      </div>
+      <div className={styles.body} style={{ height }}>
+        {data?.length === 0 && <NoData />}
+        {virtualize && data.length > 0 ? (
+          <FixedSizeList height={height} itemCount={data.length} itemSize={30}>
+            {Row}
+          </FixedSizeList>
+        ) : (
+          data.map(row => getRow(row))
+        )}
+      </div>
+    </div>
+  );
+}
+
+const AnimatedRow = ({ label, value = 0, percent, animate, format, onClick }) => {
+  const props = useSpring({
+    width: percent,
+    y: value,
+    from: { width: 0, y: 0 },
+    config: animate ? config.default : { duration: 0 },
+  });
+
+  return (
+    <div className={styles.row}>
+      <div className={styles.label}>{label}</div>
+      <div className={styles.value} onClick={onClick}>
+        <animated.div className={styles.value}>{props.y?.interpolate(format)}</animated.div>
+      </div>
+      <div className={styles.percent}>
+        <animated.div
+          className={styles.bar}
+          style={{ width: props.width.interpolate(n => `${n}%`) }}
+        />
+        <animated.span className={styles.percentValue}>
+          {props.width.interpolate(n => `${n.toFixed(0)}%`)}
+        </animated.span>
+      </div>
+    </div>
+  );
+};

components/metrics/DataTable.module.css

@@ -0,0 +1,97 @@
+.table {
+  position: relative;
+  height: 100%;
+  font-size: var(--font-size-small);
+  display: grid;
+  grid-template-rows: fit-content(100%) auto;
+  overflow: hidden;
+}
+
+.body {
+  position: relative;
+  height: 100%;
+  overflow: auto;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  line-height: 40px;
+}
+
+.title {
+  display: flex;
+  font-weight: 600;
+  font-size: var(--font-size-normal);
+}
+
+.metric {
+  font-size: var(--font-size-small);
+  font-weight: 600;
+  text-align: center;
+  width: 100px;
+  cursor: pointer;
+}
+
+.row {
+  position: relative;
+  height: 30px;
+  line-height: 30px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 5px;
+  overflow: hidden;
+}
+
+.label {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  flex: 2;
+}
+
+.label a {
+  color: inherit;
+  text-decoration: none;
+}
+
+.label a:hover {
+  color: var(--primary400);
+}
+
+.label:empty {
+  color: #b3b3b3;
+}
+
+.label:empty:before {
+  content: 'Unknown';
+}
+
+.value {
+  width: 50px;
+  text-align: right;
+  margin-right: 10px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.percent {
+  position: relative;
+  width: 50px;
+  color: var(--gray600);
+  border-left: 1px solid var(--gray600);
+  padding-left: 10px;
+  z-index: 1;
+}
+
+.bar {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 30px;
+  opacity: 0.1;
+  background: var(--primary400);
+  z-index: -1;
+}

components/metrics/DevicesTable.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import MetricsTable from './MetricsTable';
+import { FormattedMessage } from 'react-intl';
+import { getDeviceMessage } from 'components/messages';
+
+export default function DevicesTable({ websiteId, ...props }) {
+  return (
+    <MetricsTable
+      {...props}
+      title={<FormattedMessage id="metrics.devices" defaultMessage="Devices" />}
+      type="device"
+      metric={<FormattedMessage id="metrics.visitors" defaultMessage="Visitors" />}
+      websiteId={websiteId}
+      renderLabel={({ x }) => getDeviceMessage(x)}
+    />
+  );
+}

components/metrics/EventsChart.js

@@ -0,0 +1,89 @@
+import React, { useMemo } from 'react';
+import tinycolor from 'tinycolor2';
+import BarChart from './BarChart';
+import { getDateArray, getDateLength } from 'lib/date';
+import useFetch from 'hooks/useFetch';
+import useDateRange from 'hooks/useDateRange';
+import useTimezone from 'hooks/useTimezone';
+import usePageQuery from 'hooks/usePageQuery';
+import useShareToken from 'hooks/useShareToken';
+import { EVENT_COLORS, TOKEN_HEADER } from 'lib/constants';
+
+export default function EventsChart({ websiteId, className, token }) {
+  const [dateRange] = useDateRange(websiteId);
+  const { startDate, endDate, unit, modified } = dateRange;
+  const [timezone] = useTimezone();
+  const { query } = usePageQuery();
+  const shareToken = useShareToken();
+
+  const { data, loading } = useFetch(
+    `/api/website/${websiteId}/events`,
+    {
+      params: {
+        start_at: +startDate,
+        end_at: +endDate,
+        unit,
+        tz: timezone,
+        url: query.url,
+        token,
+      },
+      headers: { [TOKEN_HEADER]: shareToken?.token },
+    },
+    [modified],
+  );
+
+  const datasets = useMemo(() => {
+    if (!data) return [];
+    if (loading) return data;
+
+    const map = data.reduce((obj, { x, t, y }) => {
+      if (!obj[x]) {
+        obj[x] = [];
+      }
+
+      obj[x].push({ t, y });
+
+      return obj;
+    }, {});
+
+    Object.keys(map).forEach(key => {
+      map[key] = getDateArray(map[key], startDate, endDate, unit);
+    });
+
+    return Object.keys(map).map((key, index) => {
+      const color = tinycolor(EVENT_COLORS[index % EVENT_COLORS.length]);
+      return {
+        label: key,
+        data: map[key],
+        lineTension: 0,
+        backgroundColor: color.setAlpha(0.6).toRgbString(),
+        borderColor: color.setAlpha(0.7).toRgbString(),
+        borderWidth: 1,
+      };
+    });
+  }, [data, loading]);
+
+  function handleUpdate(chart) {
+    chart.data.datasets = datasets;
+
+    chart.update();
+  }
+
+  if (!data) {
+    return null;
+  }
+
+  return (
+    <BarChart
+      chartId={`events-${websiteId}`}
+      className={className}
+      datasets={datasets}
+      unit={unit}
+      height={300}
+      records={getDateLength(startDate, endDate, unit)}
+      onUpdate={handleUpdate}
+      loading={loading}
+      stacked
+    />
+  );
+}

components/metrics/EventsChart.module.css

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

components/metrics/EventsTable.js

@@ -0,0 +1,55 @@
+import React, { useState } from 'react';
+import { FormattedMessage } from 'react-intl';
+import MetricsTable from './MetricsTable';
+import Tag from 'components/common/Tag';
+import DropDown from 'components/common/DropDown';
+import { eventTypeFilter } from 'lib/filters';
+import styles from './EventsTable.module.css';
+
+const EVENT_FILTER_DEFAULT = {
+  value: 'EVENT_FILTER_DEFAULT',
+  label: <FormattedMessage id="label.all-events" defaultMessage="All events" />,
+};
+
+export default function EventsTable({ websiteId, ...props }) {
+  const [eventType, setEventType] = useState(EVENT_FILTER_DEFAULT.value);
+  const [eventTypes, setEventTypes] = useState([]);
+
+  const dropDownOptions = [EVENT_FILTER_DEFAULT, ...eventTypes.map(t => ({ value: t, label: t }))];
+
+  function handleDataLoad(data) {
+    setEventTypes([...new Set(data.map(({ x }) => x.split('\t')[0]))]);
+    props.onDataLoad?.(data);
+  }
+
+  return (
+    <>
+      {eventTypes?.length > 1 && (
+        <div className={styles.filter}>
+          <DropDown value={eventType} options={dropDownOptions} onChange={setEventType} />
+        </div>
+      )}
+      <MetricsTable
+        {...props}
+        title={<FormattedMessage id="metrics.events" defaultMessage="Events" />}
+        type="event"
+        metric={<FormattedMessage id="metrics.actions" defaultMessage="Actions" />}
+        websiteId={websiteId}
+        dataFilter={eventTypeFilter}
+        filterOptions={eventType === EVENT_FILTER_DEFAULT.value ? [] : [eventType]}
+        renderLabel={({ x }) => <Label value={x} />}
+        onDataLoad={handleDataLoad}
+      />
+    </>
+  );
+}
+
+const Label = ({ value }) => {
+  const [event, label] = value.split('\t');
+  return (
+    <>
+      <Tag>{event}</Tag>
+      {label}
+    </>
+  );
+};

components/metrics/EventsTable.module.css

@@ -0,0 +1,6 @@
+.filter {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  margin-bottom: 15px;
+}

components/metrics/FilterTags.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import classNames from 'classnames';
+import Button from 'components/common/Button';
+import Times from 'assets/times.svg';
+import styles from './FilterTags.module.css';
+
+export default function FilterTags({ params, onClick }) {
+  if (Object.keys(params).filter(key => params[key]).length === 0) {
+    return null;
+  }
+  return (
+    <div className={classNames(styles.filters, 'col-12')}>
+      {Object.keys(params).map(key => {
+        if (!params[key]) {
+          return null;
+        }
+        return (
+          <div key={key} className={styles.tag}>
+            <Button icon={<Times />} onClick={() => onClick(key)} variant="action" iconRight>
+              {`${key}: ${params[key]}`}
+            </Button>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

components/metrics/FilterTags.module.css

@@ -0,0 +1,14 @@
+.filters {
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+}
+
+.tag {
+  text-align: center;
+  margin-bottom: 10px;
+}
+
+.tag + .tag {
+  margin-left: 20px;
+}

components/metrics/Legend.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import classNames from 'classnames';
+import Dot from 'components/common/Dot';
+import useLocale from 'hooks/useLocale';
+import styles from './Legend.module.css';
+import useForceUpdate from '../../hooks/useForceUpdate';
+
+export default function Legend({ chart }) {
+  const { locale } = useLocale();
+  const forceUpdate = useForceUpdate();
+
+  function handleClick(index) {
+    const meta = chart.getDatasetMeta(index);
+
+    meta.hidden = meta.hidden === null ? !chart.data.datasets[index].hidden : null;
+
+    chart.update();
+
+    forceUpdate();
+  }
+
+  if (!chart?.legend?.legendItems.find(({ text }) => text)) {
+    return null;
+  }
+
+  return (
+    <div className={styles.legend}>
+      {chart.legend.legendItems.map(({ text, fillStyle, datasetIndex, hidden }) => (
+        <div
+          key={text}
+          className={classNames(styles.label, { [styles.hidden]: hidden })}
+          onClick={() => handleClick(datasetIndex)}
+        >
+          <Dot color={fillStyle} />
+          <span className={locale}>{text}</span>
+        </div>
+      ))}
+    </div>
+  );
+}

components/metrics/Legend.module.css

@@ -0,0 +1,21 @@
+.legend {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  margin-top: 10px;
+}
+
+.label {
+  display: flex;
+  align-items: center;
+  font-size: var(--font-size-xsmall);
+  cursor: pointer;
+}
+
+.label + .label {
+  margin-left: 20px;
+}
+
+.hidden {
+  color: var(--gray400);
+}

components/metrics/MetricCard.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import { useSpring, animated } from 'react-spring';
+import { formatNumber } from '../../lib/format';
+import styles from './MetricCard.module.css';
+
+const MetricCard = ({
+  value = 0,
+  change = 0,
+  label,
+  reverseColors = false,
+  format = formatNumber,
+}) => {
+  const props = useSpring({ x: Number(value) || 0, from: { x: 0 } });
+  const changeProps = useSpring({ x: Number(change) || 0, from: { x: 0 } });
+
+  return (
+    <div className={styles.card}>
+      <animated.div className={styles.value}>{props.x.interpolate(x => format(x))}</animated.div>
+      <div className={styles.label}>
+        {label}
+        {~~change === 0 && <span className={styles.change}>{format(0)}</span>}
+        {~~change !== 0 && (
+          <animated.span
+            className={`${styles.change} ${
+              change >= 0
+                ? !reverseColors
+                  ? styles.positive
+                  : styles.negative
+                : !reverseColors
+                ? styles.negative
+                : styles.positive
+            }`}
+          >
+            {changeProps.x.interpolate(x => `${change >= 0 ? '+' : ''}${format(x)}`)}
+          </animated.span>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default MetricCard;

components/metrics/MetricCard.module.css

@@ -0,0 +1,39 @@
+.card {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-width: 140px;
+}
+
+.value {
+  font-size: var(--font-size-xlarge);
+  line-height: 40px;
+  min-height: 40px;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.label {
+  font-size: var(--font-size-normal);
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.change {
+  font-size: 12px;
+  padding: 0 5px;
+  border-radius: 5px;
+  margin-left: 4px;
+  border: 1px solid var(--gray200);
+  color: var(--gray500);
+}
+
+.change.positive {
+  color: var(--green500);
+}
+
+.change.negative {
+  color: var(--red500);
+}

components/metrics/MetricsBar.js

@@ -0,0 +1,110 @@
+import React, { useState } from 'react';
+import { FormattedMessage } from 'react-intl';
+import classNames from 'classnames';
+import Loading from 'components/common/Loading';
+import ErrorMessage from 'components/common/ErrorMessage';
+import useFetch from 'hooks/useFetch';
+import useDateRange from 'hooks/useDateRange';
+import usePageQuery from 'hooks/usePageQuery';
+import useShareToken from 'hooks/useShareToken';
+import { formatShortTime, formatNumber, formatLongNumber } from 'lib/format';
+import { TOKEN_HEADER } from 'lib/constants';
+import MetricCard from './MetricCard';
+import styles from './MetricsBar.module.css';
+
+export default function MetricsBar({ websiteId, className }) {
+  const shareToken = useShareToken();
+  const [dateRange] = useDateRange(websiteId);
+  const { startDate, endDate, modified } = dateRange;
+  const [format, setFormat] = useState(true);
+  const {
+    query: { url, ref },
+  } = usePageQuery();
+
+  const { data, error, loading } = useFetch(
+    `/api/website/${websiteId}/stats`,
+    {
+      params: {
+        start_at: +startDate,
+        end_at: +endDate,
+        url,
+        ref,
+      },
+      headers: { [TOKEN_HEADER]: shareToken?.token },
+    },
+    [modified, url, ref],
+  );
+
+  const formatFunc = format
+    ? n => (n >= 0 ? formatLongNumber(n) : `-${formatLongNumber(Math.abs(n))}`)
+    : formatNumber;
+
+  function handleSetFormat() {
+    setFormat(state => !state);
+  }
+
+  const { pageviews, uniques, bounces, totaltime } = data || {};
+  const num = Math.min(data && uniques.value, data && bounces.value);
+  const diffs = data && {
+    pageviews: pageviews.value - pageviews.change,
+    uniques: uniques.value - uniques.change,
+    bounces: bounces.value - bounces.change,
+    totaltime: totaltime.value - totaltime.change,
+  };
+
+  return (
+    <div className={classNames(styles.bar, className)} onClick={handleSetFormat}>
+      {!data && loading && <Loading />}
+      {error && <ErrorMessage />}
+      {data && !error && (
+        <>
+          <MetricCard
+            label={<FormattedMessage id="metrics.views" defaultMessage="Views" />}
+            value={pageviews.value}
+            change={pageviews.change}
+            format={formatFunc}
+          />
+          <MetricCard
+            label={<FormattedMessage id="metrics.visitors" defaultMessage="Visitors" />}
+            value={uniques.value}
+            change={uniques.change}
+            format={formatFunc}
+          />
+          <MetricCard
+            label={<FormattedMessage id="metrics.bounce-rate" defaultMessage="Bounce rate" />}
+            value={uniques.value ? (num / uniques.value) * 100 : 0}
+            change={
+              uniques.value && uniques.change
+                ? (num / uniques.value) * 100 -
+                    (Math.min(diffs.uniques, diffs.bounces) / diffs.uniques) * 100 || 0
+                : 0
+            }
+            format={n => Number(n).toFixed(0) + '%'}
+            reverseColors
+          />
+          <MetricCard
+            label={
+              <FormattedMessage
+                id="metrics.average-visit-time"
+                defaultMessage="Average visit time"
+              />
+            }
+            value={
+              totaltime.value && pageviews.value
+                ? totaltime.value / (pageviews.value - bounces.value)
+                : 0
+            }
+            change={
+              totaltime.value && pageviews.value
+                ? (diffs.totaltime / (diffs.pageviews - diffs.bounces) -
+                    totaltime.value / (pageviews.value - bounces.value)) *
+                    -1 || 0
+                : 0
+            }
+            format={n => `${n < 0 ? '-' : ''}${formatShortTime(Math.abs(~~n), ['m', 's'], ' ')}`}
+          />
+        </>
+      )}
+    </div>
+  );
+}

components/metrics/MetricsBar.module.css

@@ -0,0 +1,16 @@
+.bar {
+  display: flex;
+  cursor: pointer;
+  min-height: 80px;
+}
+
+.bar > div + div {
+  padding-left: 20px;
+}
+
+@media only screen and (max-width: 992px) {
+  .bar {
+    justify-content: space-between;
+    overflow: auto;
+  }
+}

components/metrics/MetricsTable.js

@@ -0,0 +1,84 @@
+import React, { useMemo } from 'react';
+import { FormattedMessage } from 'react-intl';
+import firstBy from 'thenby';
+import classNames from 'classnames';
+import Link from 'components/common/Link';
+import Loading from 'components/common/Loading';
+import useFetch from 'hooks/useFetch';
+import Arrow from 'assets/arrow-right.svg';
+import { percentFilter } from 'lib/filters';
+import useDateRange from 'hooks/useDateRange';
+import usePageQuery from 'hooks/usePageQuery';
+import useShareToken from 'hooks/useShareToken';
+import ErrorMessage from 'components/common/ErrorMessage';
+import DataTable from './DataTable';
+import { DEFAULT_ANIMATION_DURATION, TOKEN_HEADER } from 'lib/constants';
+import styles from './MetricsTable.module.css';
+
+export default function MetricsTable({
+  websiteId,
+  type,
+  className,
+  dataFilter,
+  filterOptions,
+  limit,
+  onDataLoad,
+  ...props
+}) {
+  const shareToken = useShareToken();
+  const [dateRange] = useDateRange(websiteId);
+  const { startDate, endDate, modified } = dateRange;
+  const {
+    resolve,
+    router,
+    query: { url },
+  } = usePageQuery();
+
+  const { data, loading, error } = useFetch(
+    `/api/website/${websiteId}/metrics`,
+    {
+      params: {
+        type,
+        start_at: +startDate,
+        end_at: +endDate,
+        url,
+      },
+      onDataLoad,
+      delay: DEFAULT_ANIMATION_DURATION,
+      headers: { [TOKEN_HEADER]: shareToken?.token },
+    },
+    [modified],
+  );
+
+  const filteredData = useMemo(() => {
+    if (data) {
+      const items = percentFilter(dataFilter ? dataFilter(data, filterOptions) : data);
+      if (limit) {
+        return items.filter((e, i) => i < limit).sort(firstBy('y', -1).thenBy('x'));
+      }
+      return items.sort(firstBy('y', -1).thenBy('x'));
+    }
+    return [];
+  }, [data, error, dataFilter, filterOptions]);
+
+  return (
+    <div className={classNames(styles.container, className)}>
+      {!data && loading && <Loading />}
+      {error && <ErrorMessage />}
+      {data && !error && <DataTable {...props} data={filteredData} className={className} />}
+      <div className={styles.footer}>
+        {data && !error && limit && (
+          <Link
+            icon={<Arrow />}
+            href={router.pathname}
+            as={resolve({ view: type })}
+            size="small"
+            iconRight
+          >
+            <FormattedMessage id="label.more" defaultMessage="More" />
+          </Link>
+        )}
+      </div>
+    </div>
+  );
+}

components/metrics/MetricsTable.module.css

@@ -0,0 +1,19 @@
+.container {
+  position: relative;
+  min-height: 430px;
+  height: 100%;
+  font-size: var(--font-size-small);
+  display: flex;
+  flex-direction: column;
+}
+
+.footer {
+  display: flex;
+  justify-content: center;
+}
+
+@media only screen and (max-width: 992px) {
+  .container {
+    min-height: auto;
+  }
+}

components/metrics/OSTable.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import MetricsTable from './MetricsTable';
+import { FormattedMessage } from 'react-intl';
+
+export default function OSTable({ websiteId, ...props }) {
+  return (
+    <MetricsTable
+      {...props}
+      title={<FormattedMessage id="metrics.operating-systems" defaultMessage="Operating system" />}
+      type="os"
+      metric={<FormattedMessage id="metrics.visitors" defaultMessage="Visitors" />}
+      websiteId={websiteId}
+    />
+  );
+}

components/metrics/PagesTable.js

@@ -0,0 +1,60 @@
+import React, { useState } from 'react';
+import { FormattedMessage } from 'react-intl';
+import classNames from 'classnames';
+import Link from 'next/link';
+import FilterButtons from 'components/common/FilterButtons';
+import { urlFilter } from 'lib/filters';
+import { safeDecodeURI } from 'lib/url';
+import usePageQuery from 'hooks/usePageQuery';
+import MetricsTable from './MetricsTable';
+import styles from './PagesTable.module.css';
+
+export const FILTER_COMBINED = 0;
+export const FILTER_RAW = 1;
+
+export default function PagesTable({ websiteId, websiteDomain, showFilters, ...props }) {
+  const [filter, setFilter] = useState(FILTER_COMBINED);
+  const {
+    resolve,
+    query: { url: currentUrl },
+  } = usePageQuery();
+
+  const buttons = [
+    {
+      label: <FormattedMessage id="metrics.filter.combined" defaultMessage="Combined" />,
+      value: FILTER_COMBINED,
+    },
+    { label: <FormattedMessage id="metrics.filter.raw" defaultMessage="Raw" />, value: FILTER_RAW },
+  ];
+
+  const renderLink = ({ x: url }) => {
+    return (
+      <Link href={resolve({ url })} replace={true}>
+        <a
+          className={classNames({
+            [styles.inactive]: currentUrl && url !== currentUrl,
+            [styles.active]: url === currentUrl,
+          })}
+        >
+          {safeDecodeURI(url)}
+        </a>
+      </Link>
+    );
+  };
+
+  return (
+    <>
+      {showFilters && <FilterButtons buttons={buttons} selected={filter} onClick={setFilter} />}
+      <MetricsTable
+        title={<FormattedMessage id="metrics.pages" defaultMessage="Pages" />}
+        type="url"
+        metric={<FormattedMessage id="metrics.views" defaultMessage="Views" />}
+        websiteId={websiteId}
+        dataFilter={urlFilter}
+        filterOptions={{ domain: websiteDomain, raw: filter === FILTER_RAW }}
+        renderLabel={renderLink}
+        {...props}
+      />
+    </>
+  );
+}

components/metrics/PagesTable.module.css

@@ -0,0 +1,8 @@
+body .inactive {
+  color: var(--gray500);
+}
+
+body .active {
+  color: var(--gray900);
+  font-weight: 600;
+}

components/metrics/PageviewsChart.js

@@ -0,0 +1,94 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+import tinycolor from 'tinycolor2';
+import CheckVisible from 'components/helpers/CheckVisible';
+import BarChart from './BarChart';
+import useTheme from 'hooks/useTheme';
+import { THEME_COLORS, DEFAULT_ANIMATION_DURATION } from 'lib/constants';
+
+export default function PageviewsChart({
+  websiteId,
+  data,
+  unit,
+  records,
+  className,
+  loading,
+  animationDuration = DEFAULT_ANIMATION_DURATION,
+  ...props
+}) {
+  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.sessions;
+    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',
+    });
+  };
+
+  if (!data) {
+    return null;
+  }
+
+  return (
+    <CheckVisible>
+      {visible => (
+        <BarChart
+          {...props}
+          className={className}
+          chartId={websiteId}
+          datasets={[
+            {
+              label: intl.formatMessage({
+                id: 'metrics.unique-visitors',
+                defaultMessage: 'Unique visitors',
+              }),
+              data: data.sessions,
+              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}
+          animationDuration={visible ? animationDuration : 0}
+          onUpdate={handleUpdate}
+          loading={loading}
+        />
+      )}
+    </CheckVisible>
+  );
+}

components/metrics/RealtimeChart.js

@@ -0,0 +1,60 @@
+import React, { useMemo, useRef } from 'react';
+import { format, parseISO, startOfMinute, subMinutes, isBefore } from 'date-fns';
+import PageviewsChart from './PageviewsChart';
+import { getDateArray } from 'lib/date';
+import { DEFAULT_ANIMATION_DURATION, REALTIME_RANGE } from 'lib/constants';
+
+function mapData(data) {
+  let last = 0;
+  const arr = [];
+
+  data.reduce((obj, val) => {
+    const { created_at } = val;
+    const t = startOfMinute(parseISO(created_at));
+    if (t.getTime() > last) {
+      obj = { t: format(t, 'yyyy-LL-dd HH:mm:00'), y: 1 };
+      arr.push(obj);
+      last = t;
+    } else {
+      obj.y += 1;
+    }
+    return obj;
+  }, {});
+
+  return arr;
+}
+
+export default function RealtimeChart({ data, unit, ...props }) {
+  const endDate = startOfMinute(new Date());
+  const startDate = subMinutes(endDate, REALTIME_RANGE);
+  const prevEndDate = useRef(endDate);
+
+  const chartData = useMemo(() => {
+    if (data) {
+      return {
+        pageviews: getDateArray(mapData(data.pageviews), startDate, endDate, unit),
+        sessions: getDateArray(mapData(data.sessions), startDate, endDate, unit),
+      };
+    }
+    return { pageviews: [], sessions: [] };
+  }, [data]);
+
+  // Don't animate the bars shifting over because it looks weird
+  const animationDuration = useMemo(() => {
+    if (isBefore(prevEndDate.current, endDate)) {
+      prevEndDate.current = endDate;
+      return 0;
+    }
+    return DEFAULT_ANIMATION_DURATION;
+  }, [data]);
+
+  return (
+    <PageviewsChart
+      {...props}
+      height={200}
+      unit={unit}
+      data={chartData}
+      animationDuration={animationDuration}
+    />
+  );
+}

components/metrics/RealtimeHeader.js

@@ -0,0 +1,49 @@
+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 }, index) => ({
+      label: name,
+      value: website_id,
+      divider: index === 0,
+    })),
+  );
+
+  const { pageviews, sessions, events, countries } = data;
+
+  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={countries.length}
+        />
+      </div>
+    </>
+  );
+}

components/metrics/RealtimeHeader.module.css

@@ -0,0 +1,4 @@
+.metrics {
+  display: flex;
+  margin-bottom: 10px;
+}

components/metrics/RealtimeLog.js

@@ -0,0 +1,192 @@
+import React, { useMemo, useState } from 'react';
+import { FormattedMessage, useIntl } from 'react-intl';
+import { FixedSizeList } from 'react-window';
+import firstBy from 'thenby';
+import Icon from 'components/common/Icon';
+import Tag from 'components/common/Tag';
+import Dot from 'components/common/Dot';
+import FilterButtons from 'components/common/FilterButtons';
+import NoData from 'components/common/NoData';
+import { devices } from 'components/messages';
+import useLocale from 'hooks/useLocale';
+import useCountryNames from 'hooks/useCountryNames';
+import { BROWSERS } from 'lib/constants';
+import Bolt from 'assets/bolt.svg';
+import Visitor from 'assets/visitor.svg';
+import Eye from 'assets/eye.svg';
+import { stringToColor } from 'lib/format';
+import { dateFormat } from 'lib/date';
+import styles from './RealtimeLog.module.css';
+
+const TYPE_ALL = 0;
+const TYPE_PAGEVIEW = 1;
+const TYPE_SESSION = 2;
+const TYPE_EVENT = 3;
+
+const TYPE_ICONS = {
+  [TYPE_PAGEVIEW]: <Eye />,
+  [TYPE_SESSION]: <Visitor />,
+  [TYPE_EVENT]: <Bolt />,
+};
+
+export default function RealtimeLog({ data, websites, websiteId }) {
+  const intl = useIntl();
+  const { locale } = useLocale();
+  const countryNames = useCountryNames(locale);
+  const [filter, setFilter] = useState(TYPE_ALL);
+
+  const logs = useMemo(() => {
+    const { pageviews, sessions, events } = data;
+    const logs = [...pageviews, ...sessions, ...events].sort(firstBy('created_at', -1));
+    if (filter) {
+      return logs.filter(row => getType(row) === filter);
+    }
+    return logs;
+  }, [data, filter]);
+
+  const uuids = useMemo(() => {
+    return data.sessions.reduce((obj, { session_id, session_uuid }) => {
+      obj[session_id] = session_uuid;
+      return obj;
+    }, {});
+  }, [data]);
+
+  const buttons = [
+    {
+      label: <FormattedMessage id="label.all" defaultMessage="All" />,
+      value: TYPE_ALL,
+    },
+    {
+      label: <FormattedMessage id="metrics.views" defaultMessage="Views" />,
+      value: TYPE_PAGEVIEW,
+    },
+    {
+      label: <FormattedMessage id="metrics.visitors" defaultMessage="Visitors" />,
+      value: TYPE_SESSION,
+    },
+    {
+      label: <FormattedMessage id="metrics.events" defaultMessage="Events" />,
+      value: TYPE_EVENT,
+    },
+  ];
+
+  function getType({ view_id, session_id, event_id }) {
+    if (event_id) {
+      return TYPE_EVENT;
+    }
+    if (view_id) {
+      return TYPE_PAGEVIEW;
+    }
+    if (session_id) {
+      return TYPE_SESSION;
+    }
+    return null;
+  }
+
+  function getIcon(row) {
+    return TYPE_ICONS[getType(row)];
+  }
+
+  function getWebsite({ website_id }) {
+    return websites.find(n => n.website_id === website_id);
+  }
+
+  function getDetail({
+    event_type,
+    event_value,
+    view_id,
+    session_id,
+    url,
+    browser,
+    os,
+    country,
+    device,
+    website_id,
+  }) {
+    if (event_type) {
+      return (
+        <div>
+          <Tag>{event_type}</Tag> {event_value}
+        </div>
+      );
+    }
+    if (view_id) {
+      const domain = getWebsite({ website_id })?.domain;
+      return (
+        <a
+          className={styles.link}
+          href={`//${domain}${url}`}
+          target="_blank"
+          rel="noreferrer noopener"
+        >
+          {url}
+        </a>
+      );
+    }
+    if (session_id) {
+      return (
+        <FormattedMessage
+          id="message.log.visitor"
+          defaultMessage="Visitor from {country} using {browser} on {os} {device}"
+          values={{
+            country: (
+              <b>
+                {countryNames[country] ||
+                  intl.formatMessage({ id: 'label.unknown', defaultMessage: 'Unknown' })}
+              </b>
+            ),
+            browser: <b>{BROWSERS[browser]}</b>,
+            os: <b>{os}</b>,
+            device: <b>{intl.formatMessage(devices[device])?.toLowerCase()}</b>,
+          }}
+        />
+      );
+    }
+  }
+
+  function getTime({ created_at }) {
+    return dateFormat(new Date(created_at), 'pp', locale);
+  }
+
+  function getColor(row) {
+    const { session_id } = row;
+
+    return stringToColor(uuids[session_id] || `${session_id}${getWebsite(row)}`);
+  }
+
+  const Row = ({ index, style }) => {
+    const row = logs[index];
+    return (
+      <div className={styles.row} style={style}>
+        <div>
+          <Dot color={getColor(row)} />
+        </div>
+        <div className={styles.time}>{getTime(row)}</div>
+        <div className={styles.detail}>
+          <Icon className={styles.icon} icon={getIcon(row)} />
+          {getDetail(row)}
+        </div>
+        {!websiteId && websites.length > 1 && (
+          <div className={styles.website}>{getWebsite(row)?.domain}</div>
+        )}
+      </div>
+    );
+  };
+
+  return (
+    <div className={styles.table}>
+      <FilterButtons buttons={buttons} selected={filter} onClick={setFilter} />
+      <div className={styles.header}>
+        <FormattedMessage id="label.realtime-logs" defaultMessage="Realtime logs" />
+      </div>
+      <div className={styles.body}>
+        {logs?.length === 0 && <NoData />}
+        {logs?.length > 0 && (
+          <FixedSizeList height={400} itemCount={logs.length} itemSize={40}>
+            {Row}
+          </FixedSizeList>
+        )}
+      </div>
+    </div>
+  );
+}

components/metrics/RealtimeLog.module.css

@@ -0,0 +1,59 @@
+.table {
+  font-size: var(--font-size-xsmall);
+  overflow: hidden;
+  height: 100%;
+  display: grid;
+  grid-template-rows: fit-content(100%) fit-content(100%) auto;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 16px;
+  line-height: 40px;
+  font-weight: 600;
+}
+
+.row {
+  display: flex;
+  align-items: center;
+  height: 40px;
+  border-bottom: 1px solid var(--gray300);
+}
+
+.body {
+  overflow: auto;
+  height: 100%;
+}
+
+.icon {
+  margin-right: 10px;
+}
+
+.time {
+  min-width: 60px;
+  overflow: hidden;
+}
+
+.website {
+  text-align: right;
+  padding: 0 20px;
+}
+
+.detail {
+  display: flex;
+  flex: 1;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.row .link {
+  color: var(--gray900);
+  text-decoration: none;
+}
+
+.row .link:hover {
+  color: var(--primary400);
+}

components/metrics/RealtimeViews.js

@@ -0,0 +1,113 @@
+import React, { useMemo, useState, useCallback } from 'react';
+import { FormattedMessage } from 'react-intl';
+import firstBy from 'thenby';
+import { percentFilter } from 'lib/filters';
+import DataTable from './DataTable';
+import FilterButtons from 'components/common/FilterButtons';
+
+const FILTER_REFERRERS = 0;
+const FILTER_PAGES = 1;
+
+export default function RealtimeViews({ websiteId, data, websites }) {
+  const { pageviews } = data;
+  const [filter, setFilter] = useState(FILTER_REFERRERS);
+  const domains = useMemo(() => websites.map(({ domain }) => domain), [websites]);
+  const getDomain = useCallback(
+    id =>
+      websites.length === 1
+        ? websites[0]?.domain
+        : websites.find(({ website_id }) => website_id === id)?.domain,
+    [websites],
+  );
+
+  const buttons = [
+    {
+      label: <FormattedMessage id="metrics.referrers" defaultMessage="Referrers" />,
+      value: FILTER_REFERRERS,
+    },
+    {
+      label: <FormattedMessage id="metrics.pages" defaultMessage="Pages" />,
+      value: FILTER_PAGES,
+    },
+  ];
+
+  const renderLink = ({ x }) => {
+    const domain = x.startsWith('/') ? getDomain(websiteId) : '';
+    return (
+      <a href={`//${domain}${x}`} target="_blank" rel="noreferrer noopener">
+        {x}
+      </a>
+    );
+  };
+
+  const [referrers, pages] = useMemo(() => {
+    if (pageviews) {
+      const referrers = percentFilter(
+        pageviews
+          .reduce((arr, { referrer }) => {
+            if (referrer?.startsWith('http')) {
+              const hostname = new URL(referrer).hostname.replace(/^www\./, '');
+
+              if (hostname && !domains.includes(hostname)) {
+                const row = arr.find(({ x }) => x === hostname);
+
+                if (!row) {
+                  arr.push({ x: hostname, y: 1 });
+                } else {
+                  row.y += 1;
+                }
+              }
+            }
+            return arr;
+          }, [])
+          .sort(firstBy('y', -1)),
+      );
+
+      const pages = percentFilter(
+        pageviews
+          .reduce((arr, { url, website_id }) => {
+            if (url?.startsWith('/')) {
+              if (!websiteId && websites.length > 1) {
+                url = `${getDomain(website_id)}${url}`;
+              }
+              const row = arr.find(({ x }) => x === url);
+
+              if (!row) {
+                arr.push({ x: url, y: 1 });
+              } else {
+                row.y += 1;
+              }
+            }
+            return arr;
+          }, [])
+          .sort(firstBy('y', -1)),
+      );
+
+      return [referrers, pages];
+    }
+    return [];
+  }, [pageviews]);
+
+  return (
+    <>
+      <FilterButtons buttons={buttons} selected={filter} onClick={setFilter} />
+      {filter === FILTER_REFERRERS && (
+        <DataTable
+          title={<FormattedMessage id="metrics.referrers" defaultMessage="Referrers" />}
+          metric={<FormattedMessage id="metrics.views" defaultMessage="Views" />}
+          data={referrers}
+          height={400}
+        />
+      )}
+      {filter === FILTER_PAGES && (
+        <DataTable
+          title={<FormattedMessage id="metrics.pages" defaultMessage="Pages" />}
+          metric={<FormattedMessage id="metrics.views" defaultMessage="Views" />}
+          renderLabel={renderLink}
+          data={pages}
+          height={400}
+        />
+      )}
+    </>
+  );
+}

components/metrics/ReferrersTable.js

@@ -0,0 +1,77 @@
+import React, { useState } from 'react';
+import { FormattedMessage } from 'react-intl';
+import MetricsTable from './MetricsTable';
+import FilterButtons from 'components/common/FilterButtons';
+import { refFilter } from 'lib/filters';
+import { safeDecodeURI } from 'lib/url';
+import Link from 'next/link';
+import classNames from 'classnames';
+import usePageQuery from 'hooks/usePageQuery';
+import External from 'assets/arrow-up-right-from-square.svg';
+import Icon from '../common/Icon';
+import styles from './ReferrersTable.module.css';
+
+export const FILTER_DOMAIN_ONLY = 0;
+export const FILTER_COMBINED = 1;
+export const FILTER_RAW = 2;
+
+export default function ReferrersTable({ websiteId, websiteDomain, showFilters, ...props }) {
+  const [filter, setFilter] = useState(FILTER_COMBINED);
+  const {
+    resolve,
+    query: { ref: currentRef },
+  } = usePageQuery();
+
+  const buttons = [
+    {
+      label: <FormattedMessage id="metrics.filter.domain-only" defaultMessage="Domain only" />,
+      value: FILTER_DOMAIN_ONLY,
+    },
+    {
+      label: <FormattedMessage id="metrics.filter.combined" defaultMessage="Combined" />,
+      value: FILTER_COMBINED,
+    },
+    { label: <FormattedMessage id="metrics.filter.raw" defaultMessage="Raw" />, value: FILTER_RAW },
+  ];
+
+  const renderLink = ({ w: link, x: label }) => {
+    console.log({ link, label });
+    return (
+      <div className={styles.row}>
+        <Link href={resolve({ ref: label })} replace={true}>
+          <a
+            className={classNames(styles.label, {
+              [styles.inactive]: currentRef && label !== currentRef,
+              [styles.active]: label === currentRef,
+            })}
+          >
+            {safeDecodeURI(label)}
+          </a>
+        </Link>
+        <a href={link || label} target="_blank" rel="noreferrer noopener" className={styles.link}>
+          <Icon icon={<External />} className={styles.icon} />
+        </a>
+      </div>
+    );
+  };
+
+  return (
+    <>
+      {showFilters && <FilterButtons buttons={buttons} selected={filter} onClick={setFilter} />}
+      <MetricsTable
+        {...props}
+        title={<FormattedMessage id="metrics.referrers" defaultMessage="Referrers" />}
+        type="referrer"
+        metric={<FormattedMessage id="metrics.views" defaultMessage="Views" />}
+        websiteId={websiteId}
+        dataFilter={refFilter}
+        filterOptions={{
+          domain: websiteDomain,
+          domainOnly: filter === FILTER_DOMAIN_ONLY,
+          raw: filter === FILTER_RAW,
+        }}
+        renderLabel={renderLink}
+      />
+    </>
+  );
+}

components/metrics/ReferrersTable.module.css

@@ -0,0 +1,31 @@
+body .inactive {
+  color: var(--gray500);
+}
+
+body .active {
+  color: var(--gray900);
+  font-weight: 600;
+}
+
+.row {
+  display: flex;
+  justify-content: space-between;
+}
+
+.row .link {
+  display: none;
+}
+
+.row .label {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.row:hover .link {
+  display: block;
+}
+
+.icon {
+  cursor: pointer;
+}

components/metrics/WebsiteChart.js

@@ -0,0 +1,108 @@
+import React, { useMemo } from 'react';
+import classNames from 'classnames';
+import PageviewsChart from './PageviewsChart';
+import MetricsBar from './MetricsBar';
+import WebsiteHeader from './WebsiteHeader';
+import DateFilter from 'components/common/DateFilter';
+import StickyHeader from 'components/helpers/StickyHeader';
+import useFetch from 'hooks/useFetch';
+import useDateRange from 'hooks/useDateRange';
+import useTimezone from 'hooks/useTimezone';
+import usePageQuery from 'hooks/usePageQuery';
+import { getDateArray, getDateLength } from 'lib/date';
+import ErrorMessage from 'components/common/ErrorMessage';
+import FilterTags from 'components/metrics/FilterTags';
+import useShareToken from 'hooks/useShareToken';
+import { TOKEN_HEADER } from 'lib/constants';
+import styles from './WebsiteChart.module.css';
+
+export default function WebsiteChart({
+  websiteId,
+  title,
+  domain,
+  stickyHeader = false,
+  showLink = false,
+  hideChart = false,
+  onDataLoad = () => {},
+}) {
+  const shareToken = useShareToken();
+  const [dateRange, setDateRange] = useDateRange(websiteId);
+  const { startDate, endDate, unit, value, modified } = dateRange;
+  const [timezone] = useTimezone();
+  const {
+    router,
+    resolve,
+    query: { url, ref },
+  } = usePageQuery();
+
+  const { data, loading, error } = useFetch(
+    `/api/website/${websiteId}/pageviews`,
+    {
+      params: {
+        start_at: +startDate,
+        end_at: +endDate,
+        unit,
+        tz: timezone,
+        url,
+        ref,
+      },
+      onDataLoad,
+      headers: { [TOKEN_HEADER]: shareToken?.token },
+    },
+    [modified, url, ref],
+  );
+
+  const chartData = useMemo(() => {
+    if (data) {
+      return {
+        pageviews: getDateArray(data.pageviews, startDate, endDate, unit),
+        sessions: getDateArray(data.sessions, startDate, endDate, unit),
+      };
+    }
+    return { pageviews: [], sessions: [] };
+  }, [data]);
+
+  function handleCloseFilter(param) {
+    router.push(resolve({ [param]: undefined }));
+  }
+
+  return (
+    <div className={styles.container}>
+      <WebsiteHeader websiteId={websiteId} title={title} domain={domain} showLink={showLink} />
+      <div className={classNames(styles.header, 'row')}>
+        <StickyHeader
+          className={classNames(styles.metrics, 'col row')}
+          stickyClassName={styles.sticky}
+          enabled={stickyHeader}
+        >
+          <FilterTags params={{ url, ref }} onClick={handleCloseFilter} />
+          <div className="col-12 col-lg-9">
+            <MetricsBar websiteId={websiteId} />
+          </div>
+          <div className={classNames(styles.filter, 'col-12 col-lg-3')}>
+            <DateFilter
+              value={value}
+              startDate={startDate}
+              endDate={endDate}
+              onChange={setDateRange}
+            />
+          </div>
+        </StickyHeader>
+      </div>
+      <div className="row">
+        <div className={classNames(styles.chart, 'col')}>
+          {error && <ErrorMessage />}
+          {!hideChart && (
+            <PageviewsChart
+              websiteId={websiteId}
+              data={chartData}
+              unit={unit}
+              records={getDateLength(startDate, endDate, unit)}
+              loading={loading}
+            />
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

components/metrics/WebsiteChart.module.css

@@ -0,0 +1,49 @@
+.container {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-self: stretch;
+}
+
+.chart {
+  position: relative;
+}
+
+.title {
+  font-size: var(--font-size-large);
+  line-height: 60px;
+  font-weight: 600;
+}
+
+.header {
+  min-height: 90px;
+}
+
+.metrics {
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 0;
+}
+
+.sticky {
+  position: fixed;
+  top: 0;
+  margin: auto;
+  background: var(--gray50);
+  border-bottom: 1px solid var(--gray300);
+  z-index: 3;
+}
+
+.filter {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+@media only screen and (max-width: 992px) {
+  .filter {
+    display: block;
+  }
+}

components/metrics/WebsiteHeader.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import Link from 'components/common/Link';
+import PageHeader from 'components/layout/PageHeader';
+import RefreshButton from 'components/common/RefreshButton';
+import ButtonLayout from 'components/layout/ButtonLayout';
+import Favicon from 'components/common/Favicon';
+import ActiveUsers from './ActiveUsers';
+import Arrow from 'assets/arrow-right.svg';
+import styles from './WebsiteHeader.module.css';
+
+export default function WebsiteHeader({ websiteId, title, domain, showLink = false }) {
+  const header = showLink ? (
+    <>
+      <Favicon domain={domain} />
+      <Link href="/website/[...id]" as={`/website/${websiteId}/${title}`}>
+        {title}
+      </Link>
+    </>
+  ) : (
+    <div>
+      <Favicon domain={domain} />
+      {title}
+    </div>
+  );
+
+  return (
+    <PageHeader>
+      <div className={styles.title}>{header}</div>
+      <ActiveUsers className={styles.active} websiteId={websiteId} />
+      <ButtonLayout align="right">
+        <RefreshButton websiteId={websiteId} />
+        {showLink && (
+          <Link
+            href="/website/[...id]"
+            as={`/website/${websiteId}/${title}`}
+            className={styles.link}
+            icon={<Arrow />}
+            size="small"
+            iconRight
+          >
+            <FormattedMessage id="label.view-details" defaultMessage="View details" />
+          </Link>
+        )}
+      </ButtonLayout>
+    </PageHeader>
+  );
+}

components/metrics/WebsiteHeader.module.css

@@ -0,0 +1,15 @@
+.title {
+  color: var(--gray900);
+  font-size: var(--font-size-large);
+  line-height: var(--font-size-large);
+}
+
+.link {
+  font-weight: 600;
+}
+
+@media only screen and (max-width: 576px) {
+  .active {
+    display: none;
+  }
+}