updated legend and main.less to wrap long items, updated tooltip to wrap long text strings, updated x_axis and y_axis to apply flexbox changes to better fit the tick labels

src/kibana/components/vislib/components/styles/main.less

@@ -87,6 +87,12 @@ div.y-axis-label {
   min-width: 40px
 }
 
+.header {
+  width: 100%;
+  height: 26px;
+  margin: 0 0 14px 0;
+}
+
 .legend {
   width: 100%;
   height: 26px;
@@ -113,15 +119,18 @@ li.color {
   margin: 0 18px 0 18px;
   padding: 3px 0 3px 0;
   text-align: left;
-  word-wrap: break-word;
-  max-width: 150px;
   font-size: 12px;
   line-height: 13px;
   color: #666;
-  // list-style: none;
   cursor: default;
   text-align: left;
-  //flex-grow: 2;
+  flex-grow: 2;
+  word-wrap: break-word;
+  max-width: 150px;
+}
+.wordwrap {
+  word-wrap: break-word;
+  max-width: 150px;
 }
 
 .dots {
@@ -226,7 +235,7 @@ path, line, .axis line, .axis path {
   z-index: 20;
   visibility: hidden;
   word-wrap: break-word;
-  max-width: 200px;
+  max-width: 220px;
 }
 
 .rect {

src/kibana/components/vislib/lib/x_axis.js

@@ -11,7 +11,7 @@ define(function (require) {
      *  el => reference to DOM element
      *  xValues => array of x values from the dataset
      *  ordered => data object that is defined when the data is ordered
-     *  xAxisFormatter => function to format x axis tick values
+     *  xAxisFormatter => function to formatx axis tick values
      *  _attr => visualization attributes
      */
     function XAxis(args) {
@@ -270,6 +270,8 @@ define(function (require) {
       var flex;
       var chartToXaxis;
       var dataType;
+      var tickHt;
+      var chartHt;
 
       return function (selection) {
         selection.each(function () {
@@ -301,8 +303,12 @@ define(function (require) {
             throw new Error('x-axis tick.node() is undefined');
           }
 
-          flex = self.getFlexVal(self._attr.isRotated, titlespace, tick.node().getBBox().height, chartwrap.height());
+          tickHt = tick.node().getBBox().height;
+          chartHt = chartwrap.height();
+          flex = self.getFlexVal(self._attr.isRotated, titlespace, tickHt, chartHt);
           
+          // set height of svg, transform to fit axis labels
+          svg.attr('height', chartHt);
           xwrapper.css('flex', flex + ' 1');
           xdiv.css('flex', flex + ' 1');
           yspacerblock.css('flex', flex + ' 1');
@@ -313,19 +319,25 @@ define(function (require) {
     // Return flexbox css value using linear scales
     XAxis.prototype.getFlexVal = function (isRotated, titleSpace, tickHt, chartHt) {
       var ratio;
+
       var rotScale = d3.scale.linear()
-        .domain([0.14, 0.28, 0.6, 0.8, 0.9, 2.6])
-        .range([5, 10, 30, 55, 80, 100]);
+        .domain([0.1, 0.5, 2])
+        .range([3.3, 22, 70]);
+
       var flatScale = d3.scale.linear()
-        .domain([1.3, 8, 14.5, 29])
-        .range([1.1, 9, 13, 30]);
+        .domain([0.2, 1, 2, 20])
+        .range([1.1, 1, 2, 20]);
       
       if (!isRotated) {
         // flat labels
         ratio = flatScale(35 * (titleSpace + tickHt) / chartHt);
+        // console.log('flat', +ratio.toFixed(1), 35 * (titleSpace + tickHt) / chartHt);
+        
       } else {
         // rotated labels
         ratio = rotScale((titleSpace + tickHt) / chartHt);
+        // console.log('rotated', +ratio.toFixed(1), (titleSpace + tickHt) / chartHt);
+        
       }
       return ratio.toFixed(1);
     };

src/kibana/components/vislib/lib/y_axis.js

@@ -112,7 +112,6 @@ define(function (require) {
         .tickFormat(d3.format('s'))
         .ticks(this.tickScale(height))
         .orient('left');
-
       return this.yAxis;
     };
 
@@ -186,7 +185,7 @@ define(function (require) {
       d3.selectAll('.y.axis').attr('transform', 'translate(' + (length + 2) + ',' + margin.top + ')');
     };
 
-    YAxis.prototype.resizeAxisLayoutForLabels = function (selection) {
+    YAxis.prototype.resizeAxisLayoutForLabels = function () {
       var self = this;
       var visEl = $(self.el);
       var div;
@@ -211,7 +210,6 @@ define(function (require) {
         selection.each(function () {
           div = d3.select(this);
           svg = div.select('svg');
-          tick = svg.select('.tick');
           dataType = this.parentNode.__data__.series ? 'series' : this.parentNode.__data__.rows ? 'rows' : 'columns';
           labels = selection.selectAll('.tick text');
           
@@ -225,23 +223,18 @@ define(function (require) {
 
           // get max width tick
           _.forEach(labels[0], function (n) {
-            labelWidths.push(n.getBBox().height);
+            labelWidths.push(n.getBBox().width);
           });
-          maxWidth = Math.ceil(_.max(labelWidths)) + 20;
-          
-          // should have a tick node
-          if (!tick.node()) {
-            throw new Error('y-axis tick.node() is undefined');
-          }
 
-          flex = self.getFlexVal(dataType, titlespace, tick.node().getBBox().width, legendColWrap.width(), visWrap.width());
+          maxWidth = d3.max(labelWidths) + 18;
+          flex = self.getFlexVal(dataType, titlespace, maxWidth, visWrap.width());
           
           // set flex values
           yAxisColWrap.css('flex', flex + ' 1');
           yAxisDiv.css('width', maxWidth + 'px');
           yAxisDivWrap.css('width', (maxWidth + 12) + 'px');
           
-          // set width of svg, trnasform to fit axis labels
+          // set width of svg, transform to fit axis labels
           svg.attr('width', maxWidth);
           svg.attr('transform', 'translate(0,0)');
           svg.select('g').attr('transform', 'translate(' + (maxWidth - 1) + ',10)');
@@ -250,17 +243,20 @@ define(function (require) {
     };
 
     // Return flexbox css value using linear scales
-    YAxis.prototype.getFlexVal = function (dataType, titleSpace, tickWidth, legendWidth, visWidth) {
+    YAxis.prototype.getFlexVal = function (dataType, titleSpace, tickWidth, visWidth) {
       var ratio;
+
       var seriesScale = d3.scale.linear()
-        .domain([0.57, 2])
-        .range([1.0, 3.4]);
+        .domain([0.2, 2])
+        .range([0.24, 2]);
+
       var rowsScale = d3.scale.linear()
-        .domain([0.5, 2])
-        .range([1.1, 4.3]);
+        .domain([0.2, 2])
+        .range([0.26, 2.6]);
+
       var colsScale = d3.scale.linear()
-        .domain([0.8, 2])
-        .range([0.9, 2.2]);
+        .domain([0.2, 2])
+        .range([0.16, 1.6]);
 
       // define ratio based on datatype
       if (dataType === 'rows') {
@@ -270,6 +266,7 @@ define(function (require) {
       } else {
         ratio = seriesScale(35 * (titleSpace + tickWidth) / visWidth);
       }
+      //console.log(dataType, ratio.toFixed(1), 35 * (titleSpace + tickWidth) / visWidth);
       return ratio.toFixed(1);
 
     };

src/kibana/components/vislib/vis.js

@@ -45,6 +45,7 @@ define(function (require) {
           this.handler.error(error.message);
         } else {
           console.log(error);
+          //throw(error);
         }
       }
 

test/unit/specs/vislib/x_axis.js

@@ -88,16 +88,17 @@ define(function (require) {
 
         fixture = el.append('div')
           .attr('class', 'x-axis-div')
-          .style('height', '20px');
+          .style('height', '40px');
 
         dataObj = new Data(data);
-
         xAxis = new XAxis({
           el: $('x-axis-div')[0],
           xValues: dataObj.xValues(),
           ordered: dataObj.get('ordered'),
           xAxisFormatter: dataObj.get('xAxisFormatter'),
-          _attr: { margin: { top: 0, right: 0, bottom: 0, left: 0 } }
+          _attr: {
+            margin: { top: 0, right: 0, bottom: 0, left: 0 }
+          }
         });
       });
     });

test/unit/specs/vislib/y_axis.js

@@ -14,7 +14,7 @@ define(function (require) {
     var dataObj;
     var data = {
       hits: 621,
-      label: '',
+      label: 'test',
       ordered: {
         date: true,
         interval: 30000,
@@ -121,15 +121,16 @@ define(function (require) {
 
     beforeEach(function () {
       inject(function (d3, Private) {
-        YAxis = Private(require('components/vislib/lib/y_axis'));
         Data = Private(require('components/vislib/lib/data'));
+        YAxis = Private(require('components/vislib/lib/y_axis'));
 
         el = d3.select('body').append('div')
-          .attr('class', 'y-axis-wrapper');
+          .attr('class', 'y-axis-wrapper')
+          .datum(data);
 
         yAxisDiv = el.append('div')
           .attr('class', 'y-axis-div')
-          .style('height', '20px');
+          .style('height', '40px');
 
         dataObj = new Data(data);
         yAxis = new YAxis({