Fixes #3628, fix bug where clicking on sparkline doesn't use limit selector...

Fixes #3628, fix bug where clicking on sparkline doesn't use limit selector parameters when reloading graph, refactored sparkline.js and added new 'reload' event to datatable DOM elements.


git-svn-id: http://dev.piwik.org/svn/trunk@7673 59fd770c-687e-43c8-a1e3-f5a4ff64c105

plugins/CoreHome/templates/datatable.js

@@ -237,6 +237,7 @@ dataTable.prototype =
 		self.handleReportDocumentation(domElem);
 		self.handleRowActions(domElem);
 		self.handleRelatedReports(domElem);
+		self.handleTriggeredEvents(domElem);
 	},
 	
 	handleLimit: function(domElem)
@@ -1434,6 +1435,35 @@ dataTable.prototype =
 		});
 	},
 	
+	/**
+	 * Handle events that other code triggers on this table.
+	 * 
+	 * You can trigger one of these events to get the datatable to do things,
+	 * such as reload its data.
+	 * 
+	 * Events handled:
+	 *  - reload: Triggering 'reload' on a datatable DOM element will
+	 *            reload the datatable's data. You can pass in an object mapping
+	 *            parameters to set before reloading data.
+	 *
+	 *    $(datatableDomElem).trigger('reload', {columns: 'nb_visits,nb_actions', idSite: 2});
+	 */
+	handleTriggeredEvents: function(domElem)
+	{
+		var self = this;
+		
+		// reload datatable w/ new params if desired (NOTE: must use 'bind', not 'on')
+		$(domElem).bind('reload', function(e, paramOverride) {
+			paramOverride = paramOverride || {};
+			for (var name in paramOverride)
+			{
+				self.param[name] = paramOverride[name];
+			};
+			
+			self.reloadAjaxDataTable(true);
+		});
+	},
+	
 	// also used in action data table
 	doHandleRowActions: function(trs)
 	{
@@ -1643,6 +1673,7 @@ actionDataTable.prototype =
 	handleLimit: dataTable.prototype.handleLimit,
 	notifyWidgetParametersChange: dataTable.prototype.notifyWidgetParametersChange,
 	handleRelatedReports: dataTable.prototype.handleRelatedReports,
+	handleTriggeredEvents: dataTable.prototype.handleTriggeredEvents,
 	_findReportHeader: dataTable.prototype._findReportHeader,
 	
 	//initialisation of the actionDataTable
@@ -1693,6 +1724,7 @@ actionDataTable.prototype =
 		self.handleColumnDocumentation(domElem);
 		self.handleReportDocumentation(domElem);
 		self.handleRelatedReports(domElem);
+		self.handleTriggeredEvents(domElem);
 	},
 	
 	//see dataTable::applyCosmetics

plugins/CoreHome/templates/sparkline.js

@@ -6,60 +6,46 @@
  */
 
 function initializeSparklines () {
-	$("a[name='evolutionGraph']").each( function() {
+	$("a[name='evolutionGraph']").each(function() {
 		var graph = $(this);
-		if(graph && graph.size() > 0) {
-			//try to find sparklines and add them clickable behaviour
-			$(this).parent().find('div.sparkline').each( function() {
-				var url = "";
-				var sparklineUrl = '';
-				//find the sparkline and get it's src attribute
-				$("img.sparkline", this).each(function() {
-					//search viewDataTable parameter and replace it with value for chart
-					var reg = new RegExp("(viewDataTable=sparkline)", "g");
-					sparklineUrl = this.src;
-					url = sparklineUrl.replace(reg,'viewDataTable=generateDataChartEvolution');
+		
+		// try to find sparklines and add them clickable behaviour
+		graph.parent().find('div.sparkline').each(function() {
+			// find the sparkline and get it's src attribute
+			var sparklineUrl = $('img.sparkline', this).attr('src'),
+				columns = broadcast.getParamValue('columns', sparklineUrl);
+			
+			if (sparklineUrl != "")
+			{
+				// on click, reload the graph with the new url
+				$(this).click(function() {
+					var idDataTable = graph.attr('graphId'),
+						dataTable = $('#' + idDataTable);
+					
+					// when the metrics picker is used, the id of the data table might be updated (which is correct behavior).
+					// for example, in goal reports it might change from GoalsgetEvolutionGraph to GoalsgetEvolutionGraph1. 
+					// if this happens, we can't find the graph using $('#'+idDataTable+"Chart");
+					// instead, we just use the first evolution graph we can find.
+					if (dataTable.length == 0)
+					{
+						dataTable = $('div.dataTableGraphEvolutionWrapper').first().closest('.dataTable');
+					}
+					
+					// reload the datatable w/ a new column & scroll to the graph
+					dataTable.trigger('reload', {columns: columns});
 				});
-				if(url != ""){
-					//on click, reload the graph with the new url
-					$(this).click( function() {
-						var idDataTable = graph.attr('graphId');
-						// get the main page graph and reload with new data
-						var chart = $('#'+idDataTable+"Chart");
-						// when the metrics picker is used, the id of the data table might be updated (which is correct behavior).
-						// for example, in goal reports it might change from GoalsgetEvolutionGraph to GoalsgetEvolutionGraph1. 
-						// if this happens, we can't find the graph using $('#'+idDataTable+"Chart");
-						// instead, we just use the first evolution graph we can find.
-						if (chart.size() == 0) {
-							chart = $('div.dataTableGraphEvolutionWrapper div.piwik-graph');
-						}
-						chart.trigger('showLoading');
-						$.get(url, {}, function(data) {
-							chart.trigger('replot', data);
-						}, 'json');
-						piwikHelper.lazyScrollTo(graph[0], 400);
-						// set the new clicked column and idGoal in the datatable object
-						var sparklineColumn = broadcast.getValueFromUrl('columns', sparklineUrl);
-						var idGoal = broadcast.getValueFromUrl('idGoal', sparklineUrl);
-						if(dataTables[idDataTable])
-						{
-							dataTables[idDataTable].setGraphedColumn(sparklineColumn);
-							dataTables[idDataTable].param.idGoal = idGoal;
-						}
-					});
-					$(this).hover( 	
-						function() { 
-							$(this).css({
-										"cursor": "pointer", 
-										"border-bottom": "1px dashed #C3C3C3"
-									});
-						}, 
-						function(){
-							$(this).css({"border-bottom":"1px solid white"});
-						}
-					);
-				}
-			});
-		}
+				$(this).hover( 	
+					function() { 
+						$(this).css({
+									"cursor": "pointer", 
+									"border-bottom": "1px dashed #C3C3C3"
+								});
+					}, 
+					function(){
+						$(this).css({"border-bottom":"1px solid white"});
+					}
+				);
+			}
+		});
 	});
 }