[903] Integrated 777 branch and updated to fit the new look.
[903] Integrated 777 branch and updated to fit the new look.

--- a/ckanext/ga_report/public/css/ga_report.css
+++ b/ckanext/ga_report/public/css/ga_report.css
@@ -66,4 +66,7 @@
   margin-top: 4px;
   float: left;
 }
+.tab-content {
+  padding-top: 12px;
+}
 

--- a/ckanext/ga_report/templates/ga_report/ga_util.html
+++ b/ckanext/ga_report/templates/ga_report/ga_util.html
@@ -57,42 +57,19 @@
     </py:for>
  </table>
 
-
-<div py:def="usage_nav(active_name)">
-  <span class="subheading">
-    <img src="/images/arrow-down-right.png" />
-    <a class="${if_(active_name=='Site-wide','active')}" href="${h.url_for(controller='ckanext.ga_report.controller:GaReport',action='index')}${if_(c.month,'?month='+c.month)}">Site-wide</a>
-    <span class="divider">|</span>
-    <a class="${if_(active_name=='Publishers','active')}" href="${h.url_for(controller='ckanext.ga_report.controller:GaDatasetReport',action='publishers')}${if_(c.month,'?month='+c.month)}">Publishers</a>
-    <span class="divider">|</span>
-    <a class="${if_(active_name=='Datasets','active')}" href="${h.url_for(controller='ckanext.ga_report.controller:GaDatasetReport',action='read')}${if_(c.month,'?month='+c.month)}">Datasets</a>
-  </span>
-</div>
-
-<div py:def="ga_sidebar(download_link)">
-    <div class="widget-container widget_text">
-      <h4>Download</h4>
-      <p><center>
-        <a class="btn button btn-primary" href="${download_link}">Download as CSV</a></center>
-      </p>
-    </div>
-    <div class="widget-container widget_text">
-      <h4>Graph Legend</h4>
-      <div id="graph-legend-container">
-        <div style="display: none;" id="legend_none">(No graph is loaded)</div>
-      </div>
-    </div>
-    <div class="widget-container widget_text">
-      <h4>Notes</h4>
+<py:def function="ga_footer()">
+  <div class="panel panel-default">
+    <div class="panel-heading"><strong>Notes</strong></div>
+    <div class="panel-body">
       <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>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>
+        <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>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>
     </div>
-
-</div>
+  </div>
+</py:def>
 
 
 </html>

--- a/ckanext/ga_report/templates/ga_report/publisher/index.html
+++ b/ckanext/ga_report/templates/ga_report/publisher/index.html
@@ -6,12 +6,6 @@
   <xi:include href="../ga_util.html" />
 
   <py:def function="page_title">Usage by Publisher</py:def>
-
-
-  <py:def function="sidebar">
-    ${ga_sidebar(download_link=h.url_for(controller='ckanext.ga_report.controller:GaDatasetReport',action='publisher_csv',month=c.month or 'all'))}
-  </py:def>
-
 
   <py:def function="optional_head">
     <link rel="stylesheet" type="text/css" href="/scripts/vendor/rickshaw.min.css"/>
@@ -30,46 +24,51 @@
     <li><a href="/data/site-usage/publisher">Publishers</a></li>
   </py:match>
 
+  <div py:match="content">
+    <py:with vars="download_link=h.url_for(controller='ckanext.ga_report.controller:GaDatasetReport',action='publisher_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>
+    </py:with>
+    <h1>Site Usage</h1>
 
-
-  <div py:match="content">
-
-    <h3 style='text-align:center;'>
-      <a href="/data/site-usage">Site-wide</a>
-      <span style="color: #bbb;margin:10px;">|</span>
-      Publishers
-      <span style="color: #bbb;margin:10px;">|</span>
-      <a href="/data/site-usage/dataset">Datasets</a>
-    </h3>
-
-
-    <div class="boxed">
-
-       ${rickshaw_graph(c.top_publishers_graph,'publishers')}
+    <div class="row" style="background: #fff;">
+      <div class="col-md-4">
+        <div class="whitebox">
+          <strong>Graph Legend</strong>
+          <div id="graph-legend-container">
+            <div style="display: none;" id="legend_none">(No graph is loaded)</div>
+          </div>
+        </div>
+      </div>
+      <div class="col-md-8">
+        <div class="whitebox">
+          <strong>Publishers</strong>
+           ${rickshaw_graph(c.top_publishers_graph,'publishers')}
+       </div>
+      </div>
+    </div>
 
        <hr/>
        <form class="form-inline" action="${h.url_for(controller='ckanext.ga_report.controller:GaDatasetReport',action='publishers')}" method="get">
           <div class="controls">
