Refactor to keep pace with hashtab change
Refactor to keep pace with hashtab change

var CKAN = CKAN || {}; var CKAN = CKAN || {};
CKAN.GA_Reports = {}; CKAN.GA_Reports = {};
   
CKAN.GA_Reports.render_rickshaw = function( css_name, data, mode, colorscheme ) { CKAN.GA_Reports.render_rickshaw = function( css_name, data, mode, colorscheme ) {
var graphLegends = $('#graph-legend-container'); var graphLegends = $('#graph-legend-container');
   
function renderError(alertClass,alertText,legendText) { function renderError(alertClass,alertText,legendText) {
$("#chart_"+css_name) $("#chart_"+css_name)
.html( '<div class="alert '+alertClass+'">'+alertText+'</div>') .html( '<div class="alert '+alertClass+'">'+alertText+'</div>')
.closest('.rickshaw_chart_container').css('height',50); .closest('.rickshaw_chart_container').css('height',50);
var myLegend = $('<div id="legend_'+css_name+'"/>') var myLegend = $('<div id="legend_'+css_name+'"/>')
.html(legendText) .html(legendText)
.appendTo(graphLegends); .appendTo(graphLegends);
} }
   
if (!Modernizr.svg) { if (!Modernizr.svg) {
renderError('','Your browser does not support vector graphics. No graphs can be rendered.','(Graph cannot be rendered)'); renderError('','Your browser does not support vector graphics. No graphs can be rendered.','(Graph cannot be rendered)');
return; return;
} }
if (data.length==0) { if (data.length==0) {
renderError('alert-info','There is not enough data to render a graph.','(No graph available)'); renderError('alert-info','There is not enough data to render a graph.','(No graph available)');
return return
} }
var myLegend = $('<div id="legend_'+css_name+'"/>').appendTo(graphLegends); var myLegend = $('<div id="legend_'+css_name+'"/>').appendTo(graphLegends);
   
var palette = new Rickshaw.Color.Palette( { scheme: colorscheme } ); var palette = new Rickshaw.Color.Palette( { scheme: colorscheme } );
$.each(data, function(i, object) { $.each(data, function(i, object) {
object['color'] = palette.color(); object['color'] = palette.color();
}); });
// Rickshaw renders the legend in reverse order... // Rickshaw renders the legend in reverse order...
data.reverse(); data.reverse();
   
var graphElement = document.querySelector("#chart_"+css_name); var graphElement = document.querySelector("#chart_"+css_name);
   
var graph = new Rickshaw.Graph( { var graph = new Rickshaw.Graph( {
element: document.querySelector("#chart_"+css_name), element: document.querySelector("#chart_"+css_name),
renderer: mode, renderer: mode,
series: data , series: data ,
height: 328 height: 328
}); });
var x_axis = new Rickshaw.Graph.Axis.Time( { var x_axis = new Rickshaw.Graph.Axis.Time( {
graph: graph graph: graph
} ); } );
var y_axis = new Rickshaw.Graph.Axis.Y( { var y_axis = new Rickshaw.Graph.Axis.Y( {
graph: graph, graph: graph,
orientation: 'left', orientation: 'left',
tickFormat: Rickshaw.Fixtures.Number.formatKMBT, tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
element: document.getElementById('y_axis_'+css_name) element: document.getElementById('y_axis_'+css_name)
} ); } );
var legend = new Rickshaw.Graph.Legend( { var legend = new Rickshaw.Graph.Legend( {
element: document.querySelector('#legend_'+css_name), element: document.querySelector('#legend_'+css_name),
graph: graph graph: graph
} ); } );
var shelving = new Rickshaw.Graph.Behavior.Series.Toggle( { var shelving = new Rickshaw.Graph.Behavior.Series.Toggle( {
graph: graph, graph: graph,
legend: legend legend: legend
} ); } );
myLegend.prepend('<div class="instructions">Click on a series below to isolate its graph:</div>'); myLegend.prepend('<div class="instructions">Click on a series below to isolate its graph:</div>');
graph.render(); graph.render();
}; };
   
