Mirroring/coriolis
1
0
Fork 0
mirror of https://github.com/EDCD/coriolis.git synced 2025-12-09 06:43:24 +00:00
Code Issues Projects Releases Wiki Activity

Improving D3 component event handling, responsiveness

Browse Source
This commit is contained in:
Colin McLeod
2015-06-07 15:42:59 -07:00
parent e876732ce0
commit b5e1c86a93
3 changed files with 42 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
app/js/directives/directive-area-chart.js
View File

@@ -11,7 +11,7 @@ angular.module('app').directive('areaChart', ['$window', function ($window) {
var series = scope.series,
config = scope.config,
labels = config.labels,
margin = {top: 15, right: 15, bottom: 35, left: 50},
margin = {top: 15, right: 15, bottom: 35, left: 60},
fmt = d3.format('.3r'),
fmtLong = d3.format('.2f'),
func = series.func,
@@ -49,7 +49,7 @@ angular.module('app').directive('areaChart', ['$window', function ($window) {
var yTxt = vis.append("g").attr("class", "y axis")
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", -40)
.attr("y", -50)
.attr("dy", ".1em")
.style("text-anchor", "middle")
.text(labels.yAxis.title + ' (' + labels.yAxis.unit + ')');
@@ -67,8 +67,8 @@ angular.module('app').directive('areaChart', ['$window', function ($window) {
tip.append("circle")
.attr("class", "marker")
.attr("r", 4);
tip.append("text").attr("class", 'label x').attr("y", "-0.1em");
tip.append("text").attr("class", 'label y').attr("y", '0.7em');
tip.append("text").attr("class", 'label x').attr("y", "-0.25em");
tip.append("text").attr("class", 'label y').attr("y", '0.85em');
/**
* Watch for changes in the series data (mass changes, etc)
@@ -153,6 +153,10 @@ angular.module('app').directive('areaChart', ['$window', function ($window) {
tip.select('text.label.y').text(fmtLong(y0) + ' ' + labels.yAxis.unit);
}
scope.$on('$destroy', function() {
angular.element($window).unbind('orientationchange resize render', render);
});
}
};
}]);

48
app/js/directives/directive-bar-chart.js
View File

@@ -1,4 +1,4 @@
angular.module('app').directive('barChart', function () {
angular.module('app').directive('barChart', ['$window', function ($window) {
function bName (build) {
return build.buildName + '\n' + build.name;
@@ -7,11 +7,11 @@ angular.module('app').directive('barChart', function () {
var insertLinebreaks = function (d) {
var el = d3.select(this);
var words = d.split('\n');
el.text('').attr('y', -5);
el.text('').attr('y', -6);
for (var i = 0; i < words.length; i++) {
var tspan = el.append('tspan').text(words[i]);
if (i > 0) {
tspan.attr('x', -9).attr('dy', 10);
tspan.attr('x', -9).attr('dy', 12);
}
}
};
@@ -20,22 +20,23 @@ angular.module('app').directive('barChart', function () {
restrict: 'A',
scope:{
data: '=',
facet: '=',
height: '=',
width: '='
facet: '='
},
link: function(scope, element) {
var color = d3.scale.ordinal().range([ '#7b6888', '#6b486b', '#3182bd', '#a05d56', '#d0743c']),
width = scope.width,
labels = scope.facet.lbls,
fmt = scope.facet.fmt,
properties = scope.facet.props,
unit = scope.facet.unit,
margin = {top: 10, right: 20, bottom: 35, left: 150},
w = width - margin.left - margin.right;
y0 = d3.scale.ordinal(),
y1 = d3.scale.ordinal(),
x = d3.scale.linear(),
yAxis = d3.svg.axis().scale(y0).outerTickSize(0).orient('left'),
xAxis = d3.svg.axis().scale(x).ticks(5).outerTickSize(0).orient('bottom').tickFormat(d3.format('.2s'));;
// Create chart
var svg = d3.select(element[0]).append('svg').attr('width', width);
var svg = d3.select(element[0]).append('svg');
var vis = svg.append('g').attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
// Create and Add tooltip
@@ -44,17 +45,17 @@ angular.module('app').directive('barChart', function () {
.html(function(property, propertyIndex) {
return (labels? (labels[propertyIndex] + ': ') : '') + fmt(property.value) + ' ' + unit;
});
vis.call(tip);
// Create Y Axis SVG Elements
vis.append('g').attr('class', 'y axis');
vis.selectAll('g.y.axis g text').each(insertLinebreaks);
// Create X Axis SVG Elements
vis.append('g')
var xAxisLbl = vis.append('g')
.attr('class', 'x axis')
.append('text')
.attr('y', 30)
.attr('x', w/2)
.attr('dy', '.1em')
.style('text-anchor', 'middle')
.text(scope.facet.title + (unit? (' (' + unit + ')') : ''));
@@ -63,27 +64,31 @@ angular.module('app').directive('barChart', function () {
/**
* Watch for changes in the comparison array (ships added/removed, sorting)
*/
scope.$watchCollection('data', function() {
scope.$watchCollection('data', render);
angular.element($window).bind('orientationchange resize render', render);
function render() {
var data = scope.data,
height = 45 + (25 * data.length),
width = element[0].offsetWidth,
w = width - margin.left - margin.right;
height = 45 + (30 * data.length),
h = height - margin.top - margin.bottom,
maxVal = d3.max(data, function(d) { return d3.max(properties, function(p) {return d[p]; }); }),
y0 = d3.scale.ordinal().domain(data.map(bName)).rangeRoundBands([0, h],0.3),
y1 = d3.scale.ordinal().domain(properties).rangeRoundBands([0, y0.rangeBand()]),
x = d3.scale.linear().range([0, w]).domain([0, maxVal]),
yAxis = d3.svg.axis().scale(y0).outerTickSize(0).orient('left'),
xAxis = d3.svg.axis().scale(x).outerTickSize(0).orient('bottom').tickFormat(d3.format('.2s'));
// Update chart size
svg.attr('height', height);
svg.attr('width', width).attr('height', height);
// Remove existing elements
vis.selectAll('.ship').remove();
vis.selectAll('rect').remove();
// Update X & Y Axis
x.range([0, w]).domain([0, maxVal]);
y0.domain(data.map(bName)).rangeRoundBands([0, h],0.3);
y1.domain(properties).rangeRoundBands([0, y0.rangeBand()]);
vis.selectAll('.y.axis').call(yAxis);
vis.selectAll('.x.axis').attr('transform', 'translate(0,' + h + ')').call(xAxis);
xAxisLbl.attr('x', w/2);
// Update Y-Axis labels
vis.selectAll('g.y.axis g text').each(insertLinebreaks);
@@ -110,12 +115,13 @@ angular.module('app').directive('barChart', function () {
.on('mouseout', tip.hide)
.style('fill', function(d) { return color(d.name); });
});
}
scope.$on('$destroy', function() {
angular.element($window).unbind('orientationchange resize render', render);
tip.destroy(); // Remove the tooltip from the DOM
});
}
};
});
}]);

9
app/js/directives/directive-slider.js
View File

@@ -8,7 +8,7 @@ angular.module('app').directive('slider', ['$window', function ($window) {
change: '&onChange'
},
link: function(scope, element) {
var margin = {top: -10, right: 130, bottom: 0, left: 50},
var margin = {top: -10, right: 140, bottom: 0, left: 50},
height = 40, // Height is fixed
h = height - margin.top - margin.bottom,
fmt = d3.format('.2f'),
@@ -22,7 +22,7 @@ angular.module('app').directive('slider', ['$window', function ($window) {
slider = vis.append("g").attr("class", "slider"),
filled = slider.append('path').attr('class', 'filled').attr("transform", "translate(0," + h/2 + ")"),
brush = d3.svg.brush().x(x).extent([scope.max, scope.max]).on("brush", brushed),
handle = slider.append("circle").attr("class", "handle").attr("r", '0.75em'),
handle = slider.append("circle").attr("class", "handle").attr("r", '0.6em'),
lbl = slider.append("g").append("text").attr("y", h/2);
slider.call(brush);
@@ -70,6 +70,11 @@ angular.module('app').directive('slider', ['$window', function ($window) {
handle.attr("cx", x(val));
filled.attr("d", "M0,0V0H" + x(val) + "V0");
}
scope.$on('$destroy', function() {
angular.element($window).unbind('orientationchange resize render', render);
});
}
};
}]);