[162] Subtle hinting that graph legends can be toggled.
[ckanext-ga-report.git] / ckanext / ga_report / public / scripts / ckanext_ga_reports.js
blob:a/ckanext/ga_report/public/scripts/ckanext_ga_reports.js -> blob:b/ckanext/ga_report/public/scripts/ckanext_ga_reports.js
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>');
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.
*/ */
$('a[href="#totals"]').on( $('a[href="#totals"]').on(
'shown', 'shown',
function() { function() {
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);
} }
); );
}; };
   
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();
$(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'); }
}); });
}); });