From 23003142804e27afa5ad850b4e38fa283dfd3468 Mon Sep 17 00:00:00 2001
From: Tanguy Pruvot <tanguy.pruvot@gmail.com>
Date: Sun, 1 May 2016 07:52:02 +0200
Subject: [PATCH] wallet: enhance graph ajax refresh and resize

prevent graph flicker on ajax refresh, only reload data after 5mn
and/or when the browser window is resized.

should reduce a bit the browser cpu usage...
---
 web/yaamp/core/backend/system.php            |  2 +-
 web/yaamp/modules/site/coin.php              | 14 +++++-----
 web/yaamp/modules/site/coin_market_graph.php | 27 +++++++++++++++-----
 web/yaamp/modules/site/coin_results.php      |  7 -----
 4 files changed, 30 insertions(+), 20 deletions(-)

diff --git a/web/yaamp/core/backend/system.php b/web/yaamp/core/backend/system.php
index 8531741..84c132d 100644
--- a/web/yaamp/core/backend/system.php
+++ b/web/yaamp/core/backend/system.php
@@ -47,7 +47,7 @@ function BackendQuickClean()
 function marketHistoryPrune($symbol="")
 {
 	$delay2M = settings_get("history_prune_delay", time() - 61*24*60*60); // 2 months
-	dborun("DELETE FROM market_history WHERE time < $delay2M");
+	dborun("DELETE FROM market_history WHERE time < ".intval($delay2M));
 
 	// Prune records older than 1 week, one max per hour
 	$delay7D = time() - 7*24*60*60;
diff --git a/web/yaamp/modules/site/coin.php b/web/yaamp/modules/site/coin.php
index 69cc25a..746f39f 100644
--- a/web/yaamp/modules/site/coin.php
+++ b/web/yaamp/modules/site/coin.php
@@ -55,8 +55,6 @@ echo <<<END
 <br/>
 </div>
 
-<div id="main_results"></div>
-
 <style type="text/css">
 table.dataGrid a.red, table.dataGrid a.red:visited, a.red { color: darkred; }
 div#main_actions {
@@ -79,6 +77,8 @@ tr.ssrow.disabled { background-color: #fdd; color: darkred; }
 tr.ssrow.orphan { color: darkred; }
 </style>
 
+<div id="main_results"></div>
+
 <script type="text/javascript">
 
 function uninstall_coin()
@@ -103,11 +103,8 @@ function main_refresh()
 function main_ready(data)
 {
 	$('#main_results').html(data);
+	$(window).trigger('resize'); // will draw graph
 	main_timeout = setTimeout(main_refresh, main_delay);
-	var sumHeight = 0 + $('#sums').height();
-	if ($('#main_actions').height() < sumHeight) {
-	//	$('#main_actions').height(sumHeight);
-	}
 }
 
 function main_error()
@@ -151,4 +148,9 @@ END;
 
 JavascriptReady("main_refresh();");
 
+if (yaamp_watched_coin($coin->symbol)) {
+	$this->renderPartial('coin_market_graph', array('coin'=>$coin));
+	JavascriptReady("$(window).resize(graph_resized);");
+}
+
 //////////////////////////////////////////////////////////////////////////////////////
diff --git a/web/yaamp/modules/site/coin_market_graph.php b/web/yaamp/modules/site/coin_market_graph.php
index 8d92544..6b9902e 100644
--- a/web/yaamp/modules/site/coin_market_graph.php
+++ b/web/yaamp/modules/site/coin_market_graph.php
@@ -34,6 +34,9 @@ echo <<<end
 	margin-left: 8px;
 	width: 36px;
 }
+.jqplot-seriesToggle {
+	cursor: pointer;
+}
 .jqplot-table-legend-swatch {
 	height: 8px;
 	width: 8px;
@@ -47,14 +50,17 @@ echo <<<end
 
 <script type="text/javascript">
 
-var last_graph_update = 0;
+var last_graph_update, graph_need_update, graph_timeout = 0;
 
 function graph_refresh()
 {
 	var now = Date.now()/1000;
 
-	if (now < last_graph_update + 1) return;
-	last_graph_update = now;
+	if (!graph_need_update && (now - 300) < last_graph_update) {
+		return;
+	}
+	last_graph_update = now; graph_need_update = false;
+	if (graph_timeout) clearTimeout(graph_timeout);
 
 	var w = 0 + $('div#graph_history_price').parent().width();
 	w = w - $('div#sums').width() - 32;
@@ -67,6 +73,13 @@ function graph_refresh()
 	$.get(url, '', graph_price_data);
 }
 
+function graph_resized()
+{
+	graph_need_update = true;
+	if (graph_timeout) clearTimeout(graph_timeout);
+	graph_timeout = setTimeout(graph_refresh, 2000);
+}
+
 function graph_price_data(data)
 {
 	var t = $.parseJSON(data);
@@ -134,7 +147,8 @@ function graph_price_data(data)
 		if (i % tickInterval == 0) {
 			var dt = new Date(0+x2ticks[i].value);
 			day = '<b>'+$.datepicker.formatDate('dd M', dt)+'</b>';
-			label = (day == lastDay) ? $.jsDate.strftime(dt, '%H:%M') : day;
+			if (x2ticks.length > 500 && day == lastDay) label = '';
+			else label = (day == lastDay) ? $.jsDate.strftime(dt, '%H:%M') : day;
 			lastDay = day;
 			graph.axes.xaxis.ticks.push([x2ticks[i].value, label]);
 		}
@@ -213,7 +227,8 @@ function graph_balance_data(data)
 		if (i % tickInterval == 0) {
 			var dt = new Date(0+x2ticks[i].value);
 			day = '<b>'+$.datepicker.formatDate('dd M', dt)+'</b>';
-			label = (day == lastDay) ? $.jsDate.strftime(dt, '%H:%M') : day;
+			if (x2ticks.length > 500 && day == lastDay) label = '';
+			else label = (day == lastDay) ? $.jsDate.strftime(dt, '%H:%M') : day;
 			lastDay = day;
 			graph.axes.xaxis.ticks.push([x2ticks[i].value, label]);
 		}
@@ -224,4 +239,4 @@ function graph_balance_data(data)
 </script>
 end;
 
-JavascriptReady("graph_refresh(); $(window).resize(graph_refresh);");
\ No newline at end of file
+// JavascriptReady("$(window).resize(graph_resized);");
\ No newline at end of file
diff --git a/web/yaamp/modules/site/coin_results.php b/web/yaamp/modules/site/coin_results.php
index 7710bc6..b567125 100644
--- a/web/yaamp/modules/site/coin_results.php
+++ b/web/yaamp/modules/site/coin_results.php
@@ -179,9 +179,6 @@ if(!$info)
 	echo '<td>'.bitcoinvaluetoa($coin->price).'</td>';
 	echo '<td colspan="2">';
 	echo "</tr></tbody></table><br/>";
-	if (yaamp_watched_coin($coin->symbol)) {
-		$this->renderPartial('coin_market_graph', array('coin'=>$coin));
-	}
 	return;
 }
 
@@ -430,7 +427,3 @@ if (empty($sums)) {
 }
 
 echo '</tbody></table></div>';
-
-if (yaamp_watched_coin($coin->symbol)) {
-	$this->renderPartial('coin_market_graph', array('coin'=>$coin));
-}