Unified loading states.

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

@@ -3,6 +3,7 @@ import { LoadingPanel } from '@/components/common/LoadingPanel';
 import { PageviewsChart } from '@/components/metrics/PageviewsChart';
 import { useWebsitePageviewsQuery } from '@/components/hooks/queries/useWebsitePageviewsQuery';
 import { useDateRange } from '@/components/hooks';
+import { Panel } from '@/components/common/Panel';
 
 export function WebsiteChart({
   websiteId,
@@ -13,10 +14,10 @@ export function WebsiteChart({
 }) {
   const { dateRange, dateCompare } = useDateRange(websiteId);
   const { startDate, endDate, unit, value } = dateRange;
-  const { data, isLoading, error } = useWebsitePageviewsQuery(
+  const { data, isLoading, isFetching, error } = useWebsitePageviewsQuery({
     websiteId,
-    compareMode ? dateCompare : undefined,
+    compareMode: compareMode ? dateCompare : undefined,
-  );
+  });
   const { pageviews, sessions, compare } = (data || {}) as any;
 
   const chartData = useMemo(() => {
@@ -47,14 +48,16 @@ export function WebsiteChart({
   }, [data, startDate, endDate, unit]);
 
   return (
-    <LoadingPanel isLoading={isLoading} error={error}>
+    <Panel height="520px">
-      <PageviewsChart
+      <LoadingPanel data={data} isFetching={isFetching} isLoading={isLoading} error={error}>
-        key={value}
+        <PageviewsChart
-        data={chartData}
+          key={value}
-        minDate={value === 'all' ? undefined : startDate}
+          data={chartData}
-        maxDate={endDate}
+          minDate={value === 'all' ? undefined : startDate}
-        unit={unit}
+          maxDate={endDate}
-      />
+          unit={unit}
-    </LoadingPanel>
+        />
+      </LoadingPanel>
+    </Panel>
   );
 }

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

@@ -1,6 +1,5 @@
 'use client';
 import { Column } from '@umami/react-zen';
-import { Panel } from '@/components/common/Panel';
 import { useNavigation } from '@/components/hooks';
 import { WebsiteChart } from './WebsiteChart';
 import { WebsiteExpandedView } from './WebsiteExpandedView';
@@ -18,9 +17,7 @@ export function WebsiteDetailsPage({ websiteId }: { websiteId: string }) {
     <Column gap>
       <WebsiteControls websiteId={websiteId} allowCompare={true} />
       <WebsiteMetricsBar websiteId={websiteId} showFilter={true} showChange={true} />
-      <Panel>
+      <WebsiteChart websiteId={websiteId} compareMode={compare} />
-        <WebsiteChart websiteId={websiteId} compareMode={compare} />
-      </Panel>
       {!view && !compare && <WebsiteTableView websiteId={websiteId} />}
       {view && !compare && <WebsiteExpandedView websiteId={websiteId} />}
       {compare && <WebsiteCompareTables websiteId={websiteId} />}

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

@@ -4,6 +4,7 @@ import { MetricsBar } from '@/components/metrics/MetricsBar';
 import { formatShortTime, formatLongNumber } from '@/lib/format';
 import { useWebsiteStatsQuery } from '@/components/hooks/queries/useWebsiteStatsQuery';
 import { useWebsites } from '@/store/websites';
+import { LoadingPanel } from '@/components/common/LoadingPanel';
 
 export function WebsiteMetricsBar({
   websiteId,
@@ -18,72 +19,80 @@ export function WebsiteMetricsBar({
   const { dateRange } = useDateRange(websiteId);
   const { formatMessage, labels } = useMessages();
   const dateCompare = useWebsites(state => state[websiteId]?.dateCompare);
-  const { data, isLoading, isFetched, error } = useWebsiteStatsQuery(
+  const { data, isLoading, isFetching, error } = useWebsiteStatsQuery(
     websiteId,
     compareMode && dateCompare,
   );
   const isAllTime = dateRange.value === 'all';
 
-  const { pageviews, visitors, visits, bounces, totaltime } = data || {};
+  const { pageviews, visitors, visits, bounces, totaltime, previous } = data || {};
 
   const metrics = data
     ? [
         {
-          ...pageviews,
+          value: pageviews,
           label: formatMessage(labels.views),
-          change: pageviews.value - pageviews.prev,
+          change: pageviews - previous.pageviews,
           formatValue: formatLongNumber,
         },
         {
-          ...visits,
+          value: visits,
           label: formatMessage(labels.visits),
-          change: visits.value - visits.prev,
+          change: visits - previous.visits,
           formatValue: formatLongNumber,
         },
         {
-          ...visitors,
+          value: visitors,
           label: formatMessage(labels.visitors),
-          change: visitors.value - visitors.prev,
+          change: visitors - previous.visitors,
           formatValue: formatLongNumber,
         },
         {
           label: formatMessage(labels.bounceRate),
-          value: (Math.min(visits.value, bounces.value) / visits.value) * 100,
+          value: (Math.min(visits, bounces) / visits) * 100,
-          prev: (Math.min(visits.prev, bounces.prev) / visits.prev) * 100,
+          prev: (Math.min(previous.visits, previous.bounces) / previous.visits) * 100,
           change:
-            (Math.min(visits.value, bounces.value) / visits.value) * 100 -
+            (Math.min(visits, bounces) / visits) * 100 -
-            (Math.min(visits.prev, bounces.prev) / visits.prev) * 100,
+            (Math.min(previous.visits, previous.bounces) / previous.visits) * 100,
           formatValue: n => Math.round(+n) + '%',
           reverseColors: true,
         },
         {
           label: formatMessage(labels.visitDuration),
-          value: totaltime.value / visits.value,
+          value: totaltime / visits,
-          prev: totaltime.prev / visits.prev,
+          prev: previous.totaltime / previous.visits,
-          change: totaltime.value / visits.value - totaltime.prev / visits.prev,
+          change: totaltime / visits - previous.totaltime / previous.visits,
           formatValue: n =>
             `${+n < 0 ? '-' : ''}${formatShortTime(Math.abs(~~n), ['m', 's'], ' ')}`,
         },
       ]
-    : [];
+    : null;
 
   return (
-    <MetricsBar isLoading={isLoading} isFetched={isFetched} error={error}>
+    <LoadingPanel
-      {metrics.map(({ label, value, prev, change, formatValue, reverseColors }) => {
+      data={metrics}
-        return (
+      isLoading={isLoading}
-          <MetricCard
+      isFetching={isFetching}
-            key={label}
+      error={error}
-            value={value}
+      minHeight="136px"
-            previousValue={prev}
+    >
-            label={label}
+      <MetricsBar>
-            change={change}
+        {metrics?.map(({ label, value, prev, change, formatValue, reverseColors }) => {
-            formatValue={formatValue}
+          return (
-            reverseColors={reverseColors}
+            <MetricCard
-            showChange={!isAllTime && (compareMode || showChange)}
+              key={label}
-            showPrevious={!isAllTime && compareMode}
+              value={value}
-          />
+              previousValue={prev}
-        );
+              label={label}
-      })}
+              change={change}
-    </MetricsBar>
+              formatValue={formatValue}
+              reverseColors={reverseColors}
+              showChange={!isAllTime && (compareMode || showChange)}
+              showPrevious={!isAllTime && compareMode}
+            />
+          );
+        })}
+      </MetricsBar>
+    </LoadingPanel>
   );
 }

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

@@ -3,33 +3,36 @@ import { useWebsiteSessionStatsQuery } from '@/components/hooks/queries/useWebsi
 import { MetricCard } from '@/components/metrics/MetricCard';
 import { MetricsBar } from '@/components/metrics/MetricsBar';
 import { formatLongNumber } from '@/lib/format';
+import { LoadingPanel } from '@/components/common/LoadingPanel';
 
 export function EventsMetricsBar({ websiteId }: { websiteId: string }) {
   const { formatMessage, labels } = useMessages();
-  const { data, isLoading, isFetched, error } = useWebsiteSessionStatsQuery(websiteId);
+  const { data, isLoading, isFetching, error } = useWebsiteSessionStatsQuery(websiteId);
 
   return (
-    <MetricsBar isLoading={isLoading} isFetched={isFetched} error={error}>
+    <LoadingPanel data={data} isLoading={isLoading} isFetching={isFetching} error={error}>
-      <MetricCard
+      <MetricsBar>
-        value={data?.visitors?.value}
+        <MetricCard
-        label={formatMessage(labels.visitors)}
+          value={data?.visitors?.value}
-        formatValue={formatLongNumber}
+          label={formatMessage(labels.visitors)}
-      />
+          formatValue={formatLongNumber}
-      <MetricCard
+        />
-        value={data?.visits?.value}
+        <MetricCard
-        label={formatMessage(labels.visits)}
+          value={data?.visits?.value}
-        formatValue={formatLongNumber}
+          label={formatMessage(labels.visits)}
-      />
+          formatValue={formatLongNumber}
-      <MetricCard
+        />
-        value={data?.pageviews?.value}
+        <MetricCard
-        label={formatMessage(labels.views)}
+          value={data?.pageviews?.value}
-        formatValue={formatLongNumber}
+          label={formatMessage(labels.views)}
-      />
+          formatValue={formatLongNumber}
-      <MetricCard
+        />
-        value={data?.events?.value}
+        <MetricCard
-        label={formatMessage(labels.events)}
+          value={data?.events?.value}
-        formatValue={formatLongNumber}
+          label={formatMessage(labels.events)}
-      />
+          formatValue={formatLongNumber}
-    </MetricsBar>
+        />
+      </MetricsBar>
+    </LoadingPanel>
   );
 }

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

@@ -8,7 +8,7 @@ export function RealtimeHeader({ data }: { data: RealtimeData }) {
   const { totals }: any = data || {};
 
   return (
-    <MetricsBar isFetched={true}>
+    <MetricsBar>
       <MetricCard label={formatMessage(labels.views)} value={totals.views} />
       <MetricCard label={formatMessage(labels.visitors)} value={totals.visitors} />
       <MetricCard label={formatMessage(labels.events)} value={totals.events} />

src/app/(main)/websites/[websiteId]/reports/attribution/Attribution.tsx

@@ -40,7 +40,6 @@ export function Attribution({
       step,
     },
   });
-  const isEmpty = !Object.keys(data || {}).length;
 
   const { formatMessage, labels } = useMessages();
 
@@ -83,9 +82,9 @@ export function Attribution({
   }
 
   return (
-    <LoadingPanel isEmpty={isEmpty} isLoading={isLoading} error={error}>
+    <LoadingPanel data={data} isLoading={isLoading} error={error}>
       <Column gap>
-        <MetricsBar isFetched={data}>
+        <MetricsBar>
           {metrics?.map(({ label, value, formatValue }) => {
             return <MetricCard key={label} value={value} label={label} formatValue={formatValue} />;
           })}

src/app/(main)/websites/[websiteId]/reports/breakdown/Breakdown.tsx

@@ -30,7 +30,7 @@ export function Breakdown({ websiteId, parameters, startDate, endDate }: Breakdo
   );
 
   return (
-    <LoadingPanel isEmpty={!data?.length} isLoading={isLoading} error={error}>
+    <LoadingPanel data={data} isLoading={isLoading} error={error}>
       <DataTable data={data}>
         {parameters?.fields.map(field => {
           return (

src/app/(main)/websites/[websiteId]/reports/funnels/Funnel.tsx

@@ -29,7 +29,7 @@ export function Funnel({ id, name, type, parameters, websiteId, startDate, endDa
   });
 
   return (
-    <LoadingPanel isEmpty={!data} isLoading={isLoading} error={error}>
+    <LoadingPanel data={data} isLoading={isLoading} error={error}>
       <Grid gap>
         <Grid columns="1fr auto" gap>
           <Column gap>

src/app/(main)/websites/[websiteId]/reports/funnels/FunnelsPage.tsx

@@ -9,7 +9,7 @@ import { LoadingPanel } from '@/components/common/LoadingPanel';
 import { Panel } from '@/components/common/Panel';
 
 export function FunnelsPage({ websiteId }: { websiteId: string }) {
-  const { result } = useReportsQuery({ websiteId, type: 'funnel' });
+  const { result, query } = useReportsQuery({ websiteId, type: 'funnel' });
   const {
     dateRange: { startDate, endDate },
   } = useDateRange(websiteId);
@@ -20,7 +20,7 @@ export function FunnelsPage({ websiteId }: { websiteId: string }) {
       <SectionHeader>
         <FunnelAddButton websiteId={websiteId} />
       </SectionHeader>
-      <LoadingPanel isEmpty={!result?.data?.length} isLoading={!result}>
+      <LoadingPanel data={result?.data} isLoading={query?.isLoading} error={query?.error}>
         <Grid gap>
           {result?.data?.map((report: any) => (
             <Panel key={report.id}>

src/app/(main)/websites/[websiteId]/reports/goals/Goal.tsx

@@ -35,7 +35,7 @@ export function Goal({ id, name, type, parameters, websiteId, startDate, endDate
   const isPage = parameters?.type === 'page';
 
   return (
-    <LoadingPanel isEmpty={!data} isLoading={isLoading} error={error}>
+    <LoadingPanel data={data} isLoading={isLoading} error={error}>
       <Grid gap>
         <Grid columns="1fr auto" gap>
           <Column gap>

src/app/(main)/websites/[websiteId]/reports/goals/GoalsPage.tsx

@@ -9,7 +9,7 @@ import { LoadingPanel } from '@/components/common/LoadingPanel';
 import { Panel } from '@/components/common/Panel';
 
 export function GoalsPage({ websiteId }: { websiteId: string }) {
-  const { result } = useReportsQuery({ websiteId, type: 'goal' });
+  const { result, query } = useReportsQuery({ websiteId, type: 'goal' });
   const {
     dateRange: { startDate, endDate },
   } = useDateRange(websiteId);
@@ -20,7 +20,7 @@ export function GoalsPage({ websiteId }: { websiteId: string }) {
       <SectionHeader>
         <GoalAddButton websiteId={websiteId} />
       </SectionHeader>
-      <LoadingPanel isEmpty={!result?.data?.length} isLoading={!result}>
+      <LoadingPanel data={result.data} isLoading={query.isLoading} error={query.error}>
         <Grid columns="1fr 1fr" gap>
           {result?.data?.map((report: any) => (
             <Panel key={report.id}>

src/app/(main)/websites/[websiteId]/reports/journeys/Journey.tsx

@@ -166,7 +166,7 @@ export function Journey({
   };
 
   return (
-    <LoadingPanel isEmpty={!data} isLoading={isLoading} error={error} height="100%">
+    <LoadingPanel data={data} isLoading={isLoading} error={error} height="100%">
       <div className={styles.container}>
         <div className={styles.view}>
           {columns.map(({ visitorCount, nodes }, columnIndex) => {

src/app/(main)/websites/[websiteId]/reports/retention/Retention.tsx

@@ -1,6 +1,5 @@
 import { ReactNode } from 'react';
-import { Grid, Row, Column, Text, Loading, Icon } from '@umami/react-zen';
+import { Grid, Row, Column, Text, Icon } from '@umami/react-zen';
-import { Empty } from '@/components/common/Empty';
 import { Users } from '@/components/icons';
 import { useMessages, useLocale, useResultQuery } from '@/components/hooks';
 import { formatDate } from '@/lib/date';
@@ -28,14 +27,6 @@ export function Retention({ websiteId, days = DAYS, startDate, endDate }: Retent
     },
   });
 
-  if (isLoading) {
-    return <Loading position="page" />;
-  }
-
-  if (!data) {
-    return <Empty />;
-  }
-
   const rows = data.reduce((arr: any[], row: { date: any; visitors: any; day: any }) => {
     const { date, visitors, day } = row;
     if (day === 0) {
@@ -44,7 +35,9 @@ export function Retention({ websiteId, days = DAYS, startDate, endDate }: Retent
         visitors,
         records: days
           .reduce((arr, day) => {
-            arr[day] = data.find(x => x.date === date && x.day === day);
+            arr[day] = data.find(
+              (x: { date: any; day: number }) => x.date === date && x.day === day,
+            );
             return arr;
           }, [])
           .filter(n => n),
@@ -56,7 +49,7 @@ export function Retention({ websiteId, days = DAYS, startDate, endDate }: Retent
   const totalDays = rows.length;
 
   return (
-    <LoadingPanel isEmpty={!data?.length} isLoading={isLoading} error={error}>
+    <LoadingPanel data={data} isLoading={isLoading} error={error}>
       <Panel allowFullscreen height="900px">
         <Column gap="1" width="100%" overflow="auto">
           <Grid

src/app/(main)/websites/[websiteId]/reports/revenue/Revenue.tsx

@@ -40,7 +40,6 @@ export function Revenue({ websiteId, startDate, endDate }: RevenueProps) {
       currency,
     },
   });
-  const isEmpty = !Object.keys(data || {})?.length;
 
   const renderCountryName = useCallback(
     ({ x: code }) => (
@@ -52,7 +51,7 @@ export function Revenue({ websiteId, startDate, endDate }: RevenueProps) {
     [countryNames, locale],
   );
 
-  const chartData = useMemo(() => {
+  const chartData: any = useMemo(() => {
     if (!data) return [];
 
     const map = (data.chart as any[]).reduce((obj, { x, t, y }) => {
@@ -114,9 +113,9 @@ export function Revenue({ websiteId, startDate, endDate }: RevenueProps) {
       <Grid columns="280px" gap>
         <CurrencySelect value={currency} onChange={setCurrency} />
       </Grid>
-      <LoadingPanel isEmpty={isEmpty} isLoading={isLoading} error={error}>
+      <LoadingPanel data={data} isLoading={isLoading} error={error}>
         <Column gap>
-          <MetricsBar isFetched={!!data} isLoading={isLoading}>
+          <MetricsBar>
             {metrics?.map(({ label, value, formatValue }) => {
               return (
                 <MetricCard key={label} value={value} label={label} formatValue={formatValue} />
@@ -125,13 +124,12 @@ export function Revenue({ websiteId, startDate, endDate }: RevenueProps) {
           </MetricsBar>
           <Panel>
             <BarChart
-              data={chartData}
+              chartData={chartData}
               minDate={startDate}
               maxDate={endDate}
               unit={unit}
               stacked={true}
               currency={currency}
-              isLoading={isLoading}
               renderXLabel={renderDateLabels(unit, locale)}
             />
           </Panel>

src/app/(main)/websites/[websiteId]/reports/utm/UTM.tsx

@@ -23,10 +23,9 @@ export function UTM({ websiteId, startDate, endDate }: UTMProps) {
       endDate,
     },
   });
-  const isEmpty = !Object.keys(data || {})?.length;
 
   return (
-    <LoadingPanel isEmpty={isEmpty} isLoading={isLoading} error={error}>
+    <LoadingPanel data={data} isLoading={isLoading} error={error}>
       <Column gap>
         {UTM_PARAMS.map(param => {
           const items = toArray(data?.[param]);
@@ -61,7 +60,7 @@ export function UTM({ websiteId, startDate, endDate }: UTMProps) {
                   />
                 </Column>
                 <Column>
-                  <PieChart type="doughnut" data={chartData} />
+                  <PieChart type="doughnut" chartData={chartData} />
                 </Column>
               </Grid>
             </Panel>

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

@@ -3,33 +3,36 @@ import { useWebsiteSessionStatsQuery } from '@/components/hooks/queries/useWebsi
 import { MetricCard } from '@/components/metrics/MetricCard';
 import { MetricsBar } from '@/components/metrics/MetricsBar';
 import { formatLongNumber } from '@/lib/format';
+import { LoadingPanel } from '@/components/common/LoadingPanel';
 
 export function SessionsMetricsBar({ websiteId }: { websiteId: string }) {
   const { formatMessage, labels } = useMessages();
-  const { data, isLoading, isFetched, error } = useWebsiteSessionStatsQuery(websiteId);
+  const { data, isLoading, isFetching, error } = useWebsiteSessionStatsQuery(websiteId);
 
   return (
-    <MetricsBar isLoading={isLoading} isFetched={isFetched} error={error}>
+    <LoadingPanel data={data} isLoading={isLoading} isFetching={isFetching} error={error}>
-      <MetricCard
+      <MetricsBar>
-        value={data?.visitors?.value}
+        <MetricCard
-        label={formatMessage(labels.visitors)}
+          value={data?.visitors?.value}
-        formatValue={formatLongNumber}
+          label={formatMessage(labels.visitors)}
-      />
+          formatValue={formatLongNumber}
-      <MetricCard
+        />
-        value={data?.visits?.value}
+        <MetricCard
-        label={formatMessage(labels.visits)}
+          value={data?.visits?.value}
-        formatValue={formatLongNumber}
+          label={formatMessage(labels.visits)}
-      />
+          formatValue={formatLongNumber}
-      <MetricCard
+        />
-        value={data?.pageviews?.value}
+        <MetricCard
-        label={formatMessage(labels.views)}
+          value={data?.pageviews?.value}
-        formatValue={formatLongNumber}
+          label={formatMessage(labels.views)}
-      />
+          formatValue={formatLongNumber}
-      <MetricCard
+        />
-        value={data?.countries?.value}
+        <MetricCard
-        label={formatMessage(labels.countries)}
+          value={data?.countries?.value}
-        formatValue={formatLongNumber}
+          label={formatMessage(labels.countries)}
-      />
+          formatValue={formatLongNumber}
-    </MetricsBar>
+        />
+      </MetricsBar>
+    </LoadingPanel>
   );
 }

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

@@ -36,65 +36,70 @@ export function SessionsWeekly({ websiteId }: { websiteId: string }) {
     : [];
 
   return (
-    <LoadingPanel isEmpty={!data?.length} isLoading={isLoading} error={error}>
+    <LoadingPanel data={data} isLoading={isLoading} error={error}>
       <Grid columns="repeat(8, 1fr)" gap>
-        <Grid rows="repeat(25, 20px)" gap="1">
+        {data && (
-          <Row>&nbsp;</Row>
+          <>
-          {Array(24)
+            <Grid rows="repeat(25, 20px)" gap="1">
-            .fill(null)
+              <Row>&nbsp;</Row>
-            .map((_, i) => {
+              {Array(24)
-              const label = format(addHours(startOfDay(new Date()), i), 'p', { locale: dateLocale })
+                .fill(null)
-                .replace(/\D00 ?/, '')
+                .map((_, i) => {
-                .toLowerCase();
+                  const label = format(addHours(startOfDay(new Date()), i), 'p', {
-              return (
+                    locale: dateLocale,
-                <Row key={i} justifyContent="flex-end">
+                  })
-                  <Text color="muted" weight="bold">
+                    .replace(/\D00 ?/, '')
-                    {label}
+                    .toLowerCase();
-                  </Text>
-                </Row>
-              );
-            })}
-        </Grid>
-        {data &&
-          daysOfWeek.map((index: number) => {
-            const day = data[index];
-            return (
-              <Grid
-                rows="repeat(25, 20px)"
-                justifyContent="center"
-                alignItems="center"
-                key={index}
-                gap="1"
-              >
-                <Row>
-                  <Text weight="bold" align="center">
-                    {format(getDayOfWeekAsDate(index), 'EEE', { locale: dateLocale })}
-                  </Text>
-                </Row>
-                {day?.map((count: number, j) => {
-                  const pct = count / max;
                   return (
-                    <TooltipTrigger key={j} delay={0} isDisabled={count <= 0}>
+                    <Row key={i} justifyContent="flex-end">
-                      <Focusable>
+                      <Text color="muted" weight="bold">
-                        <Row backgroundColor="2" width="20px" height="20px" borderRadius="full">
+                        {label}
-                          <Row
+                      </Text>
-                            backgroundColor="primary"
+                    </Row>
-                            width="20px"
-                            height="20px"
-                            borderRadius="full"
-                            style={{ opacity: pct, transform: `scale(${pct})` }}
-                          />
-                        </Row>
-                      </Focusable>
-                      <Tooltip placement="right">{`${formatMessage(
-                        labels.visitors,
-                      )}: ${count}`}</Tooltip>
-                    </TooltipTrigger>
                   );
                 })}
-              </Grid>
+            </Grid>
-            );
+            {daysOfWeek.map((index: number) => {
-          })}
+              const day = data[index];
+              return (
+                <Grid
+                  rows="repeat(24, 20px)"
+                  justifyContent="center"
+                  alignItems="center"
+                  key={index}
+                  gap="1"
+                >
+                  <Row marginBottom="3">
+                    <Text weight="bold" align="center">
+                      {format(getDayOfWeekAsDate(index), 'EEE', { locale: dateLocale })}
+                    </Text>
+                  </Row>
+                  {day?.map((count: number, j) => {
+                    const pct = count / max;
+                    return (
+                      <TooltipTrigger key={j} delay={0} isDisabled={count <= 0}>
+                        <Focusable>
+                          <Row backgroundColor="2" width="20px" height="20px" borderRadius="full">
+                            <Row
+                              backgroundColor="primary"
+                              width="20px"
+                              height="20px"
+                              borderRadius="full"
+                              style={{ opacity: pct, transform: `scale(${pct})` }}
+                            />
+                          </Row>
+                        </Focusable>
+                        <Tooltip placement="right">{`${formatMessage(
+                          labels.visitors,
+                        )}: ${count}`}</Tooltip>
+                      </TooltipTrigger>
+                    );
+                  })}
+                </Grid>
+              );
+            })}
+          </>
+        )}
       </Grid>
     </LoadingPanel>
   );

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

@@ -1,8 +1,20 @@
 import { isSameDay } from 'date-fns';
-import { Icon, StatusLight, Column, Row, Heading, Text, Button } from '@umami/react-zen';
+import {
+  Icon,
+  StatusLight,
+  Column,
+  Row,
+  Heading,
+  Text,
+  Button,
+  DialogTrigger,
+  Popover,
+  Dialog,
+} from '@umami/react-zen';
 import { LoadingPanel } from '@/components/common/LoadingPanel';
 import { Bolt, Eye, FileText } from '@/components/icons';
 import { useSessionActivityQuery, useTimezone } from '@/components/hooks';
+import { EventData } from '@/components/metrics/EventData';
 
 export function SessionActivity({
   websiteId,
@@ -25,7 +37,7 @@ export function SessionActivity({
   let lastDay = null;
 
   return (
-    <LoadingPanel isEmpty={!data?.length} isLoading={isLoading} error={error}>
+    <LoadingPanel data={data} isLoading={isLoading} error={error}>
       <Column gap>
         {data?.map(({ eventId, createdAt, urlPath, eventName, visitId, hasData }) => {
           const showHeader = !lastDay || !isSameDay(new Date(lastDay), new Date(createdAt));
@@ -41,15 +53,7 @@ export function SessionActivity({
                 <Row alignItems="center" gap>
                   <Icon>{eventName ? <Bolt /> : <Eye />}</Icon>
                   <Text>{eventName || urlPath}</Text>
-                  {hasData > 0 && (
+                  {hasData > 0 && <PropertiesButton websiteId={websiteId} eventId={eventId} />}
-                    <Button variant="quiet">
-                      <Row alignItems="center" gap>
-                        <Icon>
-                          <FileText />
-                        </Icon>
-                      </Row>
-                    </Button>
-                  )}
                 </Row>
               </Row>
             </Column>
@@ -59,3 +63,22 @@ export function SessionActivity({
     </LoadingPanel>
   );
 }
+
+const PropertiesButton = props => {
+  return (
+    <DialogTrigger>
+      <Button variant="quiet">
+        <Row alignItems="center" gap>
+          <Icon>
+            <FileText />
+          </Icon>
+        </Row>
+      </Button>
+      <Popover placement="right">
+        <Dialog>
+          <EventData {...props} />
+        </Dialog>
+      </Popover>
+    </DialogTrigger>
+  );
+};

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

@@ -6,10 +6,9 @@ import { LoadingPanel } from '@/components/common/LoadingPanel';
 
 export function SessionData({ websiteId, sessionId }: { websiteId: string; sessionId: string }) {
   const { data, isLoading, error } = useSessionDataQuery(websiteId, sessionId);
-  const isEmpty = !data?.length;
 
   return (
-    <LoadingPanel isEmpty={isEmpty} isLoading={isLoading} error={error}>
+    <LoadingPanel data={data} isLoading={isLoading} error={error}>
       {!data?.length && <Empty />}
       <Column gap="6">
         {data?.map(({ dataKey, dataType, stringValue }) => {

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

@@ -20,7 +20,7 @@ export function SessionDetailsPage({
   const { formatMessage, labels } = useMessages();
 
   return (
-    <LoadingPanel isLoading={isLoading} error={error}>
+    <LoadingPanel data={data} isLoading={isLoading} error={error}>
       <Grid columns="260px 1fr" gap>
         <Column gap="6">
           <Row justifyContent="center">
@@ -28,7 +28,6 @@ export function SessionDetailsPage({
           </Row>
           <SessionInfo data={data} />
         </Column>
-
         <Column gap>
           <SessionStats data={data} />
           <Panel>

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

@@ -7,7 +7,7 @@ export function SessionStats({ data }) {
   const { formatMessage, labels } = useMessages();
 
   return (
-    <MetricsBar isFetched={true}>
+    <MetricsBar>
       <MetricCard label={formatMessage(labels.visits)} value={data?.visits} />
       <MetricCard label={formatMessage(labels.views)} value={data?.views} />
       <MetricCard label={formatMessage(labels.events)} value={data?.events} />

src/app/Providers.tsx

@@ -13,6 +13,7 @@ const client = new QueryClient({
     queries: {
       retry: false,
       refetchOnWindowFocus: false,
+      staleTime: 1000 * 60,
     },
   },
 });

src/app/api/websites/[websiteId]/event-data/[eventId]/route.ts

@@ -0,0 +1,25 @@
+import { parseRequest } from '@/lib/request';
+import { unauthorized, json } from '@/lib/response';
+import { canViewWebsite } from '@/lib/auth';
+import { getEventData } from '@/queries/sql/events/getEventData';
+
+export async function GET(
+  request: Request,
+  { params }: { params: Promise<{ websiteId: string; eventId: string }> },
+) {
+  const { auth, error } = await parseRequest(request);
+
+  if (error) {
+    return error();
+  }
+
+  const { websiteId, eventId } = await params;
+
+  if (!(await canViewWebsite(auth, websiteId))) {
+    return unauthorized();
+  }
+
+  const data = await getEventData(eventId);
+
+  return json(data);
+}

src/app/api/websites/[websiteId]/stats/route.ts

@@ -45,19 +45,11 @@ export async function GET(
     endDate,
   });
 
-  const prevPeriod = await getWebsiteStats(websiteId, {
+  const previous = await getWebsiteStats(websiteId, {
     ...filters,
     startDate: compareStartDate,
     endDate: compareEndDate,
   });
 
-  const stats = Object.keys(metrics[0]).reduce((obj, key) => {
+  return json({ ...metrics, previous });
-    obj[key] = {
-      value: Number(metrics[0][key]) || 0,
-      prev: Number(prevPeriod[0][key]) || 0,
-    };
-    return obj;
-  }, {});
-
-  return json(stats);
 }

src/app/sso/SSOPage.tsx

@@ -18,5 +18,5 @@ export function SSOPage() {
     }
   }, [router, url, token]);
 
-  return <Loading />;
+  return <Loading position="page" />;
 }

src/components/common/DataGrid.tsx

@@ -1,7 +1,6 @@
 import { ReactNode } from 'react';
-import { Loading, SearchField, Row, Column } from '@umami/react-zen';
+import { SearchField, Row, Column } from '@umami/react-zen';
 import { useMessages, useNavigation } from '@/components/hooks';
-import { Empty } from '@/components/common/Empty';
 import { Pager } from '@/components/common/Pager';
 import { LoadingPanel } from '@/components/common/LoadingPanel';
 import { PagedQueryResult } from '@/lib/types';
@@ -24,16 +23,14 @@ export function DataGrid({
   allowSearch = true,
   allowPaging = true,
   autoFocus,
-  renderEmpty,
   children,
 }: DataTableProps) {
-  const { formatMessage, labels, messages } = useMessages();
+  const { formatMessage, labels } = useMessages();
   const { result, params, setParams, query } = queryResult || {};
-  const { error, isLoading, isFetched } = query || {};
+  const { error, isLoading, isFetching } = query || {};
   const { page, pageSize, count, data } = result || {};
   const { search } = params || {};
   const hasData = Boolean(!isLoading && data?.length);
-  const noResults = Boolean(search && !hasData);
   const { router, renderUrl } = useNavigation();
 
   const handleSearch = (search: string) => {
@@ -46,7 +43,7 @@ export function DataGrid({
   };
 
   return (
-    <Column gap="4">
+    <Column gap="4" minHeight="300px">
       {allowSearch && (hasData || search) && (
         <Row width="280px" alignItems="center">
           <SearchField
@@ -58,12 +55,9 @@ export function DataGrid({
           />
         </Row>
       )}
-      <LoadingPanel data={data} isLoading={isLoading} isFetched={isFetched} error={error}>
+      <LoadingPanel data={data} isLoading={isLoading} isFetching={isFetching} error={error}>
         <Column>
           {hasData ? (typeof children === 'function' ? children(result) : children) : null}
-          {isLoading && <Loading position="page" />}
-          {!isLoading && !hasData && !search && (renderEmpty ? renderEmpty() : <Empty />)}
-          {!isLoading && noResults && <Empty message={formatMessage(messages.noResultsFound)} />}
         </Column>
         {allowPaging && hasData && (
           <Row marginTop="6">

src/components/common/LoadingPanel.tsx

@@ -1,32 +1,59 @@
 import { ReactNode } from 'react';
-import { Spinner, Dots, Column, type ColumnProps } from '@umami/react-zen';
+import { Loading, Column, type ColumnProps } from '@umami/react-zen';
 import { ErrorMessage } from '@/components/common/ErrorMessage';
 import { Empty } from '@/components/common/Empty';
 
+export interface LoadingPanelProps extends ColumnProps {
+  data?: any;
+  error?: Error;
+  isEmpty?: boolean;
+  isLoading?: boolean;
+  isFetching?: boolean;
+  loadingIcon?: 'dots' | 'spinner';
+  renderEmpty?: () => ReactNode;
+  children: ReactNode;
+}
+
 export function LoadingPanel({
+  data,
   error,
   isEmpty,
-  isFetched,
   isLoading,
+  isFetching,
   loadingIcon = 'dots',
   renderEmpty = () => <Empty />,
   children,
   ...props
-}: {
+}: LoadingPanelProps) {
-  error?: Error;
+  const empty = isEmpty ?? checkEmpty(data);
-  isEmpty?: boolean;
+
-  isFetched?: boolean;
-  isLoading?: boolean;
-  loadingIcon?: 'dots' | 'spinner';
-  renderEmpty?: () => ReactNode;
-  children: ReactNode;
-} & ColumnProps) {
   return (
-    <Column {...props}>
+    <Column position="relative" flexGrow={1} {...props}>
-      {isLoading && !isFetched && (loadingIcon === 'dots' ? <Dots /> : <Spinner />)}
+      {/* Show loading spinner only if no data exists */}
+      {(isLoading || isFetching) && !data && <Loading icon={loadingIcon} position="page" />}
+
+      {/* Show error */}
       {error && <ErrorMessage />}
-      {!error && !isLoading && isEmpty && renderEmpty()}
+
-      {!error && !isLoading && !isEmpty && children}
+      {/* Show empty state (once loaded) */}
+      {!error && !isLoading && !isFetching && empty && renderEmpty()}
+
+      {/* Show main content when data exists */}
+      {!error && !empty && children}
     </Column>
   );
 }
+
+function checkEmpty(data: any) {
+  if (!data) return false;
+
+  if (Array.isArray(data)) {
+    return data.length <= 0;
+  }
+
+  if (typeof data === 'object') {
+    return Object.keys(data).length <= 0;
+  }
+
+  return !!data;
+}

src/components/hooks/index.ts

@@ -1,5 +1,6 @@
 'use client';
 export * from './queries/useActiveUsersQuery';
+export * from './queries/useEventDataQuery';
 export * from './queries/useEventDataEventsQuery';
 export * from './queries/useEventDataPropertiesQuery';
 export * from './queries/useEventDataValuesQuery';
@@ -22,7 +23,6 @@ export * from './queries/useTeamWebsitesQuery';
 export * from './queries/useTeamMembersQuery';
 export * from './queries/useUserQuery';
 export * from './queries/useUsersQuery';
-export * from './queries/useUTMQuery';
 export * from './queries/useWebsiteQuery';
 export * from './queries/useWebsites';
 export * from './queries/useWebsiteEventsQuery';

src/components/hooks/queries/useActiveUsersQuery.ts

@@ -1,10 +1,7 @@
 import { useApi } from '../useApi';
-import { UseQueryOptions } from '@tanstack/react-query';
+import { ReactQueryOptions } from '@/lib/types';
 
-export function useActyiveUsersQuery(
+export function useActyiveUsersQuery(websiteId: string, options?: ReactQueryOptions<any>) {
-  websiteId: string,
-  options?: Omit<UseQueryOptions, 'queryKey' | 'queryFn'>,
-) {
   const { get, useQuery } = useApi();
   return useQuery<any>({
     queryKey: ['websites:active', websiteId],

src/components/hooks/queries/useEventDataEventsQuery.ts

@@ -1,11 +1,8 @@
 import { useApi } from '../useApi';
-import { UseQueryOptions } from '@tanstack/react-query';
 import { useFilterParams } from '../useFilterParams';
+import { ReactQueryOptions } from '@/lib/types';
 
-export function useEventDataEventsQuery(
+export function useEventDataEventsQuery(websiteId: string, options?: ReactQueryOptions<any>) {
-  websiteId: string,
-  options?: Omit<UseQueryOptions, 'queryKey' | 'queryFn'>,
-) {
   const { get, useQuery } = useApi();
   const params = useFilterParams(websiteId);
 

src/components/hooks/queries/useEventDataPropertiesQuery.ts

@@ -1,11 +1,8 @@
-import { UseQueryOptions } from '@tanstack/react-query';
 import { useApi } from '../useApi';
 import { useFilterParams } from '../useFilterParams';
+import { ReactQueryOptions } from '@/lib/types';
 
-export function useEventDataPropertiesQuery(
+export function useEventDataPropertiesQuery(websiteId: string, options?: ReactQueryOptions<any>) {
-  websiteId: string,
-  options?: Omit<UseQueryOptions, 'queryKey' | 'queryFn'>,
-) {
   const { get, useQuery } = useApi();
   const params = useFilterParams(websiteId);
 

src/components/hooks/queries/useEventDataQuery.ts

@@ -0,0 +1,19 @@
+import { useApi } from '../useApi';
+import { useFilterParams } from '../useFilterParams';
+import { ReactQueryOptions } from '@/lib/types';
+
+export function useEventDataQuery(
+  websiteId: string,
+  eventId: string,
+  options?: ReactQueryOptions<any>,
+) {
+  const { get, useQuery } = useApi();
+  const params = useFilterParams(websiteId);
+
+  return useQuery({
+    queryKey: ['websites:event-data', { websiteId, eventId, ...params }],
+    queryFn: () => get(`/websites/${websiteId}/event-data/${eventId}`, { ...params }),
+    enabled: !!(websiteId && eventId),
+    ...options,
+  });
+}

src/components/hooks/queries/useEventDataValuesQuery.ts

@@ -1,12 +1,12 @@
-import { UseQueryOptions } from '@tanstack/react-query';
 import { useApi } from '../useApi';
 import { useFilterParams } from '../useFilterParams';
+import { ReactQueryOptions } from '@/lib/types';
 
 export function useEventDataValuesQuery(
   websiteId: string,
   eventName: string,
   propertyName: string,
-  options?: Omit<UseQueryOptions, 'queryKey' | 'queryFn'>,
+  options?: ReactQueryOptions<any>,
 ) {
   const { get, useQuery } = useApi();
   const params = useFilterParams(websiteId);

src/components/hooks/queries/useLoginQuery.ts

@@ -1,4 +1,3 @@
-import { UseQueryResult } from '@tanstack/react-query';
 import { useApp, setUser } from '@/store/app';
 import { useApi } from '../useApi';
 
@@ -7,7 +6,7 @@ const selector = (state: { user: any }) => state.user;
 export function useLoginQuery(): {
   user: any;
   setUser: (data: any) => void;
-} & UseQueryResult {
+} {
   const { post, useQuery } = useApi();
   const user = useApp(selector);
 

src/components/hooks/queries/useReportsQuery.ts

@@ -1,8 +1,12 @@
 import { useApi } from '../useApi';
 import { usePagedQuery } from '../usePagedQuery';
 import { useModified } from '../useModified';
+import { ReactQueryOptions } from '@/lib/types';
 
-export function useReportsQuery({ websiteId, type }: { websiteId: string; type?: string }) {
+export function useReportsQuery(
+  { websiteId, type }: { websiteId: string; type?: string },
+  options?: ReactQueryOptions<any>,
+) {
   const { modified } = useModified(`reports:${type}`);
   const { get } = useApi();
 
@@ -10,5 +14,6 @@ export function useReportsQuery({ websiteId, type }: { websiteId: string; type?:
     queryKey: ['reports', { websiteId, type, modified }],
     queryFn: async () => get('/reports', { websiteId, type }),
     enabled: !!websiteId && !!type,
+    ...options,
   });
 }

src/components/hooks/queries/useResultQuery.ts

@@ -1,10 +1,10 @@
 import { useApi } from '@/components/hooks';
-import { UseQueryOptions, QueryKey } from '@tanstack/react-query';
+import { ReactQueryOptions } from '@/lib/types';
 
 export function useResultQuery<T>(
   type: string,
   params?: { [key: string]: any },
-  options?: Omit<UseQueryOptions<T, Error, T, QueryKey>, 'queryKey' | 'queryFn'>,
+  options?: ReactQueryOptions<T>,
 ) {
   const { post, useQuery } = useApi();
 

src/components/hooks/queries/useSessionDataPropertiesQuery.ts

@@ -1,11 +1,8 @@
 import { useApi } from '../useApi';
-import { UseQueryOptions } from '@tanstack/react-query';
 import { useFilterParams } from '../useFilterParams';
+import { ReactQueryOptions } from '@/lib/types';
 
-export function useSessionDataPropertiesQuery(
+export function useSessionDataPropertiesQuery(websiteId: string, options?: ReactQueryOptions<any>) {
-  websiteId: string,
-  options?: Omit<UseQueryOptions, 'queryKey' | 'queryFn'>,
-) {
   const { get, useQuery } = useApi();
   const params = useFilterParams(websiteId);
 

src/components/hooks/queries/useSessionDataValuesQuery.ts

@@ -1,11 +1,11 @@
 import { useApi } from '../useApi';
-import { UseQueryOptions } from '@tanstack/react-query';
 import { useFilterParams } from '../useFilterParams';
+import { ReactQueryOptions } from '@/lib/types';
 
 export function useSessionDataValuesQuery(
   websiteId: string,
   propertyName: string,
-  options?: Omit<UseQueryOptions, 'queryKey' | 'queryFn'>,
+  options?: ReactQueryOptions<any>,
 ) {
   const { get, useQuery } = useApi();
   const params = useFilterParams(websiteId);

src/components/hooks/queries/useUTMQuery.ts

@@ -1,20 +0,0 @@
-import { useApi } from '../useApi';
-import { useFilterParams } from '../useFilterParams';
-import { UseQueryOptions } from '@tanstack/react-query';
-
-export function useUTMQuery(
-  websiteId: string,
-  queryParams?: { type: string; limit?: number; search?: string; startAt?: number; endAt?: number },
-  options?: Omit<UseQueryOptions & { onDataLoad?: (data: any) => void }, 'queryKey' | 'queryFn'>,
-) {
-  const { get, useQuery } = useApi();
-  const filterParams = useFilterParams(websiteId);
-
-  return useQuery({
-    queryKey: ['utm', websiteId, { ...filterParams, ...queryParams }],
-    queryFn: () =>
-      get(`/websites/${websiteId}/utm`, { websiteId, ...filterParams, ...queryParams }),
-    enabled: !!websiteId,
-    ...options,
-  });
-}

src/components/hooks/queries/useWebsiteEventsQuery.ts

@@ -1,12 +1,9 @@
 import { useApi } from '../useApi';
-import { UseQueryOptions } from '@tanstack/react-query';
 import { useFilterParams } from '../useFilterParams';
 import { usePagedQuery } from '../usePagedQuery';
+import { ReactQueryOptions } from '@/lib/types';
 
-export function useWebsiteEventsQuery(
+export function useWebsiteEventsQuery(websiteId: string, options?: ReactQueryOptions<any>) {
-  websiteId: string,
-  options?: Omit<UseQueryOptions, 'queryKey' | 'queryFn'>,
-) {
   const { get } = useApi();
   const params = useFilterParams(websiteId);
 

src/components/hooks/queries/useWebsiteEventsSeriesQuery.ts

@@ -1,11 +1,8 @@
 import { useApi } from '../useApi';
-import { UseQueryOptions } from '@tanstack/react-query';
 import { useFilterParams } from '../useFilterParams';
+import { ReactQueryOptions } from '@/lib/types';
 
-export function useWebsiteEventsSeriesQuery(
+export function useWebsiteEventsSeriesQuery(websiteId: string, options?: ReactQueryOptions<any>) {
-  websiteId: string,
-  options?: Omit<UseQueryOptions, 'queryKey' | 'queryFn'>,
-) {
   const { get, useQuery } = useApi();
   const params = useFilterParams(websiteId);
 

src/components/hooks/queries/useWebsiteMetricsQuery.ts

@@ -1,18 +1,24 @@
-import { UseQueryOptions } from '@tanstack/react-query';
+import { keepPreviousData } from '@tanstack/react-query';
 import { useApi } from '../useApi';
 import { useFilterParams } from '../useFilterParams';
 import { useSearchParams } from 'next/navigation';
+import { ReactQueryOptions } from '@/lib/types';
+
+export type WebsiteMetricsData = {
+  x: string;
+  y: number;
+}[];
 
 export function useWebsiteMetricsQuery(
   websiteId: string,
   queryParams: { type: string; limit?: number; search?: string; startAt?: number; endAt?: number },
-  options?: Omit<UseQueryOptions & { onDataLoad?: (data: any) => void }, 'queryKey' | 'queryFn'>,
+  options?: ReactQueryOptions<WebsiteMetricsData>,
 ) {
   const { get, useQuery } = useApi();
   const filterParams = useFilterParams(websiteId);
   const searchParams = useSearchParams();
 
-  return useQuery({
+  return useQuery<WebsiteMetricsData>({
     queryKey: [
       'websites:metrics',
       {
@@ -21,18 +27,14 @@ export function useWebsiteMetricsQuery(
         ...queryParams,
       },
     ],
-    queryFn: async () => {
+    queryFn: async () =>
-      const data = await get(`/websites/${websiteId}/metrics`, {
+      get(`/websites/${websiteId}/metrics`, {
         ...filterParams,
         [searchParams.get('view')]: undefined,
         ...queryParams,
-      });
+      }),
-
-      options?.onDataLoad?.(data);
-
-      return data;
-    },
     enabled: !!websiteId,
+    placeholderData: keepPreviousData,
     ...options,
   });
 }

src/components/hooks/queries/useWebsitePageviewsQuery.ts

@@ -1,18 +1,22 @@
-import { UseQueryOptions } from '@tanstack/react-query';
 import { useApi } from '../useApi';
 import { useFilterParams } from '../useFilterParams';
+import { ReactQueryOptions } from '@/lib/types';
+
+export interface WebsitePageviewsData {
+  pageviews: { x: string; y: number }[];
+  sessions: { x: string; y: number }[];
+}
 
 export function useWebsitePageviewsQuery(
-  websiteId: string,
+  { websiteId, compareMode }: { websiteId: string; compareMode?: string },
-  compare?: string,
+  options?: ReactQueryOptions<WebsitePageviewsData>,
-  options?: Omit<UseQueryOptions, 'queryKey' | 'queryFn'>,
 ) {
   const { get, useQuery } = useApi();
-  const params = useFilterParams(websiteId);
+  const filterParams = useFilterParams(websiteId);
 
-  return useQuery({
+  return useQuery<WebsitePageviewsData>({
-    queryKey: ['websites:pageviews', { websiteId, ...params, compare }],
+    queryKey: ['websites:pageviews', { websiteId, compareMode, ...filterParams }],
-    queryFn: () => get(`/websites/${websiteId}/pageviews`, { ...params, compare }),
+    queryFn: () => get(`/websites/${websiteId}/pageviews`, { compareMode, ...filterParams }),
     enabled: !!websiteId,
     ...options,
   });

src/components/hooks/queries/useWebsiteStatsQuery.ts

@@ -1,15 +1,31 @@
+import { UseQueryOptions } from '@tanstack/react-query';
 import { useApi } from '../useApi';
 import { useFilterParams } from '../useFilterParams';
 
+export interface WebsiteStatsData {
+  pageviews: number;
+  visitors: number;
+  visits: number;
+  bounces: number;
+  totaltime: number;
+  previous: {
+    pageviews: number;
+    visitors: number;
+    visits: number;
+    bounces: number;
+    totaltime: number;
+  };
+}
+
 export function useWebsiteStatsQuery(
   websiteId: string,
   compare?: string,
-  options?: { [key: string]: string },
+  options?: UseQueryOptions<WebsiteStatsData, Error, WebsiteStatsData>,
 ) {
   const { get, useQuery } = useApi();
   const params = useFilterParams(websiteId);
 
-  return useQuery({
+  return useQuery<WebsiteStatsData>({
     queryKey: ['websites:stats', { websiteId, ...params, compare }],
     queryFn: () => get(`/websites/${websiteId}/stats`, { ...params, compare }),
     enabled: !!websiteId,

src/components/input/DateFilter.tsx

@@ -100,13 +100,13 @@ export function DateFilter({
   };
 
   return (
-    <Row width="200px">
+    <Row width="280px">
       <Select
         value={value}
         placeholder={formatMessage(labels.selectDate)}
         onChange={handleChange}
         renderValue={renderValue}
-        popoverProps={{ placement: 'top', style: { width: 200 } }}
+        popoverProps={{ placement: 'bottom' }}
       >
         {options.map(({ label, value, divider }: any) => {
           return (

src/components/metrics/EventData.tsx

@@ -0,0 +1,22 @@
+import { Grid, Column, Text, Label } from '@umami/react-zen';
+import { useEventDataQuery } from '@/components/hooks';
+import { LoadingPanel } from '@/components/common/LoadingPanel';
+
+export function EventData({ websiteId, eventId }: { websiteId: string; eventId: string }) {
+  const { data, isLoading, error } = useEventDataQuery(websiteId, eventId);
+
+  return (
+    <LoadingPanel isLoading={isLoading} error={error}>
+      <Grid columns="1fr 1fr" gap="5">
+        {data?.map(({ dataKey, stringValue }) => {
+          return (
+            <Column key={dataKey}>
+              <Label>{dataKey}</Label>
+              <Text>{stringValue}</Text>
+            </Column>
+          );
+        })}
+      </Grid>
+    </LoadingPanel>
+  );
+}

src/components/metrics/LanguagesTable.tsx

@@ -1,13 +1,9 @@
 import { MetricsTable, MetricsTableProps } from './MetricsTable';
-import { percentFilter } from '@/lib/filters';
 import { useLocale } from '@/components/hooks';
 import { useMessages } from '@/components/hooks';
 import { useFormat } from '@/components/hooks';
 
-export function LanguagesTable({
+export function LanguagesTable(props: MetricsTableProps) {
-  onDataLoad,
-  ...props
-}: { onDataLoad: (data: any) => void } & MetricsTableProps) {
   const { formatMessage, labels } = useMessages();
   const { locale } = useLocale();
   const { formatLanguage } = useFormat();
@@ -22,7 +18,6 @@ export function LanguagesTable({
       title={formatMessage(labels.languages)}
       type="language"
       metric={formatMessage(labels.visitors)}
-      onDataLoad={data => onDataLoad?.(percentFilter(data))}
       renderLabel={renderLabel}
       searchFormattedValues={true}
     />

src/components/metrics/MetricsBar.tsx

@@ -1,22 +1,14 @@
 import { ReactNode } from 'react';
-import { Grid } from '@umami/react-zen';
+import { Grid, GridProps } from '@umami/react-zen';
-import { LoadingPanel } from '@/components/common/LoadingPanel';
 
-export interface MetricsBarProps {
+export interface MetricsBarProps extends GridProps {
-  isLoading?: boolean;
-  isFetched?: boolean;
-  error?: Error;
   children?: ReactNode;
 }
 
-export function MetricsBar({ children, isLoading, isFetched, error }: MetricsBarProps) {
+export function MetricsBar({ children, ...props }: MetricsBarProps) {
   return (
-    <LoadingPanel isLoading={isLoading} isFetched={isFetched} error={error}>
+    <Grid columns="repeat(auto-fit, minmax(200px, 1fr))" gap {...props}>
-      {!isLoading && !error && isFetched && (
+      {children}
-        <Grid columns="repeat(auto-fit, minmax(200px, 1fr))" width="100%" gap>
+    </Grid>
-          {children}
-        </Grid>
-      )}
-    </LoadingPanel>
   );
 }

src/components/metrics/MetricsTable.tsx

@@ -1,12 +1,12 @@
 import { ReactNode, useMemo, useState } from 'react';
-import { Loading, Icon, Text, SearchField, Row, Column } from '@umami/react-zen';
+import { Icon, Text, SearchField, Row, Column } from '@umami/react-zen';
-import { ErrorMessage } from '@/components/common/ErrorMessage';
 import { LinkButton } from '@/components/common/LinkButton';
 import { DEFAULT_ANIMATION_DURATION } from '@/lib/constants';
 import { percentFilter } from '@/lib/filters';
 import { useNavigation, useWebsiteMetricsQuery, useMessages, useFormat } from '@/components/hooks';
 import { Arrow } from '@/components/icons';
 import { ListTable, ListTableProps } from './ListTable';
+import { LoadingPanel } from '@/components/common/LoadingPanel';
 
 export interface MetricsTableProps extends ListTableProps {
   websiteId: string;
@@ -15,7 +15,6 @@ export interface MetricsTableProps extends ListTableProps {
   dataFilter?: (data: any) => any;
   limit?: number;
   delay?: number;
-  onDataLoad?: (data: any) => void;
   onSearch?: (search: string) => void;
   allowSearch?: boolean;
   searchFormattedValues?: boolean;
@@ -30,7 +29,6 @@ export function MetricsTable({
   className,
   dataFilter,
   limit,
-  onDataLoad,
   delay = null,
   allowSearch = false,
   searchFormattedValues = false,
@@ -44,12 +42,11 @@ export function MetricsTable({
   const { renderUrl } = useNavigation();
   const { formatMessage, labels } = useMessages();
 
-  const { data, isLoading, isFetched, error } = useWebsiteMetricsQuery(
+  const { data, isLoading, isFetching, error } = useWebsiteMetricsQuery(
     websiteId,
     { type, limit, search: searchFormattedValues ? undefined : search, ...params },
     {
       retryDelay: delay || DEFAULT_ANIMATION_DURATION,
-      onDataLoad,
     },
   );
 
@@ -84,25 +81,25 @@ export function MetricsTable({
 
   return (
     <Column gap="3" justifyContent="space-between">
-      {error && <ErrorMessage />}
+      <LoadingPanel data={data} isFetching={isFetching} isLoading={isLoading} error={error}>
-      <Row alignItems="center" justifyContent="space-between">
+        <Row alignItems="center" justifyContent="space-between">
-        {allowSearch && <SearchField value={search} onSearch={setSearch} delay={300} />}
+          {allowSearch && <SearchField value={search} onSearch={setSearch} delay={300} />}
-        {children}
+          {children}
-      </Row>
+        </Row>
-      {data && !error && (
+        {data && (
-        <ListTable {...(props as ListTableProps)} data={filteredData} className={className} />
+          <ListTable {...(props as ListTableProps)} data={filteredData} className={className} />
-      )}
-      {!data && isLoading && !isFetched && <Loading icon="dots" />}
-      <Row justifyContent="center">
-        {showMore && data && !error && limit && (
-          <LinkButton href={renderUrl({ view: type })} variant="quiet">
-            <Text>{formatMessage(labels.more)}</Text>
-            <Icon size="sm">
-              <Arrow />
-            </Icon>
-          </LinkButton>
         )}
-      </Row>
+        <Row justifyContent="center">
+          {showMore && data && !error && limit && (
+            <LinkButton href={renderUrl({ view: type })} variant="quiet">
+              <Text>{formatMessage(labels.more)}</Text>
+              <Icon size="sm">
+                <Arrow />
+              </Icon>
+            </LinkButton>
+          )}
+        </Row>
+      </LoadingPanel>
     </Column>
   );
 }

src/lib/types.ts

@@ -1,4 +1,5 @@
 import { Dispatch, SetStateAction } from 'react';
+import { UseQueryOptions } from '@tanstack/react-query';
 import {
   COLLECTION_TYPE,
   DATA_TYPE,
@@ -208,3 +209,5 @@ export interface InputItem {
   icon: any;
   seperator?: boolean;
 }
+
+export type ReactQueryOptions<T> = Omit<UseQueryOptions<T, Error, T>, 'queryKey' | 'queryFn'>;

src/queries/sql/events/getEventData.ts

@@ -0,0 +1,57 @@
+import { EventData } from '@/generated/prisma';
+import prisma from '@/lib/prisma';
+import clickhouse from '@/lib/clickhouse';
+import { CLICKHOUSE, PRISMA, runQuery } from '@/lib/db';
+
+export async function getEventData(...args: [eventId: string]): Promise<EventData[]> {
+  return runQuery({
+    [PRISMA]: () => relationalQuery(...args),
+    [CLICKHOUSE]: () => clickhouseQuery(...args),
+  });
+}
+
+async function relationalQuery(eventId: string) {
+  const { rawQuery } = prisma;
+
+  return rawQuery(
+    `
+    select website_id as websiteId,
+       session_id as sessionId,
+       event_id as eventId,
+       url_path as urlPath,
+       event_name as eventName,
+       data_key as dataKey,
+       string_value as stringValue,
+       number_value as numberValue,
+       date_value as dateValue,
+       data_type as dataType,
+       created_at as createdAt
+    from event_data
+    where event_id = {{eventId::uuid}}
+    `,
+    { eventId },
+  );
+}
+
+async function clickhouseQuery(eventId: string): Promise<EventData[]> {
+  const { rawQuery } = clickhouse;
+
+  return rawQuery(
+    `
+      select website_id as websiteId,
+        session_id as sessionId,
+        event_id as eventId,
+        url_path as urlPath,
+        event_name as eventName,
+        data_key as dataKey,
+        string_value as stringValue,
+        number_value as numberValue,
+        date_value as dateValue,
+        data_type as dataType,
+        created_at as createdAt
+      from event_data
+      where event_id = {eventId:UUID}
+    `,
+    { eventId },
+  );
+}

src/queries/sql/getWebsiteStats.ts

@@ -117,5 +117,5 @@ async function clickhouseQuery(
     `;
   }
 
-  return rawQuery(sql, params);
+  return rawQuery(sql, params).then(result => result?.[0]);
 }