gitphp 0.2.9.1 :: ckanext-ga-report.git/commitdiff

#167 Refactoring graph JS. Added mouseovers.

5 files changed: (show all)
ckanext/ga_report/public/scripts/ckanext_ga_reports.js (new)
ckanext/ga_report/templates/ga_report/ga_util.html
ckanext/ga_report/templates/ga_report/publisher/index.html
ckanext/ga_report/templates/ga_report/publisher/read.html
ckanext/ga_report/templates/ga_report/site/index.html

file:b/ckanext/ga_report/public/scripts/ckanext_ga_reports.js (new)


	var CKAN = CKAN \|\| {};
	CKAN.GA_Reports = {};

	CKAN.GA_Reports.render_rickshaw = function( css_name, data, mode, colorscheme ) {
	var palette = new Rickshaw.Color.Palette( { scheme: colorscheme } );
	$.each(data, function(i, object) {
	object['color'] = palette.color();
	});

	var graphElement = document.querySelector("#chart_"+css_name);

	var graph = new Rickshaw.Graph( {
	element: document.querySelector("#chart_"+css_name),
	renderer: mode,
	series: data ,
	height: 328
	});
	graph.render();
	var x_axis = new Rickshaw.Graph.Axis.Time( { graph: graph } );
	var y_axis = new Rickshaw.Graph.Axis.Y( {
	graph: graph,
	orientation: 'left',
	tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
	element: document.getElementById('y_axis_'+css_name),
	} );
	var legend = new Rickshaw.Graph.Legend( {
	element: document.querySelector('#legend_'+css_name),
	graph: graph
	} );
	var hoverDetail = new Rickshaw.Graph.HoverDetail( {
	graph: graph,
	formatter: function(series, x, y) {
	var date = '<span class="date">' + new Date(x * 1000).toUTCString() + '</span>';
	var swatch = '<span class="detail_swatch" style="background-color: ' + series.color + '"></span>';
	var content = swatch + series.name + ": " + parseInt(y) + '<br>' + date;
	return content;
	}
	} );
	};

file:a/ckanext/ga_report/templates/ga_report/ga_util.html -> file:b/ckanext/ga_report/templates/ga_report/ga_util.html

<html	<html
xmlns="http://www.w3.org/1999/xhtml"	xmlns="http://www.w3.org/1999/xhtml"
xmlns:i18n="http://genshi.edgewall.org/i18n"	xmlns:i18n="http://genshi.edgewall.org/i18n"
xmlns:py="http://genshi.edgewall.org/"	xmlns:py="http://genshi.edgewall.org/"
xmlns:xi="http://www.w3.org/2001/XInclude"	xmlns:xi="http://www.w3.org/2001/XInclude"
py:strip=""	py:strip=""
>	>

<select name="month" py:def="month_selector(current_month, months, day)">	<select name="month" py:def="month_selector(current_month, months, day)">
<option value='' py:attrs="{'selected': 'selected' if not current_month else None}">All months</option>	<option value='' py:attrs="{'selected': 'selected' if not current_month else None}">All months</option>
<py:for each="i, (val,desc) in enumerate(months)">	<py:for each="i, (val,desc) in enumerate(months)">
<option value='${val}' py:attrs="{'selected': 'selected' if current_month == val else None}">${desc}<py:if test="i == 0 and day"> (up to ${day})</py:if></option>	<option value='${val}' py:attrs="{'selected': 'selected' if current_month == val else None}">${desc}<py:if test="i == 0 and day"> (up to ${day})</py:if></option>
</py:for>	</py:for>
</select>	</select>


<table py:def="social_table(items, with_source=False)" class="table table-condensed table-bordered table-striped">	<table py:def="social_table(items, with_source=False)" class="table table-condensed table-bordered table-striped">
<tr>	<tr>
<th>Name</th>	<th>Name</th>
<th py:if="with_source">Source</th>	<th py:if="with_source">Source</th>
<th>Visits</th>	<th>Visits</th>
</tr>	</tr>
<py:for each="name, url, source, count in items">	<py:for each="name, url, source, count in items">
<tr>	<tr>
<td><a href="${url}">${name}</a></td>	<td><a href="${url}">${name}</a></td>
<td py:if="with_source">${source}</td>	<td py:if="with_source">${source}</td>
<td>${count}</td>	<td>${count}</td>
</tr>	</tr>
</py:for>	</py:for>
</table>	</table>


