-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
141 lines (120 loc) · 5.66 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<!doctype html>
<html ng-App="sharesPortfolio">
<head>
<meta charset="utf-8">
<title>Shares Portfolio</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<h2 class="tophead">Shares Portfolio Builder</h2>
<div ng-controller="stockCtrl"> <!-- Defining Controller -->
<!--************************Section 1 Begins*************************-->
<section class="pickstocks">
<label class="basiclabel">Pick Stocks</label>
<div class="infoone">
<button class="filtertext" type="submit"> Apply Filters</button>
</div>
<div class="stockpage">
<ul id="stocklist">
<li ng-repeat="(key,value) in stocks | objLimitTo:8 track by $index">
<span class="keyvalue"> {{key}} </span> <!-- Stock Display -->
<span class="keyvalue">{{"₹" + value}}</span> <!-- Price Display -->
<span class="fa fa-plus plus" ng-click="addToTable(key, value, $index)"></span><!-- Add stocks to table -->
</li>
</ul>
<a href="#" class="pages1">Previous</a>
<p class="showstock">Showing matching stocks</p>
<a href="#" class="pages2">Next</a>
</div>
</section>
<!--************************Section 1 Ends*************************-->
<!--************************Section 2 Begins*************************-->
<section class="pickstocks">
<label class="basiclabel">Manage Portfolio</label>
<table>
<thead>
<tr>
<th>STOCK</th>
<th>PRICE</th>
<th>SHARES</th>
<th>WEIGHT</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="stock in stocksArray" class="portfoliokey">
<td>{{stock.key}}</td> <!-- Stock Display -->
<td class="portfoliovalue">{{"₹" + stock.value}}</td> <!-- Price Display -->
<td class="changer">
<input type="button" id="num1" ng-click="decrementValue( stock)" value="-"><!-- Incrementer and Decrementer -->
<input type="button" id="number{{ stock.index }}" value="{{stock.shares}}" />
<input type="button" ng-click="incrementValue(stock)" value="+" />
</td>
<td>{{((stock.individualStock())/getNetWorth()*100 | number:2) + "%"}}</td> <!-- Weight Calculation-->
<td><span class="fa fa-trash-o" ng-click="remove($index)"></span></td> <!-- Delete Stock -->
</tr>
</tbody>
</table>
<div class="chartjs">
<canvas id="stockchart"></canvas> <!-- Graph Representation -->
</div>
<div class="networth">
<h3>Networth: {{"₹" +getNetWorth()}}</h3> <!-- Networth Calculation -->
</div>
<div class="peratio">
<h3>P/E Ratio: {{getPortfolioPE()}}</h3> <!-- P/E Ratio Calculation -->
</div>
</section>
<!--************************Section 2 Ends*************************-->
</div> <!-- Controller Ends -->
<!--************************Load Chart.js*************************-->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<!-- ****************************** Begin of Filter************************* -->
<script>
app.filter('objLimitTo', [function() {
return function(obj, limit) {
if (obj) {
var keys = Object.keys(obj);
if (keys.length < 1) {
return [];
}
}
var result = {},
count = 0;
angular.forEach(keys, function(key) {
if (count >= limit) {
return false;
}
result[key] = obj[key];
count++;
});
return result;
};
}]);
</script>
<!-- ****************************** End of Filter************************* -->
<!--****************************** Defining values of Graph************************* -->
<script>
new Chart(document.getElementById("stockchart"), {
"type": "line",
"data": {
"labels": ["24-JUN", "25-JUN", "26-JUN", "27-JUN", "28-JUN"],
"datasets": [{
"label": "STOCK",
"data": [1043.55, 1014.75, 1019.85, 999.05, 999.5],
"fill": true,
"borderColor": "rgba(75, 89, 192,50)",
"lineTension": 0.1
}]
},
"options": {}
});
</script>
<!-- //****************************** End of Graph************************* -->
</body>
</html>