#167 Togglable graph legend. Disabled mouseover.
--- a/ckanext/ga_report/ga_model.py
+++ b/ckanext/ga_report/ga_model.py
@@ -214,7 +214,7 @@
'pageviews': views[key],
'visits': visits[key],
'department_id': publisher,
- 'package_id': publisher
+ 'package_id': package
}
model.Session.add(GA_Url(**values))
model.Session.commit()
--- a/ckanext/ga_report/public/css/ga_report.css
+++ b/ckanext/ga_report/public/css/ga_report.css
@@ -16,16 +16,8 @@
bottom: 0;
}
.rickshaw_legend {
- position: absolute;
- right: 0;
- top: 0;
- margin-left: 15px;
- padding: 0 5px;
background: transparent;
- max-width: 150px;
- overflow: hidden;
- background: rgba(0,0,0,0.05);
- border-radius:5px;
+ width: 100%;
}
.rickshaw_y_axis {
position: absolute;
--- a/ckanext/ga_report/public/scripts/ckanext_ga_reports.js
+++ b/ckanext/ga_report/public/scripts/ckanext_ga_reports.js
@@ -1,8 +1,20 @@
-
var CKAN = CKAN || {};
CKAN.GA_Reports = {};
CKAN.GA_Reports.render_rickshaw = function( css_name, data, mode, colorscheme ) {
+ var graphLegends = $('#graph-legend-container');
+
+ if (!Modernizr.svg) {
+ $("#chart_"+css_name)
+ .html( '<div class="alert">Your browser does not support vector graphics. No graphs can be rendered.</div>')
+ .closest('.rickshaw_chart_container').css('height',50);
+ var myLegend = $('<div id="legend_'+css_name+'"/>')
+ .html('(Graph cannot be rendered)')
+ .appendTo(graphLegends);
+ return;
+ }
+ var myLegend = $('<div id="legend_'+css_name+'"/>').appendTo(graphLegends);
+
var palette = new Rickshaw.Color.Palette( { scheme: colorscheme } );
$.each(data, function(i, object) {
object['color'] = palette.color();
@@ -21,22 +33,86 @@
graph: graph,
orientation: 'left',
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( {
element: document.querySelector('#legend_'+css_name),
graph: graph
} );
- var hoverDetail = new Rickshaw.Graph.HoverDetail( {
+ var shelving = new Rickshaw.Graph.Behavior.Series.Toggle( {
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;
- }
+ legend: legend
} );
graph.render();
};
+CKAN.GA_Reports.bind_sparklines = function() {
+ /*
+ * Bind to the 'totals' tab being on screen, when the
+ * Sparkline graphs should be drawn.
+ * Note that they cannot be drawn sooner.
+ */
+ $('a[href="#totals"]').on(
+ 'shown',
+ function() {
+ var sparkOptions = {
+ enableTagOptions: true,
+ type: 'line',
+ width: 100,
+ height: 26,
+ chartRangeMin: 0,
+ spotColor: '',
+ maxSpotColor: '',
+ minSpotColor: '',
+ highlightSpotColor: '000000',
+ lineColor: '3F8E6D',
+ fillColor: 'B7E66B'
+ };
+ $('.sparkline').sparkline('html',sparkOptions);
+ }
+ );
+};
+CKAN.GA_Reports.bind_sidebar = function() {
+ /*
+ * Bind to changes in the tab behaviour:
+ * Show the correct rickshaw graph in the sidebar.
+ * Not to be called before all graphs load.
+ */
+ $('a[data-toggle="hashchange"]').on(
+ 'shown',
+ function(e) {
+ var href = $(e.target).attr('href');
+ var pane = $(href);
+ if (!pane.length) { console.err('bad href',href); return; }
+ var legend_name = "none";
+ var graph = pane.find('.rickshaw_chart');
+ if (graph.length) {
+ legend_name = graph.attr('id').replace('chart_','');
+ }
+ legend_name = '#legend_'+legend_name;
+ $('#graph-legend-container > *').hide();
+ $(legend_name).show();
+ }
+ );
+};
+
+/*
+ * Custom bootstrap plugin for handling data-toggle="hashchange".
+ * Behaves like data-toggle="tab" but I respond to the hashchange.
+ * Page state is memo-ized in the URL this way. Why doesn't Bootstrap do this?
+ */
+$(function() {
+ var mapping = {};
+ $('a[data-toggle="hashchange"]').each(
+ function(i,link) {
+ link = $(link);
+ mapping[link.attr('href')] = link;
+ }
+ );
+ $(window).hashchange(function() {
+ var link = mapping[window.location.hash];
+ if (link) { link.tab('show'); }
+ });
+});
+
--- /dev/null
+++ b/ckanext/ga_report/public/scripts/rickshaw_ie7_shim.js
@@ -1,1 +1,109 @@
+/*
+ * Collection of shims to allow d3 and Rickshaw to load, error-free
+ * (but ultimately unusable) on Internet Explorer 7. The browser's
+ * API lacks several crucial functions which these libraries depend
+ * upon to load; we try to hide these errors from the user.
+ *
+ * With thanks to Array functions from:
+ * http://stackoverflow.com/questions/2790001/fixing-javascript-array-functions-in-internet-explorer-indexof-foreach-etc
+ *
+ * Use (Modernizr.svg==true) to detect whether it's okay to draw a graph.
+ */
+'use strict';
+window.Element = window.Element || {'prototype': {}};
+window.CSSStyleDeclaration = window.CSSStyleDeclaration || {'prototype':{}};
+
+// Add ECMA262-5 method binding if not supported natively
+//
+if (!('bind' in Function.prototype)) {
+ Function.prototype.bind= function(owner) {
+ var that= this;
+ if (arguments.length<=1) {
+ return function() {
+ return that.apply(owner, arguments);
+ };
+ } else {
+ var args= Array.prototype.slice.call(arguments, 1);
+ return function() {
+ return that.apply(owner, arguments.length===0? args : args.concat(Array.prototype.slice.call(arguments)));
+ };
+ }
+ };
+}
+
+// Add ECMA262-5 string trim if not supported natively
+//
+if (!('trim' in String.prototype)) {
+ String.prototype.trim= function() {
+ return this.replace(/^\s+/, '').replace(/\s+$/, '');
+ };
+}
+
+// Add ECMA262-5 Array methods if not supported natively
+//
+if (!('indexOf' in Array.prototype)) {
+ Array.prototype.indexOf= function(find, i /*opt*/) {
+ if (i===undefined) i= 0;
+ if (i<0) i+= this.length;
+ if (i<0) i= 0;
+ for (var n= this.length; i<n; i++)
+ if (i in this && this[i]===find)
+ return i;
+ return -1;
+ };
+}
+if (!('lastIndexOf' in Array.prototype)) {
+ Array.prototype.lastIndexOf= function(find, i /*opt*/) {
+ if (i===undefined) i= this.length-1;
+ if (i<0) i+= this.length;
+ if (i>this.length-1) i= this.length-1;
+ for (i++; i-->0;) /* i++ because from-argument is sadly inclusive */
+ if (i in this && this[i]===find)
+ return i;
+ return -1;
+ };
+}
+if (!('forEach' in Array.prototype)) {
+ Array.prototype.forEach= function(action, that /*opt*/) {
+ for (var i= 0, n= this.length; i<n; i++)
+ if (i in this)
+ action.call(that, this[i], i, this);
+ };
+}
+if (!('map' in Array.prototype)) {
+ Array.prototype.map= function(mapper, that /*opt*/) {
+ var other= new Array(this.length);
+ for (var i= 0, n= this.length; i<n; i++)
+ if (i in this)
+ other[i]= mapper.call(that, this[i], i, this);
+ return other;
+ };
+}
+if (!('filter' in Array.prototype)) {
+ Array.prototype.filter= function(filter, that /*opt*/) {
+ var other= [], v;
+ for (var i=0, n= this.length; i<n; i++)
+ if (i in this && filter.call(that, v= this[i], i, this))
+ other.push(v);
+ return other;
+ };
+}
+if (!('every' in Array.prototype)) {
+ Array.prototype.every= function(tester, that /*opt*/) {
+ for (var i= 0, n= this.length; i<n; i++)
+ if (i in this && !tester.call(that, this[i], i, this))
+ return false;
+ return true;
+ };
+}
+if (!('some' in Array.prototype)) {
+ Array.prototype.some= function(tester, that /*opt*/) {
+ for (var i= 0, n= this.length; i<n; i++)
+ if (i in this && tester.call(that, this[i], i, this))
+ return true;
+ return false;
+ };
+}
+
+
--- a/ckanext/ga_report/templates/ga_report/ga_util.html
+++ b/ckanext/ga_report/templates/ga_report/ga_util.html
@@ -34,7 +34,6 @@
<div id="chart_container_$id" class="rickshaw_chart_container">
<div id="y_axis_$id" class="rickshaw_y_axis"></div>
<div id="chart_$id" class="rickshaw_chart"></div>
- <div id="legend_$id" class="rickshaw_legend"></div>
<script type="text/javascript">
$(function() {
CKAN.GA_Reports.render_rickshaw('$id', $items_json, '$mode', '$colorscheme');
--- a/ckanext/ga_report/templates/ga_report/notes.html
+++ b/ckanext/ga_report/templates/ga_report/notes.html
@@ -7,7 +7,7 @@
<h4>Notes</h4>
<ul>
<li>"Views" is the number of times a page was loaded in users' browsers.</li>
- <li>"Downloads" is the number of times a user has clicked to download either an original or cached resource for a particular dataset. Download information is only available from 2nd December 2012, 'No data' is shown for records before that date.</li>
+ <li>"Downloads" is the number of times a user has clicked to download either an original or cached resource for a particular dataset. Download information is only available from 2nd December 2012; 'No data' is shown for records before that date.</li>
<li>These usage statistics are confined to users with javascript enabled, which excludes web crawlers and API calls.</li>
<li>The results are not shown when the number of views/visits is tiny. Where these relate to site pages, results are available in full in the CSV download. Where these relate to users' web browser information, results are not disclosed, for privacy reasons.</li>
</ul>
--- a/ckanext/ga_report/templates/ga_report/publisher/index.html
+++ b/ckanext/ga_report/templates/ga_report/publisher/index.html
@@ -13,6 +13,11 @@
<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>
</p>
+ </li>
+ <li class="widget-container boxed widget_text">
+ <h4>Graph Legend</h4>
+ <div id="graph-legend-container">
+ </div>
</li>
<xi:include href="../notes.html" />
</py:match>
--- a/ckanext/ga_report/templates/ga_report/publisher/read.html
+++ b/ckanext/ga_report/templates/ga_report/publisher/read.html
@@ -23,6 +23,11 @@
<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>
</p>
+ </li>
+ <li class="widget-container boxed widget_text">
+ <h4>Graph Legend</h4>
+ <div id="graph-legend-container">
+ </div>
</li>
<xi:include href="../notes.html" />
</py:match>
--- a/ckanext/ga_report/templates/ga_report/site/index.html
+++ b/ckanext/ga_report/templates/ga_report/site/index.html
@@ -12,6 +12,7 @@
<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/rickshaw_ie7_shim.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/rickshaw.min.js"></script>
@@ -23,6 +24,12 @@
<p><center>
<a class="btn button btn-primary" href="${h.url_for(controller='ckanext.ga_report.controller:GaReport',action='csv',month=c.month or 'all')}">Download as CSV</a></center>
</p>
+ </li>
+ <li class="widget-container boxed widget_text">
+ <h4>Graph Legend</h4>
+ <div id="graph-legend-container">
+ <div id="legend_none">(No graph loaded)</div>
+ </div>
</li>
<xi:include href="../notes.html" />
@@ -43,38 +50,36 @@
<div class="tabbable">
<ul class="nav nav-tabs">
- <li class="active"><a href="#totals" data-toggle="tab">Totals</a></li>
+ <li><a href="#totals" data-toggle="hashchange">Totals</a></li>
<li class="dropdown">
- <a href="#browsers" class="dropdown-toggle" data-toggle="dropdown">Browsers
+ <a href="#" class="dropdown-toggle" data-toggle="dropdown">Browsers
<b class="caret"></b></a>
<ul class="dropdown-menu">
- <li><a href="#browsers_names" data-toggle="tab">Browsers</a></li>
- <li><a href="#browsers_versions" data-toggle="tab">Versions</a></li>
+ <li><a href="#browsers_names" data-toggle="hashchange">Browsers</a></li>
+ <li><a href="#browsers_versions" data-toggle="hashchange">Versions</a></li>
</ul>
</li>
<li class="dropdown">
- <a href="#browsers" class="dropdown-toggle" data-toggle="dropdown">Operating<br/>Systems
+ <a href="#" class="dropdown-toggle" data-toggle="dropdown">Operating Systems
<b class="caret"></b></a>
<ul class="dropdown-menu">
- <li><a href="#os" data-toggle="tab">Operating Systems</a></li>
- <li><a href="#os_versions" data-toggle="tab">Versions</a></li>
+ <li><a href="#os" data-toggle="hashchange">Operating Systems</a></li>
+ <li><a href="#os_versions" data-toggle="hashchange">Versions</a></li>
</ul>
</li>
<li class="dropdown">
- <a href="#browsers" class="dropdown-toggle" data-toggle="dropdown">Social Networks
+ <a href="#" class="dropdown-toggle" data-toggle="dropdown">Social
<b class="caret"></b></a>
<ul class="dropdown-menu">
- <li><a href="#social_networks" data-toggle="tab">All networks</a></li>
- <li><a href="#social_referrals_totals" data-toggle="tab">Referral links</a></li>
+ <li><a href="#social_networks" data-toggle="hashchange">All networks</a></li>
+ <li><a href="#social_referrals_totals" data-toggle="hashchange">Referral links</a></li>
</ul>
</li>
-
- <li><a href="#social_networks" data-toggle="tab"></a></li>
- <li><a href="#languages" data-toggle="tab">Languages</a></li>
- <li><a href="#country" data-toggle="tab">Country</a></li>
+ <li><a href="#languages" data-toggle="hashchange">Languages</a></li>
+ <li><a href="#country" data-toggle="hashchange">Country</a></li>
</ul>
<div class="tab-content">
- <div class="tab-pane active" id="totals">
+ <div class="tab-pane" id="totals">
<table class="table table-condensed table-bordered table-striped">
<tr>
<th>Name</th>
@@ -136,20 +141,14 @@
<py:def function="optional_footer">
<script type="text/javascript">
$(function() {
- var sparkOptions = {
- enableTagOptions: true,
- type: 'line',
- width: 100,
- height: 26,
- chartRangeMin: 0,
- spotColor: '',
- maxSpotColor: '',
- minSpotColor: '',
- highlightSpotColor: '000000',
- lineColor: '3F8E6D',
- fillColor: 'B7E66B'
- };
- $('.sparkline').sparkline('html',sparkOptions);
+ CKAN.GA_Reports.bind_sparklines();
+ CKAN.GA_Reports.bind_sidebar();
+ if (!window.location.hash) {
+ window.location.hash='totals';
+ }
+ else {
+ $(window).trigger('hashchange');
+ }
});
</script>
</py:def>