Feature - Get data from BigMoodAPI and display it as a table

package.json

@@ -8,9 +8,11 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "axios": "^0.18.0",
     "mapbox-gl": "^0.53.1",
     "vue": "^2.6.6",
-    "vue-chartkick": "^0.5.0"
+    "vue-chartkick": "^0.5.0",
+    "vuetify": "^1.5.6"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^3.5.0",

public/index.html

@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <link href='https://api.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.css' rel='stylesheet' />
+    <link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons' rel="stylesheet">
     <title>BigMood</title>
     <script src="https://www.gstatic.com/charts/loader.js"></script>
   </head>

src/components/GeoMap.vue

@@ -1,39 +1,51 @@
 <template>
-  <div id="regions_div">
-    <geo-chart :data="[['United States', 44], ['Germany', 23], ['Brazil', 22]]"></geo-chart>
-  </div>
+  <v-data-table :headers="headers" :items="trends" class="elevation-1">
+    <template v-slot:items="props">
+      <td class="text-xs-center">{{ props.item.country }}</td>
+      <td class="text-xs-center">{{ props.item.city }}</td>
+      <td class="text-xs-center">{{ props.item.trends[0].trend }}</td>
+      <td class="text-xs-center">{{ props.item.trends[0].sentiment }}</td>
+      <!-- <td class="text-xs-center">{{ props.item.woeid }}</td> -->
+    </template>
+  </v-data-table>
 </template>
 
 <script>
+import axios from "axios";
 export default {
   name: "GeoMap",
   props: {},
-  data: {
-    sentiment: [["United States", 44], ["Germany", 23], ["Brazil", 22]]
+  data: function() {
+    return {
+      headers: [
+        { text: "Country", value: "Country" },
+        { text: "City", value: "City" },
+        { text: "Hashtag", value: "Hashtag" },
+        { text: "Sentiment", value: "Sentiment" },
+        // { text: "Woeid", value: "Woeid" }
+      ],
+      trends: [],
+    };
+  },
+  mounted () {
+    axios
+      .get('http://146.148.80.142:3000/bigmoodapi/trends')
+      .then(response => {
+        console.log(response.data.trends);
+        this.trends = response.data.trends
+        })
+      .catch(error => {
+        this.error = error
+      })
   }
 };
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-#regions_div {
-  width: 900px;
-  height: 500px;
+.regions_div {
+  width: 1200px;
+  height: 800px;
   text-align: center;
 }
-
-/* h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-} */
 </style>

src/main.js

@@ -1,7 +1,10 @@
 import Vue from 'vue'
 import App from './App.vue'
 import VueChartkick from 'vue-chartkick'
+import Vuetify from 'vuetify'
+import 'vuetify/dist/vuetify.min.css'
 
+Vue.use(Vuetify)
 Vue.use(VueChartkick)