From 66432737b5f8c752b2e42e37b58fdd8b8edd7463 Mon Sep 17 00:00:00 2001 From: Juan Thomassie Date: Tue, 9 Dec 2014 09:48:42 -0600 Subject: [PATCH] fixed x-axis scaling, tests pass, closes #2125 --- src/kibana/components/vislib/lib/x_axis.js | 35 ++++++++----------- .../components/vislib/styles/_layout.less | 2 +- .../vislib/visualizations/area_chart.js | 2 +- .../vislib/visualizations/column_chart.js | 2 +- .../vislib/visualizations/line_chart.js | 2 +- .../vislib/visualizations/pie_chart.js | 2 +- 6 files changed, 20 insertions(+), 25 deletions(-) diff --git a/src/kibana/components/vislib/lib/x_axis.js b/src/kibana/components/vislib/lib/x_axis.js index 4f72e421c93b1..fba2d65d2d4ce 100644 --- 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,6 +237,7 @@ define(function (require) { var svg; var xAxisLabelHt = 15; var width; + var widths = []; self._attr.isRotated = false; return function (selection) { @@ -244,15 +245,15 @@ define(function (require) { 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 index 92f5515aa9d9d..92cb0f4346d72 100644 --- 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 index 9f1b446090a71..1885add41629b 100644 --- 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 index 84578f2ad7b86..1465f2b13d002 100644 --- 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 index 7a7b913076273..3f63adeca26b4 100644 --- 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 index 2b4fc7786ce0f..502f8d7309d18 100644 --- 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) {