mirror of
https://github.com/elastic/kibana.git
synced 2025-04-24 01:38:56 -04:00
fixed conflicts when mergin in shelby changes
This commit is contained in:
Juan Thomassie
commit
c862a01a16
12 changed files with 421 additions and 129 deletions
|
|
@ -1,8 +1,13 @@
|
|||
define(function (require) {
|
||||
return function AxisTitleFactory(d3) {
|
||||
return function AxisTitleFactory(d3, Private) {
|
||||
var $ = require('jquery');
|
||||
var _ = require('lodash');
|
||||
|
||||
var Chart = Private(require('components/vislib/modules/_chart'));
|
||||
|
||||
_(AxisTitle).inherits(Chart);
|
||||
function AxisTitle(el, xTitle, yTitle) {
|
||||
AxisTitle.Super.apply(this, arguments);
|
||||
this.el = el;
|
||||
this.xTitle = xTitle;
|
||||
this.yTitle = yTitle;
|
||||
|
|
@ -14,17 +19,19 @@ define(function (require) {
|
|||
};
|
||||
|
||||
AxisTitle.prototype.appendAxisTitle = function (title) {
|
||||
return function (selection) {
|
||||
var self = this;
|
||||
var div;
|
||||
var width;
|
||||
var height;
|
||||
var self = this;
|
||||
var div;
|
||||
var width;
|
||||
var height;
|
||||
|
||||
return function (selection) {
|
||||
selection.each(function () {
|
||||
div = d3.select(this);
|
||||
width = $(this).width();
|
||||
height = $(this).height();
|
||||
|
||||
self.validateHeightAndWidth(div, width, height);
|
||||
|
||||
div.append('svg')
|
||||
.attr('width', width)
|
||||
.attr('height', height)
|
||||
|
|
|
|||
|
|
@ -1,10 +1,15 @@
|
|||
define(function (require) {
|
||||
return function ChartTitleFactory(d3) {
|
||||
return function ChartTitleFactory(d3, Private) {
|
||||
var $ = require('jquery');
|
||||
var _ = require('lodash');
|
||||
|
||||
var Chart = Private(require('components/vislib/modules/_chart'));
|
||||
|
||||
_(ChartTitle).inherits(Chart);
|
||||
function ChartTitle(el, type) {
|
||||
ChartTitle.Super.apply(this, arguments);
|
||||
this.el = el;
|
||||
this.splitType = type;
|
||||
this.dataType = type;
|
||||
}
|
||||
|
||||
ChartTitle.prototype.render = function () {
|
||||
|
|
@ -19,13 +24,16 @@ define(function (require) {
|
|||
var div = d3.select(this);
|
||||
var width = $(this).width();
|
||||
var height = $(this).height();
|
||||
|
||||
self.validateHeightAndWidth(div, width, height);
|
||||
|
||||
div.append('svg')
|
||||
.attr('width', width)
|
||||
.attr('height', height)
|
||||
.append('text')
|
||||
.attr('transform', function () {
|
||||
if (self.splitType === 'rows') {
|
||||
return 'translate(' + width * 0.5 + ',' + height / 2 + ')rotate(270)';
|
||||
if (self.dataType === 'rows') {
|
||||
return 'translate(' + width * 0.95 + ',' + height / 2 + ')rotate(270)';
|
||||
}
|
||||
// problem: 'height' var grows with each column, causing layout issue
|
||||
// return 'translate(' + width / 2 + ',' + height * 0.7 + ')';
|
||||
|
|
|
|||
|
|
@ -25,11 +25,13 @@ define(function (require) {
|
|||
}
|
||||
|
||||
ColumnChart.prototype.eventResponse = function (d, i) {
|
||||
var color = this.vis.data.getColorFunc();
|
||||
|
||||
return {
|
||||
value : this._attr.yValue(d, i),
|
||||
point : d,
|
||||
label : d.label,
|
||||
color : this.vis.data.color(d.label),
|
||||
color : color(d.label),
|
||||
pointIndex: i,
|
||||
series : this.chartData.series,
|
||||
config : this._attr,
|
||||
|
|
@ -53,6 +55,30 @@ define(function (require) {
|
|||
}));
|
||||
};
|
||||
|
||||
ColumnChart.prototype.addBrush = function (xScale, svg) {
|
||||
var self = this;
|
||||
|
||||
var brush = d3.svg.brush()
|
||||
.x(xScale)
|
||||
.on('brushend', function brushEnd() {
|
||||
return self._attr.dispatch.brush({
|
||||
range: brush.extent(),
|
||||
config: self._attr,
|
||||
e: d3.event,
|
||||
data: self.chartData
|
||||
});
|
||||
});
|
||||
|
||||
// if (this._attr.dispatch.on('brush')) {
|
||||
if (this._attr.addBrush) {
|
||||
svg.append('g')
|
||||
.attr('class', 'brush')
|
||||
.call(brush)
|
||||
.selectAll('rect')
|
||||
.attr('height', this._attr.height);
|
||||
}
|
||||
};
|
||||
|
||||
ColumnChart.prototype.draw = function () {
|
||||
// Attributes
|
||||
var self = this;
|
||||
|
|
@ -61,7 +87,7 @@ define(function (require) {
|
|||
var elWidth = this._attr.width = $elem.width();
|
||||
var elHeight = this._attr.height = $elem.height();
|
||||
var isTooltip = this._attr.addTooltip;
|
||||
var color = this.vis.data.color;
|
||||
var color = this.vis.data.getColorFunc();
|
||||
var tooltip = this.vis.tooltip;
|
||||
var yScale = this.vis.yAxis.yScale;
|
||||
var xScale = this.vis.xAxis.xScale;
|
||||
|
|
@ -78,9 +104,7 @@ define(function (require) {
|
|||
selection.each(function (data) {
|
||||
layers = self.stackData(data);
|
||||
|
||||
if (elWidth <= 0 || elHeight <= 0) {
|
||||
throw new Error($elem.attr('class') + ' height is ' + elHeight + ' and width is ' + elWidth);
|
||||
}
|
||||
self.validateHeightAndWidth($elem, elWidth, elHeight);
|
||||
|
||||
// Get the width and height
|
||||
width = elWidth - margin.left - margin.right;
|
||||
|
|
@ -95,6 +119,8 @@ define(function (require) {
|
|||
.append('g')
|
||||
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
|
||||
|
||||
self.addBrush(xScale, svg);
|
||||
|
||||
// Data layers
|
||||
layer = svg.selectAll('.layer')
|
||||
.data(layers)
|
||||
|
|
|
|||
|
|
@ -26,17 +26,21 @@ define(function (require) {
|
|||
};
|
||||
|
||||
Data.prototype.xValues = function () {
|
||||
var orderedKeys = orderKeys(this.data);
|
||||
var xValues = orderKeys(this.data);
|
||||
var ordered = this.get('ordered');
|
||||
|
||||
// Converts x values to numbers
|
||||
if (ordered) {
|
||||
orderedKeys = orderedKeys.map(function (d) {
|
||||
return +d;
|
||||
});
|
||||
this.convertXValueStringsToNumbers(xValues);
|
||||
}
|
||||
|
||||
return orderedKeys;
|
||||
return xValues;
|
||||
};
|
||||
|
||||
Data.prototype.convertXValueStringsToNumbers = function (xValues) {
|
||||
return xValues.map(function (d) {
|
||||
return +d;
|
||||
});
|
||||
};
|
||||
|
||||
Data.prototype.splitType = function () {
|
||||
|
|
@ -46,12 +50,12 @@ define(function (require) {
|
|||
return 'series';
|
||||
};
|
||||
|
||||
Data.prototype.splits = function () {
|
||||
if (!this.data.series) {
|
||||
return this.data.rows ? this.data.rows : this.data.columns;
|
||||
}
|
||||
return this.data;
|
||||
};
|
||||
// Data.prototype.splits = function () {
|
||||
// if (!this.data.series) {
|
||||
// return this.data.rows ? this.data.rows : this.data.columns;
|
||||
// }
|
||||
// return this.data;
|
||||
// };
|
||||
|
||||
Data.prototype.flatten = function () {
|
||||
if (!this.data.series) {
|
||||
|
|
@ -110,9 +114,11 @@ define(function (require) {
|
|||
|
||||
Data.prototype.getYStackMax = function (series) {
|
||||
var self = this;
|
||||
|
||||
if (this.isStacked()) {
|
||||
series = this.stack(series);
|
||||
}
|
||||
|
||||
return d3.max(series, function (data) {
|
||||
return d3.max(data, function (d) {
|
||||
if (self.isStacked()) {
|
||||
|
|
@ -123,37 +129,16 @@ define(function (require) {
|
|||
});
|
||||
};
|
||||
|
||||
Data.prototype.isOrdered = function () {
|
||||
this.ordered = this.data.rows ? this.data.rows[0].ordered :
|
||||
this.data.columns ? this.data.columns[0].ordered : this.data.ordered;
|
||||
|
||||
if (this.ordered) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
Data.prototype.injectZeros = function () {
|
||||
this.zeroInjectedData = injectZeros(this.data);
|
||||
return this.zeroInjectedData;
|
||||
};
|
||||
|
||||
Data.prototype.getColorFunc = function () {
|
||||
if (!this.labels) {
|
||||
this.labels = this.getLabels(this.data);
|
||||
}
|
||||
this.color = color(this.labels);
|
||||
return this.color;
|
||||
return injectZeros(this.data);
|
||||
};
|
||||
|
||||
Data.prototype.getLabels = function () {
|
||||
this.labels = getLabels(this.data);
|
||||
return this.labels;
|
||||
return getLabels(this.data);
|
||||
};
|
||||
|
||||
Data.prototype.get = function (name) {
|
||||
return this.data.rows ? this.data.rows[0][name] :
|
||||
this.data.columns ? this.data.columns[0][name] : this.data[name];
|
||||
Data.prototype.getColorFunc = function () {
|
||||
return color(this.getLabels(this.data));
|
||||
};
|
||||
|
||||
return Data;
|
||||
|
|
|
|||
|
|
@ -3,77 +3,87 @@ define(function (require) {
|
|||
var $ = require('jquery');
|
||||
var _ = require('lodash');
|
||||
|
||||
var Chart = Private(require('components/vislib/modules/_chart'));
|
||||
|
||||
_(XAxis).inherits(Chart);
|
||||
function XAxis(args) {
|
||||
XAxis.Super.apply(this, arguments);
|
||||
this.el = args.el;
|
||||
this.data = args.data;
|
||||
this._attr = args.attr;
|
||||
this.width = args.width - this._attr.margin.left - this._attr.margin.right;
|
||||
}
|
||||
|
||||
XAxis.prototype.render = function () {
|
||||
d3.select(this.el).selectAll('.x-axis-div').call(this.appendSVG());
|
||||
};
|
||||
|
||||
XAxis.prototype.getScale = function () {
|
||||
var ordered = this.data.get('ordered');
|
||||
|
||||
// Tests whether the xValues are dates
|
||||
XAxis.prototype.getScale = function (ordered) {
|
||||
if (ordered && ordered.date) {
|
||||
return d3.time.scale();
|
||||
}
|
||||
return d3.scale.ordinal();
|
||||
};
|
||||
|
||||
XAxis.prototype.getDomain = function () {
|
||||
var scale = this.getScale();
|
||||
var ordered = this.data.get('ordered');
|
||||
var keys = this.data.xValues();
|
||||
var minDate;
|
||||
var maxDate;
|
||||
var timeInterval;
|
||||
var spacingPercentage;
|
||||
XAxis.prototype.getDomain = function (scale, ordered) {
|
||||
var xValues = this.data.xValues();
|
||||
|
||||
if (ordered && ordered.date) {
|
||||
// Calculate the min date, max date, and time interval;
|
||||
minDate = Math.min(d3.min(keys), ordered.min);
|
||||
maxDate = Math.max(d3.max(keys), ordered.max);
|
||||
timeInterval = ordered.interval;
|
||||
spacingPercentage = 0.25;
|
||||
|
||||
scale.domain([minDate, maxDate + timeInterval * (1 - spacingPercentage)]);
|
||||
return scale;
|
||||
return this.getTimeDomain(scale, xValues, ordered);
|
||||
}
|
||||
scale.domain(keys);
|
||||
return this.getOrdinalDomain(scale, xValues);
|
||||
};
|
||||
|
||||
XAxis.prototype.getTimeDomain = function (scale, xValues, ordered) {
|
||||
// Take the min of the xValues or the ordered object
|
||||
var minDate = Math.min(d3.min(xValues), ordered.min);
|
||||
// Take the max of the xValues or the ordered object
|
||||
var maxDate = Math.max(d3.max(xValues), ordered.max);
|
||||
var timeInterval = ordered.interval;
|
||||
|
||||
// Should think about replacing
|
||||
var spacingPercentage = 0.25;
|
||||
scale.domain([minDate, maxDate + timeInterval * (1 - spacingPercentage)]);
|
||||
|
||||
return scale;
|
||||
};
|
||||
|
||||
XAxis.prototype.getRange = function () {
|
||||
XAxis.prototype.getOrdinalDomain = function (scale, xValues) {
|
||||
return scale.domain(xValues);
|
||||
};
|
||||
|
||||
XAxis.prototype.getRange = function (scale, ordered, width) {
|
||||
if (ordered && ordered.date) {
|
||||
scale.range([0, width]);
|
||||
return scale;
|
||||
}
|
||||
scale.rangeBands([0, width], 0.1);
|
||||
return scale;
|
||||
};
|
||||
|
||||
XAxis.prototype.getXScale = function (ordered, width) {
|
||||
var scale = this.getScale(ordered);
|
||||
var domain = this.getDomain(scale, ordered);
|
||||
var xScale = this.getRange(domain, ordered, width);
|
||||
|
||||
return xScale;
|
||||
};
|
||||
|
||||
XAxis.prototype.getXAxis = function (width) {
|
||||
var ordered = this.data.get('ordered');
|
||||
var scale = this.getDomain();
|
||||
if (ordered) {
|
||||
scale.range([0, this.width]);
|
||||
return scale;
|
||||
}
|
||||
scale.rangeBands([0, this.width], 0.1);
|
||||
return scale;
|
||||
};
|
||||
|
||||
XAxis.prototype.getXScale = function () {
|
||||
return this.getRange();
|
||||
};
|
||||
|
||||
XAxis.prototype.getXAxis = function () {
|
||||
var xAxisFormatter = this.data.get('xAxisFormatter');
|
||||
this.xScale = this.getXScale();
|
||||
this.xAxisFormatter = this.data.get('xAxisFormatter');
|
||||
this.xScale = this.getXScale(ordered, width);
|
||||
|
||||
this.xAxis = d3.svg.axis()
|
||||
.scale(this.xScale)
|
||||
.tickFormat(xAxisFormatter)
|
||||
.tickFormat(this.xAxisFormatter)
|
||||
.orient('bottom');
|
||||
};
|
||||
|
||||
XAxis.prototype.appendSVG = function () {
|
||||
var self = this;
|
||||
var margin = this._attr.margin;
|
||||
var div;
|
||||
var width;
|
||||
var height;
|
||||
|
|
@ -97,16 +107,21 @@ define(function (require) {
|
|||
return function (selection) {
|
||||
selection.each(function () {
|
||||
div = d3.select(this);
|
||||
width = $(this).width() - self._attr.margin.left - self._attr.margin.right;
|
||||
width = $(this).width() - margin.left - margin.right;
|
||||
height = $(this).height();
|
||||
|
||||
self.validateHeightAndWidth(div, width, height);
|
||||
|
||||
// Return access to xAxis variable on the object
|
||||
self.getXAxis(width);
|
||||
|
||||
svg = div.append('svg')
|
||||
.attr('width', width + self._attr.margin.left + self._attr.margin.right)
|
||||
.attr('width', width + margin.left + margin.right)
|
||||
.attr('height', height);
|
||||
|
||||
svg.append('g')
|
||||
.attr('class', 'x axis')
|
||||
.attr('transform', 'translate(' + self._attr.margin.left + ',0)')
|
||||
.attr('transform', 'translate(' + margin.left + ',0)')
|
||||
.call(self.xAxis);
|
||||
|
||||
// get label widths
|
||||
|
|
|
|||
|
|
@ -3,26 +3,29 @@ define(function (require) {
|
|||
var _ = require('lodash');
|
||||
var $ = require('jquery');
|
||||
|
||||
function YAxis(el, yMax, height, margin) {
|
||||
this.el = el;
|
||||
this.yMax = yMax;
|
||||
this.margin = margin;
|
||||
this.height = height - margin.top - margin.bottom;
|
||||
var Chart = Private(require('components/vislib/modules/_chart'));
|
||||
|
||||
_(YAxis).inherits(Chart);
|
||||
function YAxis(args) {
|
||||
YAxis.Super.apply(this, arguments);
|
||||
this.el = args.el;
|
||||
this.yMax = args.yMax;
|
||||
this._attr = args.attr;
|
||||
}
|
||||
|
||||
YAxis.prototype.render = function () {
|
||||
d3.select(this.el).selectAll('.y-axis-div').call(this.appendSVG());
|
||||
};
|
||||
|
||||
YAxis.prototype.getYScale = function () {
|
||||
YAxis.prototype.getYScale = function (height) {
|
||||
this.yScale = d3.scale.linear()
|
||||
.domain([0, this.yMax])
|
||||
.range([this.height, 0])
|
||||
.range([height, 0])
|
||||
.nice();
|
||||
};
|
||||
|
||||
YAxis.prototype.getYAxis = function () {
|
||||
this.getYScale();
|
||||
YAxis.prototype.getYAxis = function (height) {
|
||||
this.getYScale(height);
|
||||
|
||||
this.yAxis = d3.svg.axis()
|
||||
.scale(this.yScale)
|
||||
|
|
@ -32,6 +35,7 @@ define(function (require) {
|
|||
|
||||
YAxis.prototype.appendSVG = function () {
|
||||
var self = this;
|
||||
var margin = this._attr.margin;
|
||||
var div;
|
||||
var width;
|
||||
var height;
|
||||
|
|
@ -39,21 +43,25 @@ define(function (require) {
|
|||
var bbox;
|
||||
var tickN;
|
||||
|
||||
this.getYAxis();
|
||||
|
||||
return function (selection) {
|
||||
selection.each(function () {
|
||||
div = d3.select(this);
|
||||
width = $(this).width();
|
||||
height = $(this).height() - self.margin.top - self.margin.bottom;
|
||||
height = $(this).height() - margin.top - margin.bottom;
|
||||
|
||||
self.validateHeightAndWidth(div, width, height);
|
||||
|
||||
// Return access to the yAxis
|
||||
self.getYAxis(height);
|
||||
|
||||
svg = div.append('svg')
|
||||
.attr('width', width)
|
||||
.attr('height', height + self.margin.top + self.margin.bottom);
|
||||
.attr('height', height + margin.top + margin.bottom);
|
||||
|
||||
svg.append('g')
|
||||
.attr('class', 'y axis')
|
||||
.attr('transform', 'translate(' + width * 0.95 + ',' + self.margin.top + ')')
|
||||
//.attr('transform', 'translate(' + width * 0.95 + ',' + self.margin.top + ')')
|
||||
.attr('transform', 'translate(' + width + ',' + margin.top + ')')
|
||||
.call(self.yAxis);
|
||||
|
||||
// update layout divs to tick lengths
|
||||
|
|
|
|||
|
|
@ -19,6 +19,13 @@ define(function (require) {
|
|||
return this._attr.dispatch.on(event, null);
|
||||
};
|
||||
|
||||
Chart.prototype.validateHeightAndWidth = function ($el, width, height) {
|
||||
if (width <= 0 || height <= 0) {
|
||||
throw new Error($el.attr('class') + ' height is ' + height + ' and width is ' + width);
|
||||
}
|
||||
return;
|
||||
};
|
||||
|
||||
Chart.prototype.destroy = function () {
|
||||
this._attr.destroyFlag = true;
|
||||
|
||||
|
|
|
|||
|
|
@ -19,12 +19,20 @@ define(function (require) {
|
|||
|
||||
VisFunctions.prototype.renderLayout = function (data) {
|
||||
this.layout = new Layout(this.el, data);
|
||||
this.layout.render();
|
||||
try {
|
||||
this.layout.render();
|
||||
} catch (error) {
|
||||
console.error(error.message);
|
||||
}
|
||||
};
|
||||
|
||||
VisFunctions.prototype.renderLegend = function (legend, config) {
|
||||
this.legend = new Legend(legend, config);
|
||||
this.legend.render();
|
||||
try {
|
||||
this.legend.render();
|
||||
} catch (error) {
|
||||
console.error(error.message);
|
||||
}
|
||||
};
|
||||
|
||||
VisFunctions.prototype.renderTooltip = function (elClass, formatter) {
|
||||
|
|
@ -33,22 +41,38 @@ define(function (require) {
|
|||
|
||||
VisFunctions.prototype.renderChartTitles = function (splitType) {
|
||||
this.chartTitle = new ChartTitle(this.el, splitType);
|
||||
this.chartTitle.render();
|
||||
try {
|
||||
this.chartTitle.render();
|
||||
} catch (error) {
|
||||
console.error(error.message);
|
||||
}
|
||||
};
|
||||
|
||||
VisFunctions.prototype.renderXAxis = function (args) {
|
||||
this.xAxis = new XAxis(args);
|
||||
this.xAxis.render();
|
||||
try {
|
||||
this.xAxis.render();
|
||||
} catch (error) {
|
||||
console.error(error.message);
|
||||
}
|
||||
};
|
||||
|
||||
VisFunctions.prototype.renderYAxis = function (yMax, height, margin) {
|
||||
this.yAxis = new YAxis(this.el, yMax, height, margin);
|
||||
this.yAxis.render();
|
||||
VisFunctions.prototype.renderYAxis = function (args) {
|
||||
this.yAxis = new YAxis(args);
|
||||
try {
|
||||
this.yAxis.render();
|
||||
} catch (error) {
|
||||
console.error(error.message);
|
||||
}
|
||||
};
|
||||
|
||||
VisFunctions.prototype.renderAxisTitles = function (xTitle, yTitle) {
|
||||
this.axisTitle = new AxisTitle(this.el, xTitle, yTitle);
|
||||
this.axisTitle.render();
|
||||
try {
|
||||
this.axisTitle.render();
|
||||
} catch (error) {
|
||||
console.error(error.message);
|
||||
}
|
||||
};
|
||||
|
||||
VisFunctions.prototype.renderCharts = function (vis, charts) {
|
||||
|
|
@ -76,7 +100,6 @@ define(function (require) {
|
|||
});
|
||||
|
||||
charts.push(chart);
|
||||
|
||||
try {
|
||||
chart.render();
|
||||
} catch (error) {
|
||||
|
|
|
|||
|
|
@ -28,11 +28,6 @@ define(function (require) {
|
|||
var zeroInjectedData;
|
||||
var type;
|
||||
var legend;
|
||||
var xValues;
|
||||
var formatter;
|
||||
var width;
|
||||
var yMax;
|
||||
var height;
|
||||
var xTitle;
|
||||
var yTitle;
|
||||
var vis;
|
||||
|
|
@ -42,7 +37,6 @@ define(function (require) {
|
|||
throw new Error('No valid data!');
|
||||
}
|
||||
|
||||
|
||||
// DATA CLASS
|
||||
this.instantiateData(data);
|
||||
|
||||
|
|
@ -70,21 +64,18 @@ define(function (require) {
|
|||
this.renderChartTitles(type);
|
||||
|
||||
// XAXIS CLASS
|
||||
// xValues = this.data.xValues();
|
||||
// formatter = this.data.get('xAxisFormatter');
|
||||
width = $('.x-axis-div').width();
|
||||
this.renderXAxis({
|
||||
el: this.el,
|
||||
data: this.data,
|
||||
width: width,
|
||||
attr: this._attr
|
||||
});
|
||||
// this.renderXAxis(xValues, formatter, width, this._attr.margin, this.data);
|
||||
|
||||
// YAXIS CLASS
|
||||
yMax = this.data.getYMaxValue();
|
||||
height = $('.y-axis-div').height();
|
||||
this.renderYAxis(yMax, height, this._attr.margin);
|
||||
this.renderYAxis({
|
||||
el: this.el,
|
||||
yMax: this.data.getYMaxValue(),
|
||||
attr: this._attr
|
||||
});
|
||||
|
||||
// AXIS TITLE CLASS
|
||||
xTitle = this.data.get('xAxisLabel');
|
||||
|
|
|
|||
|
|
@ -7805,7 +7805,13 @@ fieldset[disabled] .form-control {
|
|||
opacity: .8;
|
||||
}
|
||||
input.ng-dirty.ng-invalid,
|
||||
<<<<<<< HEAD
|
||||
select.ng-dirty.ng-invalid {
|
||||
=======
|
||||
select.ng-dirty.ng-invalid,
|
||||
form:not(.hide-errors) input.ng-invalid,
|
||||
form:not(.hide-errors) select.ng-invalid {
|
||||
>>>>>>> 55f72e5d3dac5f9c29a9ba32ac53cd551732bd97
|
||||
border-color: #e74c3c !important;
|
||||
}
|
||||
input[type="radio"][disabled],
|
||||
|
|
|
|||
|
|
@ -87,6 +87,7 @@
|
|||
'specs/vislib/labels',
|
||||
'specs/vislib/d3functions',
|
||||
'specs/vislib/data',
|
||||
'specs/vislib/xAxis',
|
||||
'specs/utils/diff_time_picker_vals',
|
||||
'specs/factories/events',
|
||||
'specs/index_patterns/_flatten_search_response',
|
||||
|
|
|
|||
215
test/unit/specs/vislib/xAxis.js
Normal file
215
test/unit/specs/vislib/xAxis.js
Normal file
|
|
@ -0,0 +1,215 @@
|
|||
define(function (require) {
|
||||
var angular = require('angular');
|
||||
var _ = require('lodash');
|
||||
var $ = require('jquery');
|
||||
|
||||
angular.module('XAxisFactory', ['kibana']);
|
||||
|
||||
describe('Vislib xAxis Class Test Suite', function () {
|
||||
var XAxis;
|
||||
var Data;
|
||||
var xAxis;
|
||||
var el;
|
||||
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
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
xAxisFormatter: function (thing) {
|
||||
return new Date(thing);
|
||||
},
|
||||
xAxisLabel: 'Date Histogram',
|
||||
yAxisLabel: 'Count'
|
||||
};
|
||||
|
||||
beforeEach(function () {
|
||||
module('XAxisFactory');
|
||||
});
|
||||
|
||||
beforeEach(function () {
|
||||
inject(function (d3, Private) {
|
||||
XAxis = Private(require('components/vislib/modules/XAxis'));
|
||||
Data = Private(require('components/vislib/modules/Data'));
|
||||
|
||||
el = d3.select('body').append('div')
|
||||
.attr('class', 'x-axis-wrapper')
|
||||
.append('div')
|
||||
.attr('class', 'x-axis-div')
|
||||
.style('height', '20px');
|
||||
|
||||
xAxis = new XAxis({
|
||||
el: $('.x-axis-wrapper')[0],
|
||||
data: new Data(data),
|
||||
attr: { margin: { top: 0, right: 0, bottom: 0, left: 0 } }
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
afterEach(function () {
|
||||
el.remove();
|
||||
});
|
||||
|
||||
describe('render Method', function () {
|
||||
beforeEach(function () {
|
||||
xAxis.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('getScale, getDomain, and getRange Methods', function () {
|
||||
var ordered;
|
||||
var timeScale;
|
||||
var timeDomain;
|
||||
var ordinalScale;
|
||||
var ordinalDomain;
|
||||
var width;
|
||||
var range;
|
||||
|
||||
beforeEach(function () {
|
||||
ordered = xAxis.data.get('ordered');
|
||||
timeScale = xAxis.getScale(ordered);
|
||||
timeDomain = xAxis.getDomain(timeScale, ordered);
|
||||
ordinalScale = xAxis.getScale(false);
|
||||
ordinalDomain = ordinalScale.domain(['this', 'should', 'be', 'an', 'array']);
|
||||
width = $('.x-axis-div').width();
|
||||
range = xAxis.getRange(timeDomain, ordered, width);
|
||||
});
|
||||
|
||||
it('should return a function', function () {
|
||||
expect(_.isFunction(timeScale)).to.be(true);
|
||||
expect(_.isFunction(ordinalScale)).to.be(true);
|
||||
});
|
||||
|
||||
it('should return the correct domain', function () {
|
||||
expect(_.isDate(timeDomain.domain()[0])).to.be(true);
|
||||
expect(_.isDate(timeDomain.domain()[1])).to.be(true);
|
||||
});
|
||||
|
||||
it('should return an ordinal scale', function () {
|
||||
expect(ordinalDomain.domain()[0]).to.be('this');
|
||||
expect(ordinalDomain.domain()[4]).to.be('array');
|
||||
});
|
||||
|
||||
it('should return the correct range', function () {
|
||||
expect(range.range()[0]).to.be(0);
|
||||
expect(range.range()[1]).to.be(width);
|
||||
});
|
||||
});
|
||||
|
||||
describe('getXScale Method', function () {
|
||||
var ordered;
|
||||
var width;
|
||||
var xScale;
|
||||
|
||||
beforeEach(function () {
|
||||
ordered = xAxis.data.get('ordered');
|
||||
width = $('.x-axis-div').width();
|
||||
xScale = xAxis.getXScale(ordered, width);
|
||||
});
|
||||
|
||||
it('should return a function', function () {
|
||||
expect(_.isFunction(xScale)).to.be(true);
|
||||
});
|
||||
|
||||
it('should return a domain', function () {
|
||||
expect(_.isDate(xScale.domain()[0])).to.be(true);
|
||||
expect(_.isDate(xScale.domain()[1])).to.be(true);
|
||||
});
|
||||
|
||||
it('should return a range', function () {
|
||||
expect(xScale.range()[0]).to.be(0);
|
||||
expect(xScale.range()[1]).to.be(width);
|
||||
});
|
||||
});
|
||||
|
||||
describe('getXAxis Method', function () {
|
||||
var width;
|
||||
var axis;
|
||||
|
||||
beforeEach(function () {
|
||||
width = $('.x-axis-div').width();
|
||||
xAxis.getXAxis(width);
|
||||
});
|
||||
|
||||
it('should create an xAxis function on the xAxis class', function () {
|
||||
expect(_.isFunction(xAxis.xAxis)).to.be(true);
|
||||
});
|
||||
|
||||
it('should create an xScale function on the xAxis class', function () {
|
||||
expect(_.isFunction(xAxis.xScale)).to.be(true);
|
||||
});
|
||||
|
||||
it('should create an xAxisFormatter function on the xAxis class', function () {
|
||||
expect(_.isFunction(xAxis.xAxisFormatter)).to.be(true);
|
||||
});
|
||||
});
|
||||
|
||||
describe('draw Method', function () {
|
||||
it('should be a function', function () {
|
||||
expect(_.isFunction(xAxis.draw())).to.be(true);
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue