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

Merge pull request #3227 from jthomassie/fix/3199

Browse source 
fix/3199
This commit is contained in:
Juan Thomassie 2015-03-04 15:55:03 -06:00
commit 43a110e302
8 changed files with 128 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -19,7 +19,7 @@ define(function (require) {
this.handler = handler;
this.dispatch = d3.dispatch('brush', 'click', 'hover', 'mouseup',
'mousedown', 'mouseover');
'mousedown', 'mouseover', 'mouseout');
}
/**
@ -92,6 +92,7 @@ define(function (require) {
};
};
/**
*
* @method addHoverEvent
@ -101,6 +102,7 @@ define(function (require) {
var self = this;
var isClickable = (this.dispatch.on('click'));
var addEvent = this.addEvent;
var $el = this.handler.el;
function hover(d, i) {
d3.event.stopPropagation();
@ -110,12 +112,32 @@ define(function (require) {
self.addMousePointer.call(this, arguments);
}
self.highlightLegend.call(this, $el);
self.dispatch.hover.call(this, self.eventResponse(d, i));
}
return addEvent('mouseover', hover);
};
/**
*
* @method addMouseoutEvent
* @returns {Function}
*/
Dispatch.prototype.addMouseoutEvent = function () {
var self = this;
var addEvent = this.addEvent;
var $el = this.handler.el;
function mouseout() {
d3.event.stopPropagation();
self.unHighlightLegend.call(this, $el);
}
return addEvent('mouseout', mouseout);
};
/**
*
* @method addClickEvent
@ -189,7 +211,7 @@ define(function (require) {
/**
* Mouse over Behavior
* Mouseover Behavior
*
* @method addMousePointer
* @returns {D3.Selection}
@ -198,6 +220,38 @@ define(function (require) {
return d3.select(this).style('cursor', 'pointer');
};
/**
* Mouseover Behavior
*
* @param element {D3.Selection}
* @method highlightLegend
*/
Dispatch.prototype.highlightLegend = function (element) {
var classList = d3.select(this).node().classList;
var liClass = d3.select(this).node().classList[1];
d3.select(element)
.select('.legend-ul')
.selectAll('li.color')
.filter(function (d, i) {
return d3.select(this).node().classList[1] !== liClass;
})
.classed('blur_shape', true);
};
/**
* Mouseout Behavior
*
* @param element {D3.Selection}
* @method unHighlightLegend
*/
Dispatch.prototype.unHighlightLegend = function (element) {
d3.select(element)
.select('.legend-ul')
.selectAll('li.color')
.classed('blur_shape', false);
};
/**
* Adds D3 brush to SVG and returns the brush function
*

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

@ -85,14 +85,16 @@ define(function (require) {
};
/**
* Creates a class name based on the colors assigned to each label
* Creates a class name based on the hexColor assigned to each label
*
* @method colorToClass
* @param name {String} Label
* @param hexColor {String} Label
* @returns {string} CSS class name
*/
Legend.prototype.colorToClass = function (name) {
return 'c' + name.replace(/[#]/g, '');
Legend.prototype.colorToClass = function (hexColor) {
if (hexColor) {
return 'c' + hexColor.replace(/[#]/g, '');
}
};
/**
@ -131,35 +133,70 @@ define(function (require) {
}
});
visEl.selectAll('.color')
legendDiv.select('.legend-ul').selectAll('li')
.on('mouseover', function (d) {
var liClass = '.' + self.colorToClass(self.color(d));
visEl.selectAll('.color').classed('blur_shape', true);
var liClass = self.colorToClass(self.color(d));
var charts = visEl.selectAll('.chart');
// legend
legendDiv.selectAll('li')
.filter(function (d) {
return d3.select(this).node().classList[1] !== liClass;
})
.classed('blur_shape', true);
// lines/area
charts.selectAll('.color')
.filter(function (d) {
return d3.select(this).node().classList[1] !== liClass;
})
.classed('blur_shape', true);
// circles
charts.selectAll('.line circle')
.filter(function (d) {
return d3.select(this).node().classList[1] !== liClass;
})
.classed('blur_shape', true);
// pie slices
charts.selectAll('.slice')
.filter(function (d) {
return d3.select(this).node().classList[1] !== liClass;
})
.classed('blur_shape', true);
var eventEl = d3.select(this);
eventEl.style('white-space', 'inherit');
eventEl.style('word-break', 'break-all');
// select series on chart
visEl.selectAll(liClass).classed('blur_shape', false);
})
.on('mouseout', function () {
/*
* The default opacity of elements in charts may be modified by the
* chart constructor, and so may differ from that of the legend
*/
visEl.selectAll('.chart')
.selectAll('.color')
var charts = visEl.selectAll('.chart');
// legend
legendDiv.selectAll('li')
.classed('blur_shape', false);
// lines/areas
charts.selectAll('.color')
.classed('blur_shape', false);
// circles
charts.selectAll('.line circle')
.classed('blur_shape', false);
// pie slices
charts.selectAll('.slice')
.classed('blur_shape', false);
var eventEl = d3.select(this);
eventEl.style('white-space', 'nowrap');
eventEl.style('word-break', 'inherit');
// Legend values should always return to their default opacity of 1
visEl.select('.legend-ul')
.selectAll('.color')
.classed('blur_shape', false);
});
};

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

@ -55,7 +55,7 @@ define(function (require) {
* @returns {String} CSS class name
*/
Chart.prototype.colorToClass = function (label) {
return 'color ' + Legend.prototype.colorToClass.call(null, label);
return Legend.prototype.colorToClass.call(null, label);
};
/**

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

@ -96,7 +96,7 @@ define(function (require) {
// Append path
path = layer.append('path')
.attr('class', function (d) {
return self.colorToClass(color(d[0].label));
return 'color ' + self.colorToClass(color(d[0].label));
})
.style('fill', function (d) {
return color(d[0].label);
@ -125,8 +125,9 @@ define(function (require) {
var isBrushable = events.isBrushable();
var brush = isBrushable ? events.addBrushEvent(svg) : undefined;
var hover = events.addHoverEvent();
var mouseout = events.addMouseoutEvent();
var click = events.addClickEvent();
var attachedEvents = element.call(hover).call(click);
var attachedEvents = element.call(hover).call(mouseout).call(click);
if (isBrushable) {
attachedEvents.call(brush);
@ -144,6 +145,7 @@ define(function (require) {
* @returns {D3.UpdateSelection} SVG with circles added
*/
AreaChart.prototype.addCircles = function (svg, data) {
var self = this;
var color = this.handler.data.getColorFunc();
var xScale = this.handler.xAxis.xScale;
var yScale = this.handler.yAxis.yScale;
@ -162,7 +164,7 @@ define(function (require) {
.append('g')
.attr('class', 'points area');
// Append the bars
// append the bars
circles = layer
.selectAll('rect')
.data(function appendData(data) {
@ -179,7 +181,7 @@ define(function (require) {
.enter()
.append('circle')
.attr('class', function circleClass(d) {
return d.label;
return d.label + ' ' + self.colorToClass(color(d.label));
})
.attr('stroke', function strokeColor(d) {
return color(d.label);

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

@ -69,7 +69,7 @@ define(function (require) {
.enter()
.append('rect')
.attr('class', function (d) {
return self.colorToClass(color(d.label));
return 'color ' + self.colorToClass(color(d.label));
})
.attr('fill', function (d) {
return color(d.label);
@ -246,8 +246,9 @@ define(function (require) {
var isBrushable = events.isBrushable();
var brush = isBrushable ? events.addBrushEvent(svg) : undefined;
var hover = events.addHoverEvent();
var mouseout = events.addMouseoutEvent();
var click = events.addClickEvent();
var attachedEvents = element.call(hover).call(click);
var attachedEvents = element.call(hover).call(mouseout).call(click);
if (isBrushable) {
attachedEvents.call(brush);

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

@ -45,8 +45,9 @@ define(function (require) {
var isBrushable = events.isBrushable();
var brush = isBrushable ? events.addBrushEvent(svg) : undefined;
var hover = events.addHoverEvent();
var mouseout = events.addMouseoutEvent();
var click = events.addClickEvent();
var attachedEvents = element.call(hover).call(click);
var attachedEvents = element.call(hover).call(mouseout).call(click);
if (isBrushable) {
attachedEvents.call(brush);
@ -123,7 +124,9 @@ define(function (require) {
.attr('cx', cx)
.attr('cy', cy)
.attr('fill', colorCircle)
.attr('class', 'circle-decoration');
.attr('class', function circleClass(d) {
return 'circle-decoration ' + self.colorToClass(color(d.label));
});
circles
.enter()
@ -183,7 +186,7 @@ define(function (require) {
lines.append('path')
.attr('class', function lineClass(d) {
return self.colorToClass(color(d.label));
return 'color ' + self.colorToClass(color(d.label));
})
.attr('d', function lineD(d) {
return line(d.values);
@ -310,7 +313,6 @@ define(function (require) {
.style('stroke', '#ddd')
.style('stroke-width', lineStrokeWidth);
return svg;
});
};

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

@ -41,6 +41,7 @@ define(function (require) {
return element
.call(events.addHoverEvent())
.call(events.addMouseoutEvent())
.call(events.addClickEvent());
};

2
test/unit/specs/vislib/lib/legend.js
View file

@ -64,7 +64,7 @@ define(function (require) {
if (path.__data__.name === undefined) return false;
return path.__data__.name.toString() === label;
}).map(function (path) {
return $(path).attr('class').split(/\s+/)[2].replace('c', '#');
return $(path).attr('class').split(/\s+/)[1].replace('c', '#');
});
slices.forEach(function (hex) {