-            <h4 class="ga-reports-heading">Statistics for</h4>
+            <h2 class="ga-reports-heading">Statistics for</h2>
               ${month_selector(c.month, c.months, c.day)}
           </div>
        </form>
 
-       <table class="ga-reports-table table table-condensed table-bordered table-striped">
-         <tr>
-           <th>Publisher</th>
-           <th class="td-numeric">Dataset Views</th>
-         </tr>
-        <py:for each="publisher, views, visits in c.top_publishers">
-          <tr>
-            <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 ''))}
-            </td>
-            <td class="td-numeric">${views}</td>
-          </tr>
-        </py:for>
-       </table>
-    </div><!--/boxed-->
+     <table class="ga-reports-table table table-condensed table-bordered table-striped">
+       <tr>
+         <th>Publisher</th>
+         <th class="td-numeric">Dataset Views</th>
+       </tr>
+      <py:for each="publisher, views, visits in c.top_publishers">
+        <tr>
+          <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 ''))}
+          </td>
+          <td class="td-numeric">${views}</td>
+        </tr>
+      </py:for>
+     </table>
   </div><!--/content-->
 
   <py:def function="optional_footer">

--- a/ckanext/ga_report/templates/ga_report/publisher/read.html
+++ b/ckanext/ga_report/templates/ga_report/publisher/read.html
@@ -19,75 +19,86 @@
     <script type="text/javascript" src="/scripts/vendor/rickshaw.min.js"></script>
   </py:def>
 
-  <py:def function="sidebar">
-    ${ga_sidebar(download_link=h.url_for(controller='ckanext.ga_report.controller:GaDatasetReport',action='dataset_csv',id=c.publisher_name or 'all',month=c.month or 'all'))}
-  </py:def>
 
  <py:match path="breadcrumbs">
     <li><a href="/data/site-usage">Site Analytics</a></li>
-    <li><a href="/data/site-usage/publisher">Datasets</a></li>
-    <li py:if="c.publisher"><a href="/data/site-usage/publisher/${c.publisher.name}">${c.publisher.title}</a></li>
+    <py:if test="c.publisher">
+      <li><a href="/data/site-usage/publisher">Publishers</a></li>
+      <li py:if="c.publisher"><a href="/data/site-usage/publisher/${c.publisher.name}">${c.publisher.title}</a></li>
+    </py:if>
+    <py:if test="not c.publisher">
+      <li><a href="${request.url}">Usage By Dataset</a></li>
+    </py:if>
   </py:match>
 
+  <div py:match="content">
 
+    <py:with vars="download_link=h.url_for(controller='ckanext.ga_report.controller:GaDatasetReport',action='dataset_csv',id=c.publisher_name or 'all',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>
+    </py:with>
+    <h1>Site Usage</h1>
 
-  <div py:match="content">
-    <h3 style='text-align:center;'>
-      <a href="/data/site-usage">Site-wide</a>
-      <span style="color: #bbb;margin:10px;">|</span>
-      <a href="/data/site-usage/publisher">Publishers</a>
-      <span style="color: #bbb;margin:10px;">|</span>
-      Datasets
-    </h3>
+    <div class="row" style="background: #fff;">
+      <div class="col-md-4">
+        <div class="whitebox">
+          <strong>Graph Legend</strong>
+          <div id="graph-legend-container">
+            <div style="display: none;" id="legend_none">(No graph is loaded)</div>
+          </div>
+        </div>
+      </div>
+      <div class="col-md-8">
+        <div class="whitebox">
+          <strong py:if="c.publisher">Datasets From <a href="${h.url_for(controller='ckanext.dgu.controllers.publisher:PublisherController',action='read',id=c.publisher.name)}">${c.publisher.title}</a></strong>
+          <strong py:if="not c.publisher">All Datasets</strong>
+          <py:if test="c.graph_data">
+            ${rickshaw_graph(c.graph_data,'dataset-downloads',debug=True)}
+          </py:if>
+       </div>
+      </div>
+    </div>
+    <hr/>
+   <py:if test="c.month">
+     <h4>Statistics for ${h.month_option_title(c.month,c.months,c.day)}:</h4>
+   </py:if>
+   <py:if test="not c.month">
+     <h2>Statistics for all months</h2>
+   </py:if>
+   <form style="margin-bottom:10px;" class="form-inline" action="${h.url_for(controller='ckanext.ga_report.controller:GaDatasetReport',action='read')}" method="get">
+      <div class="controls">
 
