Feature: Add city maps, add word cloud for city

CUBigDataClass · Apr 26, 2019 · df8f57f · df8f57f
1 parent 0dcedc4
commit df8f57f
Show file tree

Hide file tree

Showing 7 changed files with 159 additions and 54 deletions.
diff --git a/public/index.html b/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://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons' rel="stylesheet">
+     <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
     <title>BigMood</title>
   </head>
   <body>

diff --git a/src/App.vue b/src/App.vue
@@ -1,8 +1,19 @@
 <template>
   <div id="app">
     <NavBar/>
+    <div>
+      <CityView 
+        :cityTrends="cityTrends"
+        :countryCode="countryCode"
+        :urls="cityUrls"
+        :words="cityWords"
+      />
+    </div>
+    <!-- <div>
+      <GeoMapGCharts :cityTrends='cityTrends' :countryCode='countryCode'/>
+    </div>-->
     <div class="chart" v-if="!loading">
-      <WorldMap :data='countryTrends'/>
+      <WorldMap :data="countryTrends" @selectedCountry="showCityInfo"/>
     </div>
     <div class="margin" v-if="!loading">
       <WordCloud :words="defaultWords" :urls="urls"/>
@@ -14,14 +25,18 @@
 import NavBar from "./components/NavBar.vue";
 import WordCloud from "./components/WordCloud.vue";
 import WorldMap from "./components/WorldMap.vue";
+import CityView from "./components/CityView.vue";
 import axios from "axios";
