diff --git a/frontend/stylesheets/style.styl b/frontend/stylesheets/style.styl index e0889ce..f2dbece 100644 --- a/frontend/stylesheets/style.styl +++ b/frontend/stylesheets/style.styl @@ -27,6 +27,9 @@ dt left: 20px top: 5px opacity: 1 + .x_label + &.bottom + bottom: 0 &:hover strong opacity: 0 diff --git a/lib/views/mixins/renderHistoricalDataGraph.js b/lib/views/mixins/renderHistoricalDataGraph.js index 6f91435..f339d0c 100644 --- a/lib/views/mixins/renderHistoricalDataGraph.js +++ b/lib/views/mixins/renderHistoricalDataGraph.js @@ -2,6 +2,7 @@ var Rickshaw, _ = require('lodash'), + $ = require(typeof window !== 'undefined' ? 'jquery' : 'cheerio'), timeHelper = require('../../handlebars/helpers/time'); if (typeof window !== 'undefined') { @@ -50,6 +51,8 @@ module.exports = function (attributes, element, graphOptions, hoverOptions) { }, initializeGraph: function () { + var graphElement = this.$(element)[0]; + if (hoverOptions.xFormatter) { hoverOptions.xFormatter = hoverOptions.xFormatter.bind(this); } @@ -58,7 +61,7 @@ module.exports = function (attributes, element, graphOptions, hoverOptions) { } this.graph = new Rickshaw.Graph(_.extend({ - element: this.$(element)[0], + element: graphElement, renderer: 'area', interpolation: 'linear', stroke: true, @@ -69,7 +72,15 @@ module.exports = function (attributes, element, graphOptions, hoverOptions) { graph: this.graph, xFormatter: function (value) { return timeHelper(value * 1000); - }.bind(this) + }.bind(this), + onRender: function () { + var detailElement = $(this.element); + if (detailElement.find('.item.active').position().top < $(graphElement).height() / 4 ) { + detailElement.find('.x_label').addClass('bottom'); + } else { + detailElement.find('.x_label').removeClass('bottom'); + } + } }, hoverOptions)); this.xAxis = new Rickshaw.Graph.Axis.Time({ graph: this.graph,