+        ${month_selector(c.month, c.months, c.day)}
 
-    <div class="boxed">
-     <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>
+        <select name="publisher">
+              <option value='' py:attrs="{'selected': 'selected' if not c.publisher else None}">All publishers</option>
+            <py:for each="val,desc in c.publishers">
+              <option value='${val}' py:attrs="{'selected': 'selected' if c.publisher_name == val else None}">${desc}</option>
+            </py:for>
+        </select>
+        <input class="btn button btn-primary btn-xs" type='submit' value="Update"/>
+      </div>
+   </form>
+   <div class="alert alert-info" py:if="not c.top_packages">No page views in this period.</div>
+   <py:if test="c.top_packages">
+     <table class="ga-reports-table table table-condensed table-bordered">
+       <tr>
+         <th>Dataset</th>
+         <th>Views</th>
+         <th>Downloads</th>
+       </tr>
+       <py:for each="package, views, visits,downloads in c.top_packages">
+         <tr>
+           <td>
+             ${h.link_to(package.title or package.name, h.url_for(controller='package', action='read', id=package.name))}
+           </td>
+           <td class="td-numeric">${views}</td>
+           <td class="td-numeric">${downloads}</td>
+        </tr>
+      </py:for>
+    </table>
+  </py:if>
 
-     <py:if test="c.graph_data">
-       ${rickshaw_graph(c.graph_data,'dataset-downloads',debug=True)}
-     </py:if>
-     <form class="form-inline" action="${h.url_for(controller='ckanext.ga_report.controller:GaDatasetReport',action='read')}" method="get">
-        <div class="controls">
-
-          ${month_selector(c.month, c.months, c.day)}
-
-          <select name="publisher">
-                <option value='' py:attrs="{'selected': 'selected' if not c.publisher else None}">All publishers</option>
-              <py:for each="val,desc in c.publishers">
-                <option value='${val}' py:attrs="{'selected': 'selected' if c.publisher_name == val else None}">${desc}</option>
-              </py:for>
-          </select>
-          <input class="btn button btn-primary" type='submit' value="Update"/>
-        </div>
-     </form>
-     <py:if test="c.month">
-       <h4>Statistics for ${h.month_option_title(c.month,c.months,c.day)}:</h4>
-     </py:if>
-     <py:if test="not c.month">
-       <h4>Statistics for all months:</h4>
-     </py:if>
-     <div class="alert alert-info" py:if="not c.top_packages">No page views in this period.</div>
-     <py:if test="c.top_packages">
-       <table class="ga-reports-table table table-condensed table-bordered table-striped">
-         <tr>
-           <th>Dataset</th>
-           <th>Views</th>
-           <th>Downloads</th>
-         </tr>
-         <py:for each="package, views, visits,downloads in c.top_packages">
-           <tr>
-             <td>
-               ${h.link_to(package.title or package.name, h.url_for(controller='package', action='read', id=package.name))}
-             </td>
-             <td class="td-numeric">${views}</td>
-             <td class="td-numeric">${downloads}</td>
-          </tr>
-        </py:for>
-      </table>
-    </py:if>
-
-  </div>
+  ${ga_footer()}
 
   </div>
 

--- a/ckanext/ga_report/templates/ga_report/site/index.html
+++ b/ckanext/ga_report/templates/ga_report/site/index.html
@@ -19,159 +19,184 @@
     <script type="text/javascript" src="/scripts/vendor/rickshaw.min.js"></script>
   </py:def>
 
-  <py:def function="sidebar">
-    ${ga_sidebar(download_link=h.url_for(controller='ckanext.ga_report.controller:GaReport',action='csv',month=c.month or 'all'))}
-  </py:def>
-
-
  <py:match path="breadcrumbs">
     <li><a href="/data/site-usage">Site Analytics</a></li>
     <li><a href="/data/site-usage">Site-wide</a></li>
   </py:match>
 
-
   <div py:match="content">
