--- a/ckanext/ga_report/public/scripts/ckanext_ga_reports.js +++ b/ckanext/ga_report/public/scripts/ckanext_ga_reports.js @@ -4,14 +4,22 @@ CKAN.GA_Reports.render_rickshaw = function( css_name, data, mode, colorscheme ) { var graphLegends = $('#graph-legend-container'); - if (!Modernizr.svg) { + function renderError(alertClass,alertText,legendText) { $("#chart_"+css_name) - .html( '
Your browser does not support vector graphics. No graphs can be rendered.
') + .html( '
'+alertText+'
') .closest('.rickshaw_chart_container').css('height',50); var myLegend = $('
') - .html('(Graph cannot be rendered)') + .html(legendText) .appendTo(graphLegends); + } + + if (!Modernizr.svg) { + renderError('','Your browser does not support vector graphics. No graphs can be rendered.','(Graph cannot be rendered)'); return; + } + if (data.length==0) { + renderError('alert-info','There is not enough data to render a graph.','(No graph available)'); + return } var myLegend = $('
').appendTo(graphLegends); @@ -19,6 +27,8 @@ $.each(data, function(i, object) { object['color'] = palette.color(); }); + // Rickshaw renders the legend in reverse order... + data.reverse(); var graphElement = document.querySelector("#chart_"+css_name); @@ -28,7 +38,9 @@ series: data , 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( { graph: graph, orientation: 'left', @@ -43,6 +55,7 @@ graph: graph, legend: legend } ); + myLegend.prepend('
Click on a series below to isolate its graph:
'); graph.render(); }; @@ -52,24 +65,29 @@ * Sparkline graphs should be drawn. * Note that they cannot be drawn sooner. */ + var created = false; $('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); - } + function() { + if (!created) { + 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); + created = true; + } + $.sparkline_display_visible(); + } ); }; @@ -79,7 +97,7 @@ * Show the correct rickshaw graph in the sidebar. * Not to be called before all graphs load. */ - $('a[data-toggle="hashchange"]').on( + $('a[data-toggle="hashtab"]').on( 'shown', function(e) { var href = $(e.target).attr('href'); @@ -92,27 +110,23 @@ } legend_name = '#legend_'+legend_name; $('#graph-legend-container > *').hide(); + $('#graph-legend-container .instructions').show(); $(legend_name).show(); } ); + /* The first tab might already have been shown */ + $('li.active > a[data-toggle="hashtab"]').trigger('shown'); }; -/* - * 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'); } - }); -}); +CKAN.GA_Reports.bind_month_selector = function() { + var handler = function(e) { + var target = $(e.delegateTarget); + var form = target.closest('form'); + var url = form.attr('action')+'?month='+target.val()+window.location.hash; + window.location = url; + }; + var selectors = $('select[name="month"]'); + assert(selectors.length>0); + selectors.bind('change', handler); +};