Updated metrics components for compare mode.

2026-02-08 14:47:14 +01:00 · 2024-05-23 00:17:20 -07:00 · 2024-05-23 00:17:20 -07:00 · df66acaacf
commit df66acaacf
parent 6b03935fca
117 changed files with 602 additions and 513 deletions
--- a/src/app/(main)/websites/[websiteId]/WebsiteMetricsBar.module.css
+++ b/src/app/(main)/websites/[websiteId]/WebsiteMetricsBar.module.css
@ -1,6 +1,6 @@
 .container {
  display: grid;
-  grid-template-columns: 1fr max-content;
+  grid-template-columns: 2fr 1fr;
  justify-content: space-between;
  align-items: center;
  background: var(--base50);
@ -15,6 +15,19 @@
  flex-direction: row;
  justify-content: flex-end;
  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.vs {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  flex-basis: 100%;
+  gap: 10px;
+}
+
+.dropdown {
+  min-width: 200px;
 }

@media screen and (max-width: 1200px) {
--- a/src/app/(main)/websites/[websiteId]/WebsiteMetricsBar.tsx
+++ b/src/app/(main)/websites/[websiteId]/WebsiteMetricsBar.tsx
@ -1,3 +1,4 @@
+import { useState } from 'react';
 import classNames from 'classnames';
 import { useMessages, useSticky } from 'components/hooks';
 import WebsiteDateFilter from 'components/input/WebsiteDateFilter';
@ -7,21 +8,65 @@ import { formatShortTime } from 'lib/format';
 import WebsiteFilterButton from './WebsiteFilterButton';
 import useWebsiteStats from 'components/hooks/queries/useWebsiteStats';
 import styles from './WebsiteMetricsBar.module.css';
+import { Dropdown, Item } from 'react-basics';

-export function WebsiteMetricsBar({ websiteId, sticky }: { websiteId: string; sticky?: boolean }) {
+export function WebsiteMetricsBar({
+  websiteId,
+  sticky,
+  compareMode = false,
+}: {
+  websiteId: string;
+  sticky?: boolean;
+  compareMode?: boolean;
+}) {
  const { formatMessage, labels } = useMessages();
+  const [compare, setCompare] = useState('prev');
  const { ref, isSticky } = useSticky({ enabled: sticky });
-  const { data, isLoading, isFetched, error } = useWebsiteStats(websiteId);
+  const { data, isLoading, isFetched, error } = useWebsiteStats(websiteId, compare);

  const { pageviews, visitors, visits, bounces, totaltime } = data || {};
-  const num = Math.min(data && visitors.value, data && bounces.value);
-  const diffs = data && {
-    pageviews: pageviews.value - pageviews.change,
-    visitors: visitors.value - visitors.change,
-    visits: visits.value - visits.change,
-    bounces: bounces.value - bounces.change,
-    totaltime: totaltime.value - totaltime.change,
-  };
+
+  const metrics = data
+    ? [
+        {
+          ...pageviews,
+          label: formatMessage(labels.views),
+          change: pageviews.value - pageviews.prev,
+        },
+        {
+          ...visits,
+          label: formatMessage(labels.visits),
+          change: visits.value - visits.prev,
+        },
+        {
+          ...visitors,
+          label: formatMessage(labels.visitors),
+          change: visitors.value - visitors.prev,
+        },
+        {
+          label: formatMessage(labels.bounceRate),
+          value: (Math.min(visitors.value, bounces.value) / visitors.value) * 100,
+          prev: (Math.min(visitors.prev, bounces.prev) / visitors.prev) * 100,
+          change:
+            (Math.min(visitors.value, bounces.value) / visitors.value) * 100 -
+            (Math.min(visitors.prev, bounces.prev) / visitors.prev) * 100,
+          format: n => Number(n).toFixed(0) + '%',
+          reverseColors: true,
+        },
+        {
+          label: formatMessage(labels.visitDuration),
+          value: totaltime.value / visits.value,
+          prev: totaltime.prev / visits.prev,
+          change: totaltime.value / visits.value - totaltime.prev / visits.prev,
+          format: n => `${+n < 0 ? '-' : ''}${formatShortTime(Math.abs(~~n), ['m', 's'], ' ')}`,
+        },
+      ]
+    : [];
+
+  const items = [
+    { label: formatMessage(labels.previousPeriod), value: 'prev' },
+    { label: formatMessage(labels.yearOverYear), value: 'yoy' },
+  ];

  return (
    <div
@ -31,58 +76,44 @@ export function WebsiteMetricsBar({ websiteId, sticky }: { websiteId: string; st
        [styles.isSticky]: isSticky,
      })}
    >
-      <MetricsBar isLoading={isLoading} isFetched={isFetched} error={error}>
-        {pageviews && visitors && (
-          <>
-            <MetricCard
-              label={formatMessage(labels.views)}
-              value={pageviews.value}
-              change={pageviews.change}
-            />
-            <MetricCard
-              label={formatMessage(labels.visits)}
-              value={visits.value}
-              change={visits.change}
-            />
-            <MetricCard
-              label={formatMessage(labels.visitors)}
-              value={visitors.value}
-              change={visitors.change}
-            />
-            <MetricCard
-              label={formatMessage(labels.bounceRate)}
-              value={visitors.value ? (num / visitors.value) * 100 : 0}
-              change={
-                visitors.value && visitors.change
-                  ? (num / visitors.value) * 100 -
-                      (Math.min(diffs.visitors, diffs.bounces) / diffs.visitors) * 100 || 0
-                  : 0
-              }
-              format={n => Number(n).toFixed(0) + '%'}
-              reverseColors
-            />
-            <MetricCard
-              label={formatMessage(labels.averageVisitTime)}
-              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'], ' ')}`}
-            />
-          </>
-        )}
-      </MetricsBar>
+      <div>
+        <MetricsBar isLoading={isLoading} isFetched={isFetched} error={error}>
+          {metrics.map(({ label, value, prev, change, format, reverseColors }) => {
+            return (
+              <MetricCard
+                key={label}
+                value={value}
+                previousValue={prev}
+                label={label}
+                change={change}
+                format={format}
+                reverseColors={reverseColors}
+                showPrevious={compareMode}
+              />
+            );
+          })}
+        </MetricsBar>
+      </div>
      <div className={styles.actions}>
        <WebsiteFilterButton websiteId={websiteId} />
        <WebsiteDateFilter websiteId={websiteId} />
+        {compareMode && (
+          <div className={styles.vs}>
+            <b>VS</b>
+            <Dropdown
+              className={styles.dropdown}
+              items={items}
+              value={compare}
+              renderValue={value => items.find(i => i.value === value)?.label}
+              alignment="end"
+              onChange={(e: any) => setCompare(e)}
+            >
+              {items.map(({ label, value }) => (
+                <Item key={value}>{label}</Item>
+              ))}
+            </Dropdown>
+          </div>
+        )}
      </div>
    </div>
  );
--- a/src/app/(main)/websites/[websiteId]/compare/WebsiteComparePage.tsx
+++ b/src/app/(main)/websites/[websiteId]/compare/WebsiteComparePage.tsx
@ -1,11 +1,25 @@
+'use client';
 import WebsiteHeader from '../WebsiteHeader';
 import WebsiteMetricsBar from '../WebsiteMetricsBar';
+import FilterTags from 'components/metrics/FilterTags';
+import { useNavigation } from 'components/hooks';
+import { FILTER_COLUMNS } from 'lib/constants';

 export function WebsiteComparePage({ websiteId }) {
+  const { query } = useNavigation();
+
+  const params = Object.keys(query).reduce((obj, key) => {
+    if (FILTER_COLUMNS[key]) {
+      obj[key] = query[key];
+    }
+    return obj;
+  }, {});
+
  return (
    <>
      <WebsiteHeader websiteId={websiteId} />
-      <WebsiteMetricsBar websiteId={websiteId} />
+      <FilterTags websiteId={websiteId} params={params} />
+      <WebsiteMetricsBar websiteId={websiteId} compareMode={true} />
    </>
  );
 }
--- a/src/app/(main)/websites/[websiteId]/realtime/RealtimeHeader.tsx
+++ b/src/app/(main)/websites/[websiteId]/realtime/RealtimeHeader.tsx
@ -14,25 +14,25 @@ export function RealtimeHeader({ data }: { data: RealtimeData }) {
          className={styles.card}
          label={formatMessage(labels.views)}
          value={pageviews?.length}
-          hideComparison
+          showChange
        />
        <MetricCard
          className={styles.card}
          label={formatMessage(labels.visitors)}
          value={visitors?.length}
-          hideComparison
+          showChange
        />
        <MetricCard
          className={styles.card}
          label={formatMessage(labels.events)}
          value={events?.length}
-          hideComparison
+          showChange
        />
        <MetricCard
          className={styles.card}
          label={formatMessage(labels.countries)}
          value={countries?.length}
-          hideComparison
+          showChange
        />
      </div>
    </div>