<div py:def="rickshaw_graph(items_json,id,mode='line',colorscheme='munin')">	<div py:def="rickshaw_graph(items_json,id,mode='line',colorscheme='munin')">
<div id="chart_container_$id" class="rickshaw_chart_container">	<div id="chart_container_$id" class="rickshaw_chart_container">
<div id="y_axis_$id" class="rickshaw_y_axis"></div>	<div id="y_axis_$id" class="rickshaw_y_axis"></div>
<div id="chart_$id" class="rickshaw_chart"></div>	<div id="chart_$id" class="rickshaw_chart"></div>
<div id="legend_$id" class="rickshaw_legend"></div>	<div id="legend_$id" class="rickshaw_legend"></div>
<script type="text/javascript">	<script type="text/javascript">
$(function() {	$(function() {
var all_series = ${items_json};	CKAN.GA_Reports.render_rickshaw('$id', $items_json, '$mode', '$colorscheme');
var palette = new Rickshaw.Color.Palette( { scheme: '$colorscheme' } );
$.each(all_series, function(i, object) {
object['color'] = palette.color();
});
var graph = new Rickshaw.Graph( {
element: document.querySelector("#chart_$id"),
renderer: '$mode',
series: all_series ,
height: 328
});
var x_axis = new Rickshaw.Graph.Axis.Time( { graph: graph } );
var y_axis = new Rickshaw.Graph.Axis.Y( {
graph: graph,
orientation: 'left',
tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
element: document.getElementById('y_axis_$id'),
} );
var legend = new Rickshaw.Graph.Legend( {
element: document.querySelector('#legend_$id'),
graph: graph
} );
graph.render();
});	});
</script>	</script>
</div>	</div>
</div>	</div>


<table py:def="stat_table(items, title='Views')" class="table table-condensed table-bordered table-striped">	<table py:def="stat_table(items, title='Views')" class="table table-condensed table-bordered table-striped">
<tr>	<tr>
<th>Name</th>	<th>Name</th>
<th>% ${title}</th>	<th>% ${title}</th>
</tr>	</tr>
<py:for each="name, value in items">	<py:for each="name, value in items">
<tr>	<tr>
<td>${name}</td>	<td>${name}</td>
<td>${value}</td>	<td>${value}</td>
</tr>	</tr>
</py:for>	</py:for>
</table>	</table>


<div py:def="usage_nav(active_name)" id="minornavigation">	<div py:def="usage_nav(active_name)" id="minornavigation">
<div id="minornavigation-bg-left">	<div id="minornavigation-bg-left">
<div id="minornavigation-bg-right">	<div id="minornavigation-bg-right">
<ul class="nav nav-pills">	<ul class="nav nav-pills">
<li py:attrs="{'class': 'active' if active_name=='Site-wide' else None}"><a py:attrs="{'class': 'active' if active_name=='Site-wide' else None}" href="${h.url_for(controller='ckanext.ga_report.controller:GaReport',action='index')}"><img src="/images/icons/page_white.png" height="16px" width="16px" alt="None" class="inline-icon "/> Site-wide</a></li>	<li py:attrs="{'class': 'active' if active_name=='Site-wide' else None}"><a py:attrs="{'class': 'active' if active_name=='Site-wide' else None}" href="${h.url_for(controller='ckanext.ga_report.controller:GaReport',action='index')}"><img src="/images/icons/page_white.png" height="16px" width="16px" alt="None" class="inline-icon "/> Site-wide</a></li>
<li py:attrs="{'class': 'active' if active_name=='Publishers' else None}">	<li py:attrs="{'class': 'active' if active_name=='Publishers' else None}">
<a py:attrs="{'class': 'active' if active_name=='Publishers' else None}" href="${h.url_for(controller='ckanext.ga_report.controller:GaDatasetReport',action='publishers')}"><img src="/images/icons/page_white.png" height="16px" width="16px" alt="None" class="inline-icon "/> Publishers</a>	<a py:attrs="{'class': 'active' if active_name=='Publishers' else None}" href="${h.url_for(controller='ckanext.ga_report.controller:GaDatasetReport',action='publishers')}"><img src="/images/icons/page_white.png" height="16px" width="16px" alt="None" class="inline-icon "/> Publishers</a>
</li>	</li>
<li py:attrs="{'class': 'active' if active_name=='Datasets' else None}">	<li py:attrs="{'class': 'active' if active_name=='Datasets' else None}">
<a py:attrs="{'class': 'active' if active_name=='Datasets' else None}" href="${h.url_for(controller='ckanext.ga_report.controller:GaDatasetReport',action='read')}"><img src="/images/icons/page_white.png" height="16px" width="16px" alt="None" class="inline-icon "/> Datasets</a>	<a py:attrs="{'class': 'active' if active_name=='Datasets' else None}" href="${h.url_for(controller='ckanext.ga_report.controller:GaDatasetReport',action='read')}"><img src="/images/icons/page_white.png" height="16px" width="16px" alt="None" class="inline-icon "/> Datasets</a>
</li>	</li>
</ul>	</ul>
</div>	</div>
</div>	</div>
</div>	</div>


