diff --git a/src/scripts/views/datetime.js b/src/scripts/views/datetime.js index b5aaebf..7ef20b0 100644 --- a/src/scripts/views/datetime.js +++ b/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() } })