Skip to content

Commit

Permalink
Merge pull request #57 from cloudspace/65286438_range_selection_display
Browse files Browse the repository at this point in the history 
65286438 range selection display
  • Loading branch information
Nicholas Thomson committed Feb 8, 2014
2 parents bd98c46 + db89e7a commit d0a64d8
Show file tree
Hide file tree
Showing 4 changed files with 77 additions and 19 deletions.
21 changes: 18 additions & 3 deletions app/scripts/directives/d3Area.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,21 +9,23 @@ angular.module('crunchinatorApp.directives').directive('d3Area', ['$rootScope',
title: '@',
extent: '@',
selected: '@',
format: '@'
format: '@',
ranges: '@'
},
templateUrl: 'views/d3-chart.tpl.html',
link: function(scope, element) {
var parent = angular.element(element[0]).parent();
element = angular.element(element[0]).find('.chart');
scope.format = scope.format || '%m/%Y';


console.log(scope.displayRange);
var area_fore, area_back;
var margin = {top: 15, right: 20, bottom: 20, left: 20},
width = element.width() - margin.left - margin.right,
height = parent.height() - margin.top - margin.bottom - 130;

var formatDate = d3.time.format(scope.format);

var parseDate = formatDate.parse;
var x = d3.time.scale().range([0, width]);

Expand Down Expand Up @@ -64,6 +66,15 @@ angular.module('crunchinatorApp.directives').directive('d3Area', ['$rootScope',
}
}, true);

function set_min_max(extent) {
var formatDate = function(date) {
return (date.getMonth() + 1) + '/' + date.getDate() + '/' + date.getFullYear();
};

scope.min = formatDate(extent[0]);
scope.max = formatDate(extent[1]);
}

x.domain([parseDate(scope.extent), new Date()]);
var brush = d3.svg.brush()
.x(x)
Expand All @@ -74,6 +85,10 @@ angular.module('crunchinatorApp.directives').directive('d3Area', ['$rootScope',
svg.selectAll('#clip-' + time + ' rect')
.attr('x', x(extent[0]))
.attr('width', x(extent[1]) - x(extent[0]));

scope.$parent.$apply(function (){
set_min_max(extent);
});
})
.on('brushend', function(){
var extent = brush.extent();
Expand Down Expand Up @@ -139,7 +154,7 @@ angular.module('crunchinatorApp.directives').directive('d3Area', ['$rootScope',

area_fore.attr('clip-path', 'url(#clip-' + time + ')');


set_min_max(brush.extent());
};
}
};
Expand Down
66 changes: 50 additions & 16 deletions app/scripts/directives/d3Bars.js
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,37 @@
'use strict';

// We need to discuss moving these 'utility' functions to a depedency we can inject
// since they are needed across services and directives.
function abbreviateNumber(value) {
var newValue = value;
if (value >= 1000) {
var suffixes = ['', 'K', 'M', 'B','T'];
var suffixNum = Math.floor( ((''+value).length -1)/3 );
var shortValue = '';
for (var precision = 2; precision >= 1; precision--) {
shortValue = parseFloat( (suffixNum !== 0 ? (value / Math.pow(1000,suffixNum) ) : value).toPrecision(precision));
var dotLessShortValue = (shortValue + '').replace(/[^a-zA-Z 0-9]+/g,'');
if (dotLessShortValue.length <= 3) { break; }
}

newValue = shortValue+suffixes[suffixNum];
}
return newValue;
}

function labelfy(num) {
return '$' + abbreviateNumber(num);
}

angular.module('crunchinatorApp.directives').directive('d3Bars', ['$rootScope',
function($rootScope) {
return {
restrict: 'EA',
scope: {
data: '=',
title: '@',
selected: '@'
selected: '@',
ranges: '@'
},
templateUrl: 'views/d3-chart.tpl.html',
link: function(scope, element) {
Expand All @@ -17,7 +41,7 @@ angular.module('crunchinatorApp.directives').directive('d3Bars', ['$rootScope',
var parent = angular.element(element[0]).parent();
element = angular.element(element[0]).find('.chart');

var bars_fore, bars_back;
var bars_fore, bars_back, range;
var margin = {top: 0, right: 10, bottom: 20, left: 0};
var width = element.width() - margin.left - margin.right;
var height = parent.height() - margin.top - margin.bottom - 124;
Expand All @@ -40,30 +64,38 @@ angular.module('crunchinatorApp.directives').directive('d3Bars', ['$rootScope',
.attr('width', width)
.attr('height', height);

var range = [Infinity, -Infinity];
var set_min_max = function(extent) {
range = [Infinity, -Infinity];

bars_fore.each(function(d) {
var point = x(d.label);
if(extent[0] <= point && point <= extent[1]) {
if (d.start < range[0]) {
range[0] = d.start;
}

if (d.end > range[1]) {
range[1] = d.end;
}
}
});

scope.min = labelfy(range[0]);
scope.max = labelfy(range[1]);
};

var brush = d3.svg.brush()
.x(x)
.extent([10, width])
.on('brush', function() {

range = [Infinity, -Infinity];
var extent = brush.extent();

svg.selectAll('#clip-' + id + ' rect')
.attr('x', extent[0])
.attr('width', extent[1] - extent[0]);

bars_fore.each(function(d) {
var point = x(d.label);
if(extent[0] <= point && point <= extent[1]) {
if (d.start < range[0]) {
range[0] = d.start;
}

if (d.end > range[1]) {
range[1] = d.end;
}
}
scope.$parent.$apply(function() {
set_min_max(extent);
});
})
.on('brushend', function() {
Expand Down Expand Up @@ -164,6 +196,8 @@ angular.module('crunchinatorApp.directives').directive('d3Bars', ['$rootScope',
'M' + (4.5 * x) + ',' + (y + 8) +
'V' + (2 * y - 8);
});

set_min_max(brush.extent());
};
}
};
Expand Down
3 changes: 3 additions & 0 deletions app/views/d3-chart.tpl.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
<div class='data-set-container'>
<div class="drag-handle"></div>
<h3 class='pull-left'>{{title}}</h3>
<p class="pull-right count" ng-show="{{ranges}}">
{{min}} - {{max}}
</p>
<div class='chart'></div>
</div>
6 changes: 6 additions & 0 deletions app/views/main.tpl.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,7 @@
data="ComponentData.fundingRoundCount(companies.dataForFundingRoundAreaChart, '1/2000')"
selected="selectedFundingActivity"
extent="1/2000"
ranges="true"
></div>
</div>

Expand All @@ -64,6 +65,7 @@
data="ComponentData.acquiredOnCount(companies.dataForAcquiredOnAreaChart, '1/2006')"
selected="selectedAquiredDate"
extent="1/2006"
ranges="true"
></div>
</div>

Expand All @@ -74,6 +76,7 @@
selected="selectedFoundedDate"
extent="1992"
format="%Y"
ranges="true"
></div>
</div>

Expand All @@ -82,6 +85,7 @@
title="Total Funding"
data="ComponentData.totalFunding(companies.dataForTotalFunding, companies.all)"
selected="selectedRanges"
ranges="true"
></div>
</div>

Expand All @@ -90,6 +94,7 @@
title="Funding per Round"
data="ComponentData.fundingPerRound(companies.dataForFundingPerRound, companies.all)"
selected="selectedRoundRanges"
ranges="true"
></div>
</div>

Expand All @@ -98,6 +103,7 @@
title="Most Recent Funding Round"
data="ComponentData.mostRecentFundingRound(companies.dataForMostRecentFundingRound, companies.all)"
selected="selectedRecentRoundRanges"
ranges="true"
></div>
</div>
</div>
Expand Down

0 comments on commit d0a64d8

Please sign in to comment.