Skip to content

Commit dc0185f

Browse files
hkalhkal
committed
display range on range selection
1 parent bd98c46 commit dc0185f

File tree

4 files changed

+77
-19
lines changed

4 files changed

+77
-19
lines changed

‎app/scripts/directives/d3Area.js‎

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,21 +9,23 @@ angular.module('crunchinatorApp.directives').directive('d3Area', ['$rootScope',
99
title: '@',
1010
extent: '@',
1111
selected: '@',
12-
format: '@'
12+
format: '@',
13+
ranges: '@'
1314
},
1415
templateUrl: 'views/d3-chart.tpl.html',
1516
link: function(scope, element) {
1617
var parent = angular.element(element[0]).parent();
1718
element = angular.element(element[0]).find('.chart');
1819
scope.format = scope.format || '%m/%Y';
1920

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

2627
var formatDate = d3.time.format(scope.format);
28+
2729
var parseDate = formatDate.parse;
2830
var x = d3.time.scale().range([0, width]);
2931

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

69+
function set_min_max(extent) {
70+
var formatDate = function(date) {
71+
return (date.getMonth() + 1) + '/' + date.getDate() + '/' + date.getFullYear();
72+
};
73+
74+
scope.min = formatDate(extent[0]);
75+
scope.max = formatDate(extent[1]);
76+
};
77+
6778
x.domain([parseDate(scope.extent), new Date()]);
6879
var brush = d3.svg.brush()
6980
.x(x)
@@ -74,6 +85,10 @@ angular.module('crunchinatorApp.directives').directive('d3Area', ['$rootScope',
7485
svg.selectAll('#clip-' + time + ' rect')
7586
.attr('x', x(extent[0]))
7687
.attr('width', x(extent[1]) - x(extent[0]));
88+
89+
scope.$parent.$apply(function (){
90+
set_min_max(extent);
91+
});
7792
})
7893
.on('brushend', function(){
7994
var extent = brush.extent();
@@ -139,7 +154,7 @@ angular.module('crunchinatorApp.directives').directive('d3Area', ['$rootScope',
139154

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

142-
157+
set_min_max(brush.extent());
143158
};
144159
}
145160
};

‎app/scripts/directives/d3Bars.js‎

Lines changed: 50 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,37 @@
11
'use strict';
22

3+
// We need to discuss moving these 'utility' functions to a depedency we can inject
4+
// since they are needed across services and directives.
5+
function abbreviateNumber(value) {
6+
var newValue = value;
7+
if (value >= 1000) {
8+
var suffixes = ['', 'K', 'M', 'B','T'];
9+
var suffixNum = Math.floor( ((''+value).length -1)/3 );
10+
var shortValue = '';
11+
for (var precision = 2; precision >= 1; precision--) {
12+
shortValue = parseFloat( (suffixNum !== 0 ? (value / Math.pow(1000,suffixNum) ) : value).toPrecision(precision));
13+
var dotLessShortValue = (shortValue + '').replace(/[^a-zA-Z 0-9]+/g,'');
14+
if (dotLessShortValue.length <= 3) { break; }
15+
}
16+
17+
newValue = shortValue+suffixes[suffixNum];
18+
}
19+
return newValue;
20+
}
21+
22+
function labelfy(num) {
23+
return '$' + abbreviateNumber(num);
24+
}
25+
326
angular.module('crunchinatorApp.directives').directive('d3Bars', ['$rootScope',
427
function($rootScope) {
528
return {
629
restrict: 'EA',
730
scope: {
831
data: '=',
932
title: '@',
10-
selected: '@'
33+
selected: '@',
34+
ranges: '@'
1135
},
1236
templateUrl: 'views/d3-chart.tpl.html',
1337
link: function(scope, element) {
@@ -17,7 +41,7 @@ angular.module('crunchinatorApp.directives').directive('d3Bars', ['$rootScope',
1741
var parent = angular.element(element[0]).parent();
1842
element = angular.element(element[0]).find('.chart');
1943

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

43-
var range = [Infinity, -Infinity];
67+
var set_min_max = function(extent) {
68+
range = [Infinity, -Infinity];
69+
70+
bars_fore.each(function(d) {
71+
var point = x(d.label);
72+
if(extent[0] <= point && point <= extent[1]) {
73+
if (d.start < range[0]) {
74+
range[0] = d.start;
75+
}
76+
77+
if (d.end > range[1]) {
78+
range[1] = d.end;
79+
}
80+
}
81+
});
82+
83+
scope.min = labelfy(range[0]);
84+
scope.max = labelfy(range[1]);
85+
}
86+
4487
var brush = d3.svg.brush()
4588
.x(x)
4689
.extent([10, width])
4790
.on('brush', function() {
48-
49-
range = [Infinity, -Infinity];
5091
var extent = brush.extent();
5192

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

56-
bars_fore.each(function(d) {
57-
var point = x(d.label);
58-
if(extent[0] <= point && point <= extent[1]) {
59-
if (d.start < range[0]) {
60-
range[0] = d.start;
61-
}
62-
63-
if (d.end > range[1]) {
64-
range[1] = d.end;
65-
}
66-
}
97+
scope.$parent.$apply(function() {
98+
set_min_max(extent);
6799
});
68100
})
69101
.on('brushend', function() {
@@ -164,6 +196,8 @@ angular.module('crunchinatorApp.directives').directive('d3Bars', ['$rootScope',
164196
'M' + (4.5 * x) + ',' + (y + 8) +
165197
'V' + (2 * y - 8);
166198
});
199+
200+
set_min_max(brush.extent());
167201
};
168202
}
169203
};

‎app/views/d3-chart.tpl.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
<div class='data-set-container'>
22
<div class="drag-handle"></div>
33
<h3 class='pull-left'>{{title}}</h3>
4+
<p class="pull-right count" ng-show="{{ranges}}">
5+
{{min}} - {{max}}
6+
</p>
47
<div class='chart'></div>
58
</div>

‎app/views/main.tpl.html‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,7 @@
5555
data="ComponentData.fundingRoundCount(companies.dataForFundingRoundAreaChart, '1/2000')"
5656
selected="selectedFundingActivity"
5757
extent="1/2000"
58+
ranges="true"
5859
></div>
5960
</div>
6061

@@ -64,6 +65,7 @@
6465
data="ComponentData.acquiredOnCount(companies.dataForAcquiredOnAreaChart, '1/2006')"
6566
selected="selectedAquiredDate"
6667
extent="1/2006"
68+
ranges="true"
6769
></div>
6870
</div>
6971

@@ -74,6 +76,7 @@
7476
selected="selectedFoundedDate"
7577
extent="1992"
7678
format="%Y"
79+
ranges="true"
7780
></div>
7881
</div>
7982

@@ -82,6 +85,7 @@
8285
title="Total Funding"
8386
data="ComponentData.totalFunding(companies.dataForTotalFunding, companies.all)"
8487
selected="selectedRanges"
88+
ranges="true"
8589
></div>
8690
</div>
8791

@@ -90,6 +94,7 @@
9094
title="Funding per Round"
9195
data="ComponentData.fundingPerRound(companies.dataForFundingPerRound, companies.all)"
9296
selected="selectedRoundRanges"
97+
ranges="true"
9398
></div>
9499
</div>
95100

@@ -98,6 +103,7 @@
98103
title="Most Recent Funding Round"
99104
data="ComponentData.mostRecentFundingRound(companies.dataForMostRecentFundingRound, companies.all)"
100105
selected="selectedRecentRoundRanges"
106+
ranges="true"
101107
></div>
102108
</div>
103109
</div>

0 commit comments

Comments
 (0)