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="")
{
$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;

View file

@ -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);");
}
//////////////////////////////////////////////////////////////////////////////////////

View file

@ -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);");
// JavascriptReady("$(window).resize(graph_resized);");

View file

@ -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));
}