-
-    <h3 style='text-align:center;'>
-      Site-wide
-      <span style="color: #bbb;margin:10px;">|</span>
-      <a href="/data/site-usage/publisher">Publishers</a>
-      <span style="color: #bbb;margin:10px;">|</span>
-      <a href="/data/site-usage/dataset">Datasets</a>
-    </h3>
-
-    <div class="boxed">
-    <div class="tabbable">
-      <ul class="nav nav-tabs">
-        <li class="active"><a href="#totals" data-toggle="hashtab">Totals</a></li>
-        <li class="dropdown">
-            <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="hashtab">Browsers</a></li>
-                <li><a href="#browsers_versions" data-toggle="hashtab">Versions</a></li>
+    <div class="row">
+      <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')">
+          <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>
+        <h1>Site Usage</h1>
+      </div>
+      <div class="col-sm-5 col-md-4 col-lg-3">
+        <div class="panel panel-default">
+          <div class="panel-heading"><strong>Jump To...</strong></div>
+          <div class="panel-body">
+            <ul>
+              <li><a href="/data/site-usage/publisher">Publisher Usage Statistics</a></li>
+              <li><a href="/data/site-usage/dataset">Dataset Usage Statistics</a></li>
             </ul>
-        </li>
-        <li class="dropdown">
-            <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="hashtab">Operating Systems</a></li>
-                <li><a href="#os_versions" data-toggle="hashtab">Versions</a></li>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="row" style="background: #fff;">
+      <div class="col-md-4">
+        <div class="whitebox">
+          <strong>Graph Legend</strong>
+          <div id="graph-legend-container">
+            <div style="display: none;" id="legend_none">(No graph is loaded)</div>
+          </div>
+        </div>
+      </div>
+      <div class="col-md-8">
+        <div class="whitebox">
+          <div class="tabbable">
+            <ul class="nav nav-tabs">
+              <li class="active"><a href="#totals" data-toggle="hashtab">Totals</a></li>
+              <li class="dropdown">
+                  <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="hashtab">Browsers</a></li>
+                      <li><a href="#browsers_versions" data-toggle="hashtab">Versions</a></li>
+                  </ul>
+              </li>
+              <li class="dropdown">
+                  <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="hashtab">Operating Systems</a></li>
+                      <li><a href="#os_versions" data-toggle="hashtab">Versions</a></li>
+                  </ul>
+              </li>
+              <li class="dropdown">
+                  <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="hashtab">All networks</a></li>
+                      <li><a href="#social_referrals_totals" data-toggle="hashtab">Referral links</a></li>
+                  </ul>
+              </li>
+              <li><a href="#languages" data-toggle="hashtab">Languages</a></li>
+              <li><a href="#country" data-toggle="hashtab">Country</a></li>
             </ul>
