From: Tom Rees Date: Thu, 24 Jan 2013 18:37:03 +0000 Subject: #167 JS development of hashchange-dependant tabbing mechanism, and of Rickshaw graphs with separate legends. X-Git-Url: http://maxious.lambdacomplex.org/git/?p=ckanext-ga-report.git&a=commitdiff&h=d6f23a99f2db56c18ab16876b08a1c09d96a8d7e --- #167 JS development of hashchange-dependant tabbing mechanism, and of Rickshaw graphs with separate legends. --- --- 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'])').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 hoverDetail = new Rickshaw.Graph.HoverDetail( { + graph: graph, + formatter: function(series, x, y) { + var date = '' + new Date(x * 1000).toUTCString() + ''; + var swatch = ''; + var content = swatch + series.name + ": " + parseInt(y) + '
' + date; + return content; + } + } ); + 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'); } + }); +}); + --- a/ckanext/ga_report/templates/ga_report/ga_util.html +++ b/ckanext/ga_report/templates/ga_report/ga_util.html @@ -30,36 +30,13 @@ -
+
-
--- 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 @@ -20,6 +20,7 @@ + --- a/ckanext/ga_report/templates/ga_report/publisher/read.html +++ b/ckanext/ga_report/templates/ga_report/publisher/read.html @@ -10,6 +10,7 @@ + --- a/ckanext/ga_report/templates/ga_report/site/index.html +++ b/ckanext/ga_report/templates/ga_report/site/index.html @@ -10,6 +10,7 @@ + @@ -22,6 +23,12 @@

Download as CSV

+ +
  • +

    Graph Legend

    +
    +
    (No graph loaded)
    +
    • @@ -42,38 +49,36 @@
    -
    +
    @@ -94,20 +99,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 +120,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 +140,9 @@