openstack
/
stackviz
Code Issues Proposed changes

Fix timeline rendering in Firefox. 

Firefox appears to behave differently than Chrome when computing CSS
sizes for SVG elements, causing the timeline elements to have
incorrect widths. This modifies layout behavior to use only attribute
sizes instead of CSS sizes, which works around the issue.

Change-Id: I6af2d9502ba7881c630197494382c0bc7eec8283
This commit is contained in:
Tim Buckley 2016-01-06 12:53:50 -07:00
parent 408168bd60
commit bc0a043657
3 changed files with 15 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/js/directives/timeline-dstat.js
View File

@ -88,8 +88,7 @@ function timelineDstat() {
.attr('height', height);
var main = chart.append('g')
.attr('transform', 'translate(' + margin.left + ',0)')
.attr('width', timelineController.width);
.attr('transform', 'translate(' + margin.left + ',0)');
var xSelected = timelineController.axes.selection;
var y = d3.scale.linear();
@ -181,8 +180,7 @@ function timelineDstat() {
});
scope.$on('update', function() {
chart.style('width', timelineController.width + margin.left + margin.right);
main.style('width', timelineController.width);
chart.attr('width', timelineController.width + margin.left + margin.right);
update(timelineController.dstat);
});

21
app/js/directives/timeline-overview.js
View File

@ -17,13 +17,14 @@ function timelineOverview() {
var chart = d3.select(el[0])
.append('svg')
.attr('height', height)
.style('position', 'relative')
.style('width', timelineController.width)
.style('left', margin.left)
.style('right', margin.right);
.attr('width', timelineController.width + margin.left + margin.right)
.attr('height', height);
var groups = chart.append('g');
var groups = chart.append('g')
.attr('transform', 'translate(' + margin.left + ',0)');
var brushGroup = chart.append('g')
.attr('transform', 'translate(' + margin.left + ',0)');
var updateBrush = function() {
timelineController.setViewExtents(brush.extent());
@ -73,7 +74,7 @@ function timelineOverview() {
var targetEnd = begin + extentSize;
brush.extent([targetStart, targetEnd]);
chart.select('.brush').call(brush);
brushGroup.select('.brush').call(brush);
updateBrush();
return true;
@ -113,7 +114,7 @@ function timelineOverview() {
}
brush.extent([targetStart, targetEnd]);
chart.select('.brush').call(brush);
brushGroup.select('.brush').call(brush);
updateBrush();
return true;
@ -134,7 +135,7 @@ function timelineOverview() {
.extent([start, reducedEnd])
.on('brush', updateBrush);
var brushElement = chart.append('g')
var brushElement = brushGroup.append('g')
.attr('class', 'brush')
.call(brush)
.selectAll('rect')
@ -147,7 +148,7 @@ function timelineOverview() {
});
scope.$on('update', function() {
chart.style('width', timelineController.width);
chart.attr('width', timelineController.width + margin.left + margin.right);
updateItems(timelineController.data);
});

7
app/js/directives/timeline-viewport.js
View File

@ -30,8 +30,7 @@ function timelineViewport($document) {
.attr('width', timelineController.width);
var main = chart.append('g')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
.attr('width', timelineController.width);
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
var laneLines = main.append('g');
var laneLabels = main.append('g');
@ -247,7 +246,6 @@ function timelineViewport($document) {
y.domain([0, data.length]).range([0, height]);
defs.attr('height', height);
main.attr('height', height);
cursor.attr('y1', y(-0.1));
loaded = true;
@ -258,9 +256,8 @@ function timelineViewport($document) {
return;
}
chart.style('width', timelineController.width + margin.left + margin.right);
chart.attr('width', timelineController.width + margin.left + margin.right);
defs.attr('width', timelineController.width);
main.attr('width', timelineController.width);
update(timelineController.data);
});