</html>	</html>

file:a/ckanext/ga_report/templates/ga_report/publisher/index.html -> file:b/ckanext/ga_report/templates/ga_report/publisher/index.html

<html xmlns:py="http://genshi.edgewall.org/"	<html xmlns:py="http://genshi.edgewall.org/"
xmlns:i18n="http://genshi.edgewall.org/i18n"	xmlns:i18n="http://genshi.edgewall.org/i18n"
xmlns:xi="http://www.w3.org/2001/XInclude"	xmlns:xi="http://www.w3.org/2001/XInclude"
py:strip="">	py:strip="">

<xi:include href="../ga_util.html" />	<xi:include href="../ga_util.html" />

<py:def function="page_title">Usage by Publisher</py:def>	<py:def function="page_title">Usage by Publisher</py:def>

<py:match path="primarysidebar">	<py:match path="primarysidebar">
<li class="widget-container boxed widget_text">	<li class="widget-container boxed widget_text">
<h4>Download</h4>	<h4>Download</h4>
<p><center>	<p><center>
<a class="btn button btn-primary" href="${h.url_for(controller='ckanext.ga_report.controller:GaDatasetReport',action='publisher_csv',month=c.month or 'all')}">Download as CSV</a></center>	<a class="btn button btn-primary" href="${h.url_for(controller='ckanext.ga_report.controller:GaDatasetReport',action='publisher_csv',month=c.month or 'all')}">Download as CSV</a></center>
</p>	</p>
</li>	</li>
<xi:include href="../notes.html" />	<xi:include href="../notes.html" />
</py:match>	</py:match>

<py:def function="optional_head">	<py:def function="optional_head">
<link rel="stylesheet" type="text/css" href="/scripts/vendor/rickshaw.min.css"/>	<link rel="stylesheet" type="text/css" href="/scripts/vendor/rickshaw.min.css"/>
<link rel="stylesheet" type="text/css" href="/css/ga_report.css"/>	<link rel="stylesheet" type="text/css" href="/css/ga_report.css"/>
	<script type="text/javascript" src="/scripts/ckanext_ga_reports.js"></script>
<script type="text/javascript" src="/scripts/vendor/jquery.sparkline.modified.js"></script>	<script type="text/javascript" src="/scripts/vendor/jquery.sparkline.modified.js"></script>
<script type="text/javascript" src="/scripts/vendor/d3.v2.js"></script>	<script type="text/javascript" src="/scripts/vendor/d3.v2.js"></script>
<script type="text/javascript" src="/scripts/vendor/d3.layout.min.js"></script>	<script type="text/javascript" src="/scripts/vendor/d3.layout.min.js"></script>
<script type="text/javascript" src="/scripts/vendor/rickshaw.min.js"></script>	<script type="text/javascript" src="/scripts/vendor/rickshaw.min.js"></script>
</py:def>	</py:def>

<div py:match="content">	<div py:match="content">

<h1>Site Usage</h1>	<h1>Site Usage</h1>

