| .table-condensed td.sparkline-cell { | .table-condensed td.sparkline-cell { |
| padding: 1px 0 0 0; | padding: 1px 0 0 0; |
| width: 108px; | width: 108px; |
| text-align: center; | text-align: center; |
| /* Hack to hide the momentary flash of text | |
| * before sparklines are fully rendered */ | |
| font-size: 1px; | |
| color: transparent; | |
| overflow: hidden; | |
| } | } |
| .rickshaw_chart_container { | .rickshaw_chart_container { |
| position: relative; | position: relative; |
| height: 350px; | height: 350px; |
| margin: 0 auto 20px auto; | margin: 0 auto 20px auto; |
| } | } |
| .rickshaw_chart { | .rickshaw_chart { |
| position: absolute; | position: absolute; |
| left: 40px; | left: 40px; |
| width: 500px; | width: 500px; |
| top: 0; | top: 0; |
| bottom: 0; | bottom: 0; |
| } | } |
| .rickshaw_legend { | .rickshaw_legend { |
| background: transparent; | background: transparent; |
| width: 100%; | width: 100%; |
| padding-top: 4px; | padding-top: 4px; |
| } | } |
| .rickshaw_y_axis { | .rickshaw_y_axis { |
| position: absolute; | position: absolute; |
| top: 0; | top: 0; |
| bottom: 0; | bottom: 0; |
| width: 40px; | width: 40px; |
| } | } |
| .rickshaw_legend .label { | .rickshaw_legend .label { |
| background: transparent !important; | background: transparent !important; |
| color: #000000 !important; | color: #000000 !important; |
| font-weight: normal !important; | font-weight: normal !important; |
| } | } |
| .rickshaw_legend .instructions { | .rickshaw_legend .instructions { |
| color: #000; | color: #000; |
| margin-bottom: 6px; | margin-bottom: 6px; |
| } | } |
| .rickshaw_legend .line .action { | .rickshaw_legend .line .action { |
| display: none; | display: none; |
| } | } |
| .rickshaw_legend .line .swatch { | .rickshaw_legend .line .swatch { |
| display: block; | display: block; |
| float: left; | float: left; |
| } | } |
| .rickshaw_legend .line .label { | .rickshaw_legend .line .label { |
| display: block; | display: block; |
| white-space: normal; | white-space: normal; |
| float: left; | float: left; |
| width: 200px; | width: 200px; |
| } | } |
| .rickshaw_legend .line .label:hover { | .rickshaw_legend .line .label:hover { |
| text-decoration: underline; | text-decoration: underline; |
| } | } |
| .ga-reports-table .td-numeric { | .ga-reports-table .td-numeric { |
| text-align: center; | text-align: center; |
| } | } |
| 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'); |
| if (!Modernizr.svg) { | if (!Modernizr.svg) { |
| $("#chart_"+css_name) | $("#chart_"+css_name) |
| .html( '<div class="alert">Your browser does not support vector graphics. No graphs can be rendered.</div>') | .html( '<div class="alert">Your browser does not support vector graphics. No graphs can be rendered.</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('(Graph cannot be rendered)') | .html('(Graph cannot be rendered)') |
| .appendTo(graphLegends); | .appendTo(graphLegends); |
| 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( { graph: graph } ); | var x_axis = new Rickshaw.Graph.Axis.Time( { 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="hashchange"]').on( | $('a[data-toggle="hashtab"]').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 */ | |
| $('li.active > a[data-toggle="hashtab"]').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); |
| }; | }; |
| /* | |
| * 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'); } | |
| }); | |
| }); | |
| <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="ga-reports-table table table-condensed table-bordered table-striped"> | <table py:def="social_table(items, with_source=False)" class="ga-reports-table 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 class="td-numeric">${count}</td> | <td class="td-numeric">${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> |
| <script type="text/javascript"> | <script type="text/javascript"> |
| $(function() { | $(function() { |
| var items = $items_json; | var items = $items_json; |
| if (items.length==0) { return; } | if (items.length==0) { return; } |
| CKAN.GA_Reports.render_rickshaw('$id', items, '$mode', '$colorscheme'); | CKAN.GA_Reports.render_rickshaw('$id', items, '$mode', '$colorscheme'); |
| }); | }); |
| </script> | </script> |
| </div> | </div> |
| </div> | </div> |
| <table py:def="stat_table(items, title='Views')" class="ga-reports-table table table-condensed table-bordered table-striped"> | <table py:def="stat_table(items, title='Views')" class="ga-reports-table table table-condensed table-bordered table-striped"> |
| <tr> | <tr> |
| <th>Name</th> | <th>Name</th> |
| <th class="td-numeric">% ${title}</th> | <th class="td-numeric">% ${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 class="td-numeric">${value}</td> | <td class="td-numeric">${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)"> |
| <div id="minornavigation-bg-left"> | <span class="subheading"> |
| <div id="minornavigation-bg-right"> | <img src="/images/arrow-down-right.png" /> |
| <ul class="nav nav-pills"> | <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> |
| <?python querystring='?month='+c.month if c.month else '' ?> | <span class="divider">|</span> |
| <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')}${querystring}"><img src="/images/icons/page_white.png" height="16px" width="16px" alt="None" class="inline-icon "/> Site-wide</a></li> | <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> |
| <li py:attrs="{'class': 'active' if active_name=='Publishers' else None}"> | <span class="divider">|</span> |
| <a py:attrs="{'class': 'active' if active_name=='Publishers' else None}" href="${h.url_for(controller='ckanext.ga_report.controller:GaDatasetReport',action='publishers')}${querystring}"><img src="/images/icons/page_white.png" height="16px" width="16px" alt="None" class="inline-icon "/> Publishers</a> | <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> |
| </li> | </span> |
| <li py:attrs="{'class': 'active' if active_name=='Datasets' else None}"> | </div> |
| <a py:attrs="{'class': 'active' if active_name=='Datasets' else None}" href="${h.url_for(controller='ckanext.ga_report.controller:GaDatasetReport',action='read')}${querystring}"><img src="/images/icons/page_white.png" height="16px" width="16px" alt="None" class="inline-icon "/> Datasets</a> | |
| </li> | <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 id="legend_none">(No graph loaded)</div> | |
| </div> | |
| </div> | |
| <div class="widget-container widget_text"> | |
| <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>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> | </ul> |
| </div> | </div> |
| </div> | </div> |
| </div> | </div> |
| </html> | </html> |
| <html xmlns:py="http://genshi.edgewall.org/" | |
| xmlns:i18n="http://genshi.edgewall.org/i18n" | |
| xmlns:xi="http://www.w3.org/2001/XInclude" | |
| py:strip=""> | |
| <li class="widget-container boxed widget_text"> | |
| <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>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> | |