Skip to content
Permalink
Browse files

charts for cases

  • Loading branch information...
mountev committed Nov 9, 2017
1 parent 8653250 commit 4810617d23f5a64b95ada1671d4e90b3c164a096
Showing with 146 additions and 0 deletions.
  1. +21 −0 queries/cases.sql
  2. +1 −0 templates/CRM/Civisualize/Page/Main.tpl
  3. +124 −0 templates/dataviz/Cases.tpl
@@ -0,0 +1,21 @@
SELECT
count(ccase.id) as total,
contact.id as contact_id,
contact.sort_name as contact_sort_name,
ccase.id,
(SELECT case_type.title FROM civicrm_case_type case_type WHERE case_type.id = ccase.case_type_id) as case_type,
ccase.status_id,
ccase.subject,
ccase.start_date,
ccase.end_date,
YEAR(ccase.start_date) as year
FROM civicrm_contact contact
INNER JOIN
civicrm_case_contact case_contact
ON contact.id = case_contact.contact_id
INNER JOIN
civicrm_case ccase
ON case_contact.case_id = ccase.id
WHERE ccase.is_deleted = 0
GROUP BY ccase.id, contact.id
ORDER BY ccase.start_date DESC;
@@ -7,6 +7,7 @@ You need to choose one of the following visualizations to start with:
<li><a href="{crmURL p='civicrm/dataviz/events'}">Events</a></li>
<li><a href="{crmURL p='civicrm/dataviz/mailings'}">Mailings</a></li>
<li><a href="{crmURL p='civicrm/dataviz/donortrends'}">Donor Trends</a></li>
<li><a href="{crmURL p='civicrm/dataviz/cases'}">Cases</a></li>
</ul>
<p>
You might like to learn how to <a href="https://github.com/TechToThePeople/civisualize">build your own datavisualisation</a>
@@ -0,0 +1,124 @@
{crmTitle string="Case Overview"}
<div class="caseoverview">
<div id="case-manager" class="clear">
<strong>Case Manager</strong>
<a class="reset" href="javascript:typeRow.filterAll();dc.redrawAll();" style="display: none;">reset</a>
<div class="clearfix"></div>
</div>
<div class="clear"></div>
<div id="pie-group">
<div id="type">
<strong>Case Type</strong>
<a class="reset" href="javascript:typePie.filterAll();dc.redrawAll();" style="display: none;">reset</a>
<div class="clearfix"></div>
</div>
<div id="status">
<strong>Case Status</strong>
<a class="reset" href="javascript:statusPie.filterAll();dc.redrawAll();" style="display: none;">reset</a>
<div class="clearfix"></div>
</div>
</div>
<div class="clear"></div>
<table id="dc-data-table">
<thead>
<tr class="header">
<th>Contact Name</th>
<th>Case ID</th>
<th>Subject</th>
<th>Status</th>
<th>Type</th>
<th>Start Date</th>
<th>End Date</th>
</tr>
</thead>
</table>
<div class="clear"></div>
</div>

<script>
'use strict';
var data = {crmSQL file="cases"};
var statusOptionVal = {crmAPI entity="OptionValue" option_group_id="case_status"};
var caseURL = "{crmURL p='civicrm/contact/view/case?reset=1&id=xx&cid=yy&action=view&context=dashboard&selectedChild=case'}";
var contactURL = "{crmURL p='civicrm/contact/view?reset=1&cid=xx'}";
{literal}
if(!data.is_error){
var typeRow, typePie, statusPie, dataTable;
cj(function($) {
var statusLabel = {};
statusOptionVal.values.forEach (function(d) {
statusLabel[d.value] = d.label;
});
statusOptionVal=null;
data.values.forEach(function(d){
d.case_status = statusLabel[d.status_id];
});
var ndx = crossfilter(data.values);
var caseTypeDim = ndx.dimension(function(d) {return d.case_type;});
var caseTypeTotal = caseTypeDim.group().reduceSum(function(d) {return d.total;});
var caseStatusDim = ndx.dimension(function(d) {return d.case_status;});
var caseStatusTotal = caseStatusDim.group().reduceSum(function(d) {return d.total;});
var caseManagerDim = ndx.dimension(function(d) {return d.contact_sort_name;});
var caseManagerTotal = caseManagerDim.group().reduceSum(function(d){return d.total;});
// Case Manager
typeRow = dc.rowChart('#case-manager');
typeRow
.height(200)
.margins({top: 20, left: 10, right: 10, bottom: 20})
.dimension(caseManagerDim)
.cap(5)
.ordering (function(d) {return d.total;})
.colors(d3.scale.category10())
.group(caseManagerTotal)
.elasticX(true);
// Case Type
typePie = dc.pieChart("#type");
typePie
.innerRadius(10)
.radius(120)
.width(300)
.height(300)
.colors(d3.scale.category10())
.dimension(caseTypeDim)
.group(caseTypeTotal);
// Case Status
statusPie = dc.pieChart("#status");
statusPie
.innerRadius(10)
.radius(120)
.width(300)
.height(300)
.colors(d3.scale.category10())
.dimension(caseStatusDim)
.group(caseStatusTotal);
// List of Cases
dataTable = dc.dataTable("#dc-data-table");
dataTable
.dimension(caseTypeDim)
.group(function(d) {return d.year;})
.columns([
function(d) {return "<a href='"+contactURL.replace('xx',d.id)+"'>"+d.contact_sort_name+"</a>";},
function(d) {return "<a href='"+caseURL.replace('xx',d.id).replace('yy',d.contact_id)+"'>"+d.id+"</a>";},
function(d) {return d.subject;},
function(d) {return d.case_status;},
function(d) {return d.case_type;},
function(d) {return d.start_date;},
function(d) {return d.end_date;}
]);
dc.renderAll();
});
}
else {
cj('.caseoverview').html('<div style="color:red; font-size:18px;">Civisualize Error. Please contact Admin.'+data.error+'</div>')
}
{/literal}
</script>
<div class="clear"></div>

1 comment on commit 4810617

@mountev

This comment has been minimized.

Copy link
Owner Author

mountev commented on 4810617 Nov 9, 2017

We've added charts for CiviCase that allows you to filter cases on case manager, case type and case status.

cases chart

Please sign in to comment.
You can’t perform that action at this time.