From f73b6e3b96fcedf81c6b6b2e3d2f1a8db8876f6d Mon Sep 17 00:00:00 2001
From: Terry Liao <jinliang@student.unimelb.edu.au>
Date: Tue, 14 May 2019 17:10:15 +1000
Subject: [PATCH] UI update

---
 .../tweet/static/css/hover_window.css         |  6 +-
 web_app_django/tweet/static/css/style.css     |  4 +-
 web_app_django/tweet/static/js/infoshow.js    | 13 ++--
 web_app_django/tweet/templates/index.html     | 62 ++++++++++---------
 4 files changed, 43 insertions(+), 42 deletions(-)

diff --git a/web_app_django/tweet/static/css/hover_window.css b/web_app_django/tweet/static/css/hover_window.css
index 286cf33..a67af38 100644
--- a/web_app_django/tweet/static/css/hover_window.css
+++ b/web_app_django/tweet/static/css/hover_window.css
@@ -22,9 +22,8 @@
 
 .marker_wrap{
     display: flex;
-    background-color: rgba(4, 42, 66, 0.8);
+    background-color: rgba(2, 123, 179, 0.747);
     width: auto;
-    min-width: 10rem;
     height: 2rem;
     border: none;
     border-radius: 0.3rem;
@@ -33,6 +32,7 @@
 .marker_label{
     margin: auto;
     flex: 1;
-    color: rgb(236, 225, 123);
+    padding: 0 5px;
+    color: rgb(255, 255, 255);
     line-height: 1.5rem;
 }
diff --git a/web_app_django/tweet/static/css/style.css b/web_app_django/tweet/static/css/style.css
index a5c8e91..c3bdda7 100644
--- a/web_app_django/tweet/static/css/style.css
+++ b/web_app_django/tweet/static/css/style.css
@@ -528,7 +528,7 @@ html {
     margin: 2rem 0;
     height: auto;
     word-wrap: break-word;
-    background-color:rgba(9, 75, 116, 0.264);
+    background-color:rgba(2, 123, 179, 0.747);
     color: white;
     background-clip: border-box;
     border-radius: .25rem;
@@ -541,7 +541,7 @@ html {
     display: block;
     color: rgb(253, 253, 253);
     position: absolute;
-    transform: translate(5%, -70%);
+    transform: translate(7%, -70%);
     font-size: 1.35rem;
     width: 33rem;
     padding: 0.75rem 1rem;
diff --git a/web_app_django/tweet/static/js/infoshow.js b/web_app_django/tweet/static/js/infoshow.js
index e0be716..9ff3186 100644
--- a/web_app_django/tweet/static/js/infoshow.js
+++ b/web_app_django/tweet/static/js/infoshow.js
@@ -54,24 +54,19 @@ function closeInfoWin() {
 function showRcmWin(map,points){
     var coor;
     var name;
-    var price;
     if(points.length > 0){
-        rcmWins = []
         for(city in points){
-            if(points[city].price == 0){
-                continue
-            }
             coor = points[city]["center"].split(',')
             name = points[city]["name"]
-            price = points[city]["price"]
             var rcmWin = new AMap.Marker({
                 position:coor,
-                content: "<div class = 'marker_wrap' ><div class='marker_label'><p>"+name +" : " +price+"元</p></div></div>",
-                offset: new AMap.Pixel(-50, -35),
+                content: "<div class = 'marker_wrap' ><div class='marker_label'><p>" +name + "</p></div></div>",
+                offset: new AMap.Pixel(-5, -35),
             });
             rcmWins.push(rcmWin)
+            
         }
-        map.add(rcmWins)
+        map.getMap().add(rcmWins)
     }
     return rcmWins
 }
diff --git a/web_app_django/tweet/templates/index.html b/web_app_django/tweet/templates/index.html
index f8710a4..25ffffc 100644
--- a/web_app_django/tweet/templates/index.html
+++ b/web_app_django/tweet/templates/index.html
@@ -128,6 +128,7 @@
 <!--<script src="./script/loca.js"></script>-->
 <link rel="stylesheet" href="{% static 'css/style.css' %}"/>
 <link rel="stylesheet" href="{% static 'css/hover_window.css' %}"/>
+<script src="https://webapi.amap.com/maps?v=1.4.12&key=393144ee0738b91f3e93b0c6d0c36562"></script>
 <script src="http://webapi.amap.com/loca?v=1.2.0&key=393144ee0738b91f3e93b0c6d0c36562"></script>
 <script src= "{% static 'js/infoshow.js' %}"></script>
 <script src = "https://www.gstatic.com/charts/loader.js"></script>
@@ -138,11 +139,11 @@
 <script src = "{% static 'js/district.js' %}"></script>
 
 <script>
-    
+    var rcmWins =[];
     var map = Loca.create('container', {
         mapStyle: 'amap://styles/070f548e06917955722ed5b9ac9a06f2',
         zoom: 4.5,
-        center: [150, -28]
+        center: [145, -28]
     });
 
     var layer = Loca.visualLayer({
@@ -152,7 +153,6 @@
         shape: 'circle'
     });
    
-
     
 
     layer.setData(districts, {
@@ -164,10 +164,10 @@
             radius: function(data){
                 return 15+data.value.size/4
             },
-            color: '#FFFF00',
-            borderColor: '#c5001f',
-            borderWidth: 1.5,
-            opacity: 0.6
+            color: '#FDE834',
+            // borderColor: '#c5001f',
+            // borderWidth: 1.5,
+            opacity: 0.7
         },
         
     });
@@ -192,7 +192,7 @@
         
         openInfoWin(map.getMap(), originalEvent, {
             'City': rawData.name,
-            'Hate_Speech_Rate': rawData.rate
+            'Hate Speech Rate': rawData.rate
         });
     });
 
@@ -207,14 +207,12 @@
     layer0.setOptions({
         style: {
             radius:8,
-            color: '#626262',
-            borderColor: '#626262',
-            borderWidth: 1.5,
+            color: '#e2431e',
             opacity: 0.8
         },
         selectStyle: {
             radius: 10,
-            color: '#ffe30a',
+            color: 'white',
             opacity: 0.8
         }
     });
@@ -236,32 +234,40 @@
             data.addColumn('number', 'Hate Speech Percentage');
            
             data.addRows([
-               ['Nsw',  nsw, syd],
-               ['Vic',  vic, mel],
-               ['Sa',  sa,  ade]
-              
-               
+               ['New South Wales',  nsw, syd],
+               ['Victoria',  vic, mel],
+               ['South Australia',  sa,  ade]
             ]);
                
             // Set chart options
             var options = {
-               hAxis: {
-                  title: 'State'
-               },
-               vAxis: {
-                  title: ''
-               },   
-               'width':450,
-               'height':350,
-               pointsVisible: true,
-               backgroundColor:"transparent" 
+                hAxis: {
+                    title: '',
+                    textStyle: {color: 'white'}
+                },
+                vAxis: {
+                    title: '',
+                    textStyle: {color: 'white'}
+                },
+                series: {
+                    0: { color: '#e2431e' },
+                    1: { color: '#FDE834' },  
+                }, 
+                chartArea:{left:50,top:50,width:'55%',height:'65%'}, 
+                'width':450,
+                'height':350,
+                pointsVisible: true,
+                backgroundColor:"transparent",
+                // colors: ['#f07f09']
+                legend: {position: 'labeled', textStyle: {color: 'white', fontSize: 12}}
             };
 
             // Instantiate and draw the chart.
-            var chart = new google.visualization.LineChart(document.getElementById('chart'));
+            var chart = new google.visualization.ColumnChart(document.getElementById('chart'));
             chart.draw(data, options);
          }
          google.charts.setOnLoadCallback(drawChart);
+         rcmWins = showRcmWin(map,districts)
 
 
 </script>
-- 
GitLab