From 7034fbae6c106117242ea30a724fa3f6bb04bb93 Mon Sep 17 00:00:00 2001
From: maciejpedzich <contact@maciejpedzi.ch>
Date: Wed, 6 Jul 2022 14:02:23 +0200
Subject: [PATCH] Create "Show Statistics" tab

---
 components/stats/FollowerGrowth.vue    | 103 +++++++++++++++++++
 components/stats/TrackRetention.vue    | 136 +++++++++++++++++++++++++
 pages/playlists/[playlistId]/stats.vue |   8 ++
 3 files changed, 247 insertions(+)
 create mode 100644 components/stats/FollowerGrowth.vue
 create mode 100644 components/stats/TrackRetention.vue
 create mode 100644 pages/playlists/[playlistId]/stats.vue

diff --git a/components/stats/FollowerGrowth.vue b/components/stats/FollowerGrowth.vue
new file mode 100644
index 0000000..15f8a8a
--- /dev/null
+++ b/components/stats/FollowerGrowth.vue
@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import { $fetch } from 'ohmyfetch';
+
+import ProgressSpinner from 'primevue/progressspinner';
+import Dropdown from 'primevue/dropdown';
+import Chart from 'primevue/chart';
+
+import { Snapshot } from '~~/models/snapshot';
+
+const route = useRoute();
+const playlistId = route.params.playlistId as string;
+
+const chartPeriodOptions = ['Last week', 'Last month'];
+const chartPeriod = useState('chartPeriod', () => 'Last week');
+
+const sinceDate = computed(() => {
+  const baseDate = new Date();
+
+  if (chartPeriod.value === 'Last week') {
+    baseDate.setDate(baseDate.getDate() - 7);
+  } else {
+    baseDate.setMonth(baseDate.getMonth() - 1);
+  }
+
+  return baseDate.toISOString();
+});
+
+const chartOptions = {
+  responsive: true,
+  plugins: {
+    legend: {
+      display: false
+    }
+  }
+};
+
+const dateFormatter = new Intl.DateTimeFormat('en-US', {
+  month: 'long',
+  day: 'numeric'
+});
+
+const { pending, error, data, refresh } = await useAsyncData(
+  `playlist-${playlistId}-follower-growth`,
+  async () => {
+    const snapshots = (
+      await $fetch<Snapshot[]>(
+        `/api/playlists/${playlistId}/snapshots?sinceDate=${sinceDate.value}`
+      )
+    ).reverse();
+
+    const labels = snapshots.map((snapshot) =>
+      dateFormatter.format(Date.parse(snapshot.dateCaptured))
+    );
+    const numFollowersData = snapshots.map(({ numFollowers }) => numFollowers);
+
+    return {
+      labels,
+      datasets: [
+        {
+          type: 'line',
+          label: 'Followers',
+          borderColor: '#90cd93',
+          data: numFollowersData
+        }
+      ]
+    };
+  },
+  { server: false }
+);
+
+watch(chartPeriod, async () => await refresh());
+</script>
+
+<template>
+  <NuxtLayout name="centered-content">
+    <ClientOnly>
+      <p class="mt-0 mb-3 text-lg">
+        Period:
+        <Dropdown
+          v-model="chartPeriod"
+          :options="chartPeriodOptions"
+          :disabled="pending"
+        />
+      </p>
+      <ProgressSpinner v-if="pending" />
+      <p v-else-if="error">
+        Something went wrong while fetching follwer growth data
+      </p>
+      <template v-else-if="data">
+        <Chart class="mt-3" type="line" :options="chartOptions" :data="data" />
+      </template>
+    </ClientOnly>
+  </NuxtLayout>
+</template>
+
+<style scoped>
+@media only screen and (min-width: 768px) {
+  :deep(div.p-chart) {
+    width: 100%;
+    padding: 0 10rem;
+  }
+}
+</style>
diff --git a/components/stats/TrackRetention.vue b/components/stats/TrackRetention.vue
new file mode 100644
index 0000000..2720bc0
--- /dev/null
+++ b/components/stats/TrackRetention.vue
@@ -0,0 +1,136 @@
+<script setup lang="ts">
+import { $fetch } from 'ohmyfetch';
+import { intervalToDuration, formatDuration } from 'date-fns';
+
+import ProgressSpinner from 'primevue/progressspinner';
+import DataTable from 'primevue/datatable';
+import Column from 'primevue/column';
+
+import { Cumulative } from '~~/models/cumulative';
+
+const route = useRoute();
+const playlistId = route.params.playlistId as string;
+
+const dateFormatter = new Intl.DateTimeFormat('en-US', {
+  year: 'numeric',
+  month: 'long',
+  day: 'numeric'
+});
+
+const formatDate = (date: string | null) =>
+  date ? dateFormatter.format(new Date(date)) : 'N/A';
+
+const displayRetentionText = (retention: number) => {
+  const durationObject = intervalToDuration({ start: 0, end: retention });
+  const displayText = formatDuration(durationObject, {
+    format: ['years', 'months', 'days']
+  });
+
+  return displayText;
+};
+
+const {
+  pending,
+  error,
+  data: tracks
+} = await useAsyncData(`longest-standing-tracks-${playlistId}`, async () => {
+  const { tracks } = await $fetch<Cumulative>(
+    `https://raw.githubusercontent.com/mackorone/spotify-playlist-archive/main/playlists/cumulative/${playlistId}.json`,
+    { parseResponse: JSON.parse }
+  );
+  const now = new Date().toISOString();
+
+  return tracks
+    .map((track) => {
+      track.retention =
+        Date.parse(track.date_removed || now) - Date.parse(track.date_added);
+
+      return track;
+    })
+    .sort((a, b) => b.retention - a.retention)
+    .map((track, index) => {
+      track.position = `${index + 1}.`;
+
+      return track;
+    });
+});
+</script>
+
+<template>
+  <NuxtLayout name="centered-content">
+    <ClientOnly>
+      <ProgressSpinner v-if="pending" />
+      <p v-else-if="error">
+        Something went wrong while fetching the longest standing tracks
+      </p>
+      <DataTable
+        class="w-full mx-5 mt-3 mb-5"
+        :value="tracks"
+        paginator
+        :rows="10"
+        :rows-per-page-options="[10, 20, 50, 100]"
+        paginator-template="CurrentPageReport FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown"
+        current-page-report-template="Showing {first} to {last} of {totalRecords}"
+        responsive-layout="scroll"
+      >
+        <Column field="position" header="No."></Column>
+        <Column field="name" header="Title">
+          <template #body="{ data: track }">
+            <NuxtLink :to="track.url" target="_blank">
+              {{ track.name }}
+            </NuxtLink>
+          </template>
+        </Column>
+        <Column field="artists" header="Artist(s)">
+          <template #body="{ data: track }">
+            <div v-for="(artist, index) of track.artists" :key="artist.url">
+              <NuxtLink :to="artist.url" target="_blank">
+                {{ artist.name }}
+              </NuxtLink>
+              <span v-if="index !== track.artists.length - 1" class="md:mr-1"
+                >,</span
+              >
+            </div>
+          </template>
+        </Column>
+        <Column field="album.name" header="Album">
+          <template #body="{ data: track }">
+            <NuxtLink :to="track.album.url" target="_blank">
+              {{ track.album.name }}
+            </NuxtLink>
+          </template>
+        </Column>
+        <Column field="date_added" header="Date added">
+          <template #body="{ data: track }">
+            <span>
+              {{ formatDate(track.date_added) }}
+            </span>
+          </template>
+        </Column>
+        <Column field="date_removed" header="Date removed">
+          <template #body="{ data: track }">
+            <span>
+              {{ formatDate(track.date_removed) }}
+            </span>
+          </template>
+        </Column>
+        <Column field="retention" header="Retention">
+          <template #body="{ data: track }">
+            <span>
+              {{ displayRetentionText(track.retention) }}
+            </span>
+          </template>
+        </Column>
+      </DataTable>
+    </ClientOnly>
+  </NuxtLayout>
+</template>
+
+<style scoped>
+@media only screen and (min-width: 768px) {
+  :deep(div.p-datatable) {
+    width: 100%;
+    padding: 0 8rem;
+  }
+}
+</style>
diff --git a/pages/playlists/[playlistId]/stats.vue b/pages/playlists/[playlistId]/stats.vue
new file mode 100644
index 0000000..d59a99a
--- /dev/null
+++ b/pages/playlists/[playlistId]/stats.vue
@@ -0,0 +1,8 @@
+<template>
+  <div class="w-full text-lg text-center">
+    <h2 class="mt-0 mb-3">Number of followers</h2>
+    <StatsFollowerGrowth />
+    <h2 class="mt-4 mb-2">Track retention</h2>
+    <StatsTrackRetention />
+  </div>
+</template>