+// import GeoMapGCharts from './components/GeoMapGCharts.vue';
 
 export default {
   name: "app",
   components: {
     WorldMap,
     NavBar,
-    WordCloud
+    WordCloud,
+    CityView
+    // GeoMapGCharts
   },
   data() {
     return {
@@ -30,6 +45,11 @@ export default {
       urls: {},
       trends: [],
       countryTrends: [],
+      cityTrends: [],
+      countryCode: null,
+      cityUrls: {},
+      showCityView: false,
+      cityWords: null
     };
   },
   methods: {
@@ -48,31 +68,50 @@ export default {
       return a;
     },
 
-    getWords() {
+    showCityInfo(country) {
+      this.cityTrends = this.trends.filter(
+        item => item.country == country && item.locationType == "City"
+      );
+      if (this.cityTrends) {
+        this.countryCode = this.cityTrends[0].countryCode;
+        [this.cityWords, this.cityUrls] = this.getWords(this.cityTrends);
+        console.log(this.cityWords, this.cityUrls);
+        this.showCityView = true
+      } else {
+        console.log("No Trends");
+      }
+    },
+
+    getWords(trends) {
       const words = [];
-      this.trends.forEach(item => {
+      let urls = {};
+      trends.forEach(item => {
         item.trends.forEach(trend => {
-          this.urls[trend.name] = trend.url;
+          urls[trend.name] = trend.url;
           words.push(trend.name);
         });
       });
       const wordle = this.counter(words);
-      this.defaultWords = [];
+      const defaultWords = [];
       Object.keys(wordle).map(key => {
-        this.defaultWords.push({
+        defaultWords.push({
           name: key,
-          value: wordle[key] * 10
+          value: wordle[key]
         });
       });
+      return [defaultWords, urls];
     }
   },
   beforeCreate() {
     axios
       .get("http://35.239.169.14:3000/bigmoodapi/trends")
       .then(response => {
         this.trends = response.data;
-        this.getWords(this.trends);
-        this.countryTrends = this.trends.filter(item => item.locationType == 'Country');
+        [this.defaultWords, this.urls] = this.getWords(this.trends);
+        console.log(this.defaultWords, this.urls)
+        this.countryTrends = this.trends.filter(
+          item => item.locationType == "Country"
+        );
         // console.log(this.countryTrends);
       })
       .catch(error => {
@@ -90,6 +129,8 @@ export default {
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
+  background-image: url("./assets/bg.png");
+  background-size: cover;
 }
 .chart {
   margin-top: 40px;

diff --git a/src/components/CityView.vue b/src/components/CityView.vue
@@ -0,0 +1,24 @@
+<template>
+  <div>
+    <GeoMapGCharts :cityTrends="cityTrends" :countryCode="countryCode"/>
+    <!-- <WordCloud :words="defaultWords" :urls="urls" /> -->
+  </div>
+</template>
+
+<script>
+import GeoMapGCharts from "./GeoMapGCharts.vue";
+import WordCloud from "./WordCloud.vue";
+
+export default {
+  name: "CityView",
+  components: {
+    GeoMapGCharts,
+    WordCloud
+  },
+  props: ["cityTrends", "countryCode", "defaultWords", "urls"],
+};
+</script>
+
+<style>
+</style>
+
diff --git a/src/components/GeoMapGCharts.vue b/src/components/GeoMapGCharts.vue
@@ -1,50 +1,91 @@
 <template>
-  <div class='center'>
-    <GChart
-    :settings="{ packages: ['geochart', 'table', 'map'], mapsApiKey: 'AIzaSyBEJFeCpbl5tIQXvI5_C0XLhSnwfpHAe-E' }"
-      type="GeoChart"
-      :data="chartData"
-      :options="chartOptions"
-
-    />
-    <!-- <geo-chart :data="chartData"></geo-chart> -->
-  </div>
+  <div id="chart_div" style="width: 900px; height: 500px;"></div>
 </template>
 
 <script>
 export default {
   name: "GeoMapGCharts",
+  props: ["countryCode", "cityTrends"],
   data() {
     return {
-      // Array will be automatically processed with visualization.arrayToDataTable function
-      chartData: [
-        ["Country", "Popularity"],
-        ["Germany", 200],
-        ["United States", 300],
-        ["Brazil", 400],
-        ["Canada", 500],
-        ["France", 600],
-        ["RU", 700]
-        // ['City', 'Popularity'],
-        // ['Rome',      276147],
-        // ['Milan',     1324110],
-        // ['Naples',    959574],
-        // ['Turin',     907563],
-        // ['Palermo',   655875],
-        // ['Genoa',     607906],
-        // ['Bologna',   380181],
-        // ['Florence',  371281],
-        // ['Fiumicino', 67370],
-        // ['Anzio',     52192],
-        // ['Ciampino',  38262]
-      ],
+      chart: null,
+      region: "IT",
+      cityData: null,
       chartOptions: {
         chart: {
           title: "Company Performance",
           subtitle: "Sales, Expenses, and Profit: 2014-2017"
         }
       }
     };
+  },
+  watch: {
+    countryCode: function(newCode) {
+      this.region = newCode;
+    },
+    cityTrends: function(newCityTrends) {
+      this.cityTrends = newCityTrends;
+      this.cityData = [];
+      this.data = new google.visualization.DataTable();
+      this.data.addColumn("string", "City");
+      this.data.addColumn("number", "Sentiment");
+      this.data.addColumn({ type: "string", role: "tooltip" });
+      newCityTrends.forEach(element => {
+        const tooltip =
+          "Top Trends\n" +
+          element.trends[0].name +
+          "\n" +
+          element.trends[1].name +
+          "\n" +
+          element.trends[2].name;
+        this.cityData.push([
+          element.city,
+          element.trends[0].sentiment,
+          tooltip
+        ]);
+      });
+      this.data.addRows(this.cityData);
+      google.charts.setOnLoadCallback(this.drawRegionsMap);
+    }
+  },
+  created() {
+    google.charts.load("current", {
+      packages: ["geochart"],
+      mapsApiKey: ""
+    });
+  },
+
+  methods: {
+    cityClickedHandler(event) {
+      const row_index = this.chart.getSelection()[0]["row"];
+      if (row_index != undefined) {
+        const url = this.cityTrends[row_index].trends[0].url;
+        window.open(url, "_blank");
+      }
+    },
+    drawRegionsMap() {
+      const options = {
+        region: this.region,
+        displayMode: "markers",
+        backgroundColor: "#2c3e50",
+        colorAxis: {
+          colors: ["#DC143C", "#FFE303", "#32CD32"],
+          minValue: -1,
+          maxValue: 1
+        },
+        showZoomOut: true
+      };
+
+      this.chart = new google.visualization.GeoChart(
+        document.getElementById("chart_div")
+      );
+      google.visualization.events.addListener(
+        this.chart,
+        "select",
+        this.cityClickedHandler
+      );
+      this.chart.draw(this.data, options);
+    }
   }
 };
 </script>

diff --git a/src/components/WordCloud.vue b/src/components/WordCloud.vue
@@ -42,7 +42,6 @@ export default {
 </script>
 
 <style>
-
 .cursor {
   cursor: pointer;
 }

diff --git a/src/components/WorldMap.vue b/src/components/WorldMap.vue
@@ -14,11 +14,9 @@
 <script>
 import axios from "axios";
 import countryIdsFusionCharts from "../data/fusionChartsWorldIds.json";
-import GeoMapGCharts from "./GeoMapGCharts";
 export default {
   name: "WorldMap",
   props: ["data"],
-  components: {},
   created() {
     this.trendData = this.getDataObjectForMap(this.data);
     this.dataSource["data"] = this.trendData;
@@ -27,7 +25,8 @@ export default {
   methods: {
     getCountry(event) {
       this.country = event.data.label;
-      console.log(this.country);
+      this.$emit('selectedCountry', this.country);
+
     },
     getDataObjectForMap(trends) {
       const dataSource = [];
@@ -36,6 +35,7 @@ export default {
         const id = countryIdsFusionCharts[trend.countryCode];
         if (!id) {
           console.log(trend.country);
+          console.log(trend.countryCode)
         } else {
           let obj = {
             id: id["ID"].toString(),
@@ -46,7 +46,6 @@ export default {
               trendingHashtag.name +
               "{br}Tweet Volume: " +
               trendingHashtag.tweetVolume,
-            link: ""
           };
           dataSource.push(obj);
         }
@@ -80,13 +79,13 @@ export default {
           color: [
             {
               minvalue: "-1",
-              maxvalue: "-0.7",
+              maxvalue: "-0.3",
               color: "#DC143C"
             },
             {
-              minvalue: "-0.7",
+              minvalue: "-0.3",
               maxvalue: "0.3",
-              color: "#FFE303	"
+              color: "#FFE303"
             },
             {
               minvalue: "0.3",

diff --git a/src/data/fusionChartsWorldIds.json b/src/data/fusionChartsWorldIds.json
@@ -868,7 +868,7 @@
           "CountryLabel": "Iceland"
        }
       ,
-    "IR":  
+    "IE":  
        {
           "ID": 146,
           "CountryLabel": "Ireland"
@@ -1012,7 +1012,7 @@
           "CountryLabel": "Ukraine"
        }
       ,
-    "UK":  
+    "GB":  
        {
           "ID": 170,
           "CountryLabel": "United Kingdom"
@@ -1030,7 +1030,7 @@
           "CountryLabel": "Cyprus"
        }
       ,
-    "TK":  
+    "TR":  
        {
           "ID": 173,
           "CountryLabel": "Turkey"
@@ -1136,7 +1136,7 @@
           "CountryLabel": "Iraq"
        }
       ,
-    "IS":  
+    "IL":  
        {
           "ID": 192,
           "CountryLabel": "Israel"
-Original file line number
+Diff line change
@@ Expand Up / @@ -42,7 +42,6 @@ export default { @@
     </script>
     <style>
     .cursor {
       cursor: pointer;
     }
@@ Expand Down @@