Add analytics data to CoursePlan route (#607)

* Create analytics container and add it to route file (copied from old branch)

* Get newest doc to display as json

* Pretty print json

* Fix lint and type checks

* Require auth to access route

* Style page if no data shown

* Add timestamp of last analytics run

* Remove accidental commit

* Bug fix for non-cp users

* Refactor analytics retrieval to global-firestore-data

* Optimize code by only retrieving newest document from collection (and adding timestamp field)

* Change timestamp to date type

* Remove null check, add comment

src/containers/Analytics.vue

@@ -0,0 +1,94 @@
+<template>
+  <div>
+    <div class="body-container" :class="{ 'no-data': !hasData() }">
+      <top-bar />
+      <div class="timestamp" v-if="hasData()">Data last retrieved at: {{ analyticsTimestamp }}</div>
+      <pre class="analytics" v-if="hasData()">{{ analyticsData }}</pre>
+      <div class="back_to_home">
+        <a class="back_to_home_link" href="/login">Back to home</a>
+      </div>
+      <custom-footer />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import CustomFooter from '@/components/Footer.vue';
+import TopBar from '@/components/TopBar.vue';
+import { retrieveAnalytics } from '@/global-firestore-data';
+
+export default defineComponent({
+  components: { CustomFooter, TopBar },
+  mounted() {
+    this.retrieveData();
+  },
+  data() {
+    return {
+      analyticsData: '',
+      analyticsTimestamp: '',
+    };
+  },
+  methods: {
+    async retrieveData() {
+      const analyticsObject = await retrieveAnalytics();
+      this.analyticsData = analyticsObject.data;
+      this.analyticsTimestamp = analyticsObject.timestamp;
+    },
+    hasData() {
+      return this.analyticsData.length > 2;
+    },
+  },
+});
+</script>
+
+<style scoped lang="scss">
+.no-data {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.back_to_home {
+  font-size: 32px;
+  vertical-align: middle;
+  text-align: center;
+  color: #7b7d7e;
+  margin-bottom: 10rem;
+  margin-top: 6rem;
+  height: 100px;
+  @media (max-width: 1154px) {
+    margin-bottom: 3rem;
+  }
+  @media (max-width: 800px) {
+    margin-top: 8%;
+    font-size: 8vw;
+    margin-bottom: 0;
+  }
+}
+a.back_to_home_link {
+  color: #7b7d7e;
+}
+.body-container {
+  min-height: 100vh;
+}
+
+.timestamp {
+  font-size: 16px;
+  padding: 3.75rem 0 0 6.5rem;
+  margin-bottom: 1rem;
+
+  @media (max-width: 1154px) {
+    padding: 0 0 0 3.125rem;
+  }
+}
+
+.analytics {
+  font-size: 14px;
+  padding: 0 0 0 6.5rem;
+
+  @media (max-width: 1154px) {
+    padding: 0 0 0 3.125rem;
+  }
+}
+</style>

src/firebase-frontend-config.ts

@@ -67,3 +67,7 @@ export const uniqueIncrementerCollection = db
 export const onboardingDataCollection = db
   .collection('user-onboarding-data')
   .withConverter(getTypedFirestoreDataConverter<FirestoreOnboardingUserData>());
+
+export const trackUsersCollection = db
+  .collection('track-users')
+  .withConverter(getTypedFirestoreDataConverter<FirestoreTrackUsersData>());

src/global-firestore-data/analytics.ts

@@ -0,0 +1,33 @@
+import { trackUsersCollection } from '../firebase-frontend-config';
+
+type AnalyticsData = {
+  readonly data: string;
+  readonly timestamp: string;
+};
+
+const retrieveAnalytics = (): Promise<AnalyticsData> =>
+  trackUsersCollection
+    .orderBy('timestamp', 'desc')
+    .limit(1)
+    .get()
+    .then(querySnapshot => {
+      let newestDocData = {};
+      let newestDocDate = new Date(0);
+      querySnapshot.forEach(doc => {
+        const isoTimestamp = doc.id;
+        const date = new Date(isoTimestamp);
+        if (date.getTime() > newestDocDate.getTime()) {
+          newestDocDate = date;
+          newestDocData = doc.data();
+        }
+      });
+
+      const output = JSON.stringify(newestDocData, null, 2);
+
+      return {
+        data: output,
+        timestamp: newestDocDate.toLocaleString(),
+      };
+    });
+
+export default retrieveAnalytics;

src/global-firestore-data/index.ts

@@ -30,3 +30,5 @@ export {
   updateRequirementChoices,
   deleteCourseFromRequirementChoices,
 } from './override-fulfillment-choices';
+
+export { default as retrieveAnalytics } from './analytics';

src/requirements/admin/track-users.ts

@@ -22,6 +22,8 @@ function seasonToMonth(season: string) {
   }
 }
 
+// true if a semester is an "old semester," i.e. if a semester on CoursePlan has already passed in real life
+// the idea is that old semesters and new semesters represent whether users are planning in the future or just uploading courses
 function isOld(semester: FirestoreSemester) {
   const currentTime = new Date();
   const month = currentTime.getMonth() + 1;
@@ -247,15 +249,17 @@ async function trackUsers() {
     };
   });
 
+  // Create a document in collection with current timestamp
+  const date = new Date(Date.now());
+  const docId = date.toISOString();
+
   const outputData: FirestoreTrackUsersData = {
     nameData,
     semesterData,
     onboardingData,
+    timestamp: date,
   };
 
-  // Create a document in collection with current timestamp
-  const date = new Date(Date.now());
-  const docId = date.toISOString();
   trackUsersCollection.doc(docId).set(outputData);
 }
 

src/router/index.ts

@@ -4,6 +4,7 @@ import Login from '@/containers/Login.vue';
 import Dashboard from '@/containers/Dashboard.vue';
 import Page404 from '@/containers/404.vue';
 import Policy from '@/containers/Policy.vue';
+import Analytics from '@/containers/Analytics.vue';
 import store from '../store';
 
 const router: Router = createRouter({
@@ -27,6 +28,14 @@ const router: Router = createRouter({
       name: 'Policy',
       component: Policy,
     },
+    {
+      path: '/analytics',
+      name: 'Analytics',
+      component: Analytics,
+      meta: {
+        requiresAuth: true,
+      },
+    },
     {
       path: '/:pathMatch(.*)*',
       name: '404',

src/user-data.d.ts

@@ -91,6 +91,7 @@ type FirestoreTrackUsersData = {
   nameData: FirestoreTrackUsersNameData;
   semesterData: FirestoreTrackUsersSemesterData;
   onboardingData: FirestoreTrackUsersOnboardingData;
+  timestamp: Date;
 };
 
 type FirestoreTrackUsersNameData = {