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

deleting unused components folders, refactoring legend module, fixing test errors, adding _chart test

Browse source
This commit is contained in:
Shelby Sturgis 2014-08-31 03:36:31 +03:00
parent ef95a0305a
commit 94c4b3b63d
23 changed files with 103 additions and 375 deletions
Download patch file Download diff file Expand all files Collapse all files

7
src/kibana/components/vislib/components/Legend/classify.js
View file

@ -1,7 +0,0 @@
define(function (require) {
return function LegendClassifyUtilService() {
return function (name) {
return 'c' + name.replace(/[#]/g, '');
};
};
});

12
src/kibana/components/vislib/components/Legend/header.js
View file

@ -1,12 +0,0 @@
define(function (require) {
return function LegendHeaderUtilService() {
return function (d3el) {
return d3el.append('div')
.attr('class', 'header')
.append('div')
.attr('class', 'column-labels')
.html('<span class="btn btn-xs btn-default legend-toggle">' +
'<i class="fa fa-list-ul"></i></span>');
};
};
});

63
src/kibana/components/vislib/components/Legend/legend.js
View file

@ -1,63 +0,0 @@
define(function (require) {
return function LegendUtilService(d3, Private) {
var appendLegendDiv = Private(require('components/vislib/components/_functions/d3/_append_elem'));
var createHeader = Private(require('components/vislib/components/Legend/header'));
var toggleLegend = Private(require('components/vislib/components/Legend/toggle'));
var createList = Private(require('components/vislib/components/Legend/list'));
var classify = Private(require('components/vislib/components/Legend/classify'));
return function (self) {
var legendDiv = d3.select('.' + self.legendClass);
var items = self.labels;
var header = createHeader(legendDiv);
var headerIcon = d3.select('.legend-toggle');
var list = createList(legendDiv, items, self);
headerIcon.on('click', function (d) {
toggleLegend(self);
});
d3.selectAll('.color')
.on('mouseover', function (d) {
var liClass = '.' + classify(self.color(d));
d3.selectAll('.color').style('opacity', self.blurredOpacity);
// select series on chart
d3.selectAll(liClass).style('opacity', self.focusOpacity);
d3.selectAll('.color')
.style('opacity', self.blurredOpacity);
// Select series on chart
d3.selectAll(liClass)
.style('opacity', self.focusOpacity);
});
d3.selectAll('.color')
.on('mouseout', function () {
d3.selectAll('.color').style('opacity', self.defaultOpacity);
});
// add/remove class to open legend
if (self.isOpen) {
d3.select('.' + self.legendClass)
.classed('open4', true);
} else {
d3.select('.' + self.legendClass)
.classed('open4', false);
}
// createList(legendDiv, items, self)
// .on('mouseover', function (d) {
// var liClass = '.' + classify(self.color(d));
// d3.selectAll('.color').style('opacity', self.blurredOpacity);
// // Select series on chart
// d3.selectAll(liClass).style('opacity', self.focusOpacity);
// })
// .on('mouseout', function () {
// d3.selectAll('.color').style('opacity', self.defaultOpacity);
// });
};
};
});

25
src/kibana/components/vislib/components/Legend/list.js
View file

@ -1,25 +0,0 @@
define(function (require) {
return function LegendListUtilService(Private) {
var classify = Private(require('components/vislib/components/Legend/classify'));
return function (d3el, arrOfItms, args) {
return d3el.append('ul')
.attr('class', function () {
if (args._attr.isOpen) {
return 'legend-ul';
}
return 'legend-ul hidden';
})
.selectAll('li')
.data(arrOfItms)
.enter()
.append('li')
.attr('class', function (d) {
return 'color ' + classify(args.color(d));
})
.html(function (d) {
return '<span class="dots" style="background:' + args.color(d) + '"></span>' + d;
});
};
};
});

23
src/kibana/components/vislib/components/Legend/toggle.js
View file

@ -1,23 +0,0 @@
define(function () {
return function LegendToggleUtilService(d3) {
return function (self) {
if (self._attr.isOpen) {
// close legend
d3.select('.' + self._attr.legendClass)
.classed('open4', false);
d3.select('ul.legend-ul')
.classed('hidden', true);
self._attr.isOpen = false;
} else {
// open legend
d3.select('.' + self._attr.legendClass)
.classed('open4', true);
d3.select('ul.legend-ul')
.classed('hidden', false);
self._attr.isOpen = true;
}
};
};
});

13
src/kibana/components/vislib/components/_functions/d3/_append_elem.js vendored
View file

@ -1,13 +0,0 @@
define(function () {
return function AppendElemUtilService(d3) {
// Accepts an DOM element, an DOM element or SVG type,
// and a optional class name
return function (el, type, name) {
name = typeof name !== 'undefined' ? name : type;
// Returns a d3 selection
return d3.select(el).append(type)
.attr('class', name);
};
};
});

12
src/kibana/components/vislib/components/_functions/d3/_append_x_axis.js vendored
View file

@ -1,12 +0,0 @@
define(function () {
return function AppendXAxisUtilService() {
return function (d3el, height, xAxis, name) {
name = typeof name !== 'undefined' ? name : 'x axis';
return d3el.append('g')
.attr('class', name)
.attr('transform', 'translate(0,' + height + ')')
.call(xAxis);
};
};
});

11
src/kibana/components/vislib/components/_functions/d3/_append_y_axis.js vendored
View file

@ -1,11 +0,0 @@
define(function () {
return function AppendYAxisUtilService() {
return function (d3el, yAxis, name) {
name = typeof name !== 'undefined' ? name : 'y axis';
return d3el.append('g')
.attr('class', name)
.call(yAxis);
};
};
});

8
src/kibana/components/vislib/components/_functions/d3/_call_function.js vendored
View file

@ -1,8 +0,0 @@
define(function () {
return function CallFunctionUtilService() {
return function (d3el, data, callback) {
return d3el.datum(data)
.call(callback);
};
};
});

13
src/kibana/components/vislib/components/_functions/d3/_create_svg.js vendored
View file

@ -1,13 +0,0 @@
define(function (require) {
return function CreateSVGUtilService(d3, Private) {
var appendElem = Private(require('components/vislib/components/_functions/d3/_append_elem'));
return function (el, width, height, name) {
name = typeof name !== 'undefined' ? name : 'canvas';
return appendElem(el, 'svg', name)
.attr('width', width)
.attr('height', height);
};
};
});

47
src/kibana/components/vislib/components/_functions/d3/_layout.js vendored
View file

@ -1,47 +0,0 @@
define(function () {
return function LayoutUtilService(d3) {
return function (el) {
var vis = d3.select(el).append('div')
.attr('class', 'vis-wrapper');
// 1. Append yAxis
var yaxis = vis.append('div')
.attr('class', 'y-axis-col-wrapper');
var yAxisWrapper = yaxis.append('div')
.attr('class', 'y-axis-col');
yAxisWrapper.append('div')
.attr('class', 'y-axis-title');
yAxisWrapper.append('div')
.attr('class', 'y-axis-chart-title');
yAxisWrapper.append('div')
.attr('class', 'y-axis-div-wrapper');
yaxis.append('div')
.attr('class', 'y-axis-spacer-block');
// 2. Append vis column
var chart = vis.append('div')
.attr('class', 'vis-col-wrapper');
chart.append('div')
.attr('class', 'chart-wrapper');
// append xAxis
var xAxisWrapper = chart.append('div')
.attr('class', 'x-axis-wrapper');
xAxisWrapper.append('div')
.attr('class', 'x-axis-div-wrapper');
xAxisWrapper.append('div')
.attr('class', 'x-axis-chart-title');
xAxisWrapper.append('div')
.attr('class', 'x-axis-title');
// 3. Legend div
var legend = vis.append('div')
.attr('class', 'legend-col-wrapper');
// 4. Tooltip
var tooltip = vis.append('div')
.attr('class', 'k4tip');
return vis;
};
};
});

8
src/kibana/components/vislib/components/_functions/d3/_remove_all.js vendored
View file

@ -1,8 +0,0 @@
define(function () {
return function RemoveAllUtilService(d3) {
return function (el) {
return d3.select(el).selectAll('*')
.remove();
};
};
});

28
src/kibana/components/vislib/components/_functions/d3/_split.js vendored
View file

@ -1,28 +0,0 @@
define(function () {
return function splittingUtilService(d3) {
return function split(selection) {
selection.each(function (data) {
var div = d3.select(this)
.attr('class', function () {
return data.rows ? 'chart-wrapper-row' : data.columns ? 'chart-wrapper-column' : 'chart-wrapper';
});
var divClass;
var charts = div.selectAll('charts')
.append('div')
.data(function (d) {
divClass = d.rows ? 'chart-row' : d.columns ? 'chart-column' : 'chart';
return d.rows ? d.rows : d.columns ? d.columns : [d];
})
.enter().append('div')
.attr('class', function () {
return divClass;
});
if (!data.series) {
charts.call(split);
}
});
};
};
});

8
src/kibana/components/vislib/components/_functions/d3/_transform_svg.js vendored
View file

@ -1,8 +0,0 @@
define(function () {
return function TransformSVGUtilService() {
return function (svg, left, top) {
return svg.append('g')
.attr('transform', 'translate(' + left + ',' + top + ')');
};
};
});

11
src/kibana/components/vislib/components/_functions/d3/_y_stack_max.js vendored
View file

@ -1,11 +0,0 @@
define(function () {
return function YStackMaxUtilService(d3) {
return function (stackedData) {
return d3.max(stackedData, function (data) {
return d3.max(data, function (d) {
return d.y0 + d.y;
});
});
};
};
});

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

@ -4,7 +4,7 @@ define(function (require) {
var $ = require('jquery');
var Chart = Private(require('components/vislib/modules/_chart'));
var classify = Private(require('components/vislib/components/Legend/classify'));
var Legend = Private(require('components/vislib/modules/legend'));
// Dynamically adds css file
require('css!components/vislib/components/styles/main');
@ -144,7 +144,7 @@ define(function (require) {
bars.enter()
.append('rect')
.attr('class', function (d) {
return 'color ' + classify(color(d.label));
return 'color ' + Legend.prototype.classify.call(this, color(d.label));
})
.attr('fill', function (d) {
return color(d.label);

3
src/kibana/components/vislib/modules/Handler.js
View file

@ -37,7 +37,6 @@ define(function (require) {
this.tooltip = new Tooltip(this.data.get('tooltipFormatter'));
}
this.chartTitle = new ChartTitle(this.el);
this.xAxis = new XAxis({
el: this.el,
xValues: this.data.xValues(),
@ -52,6 +51,8 @@ define(function (require) {
_attr: this._attr
});
this.axisTitle = new AxisTitle(this.el, this.data.get('xAxisLabel'), this.data.get('yAxisLabel'));
this.chartTitle = new ChartTitle(this.el);
this.renderArray = [
this.layout,
this.legend,

2
src/kibana/components/vislib/modules/Layout.js
View file

@ -51,7 +51,7 @@ define(function (require) {
}
if (typeof obj.type !== 'string') {
throw new Error (obj.type + ' must be a string');
throw new Error(obj.type + ' must be a string');
}
if (typeof obj.parent === 'string') {

79
src/kibana/components/vislib/modules/legend.js
View file

@ -3,14 +3,11 @@ define(function (require) {
var $ = require('jquery');
var _ = require('lodash');
var createHeader = Private(require('components/vislib/components/Legend/header'));
var createList = Private(require('components/vislib/components/Legend/list'));
var classify = Private(require('components/vislib/components/Legend/classify'));
// Dynamically adds css file
require('css!components/vislib/components/styles/main');
function Legend(labels, color, config, el) {
this.el = el;
this.labels = labels;
this.color = color;
this._attr = _.defaults(config || {}, {
@ -21,69 +18,89 @@ define(function (require) {
'isOpen' : false,
'width': 20
});
this.el = el;
}
Legend.prototype.header = function (el) {
return el.append('div')
.attr('class', 'header')
.append('div')
.attr('class', 'column-labels')
.html('<span class="btn btn-xs btn-default legend-toggle">' +
'<i class="fa fa-list-ul"></i></span>');
};
Legend.prototype.list = function (el, arrOfItms, args) {
var self = this;
return el.append('ul')
.attr('class', function () {
if (args._attr.isOpen) {
return 'legend-ul';
}
return 'legend-ul hidden';
})
.selectAll('li')
.data(arrOfItms)
.enter()
.append('li')
.attr('class', function (d) {
return 'color ' + self.classify(args.color(d));
})
.html(function (d) {
return '<span class="dots" style="background:' + args.color(d) + '"></span>' + d;
});
};
Legend.prototype.classify = function (name) {
return 'c' + name.replace(/[#]/g, '');
};
Legend.prototype.render = function () {
var visEl = d3.select(this.el);
var legendDiv = visEl.select('.' + this._attr.legendClass);
var items = this.labels;
var header = createHeader(legendDiv);
var header = this.header(legendDiv);
var headerIcon = visEl.select('.legend-toggle');
var list = createList(legendDiv, items, this);
//var width = this._attr.width ? this._attr.width : this.getMaxLabelLength(list);
var list = this.list(legendDiv, items, this);
var that = this;
var self = this;
// toggle
headerIcon.on('click', function (d) {
if (that._attr.isOpen) {
if (self._attr.isOpen) {
// close legend
visEl.select('ul.legend-ul')
.classed('hidden', true);
that._attr.isOpen = false;
self._attr.isOpen = false;
} else {
// open legend
visEl.select('ul.legend-ul')
.classed('hidden', false);
that._attr.isOpen = true;
self._attr.isOpen = true;
}
});
visEl.selectAll('.color')
.on('mouseover', function (d) {
var liClass = '.' + classify(that.color(d));
visEl.selectAll('.color').style('opacity', that._attr.blurredOpacity);
var liClass = '.' + self.classify(self.color(d));
visEl.selectAll('.color').style('opacity', self._attr.blurredOpacity);
// select series on chart
visEl.selectAll(liClass).style('opacity', that._attr.focusOpacity);
visEl.selectAll(liClass).style('opacity', self._attr.focusOpacity);
visEl.selectAll('.color')
.style('opacity', that._attr.blurredOpacity);
.style('opacity', self._attr.blurredOpacity);
// Select series on chart
visEl.selectAll(liClass)
.style('opacity', that._attr.focusOpacity);
.style('opacity', self._attr.focusOpacity);
});
visEl.selectAll('.color')
.on('mouseout', function () {
visEl.selectAll('.color').style('opacity', that._attr.defaultOpacity);
visEl.selectAll('.color').style('opacity', self._attr.defaultOpacity);
});
// add/remove class to open legend
// if (this._attr.isOpen) {
// d3.select('.' + this._attr.legendClass)
// .classed('open4', true);
// } else {
// d3.select('.' + this._attr.legendClass)
// .classed('open4', false);
// }
};
return Legend;

2
test/unit/index.html
View file

@ -87,7 +87,6 @@
'specs/vislib/color',
'specs/vislib/zero_injection',
'specs/vislib/labels',
'specs/vislib/d3functions',
'specs/vislib/x_axis',
'specs/vislib/y_axis',
'specs/vislib/axis_title',
@ -96,6 +95,7 @@
'specs/vislib/vis_types',
'specs/vislib/splits',
'specs/vislib/layout',
'specs/vislib/_chart',
'specs/vislib/column_layout',
'specs/utils/diff_time_picker_vals',
'specs/factories/events',

48
test/unit/specs/vislib/_chart.js Normal file
View file

@ -0,0 +1,48 @@
define(function (require) {
var angular = require('angular');
angular.module('ChartBaseClass', ['kibana']);
angular.module('ColumnChartFactory', ['kibana']);
describe('VisLib _chart Test Suite', function () {
var ColumnChart;
var Chart;
var chartData = {};
var vis;
var el;
var myChart;
beforeEach(function () {
module('ChartBaseClass');
module('ColumnChartFactory');
});
beforeEach(function () {
inject(function (d3, Private) {
ColumnChart = Private(require('components/vislib/modules/ColumnChart'));
Chart = Private(require('components/vislib/modules/_chart'));
el = d3.select('body').append('div').attr('class', 'column-chart');
vis = {
_attr: {
stack: d3.layout.stack()
}
};
myChart = new ColumnChart(vis, el, chartData);
});
});
afterEach(function () {
el.remove();
});
it('should be a constructor for visualization modules', function () {
expect(myChart instanceof Chart).to.be(true);
});
it('should have a render method', function () {
expect(typeof myChart.render === 'function').to.be(true);
});
});
});

49
test/unit/specs/vislib/d3functions.js vendored
View file

@ -1,49 +0,0 @@
define(function (require) {
var angular = require('angular');
var _ = require('lodash');
angular.module('AppendElemUtilService', ['kibana']);
describe('Vislib d3 Functions Test Suite', function () {
describe('Append Elem Function', function () {
var appendElem;
var fixture;
var fixture1;
beforeEach(function () {
module('AppendElemUtilService');
});
beforeEach(function () {
inject(function (d3, Private) {
appendElem = Private(require('components/vislib/components/_functions/d3/_append_elem'));
fixture = appendElem('body', 'div', 'test');
fixture1 = appendElem('body', 'div');
});
});
afterEach(function () {
fixture.remove();
fixture1.remove();
});
it('should return a function', function () {
expect(_.isFunction(appendElem)).to.be(true);
});
it('should append a div to the body', function () {
expect(fixture).to.have.length(1);
});
it('should have the correct class name', function () {
expect(fixture.attr('class')).to.be('test');
});
it('should have the correct class name if the class name is not provided', function () {
expect(fixture1.attr('class')).to.be('div');
});
});
});
});

2
test/unit/specs/vislib/splits.js
View file

@ -255,7 +255,7 @@ define(function (require) {
inject(function (d3) {
fixture = d3.select('body').append('div')
.attr('class', 'rows')
.datum( { rows: [{}, {}] });
.datum({ rows: [{}, {}] });
d3.select('.rows').call(yAxisSplit);
divs = d3.selectAll('.y-axis-div')[0];
});