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

--- 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/public/scripts/ckanext_ga_reports.js
+++ b/ckanext/ga_report/public/scripts/ckanext_ga_reports.js
@@ -97,7 +97,7 @@
    * Show the correct rickshaw graph in the sidebar. 
    * Not to be called before all graphs load.
    */
-  $('a[data-toggle="hashtab"]').on(
+  $('a[data-toggle="tab"]').on(
     'shown',
     function(e) {
       var href = $(e.target).attr('href');
@@ -115,7 +115,7 @@
     }
   );
   /* 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() {

--- a/ckanext/ga_report/templates/ga_report/ga_util.html
+++ b/ckanext/ga_report/templates/ga_report/ga_util.html
@@ -57,43 +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="boxed">
-    <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,13 +6,6 @@
   <xi:include href="../ga_util.html" />
 
   <py:def function="page_title">Usage by Publisher</py:def>
-
-
-
-  <py:match path="primarysidebar">
-    ${ga_sidebar(download_link=h.url_for(controller='ckanext.ga_report.controller:GaDatasetReport',action='publisher_csv',month=c.month or 'all'))}
-  </py:match>
-
 
   <py:def function="optional_head">
     <link rel="stylesheet" type="text/css" href="/scripts/vendor/rickshaw.min.css"/>
@@ -25,38 +18,57 @@
     <script type="text/javascript" src="/scripts/vendor/d3.layout.min.js"></script>
     <script type="text/javascript" src="/scripts/vendor/rickshaw.min.js"></script>
   </py:def>
-  <py:def function="page_heading">Site Usage ${usage_nav('Publishers')}</py:def>
+
+ <py:match path="breadcrumbs">
+    <li><a href="/data/site-usage">Site Analytics</a></li>
+    <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 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,60 +19,86 @@
     <script type="text/javascript" src="/scripts/vendor/rickshaw.min.js"></script>
   </py:def>
 
-  <py:match path="primarysidebar">
-    ${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:match path="breadcrumbs">
+    <li><a href="/data/site-usage">Site Analytics</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>
-  <py:def function="page_heading">Site Usage ${usage_nav('Datasets')}</py:def>
 
   <div py:match="content">
 
-    <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>
+    <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>
 
-     <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">
+    <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)}
+        ${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">
+        <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>
-           <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>
+           <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/downloads.html
+++ b/ckanext/ga_report/templates/ga_report/site/downloads.html
@@ -7,9 +7,9 @@
 
   <py:def function="page_title">Downloads</py:def>
 
-  <py:match path="primarysidebar">
+  <py:def path="sidebar">
     ${ga_sidebar(download_link=h.url_for(controller='ckanext.ga_report.controller:GaReport',action='csv_downloads',month=c.month or 'all'))}
-  </py:match>
+  </py:def>
 
   <py:def function="page_heading">Downloads ${usage_nav('Downloads')}</py:def>
   <div py:match="content">

--- a/ckanext/ga_report/templates/ga_report/site/index.html
+++ b/ckanext/ga_report/templates/ga_report/site/index.html
@@ -19,146 +19,184 @@
     <script type="text/javascript" src="/scripts/vendor/rickshaw.min.js"></script>
   </py:def>
 
-  <py:match path="primarysidebar">
-    ${ga_sidebar(download_link=h.url_for(controller='ckanext.ga_report.controller:GaReport',action='csv',month=c.month or 'all'))}
+ <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>
 
-  <py:def function="page_heading">Site Usage ${usage_nav('Site-wide')}</py:def>
-
   <div py:match="content">
-
-    <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-hash="totals" data-toggle="tab">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-hash="browsers_names" data-toggle="tab">Browsers</a></li>
+                      <li><a href="#browsers_versions" data-hash="browsers_versions" data-toggle="tab">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-hash="os" data-toggle="tab">Operating Systems</a></li>
+                      <li><a href="#os_versions" data-hash="os_versions" data-toggle="tab">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-hash="social_networks" data-toggle="tab">All networks</a></li>
+                      <li><a href="#social_referrals_totals" data-hash="social_referrals_totals" data-toggle="tab">Referral links</a></li>
+                  </ul>
+              </li>
+              <li><a href="#languages" data-hash="languages" data-toggle="tab">Languages</a></li>
+              <li><a href="#country" data-hash="country" data-toggle="tab">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)}