Add frontend;

arkanister · Jul 24, 2021 · f3a86c9 · f3a86c9
1 parent f585ddb
commit f3a86c9
Show file tree

Hide file tree

Showing 13 changed files with 423 additions and 0 deletions.
diff --git a/frontend/.env b/frontend/.env
@@ -0,0 +1,3 @@
+# Backend API URL
+
+VUE_APP_CHART_API_URL=http://localhost:5000
diff --git a/frontend/.env.development.local b/frontend/.env.development.local
@@ -0,0 +1,3 @@
+# Backend API URL
+
+VUE_APP_CHART_API_URL=http://localhost:5000/
diff --git a/frontend/README.md b/frontend/README.md
@@ -0,0 +1,24 @@
+# Frontend
+
+## Project setup
+```
+npm install
+```
+
+### Compiles and hot-reloads for development
+```
+npm run serve
+```
+
+### Compiles and minifies for production
+```
+npm run build
+```
+
+### Lints and fixes files
+```
+npm run lint
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).
diff --git a/frontend/babel.config.js b/frontend/babel.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}
diff --git a/frontend/package.json b/frontend/package.json
@@ -0,0 +1,46 @@
+{
+  "name": "frontend",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "@popperjs/core": "^2.9.2",
+    "axios": "^0.21.1",
+    "bootstrap": "^5.0.2",
+    "core-js": "^3.6.5",
+    "plotly.js-dist": "^2.2.1",
+    "vue": "^3.0.0"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "~4.5.0",
+    "@vue/cli-plugin-eslint": "~4.5.0",
+    "@vue/cli-service": "~4.5.0",
+    "@vue/compiler-sfc": "^3.0.0",
+    "babel-eslint": "^10.1.0",
+    "eslint": "^6.7.2",
+    "eslint-plugin-vue": "^7.0.0"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/vue3-essential",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "babel-eslint"
+    },
+    "rules": {}
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ]
+}
diff --git a/frontend/public/favicon.png b/frontend/public/favicon.png
diff --git a/frontend/public/index.html b/frontend/public/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.png">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
@@ -0,0 +1,50 @@
+<template>
+
+  <div class="container">
+
+    <main>
+      <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
+        <h1 class="h1">Dashboard</h1>
+      </div>
+      <div class="row">
+        <div class="col-6">
+          <GenresByUserScoreAVG />
+        </div>
+        <div class="col-6">
+          <PlatformsByUserScoreAVG />
+        </div>
+      </div>
+
+      <div class="row">
+        <div class="col-12">
+          <GameReleasePercentByPlatformInTheYears />
+        </div>
+      </div>
+    </main>
+
+  </div>
+</template>
+
+<script>
+import GameReleasePercentByPlatformInTheYears from './components/GameReleasePercentByPlatformInTheYears.vue'
+import GenresByUserScoreAVG from './components/GenresByUserScoreAVG.vue'
+import PlatformsByUserScoreAVG from './components/PlatformsByUserScoreAVG.vue'
+
+export default {
+  name: 'App',
+  components: {
+    GameReleasePercentByPlatformInTheYears,
+    GenresByUserScoreAVG,
+    PlatformsByUserScoreAVG
+  }
+}
+</script>
+
+<style>
+#app {
+  font-family: Arial, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  margin-top: 60px;
+}
+</style>
diff --git a/frontend/src/components/GameReleasePercentByPlatformInTheYears.vue b/frontend/src/components/GameReleasePercentByPlatformInTheYears.vue
@@ -0,0 +1,112 @@
+<template>
+  <div class="card mb-4">
+    <div class="card-header">
+      Game Releases Percent By Platform in The Years
+    </div>
+    <div class="card-body">
+      <div class="row g-3">
+        <div class="col-auto">
+          <div class="form-floating">
+            <select id="start-year" class="form-select" v-model="start_year" aria-label="Start">
+              <option v-for="(option, index) in years" :key="index" v-bind:value="option.value">
+                {{ option.text }}
+              </option>
+            </select>
+            <label for="start-year">Start</label>
+          </div>
+        </div>
+        <div class="col-auto">
+          <div class="form-floating">
+            <select id="end-year" class="form-select" v-model="end_year" aria-label="End">
+              <option v-for="(option, index) in years" :key="index" v-bind:value="option.value">
+                {{ option.text }}
+              </option>
+            </select>
+            <label for="end-year">End</label>
+          </div>
+        </div>
+        <div class="col-auto">
+          <div class="dropdown">
+            <button class="btn btn-lg btn-light dropdown-toggle" style="padding-bottom: .8rem; padding-top: .8rem;" type="button" id="genres" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="true">
+              Genres
+            </button>
+            <ul class="dropdown-menu p-0" aria-labelledby="genres">
+              <li v-for="(option, index) in genres" :key="index" class="pt-1 ps-3 pe-3 pb-1 border-bottom">
+                <div class="form-check">
+                  <input class="form-check-input" :id="'genres-' + index" type="checkbox" v-model="selectedGenres" :value="option.value">
+                  <label class="form-check-label" :for="'genres-' + index">
+                    {{ option.text }}
+                  </label>
+                </div>
+              </li>
+            </ul>
+          </div>
+        </div>
+        <div class="col-auto">
+          <input type="button" class="btn btn-lg btn-primary"  style="padding-bottom: .8rem; padding-top: .8rem;" v-on:click="filter()" value="Filter">
+        </div>
+      </div>
+    </div>
+    <div class="card-body">
+      <div id="game-release-percent-by-platform-in-the-years"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from "axios";
+import Plotly from "plotly.js-dist";
+
+export default {
+  name: 'Chart',
+  data () {
+    return {
+      chart: null,
+      start_year: null,
+      end_year: null,
+      years: null,
+      genres: null,
+      selectedGenres: []
+    }
+  },
+  mounted () {
+    // - pre-load charts
+    this.loadChart();
+  },
+  methods: {
+    filter: function (value) {
+      // - filter charts
+      this.loadChart([value]);
+    },
+    loadChart: function () {
+      let params = {
+        'start_year': this.start_year,
+        'end_year': this.end_year
+      };
+
+      if (this.selectedGenres) {
+        params['genres'] = this.selectedGenres.join(',');
+      }
+
+      const url = `${process.env.VUE_APP_CHART_API_URL}/game-release-percent-by-platform-in-the-years`;
+
+      axios
+          .get(url, { params: params })
+          .then(response => {
+            Plotly.purge('game-release-percent-by-platform-in-the-years');
+
+            this.chart = response.data.chart;
+            this.start_year = response.data.properties.start_year;
+            this.end_year = response.data.properties.end_year;
+
+            this.years = response.data.properties.years.map(x => ({text: x, value: x}))
+            this.genres = response.data.properties.genres.map(x => ({text: x, value: x}))
+            this.selectedGenres = response.data.properties.selected_genres;
+
+            Plotly.newPlot('game-release-percent-by-platform-in-the-years', this.chart.data, this.chart.layout);
+          });
+
+    }
+  }
+}
+</script>
diff --git a/frontend/src/components/GenresByUserScoreAVG.vue b/frontend/src/components/GenresByUserScoreAVG.vue
@@ -0,0 +1,73 @@
+<template>
+  <div class="card mb-4">
+    <div class="card-header">
+      Genres By User AVG
+    </div>
+    <div class="card-body">
+      <div class="row g-3">
+        <div class="col-auto">
+          <div class="form-floating">
+            <select id="start-year" class="form-select" v-model="top" aria-label="Top">
+              <option v-for="(option, index) in options" :key="index" v-bind:value="option.value">
+                {{ option.text }}
+              </option>
+            </select>
+            <label for="start-year">Top</label>
+          </div>
+        </div>
+        <div class="col-auto">
+          <input type="button" class="btn btn-lg btn-primary"  style="padding-bottom: .8rem; padding-top: .8rem;" v-on:click="filter()" value="Filter">
+        </div>
+      </div>
+    </div>
+    <div class="card-body">
+      <div id="genres-by-user-score-avg"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from "axios";
+import Plotly from "plotly.js-dist";
+
+export default {
+  name: 'Chart',
+  data () {
+    return {
+      chart: null,
+      options: null,
+      top: null
+    }
+  },
+  mounted () {
+    // - pre-load charts
+    this.loadChart();
+  },
+  methods: {
+    filter: function (value) {
+      // - filter charts
+      this.loadChart([value]);
+    },
+    loadChart: function () {
+      let params = {
+        'top': this.top
+      };
+
+      const url = `${process.env.VUE_APP_CHART_API_URL}/genres-by-user-score-avg`;
+
+      axios
+          .get(url, { params: params })
+          .then(response => {
+            Plotly.purge('genres-by-user-score-avg');
+
+            this.chart = response.data.chart;
+            this.top = response.data.properties.top;
+            this.options = Array.from({length: 20}, (x, i) => i + 1).map(x => ({text: x, value: x}));
+
+            Plotly.newPlot('genres-by-user-score-avg', this.chart.data, this.chart.layout);
+          });
+
+    }
+  }
+}
+</script>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		# Backend API URL

		VUE_APP_CHART_API_URL=http://localhost:5000