Skip to content

Commit

Permalink
[issue #235] [WIP] Show the Count of the Tweets (#257)
Browse files Browse the repository at this point in the history 
* show the count of all the tweets in the current view

* add fake total count number for demo purposes

* show purely the current count number

* integrate with total count

* code refactoring

* code refactor change variable names and comments

* avoid count div from overlapping with time series; migrate count related code from map/controller.js to timeseries/controller.js; fix the bug of updating total count in the controller

* remove unnecessary CSS

* follow Codacy's suggestions to change single quotes into double quotes

* fix reset positioning bug

* use number filter; remove unnecessary helper functions

* fix a bug where the reset button on timeline stops working; adjust styling to make count text look better

* right align two count numbers

* adjust font-size and text align
  • Loading branch information
Shengjie Xu authored Mar 5, 2017
1 parent bfb22f0 commit 806ae72
Show file tree
Hide file tree
Showing 4 changed files with 79 additions and 34 deletions.
2 changes: 1 addition & 1 deletion neo/app/views/index.scala.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@



<div class="time-series">
<div class="stats">
<time-series id="chart"></time-series>
</div>

Expand Down
24 changes: 9 additions & 15 deletions neo/public/javascripts/map/controllers.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
angular.module('cloudberry.map', ['leaflet-directive', 'cloudberry.common'])
.controller('MapCtrl', function($scope, $window, $http, $compile, Asterix, leafletData) {
$scope.result = {};
$scope.totalCount = 0;
// map setting
angular.extend($scope, {
tiles: {
Expand Down Expand Up @@ -73,7 +72,6 @@ angular.module('cloudberry.map', ['leaflet-directive', 'cloudberry.common'])
},
colors: [ '#f7f7f7', '#92c5de', '#4393c3', '#2166ac', '#f4a582', '#d6604d', '#b2182b']
}

});

function resetGeoIds(bounds, polygons, idTag) {
Expand Down Expand Up @@ -117,15 +115,6 @@ angular.module('cloudberry.map', ['leaflet-directive', 'cloudberry.common'])
//Adjust Map to be County or State
setInfoControl();

var countDiv = document.createElement("div");
countDiv.className = "number";
countDiv.id = "tweetsTotalCount";
countDiv.title = "Total Count of Tweets";
countDiv.innerHTML = '<h2> {{ totalCount |number }} </h2><span> tweets </span>';
var bodyMap = document.getElementsByClassName("map-group")[0];
$compile(countDiv)($scope);
bodyMap.appendChild(countDiv);

};


Expand Down Expand Up @@ -417,47 +406,52 @@ angular.module('cloudberry.map', ['leaflet-directive', 'cloudberry.common'])
}

//FIXME: the code in county and city (and probably the state) levels are quite similar. Find a way to combine them.
// update count
if ($scope.status.logicLevel == "state" && $scope.geojsonData.state) {
angular.forEach($scope.geojsonData.state.features, function(d) {
if (d.properties.count)
d.properties.count = 0;
for (var k in result) {
//TODO make a hash map from ID to make it faster
if (result[k].state == d.properties.stateID)
if (result[k].state == d.properties.stateID) {
d.properties.count = result[k].count;
}
}
});

// draw
$scope.polygons.statePolygons.setStyle(style);

} else if ($scope.status.logicLevel == "county" && $scope.geojsonData.county) {
angular.forEach($scope.geojsonData.county.features, function(d) {
if (d.properties.count)
d.properties.count = 0;
for (var k in result) {
//TODO make a hash map from ID to make it faster
if (result[k].county == d.properties.countyID)
if (result[k].county == d.properties.countyID) {
d.properties.count = result[k].count;
}
}
});

// draw
$scope.polygons.countyPolygons.setStyle(style);

}else if ($scope.status.logicLevel == "city" && $scope.geojsonData.city) {
angular.forEach($scope.geojsonData.city.features, function(d) {
if (d.properties.count)
d.properties.count = 0;
for (var k in result) {
//TODO make a hash map from ID to make it faster
if (result[k].city == d.properties.cityID)
if (result[k].city == d.properties.cityID) {
d.properties.count = result[k].count;
}
}
});

// draw
$scope.polygons.cityPolygons.setStyle(style);
}

// add legend
var legend = $('.legend');
if (legend)
Expand Down
36 changes: 33 additions & 3 deletions neo/public/javascripts/timeseries/controllers.js
View file
Original file line number Diff line number Diff line change
@@ -1,29 +1,47 @@
angular.module('cloudberry.timeseries', ['cloudberry.common'])
.controller('TimeSeriesCtrl', function ($scope, $window, Asterix) {
.controller('TimeSeriesCtrl', function ($scope, $window, $compile, Asterix) {
$scope.ndx = null;
$scope.result = {};
$scope.resultArray = [];
$scope.d3 = $window.d3;
$scope.dc = $window.dc;
$scope.crossfilter = $window.crossfilter;
$scope.empty = [];
$scope.totalCount = 0;
$scope.currentTweetCount = 0;
for (var date = new Date(); date >= Asterix.startDate; date.setDate(date.getDate()-1)) {
$scope.empty.push({'time': new Date(date), 'count': 0});
}
$scope.preProcess = function (result) {
// TODO make the pattern can be changed by the returned result parameters
var result_array = [];
$scope.currentTweetCount = 0;
if (result && result[0]) {
var granu = Object.keys(result[0])[0];
angular.forEach(result, function (value, key) {
key = new Date(value[granu]);
value = +value.count;
$scope.currentTweetCount += value;
result_array.push({'time': key, 'count': value});
});

}
return result_array;
};

// add information about the count of tweets
var countDiv = document.createElement("div");
countDiv.id = "count-div";
countDiv.title = "Display the count information of Tweets";
countDiv.innerHTML = [
"<p id='count'>{{ currentTweetCount | number:0 }}<span id='count-text'>&nbsp;&nbsp;of&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></p>",
"<p id='count'>{{ totalCount | number:0 }}<span id='count-text'>&nbsp;&nbsp;tweets</span></p>",
].join("");
var stats = document.getElementsByClassName("stats")[0];
$compile(countDiv)($scope);
stats.appendChild(countDiv);


$scope.$watch(
function() {
return Asterix.timeResult;
Expand All @@ -40,6 +58,18 @@ angular.module('cloudberry.timeseries', ['cloudberry.common'])
}
);

$scope.$watch(
function () {
return Asterix.totalCount;
},

function (newCount) {
if(newCount) {
$scope.totalCount = newCount;
}
}
);

})
.directive('timeSeries', function (Asterix) {
var margin = {
Expand Down Expand Up @@ -104,9 +134,9 @@ angular.module('cloudberry.timeseries', ['cloudberry.common'])
.text('Reset')
.attr('href',"#")
.on("click", function() { timeSeries.filterAll(); dc.redrawAll(); requestFunc(minDate, maxDate);})
.style("position", "inherit")
.style("position", "absolute")
.style("bottom", "90%")
.style("left", "3%");
.style("left", "5%");


var startDate = (minDate.getFullYear()+"-"+(minDate.getMonth()+1));
Expand Down
51 changes: 36 additions & 15 deletions neo/public/stylesheets/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,9 @@ body {
margin: 0;
padding: 0;
overflow-x: hidden;
height:100%;
width:100%;
position: absolute;
}
.map-group {
position: absolute;
Expand Down Expand Up @@ -30,14 +33,6 @@ body {
margin-left: -20%;
}

time-series {
position: absolute;
top: 82%;
left: 15%;
width: 80%;
height: 15%;
}

search-bar {
position: absolute;
left: 27%;
Expand Down Expand Up @@ -128,11 +123,37 @@ search-bar {
color : white;
}

.number{
color: #2795ee;
.stats{
position: absolute;
bottom:6%;
left:1%;
width:10%;
z-index:0;
}
bottom:0;
pointer-events: none;
line-height: 1;
width: 100%;
}

time-series {
z-index: 1000;
pointer-events: auto;
position: relative;
display: inline-block;
left: 4%;
}

#count-div{
color: #000000;
font-weight:500;
margin-top: 20px;
margin-bottom: 40px;
padding-left: 10px;
float: left;
}

#count{
font-size: 32px;
margin-bottom: 0;
text-align: right;
}

#count-text{
font-size: 13px;
}

0 comments on commit 806ae72

Please sign in to comment.