github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 01:38:56 -04:00
Code Issues Projects Releases Packages Wiki Activity

troubleshooting error handlers, added 3 test suites

Browse source
This commit is contained in:
Shelby Sturgis 2014-08-27 17:33:13 +03:00
parent 30c92eb5d6
commit 3efe32f0dc
14 changed files with 553 additions and 71 deletions
Download patch file Download diff file Expand all files Collapse all files

13
src/kibana/components/vislib/components/styles/main.less
View file

@ -55,9 +55,9 @@ visualize {
flex: 1 1;
}
// .legend-wrapper {
//.legend-wrapper {
// flex: 1 1;
// }
//}
div.x-axis-label {
position: absolute;
@ -245,13 +245,10 @@ path, line, .axis line, .axis path {
flex: 1 1 100%;
}
.chart-error {
flex: 1 1 100%;
.error {
font-size: 18px;
text-align: center;
text-wrap: normal;
height: 100%;
width: 100%;
text-wrap: break-word;
}
/* YAxis logic */
@ -348,7 +345,7 @@ path, line, .axis line, .axis path {
.x-axis-div-wrapper {
display: flex;
/*flex: 5 1;*/
// flex: 5 1;
flex-direction: row;
overflow: visible;
min-height: 16px;

6
src/kibana/components/vislib/modules/AxisTitle.js
View file

@ -14,11 +14,11 @@ define(function (require) {
}
AxisTitle.prototype.render = function () {
d3.select(this.el).select('.x-axis-title').call(this.appendAxisTitle(this.xTitle));
d3.select(this.el).select('.y-axis-title').call(this.appendAxisTitle(this.yTitle));
d3.select(this.el).select('.x-axis-title').call(this.draw(this.xTitle));
d3.select(this.el).select('.y-axis-title').call(this.draw(this.yTitle));
};
AxisTitle.prototype.appendAxisTitle = function (title) {
AxisTitle.prototype.draw = function (title) {
var self = this;
var div;
var width;

4
src/kibana/components/vislib/modules/ChartTitle.js
View file

@ -13,10 +13,10 @@ define(function (require) {
}
ChartTitle.prototype.render = function () {
d3.select(this.el).selectAll('.chart-title').call(this.appendTitles());
d3.select(this.el).selectAll('.chart-title').call(this.draw());
};
ChartTitle.prototype.appendTitles = function () {
ChartTitle.prototype.draw = function () {
var self = this;
return function (selection) {

16
src/kibana/components/vislib/modules/ColumnChart.js
View file

@ -102,6 +102,18 @@ define(function (require) {
return function (selection) {
selection.each(function (data) {
if (self._attr.destroFlag) {
throw new Error('You are trying to render a chart you have destroyed');
}
if (!yScale) {
throw new Error('yScale is ' + yScale);
}
if (!xScale) {
throw new Error('xScale is ' + xScale);
}
layers = self.stackData(data);
self.validateHeightAndWidth($elem, elWidth, elHeight);
@ -130,10 +142,6 @@ define(function (require) {
return i;
});
if (!yScale) {
throw new Error('yScale is ' + yScale);
}
// Append the bars
bars = layer.selectAll('rect')
.data(

6
src/kibana/components/vislib/modules/Xaxis.js
View file

@ -14,7 +14,7 @@ define(function (require) {
}
XAxis.prototype.render = function () {
d3.select(this.el).selectAll('.x-axis-div').call(this.appendSVG());
d3.select(this.el).selectAll('.x-axis-div').call(this.draw());
};
XAxis.prototype.getScale = function (ordered) {
@ -82,7 +82,7 @@ define(function (require) {
.orient('bottom');
};
XAxis.prototype.appendSVG = function () {
XAxis.prototype.draw = function () {
var self = this;
var margin = this._attr.margin;
var div;
@ -129,7 +129,7 @@ define(function (require) {
bbox = selection.selectAll('.tick text').node().getBBox();
tickN = selection.selectAll('.tick text')[0].length;
ticksLength = bbox.width * 1.05 * tickN;
// rotate & filter does not apply to discover view
if (!self.isDiscover && ticksLength > width) {
self.rotateAxisLabels(selection);

57
src/kibana/components/vislib/modules/YAxis.js
View file

@ -22,15 +22,19 @@ define(function (require) {
.domain([0, this.yMax])
.range([height, 0])
.nice();
return this.yScale;
};
YAxis.prototype.getYAxis = function (height) {
this.getYScale(height);
var yScale = this.getYScale(height);
this.yAxis = d3.svg.axis()
.scale(this.yScale)
.scale(yScale)
.tickFormat(d3.format('s'))
.orient('left');
return this.yAxis;
};
YAxis.prototype.draw = function () {
@ -40,8 +44,6 @@ define(function (require) {
var width;
var height;
var svg;
var bbox;
var tickN;
return function (selection) {
selection.each(function () {
@ -52,7 +54,7 @@ define(function (require) {
self.validateHeightAndWidth(div, width, height);
// Return access to the yAxis
self.getYAxis(height);
var yAxis = self.getYAxis(height);
svg = div.append('svg')
.attr('width', width)
@ -62,59 +64,34 @@ define(function (require) {
.attr('class', 'y axis')
//.attr('transform', 'translate(' + width * 0.95 + ',' + self.margin.top + ')')
.attr('transform', 'translate(' + width + ',' + margin.top + ')')
.call(self.yAxis);
.call(yAxis);
// update layout divs to tick lengths
self.updateLayoutForRotatedLabels(div, self.getMaxLabelLength(selection));
self.updateLayoutForRotatedLabels(svg, self.getMaxLabelLength(svg.selectAll('.tick text')));
});
};
};
YAxis.prototype.getMaxLabelLength = function (selection) {
var svg = selection.select('svg');
var labels = selection.selectAll('.tick text');
var param;
YAxis.prototype.getMaxLabelLength = function (labels) {
var arr = [];
var length;
var spacer;
// get max tick label length
_.forEach(labels[0], function (n) {
arr.push(n.getBBox().width);
});
//console.log(arr, _.max(arr));
return length = _.max(arr);
return _.max(arr);
};
YAxis.prototype.updateLayoutForRotatedLabels = function (selection, length) {
var self = this;
var svg = selection.select('svg');
var spacer;
YAxis.prototype.updateLayoutForRotatedLabels = function (svg, length) {
var margin = this._attr.margin;
var tickspace = 14;
length += tickspace;
// if rows, space for chart title
// if cols, space for chart title + axis label
spacer = length + tickspace + 18;
if (this.el.__data__.rows) {
spacer = length + 32;
}
length += tickspace;
// set widths of svg, x-axis-div and x-axis-div-wrapper to fit ticklabels
svg.attr('width', length + 6);
//$('.y-axis-div-wrapper').width(length + tickspace);
//$('.y-axis-div').width(length);
//$('.y-axis-col-wrapper').width(length);
//$('.y-axis-col').width(length + tickspace);
d3.selectAll('.y.axis').attr('transform', 'translate(' + (length + 2) + ',' + self._attr.margin.top + ')');
// set widths of y-axis-spacer-block and x-axis-wrapper to fit resized x axis
//$('.y-axis-spacer-block').width(spacer);
//$('.y-axis-col-wrapper').width(spacer);
//$('.y-axis-col').width(spacer);
d3.selectAll('.y.axis').attr('transform', 'translate(' + (length + 2) + ',' + margin.top + ')');
};
return YAxis;

4
src/kibana/components/vislib/modules/_chart.js
View file

@ -39,8 +39,8 @@ define(function (require) {
.append('div')
.attr('class', 'error-wrapper')
.append('div')
.attr('class', 'chart-error')
.append('span')
.attr('class', 'chart error')
.append('p')
.style('line-height', function () {
return $(elem).height() + 'px';
})

5
src/kibana/components/vislib/modules/_functions.js
View file

@ -105,9 +105,8 @@ define(function (require) {
} catch (error) {
if (error.message === 'yScale is undefined') {
chart.error(self.el);
self.checkSize(self.el);
// } else {
// console.group(error.message);
} else {
console.group(error.message);
}
}
});

4
test/unit/index.html
View file

@ -86,8 +86,10 @@
'specs/vislib/zero_injection',
'specs/vislib/labels',
'specs/vislib/d3functions',
'specs/vislib/data',
'specs/vislib/xAxis',
'specs/vislib/yAxis',
'specs/vislib/axisTitle',
'specs/vislib/chartTitle',
'specs/utils/diff_time_picker_vals',
'specs/factories/events',
'specs/index_patterns/_flatten_search_response',

130
test/unit/specs/vislib/axisTitle.js Normal file
View file

@ -0,0 +1,130 @@
define(function (require) {
var angular = require('angular');
var _ = require('lodash');
var $ = require('jquery');
angular.module('AxisTitleFactory', ['kibana']);
describe('Vislib AxisTitle Class Test Suite', function () {
var AxisTitle;
var Data;
var axisTitle;
var el;
var dataObj;
var xTitle;
var yTitle;
var data = {
hits: 621,
label: '',
ordered: {
date: true,
interval: 30000,
max: 1408734982458,
min: 1408734082458
},
series: [
{
values: [
{
x: 1408734060000,
y: 8
},
{
x: 1408734090000,
y: 23
},
{
x: 1408734120000,
y: 30
},
{
x: 1408734150000,
y: 28
},
{
x: 1408734180000,
y: 36
},
{
x: 1408734210000,
y: 30
},
{
x: 1408734240000,
y: 26
},
{
x: 1408734270000,
y: 22
},
{
x: 1408734300000,
y: 29
},
{
x: 1408734330000,
y: 24
}
]
}
],
xAxisLabel: 'Date Histogram',
yAxisLabel: 'Count'
};
beforeEach(function () {
module('AxisTitleFactory');
});
beforeEach(function () {
inject(function (d3, Private) {
AxisTitle = Private(require('components/vislib/modules/AxisTitle'));
Data = Private(require('components/vislib/modules/Data'));
el = d3.select('body').append('div')
.attr('class', 'vis-wrapper');
el.append('div')
.attr('class', 'y-axis-title');
el.append('div')
.attr('class', 'x-axis-title');
dataObj = new Data(data);
xTitle = dataObj.get('xAxisLabel');
yTitle = dataObj.get('yAxisLabel');
axisTitle = new AxisTitle($('.vis-wrapper')[0], xTitle, yTitle);
});
});
afterEach(function () {
el.remove();
});
describe('render Method', function () {
beforeEach(function () {
axisTitle.render();
});
it('should append an svg to div', function () {
expect(el.select('.x-axis-title').selectAll('svg').length).to.be(1);
expect(el.select('.y-axis-title').selectAll('svg').length).to.be(1);
});
it('should append a g element to the svg', function () {
expect(el.select('.x-axis-title').selectAll('svg').select('g').length).to.be(1);
expect(el.select('.y-axis-title').selectAll('svg').select('g').length).to.be(1);
});
it('should append text', function () {
expect(!!el.select('.x-axis-title').selectAll('svg').selectAll('text')).to.be(true);
expect(!!el.select('.y-axis-title').selectAll('svg').selectAll('text')).to.be(true);
});
});
describe('draw Method', function () {
it('should be a function', function () {
expect(_.isFunction(axisTitle.draw())).to.be(true);
});
});
});
});

120
test/unit/specs/vislib/chartTitle.js Normal file
View file

@ -0,0 +1,120 @@
define(function (require) {
var angular = require('angular');
var _ = require('lodash');
var $ = require('jquery');
angular.module('ChartTitleFactory', ['kibana']);
describe('Vislib ChartTitle Class Test Suite', function () {
var ChartTitle;
var Data;
var chartTitle;
var el;
var dataObj;
var data = {
hits: 621,
label: '',
ordered: {
date: true,
interval: 30000,
max: 1408734982458,
min: 1408734082458
},
series: [
{
values: [
{
x: 1408734060000,
y: 8
},
{
x: 1408734090000,
y: 23
},
{
x: 1408734120000,
y: 30
},
{
x: 1408734150000,
y: 28
},
{
x: 1408734180000,
y: 36
},
{
x: 1408734210000,
y: 30
},
{
x: 1408734240000,
y: 26
},
{
x: 1408734270000,
y: 22
},
{
x: 1408734300000,
y: 29
},
{
x: 1408734330000,
y: 24
}
]
}
],
xAxisLabel: 'Date Histogram',
yAxisLabel: 'Count'
};
beforeEach(function () {
module('ChartTitleFactory');
});
beforeEach(function () {
inject(function (d3, Private) {
ChartTitle = Private(require('components/vislib/modules/ChartTitle'));
Data = Private(require('components/vislib/modules/Data'));
el = d3.select('body').append('div')
.attr('class', 'vis-wrapper')
.datum(data);
el.append('div')
.attr('class', 'chart-title')
.style('height', '20px');
dataObj = new Data(data);
chartTitle = new ChartTitle($('.vis-wrapper')[0], 'rows');
});
});
afterEach(function () {
el.remove();
});
describe('render Method', function () {
beforeEach(function () {
chartTitle.render();
});
it('should append an svg to div', function () {
expect(el.select('.chart-title').selectAll('svg').length).to.be(1);
});
it('should append text', function () {
expect(!!el.select('.chart-title').selectAll('svg').selectAll('text')).to.be(true);
});
});
describe('draw Method', function () {
it('should be a function', function () {
expect(_.isFunction(chartTitle.draw())).to.be(true);
});
});
});
});

97
test/unit/specs/vislib/columnChart.js Normal file
View file

@ -0,0 +1,97 @@
define(function (require) {
var angular = require('angular');
var _ = require('lodash');
var $ = require('jquery');
angular.module('ColumnChartFactory', ['kibana']);
describe('Vislib ColumnChart Class Test Suite', function () {
var ColumnChart;
var Data;
var chart;
var el;
var mydata;
var data = {
hits: 621,
label: '',
ordered: {
date: true,
interval: 30000,
max: 1408734982458,
min: 1408734082458
},
series: [
{
values: [
{
x: 1408734060000,
y: 8
},
{
x: 1408734090000,
y: 23
},
{
x: 1408734120000,
y: 30
},
{
x: 1408734150000,
y: 28
},
{
x: 1408734180000,
y: 36
},
{
x: 1408734210000,
y: 30
},
{
x: 1408734240000,
y: 26
},
{
x: 1408734270000,
y: 22
},
{
x: 1408734300000,
y: 29
},
{
x: 1408734330000,
y: 24
}
]
}
],
xAxisLabel: 'Date Histogram',
yAxisLabel: 'Count'
};
beforeEach(function () {
module('ColumnChartFactory');
});
beforeEach(function () {
inject(function (d3, Private) {
ColumnChart = Private(require('components/vislib/modules/ColumnChart'));
Data = Private(require('components/vislib/modules/Data'));
el = d3.select('body').append('div')
.attr('class', 'vis-wrapper')
.datum(data);
el.append('div')
.attr('class', 'chart-title')
.style('height', '20px');
});
});
afterEach(function () {
el.remove();
});
});
});

151
test/unit/specs/vislib/yAxis.js Normal file
View file

@ -0,0 +1,151 @@
define(function (require) {
var angular = require('angular');
var _ = require('lodash');
var $ = require('jquery');
angular.module('YAxisFactory', ['kibana']);
describe('Vislib yAxis Class Test Suite', function () {
var YAxis;
var Data;
var yAxis;
var el;
var dataObj;
var data = {
hits: 621,
label: '',
ordered: {
date: true,
interval: 30000,
max: 1408734982458,
min: 1408734082458
},
series: [
{
values: [
{
x: 1408734060000,
y: 8
},
{
x: 1408734090000,
y: 23
},
{
x: 1408734120000,
y: 30
},
{
x: 1408734150000,
y: 28
},
{
x: 1408734180000,
y: 36
},
{
x: 1408734210000,
y: 30
},
{
x: 1408734240000,
y: 26
},
{
x: 1408734270000,
y: 22
},
{
x: 1408734300000,
y: 29
},
{
x: 1408734330000,
y: 24
}
]
}
],
xAxisLabel: 'Date Histogram',
yAxisLabel: 'Count'
};
beforeEach(function () {
module('YAxisFactory');
});
beforeEach(function () {
inject(function (d3, Private) {
YAxis = Private(require('components/vislib/modules/YAxis'));
Data = Private(require('components/vislib/modules/Data'));
el = d3.select('body').append('div')
.attr('class', 'y-axis-wrapper')
.append('div')
.attr('class', 'y-axis-div')
.style('height', '20px');
dataObj = new Data(data);
yAxis = new YAxis({
el: $('.y-axis-wrapper')[0],
yMax: dataObj.getYMaxValue(),
attr: { margin: { top: 0, right: 0, bottom: 0, left: 0 } }
});
});
});
afterEach(function () {
el.remove();
});
describe('render Method', function () {
beforeEach(function () {
yAxis.render();
});
it('should append an svg to div', function () {
expect(el.selectAll('svg').length).to.be(1);
});
it('should append a g element to the svg', function () {
expect(el.selectAll('svg').select('g').length).to.be(1);
});
it('should append ticks with text', function () {
expect(!!el.selectAll('svg').selectAll('.tick text')).to.be(true);
});
});
describe('getYScale Method', function () {
var yScale;
var height = 50;
beforeEach(function () {
yScale = yAxis.getYScale(height);
});
it('should return a function', function () {
expect(_.isFunction(yScale)).to.be(true);
});
it('should return the correct domain', function () {
expect(yScale.domain()[0]).to.be(0);
// Should be greater than 36 since we are using .nice()
expect(yScale.domain()[1]).to.be.greaterThan(36);
});
it('should return the correct range', function () {
expect(yScale.range()[0]).to.be(height);
// The yScale range should always start from 0
expect(yScale.range()[1]).to.be(0);
});
});
describe('draw Method', function () {
it('should be a function', function () {
expect(_.isFunction(yAxis.draw())).to.be(true);
});
});
});
});

11
test/unit/specs/vislib/zero_injection.js
View file

@ -230,7 +230,8 @@ define(function (require) {
describe('Zero Filled Array', function () {
var createZeroArray;
var arr = ['1', '2', '3', '4', '5'];
var arr1 = [1, 2, 3, 4, 5];
var arr2 = ['1', '2', '3', '4', '5'];
var results1;
var results2;
@ -241,8 +242,8 @@ define(function (require) {
beforeEach(function () {
inject(function (Private) {
createZeroArray = Private(require('components/vislib/components/_functions/zero_injection/zero_filled_array'));
results1 = createZeroArray(arr, ordered);
results2 = createZeroArray(arr, false);
results1 = createZeroArray(arr1);
results2 = createZeroArray(arr2);
});
});
@ -270,7 +271,7 @@ define(function (require) {
expect(results1[4].y).to.be(0);
});
it('should return an array of objects where each x values are numbers when ordered obj is defined', function () {
it('should return an array of objects where each x values are numbers', function () {
expect(_.isNumber(results1[0].x)).to.be(true);
expect(_.isNumber(results1[1].x)).to.be(true);
expect(_.isNumber(results1[2].x)).to.be(true);
@ -278,7 +279,7 @@ define(function (require) {
expect(_.isNumber(results1[4].x)).to.be(true);
});
it('should return an array of objects where each x values are strings when ordered obj is undefined', function () {
it('should return an array of objects where each x values are strings', function () {
expect(_.isString(results2[0].x)).to.be(true);
expect(_.isString(results2[1].x)).to.be(true);
expect(_.isString(results2[2].x)).to.be(true);