From 25da1b87285d7109ab9e7141cc6e4eac5bb8ac85 Mon Sep 17 00:00:00 2001
From: Sanjeevani Avasthi <savasthi@student.unimelb.edu.au>
Date: Wed, 26 May 2021 10:51:41 +1000
Subject: [PATCH] Update frontend/Dockerfile, frontend/Makefile,
frontend/nginx.conf, frontend/static/index.html, frontend/static/Sports.css,
frontend/static/Sports.js files
---
frontend/Dockerfile | 5 +
frontend/Makefile | 8 +
frontend/nginx.conf | 22 +++
frontend/static/Sports.css | 56 ++++++
frontend/static/Sports.js | 370 +++++++++++++++++++++++++++++++++++++
frontend/static/index.html | 87 +++++++++
6 files changed, 548 insertions(+)
create mode 100644 frontend/Dockerfile
create mode 100644 frontend/Makefile
create mode 100644 frontend/nginx.conf
create mode 100644 frontend/static/Sports.css
create mode 100644 frontend/static/Sports.js
create mode 100644 frontend/static/index.html
diff --git a/frontend/Dockerfile b/frontend/Dockerfile
new file mode 100644
index 0000000..fd7c5a8
--- /dev/null
+++ b/frontend/Dockerfile
@@ -0,0 +1,5 @@
+FROM nginx:latest
+
+COPY ./static /usr/share/nginx/html
+
+COPY nginx.conf /etc/nginx/conf.d/default.conf
diff --git a/frontend/Makefile b/frontend/Makefile
new file mode 100644
index 0000000..902e959
--- /dev/null
+++ b/frontend/Makefile
@@ -0,0 +1,8 @@
+build:
+ docker build . -t avasthi/twitter-app:${VERSION}
+
+push:
+ docker push avasthi/twitter-app:${VERSION}
+
+run:
+ docker run -d -p 80:80 avasthi/twitter-app:${VERSION}
diff --git a/frontend/nginx.conf b/frontend/nginx.conf
new file mode 100644
index 0000000..adbca7b
--- /dev/null
+++ b/frontend/nginx.conf
@@ -0,0 +1,22 @@
+server {
+ listen 80;
+ listen [::]:80;
+ server_name 172.26.131.9;
+ include /etc/nginx/mime.types;
+ default_type application/octet-stream;
+ access_log /var/log/nginx/access.log main;
+
+ root /usr/share/nginx/html;
+
+ location / {
+ index index.html index.htm;
+ }
+ location /couchdb {
+ rewrite /couchdb/(.*) /$1 break;
+ proxy_pass http://172.26.130.79:5984;
+ proxy_redirect off;
+ proxy_buffering off;
+ proxy_set_header Host $host;
+ proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+ }
+}
diff --git a/frontend/static/Sports.css b/frontend/static/Sports.css
new file mode 100644
index 0000000..63a744a
--- /dev/null
+++ b/frontend/static/Sports.css
@@ -0,0 +1,56 @@
+#mynetwork {
+ width: 400px;
+ height: 400px;
+ border: 1px solid lightgray;
+ }
+ .header{
+ text-align: center ;
+ display: block;
+ font-family: sans-serif;
+ margin-bottom: 20px;
+ margin-top :20px;
+ font-size: large;
+}
+
+#mychart{
+ width: 1000px !important;
+ height: 500px !important;
+ justify-content: center;
+ }
+ #mychart1{
+ width: 800px !important;;
+ height: 500px !important;
+ }
+ #mychart2{
+ width: 800px !important;;
+ height: 500px !important;
+ }
+ canvas{
+ margin: 0 auto;
+ justify-content: center;
+ }
+ #cityfilter
+ {
+ margin-top: 20px;
+ margin-bottom: 20px;
+ text-align:center;
+ }
+ #networkcityfilter
+ {
+ margin-top: 20px;
+ margin-bottom: 20px;
+ text-align:center;
+ }
+ #mynetwork
+ {
+ margin-left: 200px;
+ margin-right:100px;
+ width: 1000px !important;
+ height: 500px !important;
+ justify-content: center;
+ display: inline-block;
+ }
+h1{
+ text-align:center;
+ font-family: sans-serif;
+}
\ No newline at end of file
diff --git a/frontend/static/Sports.js b/frontend/static/Sports.js
new file mode 100644
index 0000000..9da68e1
--- /dev/null
+++ b/frontend/static/Sports.js
@@ -0,0 +1,370 @@
+var sports = [];
+var counts = [];
+
+var sports_by_city = [];
+var counts_by_city = [];
+
+var response_value = function(){
+ $.ajax({
+ async: false,
+ url: 'http://172.26.131.9/couchdb/live_demo2/_design/sports_count/_view/sports_count?group=true&group_level=1',
+ type: 'get',
+ dataType: 'json',
+ headers: {
+ 'Authorization': 'Basic ' + btoa('admin:admin'),
+ },
+ xhrFields: {
+ withCredentials: true
+ },
+ success: function(data) {
+ temp = data;
+ console.log(data);
+ },
+ error: function() {
+ alert('Error occurs!');
+ },
+ reduce: false
+ });
+ console.log(temp);
+ return temp;
+}();
+data_rows = response_value["rows"];
+for (row in data_rows) {
+ sports.push(data_rows[row]["key"][0]);
+ counts.push(data_rows[row]["value"]);
+};
+
+var city;
+function setByCity(){
+ city = document.getElementById('city').value;
+ console.log(city);
+
+ var response_by_city = function(){
+ $.ajax({
+ async: false,
+ crossDomain: true,
+ url: 'http://172.26.131.9/couchdb/live_demo2/_design/sports_count/_view/sports_count?group=true&group_level=2',
+ type: 'get',
+ dataType: 'json',
+ headers: {
+ 'Authorization': 'Basic ' + btoa('admin:admin'),
+ // 'Access-Control-Allow-Origin': 'localhost',
+ // 'Access-Control-Allow-Credentials' : true,
+ },
+ xhrFields: {
+ withCredentials: true
+ },
+ success: function(data) {
+ temp = data;
+ console.log(data);
+ },
+ error: function() {
+ alert('Error occurs!');
+ },
+ reduce: false
+ });
+ console.log(temp);
+ return temp;
+}();
+console.log("RESPONSE:"+response_by_city);
+for(var i =0;i<sports_by_city.length;i++)
+{
+ removeData(myChart1);
+}
+sports_by_city =[]
+counts_by_city = []
+
+
+
+data_rows = response_by_city["rows"];
+for (row in data_rows) {
+ if(data_rows[row]["key"][1] == city)
+ {
+ console.log(data_rows[row]["key"][1]);
+ sports_by_city.push(data_rows[row]["key"][0]);
+ counts_by_city.push(data_rows[row]["value"]);
+ addData(myChart1,data_rows[row]["key"][0],data_rows[row]["value"]);
+ }
+}
+
+myChart1.update();
+}
+
+var sport;
+var city_by_sport = [];
+var counts_by_sport = [];
+function sendSport(){
+ sport = document.getElementById('sport').value;
+ console.log(sport);
+
+ var response_by_city = function(){
+ $.ajax({
+ async: false,
+ crossDomain: true,
+ url: 'http://172.26.131.9/couchdb/live_demo2/_design/sports_count/_view/sports_count?group=true&group_level=2',
+ type: 'get',
+ dataType: 'json',
+ headers: {
+ 'Authorization': 'Basic ' + btoa('admin:admin'),
+ // 'Access-Control-Allow-Origin': 'localhost',
+ // 'Access-Control-Allow-Credentials' : true,
+ },
+ xhrFields: {
+ withCredentials: true
+ },
+ success: function(data) {
+ temp = data;
+ console.log(data);
+ },
+ error: function() {
+ alert('Error occurs!');
+ },
+ reduce: false
+ });
+ console.log(temp);
+ return temp;
+}();
+console.log("RESPONSE:"+response_by_city);
+for(var i =0;i<city_by_sport.length;i++)
+{
+ removeData(myChart2);
+}
+
+city_by_sport =[]
+counts_by_city = []
+
+data_rows = response_by_city["rows"];
+for (row in data_rows) {
+ console.log(sport);
+ console.log(data_rows[row]["key"][0]);
+ if(data_rows[row]["key"][0] == sport)
+ {
+ city_by_sport.push(data_rows[row]["key"][1]);
+ counts_by_city.push(data_rows[row]["value"]);
+ addData(myChart2,data_rows[row]["key"][1],data_rows[row]["value"]);
+ }
+}
+
+myChart2.update();
+}
+
+var nodes = new vis.DataSet();
+var edges = new vis.DataSet();
+var ids =[];
+var nodesexist =[];
+function networkGraph()
+{
+ city = document.getElementById('citynetwork').value;
+ sport = document.getElementById('sportnetwork').value;
+
+ var response_network = function(){
+ $.ajax({
+ async: false,
+ crossDomain: true,
+ url: 'http://172.26.131.9/couchdb/live_demo/_design/replies/_view/replies?group=true',
+ type: 'get',
+ dataType: 'json',
+ headers: {
+ 'Authorization': 'Basic ' + btoa('admin:admin'),
+ // 'Access-Control-Allow-Origin': '*',
+ // 'Access-Control-Allow-Credentials' : true,
+ },
+ xhrFields: {
+ withCredentials: true
+ },
+ success: function(data) {
+ temp = data;
+ console.log(data);
+ },
+ error: function() {
+ alert('Error occurs!');
+ },
+ reduce: false
+ });
+ console.log(temp);
+ return temp;
+ }();
+ data_rows = response_network["rows"];
+ var i=1;
+ ids =[];
+ nodesexist = [];
+ nodes = new vis.DataSet();
+ edges = new vis.DataSet();
+ for (row in data_rows) {
+ if(data_rows[row]["key"][0] == city && data_rows[row]["key"][1] == sport )
+ {
+ if(!(data_rows[row]["key"][2] in nodesexist))
+ {
+ nodes.add({id: i,label:data_rows[row]["key"][2]});
+ nodesexist.push(data_rows[row]["key"][2]);
+ ids.push(i);
+ var id1=i;
+ i++;
+ }
+ else
+ {
+ id1 = nodesexist.indexOf(data_rows[row]["key"][2])
+ }
+ if(!(data_rows[row]["key"][3] in nodesexist))
+ {
+ nodes.add({id: i,label:data_rows[row]["key"][3]});
+ nodesexist.push(data_rows[row]["key"][3]);
+ ids.push(i);
+ var id2=i;
+ i++;
+ }
+ else
+ {
+ id2 = nodesexist.indexOf(data_rows[row]["key"][3])
+ }
+
+ edges.add({from:id1,to:id2});
+
+ }
+ };
+ var container = document.getElementById("mynetwork");
+ var data = {
+ nodes: nodes,
+ edges: edges,
+ };
+ var options = {};
+ var network = new vis.Network(container, data, options);
+
+}
+
+var ctx = document.getElementById('myChart').getContext('2d');
+var myChart = new Chart(ctx, {
+ type: 'bar',
+ data: {
+ labels: sports,
+ datasets: [{
+ label: '# of Tweets',
+ data: counts,
+ backgroundColor: [
+ 'rgba(255, 99, 132, 0.5)',
+ 'rgba(54, 162, 235, 0.5)',
+ 'rgba(255, 206, 86, 0.5)',
+ 'rgba(75, 192, 192, 0.5)',
+ 'rgba(153, 102, 255, 0.5)',
+ 'rgba(255, 159, 64, 0.5)'
+ ],
+ borderColor: [
+ 'rgba(255, 99, 132, 1)',
+ 'rgba(54, 162, 235, 1)',
+ 'rgba(255, 206, 86, 1)',
+ 'rgba(75, 192, 192, 1)',
+ 'rgba(153, 102, 255, 1)',
+ 'rgba(255, 159, 64, 1)'
+ ],
+ borderWidth: 1
+ }]
+ },
+ options: {
+ scales: {
+ y: {
+ beginAtZero: true
+ },
+ // yAxes: [{
+ // ticks: {
+ // fontSize: 40
+ // }
+ // }]
+ }
+ }
+});
+
+var ctx = document.getElementById('myChart1').getContext('2d');
+var myChart1 = new Chart(ctx, {
+ type: 'bar',
+ data: {
+ labels: sports_by_city ,
+ datasets: [{
+ label: '# of Tweets',
+ data: counts_by_city,
+ backgroundColor: [
+ 'rgba(255, 99, 132, 0.5)',
+ 'rgba(54, 162, 235, 0.5)',
+ 'rgba(255, 206, 86, 0.5)',
+ 'rgba(75, 192, 192, 0.5)',
+ 'rgba(153, 102, 255, 0.5)',
+ 'rgba(255, 159, 64, 0.5)'
+ ],
+ borderColor: [
+ 'rgba(255, 99, 132, 1)',
+ 'rgba(54, 162, 235, 1)',
+ 'rgba(255, 206, 86, 1)',
+ 'rgba(75, 192, 192, 1)',
+ 'rgba(153, 102, 255, 1)',
+ 'rgba(255, 159, 64, 1)'
+ ],
+ borderWidth: 1
+ }]
+ },
+ options: {
+ scales: {
+ y: {
+ beginAtZero: true
+ },
+ // yAxes: [{
+ // ticks: {
+ // fontSize: 40
+ // }
+ // }]
+ }
+ }
+});
+
+var ctx = document.getElementById('myChart2').getContext('2d');
+var myChart2 = new Chart(ctx, {
+ type: 'bar',
+ data: {
+ labels: city_by_sport,
+ datasets: [{
+ label: '# of Interactions',
+ data: counts_by_sport,
+ backgroundColor: [
+ 'rgba(255, 99, 132, 0.5)',
+ 'rgba(54, 162, 235, 0.5)',
+ 'rgba(255, 206, 86, 0.5)',
+ 'rgba(75, 192, 192, 0.5)',
+ 'rgba(153, 102, 255, 0.5)',
+ 'rgba(255, 159, 64, 0.5)'
+ ],
+ borderColor: [
+ 'rgba(255, 99, 132, 1)',
+ 'rgba(54, 162, 235, 1)',
+ 'rgba(255, 206, 86, 1)',
+ 'rgba(75, 192, 192, 1)',
+ 'rgba(153, 102, 255, 1)',
+ 'rgba(255, 159, 64, 1)'
+ ],
+ borderWidth: 1
+ }]
+ },
+ options: {
+ scales: {
+ y: {
+ beginAtZero: true
+ }
+ }
+ }
+});
+
+
+
+
+function removeData(chart) {
+ chart.data.labels.pop();
+ chart.data.datasets.forEach((dataset) => {
+ dataset.data.pop();
+ });
+ chart.update();
+}
+
+function addData(chart, label, data) {
+ chart.data.labels.push(label);
+ chart.data.datasets.forEach((dataset) => {
+ dataset.data.push(data);
+ });
+ chart.update();
+}
diff --git a/frontend/static/index.html b/frontend/static/index.html
new file mode 100644
index 0000000..d665a31
--- /dev/null
+++ b/frontend/static/index.html
@@ -0,0 +1,87 @@
+<html>
+ <head>
+ <link rel="stylesheet" href="Sports.css">
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+ </head>
+<title> Sport Popularity Analytic Tool</title>
+
+<script type="text/javascript" src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script>
+
+<body>
+ <h1>Sport Popularity Analytic Tool</h1>
+ <label class="header">Bar graph showing the popularity of the sports in Australia</label>
+ <canvas id="myChart" ></canvas>
+
+ <label class="header">Bar graph showing the popularity of the sport in a specific city</label>
+ <div id="cityfilter">
+ <label for="city" >Choose a city:</label>
+ <select id="city" onchange="setByCity()" >
+ <option selected disabled>Choose one</option>
+ <option value="Adelaide">Adelaide</option>
+ <option value="Brisbane">Brisbane</option>
+ <option value="Canberra">Canberra</option>
+ <option value="Hobart">Hobart</option>
+ <option value="Melbourne">Melbourne</option>
+ <option value="Perth">Perth</option>
+ <option value="Sydney">Sydney</option>
+ </select>
+ </div>
+ <canvas id="myChart1" ></canvas>
+ <!-- Display Graph for that date -->
+
+ <!-- <h3>User's Friends Count Specific to Sports they tweet about </h3> -->
+ <!-- Display Graph for friend count and how old the user is -->
+
+ <!-- <canvas id="myChart2" width="200px" height="200px" justify ="right"></canvas> -->
+ <label class="header">Bar graph showing the city where the sport is most popular</label>
+ <div id="cityfilter">
+ <label for="sport" >Choose a sport:</label>
+ <select id="sport" onchange="sendSport()" >
+ <option selected disabled>Choose one</option>
+ <option value="basketball">Basketball</option>
+ <option value="cricket">Cricket</option>
+ <option value="Footie">Footie</option>
+ <option value="netball">Netball</option>
+ <option value="Rugby">Rugby</option>
+ <option value="soccer">Soccer</option>
+ <option value="swimming">Swimming</option>
+ <option value="Tennis">Tennis</option>
+ </select>
+ </div>
+ <canvas id="myChart2"></canvas>
+
+ <label class="header">Network Of Tweets based on retweets </label>
+ <div id="networkcityfilter">
+ <label for="citynetwork" >Choose a city:</label>
+ <select id="citynetwork">
+ <option selected disabled>Choose one</option>
+ <option value="Adelaide">Adelaide</option>
+ <option value="Brisbane">Brisbane</option>
+ <option value="Canberra">Canberra</option>
+ <option value="Hobart">Hobart</option>
+ <option value="Melbourne">Melbourne</option>
+ <option value="Perth">Perth</option>
+ <option value="Queensland">Queensland</option>
+ <option value="Sydney">Sydney</option>
+ </select>
+ <label for="sportNetwork" >Choose a sport:</label>
+ <select id="sportnetwork">
+ <option selected disabled>Choose one</option>
+ <option value="basketball">Basketball</option>
+ <option value="cricket">Cricket</option>
+ <option value="Footie">Footie</option>
+ <option value="netball">Netball</option>
+ <option value="Rugby">Rugby</option>
+ <option value="soccer">soccer</option>
+ <option value="swimming">swimming</option>
+ <option value="Tennis">Tennis</option>
+ </select>
+ <button onclick="networkGraph()">Search</button>
+ </div>
+ <div id="mynetwork"></div>
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+ <script src = "Sports.js"> </script>
+ <script type="text/javascript">
+ </script>
+ </body>
+</html>
--
GitLab