openstack/stackviz
Code Issues Proposed changes

Fix timeline rendering in Firefox.

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

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

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

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

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