Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Adding HTML project view template.

  • Loading branch information...
commit a1e98327c182bb407a432e3006ac8032c40821ee 1 parent 7367d02
Tim Davies practicalparticipation authored
5 templates/html/individual-activity/README.md
View
@@ -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
120 templates/html/individual-activity/activity.css
View
@@ -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;
+ }
116 templates/html/individual-activity/enhance.js
View
@@ -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;
+ });
+ });
66 templates/html/individual-activity/index.php
View
@@ -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 } ?>
310 templates/html/individual-activity-profile.xsl → .../individual-activity/individual-activity-html.xsl
View
@@ -33,13 +33,14 @@
<html>
<head>
<title>IATI Activity Viewer - <xsl:value-of select="title"/></title>
- <style>
- .note {display:none;}
- </style>
- <xsl:call-template name="GoogleViz"> <xsl:with-param name="activity" select="."/> </xsl:call-template>
-
+ <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>
+
+
<xsl:for-each select=".">
<h1 class="title"><xsl:value-of select="title"/></h1>
@@ -57,19 +58,6 @@
</xsl:for-each>
</div>
-
- <div class="contacts">
- <h4>Contacts</h4>
- <xsl:for-each select="contact-info">
- <div class="vcard">
- <div class="org"><xsl:value-of select="organisation"/></div>
- <xsl:if test="email"><a class="email" href="mailto:{email}"><xsl:if test="person-name"><xsl:value-of select="person-name"/></xsl:if><xsl:if test="not(person-name)"><xsl:value-of select="email"/></xsl:if></a></xsl:if>
- <xsl:if test="telephone"><div class="tel"><xsl:value-of select="telephone"/></div></xsl:if>
- <xsl:if test="mailing-address"><div class="addr"><xsl:value-of select="mailing-address"/></div></xsl:if>
- </div>
- </xsl:for-each>
- </div>
-
<div class="financials">
<span class="commitment_data">
<span class="commitment_header">Total Commitments</span>
@@ -77,22 +65,18 @@
<span class="commitments">
<xsl:call-template name="formatCurrency">
<xsl:with-param name="currency" select="$currency"/>
- <xsl:with-param name="value" select="sum(transaction[transaction-type/@code='C'][value/@currency='$currency' or not(value/@currency)]/value)"/>
+ <xsl:with-param name="value" select="sum(transaction[transaction-type/@code='C']/value)"/>
</xsl:call-template>
<span class="note">This gives a total of commitments recorded in the default currency of <xsl:value-of select="$currency"/> .</span>
- </span>
-
-
-
+ </span>
</span>
<span class="spending_summary">
<!--We assume all transaction as recorded in the default currency-->
Recorded spending so far:
<xsl:call-template name="formatCurrency">
<xsl:with-param name="currency" select="$currency"/>
- <xsl:with-param name="value" select="sum(transaction[transaction-type/@code='E' or transaction-type/@code='D'][value/@currency='$currency' or not(value/@currency)]/value)"/>
+ <xsl:with-param name="value" select="sum(transaction[transaction-type/@code='E' or transaction-type/@code='D']/value)"/>
</xsl:call-template>
-
</span>
</div>
@@ -106,10 +90,19 @@
<h3>Participating Organisations</h3>
<ul>
<xsl:for-each select="participating-org">
- <li><span class="participating-org role-{@role}" id="{@ref}"><xsl:value-of select="."/> (<xsl:value-of select="@role"/><xsl:apply-templates select='document("")//OrganisationType:codes'><xsl:with-param name="code" select="@type"/></xsl:apply-templates>
+ <li><span class="participating-org role-{@role}" id="{@ref}"><xsl:value-of select="."/> (<xsl:value-of select="@role"/> - <xsl:apply-templates select='document("")//OrganisationType:codes'><xsl:with-param name="code" select="@type"/></xsl:apply-templates>
)</span></li>
</xsl:for-each>
</ul>
+
+ <xsl:if test="related-activity">
+ <h3>Related Activities</h3>
+ <ul>
+ <xsl:for-each select="related-activity">
+ <li><a href="/explorer/activity/?activity={@ref}" title="{.}"><xsl:value-of select="."/></a></li>
+ </xsl:for-each>
+ </ul>
+ </xsl:if>
</div>
<div class="geography">
@@ -122,26 +115,48 @@
<div id="{iati-identifier}-recipient-map" class="map"></div>
</div>
+ <div class="periods">
+ <xsl:if test="activity-date[@type='start-planned']|activity-date[@type='end-planned']">
+ <div class="planned-dates">Planned dates: <span class="date-entry start-planned"><xsl:call-template name="iati-date"><xsl:with-param name="value" select="activity-date[@type='start-planned']"/> </xsl:call-template></span> until <span class="date-entry end-planned"><xsl:call-template name="iati-date"> <xsl:with-param name="value" select="activity-date[@type='end-planned']"/> </xsl:call-template></span></div>
+ </xsl:if>
+ <xsl:if test="activity-date[@type='start-actual']|activity-date[@type='end-actual']">
+ <div class="actual-dates">Actual dates: <span class="date-entry start-actual"><xsl:call-template name="iati-date"><xsl:with-param name="value" select="activity-date[@type='start-actual']"/> </xsl:call-template></span> until <span class="date-entry end-actual"><xsl:call-template name="iati-date"> <xsl:with-param name="value" select="activity-date[@type='end-actual']"/> </xsl:call-template></span></div>
+ </xsl:if>
+ </div>
- <div class="policy-markers">
- <h4>Policy Markers</h4>
- <div class="graph" id="{iati-identifier}-policy-markers-graph">
- </div>
- <table title="Policy markers" class="policy-markers datatable">
+
+ <div class="sectors">
+ <h4>Transaction</h4>
+ <div class="graph" id="{iati-identifier}-transactions-graph"></div>
+ <div class="table" id="{iati-identifier}-transactions-table"></div>
+ <table title="Transaction_Table" class="transactions transactiontable">
+ <!--Right now we only handle the basics of the transaction details. We need to include more detail on flow types etc. in future-->
<tr>
- <th class="vocabulary">Vocabulary</th>
- <th class="code">Code</th>
- <th class="name">Marker</th>
- <th class="weight">Significance</th>
+ <th class="transaction-date">Date</th>
+ <th class="transaction-type">Type</th>
+ <th class="transaction-provider">Provider</th>
+ <th class="transaction-receiver">Receiver</th>
+ <th class="transaction-value">Value</th>
+ <th class="transaction-description">Description</th>
</tr>
- <xsl:for-each select="policy-marker">
- <xsl:sort select="@vocabulary"/>
- <tr>
- <td class="vocabulary"><xsl:value-of select="@vocabulary"/></td>
- <td class="code"><xsl:value-of select="@code"/></td>
- <td class="name"><xsl:value-of select="."/></td>
- <td class="weight"><xsl:value-of select="@significance"/></td>
- </tr>
+ <xsl:for-each select="transaction">
+ <xsl:sort select="transaction-type/@code"/><xsl:sort select="value/@value-date"/>
+ <tr>
+ <td class="transaction-date"><xsl:call-template name="iati-date"><xsl:with-param name="date_format" select="'yyyy-MM-dd'" /><xsl:with-param name="value" select="transaction-date"/> </xsl:call-template></td>
+ <td class="transaction-type transaction-type-{type/@code}">
+ <xsl:apply-templates select='document("")//TransactionType:codes'><xsl:with-param name="code" select="transaction-type/@code"/></xsl:apply-templates>
+ </td>
+ <td class="transaction-provider"><span class="organisation" id="{provider-org/@ref}"><xsl:value-of select="provider-org"/></span></td>
+ <td class="transaction-receiver"><span class="organisation" id="{receiver-org/@ref}"><xsl:value-of select="receiver-org"/></span></td>
+ <td class="transaction-value">
+ <!--Note, at the moment we're only handling for the default currency-->
+ <xsl:call-template name="formatCurrency">
+ <xsl:with-param name="currency" select="$currency"/>
+ <xsl:with-param name="value" select="value"/>
+ </xsl:call-template>
+ </td>
+ <td class="transaction-description"><xsl:value-of select="description"/></td>
+ </tr>
</xsl:for-each>
</table>
</div>
@@ -197,51 +212,59 @@
<td class="value"><xsl:value-of select="default-tied-status"/></td>
</tr></xsl:if>
</table>
- </div>
+ </div>
- <div class="periods">
- <xsl:if test="activity-date[@type='start-planned']|activity-date[@type='end-planned']">
- <div class="planned-dates">Planned dates: <span class="date-entry start-planned"><xsl:call-template name="iati-date"><xsl:with-param name="value" select="activity-date[@type='start-planned']"/> </xsl:call-template></span> until <span class="date-entry end-planned"><xsl:call-template name="iati-date"> <xsl:with-param name="value" select="activity-date[@type='end-planned']"/> </xsl:call-template></span></div>
- </xsl:if>
- <xsl:if test="activity-date[@type='start-actual']|activity-date[@type='end-actual']">
- <div class="actual-dates">Actual dates: <span class="date-entry start-actual"><xsl:call-template name="iati-date"><xsl:with-param name="value" select="activity-date[@type='start-actual']"/> </xsl:call-template></span> until <span class="date-entry end-actual"><xsl:call-template name="iati-date"> <xsl:with-param name="value" select="activity-date[@type='end-actual']"/> </xsl:call-template></span></div>
- </xsl:if>
- </div>
-
- <div class="sectors">
- <h4>Transaction</h4>
- <div class="graph" id="{iati-identifier}-transactions-graph"></div>
- <div class="table" id="{iati-identifier}-transactions-table"></div>
- <table title="Sector codes" class="transactions transactiontable">
- <!--Right now we only handle the basics of the transaction details. We need to include more detail on flow types etc. in future-->
+ <div class="policy-markers">
+ <h4>Policy Markers</h4>
+ <xsl:if test="policy-marker[@significance>0]">
+ <table title="Policy markers" class="policy-markers">
<tr>
- <th class="transaction-date">Date</th>
- <th class="transaction-type">Type</th>
- <th class="transaction-provider">Provider</th>
- <th class="transaction-receiver">Receiver</th>
- <th class="transaction-value">Value</th>
- <th class="transaction-description">Description</th>
+ <th class="vocabulary">Vocabulary</th>
+ <th class="code">Code</th>
+ <th class="name">Marker</th>
+ <th class="weight">Significance</th>
</tr>
- <xsl:for-each select="transaction">
- <xsl:sort select="transaction-type/@code"/><xsl:sort select="value/@value-date"/>
- <tr>
- <td class="transaction-date"><xsl:call-template name="iati-date"><xsl:with-param name="date_format" select="'yyyy-MM-dd'" /><xsl:with-param name="value" select="transaction-date"/> </xsl:call-template></td>
- <td class="transaction-type transaction-type-{type/@code}">
- <xsl:apply-templates select='document("")//TransactionType:codes'><xsl:with-param name="code" select="transaction-type/@code"/></xsl:apply-templates>
- </td>
- <td class="transaction-provider"><span class="organisation" id="{provider-org/@ref}"><xsl:value-of select="provider-org"/></span></td>
- <td class="transaction-receiver"><span class="organisation" id="{receiver-org/@ref}"><xsl:value-of select="receiver-org"/></span></td>
- <td class="transaction-value">
- <!--Note, at the moment we're only handling for the default currency-->
- <xsl:call-template name="formatCurrency">
- <xsl:with-param name="currency" select="$currency"/>
- <xsl:with-param name="value" select="value"/>
- </xsl:call-template>
- </td>
- <td class="transaction-description"><xsl:value-of select="description"/></td>
- </tr>
+ <xsl:for-each select="policy-marker[@significance>0]">
+ <xsl:sort select="@vocabulary"/>
+ <tr>
+ <td class="vocabulary"><xsl:value-of select="@vocabulary"/></td>
+ <td class="code"><xsl:value-of select="@code"/></td>
+ <td class="name"><xsl:value-of select="."/></td>
+ <td class="weight"><xsl:value-of select="@significance"/></td>
+ </tr>
</xsl:for-each>
</table>
+ </xsl:if>
+ <xsl:if test="not(policy-marker[@significance>0])">
+ No policy marker data available.
+ </xsl:if>
+ </div>
+
+ <div class="documents">
+ <h4>Documents</h4>
+ <ul>
+ <xsl:for-each select="document-link">
+ <li><a href="{@url}" target="_blank" title="{title}"><xsl:value-of select="title"/></a> - <xsl:call-template name="join"> <xsl:with-param name="values" select="category"/> </xsl:call-template></li>
+ </xsl:for-each>
+ </ul>
+ </div>
+
+
+ <div class="contacts">
+ <h4>Contacts</h4>
+ <xsl:for-each select="contact-info">
+ <div class="vcard">
+ <div class="org"><xsl:value-of select="organisation"/></div>
+ <xsl:if test="email"><a class="email" href="mailto:{email}"><xsl:if test="person-name"><xsl:value-of select="person-name"/></xsl:if><xsl:if test="not(person-name)"><xsl:value-of select="email"/></xsl:if></a></xsl:if>
+ <xsl:if test="telephone"><div class="tel"><xsl:value-of select="telephone"/></div></xsl:if>
+ <xsl:if test="mailing-address"><div class="addr"><xsl:value-of select="mailing-address"/></div></xsl:if>
+ </div>
+ </xsl:for-each>
+ </div>
+
+ <div class="documents">
+ <h4>Other formats</h4>
+ <a href="/exist/rest//db/iati?query={iati-identifer}" target="_blank">XML</a> - <a href="/process/?query=//iati-activity[iati-identifier='{iati-identifier}']&amp;xsl=/db/xsl/iati-activities-xml-to-csv.xsl&amp;format=csv" target="_blank">CSV (Activity)</a> - <a href="/process/?query=//iati-activity[iati-identifier='{iati-identifier}']&amp;xsl=/db/xsl/iati-transactions-xml-to-csv.xsl&amp;format=csv" target="_blank">CSV (Transactions)</a> - JSON (Coming soon)
</div>
@@ -255,105 +278,26 @@
</xsl:template>
<!--EXTRA TEMPLATES-->
-<!--Include this template in the header to have tables auto-visualised-->
-<xsl:template name="GoogleViz">
- <xsl:param name="activity"/>
- <style>
- .map { width: 300px; height: 200px; }
- </style>
- <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">
- 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');
- $(this).find("tr:has(td)").each(function(){
- data.addRows([[$(this).find(".name").html(), parseInt($(this).find(".weight").html())]]);
- });
- var chart = new google.visualization.PieChart(document.getElementById(table_div));
- chart.draw(data, {width: 400, height: 240});
- 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]","g");
- data.addColumn('number', 'Year');
- data.addColumn('string', 'Currency');
- data.addColumn('number', 'Value');
- data.addColumn('string', 'Type');
- $(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);
- value = parseInt(valueString.replace(re,""));
- data.addRows([[year,currency, value, $(this).find(".transaction-type").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;
- for(range=years.min;range!=years.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;
- });
- });
-
- </script>
-
+<xsl:template name="join" >
+ <xsl:param name="values" select="''"/>
+ <xsl:param name="quote"><xsl:text>"</xsl:text></xsl:param>
+ <xsl:param name="separator"><xsl:text>,</xsl:text></xsl:param>
+ <xsl:param name="remove"></xsl:param>
+ <xsl:variable name="doublequote">"</xsl:variable>
+
+ <xsl:value-of select="$quote"/>
+ <xsl:for-each select="$values">
+ <xsl:choose>
+ <xsl:when test="position() = 1">
+ <xsl:value-of select="translate(translate(.,$doublequote,''),$remove,'')"/>
+ </xsl:when>
+ <xsl:otherwise>
+ <xsl:value-of select="translate(translate(concat('; ',.),$doublequote,''),$remove,'')"/>
+ </xsl:otherwise>
+ </xsl:choose>
+ </xsl:for-each>
+ <xsl:value-of select="$quote"/>
+ <xsl:value-of select="$separator"/>
</xsl:template>
<!--IATI Dates could be found in @iso-date or in the node. This checks for the former, and if not available, uses the later-->
@@ -405,7 +349,7 @@
<xsl:template match="OrganisationType:codes">
<xsl:param name="code"/>
<xsl:choose>
- <xsl:when test="OrganisationType:code[@id=$code]"> - <xsl:value-of select="OrganisationType:code[@id=$code]"/></xsl:when>
+ <xsl:when test="OrganisationType:code[@id=$code]"><xsl:value-of select="OrganisationType:code[@id=$code]"/></xsl:when>
<xsl:otherwise></xsl:otherwise>
</xsl:choose>
</xsl:template>
Please sign in to comment.
Something went wrong with that request. Please try again.