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...
This commit is contained in:
Tanguy Pruvot 2016-05-01 07:52:02 +02:00
parent cf9b70c04b
commit 2300314280
4 changed files with 30 additions and 20 deletions

View file

@ -47,7 +47,7 @@ function BackendQuickClean()
function marketHistoryPrune($symbol="") function marketHistoryPrune($symbol="")
{ {
$delay2M = settings_get("history_prune_delay", time() - 61*24*60*60); // 2 months $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 // Prune records older than 1 week, one max per hour
$delay7D = time() - 7*24*60*60; $delay7D = time() - 7*24*60*60;

View file

@ -55,8 +55,6 @@ echo <<<END
<br/> <br/>
</div> </div>
<div id="main_results"></div>
<style type="text/css"> <style type="text/css">
table.dataGrid a.red, table.dataGrid a.red:visited, a.red { color: darkred; } table.dataGrid a.red, table.dataGrid a.red:visited, a.red { color: darkred; }
div#main_actions { div#main_actions {
@ -79,6 +77,8 @@ tr.ssrow.disabled { background-color: #fdd; color: darkred; }
tr.ssrow.orphan { color: darkred; } tr.ssrow.orphan { color: darkred; }
</style> </style>
<div id="main_results"></div>
<script type="text/javascript"> <script type="text/javascript">
function uninstall_coin() function uninstall_coin()
@ -103,11 +103,8 @@ function main_refresh()
function main_ready(data) function main_ready(data)
{ {
$('#main_results').html(data); $('#main_results').html(data);
$(window).trigger('resize'); // will draw graph
main_timeout = setTimeout(main_refresh, main_delay); main_timeout = setTimeout(main_refresh, main_delay);
var sumHeight = 0 + $('#sums').height();
if ($('#main_actions').height() < sumHeight) {
// $('#main_actions').height(sumHeight);
}
} }
function main_error() function main_error()
@ -151,4 +148,9 @@ END;
JavascriptReady("main_refresh();"); JavascriptReady("main_refresh();");
if (yaamp_watched_coin($coin->symbol)) {
$this->renderPartial('coin_market_graph', array('coin'=>$coin));
JavascriptReady("$(window).resize(graph_resized);");
}
////////////////////////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////////////////////////

View file

@ -34,6 +34,9 @@ echo <<<end
margin-left: 8px; margin-left: 8px;
width: 36px; width: 36px;
} }
.jqplot-seriesToggle {
cursor: pointer;
}
.jqplot-table-legend-swatch { .jqplot-table-legend-swatch {
height: 8px; height: 8px;
width: 8px; width: 8px;
@ -47,14 +50,17 @@ echo <<<end
<script type="text/javascript"> <script type="text/javascript">
var last_graph_update = 0; var last_graph_update, graph_need_update, graph_timeout = 0;
function graph_refresh() function graph_refresh()
{ {
var now = Date.now()/1000; var now = Date.now()/1000;
if (now < last_graph_update + 1) return; if (!graph_need_update && (now - 300) < last_graph_update) {
last_graph_update = now; return;
}
last_graph_update = now; graph_need_update = false;
if (graph_timeout) clearTimeout(graph_timeout);
var w = 0 + $('div#graph_history_price').parent().width(); var w = 0 + $('div#graph_history_price').parent().width();
w = w - $('div#sums').width() - 32; w = w - $('div#sums').width() - 32;
@ -67,6 +73,13 @@ function graph_refresh()
$.get(url, '', graph_price_data); $.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) function graph_price_data(data)
{ {
var t = $.parseJSON(data); var t = $.parseJSON(data);
@ -134,7 +147,8 @@ function graph_price_data(data)
if (i % tickInterval == 0) { if (i % tickInterval == 0) {
var dt = new Date(0+x2ticks[i].value); var dt = new Date(0+x2ticks[i].value);
day = '<b>'+$.datepicker.formatDate('dd M', dt)+'</b>'; 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; lastDay = day;
graph.axes.xaxis.ticks.push([x2ticks[i].value, label]); graph.axes.xaxis.ticks.push([x2ticks[i].value, label]);
} }
@ -213,7 +227,8 @@ function graph_balance_data(data)
if (i % tickInterval == 0) { if (i % tickInterval == 0) {
var dt = new Date(0+x2ticks[i].value); var dt = new Date(0+x2ticks[i].value);
day = '<b>'+$.datepicker.formatDate('dd M', dt)+'</b>'; 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; lastDay = day;
graph.axes.xaxis.ticks.push([x2ticks[i].value, label]); graph.axes.xaxis.ticks.push([x2ticks[i].value, label]);
} }
@ -224,4 +239,4 @@ function graph_balance_data(data)
</script> </script>
end; end;
JavascriptReady("graph_refresh(); $(window).resize(graph_refresh);"); // JavascriptReady("$(window).resize(graph_resized);");

View file

@ -179,9 +179,6 @@ if(!$info)
echo '<td>'.bitcoinvaluetoa($coin->price).'</td>'; echo '<td>'.bitcoinvaluetoa($coin->price).'</td>';
echo '<td colspan="2">'; echo '<td colspan="2">';
echo "</tr></tbody></table><br/>"; echo "</tr></tbody></table><br/>";
if (yaamp_watched_coin($coin->symbol)) {
$this->renderPartial('coin_market_graph', array('coin'=>$coin));
}
return; return;
} }
@ -430,7 +427,3 @@ if (empty($sums)) {
} }
echo '</tbody></table></div>'; echo '</tbody></table></div>';
if (yaamp_watched_coin($coin->symbol)) {
$this->renderPartial('coin_market_graph', array('coin'=>$coin));
}