CKAN.GA_Reports.bind_sparklines = function() { CKAN.GA_Reports.bind_sparklines = function() {
/* /*
* Bind to the 'totals' tab being on screen, when the * Bind to the 'totals' tab being on screen, when the
* Sparkline graphs should be drawn. * Sparkline graphs should be drawn.
* Note that they cannot be drawn sooner. * Note that they cannot be drawn sooner.
*/ */
var created = false; var created = false;
$('a[href="#totals"]').on( $('a[href="#totals"]').on(
'shown', 'shown',
function() { function() {
if (!created) { if (!created) {
var sparkOptions = { var sparkOptions = {
enableTagOptions: true, enableTagOptions: true,
type: 'line', type: 'line',
width: 100, width: 100,
height: 26, height: 26,
chartRangeMin: 0, chartRangeMin: 0,
spotColor: '', spotColor: '',
maxSpotColor: '', maxSpotColor: '',
minSpotColor: '', minSpotColor: '',
highlightSpotColor: '#000000', highlightSpotColor: '#000000',
lineColor: '#3F8E6D', lineColor: '#3F8E6D',
fillColor: '#B7E66B' fillColor: '#B7E66B'
}; };
$('.sparkline').sparkline('html',sparkOptions); $('.sparkline').sparkline('html',sparkOptions);
created = true; created = true;
} }
$.sparkline_display_visible(); $.sparkline_display_visible();
} }
); );
}; };
   
CKAN.GA_Reports.bind_sidebar = function() { CKAN.GA_Reports.bind_sidebar = function() {
/* /*
* Bind to changes in the tab behaviour: * Bind to changes in the tab behaviour:
* Show the correct rickshaw graph in the sidebar. * Show the correct rickshaw graph in the sidebar.
* Not to be called before all graphs load. * Not to be called before all graphs load.
*/ */
$('a[data-toggle="hashtab"]').on( $('a[data-toggle="tab"]').on(
'shown', 'shown',
function(e) { function(e) {
var href = $(e.target).attr('href'); var href = $(e.target).attr('href');
var pane = $(href); var pane = $(href);
if (!pane.length) { console.err('bad href',href); return; } if (!pane.length) { console.err('bad href',href); return; }
var legend_name = "none"; var legend_name = "none";
var graph = pane.find('.rickshaw_chart'); var graph = pane.find('.rickshaw_chart');
if (graph.length) { if (graph.length) {
legend_name = graph.attr('id').replace('chart_',''); legend_name = graph.attr('id').replace('chart_','');
} }
legend_name = '#legend_'+legend_name; legend_name = '#legend_'+legend_name;
$('#graph-legend-container > *').hide(); $('#graph-legend-container > *').hide();
$('#graph-legend-container .instructions').show(); $('#graph-legend-container .instructions').show();
$(legend_name).show(); $(legend_name).show();
} }
); );
/* The first tab might already have been shown */ /* The first tab might already have been shown */
$('li.active > a[data-toggle="hashtab"]').trigger('shown'); $('li.active > a[data-toggle="tab"]').trigger('shown');
}; };
   
CKAN.GA_Reports.bind_month_selector = function() { CKAN.GA_Reports.bind_month_selector = function() {
var handler = function(e) { var handler = function(e) {
var target = $(e.delegateTarget); var target = $(e.delegateTarget);
var form = target.closest('form'); var form = target.closest('form');
var url = form.attr('action')+'?month='+target.val()+window.location.hash; var url = form.attr('action')+'?month='+target.val()+window.location.hash;
window.location = url; window.location = url;
}; };
var selectors = $('select[name="month"]'); var selectors = $('select[name="month"]');
assert(selectors.length>0); assert(selectors.length>0);
selectors.bind('change', handler); selectors.bind('change', handler);
}; };
   
<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">Site usage</py:def> <py:def function="page_title">Site usage</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?1"/> <link rel="stylesheet" type="text/css" href="/css/ga_report.css?1"/>
<script type="text/javascript" src="/scripts/modernizr-2.6.2.custom.js"></script> <script type="text/javascript" src="/scripts/modernizr-2.6.2.custom.js"></script>
<script type="text/javascript" src="/scripts/ckanext_ga_reports.js?1"></script> <script type="text/javascript" src="/scripts/ckanext_ga_reports.js?1"></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/rickshaw_ie7_shim.js"></script> <script type="text/javascript" src="/scripts/rickshaw_ie7_shim.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="breadcrumbs"> <py:match path="breadcrumbs">
<li><a href="/data/site-usage">Site Analytics</a></li> <li><a href="/data/site-usage">Site Analytics</a></li>
<li><a href="/data/site-usage">Site-wide</a></li> <li><a href="/data/site-usage">Site-wide</a></li>
</py:match> </py:match>
   
