diff --git a/webscraper/css/main.css b/webscraper/css/main.css index b6137f6..22824bb 100644 --- a/webscraper/css/main.css +++ b/webscraper/css/main.css @@ -1,28 +1,27 @@ body { - background: #f5f5f5; - vertical-align: baseline; - line-height: 1.1; - font-family: "Source Sans Pro","Helvetica Neue",Helvetica,Arial,sans-serif; - font-size: 14px; - margin: 0; - padding: 0; - border: 0; - display: block; + background: #f5f5f5; + vertical-align: baseline; + font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 14px; + margin: 0; + padding: 0; + border: 0; + display: block; } tr { - width: 100%; + width: 100%; } thead { - background-color: #ddd; - color: #222; - width: 100%; + background-color: #ddd; + color: #222; + width: 100%; } table { - border-collapse:collapse; - border:0; + border-collapse: collapse; + border: 0; margin: 0; padding: 0; vertical-align: baseline; @@ -32,31 +31,51 @@ table { overflow-y: hidden } -th, td { - border-bottom: 1px solid rgba(0,0,0,0.09); - font-size: 0.95em; +th, +td { + border-bottom: 1px solid rgba(0, 0, 0, 0.09); + font-size: 0.8em !important; +} + +.label { + font-size: 0.95em !important; } li { - display: list-item; - font-size: 1.1em; + display: list-item; + font-size: 1.1em; } ul { - list-style: none; - padding: 0; - margin: 0; + list-style: none; + padding: 0; + margin: 0; } .file { - padding: 0.5em; + padding: 0.5em; } -.amount-staked, -.amount-returned, -.total-profit { - border: 1px solid rgba(0,0,0, 0.15); - background: #fff; - border-radius: 4px; - margin-top: 0.5em; -} \ No newline at end of file +.bet-date, +.bet-event { + border-radius: 2px; +} + +.boldFont { + font-weight: bold; +} + +.w30 { + width: 30%; + float: left; +} + +.w70 { + float: left; + width: 70%; +} + +#container { + max-width: 600px; + margin: 0 auto +} diff --git a/webscraper/index.html b/webscraper/index.html index 5c57fe5..7c40d92 100644 --- a/webscraper/index.html +++ b/webscraper/index.html @@ -17,7 +17,7 @@
@@ -42,41 +42,18 @@
-
+
-
-

Total Amount Staked

-
-
- 100 -
-
-
-
-
-
-

Total Amount Returned

-
-
- 100 -
-
-
-
-
-
-
Total Profit
-
-
- 100 +
-
- - - + + + + + diff --git a/webscraper/scripts/index.js b/webscraper/scripts/index.js index 84f0d34..b9b6c25 100644 --- a/webscraper/scripts/index.js +++ b/webscraper/scripts/index.js @@ -32,21 +32,18 @@ var self = this; data.forEach(function(element, index) { - pubSub.publish("calculateProfit", [element]); + pubSub.publish("calculateProfit", [element]); pubSub.publish("betLoaded", [element]); }); - console.log(betCalculator.profit); - console.log(betCalculator.bets); - console.log(betCalculator.totalStaked); - console.log(betCalculator.totalReturned); + pubSub.publish("dataLoadComplete", data); } }; var betCalculator = { - totalStaked: 0.0, - totalReturned: 0.0, + totalStaked: 0.0, + totalReturned: 0.0, profit: 0.0, betStake: 0.0, betReturn: 0.0, @@ -69,12 +66,127 @@ }; + var statsPanel = (function() { + + var panel = { + mainEle: null, + panelBody: null, + + init: function() { + this.initElements(); + }, + + initElements: function() { + this.panelBody = document.querySelector('.js-stats'); + }, + + createStatDisplayElement: function(name, value) { + var div = document.createElement("div"); + div.className = "stat"; + + var p = document.createElement("div"); + p.className = "w30"; + p.innerText = name; + + var val = document.createElement("div") + val.className = "w70 boldFont"; + val.innerText = value; + + div.appendChild(p); + div.appendChild(val); + + return div; + }, + + createPieChart: function() { + var self = this; + var series = self.createSeries(); + console.log(series) + + Highcharts.chart('container', { + chart: { + plotBackgroundColor: null, + plotBorderWidth: null, + plotShadow: false, + type: 'pie' + }, + title: { + enabled: false, + text: "" + }, + + tooltip: { + pointFormat: '{series.name}: {point.percentage:.1f}%' + }, + plotOptions: { + pie: { + allowPointSelect: true, + cursor: 'pointer', + dataLabels: { + enabled: false, + format: '{point.name}: {point.percentage:.1f} %', + style: { + color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black' + } + } + } + }, + series: series + }); + }, + + createSeries: function() { + var output = []; + var result = {}; + + result.name = 'Percentage'; + result.colorByPoint = true; + result.data = []; + + var won = parseInt(betModel.getNumberOfBetsWon()); + var lost = parseInt(betModel.getNumberOfBetsLost()); + var pushed = parseInt(betModel.getNumberOfBetsPushed()); + var total = parseInt(betModel.getNumberOfBets()); + + var w = { + name: 'Won', + y: (won/total), + color: '#5cb85c' + }; + + var l = { + name: 'Lost', + y: (lost/total), + color: '#d9534f' + }; + + var p = { + name: 'pushed', + y: (pushed/total), + color: '#f0ad4e' + } + + result.data.push(w); + result.data.push(l); + result.data.push(p); + + output.push(result); + + return output; + } + }; + + return panel; + })(); + var betView = { betResult: null, betEvent: null, + statsPanel: statsPanel, init: function() { this.initElements(); + this.statsPanel.init(); }, initElements: function() { @@ -82,63 +194,73 @@ this.betEvent = document.querySelector('.bet-event'); }, - addValuesToElements: function(e) { - var date = e['bet_date']; - var event = e['bet_event']; - var result = e['bet_result']; - + createNewRow: function() { var tbody = document.querySelector('.bet-body'); var newRow = tbody.insertRow(tbody.rows.length); newRow.className = "bet"; - var dateCell = newRow.insertCell(0); - var eventCell = newRow.insertCell(1); - var marketCell = newRow.insertCell(2); - var stakeCell = newRow.insertCell(3); - var returnCell = newRow.insertCell(4) - var resultCell = newRow.insertCell(5); - + return newRow; + }, + addBetToDisplay: function(bet) { + var row = this.createNewRow(); - var dateText = document.createTextNode(date); - dateCell.className = "bet-date"; + for (var i = 0; i < 6; i++) { + + } + + var dateCell = row.insertCell(0); + var eventCell = row.insertCell(1); + var marketCell = row.insertCell(2); + var stakeCell = row.insertCell(3); + var returnCell = row.insertCell(4) + var resultCell = row.insertCell(5); - var e = event.split("("); - var event = e[0]; - var betType = e[1].replace(")", ""); + var dateText = document.createTextNode(bet.date); + dateCell.className = "bet-date"; - var eventText = document.createTextNode(event); + var eventText = document.createTextNode(bet.event); eventCell.className = "bet-event"; - var marketText = document.createTextNode(betType); + var marketText = document.createTextNode(bet.market); marketCell.className = "bet-type"; - var resultText = document.createTextNode(result); - if (result === "Won") { + var resultText = document.createTextNode(bet.result); + if (bet.result === "Won") { + var success = document.createElement("span") success.className = "label label-success"; resultCell.className = "bet-result"; success.appendChild(resultText); resultCell.appendChild(success); - } else if (result === "Lost"){ - var loss = document.createElement("span") + + betModel.betsWon += 1; + + } else if (bet.result === "Lost") { + + var loss = document.createElement("span") loss.className = "label label-danger"; resultCell.className = "bet-result"; loss.appendChild(resultText); resultCell.appendChild(loss); - } - else{ - var push = document.createElement("span") + + betModel.betsLost += 1; + + } else { + + var push = document.createElement("span") push.className = "label label-warning"; resultCell.className = "bet-result"; push.appendChild(resultText); resultCell.appendChild(push); + + betModel.betsPushed += 1; } - var stakeAmount = document.createTextNode(betCalculator.betStake) + var stakeAmount = document.createTextNode(bet.stake) stakeCell.className = "bet-stake"; - var returnAmount = document.createTextNode(betCalculator.betReturn); + var returnAmount = document.createTextNode(bet.return); returnCell.className = "bet-return"; dateCell.appendChild(dateText); @@ -146,6 +268,24 @@ marketCell.appendChild(marketText); stakeCell.appendChild(stakeAmount); returnCell.appendChild(returnAmount); + + }, + + createPanelView: function(d) { + var numBets = this.statsPanel.createStatDisplayElement("# Bets", betModel.getNumberOfBets()); + this.statsPanel.panelBody.appendChild(numBets); + + var totalStaked = this.statsPanel.createStatDisplayElement("Staked(€)", betModel.getTotalAmountStaked()); + this.statsPanel.panelBody.appendChild(totalStaked); + + var totalReturned = this.statsPanel.createStatDisplayElement("Returned(€)", betModel.getTotalAmountReturned()); + this.statsPanel.panelBody.appendChild(totalReturned); + + var pieChart = document.createElement("div"); + pieChart.id = "container"; + this.statsPanel.panelBody.appendChild(pieChart); + + this.statsPanel.createPieChart(); }, createBetElement: function(r, e) { @@ -163,18 +303,99 @@ } }; - var betController = { + var dataExtractor = { + extract: function(data) { + var output = {}; + + var betDate = data['bet_date']; + var event = data['bet_event']; + var betResult = data['bet_result']; + var betStake = data["bet_stake"]; + var betReturn = data["bet_return"]; + var event = event.split("("); + var betEvent = event[0]; + var market = event[1].replace(")", ""); + + output.date = betDate; + output.event = betEvent; + output.result = betResult; + output.stake = betStake; + output.return = betReturn; + output.market = market; + + return output; + } + } + + var betController = { + betView: betView, + betModel: betModel, + dataExtractor: dataExtractor, + + betLoaded: function(bet) { + var result = dataExtractor.extract(bet); + this.betView.addBetToDisplay(result); + betModel.addBet(result); + } }; var betModel = { - bets: {} + bets: [], + totalAmountStaked: 0.0, + totalAmountReturned: 0.0, + betsWon: 0, + betsLost: 0, + betsPushed: 0, + + getNumberOfBets: function() { + return this.bets.length; + }, + + addBet: function(bet) { + this.bets.push(bet); + }, + + getNumberOfBetsWon: function() { + return this.betsWon; + }, + + getNumberOfBetsLost: function() { + return this.betsLost; + }, + + getNumberOfBetsPushed: function() { + return this.betsPushed; + }, + + getTotalAmountStaked: function() { + var self = this; + self.totalAmountStaked = 0.0; + + this.bets.forEach(function(bet) { + self.totalAmountStaked += parseFloat(bet.stake); + }); + + return this.totalAmountStaked; + }, + + getTotalAmountReturned: function(bet) { + var self = this; + self.totalAmountReturned = 0.0; + + this.bets.forEach(function(bet) { + self.totalAmountReturned += parseFloat(bet.return); + }); + + return this.totalAmountReturned; + } } var pubSub = { cache: { "betLoaded": [], - "calculateProfit": [] + "calculateProfit": [], + "dataLoadComplete": [] }, subscribe: function(e, fn, scope) { @@ -201,7 +422,8 @@ fileUpload.init(); betView.init(); - pubSub.subscribe("betLoaded", betView.addValuesToElements, betView); + pubSub.subscribe("betLoaded", betController.betLoaded, betController); pubSub.subscribe("calculateProfit", betCalculator.calculateProfit, betCalculator); + pubSub.subscribe("dataLoadComplete", betView.createPanelView, betView); })();