From: Tom Rees Date: Fri, 25 Jan 2013 11:36:22 +0000 Subject: #167 Togglable graph legend. Disabled mouseover. X-Git-Url: http://maxious.lambdacomplex.org/git/?p=ckanext-ga-report.git&a=commitdiff&h=e4a17dd849ff955b4d699056f34a39f96203f7b4 --- #167 Togglable graph legend. Disabled mouseover. --- --- a/ckanext/ga_report/command.py +++ b/ckanext/ga_report/command.py @@ -23,7 +23,7 @@ import ckan.model as model model.Session.remove() model.Session.configure(bind=model.meta.engine) - log = logging.getLogger('ckanext.ga-report') + log = logging.getLogger('ckanext.ga_report') import ga_model ga_model.init_tables() --- a/ckanext/ga_report/controller.py +++ b/ckanext/ga_report/controller.py @@ -192,24 +192,17 @@ filter(GA_Stat.stat_name==k).\ order_by(GA_Stat.period_name) # Run the query on all months to gather graph data - series = {} - x_axis = set() + graph = {} for stat in q: - x_val = _get_unix_epoch(stat.period_name) - series[ stat.key ] = series.get(stat.key,{}) - series[ stat.key ][x_val] = float(stat.value) - x_axis.add(x_val) - # Common x-axis for all series. Exclude this month (incomplete data) - x_axis = sorted(list(x_axis))[:-1] - # Buffer a rickshaw dataset from the series - def create_graph(series_name, series_data): - return { - 'name':series_name, - 'data':[ {'x':x,'y':series_data.get(x,0)} for x in x_axis ] - } - rickshaw = [ create_graph(name,data) for name, data in series.items() ] - rickshaw = sorted(rickshaw,key=lambda x:x['data'][-1]['y']) - setattr(c, v+'_graph', json.dumps(rickshaw)) + graph[ stat.key ] = graph.get(stat.key,{ + 'name':stat.key, + 'data': [] + }) + graph[ stat.key ]['data'].append({ + 'x':_get_unix_epoch(stat.period_name), + 'y':float(stat.value) + }) + setattr(c, v+'_graph', json.dumps( _to_rickshaw(graph.values(),percentageMode=True) )) # Buffer the tabular data if c.month: @@ -409,22 +402,60 @@ 'x':_get_unix_epoch(entry.period_name), 'y':int(entry.pageviews), }) - + c.graph_data = json.dumps( _to_rickshaw(graph_data.values()) ) return render('ga_report/publisher/read.html') -def _to_rickshaw(data): - num_points = [] +def _to_rickshaw(data, percentageMode=False): + if data==[]: + return data + # Create a consistent x-axis + num_points = [ len(package['data']) for package in data ] + ideal_index = num_points.index( max(num_points) ) + x_axis = [ point['x'] for point in data[ideal_index]['data'] ] + for package in data: + xs = [ point['x'] for point in package['data'] ] + assert set(xs).issubset( set(x_axis) ), (xs, x_axis) + # Zero pad any missing values + for x in set(x_axis).difference(set(xs)): + package['data'].append( {'x':x, 'y':0} ) + assert len(package['data'])==len(x_axis), (len(package['data']),len(x_axis),package['data'],x_axis,set(x_axis).difference(set(xs))) + if percentageMode: + # Transform data into percentage stacks + totals = {} + for x in x_axis: + for package in data: + for point in package['data']: + totals[ point['x'] ] = totals.get(point['x'],0) + point['y'] + # Roll insignificant series into a catch-all + THRESHOLD = 0.01 + significant_series = [] + for package in data: + for point in package['data']: + fraction = float(point['y']) / totals[point['x']] + if fraction>THRESHOLD and not (package in significant_series): + significant_series.append(package) + temp = {} + for package in data: + if package in significant_series: continue + for point in package['data']: + temp[point['x']] = temp.get(point['x'],0) + point['y'] + catch_all = { 'name':'Other','data': [ {'x':x,'y':y} for x,y in temp.items() ] } + # Roll insignificant series into one + data = significant_series + data.append(catch_all) + # Turn each point into a percentage + for package in data: + for point in package['data']: + point['y'] = (point['y']*100) / totals[point['x']] + # Sort the points for package in data: package['data'] = sorted( package['data'], key=lambda x:x['x'] ) - num_points.append( len(package['data']) ) - if len(set(num_points))>1: - example = num_points[ num_points.index(max(num_points)) ] - for package in data: - while len(package['data'])Your browser does not support vector graphics. No graphs can be rendered.') + .closest('.rickshaw_chart_container').css('height',50); + var myLegend = $('
') + .html('(Graph cannot be rendered)') + .appendTo(graphLegends); + return; + } + var myLegend = $('
').appendTo(graphLegends); + + var palette = new Rickshaw.Color.Palette( { scheme: colorscheme } ); + $.each(data, function(i, object) { + object['color'] = palette.color(); + }); + + var graphElement = document.querySelector("#chart_"+css_name); + + var graph = new Rickshaw.Graph( { + element: document.querySelector("#chart_"+css_name), + renderer: mode, + series: data , + height: 328 + }); + var x_axis = new Rickshaw.Graph.Axis.Time( { graph: graph } ); + var y_axis = new Rickshaw.Graph.Axis.Y( { + graph: graph, + orientation: 'left', + tickFormat: Rickshaw.Fixtures.Number.formatKMBT, + element: document.getElementById('y_axis_'+css_name) + } ); + var legend = new Rickshaw.Graph.Legend( { + element: document.querySelector('#legend_'+css_name), + graph: graph + } ); + var shelving = new Rickshaw.Graph.Behavior.Series.Toggle( { + graph: graph, + legend: legend + } ); + graph.render(); +}; + +CKAN.GA_Reports.bind_sparklines = function() { + /* + * Bind to the 'totals' tab being on screen, when the + * Sparkline graphs should be drawn. + * Note that they cannot be drawn sooner. + */ + $('a[href="#totals"]').on( + 'shown', + function() { + var sparkOptions = { + enableTagOptions: true, + type: 'line', + width: 100, + height: 26, + chartRangeMin: 0, + spotColor: '', + maxSpotColor: '', + minSpotColor: '', + highlightSpotColor: '000000', + lineColor: '3F8E6D', + fillColor: 'B7E66B' + }; + $('.sparkline').sparkline('html',sparkOptions); + } + ); +}; + +CKAN.GA_Reports.bind_sidebar = function() { + /* + * Bind to changes in the tab behaviour: + * Show the correct rickshaw graph in the sidebar. + * Not to be called before all graphs load. + */ + $('a[data-toggle="hashchange"]').on( + 'shown', + function(e) { + var href = $(e.target).attr('href'); + var pane = $(href); + if (!pane.length) { console.err('bad href',href); return; } + var legend_name = "none"; + var graph = pane.find('.rickshaw_chart'); + if (graph.length) { + legend_name = graph.attr('id').replace('chart_',''); + } + legend_name = '#legend_'+legend_name; + $('#graph-legend-container > *').hide(); + $(legend_name).show(); + } + ); +}; + +/* + * Custom bootstrap plugin for handling data-toggle="hashchange". + * Behaves like data-toggle="tab" but I respond to the hashchange. + * Page state is memo-ized in the URL this way. Why doesn't Bootstrap do this? + */ +$(function() { + var mapping = {}; + $('a[data-toggle="hashchange"]').each( + function(i,link) { + link = $(link); + mapping[link.attr('href')] = link; + } + ); + $(window).hashchange(function() { + var link = mapping[window.location.hash]; + if (link) { link.tab('show'); } + }); +}); + --- /dev/null +++ b/ckanext/ga_report/public/scripts/rickshaw_ie7_shim.js @@ -1,1 +1,109 @@ +/* + * Collection of shims to allow d3 and Rickshaw to load, error-free + * (but ultimately unusable) on Internet Explorer 7. The browser's + * API lacks several crucial functions which these libraries depend + * upon to load; we try to hide these errors from the user. + * + * With thanks to Array functions from: + * http://stackoverflow.com/questions/2790001/fixing-javascript-array-functions-in-internet-explorer-indexof-foreach-etc + * + * Use (Modernizr.svg==true) to detect whether it's okay to draw a graph. + */ +'use strict'; +window.Element = window.Element || {'prototype': {}}; +window.CSSStyleDeclaration = window.CSSStyleDeclaration || {'prototype':{}}; + +// Add ECMA262-5 method binding if not supported natively +// +if (!('bind' in Function.prototype)) { + Function.prototype.bind= function(owner) { + var that= this; + if (arguments.length<=1) { + return function() { + return that.apply(owner, arguments); + }; + } else { + var args= Array.prototype.slice.call(arguments, 1); + return function() { + return that.apply(owner, arguments.length===0? args : args.concat(Array.prototype.slice.call(arguments))); + }; + } + }; +} + +// Add ECMA262-5 string trim if not supported natively +// +if (!('trim' in String.prototype)) { + String.prototype.trim= function() { + return this.replace(/^\s+/, '').replace(/\s+$/, ''); + }; +} + +// Add ECMA262-5 Array methods if not supported natively +// +if (!('indexOf' in Array.prototype)) { + Array.prototype.indexOf= function(find, i /*opt*/) { + if (i===undefined) i= 0; + if (i<0) i+= this.length; + if (i<0) i= 0; + for (var n= this.length; ithis.length-1) i= this.length-1; + for (i++; i-->0;) /* i++ because from-argument is sadly inclusive */ + if (i in this && this[i]===find) + return i; + return -1; + }; +} +if (!('forEach' in Array.prototype)) { + Array.prototype.forEach= function(action, that /*opt*/) { + for (var i= 0, n= this.length; i -
+
-
--- a/ckanext/ga_report/templates/ga_report/notes.html +++ b/ckanext/ga_report/templates/ga_report/notes.html @@ -7,7 +7,7 @@

