Skip to content
Snippets Groups Projects
Commit ded3544a authored by Sanjeevani Avasthi's avatar Sanjeevani Avasthi
Browse files

Update frontend/Dockerfile, frontend/Makefile, frontend/nginx.conf,... 

Update frontend/Dockerfile, frontend/Makefile, frontend/nginx.conf, frontend/static/aurin.png, frontend/static/index.html, frontend/static/Sports.css, frontend/static/Sports.js files
parent bc3dcb9c
Branches
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
frontend/Dockerfile 0 → 100644
+ 5
− 0
View file @ ded3544a
FROM nginx:latest
COPY ./static /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
frontend/Makefile 0 → 100644
+ 8
− 0
View file @ ded3544a
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}
frontend/nginx.conf 0 → 100644
+ 22
− 0
View file @ ded3544a
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;
}
}
frontend/static/Sports.css 0 → 100644
+ 59
− 0
View file @ ded3544a
#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;
}
#center {
margin-left: 200px;
}
\ No newline at end of file
frontend/static/Sports.js 0 → 100644
+ 373
− 0
View file @ ded3544a
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/retweets_followers/_view/retweets_followers?group=true',
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"][1]);
if(data_rows[row]["key"][1] == sport)
{
city_by_sport.push(data_rows[row]["key"][0]);
console.log(data_rows[row]["value"][0]["sum"]);
console.log(data_rows[row]["value"][0]["count"]);
var avg = data_rows[row]["value"][0]["sum"] / data_rows[row]["value"][0]["count"] ;
counts_by_city.push(avg);
addData(myChart2,data_rows[row]["key"][0],avg);
}
}
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: '# Average of Tweets',
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();
}
frontend/static/aurin.png 0 → 100644
+ 0
− 0
View file @ ded3544a
frontend/static/aurin.png

126 KiB

frontend/static/index.html 0 → 100644
+ 89
− 0
View file @ ded3544a
<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">Sports Engagement by City</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>
<label class="header">English Proficiency and Tweets</label>
<div id="center"><img src="aurin.png"></div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src = "Sports.js"> </script>
<script type="text/javascript">
</script>
</body>
</html>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment