<!DOCTYPE html>
<html lang="en">
{{fscript
	
	"It would be nice if we could click on a slice and it takes us to the list page. Unfortunately there is a bug in g.pie.js that causes the hrefs to line up. The array based approach that it uses for arguments is fragile to say the least. It should be reworked to use arrays of dictionaries for arguments."
	
	cats := objectContext objectsForEntityNamed:'Category' qualifierLocum:'active == 1 and forContact == 1' bindings:nil.
	
	all := {}.
	others := {}.

	cats do:[:cat |		
		v := objectContext resultCountForEntityNamed:'Contact' qualifierLocum:'categoryID == $catID' bindings:#{'catID' -> (cat categoryID)}.
				
		clr := ((cat color) mcrHTMLRepresentation).
		(clr == nil) ifTrue: [
			clr := '#000'.
		].

		dict := #{'name' -> (cat name), 'cID' -> (cat categoryID), 'value' -> v, 'label' -> ('%% - '++ (cat name)), 'color' -> clr}.

		all add:dict.

	].
	
	sorted := all sortedArrayUsingDescriptors:{(NSSortDescriptor sortDescriptorWithKey:'value' ascending:false)}.

	(sorted count > 10) ifTrue: [
		top := sorted at:{0,1,2,3,4,5,6,7,8,9}.
		others := sorted difference:top.	
	
		"we have to resort others..."		
		others := (others sortedArrayUsingDescriptors:{(NSSortDescriptor sortDescriptorWithKey:'value' ascending:false)}).
	
	]
	ifFalse: [
		top := sorted.
	].

	globals setTop:top.
	globals setOthers:others.
	
	"now we iterate the top and morph it to work with the chart"
	labels := {}.
	colors := {}.
	values := {}.
	
	all do:[:dict |
		values add:(dict valueForKey:'value').
		labels add:(dict valueForKey:'label').
		colors add:(dict valueForKey:'color').
	].
		
	globals setLabels:labels JSONRepresentation.
	globals setValues:values JSONRepresentation.
	globals setColors:colors JSONRepresentation.
}}
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" href="{{framework}}/default.css" type="text/css" charset="utf-8">
	<link rel="stylesheet" href="{{framework}}/screen.css" type="text/css" charset="utf-8" media="screen">
	<link rel="stylesheet" href="{{framework}}/print.css" type="text/css" charset="utf-8" media="print">
	
   <script src="{{framework}}/raphael.js"></script>	
   <script src="{{framework}}/g.raphael.js"></script>	
   <script src="{{framework}}/g.pie.js"></script>	   
   <script type="text/javascript">
   
	window.onload = function () {
        var r = Raphael("piechart", 700, 400),
		pie = r.piechart(200, 180, 140, {{values}}, {
			maxSlices: 10,
			legendothers: '< 1% or > 10th',
			legend: {{labels}},
			colors: {{colors}},
			matchColors: true,
			legendpos: "east" 
			});
        
            pie.hover(function () {
                this.sector.stop();
                this.sector.scale(1.1, 1.1, this.cx, this.cy);
        
                if (this.label) {
                    this.label[0].stop();
                    this.label[0].attr({ r: 7.5 });
                    this.label[1].attr({ "font-weight": 800 });
                }
            }, function () {
                this.sector.animate({ transform: 's1 1 ' + this.cx + ' ' + this.cy }, 500, "bounce");
        
                if (this.label) {
                    this.label[0].animate({ r: 5 }, 500, "bounce");
                    this.label[1].attr({ "font-weight": 400 });
                }
            });
        };
   </script>
</head>

<body>
	<h1>{{localize 'People by Category'}}</h1>

	<div id="piechart"></div>

	<h3>{{localize 'Top 10 Categories'}}</h3>
	<table>
		<thead>
				<td>{{localize 'Category'}}</td>
				<td width="15%">Count</td>
		</thead>
		<tbody>{{foreach dict top do}}
			<tr>
			<td>
				<a href="{{baseURL}}/list?categoryID={{dict.cID}}">{{dict.name}}</a>
			</td>
			<td>
				{{dict.value}}
			</td>
			</tr>{{endforeach do}}
		</tbody>	
	</table>
	
	{{if others.@count}}
	<h3>{{localize 'Others'}}</h3>
	<table>
		<thead>
				<td>{{localize 'Category'}}</td>
				<td width="15%">Count</td>
		</thead>
		<tbody>{{foreach dict others do}}
			<tr>
			<td>
				<a href="{{baseURL}}/list?categoryID={{dict.cID}}">{{dict.name}}</a>
			</td>
			<td>
				{{dict.value}}
			</td>
			</tr>{{endforeach do}}
		</tbody>	
	</table>
	{{endif}}
	
	<h3>{{localize 'People with no Category'}}</h3>
	<table>
		<thead>
				<td>{{localize 'Category'}}</td>
				<td width="15%">{{localize 'Count'}}</td>
		</thead>
		<tbody>
			<tr>
			<td>
				<a href="{{baseURL}}/nocategory">No Category</a>
			</td>
			<td>
				{{fscript objectContext resultCountForEntityNamed:'Contact' qualifierLocum:'categoryID = NULL' bindings:nil.}}
			</td>
			</tr>
		</tbody>	
	</table>

	<div id="reportfooter">
	{{localize 'Generated by %@ on %@.', objectContext.user.contact.cachedName, date}}	
	</div>

</body>
</html>