From f87a8c595a3832c46807fa2737128f08112413a1 Mon Sep 17 00:00:00 2001 From: Sanjeevani Avasthi <savasthi@student.unimelb.edu.au> Date: Wed, 26 May 2021 13:37:00 +1000 Subject: [PATCH] Deleted frontend/static/Sports.css, frontend/static/Sports.js, frontend/static/index.html files --- frontend/static/Sports.css | 56 ------ frontend/static/Sports.js | 370 ------------------------------------- frontend/static/index.html | 87 --------- 3 files changed, 513 deletions(-) delete mode 100644 frontend/static/Sports.css delete mode 100644 frontend/static/Sports.js delete mode 100644 frontend/static/index.html diff --git a/frontend/static/Sports.css b/frontend/static/Sports.css deleted file mode 100644 index 63a744a..0000000 --- a/frontend/static/Sports.css +++ /dev/null @@ -1,56 +0,0 @@ -#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 deleted file mode 100644 index 9da68e1..0000000 --- a/frontend/static/Sports.js +++ /dev/null @@ -1,370 +0,0 @@ -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 deleted file mode 100644 index d665a31..0000000 --- a/frontend/static/index.html +++ /dev/null @@ -1,87 +0,0 @@ -<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