feat(analytics): adjusted analytics page to new data model

analytics/app.py

@@ -3,6 +3,7 @@
 from dotenv import load_dotenv
 
 from flask import Flask, request, abort
+from flask_wtf.csrf import CSRFProtect
 
 from scripts.calc_behaviour import calc_behaviour
 from scripts.calc_historical import calc_historical
@@ -14,6 +15,7 @@
 from util.number_util import r
 
 app = Flask(__name__)
+csrf = CSRFProtect(app)
 
 load_dotenv()
 ANALYTICS_SECRET_TOKEN = os.getenv("ANALYTICS_SECRET_TOKEN")
@@ -36,27 +38,27 @@ def run_script():
         logger.error(f"Script update_read_model failed", {"error": e})
 
     try:
-        results["calc_traffic"] = calc_traffic()
+        results["traffic"] = calc_traffic()
     except Exception as e:
         logger.error(f"Script calc_traffic failed", {"error": e})
 
     try:
-        results["calc_votes"] = calc_votes()
+        results["votes"] = calc_votes()
     except Exception as e:
         logger.error(f"Script calc_votes failed", {"error": e})
 
     try:
-        results["calc_behaviour"] = calc_behaviour()
+        results["behaviour"] = calc_behaviour()
     except Exception as e:
         logger.error(f"Script calc_behaviour failed", {"error": e})
 
     try:
-        results["calc_historical"] = calc_historical()
+        results["historical"] = calc_historical()
     except Exception as e:
         logger.error(f"Script calc_historical failed", {"error": e})
 
     try:
-        results["calc_location_and_user_agent"] = calc_location_and_user_agent()
+        results["location_and_user_agent"] = calc_location_and_user_agent()
     except Exception as e:
         logger.error(f"Script calc_location_and_user_agent failed", {"error": e})
 

analytics/scripts/calc_behaviour.py

@@ -8,7 +8,7 @@ def calc_behaviour():
     df_page_views = pd.read_parquet("./data/fpp_page_views.parquet", columns=["route", "room_id"])
 
     # amount of page views for each route
-    page_views = df_page_views.groupby("route", observed=False).size().to_dict()
+    routes = df_page_views.groupby("route", observed=False).size().to_dict()
 
     # load event data with column 'event'
     df_events = pd.read_parquet("./data/fpp_events.parquet", columns=["event"])
@@ -26,12 +26,12 @@ def calc_behaviour():
     df_votes = df_votes.join(df_rooms, on="room_id", how="left")
 
     # amount of votes for each room
-    votes = df_votes.groupby("name").size().to_dict()
+    rooms = df_votes.groupby("name").size().to_dict()
 
     behaviour = {
-        "page_views": page_views,
+        "routes": routes,
         "events": events,
-        "votes": votes
+        "rooms": rooms
     }
 
     logger.debug("Behaviour calculated", behaviour)

analytics/scripts/calc_historical.py

@@ -22,7 +22,7 @@ def calc_historical():
     historical = []
     for date in date_range:
         # find the amount of users created on this date
-        users = len(df_users[df_users["created_at"].dt.date == date.date()])
+        new_users = len(df_users[df_users["created_at"].dt.date == date.date()])
 
         # find the amount of page views on this date
         page_views = len(df_page_views[df_page_views["viewed_at"].dt.date == date.date()])
@@ -36,7 +36,7 @@ def calc_historical():
         # add the date and the amount of users, page views and estimations to the list
         historical.append({
             "date": date,
-            "users": users,
+            "new_users": new_users,
             "page_views": page_views,
             "estimations": estimations
         })

analytics/scripts/calc_location_and_user_agent.py

@@ -16,17 +16,21 @@ def calc_location_and_user_agent():
 
     country = df_users.groupby("country", observed=False).size().to_dict()
 
-    region = df_users.groupby("region", observed=False).size().to_dict()
+    # find the country of each region
+    country_region = df_users.groupby(["country", "region"], observed=False).size().reset_index(name="count")
+    country_region = country_region.to_dict(orient="records")
 
-    city = df_users.groupby("city", observed=False).size().to_dict()
+    # find the country of each city
+    country_city = df_users.groupby(["country", "city"], observed=False).size().reset_index(name="count")
+    country_city = country_city.to_dict(orient="records")
 
     location_and_user_agent = {
         "device": device,
         "os": os,
         "browser": browser,
         "country": country,
-        "region": region,
-        "city": city
+        "country_region": country_region,
+        "country_city": country_city
     }
 
     logger.debug("Location and user agent calculated", location_and_user_agent)