Notes

  • "Views" is the number of times a page was loaded in users' browsers.
    • -
  • "Downloads" is the number of times a user has clicked to download either an original or cached resource for a particular dataset since December 2012
    • +
  • "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.
  • These usage statistics are confined to users with javascript enabled, which excludes web crawlers and API calls.
  • 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.
--- a/ckanext/ga_report/templates/ga_report/publisher/index.html +++ b/ckanext/ga_report/templates/ga_report/publisher/index.html @@ -14,12 +14,18 @@ Download as CSV

+
  • +

    Graph Legend

    +
    +
    +
    • + --- a/ckanext/ga_report/templates/ga_report/publisher/read.html +++ b/ckanext/ga_report/templates/ga_report/publisher/read.html @@ -10,6 +10,7 @@ + @@ -22,6 +23,11 @@

    Download as CSV

    + +
  • +

    Graph Legend

    +
    +
    • --- a/ckanext/ga_report/templates/ga_report/site/index.html +++ b/ckanext/ga_report/templates/ga_report/site/index.html @@ -10,7 +10,9 @@ + + @@ -22,6 +24,12 @@

    Download as CSV

    + +
  • +

    Graph Legend

    +
    +
    (No graph loaded)
    +
    • @@ -42,38 +50,36 @@
    -
    +
    @@ -94,20 +100,20 @@
    Name
    - ${rickshaw_graph(c.browser_versions_graph,'browser-versions')} + ${rickshaw_graph(c.browser_versions_graph,'browser-versions',mode='stack')}

    Note: Where a browser has a large number of versions, these have been grouped together.

    ${stat_table(c.browser_versions)}
    - ${rickshaw_graph(c.browsers_graph,'browsers')} + ${rickshaw_graph(c.browsers_graph,'browsers',mode='stack')} ${stat_table(c.browsers)}
    - ${rickshaw_graph(c.os_graph,'os')} + ${rickshaw_graph(c.os_graph,'os',mode='stack')} ${stat_table(c.os)}
    - ${rickshaw_graph(c.os_versions_graph,'os_versions')} + ${rickshaw_graph(c.os_versions_graph,'os_versions',mode='stack')} ${stat_table(c.os_versions)}
    @@ -115,16 +121,16 @@ ${social_table(c.social_referrer_totals)}
    - ${rickshaw_graph(c.social_networks_graph, 'social_networks')} + ${rickshaw_graph(c.social_networks_graph, 'social_networks',mode='stack')}

    Percentage of visits that were referred from these social networks

    ${stat_table(c.social_networks, 'Visits')}
    - ${rickshaw_graph(c.languages_graph,'languages')} + ${rickshaw_graph(c.languages_graph,'languages',mode='stack')} ${stat_table(c.languages)}
    - ${rickshaw_graph(c.country_graph,'country')} + ${rickshaw_graph(c.country_graph,'country',mode='stack')} ${stat_table(c.country)}
    @@ -135,20 +141,14 @@