| .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 | /* Hack to hide the momentary flash of text |
| * before sparklines are fully rendered */ | * before sparklines are fully rendered */ |
| font-size: 1px; | font-size: 1px; |
| color: transparent; | color: transparent; |
| overflow: hidden; | 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; |
| } | } |
| .ga-reports-heading { | .ga-reports-heading { |
| padding-right: 10px; | padding-right: 10px; |
| margin-top: 4px; | margin-top: 4px; |
| float: left; | float: left; |
| } | } |
| .tab-content { | |
| padding-top: 12px; | |
| } | |
| 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 | <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="(iso_code,string_name) in months"> | <py:for each="(iso_code,string_name) in months"> |
| <option value='${iso_code}' py:attrs="{'selected': 'selected' if current_month == iso_code else None}">${h.month_option_title(iso_code,months,day)}</option> | <option value='${iso_code}' py:attrs="{'selected': 'selected' if current_month == iso_code else None}">${h.month_option_title(iso_code,months,day)}</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; |
| 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> |
| <py:def function="ga_footer()"> | |
| <div py:def="usage_nav(active_name)"> | <div class="panel panel-default"> |
| <span class="subheading"> | <div class="panel-heading"><strong>Notes</strong></div> |
| <img src="/images/arrow-down-right.png" /> | <div class="panel-body"> |
| <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> | |
| <ul> | <ul> |
| <li>"Views" is the number of times a page was loaded in users' browsers.</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>"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>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>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> | </py:def> |
| </html> | </html> |
| <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">Usage by Publisher</py:def> | <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"> | <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"> |