${usage_nav('Publishers')}	${usage_nav('Publishers')}


<form class="form-inline" action="${h.url_for(controller='ckanext.ga_report.controller:GaDatasetReport',action='publishers')}" method="get">	<form class="form-inline" action="${h.url_for(controller='ckanext.ga_report.controller:GaDatasetReport',action='publishers')}" method="get">
<div class="controls">	<div class="controls">

${month_selector(c.month, c.months, c.day)}	${month_selector(c.month, c.months, c.day)}

<input class="btn button btn-primary" type='submit' value="Update"/>	<input class="btn button btn-primary" type='submit' value="Update"/>
</div>	</div>
</form>	</form>

${rickshaw_graph(c.top_publishers_graph,'publishers')}	${rickshaw_graph(c.top_publishers_graph,'publishers')}
<table class="table table-condensed table-bordered table-striped">	<table class="table table-condensed table-bordered table-striped">
<tr>	<tr>
<th>Publisher</th>	<th>Publisher</th>
<th>Dataset Views</th>	<th>Dataset Views</th>
</tr>	</tr>
<py:for each="publisher, views, visits in c.top_publishers">	<py:for each="publisher, views, visits in c.top_publishers">
<tr>	<tr>
<td>	<td>
${h.link_to(publisher.title, h.url_for(controller='ckanext.ga_report.controller:GaDatasetReport', action='read_publisher', id=publisher.name) + (("?month=" + c.month) if c.month else ''))}	${h.link_to(publisher.title, h.url_for(controller='ckanext.ga_report.controller:GaDatasetReport', action='read_publisher', id=publisher.name) + (("?month=" + c.month) if c.month else ''))}
</td>	</td>
<td>${views}</td>	<td>${views}</td>
</tr>	</tr>
</py:for>	</py:for>
</table>	</table>


</div>	</div>

<xi:include href="../../layout.html" />	<xi:include href="../../layout.html" />

<py:def function="optional_footer">	<py:def function="optional_footer">
<script type='text/javascript'>	<script type='text/javascript'>
$('.nav-tabs li a').click(function (e) {	$('.nav-tabs li a').click(function (e) {
e.preventDefault();	e.preventDefault();
$(this).tab('show');	$(this).tab('show');
})	})
</script>	</script>
</py:def>	</py:def>

</html>	</html>

file:a/ckanext/ga_report/templates/ga_report/publisher/read.html -> file:b/ckanext/ga_report/templates/ga_report/publisher/read.html

<html xmlns:py="http://genshi.edgewall.org/"	<html xmlns:py="http://genshi.edgewall.org/"
xmlns:i18n="http://genshi.edgewall.org/i18n"	xmlns:i18n="http://genshi.edgewall.org/i18n"
xmlns:xi="http://www.w3.org/2001/XInclude"	xmlns:xi="http://www.w3.org/2001/XInclude"
py:strip="">	py:strip="">

<xi:include href="../ga_util.html" />	<xi:include href="../ga_util.html" />

<py:def function="page_title">Usage by Dataset</py:def>	<py:def function="page_title">Usage by Dataset</py:def>

<py:def function="optional_head">	<py:def function="optional_head">
<link rel="stylesheet" type="text/css" href="/scripts/vendor/rickshaw.min.css"/>	<link rel="stylesheet" type="text/css" href="/scripts/vendor/rickshaw.min.css"/>
<link rel="stylesheet" type="text/css" href="/css/ga_report.css"/>	<link rel="stylesheet" type="text/css" href="/css/ga_report.css"/>
	<script type="text/javascript" src="/scripts/ckanext_ga_reports.js"></script>
<script type="text/javascript" src="/scripts/vendor/jquery.sparkline.modified.js"></script>	<script type="text/javascript" src="/scripts/vendor/jquery.sparkline.modified.js"></script>
<script type="text/javascript" src="/scripts/vendor/d3.v2.js"></script>	<script type="text/javascript" src="/scripts/vendor/d3.v2.js"></script>
<script type="text/javascript" src="/scripts/vendor/d3.layout.min.js"></script>	<script type="text/javascript" src="/scripts/vendor/d3.layout.min.js"></script>
<script type="text/javascript" src="/scripts/vendor/rickshaw.min.js"></script>	<script type="text/javascript" src="/scripts/vendor/rickshaw.min.js"></script>
</py:def>	</py:def>

