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