<div py:match="content"> <div py:match="content">
<div class="row"> <div class="row">
<div class="col-sm-7 col-md-8 col-lg-9"> <div class="col-sm-7 col-md-8 col-lg-9">
<py:with vars="download_link=h.url_for(controller='ckanext.ga_report.controller:GaReport',action='csv',month=c.month or 'all')"> <py:with vars="download_link=h.url_for(controller='ckanext.ga_report.controller:GaReport',action='csv',month=c.month or 'all')">
<a class="btn button btn-primary btn-sm pull-right" href="${download_link}"><i class="icon-download"></i>&nbsp; Download as CSV</a> <a class="btn button btn-primary btn-sm pull-right" href="${download_link}"><i class="icon-download"></i>&nbsp; Download as CSV</a>
</py:with> </py:with>
<h1>Site Usage</h1> <h1>Site Usage</h1>
</div> </div>
<div class="col-sm-5 col-md-4 col-lg-3"> <div class="col-sm-5 col-md-4 col-lg-3">
<div class="panel panel-default"> <div class="panel panel-default">
<div class="panel-heading"><strong>Jump To...</strong></div> <div class="panel-heading"><strong>Jump To...</strong></div>
<div class="panel-body"> <div class="panel-body">
<ul> <ul>
<li><a href="/data/site-usage/publisher">Publisher Usage Statistics</a></li> <li><a href="/data/site-usage/publisher">Publisher Usage Statistics</a></li>
<li><a href="/data/site-usage/dataset">Dataset Usage Statistics</a></li> <li><a href="/data/site-usage/dataset">Dataset Usage Statistics</a></li>
</ul> </ul>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
   
