fixed x-axis scaling, tests pass, closes elastic#2125

jthomassie · Dec 9, 2014 · 6643273 · 6643273
1 parent ca1ba8b
commit 6643273
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 25 deletions.
diff --git a/src/kibana/components/vislib/lib/x_axis.js b/src/kibana/components/vislib/lib/x_axis.js
@@ -191,9 +191,9 @@ define(function (require) {
     };
 
     /**
-     * Returns a function that evaluates scale type and applies
-     * filters tick labels on time scales
-     * rotates and truncates labels on nominal/ordinal scales
+     * Returns a function that evaluates scale type and
+     * applies filter to tick labels on time scales
+     * rotates and truncates tick labels on nominal/ordinal scales
      *
      * @method filterOrRotate
      * @returns {Function} Filters or rotates x axis tick labels
@@ -237,22 +237,23 @@ define(function (require) {
       var svg;
       var xAxisLabelHt = 15;
       var width;
+      var widths = [];
       self._attr.isRotated = false;
 
       return function (selection) {
 
         text = selection.selectAll('.tick text');
 
         text.each(function textWidths() {
-          width = d3.select(this).node().getBBox().width;
-          if (width > maxWidth) {
-            self._attr.isRotated = true;
-            xAxisLabelHt = _.max([textWidth, (Math.ceil(width + xAxisPadding))]);
-          }
+          widths.push(d3.select(this).node().getBBox().width);
         });
+        width = _.max(widths);
+        if (width > maxWidth) {
+          self._attr.isRotated = true;
+          xAxisLabelHt = width + xAxisPadding;
+        }
         self._attr.xAxisLabelHt = xAxisLabelHt;
 
-
         if (self._attr.isRotated) {
           text
           .text(function truncate() {
@@ -268,8 +269,7 @@ define(function (require) {
           .attr('height', xAxisLabelHt);
         }
 
-        // TODO: need to add mouseover to show tooltip on truncated labels
-
+        // TODO: add mouseover to show tooltip on truncated labels
       };
     };
 
@@ -282,6 +282,7 @@ define(function (require) {
      * @returns {*|jQuery}
      */
     XAxis.prototype.truncateLabel = function (text, size) {
+      console.log('truncateLabel');
       var node = d3.select(text).node();
       var str = $(node).text();
       var width = node.getBBox().width;
@@ -311,6 +312,7 @@ define(function (require) {
      * @returns {Function}
      */
     XAxis.prototype.filterAxisLabels = function () {
+      console.log('filterAxisLabels');
       var self = this;
       var startX = 0;
       var maxW;
@@ -424,24 +426,17 @@ define(function (require) {
       var xAxisLabelHt = 15;
       var padding = 15;
 
-      if (self._attr.isRotated && self._attr.xAxisLabelHt) {
-        xAxisLabelHt = self._attr.xAxisLabelHt;
-      } else {
-        xAxisLabelHt = self._attr.xAxisLabelHt = xAxisLabelHt;
-      }
-
       selection.each(function () {
         var visEl = d3.select(this);
-        var $visEl = $(this);
 
         if (visEl.select('.inner-spacer-block').node() === null) {
           visEl.select('.y-axis-spacer-block')
           .append('div')
           .attr('class', 'inner-spacer-block');
         }
+        var xAxisHt = visEl.select('.x-axis-wrapper').style('height');
 
-        visEl.select('.inner-spacer-block')
-        .style('height', (xAxisLabelHt + titleHts - padding) + 'px');
+        visEl.select('.inner-spacer-block').style('height', xAxisHt);
       });
 
     };

diff --git a/src/kibana/components/vislib/styles/_layout.less b/src/kibana/components/vislib/styles/_layout.less
@@ -21,7 +21,7 @@
 .y-axis-col {
   .display(flex);
   .flex-direction(row);
-  .flex(1 0 50px);
+  .flex(1 0 36px);
 }
 
 .y-axis-spacer-block {

diff --git a/src/kibana/components/vislib/visualizations/area_chart.js b/src/kibana/components/vislib/visualizations/area_chart.js
@@ -289,7 +289,7 @@ define(function (require) {
       var elWidth = this._attr.width = $elem.width();
       var elHeight = this._attr.height = $elem.height();
       var minWidth = 20;
-      var minHeight = 40;
+      var minHeight = 20;
       var div;
       var svg;
       var width;

diff --git a/src/kibana/components/vislib/visualizations/column_chart.js b/src/kibana/components/vislib/visualizations/column_chart.js
@@ -253,7 +253,7 @@ define(function (require) {
       var elWidth = this._attr.width = $elem.width();
       var elHeight = this._attr.height = $elem.height();
       var minWidth = 20;
-      var minHeight = 40;
+      var minHeight = 20;
       var div;
       var svg;
       var width;

diff --git a/src/kibana/components/vislib/visualizations/line_chart.js b/src/kibana/components/vislib/visualizations/line_chart.js
@@ -220,7 +220,7 @@ define(function (require) {
       var xScale = this.handler.xAxis.xScale;
       var chartToSmallError = 'The height and/or width of this container is too small for this chart.';
       var minWidth = 20;
-      var minHeight = 40;
+      var minHeight = 20;
       var startLineX = 0;
       var lineStrokeWidth = 1;
       var div;

diff --git a/src/kibana/components/vislib/visualizations/pie_chart.js b/src/kibana/components/vislib/visualizations/pie_chart.js
@@ -137,7 +137,7 @@ define(function (require) {
           var width = $(el).width();
           var height = $(el).height();
           var minWidth = 20;
-          var minHeight = 40;
+          var minHeight = 20;
           var path;
 
           if (width <= minWidth || height <= minHeight) {