Feature - Add WorldMap with trends, sentiment scale, fix layout

CUBigDataClass · Apr 24, 2019 · 0dcedc4 · 0dcedc4
1 parent 02c13c6
commit 0dcedc4
Show file tree

Hide file tree

Showing 7 changed files with 164 additions and 432 deletions.
diff --git a/package.json b/package.json
@@ -14,12 +14,8 @@
     "d3-cloud": "^1.2.5",
     "fusioncharts": "^3.13.4",
     "fusionmaps": "^3.13.1-sr.1",
-    "mapbox-gl": "^0.53.1",
     "vue": "^2.6.6",
-    "vue-chartkick": "^0.5.0",
-    "vue-d3-cloud": "^0.1.6",
     "vue-fusioncharts": "^3.0.2",
-    "vue-google-charts": "^0.3.2",
     "vue-wordcloud": "^1.1.1",
     "vuetify": "^1.5.6"
   },

diff --git a/src/App.vue b/src/App.vue
@@ -1,11 +1,11 @@
 <template>
   <div id="app">
     <NavBar/>
-    <div class="chart">
-      <WorldMap/>
+    <div class="chart" v-if="!loading">
+      <WorldMap :data='countryTrends'/>
     </div>
     <div class="margin" v-if="!loading">
-      <WordCloud :words="defaultWords" :urls="urls" />
+      <WordCloud :words="defaultWords" :urls="urls"/>
     </div>
   </div>
 </template>
@@ -21,13 +21,15 @@ export default {
   components: {
     WorldMap,
     NavBar,
-    WordCloud,
+    WordCloud
   },
   data() {
     return {
       loading: true,
       defaultWords: null,
       urls: {},
+      trends: [],
+      countryTrends: [],
     };
   },
   methods: {
@@ -44,29 +46,34 @@ export default {
         prev = arr[i];
       }
       return a;
+    },
+
+    getWords() {
+      const words = [];
+      this.trends.forEach(item => {
+        item.trends.forEach(trend => {
+          this.urls[trend.name] = trend.url;
+          words.push(trend.name);
+        });
+      });
+      const wordle = this.counter(words);
+      this.defaultWords = [];
+      Object.keys(wordle).map(key => {
+        this.defaultWords.push({
+          name: key,
+          value: wordle[key] * 10
+        });
+      });
     }
   },
   beforeCreate() {
     axios
       .get("http://35.239.169.14:3000/bigmoodapi/trends")
       .then(response => {
         this.trends = response.data;
-        const words = [];
-        this.trends.forEach(item => {
-          item.trends.forEach(trend => {
-            this.urls[trend.name] = trend.url
-            words.push(trend.name)
-          });
-        });
-        const wordle = this.counter(words);
-        this.defaultWords = [];
-        Object.keys(wordle).map(key => {
-          this.defaultWords.push({
-            name: key,
-            value: wordle[key] * 10
-          });
-        });
-        console.log(this.defaultWords);
+        this.getWords(this.trends);
+        this.countryTrends = this.trends.filter(item => item.locationType == 'Country');
+        // console.log(this.countryTrends);
       })
       .catch(error => {
         this.error = error;
@@ -91,7 +98,8 @@ export default {
   margin-right: auto;
 }
 .margin {
-  margin-top: 100px;
+  margin-top: 40px;
+  margin-bottom: 40px;
 }
 body {
   background-image: url("./assets/bg.png");