Merge pull request #4 from marks/zoom-to-filtered-data

timwis#150 add zoom functionality to datetime

src/scripts/views/datetime.js

@@ -1,3 +1,4 @@
+var $ = require('jquery')
 var _ = require('underscore')
 var BaseChart = require('./basechart')
 var numberFormatter = require('../util/number-formatter')
@@ -92,11 +93,24 @@ module.exports = BaseChart.extend({
 
     _.bindAll(this, 'onClick')
   },
+  events: {
+    'click .toggle-base-collection-link': 'onClickToggleBaseCollectionLink',
+    'click .zoom-to-filtered-collection-link': 'onClickZoomToFilteredCollectionLink'
+  },
   render: function () {
     BaseChart.prototype.render.apply(this, arguments)
 
     // Listen to when the user selects a range
     this.chart.chartCursor.addListener('selected', this.onClick)
+
+    if(_.isEmpty(this.filteredCollection.getFilters())){
+      this.$('.toggle-base-collection').hide()
+      this.$('.zoom-to-filtered-collection').hide()
+    } else {
+      this.$('.toggle-base-collection').show()
+      this.$('.zoom-to-filtered-collection').show()
+    }
+
   },
   // When the user clicks on a bar in this chart
   onClick: function (e) {
@@ -130,5 +144,47 @@ module.exports = BaseChart.extend({
         ]
       }
     })
+  },
+    onClickToggleBaseCollectionLink: function (e) {
+    var target = $(e.target)
+    // If target was the text, change target to the icon
+    if(!target.hasClass('toggle-base-collection-icon')){
+      target = target.children('.toggle-base-collection-icon')
+    }
+    // If the toggle is currently on, hide the first graph (base collection)
+    if(target.hasClass("fa-toggle-on")){
+      this.chart.hideGraph(this.chart.graphs[0])
+    } else { 
+      this.chart.showGraph(this.chart.graphs[0])
+    }
+    // No matter what, toggle the icons classes to show the other one
+    target.filter('span.fa').toggleClass("fa-toggle-on")
+    target.filter('span.fa').toggleClass("fa-toggle-off")
+    e.preventDefault()
+  }, 
+  onClickZoomToFilteredCollectionLink: function (e) {
+    var target = $(e.target)
+    // If target was the text, change target to the icon
+    if(!target.hasClass('zoom-to-filtered-collection-icon')){
+      target = target.children('.zoom-to-filtered-collection-icon')
+    }
+
+    // If the toggle is currently on, hide the first graph (base collection)
+    if(target.hasClass("fa-search-plus")){ // zoom in
+      var filteredCollectionValues = _.map(this.filteredCollection.models, function(o){return parseInt(o.attributes.value)})
+      var filteredCollectionMaxValue = _.max(filteredCollectionValues) * 1.15 // include some top padding
+      this.chart.valueAxes[0].maximum = filteredCollectionMaxValue 
+      this.chart.validateNow()
+    } else { // zoom out
+      var collectionValues = _.map(this.collection.models, function(o){return parseInt(o.attributes.value)})
+      var collectionMaxValue = _.max(collectionValues) * 1.15 // include some top padding
+      this.chart.valueAxes[0].maximum = collectionMaxValue 
+      this.chart.validateNow()
+    }
+
+    // No matter what, toggle the icons classes to show the other one
+    target.filter('span.fa').toggleClass("fa-search-plus")
+    target.filter('span.fa').toggleClass("fa-search-minus")
+    e.preventDefault()
   }
 })