From ba670d06aa9b09e5d4a95a97e21c40f921e33baa Mon Sep 17 00:00:00 2001
From: KevinMidboe <kevin.midboe@gmail.com>
Date: Tue, 5 Nov 2019 01:08:38 +0100
Subject: [PATCH] Added charjs and fetch user activity to graph from new
 user/activity endpoint. This fetches tautulli stats based on the plex user_id
 linked with the seasoned account.

---
 package.json                    |   1 +
 src/components/ActivityPage.vue | 123 ++++++++++++++++++++++++++++++++
 src/routes.js                   |   5 ++
 yarn.lock                       |  30 +++++++-
 4 files changed, 158 insertions(+), 1 deletion(-)
 create mode 100644 src/components/ActivityPage.vue

diff --git a/package.json b/package.json
index fde1d5a..27505fd 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
   "dependencies": {
     "axios": "^0.18.1",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
+    "chart.js": "^2.9.2",
     "connect-history-api-fallback": "^1.3.0",
     "express": "^4.16.1",
     "vue": "^2.5.2",
diff --git a/src/components/ActivityPage.vue b/src/components/ActivityPage.vue
new file mode 100644
index 0000000..454bcf2
--- /dev/null
+++ b/src/components/ActivityPage.vue
@@ -0,0 +1,123 @@
+<template>
+  <div class="wrapper">
+    <h1>Your activity</h1>
+
+    Number of days: <input v-model="days" placeholder="number of days" type="number" />
+
+    <div class="chart-section">
+      <div class="chart">
+        <canvas ref="activityCanvas"></canvas>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+var Chart = require('chart.js');
+
+export default {
+  data() {
+    return {
+      days: 30,
+      series: undefined,
+      categories: undefined,
+      activityChart: undefined
+    }
+  },
+  watch: {
+    days: function(newValue) {
+      if (newValue !== '')
+        this.fetchActivity()
+    }
+  },
+  beforeMount() {
+    this.fetchActivity()
+  },
+  methods: {
+    generateChart(canvas, labels, datasets) {
+      this.activityChart = new Chart(canvas, {
+        type: 'line',
+        data: {
+            labels: labels,
+            datasets: datasets
+        },
+        options: {
+          maintainAspectRatio: false,
+          scales: {
+              yAxes: [{
+                  ticks: {
+                      beginAtZero: true
+                  }
+              }]
+          }
+        }
+      });
+    },
+    fetchActivity() {
+      const url = new URL('api/v1/user/plays_by_day', 'http://localhost:31459')
+      url.searchParams.append('days', this.days)
+
+      const headers = {
+        authorization: localStorage.getItem('token')
+      }
+
+      fetch(url.href, { headers })
+        .then(resp => resp.json())
+        .then(data => {
+          console.log('data from plays by day', data)
+
+          this.series = data.data.series.filter(group => group.name === 'TV')[0].data;      // plays pr date in groups (movie/tv/music)
+          this.categories = data.data.categories;  // dates
+
+          const x_labels = data.data.categories.map(date => date.replace('2019-', ''))
+          const y_activityMovies = data.data.series.filter(group => group.name === 'Movies')[0].data
+          const y_activityTV = data.data.series.filter(group => group.name === 'TV')[0].data
+
+          const datasets = [{
+              label: `Movies watch last ${ this.days } days`,
+              data: y_activityMovies,
+              backgroundColor: 'rgba(54, 162, 235, 0.2)',
+              borderColor: 'rgba(54, 162, 235, 1)',
+              borderWidth: 1
+            },
+            {
+              label: `Shows watch last ${ this.days } days`,
+              data: y_activityTV,
+              backgroundColor: 'rgba(255, 159, 64, 0.2)',
+              borderColor: 'rgba(255, 159, 64, 1)',
+              borderWidth: 1
+            }
+          ]
+
+          if (this.activityChart === undefined) {
+            this.generateChart(this.$refs.activityCanvas, x_labels, datasets)
+          } else {
+            console.log('this.act', this.activityChart.data)
+            this.activityChart.data.labels = x_labels;
+            this.activityChart.data.datasets = datasets;
+            this.activityChart.update();
+          }
+
+        })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.wrapper {
+  padding: 2rem;
+}
+
+.chart-section {
+  display: flex;
+  flex-wrap: wrap;
+
+  .chart {
+    position: relative;
+    height: 50vh;
+    width: 90vw;
+  }
+}
+
+</style>
\ No newline at end of file
diff --git a/src/routes.js b/src/routes.js
index eecb58c..4dbd90d 100644
--- a/src/routes.js
+++ b/src/routes.js
@@ -11,6 +11,11 @@ let routes = [
     path: '/',
     component: (resolve) => require(['./components/Home.vue'], resolve)
   },
+  {
+    name: 'activity',
+    path: '/activity',
+    component: (resolve) => require(['./components/ActivityPage.vue'], resolve)
+  },
   {
     name: 'profile',
     path: '/profile',
diff --git a/yarn.lock b/yarn.lock
index be7a22d..9a60d7d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1729,6 +1729,29 @@ character-reference-invalid@^1.0.0:
   resolved "https://registry.yarnpkg.com/character-reference-invalid/-/character-reference-invalid-1.1.3.tgz#1647f4f726638d3ea4a750cf5d1975c1c7919a85"
   integrity sha512-VOq6PRzQBam/8Jm6XBGk2fNEnHXAdGd6go0rtd4weAGECBamHDwwCQSOT12TACIYUZegUXnV6xBXqUssijtxIg==
 
+chart.js@^2.9.2:
+  version "2.9.2"
+  resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-2.9.2.tgz#5f7397f2fc33ca406836dbaed3cc39943bbb9f80"
+  integrity sha512-AagP9h27gU7hhx8F64BOFpNZGV0R1Pz1nhsi0M1+KLhtniX6ElqLl0z0obKSiuGMl9tcRe6ZhruCGCJWmH6snQ==
+  dependencies:
+    chartjs-color "^2.1.0"
+    moment "^2.10.2"
+
+chartjs-color-string@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz#1df096621c0e70720a64f4135ea171d051402f71"
+  integrity sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A==
+  dependencies:
+    color-name "^1.0.0"
+
+chartjs-color@^2.1.0:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/chartjs-color/-/chartjs-color-2.4.1.tgz#6118bba202fe1ea79dd7f7c0f9da93467296c3b0"
+  integrity sha512-haqOg1+Yebys/Ts/9bLo/BqUcONQOdr/hoEr2LLTRl6C5LXctUdHxsCYfvQVg5JIxITrfCNUDr4ntqmQk9+/0w==
+  dependencies:
+    chartjs-color-string "^0.6.0"
+    color-convert "^1.9.3"
+
 chokidar@^2.0.2, chokidar@^2.0.4, chokidar@^2.1.2:
   version "2.1.8"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-2.1.8.tgz#804b3a7b6a99358c3c5c61e71d8728f041cff917"
@@ -1873,7 +1896,7 @@ collection-visit@^1.0.0:
     map-visit "^1.0.0"
     object-visit "^1.0.0"
 
-color-convert@^1.3.0, color-convert@^1.9.0:
+color-convert@^1.3.0, color-convert@^1.9.0, color-convert@^1.9.3:
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
   integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
@@ -4660,6 +4683,11 @@ module-deps-sortable@5.0.0:
     through2 "^2.0.0"
     xtend "^4.0.0"
 
+moment@^2.10.2:
+  version "2.24.0"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.24.0.tgz#0d055d53f5052aa653c9f6eb68bb5d12bf5c2b5b"
+  integrity sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==
+
 ms@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"