BB: Demo Finance Renderer

by kyllle

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/0.6.0/tables-min.css">
<table class="pure-table pure-table-bordered  js-table">
    <thead>
		<tr>
			<th>Symbol</th>
			<th>Open</th>
			<th>High</th>
			<th>Low</th>
            <th>Last</th>
		</tr>
	</thead>
</table>

<script type="text/x-handlebars-template" class="tmpl-stock">
    <td>{{symbol}}</td>
    <td>{{open}}</td>
    <td>{{high}}</td>
    <td>{{low}}</td>
    <td>{{last}}</td>
</script>

SCSS

* {
  -webkit-font-smoothing: antialiased;
}

body {
    padding: 5%;
    font-family: Arial;
}

JavaScript

console.clear();

var stockData = [
    {symbol: "GM", open: 38.87},
    {symbol: "GE", open: 25.40},
    {symbol: "MCD", open: 97.05},
    {symbol: "UAL", open: 69.45},
    {symbol: "WMT", open: 83.24},
    {symbol: "AAL", open: 55.76},
    {symbol: "LLY", open: 76.12},
    {symbol: "JPM", open: 61.75},
    {symbol: "BAC", open: 15.84},
    {symbol: "BA", open: 154.50}
];

function Feed() {
     var interval,
        onChangeHandler;

    var stocks = [
        {symbol: "GM", open: 38.87},
        {symbol: "GE", open: 25.40},
        {symbol: "MCD", open: 97.05},
        {symbol: "UAL", open: 69.45},
        {symbol: "WMT", open: 83.24},
        {symbol: "AAL", open: 55.76},
        {symbol: "LLY", open: 76.12},
        {symbol: "JPM", open: 61.75},
        {symbol: "BAC", open: 15.84},
        {symbol: "BA", open: 154.50}
    ];

    stocks.forEach(function(stock) {
        stock.last = stock.open;
        stock.high = stock.open;
        stock.low = stock.open;
    });

    function simulateChange() {

        var index = Math.floor(Math.random() * stocks.length),
            stock = stocks[index],

            maxChange = stock.open * 0.005,
            change = maxChange - Math.random() * maxChange * 2,
            last;

        change = Math.round(change * 100) / 100;
        change = change === 0 ? 0.01 : change;

        last = stock.last + change;

        if (last > stock.open * 1.15 || last < stock.open * 0.85)
        {
            change = -change;
            last = stock.last + change;
        }

        stock.change = change;
        stock.last = Math.round(last * 100) / 100;
        if (stock.last > stock.high) {
            stock.high = stock.last;
        }
        if (stock.last < stock.low) {
            stock.low = stock.last;
        }

        stock.index = index;

        console.group();
        console.log('Stock', stock);
        console.log('Max Change', maxChange);
        console.groupEnd();
    }

    function start(onChange) {
  ...