Refactored realtime.

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

@@ -1,4 +1,5 @@
 'use client';
+import { firstBy } from 'thenby';
 import { Grid, GridRow } from 'components/layout/Grid';
 import Page from 'components/layout/Page';
 import RealtimeChart from 'components/metrics/RealtimeChart';
@@ -10,6 +11,7 @@ import RealtimeUrls from './RealtimeUrls';
 import RealtimeCountries from './RealtimeCountries';
 import WebsiteHeader from '../WebsiteHeader';
 import WebsiteProvider from '../WebsiteProvider';
+import { percentFilter } from 'lib/filters';
 
 export function WebsiteRealtimePage({ websiteId }) {
   const { data, isLoading, error } = useRealtime(websiteId);
@@ -18,6 +20,12 @@ export function WebsiteRealtimePage({ websiteId }) {
     return <Page isLoading={isLoading} error={error} />;
   }
 
+  const countries = percentFilter(
+    Object.keys(data.countries)
+      .map(key => ({ x: key, y: data.countries[key] }))
+      .sort(firstBy('y', -1)),
+  );
+
   return (
     <WebsiteProvider websiteId={websiteId}>
       <WebsiteHeader websiteId={websiteId} />
@@ -29,8 +37,8 @@ export function WebsiteRealtimePage({ websiteId }) {
           <RealtimeLog data={data} />
         </GridRow>
         <GridRow columns="one-two">
-          <RealtimeCountries data={data?.countries} />
-          <WorldMap data={data?.countries} />
+          <RealtimeCountries data={countries} />
+          <WorldMap data={countries} />
         </GridRow>
       </Grid>
     </WebsiteProvider>