working through spire example

1 keystream.js

@@ -0,0 +1,17 @@
+var Kefir = require('kefir') 
+
+var keystream  = Kefir.fromEvents(document.body, 'keydown')
+
+var charstream = keystream.map(function (ev) {
+  return String.fromCharCode(ev.which)
+})
+
+var stringStream = charstream.scan(function (acc, cur) {
+  return acc += (cur + ' ')
+})
+
+//side effect 
+//note that it doesnt return anything!
+stringStream.onValue(function (ev) {
+  console.log(ev)
+})

2 left-right.js

@@ -0,0 +1,24 @@
+var $		 = require('jquery')
+var Kefir    	 = require('kefir')
+var pressStream  = Kefir.fromEvents(document.body, 'keydown')
+
+var leftStream = pressStream.filter(function (ev) {
+  if (ev.which == 37) return ev
+}).map(function (ev) { 
+  return -1 
+})
+
+var rightStream = pressStream.filter(function (ev) {
+  if (ev.which == 39) return ev
+}).map(function (ev) {
+  return 1
+})
+
+var posStream = Kefir.merge([leftStream, rightStream]).scan(function (acc, cur) {
+  return acc += cur
+}, 50)
+
+//side effect!
+posStream.onValue(function (pos) {
+  $('#dot').css('left', pos + '%')
+})

3 crossfader.js

@@ -0,0 +1,29 @@
+var $		   = require('jquery')
+var Kefir	   = require('kefir')
+
+var keyFilter      = function (ev, keycode) { if (ev.which == keycode) return ev }
+var rightKeyFilter = function (ev) { return keyFilter(ev, 39) }
+var leftKeyFilter  = function (ev) { return keyFilter(ev, 37) }
+var one 	   = function (ev) { return 1 }
+var minusOne       = function (ev) { return -1 }
+var sum            = function (acc, cur) { return acc += cur }
+var leftGain       = function (pos) { return 100 - pos }
+var rightGain      = function (pos) { return pos }
+
+var setup = function () {
+
+  //streams
+  var pressStream  = Kefir.fromEvents(document.body, 'keydown')
+  var leftStream   = pressStream.filter(leftKeyFilter).map(one)
+  var rightStream  = pressStream.filter(rightKeyFilter).map(minusOne)
+  var dotPosStream = Kefir.merge([leftStream, rightStream]).scan(sum, 50)
+
+  //side-effects
+  dotPosStream.onValue(function (pos)  { $('#dot').css('left', pos + '%') })
+  dotPosStream.map(leftGain).log('set left track gain!')
+  dotPosStream.map(rightGain).log('set right track gain!')
+
+})
+
+//main 
+$(document).on('ready', setup)

4 spire/app/index.js

@@ -0,0 +1,13 @@
+var $ = require('jquery')
+var _ = require('lodash')
+var Kefir = require('kefir')
+var dateSelector = require('./src/dateSelector.js')
+var myCoolGraph = require('./src/myCoolGraph.js')
+
+var setup = function() {
+  dateSelectionStream = dateSelector(document)
+  myCoolGraph(document, dateSelectionStream)
+}
+
+$(document).on('ready', setup)
+

4 spire/app/src/dateSelector.js

@@ -0,0 +1,20 @@
+var $ = require('jquery')
+var Kefir = require('kefir')
+var getSelectorDate = function (ev) { return ev.target.valueAsDate }
+
+var setup = function (doc) {
+
+  //draw html
+  var template = '<input type = "date" id = "dateSelector"> <button id="fetch">fetch my breathing data</button>'
+  doc.write(template)
+
+  //streams
+  var dateSelectorEvents  = Kefir.fromEvents($('#dateSelector'), 'change')
+  var buttonClickStream   = Kefir.fromEvents($('#fetch'), 'click')
+  var dateSelectionStream = dateSelectorEvents.sampledBy(buttonClickStream).map(getSelectorDate)
+
+  //returns a stream of selected dates
+  return dateSelectionStream
+}
+
+module.exports = setup

4 spire/app/src/myCoolGraph.js

@@ -0,0 +1,28 @@
+var $ = require('jquery')
+var _ = require('lodash')
+var spireDataStream = require('./spireAPI.js')
+
+var timeseries    = function (ev) { return ev.dataset.data }
+var datapoint     = function (datum) { return $('<div class="datapoint">yo</div>') }
+var drawDatapoint = function (datum, $container) { $container.append(datapoint(datum)) }
+var drawGraph     = function (data, $container) {
+  $container.empty(); 
+  _.map(data, drawDatapoint)
+}
+
+var setup = function (doc, dateStream) {
+
+  //setup
+  doc.write('<div id="graphContainer"></div>')
+  var $c = $('#graphContainer')
+  var d  = function (data) { drawGraph(data, $c) }
+
+  //streams
+  var breathStream = dateStream.flatMap(spireDataStream)
+  //side-effects
+  breathStream.map(timeseries).log()//.onValue(d)
+
+  return 
+}
+
+module.exports = setup 

4 spire/app/src/spireAPI.js

@@ -0,0 +1,37 @@
+var $ = require('jquery')
+var Kefir = require('kefir')
+//var access_token = '14724763f3541cb6c7bbac74f920836f502faa724406e4c6a5642e996366b31a'
+
+var ajax = function (options) {
+  return Kefir.stream(function(emitter) {
+    var jqXHR = $.ajax(options);
+    jqXHR.done(emitter.emit);
+    jqXHR.fail(function(jqXHR, textStatus, errorThrown) {
+      emitter.error(jqXHR.status === 0 ? 'Connection problem' : jqXHR.responseText);
+    });
+    return function() {
+      jqXHR.abort();
+    }
+  }).take(1).endOnError().toProperty();
+}
+
+
+//returns a promise for a GET to the query string
+var queryOpts = function (type, date) {
+   //assemble query string
+   var url = 'https://www.quandl.com/api/v3/datasets/WIKI/AAPL.json?start_date=1985-05-01&end_date=1997-07-01&order=asc&column_index=4&collapse=quarterly&transformation=rdiff'
+   //var url = 'https://app.spire.io//api/events/' + type 
+   //    //+ '?date=' + date 
+   //    + '&access_token=' + access_token
+   return { url: url }
+}
+
+//returns a stream* from responses to query()'s AJAX request
+var getData = function (date) {
+  //easy interop with the promise api
+  var opts = queryOpts('br', date)
+  var responseStream = ajax(opts)
+  return responseStream
+}
+
+module.exports = getData

4 spire/build.sh

@@ -0,0 +1,2 @@
+watchify app/index.js -o bundle.js
+