Skip to content

Commit

Permalink
chart is now dynamic; UI tweaks
Browse files Browse the repository at this point in the history
  • Loading branch information
@chrisekelley
chrisekelley committed Nov 8, 2011
1 parent f10084a commit 6016cf7
Show file tree
Hide file tree
Showing 5 changed files with 120 additions and 128 deletions.
66 changes: 3 additions & 63 deletions _attachments/app/app.js
View file
Expand Up @@ -97,49 +97,7 @@ var AppRouter = Backbone.Router.extend({
// $("#mailcol").append(viewDiv);
// }

// charts
// Initialize the Collection
//FORMY.departmentReportRaw = new Object({date:null,education:null,health: null,finance:null});
console.log("running report queries.");
var reportEducationInstance = new ReportCollection();
reportEducationInstance.db["view"] = ["byDepartmentEducation?reduce=true&group_level=2"];
reportEducationInstance.deferred = reportEducationInstance.fetch({
success : function(){
},
error : function(){
console.log("Error loading Report: " + arguments);
}
});

var reportHealthInstance = new ReportCollection();
reportHealthInstance.db["view"] = ["byDepartmentHealth?reduce=true&group_level=2"];
reportHealthInstance.deferred = reportHealthInstance.fetch({
success : function(){
},
error : function(){
console.log("Error loading Report: " + arguments);
}
});

var reportWorksInstance = new ReportCollection();
reportWorksInstance.db["view"] = ["byDepartmentWorks?reduce=true&group_level=2"];
reportWorksInstance.deferred = reportWorksInstance.fetch({
success : function(){
},
error : function(){
console.log("Error loading Report: " + arguments);
}
});

var reportOtherInstance = new ReportCollection();
reportOtherInstance.db["view"] = ["byDepartmentOther?reduce=true&group_level=2"];
reportOtherInstance.deferred = reportOtherInstance.fetch({
success : function(){
},
error : function(){
console.log("Error loading Report: " + arguments);
}
});


var searchResults = new IncidentsList();
Expand All @@ -151,10 +109,7 @@ var AppRouter = Backbone.Router.extend({
//console.log("render; Incidents count: " + FORMY.Incidents.length);
var page = new Page({content: "Default List of Incidents:"});
(new HomeView(
{model: page, el: $("#homePageView"), reportEducationInstance: reportEducationInstance,
reportHealthInstance: reportHealthInstance, reportWorksInstance: reportWorksInstance,
reportOtherInstance: reportOtherInstance}
)).render();
{model: page, el: $("#homePageView")})).render();
//console.log("starting stripeme.");
$(".stripeMe tr").mouseover(function(){$(this).addClass("over");}).mouseout(function(){$(this).removeClass("over");});
$(".stripeMe tr:even").addClass("alt");
Expand Down Expand Up @@ -523,24 +478,9 @@ var AppRouter = Backbone.Router.extend({
break;
}

//var monthStr=randomFromTo(1,10).toString();
// function numlength(number) {
// // http://stackoverflow.com/questions/554521/how-can-i-count-the-digits-in-an-integer-without-a-string-cast/554533#554533
// int length = number.length;
// return length;
// }
var monthStr = month.toString();
if (monthStr.length < 2) {
monthStr = "0" + month;
}
var dayStr = day.toString();
if (dayStr.length < 2) {
dayStr = "0" + day;
}

//var created = new Date();
var created = "2011-" + monthStr + "-" + dayStr;
var created = new Date();
var lastModified = created;

var id = "test" + ct;
testdoc = { _id : id, "flowId": "300","formId": "incident","phone": "0772555"+ ct,"description": "This is a test",
"subcounty": subcounty,"village": village,"priority": priority,"department": department,"assignedId": ct.toString(),
Expand Down
63 changes: 42 additions & 21 deletions _attachments/app/coco-charts.js
View file
Expand Up @@ -192,7 +192,7 @@ function simpleBarCharts() {
function bulletChart(departmentReport) {

//console.log("departmentReport: " + JSON.stringify(departmentReport));
var w = 960,
var w = 600,
h = 50,
m = [5, 40, 20, 120]; // top right bottom left

Expand All @@ -201,7 +201,39 @@ function bulletChart(departmentReport) {
.height(h - m[0] - m[2]);

d3.json("app/bullets.json", function(data) {


var topRange = 30;
var maxValue = 30;
var maxRange = 30;

if (parseInt(departmentReport.health) > topRange) {
maxValue = parseInt(departmentReport.health);
}
if (parseInt(departmentReport.education) > topRange) {
maxValue = parseInt(departmentReport.education);
}
if (parseInt(departmentReport.works) > topRange) {
maxValue = parseInt(departmentReport.works);
}
if (parseInt(departmentReport.other) > topRange) {
maxValue = parseInt(departmentReport.other);
}

console.log("maxValue: " + maxValue + " parseInt(departmentReport.other):" + parseInt(departmentReport.other));

var maxRounded = Math.round(maxValue / 10) * 10;
if (maxValue > maxRounded) {
maxRange = maxRounded + 10;
} else {
maxRange = maxRounded;
}
var range1 = maxRange/5;
var range2 = range1 *2;
var range3 = range1 *3;
var range4 = range1 *4;
departmentReport.ranges = [range1,range2,range3, range4, maxRange];
console.log("departmentReport.ranges 2: " + JSON.stringify(departmentReport.ranges));

for (i in data) {
var item = data[i];
//console.log("item: " + JSON.stringify(item));
Expand All @@ -211,23 +243,30 @@ function bulletChart(departmentReport) {
item["measures"] = [departmentReport.health, departmentReport.health];
item["markers"] = departmentReport.health;
item["subtitle"] = departmentReport.health + " cases";
item["ranges"] = departmentReport.ranges;
} else if (item.title === "Education") {
//console.log("*** item ***: "+ JSON.stringify(item));
item["measures"] = [departmentReport.education, departmentReport.education];
item["markers"] = departmentReport.education;
item["subtitle"] = departmentReport.education + " cases";
item["ranges"] = departmentReport.ranges;
} else if (item.title === "Works") {
//console.log("*** item ***: "+ JSON.stringify(item));
item["measures"] = [departmentReport.works, departmentReport.works];
item["markers"] = departmentReport.works;
item["subtitle"] = departmentReport.works + " cases";
item["ranges"] = departmentReport.ranges;
} else if (item.title === "Other") {
//console.log("*** item ***: "+ JSON.stringify(item));
item["measures"] = [departmentReport.other, departmentReport.other];
item["markers"] = departmentReport.other;
item["subtitle"] = departmentReport.other + " cases";
item["ranges"] = departmentReport.ranges;
}
}



//console.log("data: " + JSON.stringify(data));
$('#bulletChart').empty();
//d3.select("#bulletChart").empty();
Expand Down Expand Up @@ -256,24 +295,6 @@ function bulletChart(departmentReport) {
.attr("dy", "1em")
.text(function(d) { return d.subtitle; });

chart.duration(1000);
window.transition = function() {
vis.map(randomize).call(chart);
};
//chart.duration(1000);
});

function randomize(d) {
if (!d.randomizer) d.randomizer = randomizer(d);
d.ranges = d.ranges.map(d.randomizer);
d.markers = d.markers.map(d.randomizer);
d.measures = d.measures.map(d.randomizer);
return d;
}

function randomizer(d) {
var k = d3.max(d.ranges) * .2;
return function(d) {
return Math.max(0, d + k * (Math.random() - .5));
};
}
}
83 changes: 57 additions & 26 deletions _attachments/app/views/HomeView.js
View file
Expand Up @@ -10,21 +10,6 @@ var HomeView = Backbone.View.extend({
FORMY.Incidents.bind('all', this.render, this);
FORMY.Incidents.bind('change', this.search, this);
FORMY.Incidents.bind('render', this.render, this);

// FORMY.reportEducation.bind('all', this.render, this);
// FORMY.reportHealth.bind('all', this.render, this);
// FORMY.reportWorks.bind('all', this.render, this);
// FORMY.reportOther.bind('all', this.render, this);
//
// FORMY.reportEducation.bind('reset', this.reseted, this);
// FORMY.reportHealth.bind('reset', this.reseted, this);
// FORMY.reportWorks.bind('reset', this.reseted, this);
// FORMY.reportOther.bind('reset', this.reseted, this);
//
// FORMY.reportEducation.bind('render', this.render, this);
// FORMY.reportHealth.bind('render', this.render, this);
// FORMY.reportWorks.bind('render', this.render, this);
// FORMY.reportOther.bind('render', this.render, this);

//FORMY.Incidents.fetch();
return this;
Expand Down Expand Up @@ -89,26 +74,72 @@ var HomeView = Backbone.View.extend({
this.template = loadTemplate("home.vert.template.html");
//this.template = loadTemplate("home.template.html");
}
FORMY.reportEducation = this.options.reportEducationInstance;
FORMY.reportHealth = this.options.reportHealthInstance;
FORMY.reportWorks = this.options.reportWorksInstance;
FORMY.reportOther = this.options.reportOtherInstance;

$.when(this.options.reportEducationInstance.deferred, this.options.reportHealthInstance.deferred,
this.options.reportWorksInstance.deferred, this.options.reportOtherInstance.deferred)
// charts
// Initialize the Collection
//FORMY.departmentReportRaw = new Object({date:null,education:null,health: null,finance:null});
console.log("running report queries.");
var reportEducationInstance = new ReportCollection();
reportEducationInstance.db["view"] = ["byDepartmentEducation?reduce=true&group_level=2"];
reportEducationInstance.deferred = reportEducationInstance.fetch({
success : function(){
},
error : function(){
console.log("Error loading Report: " + arguments);
}
});

var reportHealthInstance = new ReportCollection();
reportHealthInstance.db["view"] = ["byDepartmentHealth?reduce=true&group_level=2"];
reportHealthInstance.deferred = reportHealthInstance.fetch({
success : function(){
},
error : function(){
console.log("Error loading Report: " + arguments);
}
});

var reportWorksInstance = new ReportCollection();
reportWorksInstance.db["view"] = ["byDepartmentWorks?reduce=true&group_level=2"];
reportWorksInstance.deferred = reportWorksInstance.fetch({
success : function(){
},
error : function(){
console.log("Error loading Report: " + arguments);
}
});

var reportOtherInstance = new ReportCollection();
reportOtherInstance.db["view"] = ["byDepartmentOther?reduce=true&group_level=2"];
reportOtherInstance.deferred = reportOtherInstance.fetch({
success : function(){
},
error : function(){
console.log("Error loading Report: " + arguments);
}
});


FORMY.reportEducation = reportEducationInstance;
FORMY.reportHealth = reportHealthInstance;
FORMY.reportWorks = reportWorksInstance;
FORMY.reportOther = reportOtherInstance;

$.when(reportEducationInstance.deferred, reportHealthInstance.deferred,
reportWorksInstance.deferred, reportOtherInstance.deferred)
.then(function(educationData, healthData, worksData, otherData){

var departmentReport = new Object({date:null,education:null,health: null,works:null,other:null});
var reportDate = new Date();
//console.log("Generating report for: " + reportDate);
var education = parseData(reportDate, educationData[0]);
departmentReport.education = education;
var health = parseData(reportDate, healthData[0]);
departmentReport.health = health;
departmentReport.education = (education > 0)?education:[0];
var health = parseData(reportDate, healthData[0]);
departmentReport.health = (health > 0)?health:[0];
var works = parseData(reportDate, worksData[0]);
departmentReport.works = works;
departmentReport.works = (works > 0)?works:[0];
var other = parseData(reportDate, otherData[0]);
departmentReport.other = other;
departmentReport.other = (other > 0)?other:[0];
console.log("running bulletChart. here is the stuff: " + JSON.stringify(departmentReport));
bulletChart(departmentReport);
//simpleBarCharts();
Expand Down
12 changes: 7 additions & 5 deletions _attachments/css/Site.css
View file
Expand Up @@ -684,18 +684,18 @@ html>body #sidenavcontainer li a {
width: 870px;
}*/
#pagewidth {
width: 1280px;
width: 1024px;
}
#pagewidth-vert {
width: 320px;
width: 370px;
}
#views{
width:320px;
width:370px;
float:left;
position:relative;
}
#twocols {
width: 960px;
width: 650px;
float: right;
position: relative;
/*background: #6EA8E4;*/
Expand All @@ -704,7 +704,7 @@ html>body #sidenavcontainer li a {
width:100px;
float:right;
position:relative;
width: 34px;
width: 44px;
}
#maincol{
/*background-color: #FFFFFF; */
Expand Down Expand Up @@ -1201,6 +1201,8 @@ font-weight: bold;
.bullet .range.s0 { fill: #eee; }
.bullet .range.s1 { fill: #ddd; }
.bullet .range.s2 { fill: #ccc; }
.bullet .range.s3 { fill: #bbb; }
.bullet .range.s4 { fill: #aaa; }
.bullet .measure.s0 { fill: lightsteelblue; }
.bullet .measure.s1 { fill: steelblue; }
.bullet .title { font-size: 14px; font-weight: bold; }
Expand Down
24 changes: 11 additions & 13 deletions _attachments/index.html
View file
Expand Up @@ -19,24 +19,22 @@
<td id="bulletChart" colspan="2" style="text-align: left"></td>
</tr>
</table>
<div style="text-align: right;">
<table cellpadding="0" cellspacing="0" width="100%">
</div>
</div>

<div id="rightcol">
<div style="padding: 2px;">
<table style="padding: 2px;">
<tr>
<td align="right">
<img src="images/applications-system.png" alt="Configure" align="right" onClick="window.location.href = '/mobilefuton/_design/mobilefuton/index.html'"/>
<img src="images/system-software-update.png" alt="Refresh" align="right" onClick="window.location.href = '/coconut/_design/coconut/index.html'"/>
<a href="#design"><img src="images/accessories-text-editor.png" alt="Design" align="right" /></a>
<a href="#populate"><img src="images/system-users.png" alt="Populate" align="right" /></a>
<td>
<img src="images/applications-system.png" alt="Configure" onClick="window.location.href = '/mobilefuton/_design/mobilefuton/index.html'"/>
<img src="images/system-software-update.png" alt="Refresh" onClick="window.location.href = '/coconut/_design/coconut/index.html'"/>
<a href="#design"><img src="images/accessories-text-editor.png" alt="Design" /></a>
<a href="#populate"><img src="images/system-users.png" alt="Populate" /></a>
</td>
</tr>
</table>
</div>

</div>
</div>

<div id="rightcol">

</div>
</div>
<div id="views">
Expand Down

0 comments on commit 6016cf7

Please sign in to comment.