Fixed issue with realtime page rendering.

components/metrics/RealtimeHeader.js

@@ -9,11 +9,14 @@ 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 },
+    {
+      label: <FormattedMessage id="label.all-websites" defaultMessage="All websites" />,
+      value: null,
+    },
   ].concat(
-    websites.map(({ name, id }, index) => ({
+    websites.map(({ name, websiteUuid }, index) => ({
       label: name,
-      value: id,
+      value: websiteUuid,
       divider: index === 0,
     })),
   );

components/pages/RealtimeDashboard.js

@@ -32,7 +32,7 @@ export default function RealtimeDashboard() {
   const { locale } = useLocale();
   const countryNames = useCountryNames(locale);
   const [data, setData] = useState();
-  const [websiteId, setWebsiteId] = useState(0);
+  const [websiteUuid, setWebsiteUuid] = useState(null);
   const { data: init, loading } = useFetch('/realtime/init');
   const { data: updates } = useFetch('/realtime/update', {
     params: { start_at: data?.timestamp },
@@ -50,17 +50,18 @@ export default function RealtimeDashboard() {
     if (data) {
       const { pageviews, sessions, events } = data;
 
-      if (websiteId) {
+      if (websiteUuid) {
+        const { id } = init.websites.find(n => n.websiteUuid === websiteUuid);
         return {
-          pageviews: filterWebsite(pageviews, websiteId),
-          sessions: filterWebsite(sessions, websiteId),
-          events: filterWebsite(events, websiteId),
+          pageviews: filterWebsite(pageviews, id),
+          sessions: filterWebsite(sessions, id),
+          events: filterWebsite(events, id),
         };
       }
     }
 
     return data;
-  }, [data, websiteId]);
+  }, [data, websiteUuid]);
 
   const countries = useMemo(() => {
     if (realtimeData?.sessions) {
@@ -117,25 +118,20 @@ export default function RealtimeDashboard() {
     <Page>
       <RealtimeHeader
         websites={websites}
-        websiteId={websiteId}
+        websiteId={websiteUuid}
         data={{ ...realtimeData, countries }}
-        onSelect={setWebsiteId}
+        onSelect={setWebsiteUuid}
       />
       <div className={styles.chart}>
-        <RealtimeChart
-          websiteId={websiteId}
-          data={realtimeData}
-          unit="minute"
-          records={REALTIME_RANGE}
-        />
+        <RealtimeChart data={realtimeData} unit="minute" records={REALTIME_RANGE} />
       </div>
       <GridLayout>
         <GridRow>
           <GridColumn xs={12} lg={4}>
-            <RealtimeViews websiteId={websiteId} data={realtimeData} websites={websites} />
+            <RealtimeViews websiteId={websiteUuid} data={realtimeData} websites={websites} />
           </GridColumn>
           <GridColumn xs={12} lg={8}>
-            <RealtimeLog websiteId={websiteId} data={realtimeData} websites={websites} />
+            <RealtimeLog websiteId={websiteUuid} data={realtimeData} websites={websites} />
           </GridColumn>
         </GridRow>
         <GridRow>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "umami",
-  "version": "1.39.1",
+  "version": "1.39.2",
   "description": "A simple, fast, privacy-focused alternative to Google Analytics.",
   "author": "Mike Cao <mike@mikecao.com>",
   "license": "MIT",

queries/analytics/stats/getRealtimeData.js

@@ -10,19 +10,19 @@ export async function getRealtimeData(websites, time) {
   ]);
 
   return {
-    pageviews: pageviews.map(({ pageviewId, ...props }) => ({
-      __id: `p${pageviewId}`,
-      pageviewId,
+    pageviews: pageviews.map(({ id, ...props }) => ({
+      __id: `p${id}`,
+      pageviewId: id,
       ...props,
     })),
-    sessions: sessions.map(({ sessionId, ...props }) => ({
-      __id: `s${sessionId}`,
-      sessionId,
+    sessions: sessions.map(({ id, ...props }) => ({
+      __id: `s${id}`,
+      sessionId: id,
       ...props,
     })),
-    events: events.map(({ eventId, ...props }) => ({
-      __id: `e${eventId}`,
-      eventId,
+    events: events.map(({ id, ...props }) => ({
+      __id: `e${id}`,
+      eventId: id,
       ...props,
     })),
     timestamp: Date.now(),