@barchart/portfolio-client-js 1.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md ADDED
@@ -0,0 +1,26 @@
1
+ # @barchart/portfolio-client-js
2
+ ## JavaScript library for interfacing with Barchart's Portfolio API
3
+
4
+ ## Documentation
5
+
6
+ The code is documented with [JSDoc](http://usejsdoc.org/). While the output hasn't been committed to source control, you can generate the documentation by using the following commands:
7
+
8
+ > npm install
9
+ > gulp document
10
+
11
+
12
+ ## Development
13
+
14
+ Gulp is used to check "linting" and to run unit tests.
15
+
16
+ > nvm use 6.11.1
17
+ > npm install
18
+ > gulp lint
19
+ > gulp test
20
+
21
+
22
+ ## Build
23
+
24
+ Polyfills for ES6 are required:
25
+
26
+ * Promise
@@ -0,0 +1,124 @@
1
+ body {
2
+ font-family: "Gill Sans MT";
3
+ }
4
+ h4 {
5
+ margin: 0px;
6
+ }
7
+
8
+ .container-center-outer {
9
+ height: 100%;
10
+ width: 100%;
11
+
12
+ display: table;
13
+ }
14
+ .container-center-inner {
15
+ display: table-cell;
16
+ text-align: center;
17
+ vertical-align: middle;
18
+ }
19
+
20
+ .center {
21
+ text-align: center;
22
+ }
23
+
24
+ .header {
25
+ position: absolute;
26
+ z-index: 1000;
27
+ top: 0px;
28
+ left: 0px;
29
+ right: 0px;
30
+ height: 50px;
31
+ background-color: #29506D;
32
+ color: #FFFFFF;
33
+ padding-left: 20px;
34
+ padding-right: 20px;
35
+ }
36
+ .header h4 {
37
+ line-height: 50px;
38
+ margin-top: 0px;
39
+ margin-bottom: 0px;
40
+ }
41
+ .header .header-action-buttons {
42
+ margin-left: 20px;
43
+ }
44
+ .header .text-button {
45
+ line-height: 50px;
46
+ margin-right: 10px;
47
+ }
48
+
49
+ .header input {
50
+ position: relative;
51
+ top: -4px;
52
+ }
53
+
54
+ .header .input-group {
55
+ position: relative;
56
+ top: 6px;
57
+ }
58
+
59
+ .header .input-group input {
60
+ top: 1px;
61
+ }
62
+
63
+ .header .header-action-buttons .btn-group {
64
+ margin-top: 8px;
65
+ }
66
+
67
+ .main {
68
+ position: absolute;
69
+ height: auto;
70
+ top: 50px;
71
+ bottom: 40px;
72
+ left: 0px;
73
+ right: 0px;
74
+ overflow: auto;
75
+ padding-top: 20px;
76
+ padding-left: 20px;
77
+ padding-right: 20px;
78
+ }
79
+
80
+ .main .login {
81
+ margin: auto;
82
+ width: 300px;
83
+ }
84
+
85
+ .footer {
86
+ position: absolute;
87
+ bottom: 0px;
88
+ left: 0px;
89
+ right: 0px;
90
+ height: 40px;
91
+ background-color: #496D89;
92
+ opacity: 0.99;
93
+ z-index: 1;
94
+ padding-left: 20px;
95
+ padding-right: 20px;
96
+ }
97
+ .footer h4 {
98
+ font-size: 14px;
99
+ line-height: 40px;
100
+ margin-top: 0px;
101
+ margin-bottom: 0px;
102
+ color: white;
103
+ }
104
+
105
+ .watchlist-action-buttons .text-button {
106
+ margin-left: 10px;
107
+ }
108
+
109
+ .text-button {
110
+ cursor: pointer;
111
+ }
112
+ .text-button:hover {
113
+ text-shadow: 0 0 1.2em #00FFFF;
114
+ }
115
+ .text-button.text-button-black {
116
+ color: #555555;
117
+ }
118
+ .text-button.text-button-black:hover {
119
+ text-shadow: 0 0 1.2em #FF0000;
120
+ }
121
+
122
+ .btn {
123
+ text-shadow: none;
124
+ }
@@ -0,0 +1,288 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8"/>
5
+
6
+ <title>Barchart Portfolio Client API</title>
7
+
8
+ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
9
+ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
10
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" type="text/css">
11
+ <link rel="stylesheet" href="example.css" type="text/css">
12
+
13
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.23.0/polyfill.min.js"></script>
14
+
15
+ <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
16
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
17
+ <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
18
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
19
+
20
+ <script src="example.js"></script>
21
+
22
+ <script type="text/javascript">
23
+ 'use strict';
24
+
25
+ var PageModel = function() {
26
+ var that = this;
27
+
28
+ that.gateway = null;
29
+
30
+ that.user = ko.observable('22e59613-d393-4069-814c-f0b5a3e4b31e');
31
+
32
+ that.connected = ko.observable(false);
33
+ that.connecting = ko.observable(false);
34
+
35
+ that.activeTemplate = ko.observable('disconnected-template');
36
+ that.console = ko.observableArray([ ]);
37
+
38
+ that.portfolio = ko.observable();
39
+ that.position = ko.observable();
40
+ that.transaction = ko.observable();
41
+
42
+ that.clientVersion = ko.observable(Barchart.Portfolio.version);
43
+
44
+ var getPortfolios = function() {
45
+ var action = 'portfolioGateway.readPortfolios()';
46
+
47
+ that.gateway.readPortfolios(that.portfolio() || null)
48
+ .then((data) => {
49
+ writeConsoleText(action, true);
50
+ writeConsoleObject(data);
51
+ }).catch((e) => {
52
+ writeConsoleText(action, true);
53
+ writeConsoleObject(e);
54
+
55
+ that.setConsoleMode();
56
+ });
57
+ };
58
+ var getPositions = function() {
59
+ var action = 'portfolioGateway.readPositions()';
60
+
61
+ that.gateway.readPositions(that.portfolio() || null, that.position() || null)
62
+ .then((data) => {
63
+ writeConsoleText(action, true);
64
+ writeConsoleObject(data);
65
+ }).catch((e) => {
66
+ writeConsoleText(action, true);
67
+ writeConsoleObject(e);
68
+
69
+ that.setConsoleMode();
70
+ });
71
+ };
72
+ var getTransactions = function() {
73
+ var action = 'portfolioGateway.readTransactions()';
74
+
75
+ var portfolio = that.portfolio();
76
+ var position = that.position();
77
+
78
+ if (!portfolio) {
79
+ toastr.info('A "portfolio" is required.');
80
+ return;
81
+ }
82
+
83
+ that.gateway.readTransactions(that.portfolio(), that.position() || null)
84
+ .then((data) => {
85
+ writeConsoleText(action, true);
86
+ writeConsoleObject(data);
87
+ }).catch((e) => {
88
+ writeConsoleText(action, true);
89
+ writeConsoleObject(e);
90
+
91
+ that.setConsoleMode();
92
+ });
93
+ };
94
+ var getTransactionsFormatted = function() {
95
+ var action = 'portfolioGateway.getTransactionsReport()';
96
+
97
+ var portfolio = that.portfolio();
98
+ var position = that.position();
99
+
100
+ if (!portfolio) {
101
+ toastr.info('A "portfolio" is required.');
102
+ return;
103
+ }
104
+
105
+ that.gateway.getTransactionsFormatted(that.portfolio(), that.position() || null)
106
+ .then((data) => {
107
+ writeConsoleText(action, true);
108
+ writeConsoleObject(data);
109
+ }).catch((e) => {
110
+ writeConsoleText(action, true);
111
+ writeConsoleObject(e);
112
+
113
+ that.setConsoleMode();
114
+ });
115
+ };
116
+
117
+ that.modes = ko.observableArray([
118
+ { text: 'Get Portfolios', action: getPortfolios },
119
+ { text: 'Get Positions', action: getPositions },
120
+ { text: 'Get Transactions', action: getTransactions },
121
+ { text: 'Get Transactions (Formatted)', action: getTransactionsFormatted }
122
+ ]);
123
+
124
+ that.mode = ko.observable(that.modes()[0]);
125
+
126
+
127
+ that.canConnect = ko.computed(function() {
128
+ return !that.connecting() && !that.connected();
129
+ });
130
+ that.canDisconnect = ko.computed(function() {
131
+ return that.connected();
132
+ });
133
+
134
+ var writeConsoleText = function(text, clear) {
135
+ if (clear) {
136
+ that.console.removeAll();
137
+ }
138
+
139
+ that.console.push(text);
140
+ };
141
+
142
+ var writeConsoleObject = function(data) {
143
+ that.console.push(JSON.stringify(data, null, 2));
144
+ };
145
+
146
+ that.setConsoleMode = function() {
147
+ that.activeTemplate('portfolio-console-template');
148
+ };
149
+
150
+ that.connect = function() {
151
+ that.disconnect();
152
+
153
+ if (!that.user()) {
154
+ return;
155
+ }
156
+
157
+ that.connecting(true);
158
+
159
+ Barchart.Portfolio.PortfolioGateway.forDevelopment(Barchart.Portfolio.JwtGateway.forDevelopmentClient(that.user()))
160
+ .then((gateway) => {
161
+ that.gateway = gateway;
162
+
163
+ that.connecting(false);
164
+ that.connected(true);
165
+
166
+ that.setConsoleMode();
167
+
168
+ getPortfolios();
169
+ });
170
+ };
171
+ that.disconnect = function() {
172
+ if (that.gateway === null) {
173
+ return;
174
+ }
175
+
176
+ if (that.gateway) {
177
+ that.gateway.dispose();
178
+ that.gateway = null;
179
+ }
180
+
181
+ that.console.removeAll();
182
+
183
+ that.connecting(false);
184
+ that.connected(false);
185
+
186
+ that.activeTemplate('disconnected-template');
187
+ };
188
+
189
+ that.setMode = function(mode) {
190
+ that.mode(mode);
191
+
192
+ that.execute();
193
+ };
194
+ that.execute = function() {
195
+ that.mode().action();
196
+ };
197
+
198
+ that.handleLoginKeypress = function(d, e) {
199
+ var enterKey = e.keyCode === 13;
200
+
201
+ if (enterKey) {
202
+ that.connect();
203
+ }
204
+
205
+ return !enterKey;
206
+ };
207
+ };
208
+
209
+ $(document).ready(function() {
210
+ var pageModel = new PageModel();
211
+
212
+ ko.applyBindings(pageModel, $('body')[0]);
213
+ });
214
+ </script>
215
+
216
+ <script type="text/html" id="disconnected-template">
217
+ <div class="container-center-outer">
218
+ <div class="container-center-inner">
219
+ <form class="form-horizontal login">
220
+ <div class="form-group" data-bind="css: { 'has-error': user().length === 0 }, event: { keypress: handleLoginKeypress }">
221
+ <label class="pull-left">User</label>
222
+ <input class="form-control" data-bind="textInput: user" type="text" placeholder="User">
223
+ </div>
224
+ <div class="form-group buttons">
225
+ <button class="form-control btn btn-primary" type="button" data-bind="click: connect, enable: canConnect">Connect</button>
226
+ </div>
227
+ </form>
228
+ </div>
229
+ </div>
230
+ </script>
231
+
232
+ <script type="text/html" id="portfolio-header-template">
233
+ <div class="pull-left">
234
+ <h4 class="pull-left">Barchart Portfolio API <span data-bind="visible: connected"></span></h4>
235
+
236
+ <div class="pull-left header-action-buttons form-inline" style="margin-top: 12px;" data-bind="visible: connected() === true">
237
+ <input class="form-control" data-bind="value: portfolio" type="text" placeholder="Portfolio">
238
+ <input class="form-control" data-bind="value: position" type="text" placeholder="Position">
239
+ <input class="form-control" data-bind="value: transaction" type="text" placeholder="Transaction">
240
+ </div>
241
+ </div>
242
+
243
+ <div class="pull-left">
244
+ <div class="pull-left header-action-buttons form-inline" data-bind="visible: connected() === true">
245
+ <div class="dropdown" style="margin-top: 8px;">
246
+ <button class="btn btn-default dropdown-toggle" style="width: 200px;" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
247
+ <span data-bind="text: mode().text"></span>
248
+ </button>
249
+ <ul class="dropdown-menu" data-bind="foreach: modes">
250
+ <li class="center"><a href="#" data-bind="text: $data.text, click: function() { $parent.setMode($data); }"></a></li>
251
+ </ul>
252
+ </div>
253
+ </div>
254
+
255
+ <div class="pull-left header-action-buttons form-inline" data-bind="visible: connected() === true">
256
+ <span class="text-button glyphicon glyphicon-play" data-bind="click: execute"></span>
257
+ </div>
258
+ </div>
259
+
260
+ <div class="pull-right">
261
+ <div class="header-action-buttons pull-right form-inline" data-bind="visible: connected() === true">
262
+ <span class="text-button glyphicon glyphicon-remove" data-bind="click: disconnect"></span>
263
+ </div>
264
+ </div>
265
+ </script>
266
+
267
+ <script type="text/html" id="portfolio-console-template">
268
+ <div data-bind="foreach: console">
269
+ <pre data-bind="text: $data" style="font-size: 10px;"></pre>
270
+ </div>
271
+ </script>
272
+
273
+ <script type="text/html" id="footer-template">
274
+ <h4 class="pull-left" data-bind="visible: connected">
275
+ Client Version: <span data-bind="text: clientVersion"></span>
276
+ </h4>
277
+ <h4 class="pull-right">
278
+ User: <span data-bind="text: user"></span>
279
+ </h4>
280
+ </script>
281
+ </head>
282
+ <body>
283
+ <div class="header" data-bind="template: { name: 'portfolio-header-template' }"></div>
284
+ <div class="main" data-bind="template: { name: activeTemplate }"></div>
285
+ <div class="footer" data-bind="template: { name: 'footer-template' }">
286
+ </div>
287
+ </body>
288
+ </html>