Adding HTML project view template.

templates/html/individual-activity/README.md

@@ -0,0 +1,5 @@
+## Individual Activity CSV with jQuery and google visualisations
+
+This XSLT transformation takes the xml for an activity and generates a simple view of the key information it contains in plain HTML. The associated CSS file is used to lay-out the data, and the javascript makes use of (jQuery)[http://jquery.com/] and the (Google Chart tools)[http://code.google.com/apis/chart/] to turn tables into maps and charts. 
+
+The included index.php can run the transformations in a PHP file, drawing upon the Aid Info Labs toolkit at http://tools.aidinfolabs.org

templates/html/individual-activity/activity.css

@@ -0,0 +1,120 @@
+	.note {display:none;}
+
+	.map { width: 300px; height: 200px; }
+
+	* {
+        margin: 0;
+        padding: 0;
+    }
+
+    body {
+        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+        margin: 10px;
+        color: #292416;
+        background-color: #f8f8f8;
+    }
+
+    h1 {
+        font-size: 24px;
+        border-bottom: 1px solid #b8ad98;
+        padding: 0 5px 3px 5px;
+        margin: 0 10px 5px 10px;
+    }
+
+    div.status {
+        color: #887d68;
+        margin: 0 15px 20px 15px;
+    }
+
+    div.status span {
+        margin-right: 20px;
+    }
+
+    div.documents, div.description, div.contacts, div.financials, div.organisations, div.geography, div.policy-markers, div.sectors, div.classifications, div.periods, div.sectors {
+        background-color: #fff;
+        padding: 10px 15px;
+        margin-bottom: 15px;
+        -webkit-border-radius: 10px;
+    	-moz-border-radius: 10px;
+    	border-radius: 10px;
+    }
+
+	div.organisations, div.geography {
+		width:45%;
+		float:left;
+	}
+
+	div.periods {
+		clear:left;
+	}
+
+
+    h4 {
+        margin-bottom: 10px
+    }
+
+    div.addr {
+        margin-top: 10px;
+    }
+
+    .financials .commitment_header {
+        font-weight: bold;
+        margin-right: 10px;
+    }
+
+    .financials .spending_summary {
+        display: block;
+        margin-top: 5px
+    }
+
+    ul {
+        padding-left: 24px;
+        margin: 5px 0;
+    }
+
+    ul + h3 {
+        margin-top: 15px;
+    }
+
+    table.datatable,
+    table.classifications,
+    table.google-visualization-table-table{
+        font-size: 14px;
+        border-collapse: collapse;
+        margin: 5px 0;
+		clear:left;
+    }
+
+    table.datatable td,
+    table.datatable th,
+    table.classifications td, 
+    table.classifications th,
+    table.google-visualization-table-table td{
+        padding: 3px 5px;
+        border: 1px solid #d9d9d8;
+    }
+
+    th {
+        background-color: #e9e9e8;
+    }
+
+    div.periods div {
+        color: #797466;
+    }
+
+    div.periods div.planned-dates {
+        margin-bottom: 5px
+    }
+
+    div.periods span {
+        margin: 0 5px;
+        color: #292416;
+    }
+
+	div.pie-chart {
+		float:left;
+	}
+
+	.options {
+		padding:5px;
+	}

templates/html/individual-activity/enhance.js

@@ -0,0 +1,116 @@
+  google.load('visualization', '1', {'packages': ['geochart','corechart','table']});
+
+   $(document).ready(function(){
+		$(".datatable").each(function(){
+
+			table_div = $(this).parent().find(".graph").attr("id");
+
+			var data = new google.visualization.DataTable();
+		    data.addColumn('string', 'Name');
+		    data.addColumn('number', 'Value');
+		    data.addColumn('string', 'Vocabulary');
+
+			var displayGraph = 0;
+			$(this).find("tr:has(td)").each(function(){
+				if(weight = parseInt($(this).find(".weight").html())) {} else {weight = 1}
+
+				if(!$(this).find(".vocabulary").html()=="") { vocab = $(this).find(".vocabulary").html(); } else { vocab = "Unspecified"; } 
+				data.addRows([[$(this).find(".name").html(), weight, vocab]]);
+				displayGraph++;
+			});
+
+			//Now create a section for each vocabulary
+			types = data.getDistinctValues(2); /*Type is in column 3 - change if it moves*/
+			for(col in types) {
+				vocabSelect = types[col];
+
+				var vocabData = new google.visualization.DataTable();
+			    vocabData.addColumn('string', 'Name');
+			    vocabData.addColumn('number', 'Value');
+				vocabRows = data.getFilteredRows([{column:2, value: vocabSelect}]);
+				for(row in vocabRows) {
+					vocabData.addRows([[data.getValue(parseInt(vocabRows[row]),0),data.getValue(parseInt(vocabRows[row]),1)]]);
+				}
+				if(types[col]) {
+					$(this).parent().find(".graph").append("<div id='"+table_div + "_" + vocabSelect +"' class='pie-chart'></div>")
+					var chart = new google.visualization.PieChart(document.getElementById(table_div + "_" + vocabSelect));
+					chart.draw(vocabData, {width: 350, height: 240, title: vocabSelect + " vocabulary", legend: "right" });
+				}
+				delete vocabData;
+			}
+
+			delete data;
+		});
+
+		$(".transactiontable").each(function(){
+			/* For transactions we first build a data-table and replace the original table with it...*/
+			table_div = $(this).parent().find(".table").attr("id");
+			graph_div = $(this).parent().find(".graph").attr("id");
+
+			var data = new google.visualization.DataTable();
+			var re = new RegExp("-?[0-9]{1,100}","g");
+		    data.addColumn('number', 'Year');
+		    data.addColumn('string', 'Currency');
+		    data.addColumn('number', 'Value');
+		    data.addColumn('string', 'Type');
+		    data.addColumn('string', 'Description');
+			$(this).find("tr:has(td)").each(function(){
+				year = new Date($(this).find(".transaction-date").html()).getFullYear();
+				valueString = $(this).find(".transaction-value").html();
+				currency = valueString.substr(0,3);
+				valueString = String(valueString.match(re));
+				value = parseInt(valueString.replace(/[,]/g, ""));
+				data.addRows([[year,currency, value, $(this).find(".transaction-type").html(),$(this).find(".transaction-description").html()]]);
+			});
+			var table = new google.visualization.Table(document.getElementById(table_div));
+			$(this).hide();
+			table.draw(data, {showRowNumber: false});
+
+			/* Now we need to find out what range the transaction values range over, and then build a new data table summarising them */
+			var graphData = new google.visualization.DataTable();
+			graphData.addColumn('string', 'Year');
+			types = data.getDistinctValues(3); /*Type is in column 3 - change if it moves*/
+			for(col in types) {
+				graphData.addColumn('number', types[col]);
+			}
+			years = data.getColumnRange(0); /*Year is in column 0 - change if it moves*/
+			var valueForTypeAndYear = 0; var graphRow = 0;
+			if(years.min == years.max) { max = years.max + 1 } else { max = years.max } /*Have to handle for only one year */
+			for(range=years.min;range!=max;range++) {
+				graphData.addRows(1); 
+				graphData.setCell(graphRow,0," "+range);
+				for(col in types) {
+					rowsForTypeAndYear = data.getFilteredRows([{column:0, value: range},{column:3,value:types[col]}]);
+					for(row in rowsForTypeAndYear) {
+						valueForTypeAndYear = valueForTypeAndYear + data.getValue(parseInt(rowsForTypeAndYear[row]),2);
+					}
+					graphData.setCell(graphRow,parseInt(col)+1,valueForTypeAndYear);						
+					valueForTypeAndYear = 0;
+				}
+				graphRow++;
+			}
+			var chart = new google.visualization.ColumnChart(document.getElementById(graph_div));
+			chart.draw(graphData, {width: 600, height: 300, title: 'Transactions', legend: 'bottom',
+			                          hAxis: {title: 'Year'}, vAxis: {title: currency}
+			                         });
+
+		});
+
+
+		$("ul.geography").each(function(){
+
+				map_div = $(this).parent().find(".map").attr("id");
+
+				var data = new google.visualization.DataTable();
+			    data.addColumn('string', 'Country');
+			    data.addColumn('number', 'Value');
+				$(this).find("li span").each(function(){
+					data.addRows([[$(this).attr("id"), 1]]);
+				});
+				var options = {};
+				var container = document.getElementById(map_div);
+			    var geochart = new google.visualization.GeoChart(container);
+			    geochart.draw(data, options);
+				delete data;
+		});
+   });

templates/html/individual-activity/index.php

@@ -0,0 +1,66 @@
+<?php header ("content-type: text/html");
+
+ define("EXIST_URI","http://tools.aidinfolabs.org/exist/rest/");
+ define("EXIST_DB","/db/iati");
+
+if($_GET['activity']) {
+ $query = EXIST_URI.EXIST_DB."?_query=//iati-activity[iati-identifier='";
+ $query .=  ($_GET['activity'] ? $_GET['activity'] : "NULL");
+ $query .= "']";
+ $query.= "&_howmany=1";
+
+   $data = file_get_contents($query);
+
+   $xmlDoc = new DOMDocument();
+   $xmlDoc->loadXML($data);
+
+
+if($xmlDoc->getElementsByTagName('iati-activity')->item(0)) {
+	   $xslDoc = new DOMDocument();
+   	   $xslDoc->load("individual-activity-html.xsl");
+
+	   $proc = new XSLTProcessor();
+	   $proc->importStylesheet($xslDoc);
+
+	   $proc->transformToUri($xmlDoc,'php://output'); 
+	   ob_flush();
+	   exit();
+}
+
+} else {
+?>
+<html>
+	<head>
+		<title>IATI Activity Viewer - <xsl:value-of select="title"/></title>
+		<script type="text/javascript" src="https://www.google.com/jsapi"></script>
+		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
+		<script type="text/javascript" src="enhance.js"></script>
+		<link media="screen" rel="stylesheet" href="activity.css" />  	  
+	</head>
+	<body>
+
+		<h1 class="title">Activity Explorer</h1>
+
+		<div class="description">
+				<p>
+					This service provides a view of individual IATI Activities using an <a href="individual-activity-html.xsl">XSLT stylesheet</a> and some visualisation tools. It is mainly designed for use from the <a href="/explorer/">IATI Explorer</a>, but you can also load activities directly entering an IATI-Identifier below.
+				</p>
+		</div>
+		<div class="description">
+				<p>
+					<form action="." method="get">
+							<b>IATI Identifier:</b> <input name="activity" type="text"/>
+					<input type="submit" value="Display"/>
+					</form>
+				</p>
+		</div>
+		<div class="description">
+			Find out <a href="http://aidinfolabs.org/archives/438">more about this tool on AidInfoLabs</a>.
+		</div>
+
+	</body>
+</html>
+
+
+
+<?php } ?>