| 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; | |
| $('a[href="#totals"]').on( | $('a[href="#totals"]').on( |
| 'shown', | 'shown', |
| function() { | function() { |
| var sparkOptions = { | if (!created) { |
| enableTagOptions: true, | var sparkOptions = { |
| type: 'line', | enableTagOptions: true, |
| width: 100, | type: 'line', |
| height: 26, | width: 100, |
| chartRangeMin: 0, | height: 26, |
| spotColor: '', | chartRangeMin: 0, |
| maxSpotColor: '', | spotColor: '', |
| minSpotColor: '', | maxSpotColor: '', |
| highlightSpotColor: '000000', | minSpotColor: '', |
| lineColor: '3F8E6D', | highlightSpotColor: '000000', |
| fillColor: 'B7E66B' | lineColor: '3F8E6D', |
| }; | fillColor: 'B7E66B' |
| $('.sparkline').sparkline('html',sparkOptions); | }; |
| } | $('.sparkline').sparkline('html',sparkOptions); |
| created = true; | |
| } | |
| $.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="hashchange"]').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(); |
| } | } |
| ); | ); |
| }; | }; |
| 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". | * Custom bootstrap plugin for handling data-toggle="hashchange". |
| * Behaves like data-toggle="tab" but I respond to the 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? | * Page state is memo-ized in the URL this way. Why doesn't Bootstrap do this? |
| */ | */ |
| $(function() { | $(function() { |
| var mapping = {}; | var mapping = {}; |
| $('a[data-toggle="hashchange"]').each( | $('a[data-toggle="hashchange"]').each( |
| function(i,link) { | function(i,link) { |
| link = $(link); | link = $(link); |
| mapping[link.attr('href')] = link; | mapping[link.attr('href')] = link; |
| } | } |
| ); | ); |
| $(window).hashchange(function() { | $(window).hashchange(function() { |
| var link = mapping[window.location.hash]; | var link = mapping[window.location.hash]; |
| if (link) { link.tab('show'); } | if (link) { link.tab('show'); } |
| }); | }); |
| }); | }); |