#5: Render chart for market module

frontend/stylesheets/style.styl

@@ -70,3 +70,6 @@ dt
     .aggregatedMiners
         .hashrate
             @extend .graph-element
+    .market
+        .latestTrade
+            @extend .graph-element

lib/modules/markets/bitcoincharts.js

@@ -4,13 +4,16 @@ var request = require('request'),
     _ = require('lodash'),
 
     Module = require('../../Module'),
+    setWithHistoricalData = require('../../utils/setWithHistoricalData'),
     intervalTime,
     interval;
 
 module.exports = Module.extend({
     defaults: {
         interval: 60 * 60 * 1e3,
-        symbol: 'mtgoxUSD'
+        symbol: 'mtgoxUSD',
+        chartTimespan: 14 * 24 * 60 * 60 * 1000,
+        chartPrecision: 60 * 60 * 1000
     },
 
     viewId: 'market',
@@ -54,6 +57,8 @@ module.exports = Module.extend({
                 self.set(market);
             }
         });
-    }
+    },
+
+    set: setWithHistoricalData([ 'ask', 'bid', 'close' ], Module.prototype.set)
 
 });

lib/views/market.js

@@ -1,7 +1,31 @@
 'use strict';
 
-var View = require('../View');
+var renderHistoricalDataGraph = require('./mixins/renderHistoricalDataGraph'),
+    View = require('../View'),
+    numberHelper = require('../handlebars/helpers/number'),
+    graphMixin = renderHistoricalDataGraph([
+        {
+            attr: 'bid',
+            color: '#b94a48',
+            name: 'Best Bid'
+        },
+        {
+            attr: 'ask',
+            color: '#468847',
+            name: 'Best Ask'
+        },
+        {
+            attr: 'close',
+            name: 'Latest Trade'
+        }
+    ], '.graph', {
+        yFormatter: function (value) {
+            return numberHelper(value) + ' ' + this.module.get('currency');
+        }
+    }, {
+        renderer: 'line'
+    });;
 
 module.exports = View.extend({
     template: 'market'
-});
+}).extend(graphMixin);

lib/views/mixins/renderHistoricalDataGraph.js

@@ -4,7 +4,7 @@ var Rickshaw = require('rickshaw'),
     _ = require('lodash'),
     timeHelper = require('../../handlebars/helpers/time');
 
-module.exports = function (attributes, element, options) {
+module.exports = function (attributes, element, hoverOptions, graphOptions) {
     return {
         graph: null,
 
@@ -25,22 +25,22 @@ module.exports = function (attributes, element, options) {
         },
 
         initializeGraph: function () {
-            options.yFormatter = options.yFormatter.bind(this);
+            hoverOptions.yFormatter = hoverOptions.yFormatter.bind(this);
 
-            this.graph = new Rickshaw.Graph({
+            this.graph = new Rickshaw.Graph(_.extend({
                 element: this.$(element)[0],
                 height: 120,
                 renderer: 'area',
                 interpolation: 'linear',
                 stroke: true,
                 series: this.getSeries()
-            });
+            }, graphOptions));
             this.detail = new Rickshaw.Graph.HoverDetail(_.extend({
                 graph: this.graph,
                 xFormatter: function (value) {
                     return timeHelper(value * 1000);
                 }.bind(this)
-            }, options));
+            }, hoverOptions));
             this.xAxis = new Rickshaw.Graph.Axis.Time({
                 graph: this.graph
             });

templates/market.hbs

@@ -1,12 +1,16 @@
 <header class="panel-heading">
     <h2 class="panel-title">{{ title }}</h2>
 </header>
-<dl class="panel-body dl-horizontal">
-    <dt class="big-label">Latest Trade:</dt>
-    <dd class="big">{{number close}} {{currency}}</dd>
-    <dt>Best Bid:</dt>
-    <dd>{{number bid}} {{currency}}</dd>
-    <dt>Best Ask:</dt>
-    <dd>{{number ask}} {{currency}}</dd>
-</dl>
+<div class="panel-body">
+    <div class="latestTrade col-xs-12 col-md-3">
+        <div class="graph"></div>
+        <strong>Latest Trade: {{number close}} {{currency}}</strong>
+    </div>
+    <dl class="dl-horizontal col-xs-12 col-md-3">
+        <dt>Best Bid:</dt>
+        <dd>{{number bid}} {{currency}}</dd>
+        <dt>Best Ask:</dt>
+        <dd>{{number ask}} {{currency}}</dd>
+    </dl>
+</div>
 <footer class="text-muted">Updated: {{time lastUpdated}}</footer>

test/specs/lib/modules/market/bitcoinchartsSpec.js

@@ -2,6 +2,7 @@
 
 var chai = require('chai'),
     expect = chai.expect,
+    _ = require('lodash'),
     SandboxedModule = require('sandboxed-module'),
 
     bitcoinChartsAnswer = [
@@ -45,7 +46,7 @@ describe('modules/market/bitcoincharts', function () {
             bitcoincharts = new Bitcoincharts(app, config);
 
         bitcoincharts.on('change', function () {
-            expect(bitcoincharts.toJSON()).to.deep.equal({
+            expect(_.omit(bitcoincharts.toJSON(), 'historicalData')).to.deep.equal({
                 symbol: 'wantedSymbol',
                 ask: 14,
                 bid: 13,
@@ -101,4 +102,18 @@ describe('modules/market/bitcoincharts', function () {
         expect(bitcoincharts.title).to.equal('wantedSymbol Market @ Bitcoin Charts');
     });
 
+    describe('set', function () {
+        it('should add the bid, ask and close values to historicalData', function () {
+            var bitcoinCharts = new Bitcoincharts({}, {}),
+                now = new Date().getTime();
+
+            bitcoinCharts.set({ ask: 1, bid: 2, close: 3 });
+            expect(bitcoinCharts.get('historicalData')).to.have.length(1);
+            expect(bitcoinCharts.get('historicalData')[0].ask).to.equal(1);
+            expect(bitcoinCharts.get('historicalData')[0].bid).to.equal(2);
+            expect(bitcoinCharts.get('historicalData')[0].close).to.equal(3);
+            expect(bitcoinCharts.get('historicalData')[0].timestamp).to.be.within(now-1, now+1);
+        });
+    });
+
 });