Refactor website metrics components

src/app/(main)/websites/[websiteId]/WebsiteChartList.tsx

@@ -1,12 +1,13 @@
-import { Button, Text, Icon, Icons } from 'react-basics';
+import { useLocale, useMessages, useTeamUrl } from '@/components/hooks';
-import { useMemo } from 'react';
-import { firstBy } from 'thenby';
-import Link from 'next/link';
-import WebsiteChart from './WebsiteChart';
 import useDashboard from '@/store/dashboard';
+import Link from 'next/link';
+import { useMemo } from 'react';
+import { Button, Icon, Icons, Text } from 'react-basics';
+import { firstBy } from 'thenby';
+import WebsiteChart from './WebsiteChart';
 import WebsiteHeader from './WebsiteHeader';
+import { WebsiteMetrics } from './WebsiteMetrics';
 import { WebsiteMetricsBar } from './WebsiteMetricsBar';
-import { useMessages, useLocale, useTeamUrl } from '@/components/hooks';
 
 export default function WebsiteChartList({
   websites,
@@ -46,7 +47,9 @@ export default function WebsiteChartList({
                 </Button>
               </Link>
             </WebsiteHeader>
+            <WebsiteMetrics websiteId={id}>
               <WebsiteMetricsBar websiteId={id} showChange={true} />
+            </WebsiteMetrics>
             {showCharts && <WebsiteChart websiteId={id} />}
           </div>
         ) : null;

src/app/(main)/websites/[websiteId]/WebsiteDetailsPage.tsx

@@ -1,13 +1,14 @@
 'use client';
-import { usePathname } from 'next/navigation';
-import FilterTags from '@/components/metrics/FilterTags';
 import { useNavigation } from '@/components/hooks';
+import FilterTags from '@/components/metrics/FilterTags';
+import { FILTER_COLUMNS } from '@/lib/constants';
+import { usePathname } from 'next/navigation';
 import WebsiteChart from './WebsiteChart';
 import WebsiteExpandedView from './WebsiteExpandedView';
 import WebsiteHeader from './WebsiteHeader';
+import { WebsiteMetrics } from './WebsiteMetrics';
 import WebsiteMetricsBar from './WebsiteMetricsBar';
 import WebsiteTableView from './WebsiteTableView';
-import { FILTER_COLUMNS } from '@/lib/constants';
 
 export default function WebsiteDetailsPage({ websiteId }: { websiteId: string }) {
   const pathname = usePathname();
@@ -27,7 +28,9 @@ export default function WebsiteDetailsPage({ websiteId }: { websiteId: string })
     <>
       <WebsiteHeader websiteId={websiteId} showLinks={showLinks} />
       <FilterTags websiteId={websiteId} params={params} />
-      <WebsiteMetricsBar websiteId={websiteId} showFilter={true} showChange={true} sticky={true} />
+      <WebsiteMetrics websiteId={websiteId} showFilter={true} sticky={true}>
+        <WebsiteMetricsBar websiteId={websiteId} showChange={true} />
+      </WebsiteMetrics>
       <WebsiteChart websiteId={websiteId} />
       {!view && <WebsiteTableView websiteId={websiteId} />}
       {view && <WebsiteExpandedView websiteId={websiteId} />}

src/app/(main)/websites/[websiteId]/WebsiteMetrics.tsx

@@ -0,0 +1,65 @@
+import { useMessages, useSticky } from '@/components/hooks';
+import WebsiteDateFilter from '@/components/input/WebsiteDateFilter';
+import useStore, { setWebsiteDateCompare } from '@/store/websites';
+import classNames from 'classnames';
+import { ReactNode } from 'react';
+import { Dropdown, Item } from 'react-basics';
+import WebsiteFilterButton from './WebsiteFilterButton';
+import styles from './WebsiteMetrics.module.css';
+
+export function WebsiteMetrics({
+  websiteId,
+  sticky,
+  compareMode = false,
+  showFilter = false,
+  children,
+}: {
+  websiteId: string;
+  sticky?: boolean;
+  showChange?: boolean;
+  compareMode?: boolean;
+  showFilter?: boolean;
+  children?: ReactNode;
+}) {
+  const { formatMessage, labels } = useMessages();
+  const { ref, isSticky } = useSticky({ enabled: sticky });
+  const dateCompare = useStore(state => state[websiteId]?.dateCompare);
+
+  const items = [
+    { label: formatMessage(labels.previousPeriod), value: 'prev' },
+    { label: formatMessage(labels.previousYear), value: 'yoy' },
+  ];
+
+  return (
+    <div
+      ref={ref}
+      className={classNames(styles.container, {
+        [styles.sticky]: sticky,
+        [styles.isSticky]: sticky && isSticky,
+      })}
+    >
+      <div>{children}</div>
+      <div className={styles.actions}>
+        {showFilter && <WebsiteFilterButton websiteId={websiteId} />}
+        <WebsiteDateFilter websiteId={websiteId} showAllTime={!compareMode} />
+        {compareMode && (
+          <div className={styles.vs}>
+            <b>VS</b>
+            <Dropdown
+              className={styles.dropdown}
+              items={items}
+              value={dateCompare || 'prev'}
+              renderValue={value => items.find(i => i.value === value)?.label}
+              alignment="end"
+              onChange={(value: any) => setWebsiteDateCompare(websiteId, value)}
+            >
+              {items.map(({ label, value }) => (
+                <Item key={value}>{label}</Item>
+              ))}
+            </Dropdown>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

src/app/(main)/websites/[websiteId]/WebsiteMetricsBar.tsx

@@ -1,21 +1,14 @@
-import { Dropdown, Item } from 'react-basics';
+import { useDateRange, useMessages } from '@/components/hooks';
-import classNames from 'classnames';
+import useWebsiteStats from '@/components/hooks/queries/useWebsiteStats';
-import { useDateRange, useMessages, useSticky } from '@/components/hooks';
-import WebsiteDateFilter from '@/components/input/WebsiteDateFilter';
 import MetricCard from '@/components/metrics/MetricCard';
 import MetricsBar from '@/components/metrics/MetricsBar';
-import { formatShortTime, formatLongNumber } from '@/lib/format';
+import { formatLongNumber, formatShortTime } from '@/lib/format';
-import useWebsiteStats from '@/components/hooks/queries/useWebsiteStats';
+import useStore from '@/store/websites';
-import useStore, { setWebsiteDateCompare } from '@/store/websites';
-import WebsiteFilterButton from './WebsiteFilterButton';
-import styles from './WebsiteMetricsBar.module.css';
 
 export function WebsiteMetricsBar({
   websiteId,
-  sticky,
   showChange = false,
   compareMode = false,
-  showFilter = false,
 }: {
   websiteId: string;
   sticky?: boolean;
@@ -26,7 +19,6 @@ export function WebsiteMetricsBar({
   const { dateRange } = useDateRange(websiteId);
   const { formatMessage, labels } = useMessages();
   const dateCompare = useStore(state => state[websiteId]?.dateCompare);
-  const { ref, isSticky } = useSticky({ enabled: sticky });
   const { data, isLoading, isFetched, error } = useWebsiteStats(
     websiteId,
     compareMode && dateCompare,
@@ -76,20 +68,7 @@ export function WebsiteMetricsBar({
       ]
     : [];
 
-  const items = [
-    { label: formatMessage(labels.previousPeriod), value: 'prev' },
-    { label: formatMessage(labels.previousYear), value: 'yoy' },
-  ];
-
   return (
-    <div
-      ref={ref}
-      className={classNames(styles.container, {
-        [styles.sticky]: sticky,
-        [styles.isSticky]: sticky && isSticky,
-      })}
-    >
-      <div>
     <MetricsBar isLoading={isLoading} isFetched={isFetched} error={error}>
       {metrics.map(({ label, value, prev, change, formatValue, reverseColors }) => {
         return (
@@ -107,29 +86,6 @@ export function WebsiteMetricsBar({
         );
       })}
     </MetricsBar>
-      </div>
-      <div className={styles.actions}>
-        {showFilter && <WebsiteFilterButton websiteId={websiteId} />}
-        <WebsiteDateFilter websiteId={websiteId} showAllTime={!compareMode} />
-        {compareMode && (
-          <div className={styles.vs}>
-            <b>VS</b>
-            <Dropdown
-              className={styles.dropdown}
-              items={items}
-              value={dateCompare || 'prev'}
-              renderValue={value => items.find(i => i.value === value)?.label}
-              alignment="end"
-              onChange={(value: any) => setWebsiteDateCompare(websiteId, value)}
-            >
-              {items.map(({ label, value }) => (
-                <Item key={value}>{label}</Item>
-              ))}
-            </Dropdown>
-          </div>
-        )}
-      </div>
-    </div>
   );
 }
 

src/app/(main)/websites/[websiteId]/compare/WebsiteComparePage.tsx

@@ -1,10 +1,11 @@
 'use client';
-import WebsiteHeader from '../WebsiteHeader';
-import WebsiteMetricsBar from '../WebsiteMetricsBar';
-import FilterTags from '@/components/metrics/FilterTags';
 import { useNavigation } from '@/components/hooks';
+import FilterTags from '@/components/metrics/FilterTags';
 import { FILTER_COLUMNS } from '@/lib/constants';
 import WebsiteChart from '../WebsiteChart';
+import WebsiteHeader from '../WebsiteHeader';
+import { WebsiteMetrics } from '../WebsiteMetrics';
+import WebsiteMetricsBar from '../WebsiteMetricsBar';
 import WebsiteCompareTables from './WebsiteCompareTables';
 
 export function WebsiteComparePage({ websiteId }) {
@@ -21,7 +22,9 @@ export function WebsiteComparePage({ websiteId }) {
     <>
       <WebsiteHeader websiteId={websiteId} />
       <FilterTags websiteId={websiteId} params={params} />
-      <WebsiteMetricsBar websiteId={websiteId} compareMode={true} showFilter={true} />
+      <WebsiteMetrics websiteId={websiteId} compareMode={true} showFilter={true}>
+        <WebsiteMetricsBar websiteId={websiteId} compareMode={true} />
+      </WebsiteMetrics>
       <WebsiteChart websiteId={websiteId} compareMode={true} />
       <WebsiteCompareTables websiteId={websiteId} />
     </>

src/app/(main)/websites/[websiteId]/events/EventsMetricsBar.tsx

@@ -1,17 +1,14 @@
 import { useMessages } from '@/components/hooks';
 import useWebsiteSessionStats from '@/components/hooks/queries/useWebsiteSessionStats';
-import WebsiteDateFilter from '@/components/input/WebsiteDateFilter';
 import MetricCard from '@/components/metrics/MetricCard';
 import MetricsBar from '@/components/metrics/MetricsBar';
 import { formatLongNumber } from '@/lib/format';
-import { Flexbox } from 'react-basics';
 
 export function EventsMetricsBar({ websiteId }: { websiteId: string }) {
   const { formatMessage, labels } = useMessages();
   const { data, isLoading, isFetched, error } = useWebsiteSessionStats(websiteId);
 
   return (
-    <Flexbox direction="row" justifyContent="space-between" style={{ minHeight: 120 }}>
     <MetricsBar isLoading={isLoading} isFetched={isFetched} error={error}>
       <MetricCard
         value={data?.visitors?.value}
@@ -34,8 +31,6 @@ export function EventsMetricsBar({ websiteId }: { websiteId: string }) {
         formatValue={formatLongNumber}
       />
     </MetricsBar>
-      <WebsiteDateFilter websiteId={websiteId} />
-    </Flexbox>
   );
 }
 

src/app/(main)/websites/[websiteId]/events/EventsPage.tsx

@@ -1,14 +1,15 @@
 'use client';
+import { useMessages } from '@/components/hooks';
+import { GridRow } from '@/components/layout/Grid';
+import EventsChart from '@/components/metrics/EventsChart';
+import MetricsTable from '@/components/metrics/MetricsTable';
+import { useState } from 'react';
+import { Item, Tabs } from 'react-basics';
 import WebsiteHeader from '../WebsiteHeader';
+import { WebsiteMetrics } from '../WebsiteMetrics';
+import EventProperties from './EventProperties';
 import EventsDataTable from './EventsDataTable';
 import EventsMetricsBar from './EventsMetricsBar';
-import EventsChart from '@/components/metrics/EventsChart';
-import { GridRow } from '@/components/layout/Grid';
-import MetricsTable from '@/components/metrics/MetricsTable';
-import { useMessages } from '@/components/hooks';
-import { Item, Tabs } from 'react-basics';
-import { useState } from 'react';
-import EventProperties from './EventProperties';
 
 export default function EventsPage({ websiteId }) {
   const [tab, setTab] = useState('activity');
@@ -17,7 +18,9 @@ export default function EventsPage({ websiteId }) {
   return (
     <>
       <WebsiteHeader websiteId={websiteId} />
+      <WebsiteMetrics websiteId={websiteId}>
         <EventsMetricsBar websiteId={websiteId} />
+      </WebsiteMetrics>
       <GridRow columns="two-one">
         <EventsChart websiteId={websiteId} />
         <MetricsTable

src/app/(main)/websites/[websiteId]/sessions/SessionsMetricsBar.tsx

@@ -1,17 +1,14 @@
 import { useMessages } from '@/components/hooks';
 import useWebsiteSessionStats from '@/components/hooks/queries/useWebsiteSessionStats';
-import WebsiteDateFilter from '@/components/input/WebsiteDateFilter';
 import MetricCard from '@/components/metrics/MetricCard';
 import MetricsBar from '@/components/metrics/MetricsBar';
 import { formatLongNumber } from '@/lib/format';
-import { Flexbox } from 'react-basics';
 
 export function SessionsMetricsBar({ websiteId }: { websiteId: string }) {
   const { formatMessage, labels } = useMessages();
   const { data, isLoading, isFetched, error } = useWebsiteSessionStats(websiteId);
 
   return (
-    <Flexbox direction="row" justifyContent="space-between" style={{ minHeight: 120 }}>
     <MetricsBar isLoading={isLoading} isFetched={isFetched} error={error}>
       <MetricCard
         value={data?.visitors?.value}
@@ -34,8 +31,6 @@ export function SessionsMetricsBar({ websiteId }: { websiteId: string }) {
         formatValue={formatLongNumber}
       />
     </MetricsBar>
-      <WebsiteDateFilter websiteId={websiteId} />
-    </Flexbox>
   );
 }
 

src/app/(main)/websites/[websiteId]/sessions/SessionsPage.tsx

@@ -1,13 +1,14 @@
 'use client';
+import { useMessages } from '@/components/hooks';
+import { GridRow } from '@/components/layout/Grid';
+import WorldMap from '@/components/metrics/WorldMap';
+import { useState } from 'react';
+import { Item, Tabs } from 'react-basics';
 import WebsiteHeader from '../WebsiteHeader';
+import { WebsiteMetrics } from '../WebsiteMetrics';
+import SessionProperties from './SessionProperties';
 import SessionsDataTable from './SessionsDataTable';
 import SessionsMetricsBar from './SessionsMetricsBar';
-import SessionProperties from './SessionProperties';
-import WorldMap from '@/components/metrics/WorldMap';
-import { GridRow } from '@/components/layout/Grid';
-import { Item, Tabs } from 'react-basics';
-import { useState } from 'react';
-import { useMessages } from '@/components/hooks';
 import SessionsWeekly from './SessionsWeekly';
 
 export function SessionsPage({ websiteId }) {
@@ -17,7 +18,9 @@ export function SessionsPage({ websiteId }) {
   return (
     <>
       <WebsiteHeader websiteId={websiteId} />
+      <WebsiteMetrics websiteId={websiteId}>
         <SessionsMetricsBar websiteId={websiteId} />
+      </WebsiteMetrics>
       <GridRow columns="two-one">
         <WorldMap websiteId={websiteId} />
         <SessionsWeekly websiteId={websiteId} />