<div class="row" style="background: #fff;"> <div class="row" style="background: #fff;">
<div class="col-md-4"> <div class="col-md-4">
<div class="whitebox"> <div class="whitebox">
<strong>Graph Legend</strong> <strong>Graph Legend</strong>
<div id="graph-legend-container"> <div id="graph-legend-container">
<div style="display: none;" id="legend_none">(No graph is loaded)</div> <div style="display: none;" id="legend_none">(No graph is loaded)</div>
</div> </div>
</div> </div>
</div> </div>
<div class="col-md-8"> <div class="col-md-8">
<div class="whitebox"> <div class="whitebox">
<div class="tabbable"> <div class="tabbable">
<ul class="nav nav-tabs"> <ul class="nav nav-tabs">
<li class="active"><a href="#totals" data-toggle="hashtab">Totals</a></li> <li class="active"><a href="#totals" data-hash="totals" data-toggle="tab">Totals</a></li>
<li class="dropdown"> <li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Browsers <a href="#" class="dropdown-toggle" data-toggle="dropdown">Browsers
<b class="caret"></b></a> <b class="caret"></b></a>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
<li><a href="#browsers_names" data-toggle="hashtab">Browsers</a></li> <li><a href="#browsers_names" data-hash="browsers_names" data-toggle="tab">Browsers</a></li>
<li><a href="#browsers_versions" data-toggle="hashtab">Versions</a></li> <li><a href="#browsers_versions" data-hash="browsers_versions" data-toggle="tab">Versions</a></li>
</ul> </ul>
</li> </li>
<li class="dropdown"> <li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Operating Systems <a href="#" class="dropdown-toggle" data-toggle="dropdown">Operating Systems
<b class="caret"></b></a> <b class="caret"></b></a>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
<li><a href="#os" data-toggle="hashtab">Operating Systems</a></li> <li><a href="#os" data-hash="os" data-toggle="tab">Operating Systems</a></li>
<li><a href="#os_versions" data-toggle="hashtab">Versions</a></li> <li><a href="#os_versions" data-hash="os_versions" data-toggle="tab">Versions</a></li>
</ul> </ul>
</li> </li>
<li class="dropdown"> <li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Social <a href="#" class="dropdown-toggle" data-toggle="dropdown">Social
<b class="caret"></b></a> <b class="caret"></b></a>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
<li><a href="#social_networks" data-toggle="hashtab">All networks</a></li> <li><a href="#social_networks" data-hash="social_networks" data-toggle="tab">All networks</a></li>
<li><a href="#social_referrals_totals" data-toggle="hashtab">Referral links</a></li> <li><a href="#social_referrals_totals" data-hash="social_referrals_totals" data-toggle="tab">Referral links</a></li>
</ul> </ul>
</li> </li>
<li><a href="#languages" data-toggle="hashtab">Languages</a></li> <li><a href="#languages" data-hash="languages" data-toggle="tab">Languages</a></li>
<li><a href="#country" data-toggle="hashtab">Country</a></li> <li><a href="#country" data-hash="country" data-toggle="tab">Country</a></li>
</ul> </ul>
<div class="tab-content"> <div class="tab-content">
<div class="tab-pane active" id="totals"> <div class="tab-pane active" id="totals">
<form class="form-inline" action="${h.url_for(controller='ckanext.ga_report.controller:GaReport',action='index')}" method="get"> <form class="form-inline" action="${h.url_for(controller='ckanext.ga_report.controller:GaReport',action='index')}" method="get">
<h4 class="ga-reports-heading">Show stats table for:</h4> <h4 class="ga-reports-heading">Show stats table for:</h4>
${month_selector(c.month, c.months, c.day)} ${month_selector(c.month, c.months, c.day)}
</form> </form>
<table class="ga-reports-table table table-condensed table-bordered table-striped"> <table class="ga-reports-table table table-condensed table-bordered table-striped">
<tr> <tr>
<th>Name</th> <th>Name</th>
<th class="td-numeric">Value</th> <th class="td-numeric">Value</th>
<th>History</th> <th>History</th>
</tr> </tr>
<py:for each="name, value, graph in c.global_totals"> <py:for each="name, value, graph in c.global_totals">
<tr> <tr>
<td>${name}</td> <td>${name}</td>
<td class="td-numeric">${value}</td> <td class="td-numeric">${value}</td>
<td class="sparkline-cell"> <td class="sparkline-cell">
<span class="sparkline" sparkTooltips="${','.join([x for x,y in graph])}"> <span class="sparkline" sparkTooltips="${','.join([x for x,y in graph])}">
${','.join([y for x,y in graph])} ${','.join([y for x,y in graph])}
</span> </span>
</td> </td>
</tr> </tr>
</py:for> </py:for>
</table> </table>
</div> </div>
<div class="tab-pane" id="browsers_versions"> <div class="tab-pane" id="browsers_versions">
${rickshaw_graph(c.browser_versions_graph,'browser-versions',mode='stack')} ${rickshaw_graph(c.browser_versions_graph,'browser-versions',mode='stack')}
<hr/> <hr/>
<p>Note: Where a browser has a large number of versions, these have been grouped together.</p> <p>Note: Where a browser has a large number of versions, these have been grouped together.</p>
<form class="form-inline" action="${h.url_for(controller='ckanext.ga_report.controller:GaReport',action='index')}" method="get"> <form class="form-inline" action="${h.url_for(controller='ckanext.ga_report.controller:GaReport',action='index')}" method="get">
<h4 class="ga-reports-heading">Show stats table for:</h4> <h4 class="ga-reports-heading">Show stats table for:</h4>
${month_selector(c.month, c.months, c.day)} ${month_selector(c.month, c.months, c.day)}
</form> </form>
<hr/> <hr/>
${stat_table(c.browser_versions)} ${stat_table(c.browser_versions)}
</div> </div>
<div class="tab-pane" id="browsers_names"> <div class="tab-pane" id="browsers_names">
${rickshaw_graph(c.browsers_graph,'browsers',mode='stack')} ${rickshaw_graph(c.browsers_graph,'browsers',mode='stack')}
<hr/> <hr/>
<form class="form-inline" action="${h.url_for(controller='ckanext.ga_report.controller:GaReport',action='index')}" method="get"> <form class="form-inline" action="${h.url_for(controller='ckanext.ga_report.controller:GaReport',action='index')}" method="get">
<h4 class="ga-reports-heading">Show stats table for:</h4> <h4 class="ga-reports-heading">Show stats table for:</h4>
${month_selector(c.month, c.months, c.day)} ${month_selector(c.month, c.months, c.day)}
</form> </form>
<hr/> <hr/>
${stat_table(c.browsers)} ${stat_table(c.browsers)}
</div> </div>
<div class="tab-pane" id="os"> <div class="tab-pane" id="os">
${rickshaw_graph(c.os_graph,'os',mode='stack')} ${rickshaw_graph(c.os_graph,'os',mode='stack')}
<hr/> <hr/>
<form class="form-inline" action="${h.url_for(controller='ckanext.ga_report.controller:GaReport',action='index')}" method="get"> <form class="form-inline" action="${h.url_for(controller='ckanext.ga_report.controller:GaReport',action='index')}" method="get">
<h4 class="ga-reports-heading">Show stats table for:</h4> <h4 class="ga-reports-heading">Show stats table for:</h4>
${month_selector(c.month, c.months, c.day)} ${month_selector(c.month, c.months, c.day)}
</form> </form>
<hr/> <hr/>
${stat_table(c.os)} ${stat_table(c.os)}
</div> </div>
<div class="tab-pane" id="os_versions"> <div class="tab-pane" id="os_versions">
${rickshaw_graph(c.os_versions_graph,'os_versions',mode='stack')} ${rickshaw_graph(c.os_versions_graph,'os_versions',mode='stack')}
<hr/> <hr/>
<form class="form-inline" action="${h.url_for(controller='ckanext.ga_report.controller:GaReport',action='index')}" method="get"> <form class="form-inline" action="${h.url_for(controller='ckanext.ga_report.controller:GaReport',action='index')}" method="get">
<h4 class="ga-reports-heading">Show stats table for:</h4> <h4 class="ga-reports-heading">Show stats table for:</h4>
${month_selector(c.month, c.months, c.day)} ${month_selector(c.month, c.months, c.day)}
</form> </form>
<hr/> <hr/>
${stat_table(c.os_versions)} ${stat_table(c.os_versions)}</