src/components/analytics/page-view-chart.tsx

@@ -4,11 +4,18 @@ import dynamic from 'next/dynamic';
 
 import { type ApexOptions } from 'apexcharts';
 
-import { type PageViews } from 'fpp/server/api/routers/tracking.router';
-
 const Chart = dynamic(() => import('react-apexcharts'), { ssr: false });
 
-export const PageViewChart = ({ pageViews }: { pageViews: PageViews }) => {
+export const PageViewChart = ({
+  historical,
+}: {
+  historical: {
+    date: string;
+    estimations: number;
+    page_views: number;
+    new_users: number;
+  }[];
+}) => {
   const [options] = useState<ApexOptions>({
     chart: {
       id: 'basic-bar',
@@ -40,25 +47,25 @@ export const PageViewChart = ({ pageViews }: { pageViews: PageViews }) => {
     {
       name: 'Total page views',
       color: '#1971c2',
-      data: pageViews.totalViews.map((pageView) => ({
-        x: pageView.date,
-        y: pageView.count,
+      data: historical.map((obj) => ({
+        x: obj.date,
+        y: obj.page_views,
       })),
     },
     {
       name: 'Unique visitors',
       color: '#2F9E44',
-      data: pageViews.uniqueViews.map((pageView) => ({
-        x: pageView.date,
-        y: pageView.count,
+      data: historical.map((obj) => ({
+        x: obj.date,
+        y: obj.new_users,
       })),
     },
     {
       name: 'Total estimations',
       color: '#F08C00',
-      data: pageViews.totalVotes.map((pageView) => ({
-        x: pageView.date,
-        y: pageView.count,
+      data: historical.map((obj) => ({
+        x: obj.date,
+        y: obj.estimations,
       })),
     },
   ]);

src/components/layout/footer.tsx

@@ -3,10 +3,10 @@ import Link from 'next/link';
 import { useConfigStore } from 'fpp/store/config.store';
 
 const links = [
-  // {
-  //   url: '/analytics',
-  //   title: 'Analytics',
-  // },
+  {
+    url: '/analytics',
+    title: 'Analytics',
+  },
   {
     url: '/contact',
     title: 'Contact',

src/constants/logging.constant.ts

@@ -9,6 +9,7 @@ export const logMsg = {
 export const logEndpoint = {
   TRACK_PAGE_VIEW: 'TRACK_PAGE_VIEW',
   TRACK_EVENT: 'TRACK_EVENT',
+  GET_ANALYTICS: 'GET_ANALYTICS',
   TRACK_ESTIMATION: 'TRACK_ESTIMATION',
   ABLY_TOKEN: 'ABLY_TOKEN',
   GET_ROOMS: 'GET_ROOMS',

src/env.mjs

@@ -18,6 +18,8 @@ export const env = createEnv({
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
     NEXT_PUBLIC_SENTRY_DSN: z.string().url(),
+    ANALYTICS_SECRET_TOKEN: z.string(),
+    ANALYTICS_URL: z.string().url(),
     UPSTASH_REDIS_REST_URL: z.string().url(),
     UPSTASH_REDIS_REST_TOKEN: z.string(),
     UPSTASH_REDIS_REST_URL_ROOM_STATE: z.string().url(),
@@ -47,6 +49,8 @@ export const env = createEnv({
     NEXT_PUBLIC_API_ROOT: process.env.NEXT_PUBLIC_API_ROOT,
     VERCEL_GIT_COMMIT_SHA: process.env.VERCEL_GIT_COMMIT_SHA,
     NEXT_PUBLIC_NODE_ENV: process.env.NODE_ENV,
+    ANALYTICS_SECRET_TOKEN: process.env.ANALYTICS_SECRET_TOKEN,
+    ANALYTICS_URL: process.env.ANALYTICS_URL,
     UPSTASH_REDIS_REST_URL: process.env.UPSTASH_REDIS_REST_URL,
     UPSTASH_REDIS_REST_TOKEN: process.env.UPSTASH_REDIS_REST_TOKEN,
     UPSTASH_REDIS_REST_URL_ROOM_STATE: