Enhancements: Add captions for charts

CUBigDataClass · Apr 28, 2019 · bacebc9 · bacebc9
1 parent 40ae1b6
commit bacebc9
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 5 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -4,10 +4,10 @@
       <div class="back" v-if="isCityView" @click="showCountryView">
         <img src="./assets/ic-back.png">
       </div>
-      <CityView v-if="isCityView" :cityTrends="cityTrends" :countryCode="countryCode"/>
+      <CityView v-if="isCityView" :cityTrends="cityTrends" :countryCode="countryCode" :country="country"/>
       <WorldMap v-else :data="countryTrends" @selectedCountry="showCityInfo"/>
     </div>
-    <WordCloud class="word-cloud" :words="defaultWords" :urls="urls"/>
+    <WordCloud class="word-cloud" :words="defaultWords" :urls="urls" :key='isCityView'/>
     <TrendBarChart class="trends-volume" :barData="singleCountry"/>
   </main>
 </template>
@@ -41,7 +41,7 @@ export default {
       cityWords: null,
       singleCountry: [],
       country: "",
-      barChartData: []
+      barChartData: [],
     };
   },
   mounted() {

diff --git a/src/components/CityView.vue b/src/components/CityView.vue
@@ -1,5 +1,6 @@
 <template>
   <div>
+    <div class="box">Trends and Sentiment for {{country}}</div>
     <GeoMapGCharts :cityTrends="cityTrends" :countryCode="countryCode"/>
   </div>
 </template>
@@ -12,6 +13,17 @@ export default {
   components: {
     GeoMapGCharts
   },
-  props: ["cityTrends", "countryCode"]
+  props: ["cityTrends", "countryCode", "country"]
 };
 </script>
+
+<style>
+.box {
+  padding: 15px;
+  background-color: #262933;
+  color: white;
+  font-family: "Fira Sans Regular";
+  font-size: 18px;
+  text-align: center;
+}
+</style>
diff --git a/src/components/WordCloud.vue b/src/components/WordCloud.vue
@@ -1,5 +1,8 @@
 <template>
-  <section class='wordcloud'>
+  <section class="wordcloud">
+    <div class="box">
+      Twitter Trend Word Cloud
+    </div>
     <AppCloud
       :data="words"
       nameKey="name"
@@ -40,5 +43,12 @@ export default {
 .wordcloud {
   background-color: #262933;
 }
+.box {
+  color: white;
+  padding: 10px;
+  font-family: "Fira Sans Regular";
+  font-size: 18px;
+  text-align: center;
+}
 </style>