First working demo

Author: phoenix2082

app.py

@@ -0,0 +1,35 @@
+from flask import Flask,  render_template, url_for, Response
+import pandas as pd
+
+app = Flask(__name__)
+
+
+
+@app.route("/msa")
+def moving_average_crossover():
+    sma = 20  # specify duration for short term moving average
+    lma = 50  # specify duration for long term moving average
+
+    dummysec = pd.read_csv('./dummysec.csv')
+
+    dummysec['SMA'] = dummysec['Close Price'].rolling(sma).mean()
+    dummysec['LMA'] = dummysec['Close Price'].rolling(lma).mean()
+    dummysec['SMA2'] = dummysec['Close Price'].shift(1).rolling(sma).mean()
+    dummysec['LMA2'] = dummysec['Close Price'].shift(1).rolling(lma).mean()
+
+    # logic to generate 'buy' and 'sell' signals
+    dummysec['Buy'] = dummysec.apply(lambda x: x['Close Price'] if x['SMA'] > x[
+        'LMA'] and x['SMA2'] < x['LMA2'] else 0,
+                                   axis=1)
+
+    dummysec['Sell'] = dummysec.apply(lambda y: -y['Close Price'] if y['SMA'] <
+                                    y['LMA'] and y['SMA2'] > y['LMA2'] else 0,
+                                    axis=1)
+
+    dsec = dummysec[(dummysec['Buy'] != 0.00) | (dummysec['Sell'] != 0.00)]
+    result = dsec[['Close Price', 'Date', 'Buy', 'Sell']].to_json(orient='records') 
+    return Response(result, mimetype='application/json')
+
+@app.route("/")
+def index():
+    return render_template("index.html")

dummysec.csv

@@ -0,0 +1,128 @@
+'use strict';
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var ReactTable = window.ReactTable.default;
+
+var MovingAverageCrossoverTable = function (_React$Component) {
+	_inherits(MovingAverageCrossoverTable, _React$Component);
+
+	function MovingAverageCrossoverTable(props) {
+		_classCallCheck(this, MovingAverageCrossoverTable);
+
+		var _this = _possibleConstructorReturn(this, (MovingAverageCrossoverTable.__proto__ || Object.getPrototypeOf(MovingAverageCrossoverTable)).call(this, props));
+
+		_this.state = { data: [] };
+		return _this;
+	}
+
+	_createClass(MovingAverageCrossoverTable, [{
+		key: 'componentDidMount',
+		value: function componentDidMount() {
+			var _this2 = this;
+
+			axios.get('/msa').then(function (response) {
+				_this2.setState({
+					data: response.data
+				});
+			}).catch(function (error) {
+				// handle error
+				console.log(error);
+			}).finally(function () {
+				// always executed
+			});
+		}
+	}, {
+		key: 'render',
+		value: function render() {
+			var columns = [{
+				Header: 'Date',
+				accessor: 'Date', // String-based value accessors!
+				Cell: function Cell(props) {
+					return React.createElement(
+						'div',
+						{ style: { textAlign: 'center' } },
+						React.createElement(
+							'span',
+							null,
+							props.value
+						)
+					);
+				}
+			}, {
+				Header: 'Close Price',
+				accessor: 'Close Price', // String-based value accessors!
+				Cell: function Cell(props) {
+					return React.createElement(
+						'div',
+						{ style: { textAlign: 'center' } },
+						React.createElement(
+							'span',
+							{ className: 'number' },
+							props.value
+						)
+					);
+				}
+			}, {
+				Header: 'Buy',
+				accessor: 'Buy',
+				width: 200,
+				Cell: function Cell(props) {
+					return React.createElement(
+						'div',
+						{ style: {
+								//width: `${props.value}%`,
+								height: '100%',
+								backgroundColor: props.value > 0 ? '#85cc00' : '#FFFFFF',
+								borderRadius: '2px',
+								textAlign: 'center'
+							}
+						},
+						React.createElement(
+							'span',
+							{ className: 'number' },
+							props.value
+						)
+					);
+				} // Custom cell components!
+			}, {
+				Header: 'Sell',
+				accessor: 'Sell',
+				width: 200,
+				Cell: function Cell(props) {
+					return React.createElement(
+						'div',
+						{ style: {
+								// width: `${props.value}%`,
+								height: '100%',
+								backgroundColor: props.value < 0 ? '#ff2e00' : '#ffffff',
+								borderRadius: '2px',
+								textAlign: 'center'
+							}
+						},
+						React.createElement(
+							'span',
+							{ className: 'number' },
+							props.value
+						)
+					);
+				} // Custom cell components!
+			}];
+
+			return React.createElement(ReactTable, { data: this.state.data, columns: columns,
+				defaultPageSize: 10 });
+		}
+	}]);
+
+	return MovingAverageCrossoverTable;
+}(React.Component);
+
+var domContainer = document.querySelector('#macs');
+
+ReactDOM.render(React.createElement(MovingAverageCrossoverTable, null), domContainer);