Fix #53: Overlapping labels in charts

selaux · Jun 29, 2014 · f7deb27 · f7deb27
1 parent 029e132
commit f7deb27
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 2 deletions.
diff --git 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
@@ -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,