-        </li>
-        <li class="dropdown">
-            <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="hashtab">All networks</a></li>
-                <li><a href="#social_referrals_totals" data-toggle="hashtab">Referral links</a></li>
-            </ul>
-        </li>
-        <li><a href="#languages" data-toggle="hashtab">Languages</a></li>
-        <li><a href="#country" data-toggle="hashtab">Country</a></li>
-      </ul>
-      <div class="tab-content">
-        <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">
-               <h4 class="ga-reports-heading">Show stats table for:</h4>
-               ${month_selector(c.month, c.months, c.day)}
-             </form>
-             <table class="ga-reports-table table table-condensed table-bordered table-striped">
-            	 <tr>
-            	   <th>Name</th>
-            	   <th class="td-numeric">Value</th>
-            	   <th>History</th>
-            	 </tr>
-                <py:for each="name, value, graph in c.global_totals">
-                    <tr>
-                        <td>${name}</td>
-                        <td class="td-numeric">${value}</td>
-                        <td class="sparkline-cell">
-                          <span class="sparkline" sparkTooltips="${','.join([x for x,y in graph])}">
-                            ${','.join([y for x,y in graph])}
-                          </span>
-                        </td>
-                    </tr>
-                </py:for>
-               </table>
-        </div>
-         <div class="tab-pane" id="browsers_versions">
-             ${rickshaw_graph(c.browser_versions_graph,'browser-versions',mode='stack')}
-             <hr/>
-             <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">
-               <h4 class="ga-reports-heading">Show stats table for:</h4>
-               ${month_selector(c.month, c.months, c.day)}
-             </form>
-             ${stat_table(c.browser_versions)}
-         </div>
-         <div class="tab-pane" id="browsers_names">
-             ${rickshaw_graph(c.browsers_graph,'browsers',mode='stack')}
-             <hr/>
-             <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>
-               ${month_selector(c.month, c.months, c.day)}
-             </form>
-             ${stat_table(c.browsers)}
-         </div>
-         <div class="tab-pane" id="os">
-             ${rickshaw_graph(c.os_graph,'os',mode='stack')}
-             <hr/>
-             <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>
-               ${month_selector(c.month, c.months, c.day)}
-             </form>
-             ${stat_table(c.os)}
-         </div>
-         <div class="tab-pane" id="os_versions">
-             ${rickshaw_graph(c.os_versions_graph,'os_versions',mode='stack')}
-             <hr/>
-             <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>
-               ${month_selector(c.month, c.months, c.day)}
-             </form>
-             ${stat_table(c.os_versions)}
-         </div>
-        <div class="tab-pane" id="social_referrals_totals">
-            <p>Number of visits that were referred from social networks</p>
-             <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>
-               ${month_selector(c.month, c.months, c.day)}
-             </form>
-            ${social_table(c.social_referrer_totals)}
-        </div>
-        <div class="tab-pane" id="social_networks">
-             ${rickshaw_graph(c.social_networks_graph, 'social_networks',mode='stack')}
-             <hr/>
-            <p>Percentage of visits that were referred from these social networks</p>
-             <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>
-               ${month_selector(c.month, c.months, c.day)}
-             </form>
-             ${stat_table(c.social_networks, 'Visits')}
-        </div>
-        <div class="tab-pane" id="languages">
-             ${rickshaw_graph(c.languages_graph,'languages',mode='stack')}
-             <hr/>
-             <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>
-               ${month_selector(c.month, c.months, c.day)}
-             </form>
-             ${stat_table(c.languages)}
-        </div>
-        <div class="tab-pane" id="country">
-             ${rickshaw_graph(c.country_graph,'country',mode='stack')}
-             <hr/>
-             <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>
-               ${month_selector(c.month, c.months, c.day)}
-             </form>
-             ${stat_table(c.country)}
-        </div>
+            <div class="tab-content">
+              <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">
+                     <h4 class="ga-reports-heading">Show stats table for:</h4>
+                     ${month_selector(c.month, c.months, c.day)}
+                   </form>
+                   <table class="ga-reports-table table table-condensed table-bordered table-striped">
+                     <tr>
+                       <th>Name</th>
+                       <th class="td-numeric">Value</th>
+                       <th>History</th>
+                     </tr>
+                      <py:for each="name, value, graph in c.global_totals">
+                          <tr>
+                              <td>${name}</td>
+                              <td class="td-numeric">${value}</td>
+                              <td class="sparkline-cell">
+                                <span class="sparkline" sparkTooltips="${','.join([x for x,y in graph])}">
+                                  ${','.join([y for x,y in graph])}
+                                </span>
+                              </td>
+                          </tr>
+                      </py:for>
+                     </table>
+              </div>
+               <div class="tab-pane" id="browsers_versions">
+                   ${rickshaw_graph(c.browser_versions_graph,'browser-versions',mode='stack')}
+                   <hr/>
+                   <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">
+                     <h4 class="ga-reports-heading">Show stats table for:</h4>
+                     ${month_selector(c.month, c.months, c.day)}
+                   </form>
+                <hr/>
+                   ${stat_table(c.browser_versions)}
+               </div>
+               <div class="tab-pane" id="browsers_names">
+                   ${rickshaw_graph(c.browsers_graph,'browsers',mode='stack')}
+                   <hr/>
+                   <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>
+                     ${month_selector(c.month, c.months, c.day)}
+                   </form>
+                <hr/>
+                   ${stat_table(c.browsers)}
+               </div>
+               <div class="tab-pane" id="os">
+                   ${rickshaw_graph(c.os_graph,'os',mode='stack')}
+                   <hr/>
+                   <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>
+                     ${month_selector(c.month, c.months, c.day)}
+                   </form>
+                <hr/>
+                   ${stat_table(c.os)}
+               </div>
+               <div class="tab-pane" id="os_versions">
+                   ${rickshaw_graph(c.os_versions_graph,'os_versions',mode='stack')}
+                   <hr/>
+                   <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>
+                     ${month_selector(c.month, c.months, c.day)}
+                   </form>
+                <hr/>
+                   ${stat_table(c.os_versions)}
+               </div>
+              <div class="tab-pane" id="social_referrals_totals">
+                  <p>Number of visits that were referred from social networks</p>
+                   <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>
+                     ${month_selector(c.month, c.months, c.day)}
+                   </form>
+                  ${social_table(c.social_referrer_totals)}
+              </div>
+              <div class="tab-pane" id="social_networks">
+                   ${rickshaw_graph(c.social_networks_graph, 'social_networks',mode='stack')}
+                   <hr/>
+                  <p>Percentage of visits that were referred from these social networks</p>
+