New analytics (#1483)

* [WIP] Transfer analytics to own branch

* code style changes

* Refactor country name conversion

* Clean up api and ssr for settings page

* refactor analytics into reusables

* Refactor chart tooltip and reset functionality

* Update dayjs import and formatTimestamp function

* Fix bug in login functionality

* Abstract data fetching

* Refactor analytics data formatting

* Refactor useFetchAllAnalytics function signature

* Refactor analytics processing functions

* Fix chart data in ChartDisplay.vue

* Refactor analytics pages

* Refactor delete labrinth.ts test types

* Fix import statement for dayjs and update usage of
unix function

* Fix dropdown select in ChartDisplay.vue and add
Analytics link in creations.vue

* Update chart colors in ChartDisplay.vue and
analytics.js

* Update defaultRanges in ChartDisplay.vue

* Add colors to chart

* Update legend position in ChartDisplay.vue

* Refactor color conversion functions in
analytics.js

* Bug fixes

* Use softer colors

* Import dayjs unix module for analytics.js

* Refactor chart tooltip generation

* Fix calculation of total value in generateTooltip
function

* Fix button-base styling in ChartDisplay.vue

* Adopt intl standard rather than iso-3166-1

* Add support for potential flags

* Analytics rebased

* fix cf pages

* now?

* try now

* now?

* Fix this time

* address rev

* Finish analytics

* fix api url

---------

Co-authored-by: Carter <safe@fea.st>

pages/[type]/[id].vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="$route.name.startsWith('type-id-settings')" class="normal-page">
+  <div v-if="route.name.startsWith('type-id-settings')" class="normal-page">
     <div class="normal-page__sidebar">
       <aside class="universal-card">
         <Breadcrumbs
@@ -75,6 +75,16 @@
           >
             <UsersIcon />
           </NavStackItem>
+          <h3>View</h3>
+          <NavStackItem
+            :link="`/${project.project_type}/${
+              project.slug ? project.slug : project.id
+            }/settings/analytics`"
+            label="Analytics"
+            chevron
+          >
+            <ChartIcon />
+          </NavStackItem>
           <h3>Upload</h3>
           <NavStackItem
             :link="`/${project.project_type}/${project.slug ? project.slug : project.id}/gallery`"
@@ -99,8 +109,8 @@
         :project="project"
         :versions="versions"
         :current-member="currentMember"
-        :is-settings="$route.name.startsWith('type-id-settings')"
-        :route-name="$route.name"
+        :is-settings="route.name.startsWith('type-id-settings')"
+        :route-name="route.name"
         :set-processing="setProcessing"
         :collapsed="collapsedChecklist"
         :toggle-collapsed="() => (collapsedChecklist = !collapsedChecklist)"
@@ -324,8 +334,8 @@
           :project="project"
           :versions="versions"
           :current-member="currentMember"
-          :is-settings="$route.name.startsWith('type-id-settings')"
-          :route-name="$route.name"
+          :is-settings="route.name.startsWith('type-id-settings')"
+          :route-name="route.name"
           :set-processing="setProcessing"
           :collapsed="collapsedChecklist"
           :toggle-collapsed="() => (collapsedChecklist = !collapsedChecklist)"
@@ -490,7 +500,7 @@
           <div class="featured-header">
             <h2 class="card-header">Featured versions</h2>
             <nuxt-link
-              v-if="$route.name !== 'type-id-versions' && (versions.length > 0 || currentMember)"
+              v-if="route.name !== 'type-id-versions' && (versions.length > 0 || currentMember)"
               :to="`/${project.project_type}/${
                 project.slug ? project.slug : project.id
               }/versions#all-versions`"
@@ -658,7 +668,7 @@
   </div>
 </template>
 <script setup>
-import { Promotion } from 'omorphia'
+import { Promotion, ChartIcon } from 'omorphia'
 import CalendarIcon from '~/assets/images/utils/calendar.svg'
 import ClearIcon from '~/assets/images/utils/clear.svg'
 import DownloadIcon from '~/assets/images/utils/download.svg'

pages/[type]/[id]/settings/analytics.vue

@@ -0,0 +1,34 @@
+<template>
+  <div>
+    <div class="universal-card">
+      <h2>Analytics</h2>
+
+      <p>
+        This page shows you the analytics for your project, <strong>{{ project.title }}</strong
+        >. You can see the number of downloads, page views and revenue earned for your project, as
+        well as the total downloads and page views for {{ project.title }} by country.
+      </p>
+    </div>
+
+    <ChartDisplay :projects="[props.project]" />
+  </div>
+</template>
+
+<script setup>
+import ChartDisplay from '~/components/ui/charts/ChartDisplay.vue'
+
+const props = defineProps({
+  project: {
+    type: Object,
+    default() {
+      return {}
+    },
+  },
+})
+</script>
+
+<style scoped lang="scss">
+.markdown-body {
+  margin-bottom: var(--gap-md);
+}
+</style>

pages/dashboard.vue

@@ -16,6 +16,9 @@
           <NavStackItem link="/dashboard/reports" label="Active reports">
             <ReportIcon />
           </NavStackItem>
+          <NavStackItem link="/dashboard/analytics" label="Analytics">
+            <ChartIcon />
+          </NavStackItem>
 
           <h3>Manage</h3>
           <NavStackItem v-if="true" link="/dashboard/projects" label="Projects">
@@ -33,6 +36,7 @@
   </div>
 </template>
 <script setup>
+import { ChartIcon } from 'omorphia'
 import NavStack from '~/components/ui/NavStack.vue'
 import NavStackItem from '~/components/ui/NavStackItem.vue'
 

pages/dashboard/analytics.vue

@@ -1,17 +1,24 @@
 <template>
   <div>
-    <section class="universal-card">
-      <h2>Analytics</h2>
-      <p>You found a secret!</p>
-      <nuxt-link to="/frog" class="goto-link"> Click here for fancy graphs! </nuxt-link>
-    </section>
+    <ChartDisplay :projects="projects ?? undefined" />
   </div>
 </template>
 
-<script>
-export default defineNuxtComponent({
-  head: {
-    title: 'Analytics - Modrinth',
-  },
+<script setup>
+import ChartDisplay from '~/components/ui/charts/ChartDisplay.vue'
+
+definePageMeta({
+  middleware: 'auth',
 })
+
+useHead({
+  title: 'Analytics - Modrinth',
+})
+
+const auth = await useAuth()
+const id = auth.value?.user?.id
+
+const { data: projects } = await useAsyncData(`user/${id}/projects`, () =>
+  useBaseFetch(`user/${id}/projects`)
+)
 </script>