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

fixing bugs

Browse source
This commit is contained in:
Shelby Sturgis 2014-09-25 23:22:04 +03:00
parent df5b6c90ec
commit 1a848fda17
9 changed files with 76 additions and 65 deletions
Download patch file Download diff file Expand all files Collapse all files

33
src/kibana/components/vislib/lib/dispatch.js
View file

@ -5,16 +5,16 @@ define(function (require) {
/**
* Events Class
*/
function Dispatch(vis, chartData) {
function Dispatch(handler, chartData) {
if (!(this instanceof Dispatch)) {
return new Dispatch(vis, chartData);
return new Dispatch(handler, chartData);
}
var type = vis._attr.type;
var type = handler._attr.type;
this.vis = vis;
this.handler = handler;
this.chartData = chartData;
this.color = type === 'pie' ? vis.data.getPieColorFunc() : vis.data.getColorFunc();
this._attr = _.defaults(vis._attr || {}, {
this.color = type === 'pie' ? handler.data.getPieColorFunc() : handler.data.getColorFunc();
this._attr = _.defaults(handler._attr || {}, {
yValue: function (d) {
return d.y;
},
@ -29,19 +29,20 @@ define(function (require) {
var color = this.color;
var chartData = this.chartData;
var attr = this._attr;
var vis = this.vis;
var handler = this.handler;
return {
value : getYValue(d, i),
point : d,
label : label,
color : color(label),
value: getYValue(d, i),
point: d,
label: label,
color: color(label),
pointIndex: i,
series : chartData.series,
config : attr,
data : chartData,
e : d3.event,
vis : vis
series: chartData.series,
slices: chartData.slices,
config: attr,
data: chartData,
e: d3.event,
handler: handler
};
};

1
src/kibana/components/vislib/lib/handler/handler.js
View file

@ -66,6 +66,7 @@ define(function (require) {
.selectAll('.chart')
.each(function (chartData) {
// new up the visualization type
console.log(self);
var chart = new self.ChartClass(self, this, chartData);
// Bind events to the chart

5
src/kibana/components/vislib/lib/legend.js
View file

@ -25,7 +25,6 @@ define(function (require) {
this.el = el;
this.labels = labels;
this.color = color;
this.tooltip = new Tooltip(this.el, function (d) { return d; });
this._attr = _.defaults(_attr || {}, {
// Legend specific attributes
'legendClass' : 'legend-col-wrapper',
@ -109,10 +108,6 @@ define(function (require) {
}
});
headerIcon
.datum(['Legend'])
.call(self.tooltip.render());
visEl.selectAll('.color')
.on('mouseover', function (d) {
var liClass = '.' + self.colorToClass(self.color(d));

11
src/kibana/components/vislib/lib/tooltip.js
View file

@ -12,12 +12,12 @@ define(function (require) {
* el => reference to DOM element
* formatter => tooltip formatter
*/
function Tooltip(vis, events) {
function Tooltip(handler, events) {
if (!(this instanceof Tooltip)) {
return new Tooltip(vis, events);
return new Tooltip(handler, events);
}
this.vis = vis;
this.el = vis.el;
this.handler = handler;
this.el = handler.el;
this.events = events;
this.tooltipClass = 'vis-tooltip';
this.containerClass = 'vis-wrapper';
@ -25,7 +25,7 @@ define(function (require) {
Tooltip.prototype.render = function () {
var self = this;
var tooltipFormatter = this.vis.data.get('tooltipFormatter');
var tooltipFormatter = this.handler.data.get('tooltipFormatter');
return function (selection) {
@ -59,7 +59,6 @@ define(function (require) {
offset = self.getOffsets(tooltipDiv, mouseMove);
console.log(self.events.eventResponse(d, i));
// return text and position for tooltip
return tooltipDiv.datum(self.events.eventResponse(d, i))
.html(tooltipFormatter)

14
src/kibana/components/vislib/visualizations/_chart.js
View file

@ -10,22 +10,22 @@ define(function (require) {
* Base Class for all visualizations.
* Exposes a render method.
*/
function Chart(vis, el, chartData) {
function Chart(handler, el, chartData) {
if (!(this instanceof Chart)) {
return new Chart(vis, el, chartData);
return new Chart(handler, el, chartData);
}
this.vis = vis;
this.handler = handler;
this.chartEl = el;
this.chartData = chartData;
this.events = new Dispatch(vis, chartData);
var events = this.events = new Dispatch(handler, chartData);
if (vis._attr.addTooltip) {
if (handler._attr.addTooltip) {
// Add tooltip
this.tooltip = new Tooltip(vis, this.events);
this.tooltip = new Tooltip(handler, events);
}
this._attr = _.defaults(vis._attr || {}, {});
this._attr = _.defaults(handler._attr || {}, {});
}
// Render the visualization.

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

@ -13,14 +13,14 @@ define(function (require) {
* Column chart visualization => vertical bars, stacked bars
*/
_(ColumnChart).inherits(Chart);
function ColumnChart(vis, chartEl, chartData) {
function ColumnChart(handler, chartEl, chartData) {
if (!(this instanceof ColumnChart)) {
return new ColumnChart(vis, chartEl, chartData);
return new ColumnChart(handler, chartEl, chartData);
}
ColumnChart.Super.apply(this, arguments);
// Column chart specific attributes
this._attr = _.defaults(vis._attr || {}, {
this._attr = _.defaults(handler._attr || {}, {
xValue: function (d, i) { return d.x; },
yValue: function (d, i) { return d.y; }
});
@ -46,9 +46,9 @@ define(function (require) {
ColumnChart.prototype.addBars = function (svg, layers) {
var self = this;
var data = this.chartData;
var color = this.vis.data.getColorFunc();
var xScale = this.vis.xAxis.xScale;
var yScale = this.vis.yAxis.yScale;
var color = this.handler.data.getColorFunc();
var xScale = this.handler.xAxis.xScale;
var yScale = this.handler.yAxis.yScale;
var tooltip = this.tooltip;
var isTooltip = this._attr.addTooltip;
var layer;
@ -141,7 +141,7 @@ define(function (require) {
ColumnChart.prototype.draw = function () {
// Attributes
var self = this;
var xScale = this.vis.xAxis.xScale;
var xScale = this.handler.xAxis.xScale;
var $elem = $(this.chartEl);
var margin = this._attr.margin;
var elWidth = this._attr.width = $elem.width();

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

@ -9,14 +9,14 @@ define(function (require) {
require('css!components/vislib/styles/main');
_(LineChart).inherits(Chart);
function LineChart(vis, chartEl, chartData) {
function LineChart(handler, chartEl, chartData) {
if (!(this instanceof LineChart)) {
return new LineChart(vis, chartEl, chartData);
return new LineChart(handler, chartEl, chartData);
}
LineChart.Super.apply(this, arguments);
// Line chart specific attributes
this._attr = _.defaults(vis._attr || {}, {
this._attr = _.defaults(handler._attr || {}, {
interpolate: 'linear',
xValue: function (d) { return d.x; },
yValue: function (d) { return d.y; }
@ -54,13 +54,13 @@ define(function (require) {
LineChart.prototype.addCircles = function (svg, data) {
var self = this;
var color = this.vis.data.getColorFunc();
var xScale = this.vis.xAxis.xScale;
var yScale = this.vis.yAxis.yScale;
var ordered = this.vis.data.get('ordered');
var color = this.handler.data.getColorFunc();
var xScale = this.handler.xAxis.xScale;
var yScale = this.handler.yAxis.yScale;
var ordered = this.handler.data.get('ordered');
var circleRadius = 4;
var circleStrokeWidth = 1;
var tooltip = this.vis.tooltip;
var tooltip = this.tooltip;
var isTooltip = this._attr.addTooltip;
var layer;
var circles;
@ -121,11 +121,11 @@ define(function (require) {
LineChart.prototype.addLines = function (svg, data) {
var self = this;
var xScale = this.vis.xAxis.xScale;
var yScale = this.vis.yAxis.yScale;
var xAxisFormatter = this.vis.data.get('xAxisFormatter');
var color = this.vis.data.getColorFunc();
var ordered = this.vis.data.get('ordered');
var xScale = this.handler.xAxis.xScale;
var yScale = this.handler.yAxis.yScale;
var xAxisFormatter = this.handler.data.get('xAxisFormatter');
var color = this.handler.data.getColorFunc();
var ordered = this.handler.data.get('ordered');
var interpolate = this._attr.interpolate;
var line = d3.svg.line()
.interpolate(interpolate)
@ -190,7 +190,7 @@ define(function (require) {
var margin = this._attr.margin;
var elWidth = this._attr.width = $elem.width();
var elHeight = this._attr.height = $elem.height();
var xScale = this.vis.xAxis.xScale;
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 = 20;

15
src/kibana/components/vislib/visualizations/pie_chart.js
View file

@ -12,13 +12,13 @@ define(function (require) {
* Column chart visualization => vertical bars, stacked bars
*/
_(PieChart).inherits(Chart);
function PieChart(vis, chartEl, chartData) {
function PieChart(handler, chartEl, chartData) {
if (!(this instanceof PieChart)) {
return new PieChart(vis, chartEl, chartData);
return new PieChart(handler, chartEl, chartData);
}
PieChart.Super.apply(this, arguments);
this._attr = _.defaults(vis._attr || {}, {
this._attr = _.defaults(handler._attr || {}, {
getSize: function (d) { return d.size; },
dispatch: d3.dispatch('brush', 'click', 'hover', 'mouseenter', 'mouseleave', 'mouseover', 'mouseout')
});
@ -43,15 +43,14 @@ define(function (require) {
})
.on('mouseout.pie', function mouseOutPie() {
d3.select(this)
.classed('hover', false)
.style('stroke', null);
.classed('hover', false);
});
};
PieChart.prototype.addPath = function (width, height, svg, slices) {
var isDonut = this._attr.isDonut;
var radius = Math.min(width, height) / 2;
var color = this.vis.data.getPieColorFunc();
var color = this.handler.data.getPieColorFunc();
var partition = d3.layout.partition()
.sort(null)
.value(function (d) {
@ -98,9 +97,9 @@ define(function (require) {
})
.style('stroke', '#fff')
.style('fill', function (d) {
if (d.depth === 0) { return 'none'; }
return color(d.name);
})
.attr('fill-rule', 'evenodd');
});
// Add tooltip
if (isTooltip) {

20
test/unit/specs/vislib/tooltip.js
View file

@ -7,10 +7,15 @@ define(function (require) {
describe('Vislib Tooltip', function () {
var Tooltip;
var Vis;
var Events;
var vis;
var events;
var bars;
var tip;
var el;
var chart;
var config;
var data = [
{
@ -45,6 +50,8 @@ define(function (require) {
beforeEach(function () {
inject(function (d3, Private) {
Vis = Private(require('components/vislib/vis'));
Events = Private(require('components/vislib/lib/dispatch'));
Tooltip = Private(require('components/vislib/lib/tooltip'));
el = d3.select('body')
@ -53,6 +60,17 @@ define(function (require) {
.style('width', '40px')
.style('height', '40px');
config = {
shareYAxis: true,
addTooltip: true,
addLegend: true,
addEvents: true,
addBrushing: true
};
vis = new Vis(el[0][0], config);
vis.render(data);
tip = new Tooltip(el[0][0], function (d) {
return 'd.x: ' + d.x + ', d.y: ' + d.y;
});
@ -75,8 +93,6 @@ define(function (require) {
});
bars.call(tip.render());
// d3.select('.bars').on('mousemove.tip')(d3.select('.bars').node().__data__, 0);
});