From f7a7c22f93ba6f437298f0bcb9abfb5d496b1b5b Mon Sep 17 00:00:00 2001
From: jkrumm <jkrumm@pm.me>
Date: Mon, 22 Jan 2024 19:23:14 +0100
Subject: [PATCH] feat(analytics): behaviour in analytics

---
 package-lock.json                          |  7 ++++++
 package.json                               |  1 +
 src/pages/analytics.tsx                    | 28 +++++++++++++++++-----
 src/server/api/routers/analytics.router.ts |  5 ++--
 tailwind.config.ts                         |  2 +-
 5 files changed, 34 insertions(+), 9 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 884f450..bee2a63 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -70,6 +70,7 @@
         "prettier": "^3.2.4",
         "prettier-plugin-tailwindcss": "^0.5.11",
         "release-it": "^17.0.1",
+        "tailwind-scrollbar-hide": "^1.1.7",
         "tailwindcss": "^3.4.1",
         "typescript": "^5.3.3"
       }
@@ -14105,6 +14106,12 @@
       "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
       "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew=="
     },
+    "node_modules/tailwind-scrollbar-hide": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/tailwind-scrollbar-hide/-/tailwind-scrollbar-hide-1.1.7.tgz",
+      "integrity": "sha512-X324n9OtpTmOMqEgDUEA/RgLrNfBF/jwJdctaPZDzB3mppxJk7TLIDmOreEDm1Bq4R9LSPu4Epf8VSdovNU+iA==",
+      "dev": true
+    },
     "node_modules/tailwindcss": {
       "version": "3.4.1",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.1.tgz",
diff --git a/package.json b/package.json
index e10e290..fa9f90f 100644
--- a/package.json
+++ b/package.json
@@ -86,6 +86,7 @@
     "prettier": "^3.2.4",
     "prettier-plugin-tailwindcss": "^0.5.11",
     "release-it": "^17.0.1",
+    "tailwind-scrollbar-hide": "^1.1.7",
     "tailwindcss": "^3.4.1",
     "typescript": "^5.3.3"
   },
diff --git a/src/pages/analytics.tsx b/src/pages/analytics.tsx
index e3e6175..1080dd1 100644
--- a/src/pages/analytics.tsx
+++ b/src/pages/analytics.tsx
@@ -64,7 +64,7 @@ const Analytics = () => {
       <Hero />
       <main className="flex flex-col items-center justify-center">
         <div className="container max-w-[1200px] gap-12 px-4 pb-28 pt-8">
-          <h1>Site Traffic</h1>
+          <h1>Traffic</h1>
           <SimpleGrid
             cols={{
               xs: 2,
@@ -83,7 +83,7 @@ const Analytics = () => {
               valueAppend="%"
             />
           </SimpleGrid>
-          <h1>Vote analytics</h1>
+          <h1>Votes</h1>
           <SimpleGrid
             cols={{
               sm: 2,
@@ -119,15 +119,29 @@ const Analytics = () => {
               value={votes.avg_duration_per_vote}
             />
           </SimpleGrid>
-          <h1>Historical data</h1>
+          <h1>Historical</h1>
           <PageViewChart historical={historical} />
-          <h1 className="mb-2 mt-[60px]">Location data</h1>
+          <h1 className="pt-8">Behaviour</h1>
           <SimpleGrid
             cols={{
               sm: 1,
               md: 3,
             }}
             spacing="md"
+            className="pb-8"
+          >
+            <AnalyticsCard headline={'Events'} data={behaviour.routes} />
+            <AnalyticsCard headline={'Join'} data={behaviour.events} />
+            <AnalyticsCard headline={'Rooms'} data={behaviour.rooms} />
+          </SimpleGrid>
+          <h1>Location</h1>
+          <SimpleGrid
+            cols={{
+              sm: 1,
+              md: 3,
+            }}
+            spacing="md"
+            className="pb-8"
           >
             <AnalyticsCard
               headline={'Countries'}
@@ -142,13 +156,14 @@ const Analytics = () => {
               data={location_and_user_agent.city}
             />
           </SimpleGrid>
-          <h1 className="mb-2 mt-[60px]">User Agent data</h1>
+          <h1>User Agent</h1>
           <SimpleGrid
             cols={{
               sm: 1,
               md: 3,
             }}
             spacing="md"
+            className="pb-8"
           >
             <AnalyticsCard
               headline={'Operating Systems'}
@@ -178,6 +193,7 @@ export const AnalyticsCard = ({
 }) => {
   const sortedData = Object.entries(data)
     .sort((a, b) => b[1] - a[1]) // Sort by value in descending order
+    .slice(0, 30) // Get the first 30 entries
     .map(([name, value]) => ({ name, value })); // Map to objects with name and value
 
   const highestValue = sortedData[0]?.value ?? 0; // Get the highest value
@@ -189,7 +205,7 @@ export const AnalyticsCard = ({
           {headline}
         </Title>
       </Card.Section>
-      <Card.Section className="px-2">
+      <Card.Section className="px-2 overflow-y-scroll max-h-[400px] scrollbar-hide">
         {sortedData.map((item, index) => (
           <Group key={index} className="relative py-2">
             <div
diff --git a/src/server/api/routers/analytics.router.ts b/src/server/api/routers/analytics.router.ts
index bf26881..1d2c244 100644
--- a/src/server/api/routers/analytics.router.ts
+++ b/src/server/api/routers/analytics.router.ts
@@ -31,9 +31,10 @@ export const analyticsRouter = createTRPCRouter({
     const countryCounts: Record<string, number> = {};
     Object.entries(analytics.location_and_user_agent.country).forEach(
       ([country, count]) => {
-        const countryName =
+        const countryName = `${country} - ${
           countryRegions.find((c) => c.countryShortCode === country)
-            ?.countryName ?? country;
+            ?.countryName ?? country
+        }`;
         countryCounts[countryName] = count;
       },
     );
diff --git a/tailwind.config.ts b/tailwind.config.ts
index f6e0dde..19527c9 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -6,5 +6,5 @@ export default {
   theme: {
     extend: {},
   },
-  plugins: [],
+  plugins: [require('tailwind-scrollbar-hide')],
 } satisfies Config;