Skip to content

Commit

Permalink
Merge pull request kartoza#59 from meomancer/develop
Browse files Browse the repository at this point in the history 
add graph
  • Loading branch information
@meomancer
meomancer committed Apr 28, 2016
2 parents f214766 + 1314c2c commit 0ea3879
Show file tree
Hide file tree
Showing 7 changed files with 189 additions and 85 deletions.
4 changes: 4 additions & 0 deletions django_project/event_mapper/static/event_mapper/css/event_mapper.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -175,4 +175,8 @@
.chart-section {
width: 320px;
height: 150px;
}

.dc-chart .pie-slice {
fill: black !important;
}
175 changes: 113 additions & 62 deletions django_project/event_mapper/static/event_mapper/js/event_dashboard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,11 +20,13 @@ var pie_chart;
var selected_marker = null;

// filtering variable
var by_overall_assessment = {};
var by_types = {};
var by_datacaptor = {};
var by_overall_assessment = {};
var unchecked_statistic = [];

var assessment_chart;
var type_chart;
var datacaptor_chart;

function normalize_json_string(string) {
return string.replace(/\n/g, '<br>').slice(6, -6)
Expand Down Expand Up @@ -289,7 +291,7 @@ function add_event_marker(event_context) {
if (is_selected) {
event_marker.options.event_selected = true;
}
if (is_event_in_hide(event_marker)) {
if (is_event_in_show(event_marker)) {
event_marker.addTo(map);
}

Expand Down Expand Up @@ -392,7 +394,7 @@ function get_event_markers(items) {
})
}

function is_event_in_hide(marker) {
function is_event_in_show(marker) {
if (!$("#event-filter").is(':checked')) {
return false;
}
Expand Down Expand Up @@ -423,9 +425,11 @@ function hide_event_markers() {
function show_event_markers() {
for (var i = 0; i < markers.length; i++) {
if (markers[i]) {
if (is_event_in_hide(markers[i])) {
if (is_event_in_show(markers[i])) {
map.removeLayer(markers[i]);
map.addLayer(markers[i]);
} else {
map.removeLayer(markers[i]);
}
}
}
Expand All @@ -440,46 +444,98 @@ function checkbox_event_is_checked() {
}

function render_statistic() {
// render statistic
// overal assessment
$("#overall_assessment_chart").html("");
$("#data_captor_chart").html("");
$("#type_chart").html("");
for (var i = 5; i >= 1; i--) {
var name = 'assess_' + i;
var html = '<input type="checkbox" name="' + name + '"';
var found = $.inArray(name, unchecked_statistic) > -1;
if (!found) {
html += ' checked';
}
html += '>' + name + ' : ' + by_overall_assessment[name].length + '</br>';
$("#overall_assessment_chart").append(html);
// -------------------------------------------------------
// OVERAL ASSESSMENT
// -------------------------------------------------------
var data = [];
if (!assessment_chart) {
assessment_chart = dc.pieChart("#overall_assessment_chart");
}
var colorScale = d3.scale.ordinal().range(['#FF807F', '#FFCB7F', '#FFFF7F', '#D1FC7F', '#A1E37F']);
// set data
var keys = Object.keys(by_overall_assessment).sort();
for (var i = 0; i < keys.length && i < 5; i++) {
var name = keys[i];
data.push({category: keys[i].split("_")[1], value: by_overall_assessment[name].length});
}
// type_chart
var ndx = crossfilter(data);
var categoriesDim = ndx.dimension(function (d) {
return d.category;
});
var categoriesValue = categoriesDim.group().reduceSum(function (d) {
return d.value;
});
assessment_chart
.width(300).height(150)
.dimension(categoriesDim)
.group(categoriesValue)
.innerRadius(30).on("postRedraw", function () {
graph_filters($("#overall_assessment_chart"));
});
assessment_chart.colors(colorScale);
assessment_chart.render();

// -------------------------------------------------------
// TYPE
// -------------------------------------------------------
var data = [];
if (!type_chart) {
type_chart = dc.pieChart("#type_chart");
}
var colorScale = d3.scale.ordinal().range(['#91FC9D', '#72ff80', '#56ff67', '#4cff5e', '#38ff4b']);
// set data
var keys = Object.keys(by_types).sort();
for (var i = 0; i < keys.length && i < 5; i++) {
var name = keys[i];
var html = '<input type="checkbox" name="' + name + '"';
var found = $.inArray(name, unchecked_statistic) > -1;
if (!found) {
html += ' checked';
}
html += '>' + name + ' : ' + by_types[keys[i]].length + '</br>';
$("#type_chart").append(html);
data.push({category: keys[i].split("_")[1], value: by_types[name].length});
}

// datacaptor
var ndx = crossfilter(data);
var categoriesDim = ndx.dimension(function (d) {
return d.category;
});
var categoriesValue = categoriesDim.group().reduceSum(function (d) {
return d.value;
});
type_chart
.width(300).height(150)
.dimension(categoriesDim)
.group(categoriesValue)
.innerRadius(30).on("postRedraw", function () {
graph_filters($("#type_chart"));
});
type_chart.colors(colorScale);
type_chart.render();

// -------------------------------------------------------
// DATA CAPTOR
// -------------------------------------------------------
var data = [];
if (!datacaptor_chart) {
datacaptor_chart = dc.pieChart("#data_captor_chart");
}
var colorScale = d3.scale.ordinal().range(['#C0DFF5', '#8ac8f2', '#4facea', '#2e91d3', '#0b77bf']);
// set data
var keys = Object.keys(by_datacaptor).sort();
for (var i = 0; i < keys.length && i < 5; i++) {
var name = keys[i];
var html = '<input type="checkbox" name="' + name + '"';
var found = $.inArray(name, unchecked_statistic) > -1;
if (!found) {
html += ' checked';
}
html += '>' + name + ' : ' + by_datacaptor[keys[i]].length + '</br>';
$("#data_captor_chart").append(html);
data.push({category: keys[i].split("_")[1], value: by_datacaptor[name].length});
}
var ndx = crossfilter(data);
var categoriesDim = ndx.dimension(function (d) {
return d.category;
});
var categoriesValue = categoriesDim.group().reduceSum(function (d) {
return d.value;
});
datacaptor_chart
.width(300).height(150)
.dimension(categoriesDim)
.group(categoriesValue)
.innerRadius(30).on("postRedraw", function () {
graph_filters($("#data_captor_chart"));
});
datacaptor_chart.colors(colorScale);
datacaptor_chart.render();

// checkbox onchange
$(':checkbox').change(function () {
Expand All @@ -495,38 +551,33 @@ function render_statistic() {
} else {
hide_event_markers();
}
} else {
statistic_clicked(this);
}
});
}

function statistic_clicked(element) {
var name = $(element).attr('name');
var is_checked = $(element).is(':checked');
unchecked_statistic.remove(name);
if (!is_checked) {
unchecked_statistic.push(name);
}
// rerender the markers
var identifier = name.split("_")[0];
var temp_markers = {};
if (identifier == "assess") {
temp_markers = by_overall_assessment[name];
} else if (identifier == "datacaptor") {
temp_markers = by_datacaptor[name];
} else if (identifier == "type") {
temp_markers = by_types[name];
}
if (!is_checked) {
for (var i = 0; i < temp_markers.length; i++) {
if (temp_markers[i]) {
map.removeLayer(temp_markers[i]);
}
function graph_filters(graph) {
var pies = graph.find('g.pie-slice');
var id = $(graph).attr('id');
var identifier = "";
if (id == "overall_assessment_chart") {
identifier = "assess_";
} else if (id == "type_chart") {
identifier = "type_";
} else if (id == "data_captor_chart") {
identifier = "datacaptor_";
}
// check the checked filtered
for (var i = 0; i < pies.length; i++) {
var label = pies[i].textContent.split(":")[0];
var deselect = $(pies[i]).attr('class').indexOf("deselected") > -1;
if (deselect) {
unchecked_statistic.remove(identifier + label);
unchecked_statistic.push(identifier + label);
} else {
unchecked_statistic.remove(identifier + label);
}
} else {
show_event_markers();
}
show_event_markers();
}

// --------------------------------------------------------------------
Expand Down
6 changes: 2 additions & 4 deletions django_project/event_mapper/templates/event_mapper/event/event_dashboard.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,17 +17,15 @@ <h4>Assessment Dashboard</h4>
<div class="graph-box">
<h3>By overall assessment</h3>
<div align="center">
<div class="chart-section" id="overall_assessment_chart" width="200"
height="150"></div>
<div class="chart-section" id="overall_assessment_chart" height="150"></div>
</div>
</div>
<div class="graph-box">
<h3>By type</h3>
<div align="center">
{# <canvas style="width: 150px; height: 150px;" id="incident_type_chart" width="150"#}
{# height="150"></canvas>#}
<div class="chart-section" id="type_chart" width="200"
height="150"></div>
<div class="chart-section" id="type_chart" height="150"></div>
</div>
</div>
<div class="graph-box">
Expand Down
11 changes: 8 additions & 3 deletions django_project/event_mapper/templates/event_mapper/event/event_dashboard_page.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,11 @@
{% block other_import %}
<link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.16.1/vis.min.css" rel="stylesheet"/>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.16.1/vis.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/dc/1.7.5/dc.min.css" rel="stylesheet"/>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dc/1.7.5/dc.min.js"></script>
{% endblock %}
{% block header %}
<script>
Expand All @@ -18,10 +23,10 @@
// ---------------------------------------------------------------------------------
// add items to the DataSet
var nowDate = new Date()
var end_date = nowDate.getUTCFullYear() + "-" + (nowDate.getUTCMonth() + 1) + "-" + nowDate.getUTCDate();
var end_date = nowDate.getUTCFullYear() + "-" + ("0" + (nowDate.getUTCMonth() + 1)).slice(-2) + "-" + nowDate.getUTCDate();

var startDate = new Date(nowDate.getTime() - (30 * 24 * 60 * 60 * 1000)); // 3 month before
var start_date = startDate.getUTCFullYear() + "-" + (startDate.getUTCMonth() + 1) + "-" + startDate.getUTCDate();
var start_date = startDate.getUTCFullYear() + "-" + ("0" + (startDate.getUTCMonth() + 1)).slice(-2) + "-" + startDate.getUTCDate();

// add time to vis
items.add([
Expand Down Expand Up @@ -101,7 +106,7 @@
$('.graph-box').css({height: maxHeight + 'px'});

// fill the number of healthsites
$("#num_hs").html("{{ healthsites_num }}")
$("#num_hs").html("{{ healthsites_num }}");
});

function updatePeriodReport(start, end) {
Expand Down
Loading

0 comments on commit 0ea3879

Please sign in to comment.