github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-23 17:28:26 -04:00
Code Issues Projects Releases Packages Wiki Activity

fixed error with vis.hasSchemaAgg, removed styling from less file, only instantiate time marker when addTimeMarker is true, times array now encodes time, color, class, opacity, and width options, refined tests

Browse source
This commit is contained in:
Shelby Sturgis 2015-04-15 15:41:16 -04:00
parent 661dea1e77
commit d0a41f447e
7 changed files with 116 additions and 52 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/kibana/components/vis/vis.js
View file

@ -105,6 +105,7 @@ define(function (require) {
Vis.prototype.hasSchemaAgg = function (schemaName, aggTypeName) {
var aggs = this.aggs.bySchemaName[schemaName] || [];
return aggs.some(function (agg) {
if (!agg.type || !agg.type.name) return false;
return agg.type.name === aggTypeName;
});
};

7
src/kibana/components/vislib/styles/_svg.less
View file

@ -92,10 +92,3 @@ path {
fill: #000;
pointer-events: none;
}
/* Time Marker */
line.time-marker {
stroke: rgba(200, 0, 0, 0.3);
stroke-width: 2px;
pointer-events: none;
}

5
src/kibana/components/vislib/visualizations/area_chart.js
View file

@ -286,7 +286,10 @@ define(function (require) {
// Get the width and height
width = elWidth;
height = elHeight - margin.top - margin.bottom;
timeMarker = new TimeMarker(times, xScale, height);
if (addTimeMarker) {
timeMarker = new TimeMarker(times, xScale, height);
}
if (width < minWidth || height < minHeight) {
throw new errors.ContainerTooSmall();

5
src/kibana/components/vislib/visualizations/column_chart.js
View file

@ -289,7 +289,10 @@ define(function (require) {
width = elWidth;
height = elHeight - margin.top - margin.bottom;
timeMarker = new TimeMarker(times, xScale, height);
if (addTimeMarker) {
timeMarker = new TimeMarker(times, xScale, height);
}
if (width < minWidth || height < minHeight) {
throw new errors.ContainerTooSmall();

5
src/kibana/components/vislib/visualizations/line_chart.js
View file

@ -292,7 +292,10 @@ define(function (require) {
width = elWidth - margin.left - margin.right;
height = elHeight - margin.top - margin.bottom;
timeMarker = new TimeMarker(times, xScale, height);
if (addTimeMarker) {
timeMarker = new TimeMarker(times, xScale, height);
}
if (width < minWidth || height < minHeight) {
throw new errors.ContainerTooSmall();

46
src/kibana/components/vislib/visualizations/time_marker.js
View file

@ -6,13 +6,25 @@ define(function (require) {
if (!(this instanceof TimeMarker)) {
return new TimeMarker(times, xScale, height);
}
var currentTimeArr = [new Date().getTime()];
var currentTimeArr = [{
'time': new Date().getTime(),
'class': 'time-marker',
'color': '#c80000',
'opacity': 0.3,
'width': 2
}];
this.xScale = xScale;
this.height = height;
this.lineClass = 'time-marker';
this.times = (times.length) ? times.map(function (dateMathString) {
return datemath.parse(dateMathString);
this.times = (times.length) ? times.map(function (d) {
return {
'time': datemath.parse(d.time),
'class': d.class || 'time-marker',
'color': d.color || '#c80000',
'opacity': d.opacity || 0.3,
'width': d.width || 2
};
}) : currentTimeArr;
}
@ -33,26 +45,30 @@ define(function (require) {
d3.select(this).selectAll('time-marker')
.data(self.times)
.enter().append('line')
.attr('class', self.lineClass)
.attr('class', function (d) {
return d.class;
})
.attr('pointer-events', 'none')
.attr('stroke', function (d) {
return d.color;
})
.attr('stroke-width', function (d) {
return d.width;
})
.attr('stroke-opacity', function (d) {
return d.opacity;
})
.attr('x1', function (d) {
return self.xScale(d);
return self.xScale(d.time);
})
.attr('x2', function (d) {
return self.xScale(d);
return self.xScale(d.time);
})
.attr('y1', self.height)
.attr('y2', self.xScale.range()[0]);
});
};
TimeMarker.prototype.get = function (field) {
return this[field] ? this[field] : undefined;
};
TimeMarker.prototype.set = function (field, val) {
if (this[field]) this[field] = val;
};
return TimeMarker;
};
});

99
test/unit/specs/vislib/visualizations/time_marker.js
View file

@ -9,11 +9,36 @@ define(function (require) {
angular.module('TimeMarkerFactory', ['kibana']);
describe('VisLib Time Marker Test Suite', function () {
var height = 50;
var color = '#ff0000';
var opacity = 0.5;
var width = 3;
var customClass = 'custom-time-marker';
var dateMathTimes = ['now-1m', 'now-5m', 'now-15m'];
var myTimes = dateMathTimes.map(function (dateMathString) {
return {
time: dateMathString,
class: customClass,
color: color,
opacity: opacity,
width: width
};
});
var getExtent = function (dataArray, func) {
return func(dataArray, function (obj) {
return func(obj.values, function (d) {
return d.x;
});
});
};
var times = [];
var TimeMarker;
var marker;
var defaultMarker;
var customMarker;
var selection;
var xScale;
var minDomain;
var maxDomain;
var domain;
beforeEach(function () {
module('TimeMarkerFactory');
@ -22,8 +47,12 @@ define(function (require) {
beforeEach(function () {
inject(function (d3, Private) {
TimeMarker = Private(require('components/vislib/visualizations/time_marker'));
xScale = d3.time.scale();
marker = new TimeMarker(times, xScale, height);
minDomain = getExtent(series.series, d3.min);
maxDomain = getExtent(series.series, d3.max);
domain = [minDomain, maxDomain];
xScale = d3.time.scale().domain(domain).range([0, 500]);
defaultMarker = new TimeMarker(times, xScale, height);
customMarker = new TimeMarker(myTimes, xScale, height);
selection = d3.select('body').append('div').attr('class', 'marker');
selection.datum(series);
@ -33,7 +62,7 @@ define(function (require) {
afterEach(function () {
selection.remove('*');
selection = null;
marker = null;
defaultMarker = null;
});
describe('_isTimeBaseChart method', function () {
@ -41,41 +70,57 @@ define(function (require) {
var newSelection;
it('should return true when data is time based', function () {
boolean = marker._isTimeBasedChart(selection);
boolean = defaultMarker._isTimeBasedChart(selection);
expect(boolean).to.be(true);
});
it('should return false when data is not time based', function () {
newSelection = selection.datum(terms);
boolean = marker._isTimeBasedChart(newSelection);
boolean = defaultMarker._isTimeBasedChart(newSelection);
expect(boolean).to.be(false);
});
});
describe('get method', function () {
it('should get the correct value', function () {
var ht = marker.get('height');
var scale = marker.get('xScale');
var currentTimeArr = marker.get('times');
expect(ht).to.be(height);
expect(currentTimeArr.length).to.be(1);
expect(scale).to.be(xScale);
});
});
describe('set method', function () {
it('should set the value', function () {
var lineClass = 'new-time-marker';
marker.set('lineClass', lineClass);
expect(marker.get('lineClass')).to.be(lineClass);
});
});
describe('render method', function () {
it('should render lines', function () {
marker.render(selection);
var lineArray;
beforeEach(function () {
defaultMarker.render(selection);
customMarker.render(selection);
lineArray = document.getElementsByClassName('custom-time-marker');
});
it('should render the default line', function () {
expect(!!$('line.time-marker').length).to.be(true);
});
it('should render the custom (user defined) lines', function () {
expect($('line.custom-time-marker').length).to.be(myTimes.length);
});
it('should set the class', function () {
Array.prototype.forEach.call(lineArray, function (line) {
expect(line.getAttribute('class')).to.be(customClass);
});
});
it('should set the stroke', function () {
Array.prototype.forEach.call(lineArray, function (line) {
expect(line.getAttribute('stroke')).to.be(color);
});
});
it('should set the stroke-opacity', function () {
Array.prototype.forEach.call(lineArray, function (line) {
expect(+line.getAttribute('stroke-opacity')).to.be(opacity);
});
});
it('should set the stroke-width', function () {
Array.prototype.forEach.call(lineArray, function (line) {
expect(+line.getAttribute('stroke-width')).to.be(width);
});
});
});
});