calculate and emit rank

lib/agent.ts

@@ -27,6 +27,7 @@ export type AgentRelease = {
   userAgent?: UserAgent | null
   releaseDate: Date
   usage: UsageFloat
+  rank: number
   currentVersion: MajorVersionStr
 }
 
@@ -45,6 +46,7 @@ export const getAgentReleaseInfo = (ua: string): AgentRelease => {
       version: '0',
       releaseDate: new Date(0),
       usage: 0,
+      rank: 0,
       currentVersion: '0',
     }
   }
@@ -53,14 +55,19 @@ export const getAgentReleaseInfo = (ua: string): AgentRelease => {
 
   const [lastReleaseVersion] = Object.entries(agentStats.release_date)
     .filter(([_, date]) => date !== null)
-    .toSorted(([versionA], [versionB]) => parseFloat(versionB) - parseFloat(versionA))[0]
+    .sort(([versionA], [versionB]) => parseFloat(versionB) - parseFloat(versionA))[0]
+
+  const versionRank = Object.entries(agentStats.usage_global)
+    .sort(([, usageA], [, usageB]) => usageB - usageA)
+    .findIndex(([v]) => v === version) + 1
 
   return {
     name,
     version,
     userAgent,
     releaseDate: epochToDate(agentStats.release_date[version]),
     usage: agentStats.usage_global[version],
+    rank: versionRank,
     currentVersion: lastReleaseVersion,
   }
 }

routes/index.tsx

@@ -123,7 +123,7 @@ const ReleaseDescription = ({ userAgent, releaseDate, name, version, usage }: Ag
 }
 
 const Home: FunctionalComponent<HomeProps> = ({ data }: PageProps) => {
-  const { source, releaseDate, userAgent } = data
+  const { source, userAgent } = data
 
   return (
     <div class='container mx-auto flex flex-col items-center justify-center max-w-sm xl:max-w-xl'>
@@ -147,6 +147,10 @@ const Home: FunctionalComponent<HomeProps> = ({ data }: PageProps) => {
       <div class='p-lg'>
         <MaybeKnownBrowserPreamble {...data} />
         <ReleaseDescription {...data} />
+
+        <p>
+          This is the {data.rank}th most popular version of {data.name} in the world.
+        </p>
       </div>
     </div>
   )