<py:match path="primarysidebar">	<py:match path="primarysidebar">
<li class="widget-container boxed widget_text">	<li class="widget-container boxed widget_text">
<h4>Download</h4>	<h4>Download</h4>
<p><center>	<p><center>
<a class="btn button btn-primary" href="${h.url_for(controller='ckanext.ga_report.controller:GaDatasetReport',action='dataset_csv',id=c.publisher_name or 'all',month=c.month or 'all')}">Download as CSV</a></center>	<a class="btn button btn-primary" href="${h.url_for(controller='ckanext.ga_report.controller:GaDatasetReport',action='dataset_csv',id=c.publisher_name or 'all',month=c.month or 'all')}">Download as CSV</a></center>
</p>	</p>
</li>	</li>
<xi:include href="../notes.html" />	<xi:include href="../notes.html" />
</py:match>	</py:match>


<div py:match="content">	<div py:match="content">
<h1>Site Usage</h1>	<h1>Site Usage</h1>

${usage_nav('Datasets')}	${usage_nav('Datasets')}

<form class="form-inline" action="${h.url_for(controller='ckanext.ga_report.controller:GaDatasetReport',action='read')}" method="get">	<form class="form-inline" action="${h.url_for(controller='ckanext.ga_report.controller:GaDatasetReport',action='read')}" method="get">
<div class="controls">	<div class="controls">

${month_selector(c.month, c.months, c.day)}	${month_selector(c.month, c.months, c.day)}

<select name="publisher">	<select name="publisher">
<option value='' py:attrs="{'selected': 'selected' if not c.publisher else None}">All publishers</option>	<option value='' py:attrs="{'selected': 'selected' if not c.publisher else None}">All publishers</option>
<py:for each="val,desc in c.publishers">	<py:for each="val,desc in c.publishers">
<option value='${val}' py:attrs="{'selected': 'selected' if c.publisher_name == val else None}">${desc}</option>	<option value='${val}' py:attrs="{'selected': 'selected' if c.publisher_name == val else None}">${desc}</option>
</py:for>	</py:for>
</select>	</select>
<input class="btn button btn-primary" type='submit' value="Update"/>	<input class="btn button btn-primary" type='submit' value="Update"/>
</div>	</div>
</form>	</form>

<h3 py:if="c.publisher"><a href="${h.url_for(controller='ckanext.dgu.controllers.publisher:PublisherController',action='read',id=c.publisher.name)}">${c.publisher.title}</a></h3>	<h3 py:if="c.publisher"><a href="${h.url_for(controller='ckanext.dgu.controllers.publisher:PublisherController',action='read',id=c.publisher.name)}">${c.publisher.title}</a></h3>

<p py:if="not c.top_packages">No page views in this period</p>	<p py:if="not c.top_packages">No page views in this period</p>

<py:if test="c.top_packages">	<py:if test="c.top_packages">
${rickshaw_graph(c.graph_data,'dataset-downloads',debug=True)}	${rickshaw_graph(c.graph_data,'dataset-downloads',debug=True)}
<table class="table table-condensed table-bordered table-striped">	<table class="table table-condensed table-bordered table-striped">
<tr>	<tr>
<th>Dataset</th>	<th>Dataset</th>
<th>Views</th>	<th>Views</th>
<th>Downloads</th>	<th>Downloads</th>
</tr>	</tr>
<py:for each="package, views, visits,downloads in c.top_packages">	<py:for each="package, views, visits,downloads in c.top_packages">
<tr>	<tr>
<td>	<td>
${h.link_to(package.title or package.name, h.url_for(controller='package', action='read', id=package.name))}	${h.link_to(package.title or package.name, h.url_for(controller='package', action='read', id=package.name))}
</td>	</td>
<td>${views}</td>	<td>${views}</td>
<td>${downloads}</td>	<td>${downloads}</td>
</tr>	</tr>
</py:for>	</py:for>
</table>	</table>
</py:if>	</py:if>