mirror of
https://github.com/LBRYFoundation/pool.git
synced 2025-09-30 15:20:36 +00:00
wallet: refactor graphes + vertical scroll to show more txs
This commit is contained in:
Tanguy Pruvot
parent
25a76ce458
commit
e6365fcc93
3 changed files with 258 additions and 249 deletions
|
|
@ -8,9 +8,6 @@ if (!$coin) {
|
||||||
|
|
||||||
$this->pageTitle = 'Wallet - '.$coin->symbol;
|
$this->pageTitle = 'Wallet - '.$coin->symbol;
|
||||||
|
|
||||||
$maxrows = arraySafeVal($_REQUEST,'rows',15);
|
|
||||||
$since = arraySafeVal($_REQUEST,'since',time()-(7*24*3600));
|
|
||||||
|
|
||||||
if (!empty($coin->algo) && $coin->algo != 'PoS')
|
if (!empty($coin->algo) && $coin->algo != 'PoS')
|
||||||
user()->setState('yaamp-algo', $coin->algo);
|
user()->setState('yaamp-algo', $coin->algo);
|
||||||
|
|
||||||
|
|
@ -23,15 +20,10 @@ $sellamount = $coin->balance;
|
||||||
echo getAdminSideBarLinks().'<br/><br/>';
|
echo getAdminSideBarLinks().'<br/><br/>';
|
||||||
echo getAdminWalletLinks($coin, $info, 'wallet');
|
echo getAdminWalletLinks($coin, $info, 'wallet');
|
||||||
|
|
||||||
echo '<br><div id="main_results"></div>';
|
$maxrows = arraySafeVal($_REQUEST,'rows', 200);
|
||||||
|
$since = arraySafeVal($_REQUEST,'since', time() - (7*24*3600)); // one week
|
||||||
|
|
||||||
// todo: use router createUrl
|
echo '<div id="main_actions">';
|
||||||
$url = '/site/coin?id='.$coin->id.'&since='.(time()-31*24*3600).'&rows='.($maxrows*2);
|
|
||||||
$moreurl = CHtml::link('Click here to show more transactions...', $url);
|
|
||||||
|
|
||||||
echo '<div class="loadfooter" style="margin-top: 8px;"><br/>'.$moreurl.'</div>';
|
|
||||||
|
|
||||||
echo '<div id="main_actions" style="margin-top: 8px;">';
|
|
||||||
|
|
||||||
/*
|
/*
|
||||||
echo "<br><a href='/site/makeconfigfile?id=$coin->id'><b>MAKE CONFIG & START</b></a>";
|
echo "<br><a href='/site/makeconfigfile?id=$coin->id'><b>MAKE CONFIG & START</b></a>";
|
||||||
|
|
@ -60,15 +52,30 @@ echo <<<END
|
||||||
<br/><a href="/site/clearearnings?id={$coin->id}"><b>CLEAR EARNINGS</b></a>
|
<br/><a href="/site/clearearnings?id={$coin->id}"><b>CLEAR EARNINGS</b></a>
|
||||||
<br/><a href="/site/checkblocks?id={$coin->id}"><b>UPDATE BLOCKS</b></a>
|
<br/><a href="/site/checkblocks?id={$coin->id}"><b>UPDATE BLOCKS</b></a>
|
||||||
<br/><a href="/site/payuserscoin?id={$coin->id}"><b>DO PAYMENTS</b></a>
|
<br/><a href="/site/payuserscoin?id={$coin->id}"><b>DO PAYMENTS</b></a>
|
||||||
|
<br/>
|
||||||
<br><br><br><br><br><br><br><br><br><br>
|
|
||||||
<br><br><br><br><br><br><br><br><br><br>
|
|
||||||
<br><br><br><br><br><br><br><br><br><br>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div id="main_results"></div>
|
||||||
|
|
||||||
<style type="text/css">
|
<style type="text/css">
|
||||||
loadfooter.main_actions { min-width: 200px; }
|
table.dataGrid a.red, table.dataGrid a.red:visited, a.red { color: darkred; }
|
||||||
a.red { color: darkred; }
|
div#main_actions {
|
||||||
|
position: absolute; top: 60px; right: 16px; width: 280px; text-align: right;
|
||||||
|
}
|
||||||
|
div#markets {
|
||||||
|
overflow-x: hidden; overflow-y: scroll; max-height: 156px;
|
||||||
|
}
|
||||||
|
div#transactions {
|
||||||
|
overflow-x: hidden; overflow-y: scroll; min-height: 200px; max-height: 360px;
|
||||||
|
}
|
||||||
|
div#sums {
|
||||||
|
overflow-x: hidden; overflow-y: scroll; min-height: 250px; max-height: 600px;
|
||||||
|
width: 380px; float: left; margin-top: 16px; margin-bottom: 8px; margin-right: 16px;
|
||||||
|
}
|
||||||
|
.page .footer { clear: both; }
|
||||||
|
tr.ssrow.bestmarket { background-color: #dfd; }
|
||||||
|
tr.ssrow.disabled { background-color: #fdd; color: darkred; }
|
||||||
|
tr.ssrow.orphan { color: darkred; }
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
|
|
@ -98,7 +105,7 @@ function main_ready(data)
|
||||||
main_timeout = setTimeout(main_refresh, main_delay);
|
main_timeout = setTimeout(main_refresh, main_delay);
|
||||||
var sumHeight = 0 + $('#sums').height();
|
var sumHeight = 0 + $('#sums').height();
|
||||||
if ($('#main_actions').height() < sumHeight) {
|
if ($('#main_actions').height() < sumHeight) {
|
||||||
$('#main_actions').height(sumHeight);
|
// $('#main_actions').height(sumHeight);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -142,3 +149,5 @@ Amount: <input type=text id="input_sell_amount" value="$sellamount">
|
||||||
END;
|
END;
|
||||||
|
|
||||||
JavascriptReady("main_refresh();");
|
JavascriptReady("main_refresh();");
|
||||||
|
|
||||||
|
//////////////////////////////////////////////////////////////////////////////////////
|
||||||
|
|
|
||||||
210
web/yaamp/modules/site/coin_market_graph.php
Normal file
210
web/yaamp/modules/site/coin_market_graph.php
Normal file
|
|
@ -0,0 +1,210 @@
|
||||||
|
<?php
|
||||||
|
|
||||||
|
JavascriptFile("/extensions/jqplot/jquery.jqplot.js");
|
||||||
|
JavascriptFile("/extensions/jqplot/plugins/jqplot.enhancedLegendRenderer.js");
|
||||||
|
JavascriptFile("/extensions/jqplot/plugins/jqplot.dateAxisRenderer.js");
|
||||||
|
JavascriptFile("/extensions/jqplot/plugins/jqplot.highlighter.js");
|
||||||
|
|
||||||
|
echo <<<end
|
||||||
|
|
||||||
|
<style type="text/css">
|
||||||
|
#graph_history_price, #graph_history_balance {
|
||||||
|
width: 75%; height: 300px; float: right;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
.jqplot-title {
|
||||||
|
margin-bottom: 3px;
|
||||||
|
}
|
||||||
|
.jqplot-cursor-tooltip,
|
||||||
|
.jqplot-highlighter-tooltip {
|
||||||
|
background: rgba(220,220,220, .6) !important;
|
||||||
|
border: 1px solid gray;
|
||||||
|
padding: 2px 4px;
|
||||||
|
z-index: 100;
|
||||||
|
}
|
||||||
|
.jqplot-xaxis-tick {
|
||||||
|
margin-top: 4px;
|
||||||
|
}
|
||||||
|
.jqplot-y2axis-tick {
|
||||||
|
font-size: 7pt;
|
||||||
|
margin-top: -4px;
|
||||||
|
margin-left: 8px;
|
||||||
|
width: 36px;
|
||||||
|
}
|
||||||
|
.jqplot-table-legend-swatch {
|
||||||
|
height: 8px;
|
||||||
|
width: 8px;
|
||||||
|
margin-top: 2px;
|
||||||
|
margin-left: 16px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="graph" id="graph_history_price"></div>
|
||||||
|
<div class="graph" id="graph_history_balance"></div>
|
||||||
|
|
||||||
|
<script type="text/javascript">
|
||||||
|
|
||||||
|
var last_graph_update = 0;
|
||||||
|
|
||||||
|
function graph_refresh()
|
||||||
|
{
|
||||||
|
var now = Date.now()/1000;
|
||||||
|
|
||||||
|
if (now < last_graph_update + 1) return;
|
||||||
|
last_graph_update = now;
|
||||||
|
|
||||||
|
var w = 0 + $('div#graph_history_price').parent().width();
|
||||||
|
w = w - $('div#sums').width() - 32;
|
||||||
|
$('.graph').width(w);
|
||||||
|
|
||||||
|
var url = "/site/graphMarketBalance?id={$coin->id}";
|
||||||
|
$.get(url, '', graph_balance_data);
|
||||||
|
|
||||||
|
var url = "/site/graphMarketPrices?id={$coin->id}";
|
||||||
|
$.get(url, '', graph_price_data);
|
||||||
|
}
|
||||||
|
|
||||||
|
function graph_price_data(data)
|
||||||
|
{
|
||||||
|
var t = $.parseJSON(data);
|
||||||
|
var graph = $.jqplot('graph_history_price', t.data,
|
||||||
|
{
|
||||||
|
title: '<b>Market History</b>',
|
||||||
|
animate: false, animateReplot: false,
|
||||||
|
axes: {
|
||||||
|
xaxis: {
|
||||||
|
show: true,
|
||||||
|
tickInterval: 600,
|
||||||
|
tickOptions: { fontSize: '7pt', escapeHTML: false, formatString:'%#d %b<br/>%Hh' },
|
||||||
|
renderer: $.jqplot.DateAxisRenderer
|
||||||
|
},
|
||||||
|
x2axis: {
|
||||||
|
// hidden (top) axis with higher granularity
|
||||||
|
syncTicks: 1,
|
||||||
|
tickInterval: 300,
|
||||||
|
tickOptions: { show: false },
|
||||||
|
renderer: $.jqplot.DateAxisRenderer
|
||||||
|
},
|
||||||
|
y2axis: {
|
||||||
|
min: t.rangeMin, max: t.rangeMax
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
seriesDefaults: {
|
||||||
|
xaxis: 'x2axis',
|
||||||
|
yaxis: 'y2axis',
|
||||||
|
markerOptions: { style: 'circle', size: 2 }
|
||||||
|
},
|
||||||
|
|
||||||
|
grid: {
|
||||||
|
borderWidth: 1,
|
||||||
|
shadowWidth: 0, shadowDepth: 0,
|
||||||
|
background: '#f0f0f0'
|
||||||
|
},
|
||||||
|
|
||||||
|
legend: {
|
||||||
|
labels: t.labels,
|
||||||
|
renderer: jQuery.jqplot.EnhancedLegendRenderer,
|
||||||
|
rendererOptions: { numberRows: 1 },
|
||||||
|
location: 'n',
|
||||||
|
show: true
|
||||||
|
},
|
||||||
|
|
||||||
|
highlighter: {
|
||||||
|
useAxesFormatters: false,
|
||||||
|
tooltipContentEditor: function(str, seriesIndex, pointIndex, jqPlot) {
|
||||||
|
var pt = jqPlot.series[seriesIndex].data[pointIndex];
|
||||||
|
var dt = new Date(0+pt[0]);
|
||||||
|
var date = $.datepicker.formatDate('dd M yy', dt);
|
||||||
|
var time = dt.getHours().toString()+'h'+dt.getMinutes();
|
||||||
|
return date+' '+time+' ' + pt[1]+' BTC';
|
||||||
|
},
|
||||||
|
show: true
|
||||||
|
}
|
||||||
|
});
|
||||||
|
var x2 = graph.axes.x2axis;
|
||||||
|
graph.axes.xaxis.ticks = [];
|
||||||
|
for (var i=0; i < x2._ticks.length; i++) {
|
||||||
|
// put in visible axis, only one tick per 2 hours (24*5mn)...
|
||||||
|
if (i % 24 == 0) {
|
||||||
|
graph.axes.xaxis.ticks.push(x2._ticks[i].value);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
graph.replot(false);
|
||||||
|
}
|
||||||
|
|
||||||
|
function graph_balance_data(data)
|
||||||
|
{
|
||||||
|
var t = $.parseJSON(data);
|
||||||
|
var graph = $.jqplot('graph_history_balance', t.data,
|
||||||
|
{
|
||||||
|
title: '<b>Market Balances</b>',
|
||||||
|
animate: false, animateReplot: false,
|
||||||
|
stackSeries: true,
|
||||||
|
axes: {
|
||||||
|
xaxis: {
|
||||||
|
show: true,
|
||||||
|
tickInterval: 600,
|
||||||
|
tickOptions: { fontSize: '7pt', escapeHTML: false, formatString:'%#d %b<br/>%#Hh' },
|
||||||
|
showMinorTicks: false,
|
||||||
|
renderer: $.jqplot.DateAxisRenderer
|
||||||
|
},
|
||||||
|
x2axis: {
|
||||||
|
// hidden (top) axis with higher granularity
|
||||||
|
syncTicks: 1,
|
||||||
|
tickInterval: 300,
|
||||||
|
tickOptions: { show: false },
|
||||||
|
renderer: $.jqplot.DateAxisRenderer
|
||||||
|
},
|
||||||
|
y2axis: {
|
||||||
|
syncTicks: 1,
|
||||||
|
min: t.rangeMin, max: t.rangeMax
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
seriesDefaults: {
|
||||||
|
xaxis: 'x2axis',
|
||||||
|
yaxis: 'y2axis',
|
||||||
|
fill: true
|
||||||
|
},
|
||||||
|
|
||||||
|
grid: {
|
||||||
|
borderWidth: 1,
|
||||||
|
shadowWidth: 0, shadowDepth: 0,
|
||||||
|
background: '#f0f0f0'
|
||||||
|
},
|
||||||
|
|
||||||
|
legend: {
|
||||||
|
labels: t.labels,
|
||||||
|
renderer: jQuery.jqplot.EnhancedLegendRenderer,
|
||||||
|
rendererOptions: { numberRows: 1 },
|
||||||
|
location: 'n',
|
||||||
|
show: true
|
||||||
|
},
|
||||||
|
|
||||||
|
highlighter: {
|
||||||
|
useAxesFormatters: false,
|
||||||
|
tooltipContentEditor: function(str, seriesIndex, pointIndex, jqPlot) {
|
||||||
|
var pt = jqPlot.series[seriesIndex].data[pointIndex];
|
||||||
|
var dt = new Date(0+pt[0]);
|
||||||
|
var date = $.datepicker.formatDate('dd M yy', dt);
|
||||||
|
var time = dt.getHours().toString()+'h';
|
||||||
|
return date+' '+time+' ' + pt[1]+' {$coin->symbol}';
|
||||||
|
},
|
||||||
|
show: true
|
||||||
|
}
|
||||||
|
});
|
||||||
|
var x2 = graph.axes.x2axis;
|
||||||
|
graph.axes.xaxis.ticks = [];
|
||||||
|
for (var i=0; i < x2._ticks.length; i++) {
|
||||||
|
// put in visible axis, only one tick per 2 hours (24*5mn)...
|
||||||
|
if (i % 24 == 0) {
|
||||||
|
graph.axes.xaxis.ticks.push(x2._ticks[i].value);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
graph.replot(false);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
end;
|
||||||
|
|
||||||
|
JavascriptReady("graph_refresh(); $(window).resize(graph_refresh);");
|
||||||
|
|
@ -35,17 +35,12 @@ echo ", ".CHtml::link($reserved1, "/site/payments?id=".$coin->id)." $symbol clea
|
||||||
//////////////////////////////////////////////////////////////////////////////////////
|
//////////////////////////////////////////////////////////////////////////////////////
|
||||||
|
|
||||||
echo <<<end
|
echo <<<end
|
||||||
<style type="text/css">
|
<div id="markets">
|
||||||
tr.ssrow.bestmarket { background-color: #dfd; }
|
|
||||||
tr.ssrow.disabled { background-color: #fdd; color: darkred; }
|
|
||||||
tr.ssrow.orphan { color: darkred; }
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<table class="dataGrid">
|
<table class="dataGrid">
|
||||||
<thead><tr>
|
<thead><tr>
|
||||||
<th width="100">Name</th>
|
<th width="100">Market</th>
|
||||||
<th width="100">Price</th>
|
<th width="100">Bid</th>
|
||||||
<th width="100">Price2</th>
|
<th width="100">Ask</th>
|
||||||
<th width="500">Deposit</th>
|
<th width="500">Deposit</th>
|
||||||
<th width="100">Balance</th>
|
<th width="100">Balance</th>
|
||||||
<th width="100">Locked</th>
|
<th width="100">Locked</th>
|
||||||
|
|
@ -57,7 +52,7 @@ tr.ssrow.orphan { color: darkred; }
|
||||||
</tr></thead><tbody>
|
</tr></thead><tbody>
|
||||||
end;
|
end;
|
||||||
|
|
||||||
$list = getdbolist('db_markets', "coinid={$coin->id} ORDER BY price DESC");
|
$list = getdbolist('db_markets', "coinid={$coin->id} ORDER BY disabled, priority, price DESC");
|
||||||
|
|
||||||
$bestmarket = getBestMarket($coin);
|
$bestmarket = getBestMarket($coin);
|
||||||
foreach($list as $market)
|
foreach($list as $market)
|
||||||
|
|
@ -119,13 +114,13 @@ foreach($list as $market)
|
||||||
echo '<a title="Enable this market" href="/market/enable?id='.$market->id.'&en=1">enable</a>';
|
echo '<a title="Enable this market" href="/market/enable?id='.$market->id.'&en=1">enable</a>';
|
||||||
else
|
else
|
||||||
echo '<a title="Disable this market" href="/market/enable?id='.$market->id.'&en=0">disable</a>';
|
echo '<a title="Disable this market" href="/market/enable?id='.$market->id.'&en=0">disable</a>';
|
||||||
echo ' <a style="color:darkred;" title="Remove this market" href="/market/delete?id='.$market->id.'">delete</a>';
|
echo ' <a class="red" title="Remove this market" href="/market/delete?id='.$market->id.'">delete</a>';
|
||||||
echo '</td>';
|
echo '</td>';
|
||||||
|
|
||||||
echo "</tr>";
|
echo "</tr>";
|
||||||
}
|
}
|
||||||
|
|
||||||
echo "</tbody></table><br>";
|
echo "</tbody></table></div>";
|
||||||
|
|
||||||
//////////////////////////////////////////////////////////////////////////////////////
|
//////////////////////////////////////////////////////////////////////////////////////
|
||||||
|
|
||||||
|
|
@ -144,7 +139,7 @@ if ($DCR) {
|
||||||
$tickets += arraySafeVal($stakeinfo, 'immature', 0);
|
$tickets += arraySafeVal($stakeinfo, 'immature', 0);
|
||||||
}
|
}
|
||||||
|
|
||||||
echo '<table class="dataGrid">';
|
echo '<table id="infos" class="dataGrid">';
|
||||||
echo '<thead><tr>';
|
echo '<thead><tr>';
|
||||||
echo '<th width="30"></th>';
|
echo '<th width="30"></th>';
|
||||||
echo '<th width="30"></th>';
|
echo '<th width="30"></th>';
|
||||||
|
|
@ -193,7 +188,7 @@ $blocks = isset($info['blocks'])? $info['blocks']: '';
|
||||||
|
|
||||||
echo '<td>'.round_difficulty($coin->difficulty).'</td>';
|
echo '<td>'.round_difficulty($coin->difficulty).'</td>';
|
||||||
if(!empty($errors))
|
if(!empty($errors))
|
||||||
echo "<td style='color: red;' title='$errors'>$blocks</td>";
|
echo '<td class="red" title="'.$errors.'">'.$blocks.'</td>';
|
||||||
else
|
else
|
||||||
echo "<td>$blocks</td>";
|
echo "<td>$blocks</td>";
|
||||||
|
|
||||||
|
|
@ -217,17 +212,16 @@ echo '<td>'.$index.'</td>';
|
||||||
echo '</tr>';
|
echo '</tr>';
|
||||||
echo '</tbody></table>';
|
echo '</tbody></table>';
|
||||||
|
|
||||||
echo '<br>';
|
|
||||||
|
|
||||||
//////////////////////////////////////////////////////////////////////////////////////
|
//////////////////////////////////////////////////////////////////////////////////////
|
||||||
|
|
||||||
// last week
|
// last week
|
||||||
$list_since = arraySafeVal($_GET,'since',time()-(7*24*3600));
|
$list_since = arraySafeVal($_GET,'since',time()-(7*24*3600));
|
||||||
|
|
||||||
$maxrows = arraySafeVal($_GET,'rows', 15);
|
$maxrows = arraySafeVal($_GET,'rows', 200);
|
||||||
$maxrows = min($maxrows, 2500);
|
$maxrows = min($maxrows, 2500);
|
||||||
|
|
||||||
echo <<<end
|
echo <<<end
|
||||||
|
<div id="transactions">
|
||||||
<table class="dataGrid">
|
<table class="dataGrid">
|
||||||
<thead class="">
|
<thead class="">
|
||||||
<tr>
|
<tr>
|
||||||
|
|
@ -375,10 +369,16 @@ foreach($txs_array as $tx)
|
||||||
|
|
||||||
echo '</tbody></table>';
|
echo '</tbody></table>';
|
||||||
|
|
||||||
|
$url = '/site/coin?id='.$coin->id.'&since='.(time()-31*24*3600).'&rows='.($maxrows*2);
|
||||||
|
$moreurl = CHtml::link('Click here to show more transactions...', $url);
|
||||||
|
|
||||||
|
echo '<div class="loadfooter" style="margin-top: 4px;">'.$moreurl.'</div>';
|
||||||
|
echo '</div>';
|
||||||
|
|
||||||
//////////////////////////////////////////////////////////////////////////////////////
|
//////////////////////////////////////////////////////////////////////////////////////
|
||||||
|
|
||||||
echo <<<end
|
echo <<<end
|
||||||
<div id="sums" style="width: 400px; min-height: 250px; float: left; margin-top: 24px; margin-bottom: 8px; margin-right: 16px;">
|
<div id="sums">
|
||||||
<table class="dataGrid">
|
<table class="dataGrid">
|
||||||
<thead class="">
|
<thead class="">
|
||||||
<tr>
|
<tr>
|
||||||
|
|
@ -426,216 +426,6 @@ if (empty($sums)) {
|
||||||
|
|
||||||
echo '</tbody></table></div>';
|
echo '</tbody></table></div>';
|
||||||
|
|
||||||
//////////////////////////////////////////////////////////////////////////////////////
|
if (strpos(YIIMP_WATCH_CURRENCIES, $coin->symbol) !== false) {
|
||||||
|
$this->renderPartial('coin_market_graph', array('coin'=>$coin));
|
||||||
if (strpos(YIIMP_WATCH_CURRENCIES, $coin->symbol) === false) return;
|
|
||||||
|
|
||||||
JavascriptFile("/extensions/jqplot/jquery.jqplot.js");
|
|
||||||
JavascriptFile("/extensions/jqplot/plugins/jqplot.enhancedLegendRenderer.js");
|
|
||||||
JavascriptFile("/extensions/jqplot/plugins/jqplot.dateAxisRenderer.js");
|
|
||||||
JavascriptFile("/extensions/jqplot/plugins/jqplot.highlighter.js");
|
|
||||||
|
|
||||||
echo <<<end
|
|
||||||
|
|
||||||
<style type="text/css">
|
|
||||||
#graph_history_price, #graph_history_balance {
|
|
||||||
width: 75%; height: 300px; float: right;
|
|
||||||
margin-top: 16px;
|
|
||||||
}
|
}
|
||||||
.jqplot-title {
|
|
||||||
margin-bottom: 3px;
|
|
||||||
}
|
|
||||||
.jqplot-cursor-tooltip,
|
|
||||||
.jqplot-highlighter-tooltip {
|
|
||||||
background: rgba(220,220,220, .5) !important;
|
|
||||||
border: 1px solid gray;
|
|
||||||
padding: 2px 4px;
|
|
||||||
}
|
|
||||||
.jqplot-xaxis-tick {
|
|
||||||
margin-top: 4px;
|
|
||||||
}
|
|
||||||
.jqplot-y2axis-tick {
|
|
||||||
font-size: 7pt;
|
|
||||||
margin-top: -4px;
|
|
||||||
margin-left: 8px;
|
|
||||||
width: 36px;
|
|
||||||
}
|
|
||||||
.jqplot-table-legend-swatch {
|
|
||||||
height: 8px;
|
|
||||||
width: 8px;
|
|
||||||
margin-top: 2px;
|
|
||||||
margin-left: 16px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<div class="graph" id="graph_history_price"></div>
|
|
||||||
<div class="graph" id="graph_history_balance"></div>
|
|
||||||
|
|
||||||
<script type="text/javascript">
|
|
||||||
|
|
||||||
var last_graph_update = 0;
|
|
||||||
|
|
||||||
function graph_refresh()
|
|
||||||
{
|
|
||||||
var now = Date.now()/1000;
|
|
||||||
|
|
||||||
if (now < last_graph_update + 1) return;
|
|
||||||
last_graph_update = now;
|
|
||||||
|
|
||||||
var w = 0 + $('div#graph_history_price').parent().width();
|
|
||||||
w = w - $('div#sums').width() - 32;
|
|
||||||
$('.graph').width(w);
|
|
||||||
|
|
||||||
var url = "/site/graphMarketBalance?id={$coin->id}";
|
|
||||||
$.get(url, '', graph_balance_data);
|
|
||||||
|
|
||||||
var url = "/site/graphMarketPrices?id={$coin->id}";
|
|
||||||
$.get(url, '', graph_price_data);
|
|
||||||
}
|
|
||||||
|
|
||||||
function graph_price_data(data)
|
|
||||||
{
|
|
||||||
var t = $.parseJSON(data);
|
|
||||||
var graph = $.jqplot('graph_history_price', t.data,
|
|
||||||
{
|
|
||||||
title: '<b>Market History</b>',
|
|
||||||
animate: false, animateReplot: false,
|
|
||||||
axes: {
|
|
||||||
xaxis: {
|
|
||||||
show: true,
|
|
||||||
tickInterval: 600,
|
|
||||||
tickOptions: { fontSize: '7pt', escapeHTML: false, formatString:'%#d %b</br>%H:00' },
|
|
||||||
renderer: $.jqplot.DateAxisRenderer
|
|
||||||
},
|
|
||||||
x2axis: {
|
|
||||||
// hidden (top) axis with higher granularity
|
|
||||||
syncTicks: 1,
|
|
||||||
tickInterval: 600,
|
|
||||||
tickOptions: { show: false },
|
|
||||||
renderer: $.jqplot.DateAxisRenderer
|
|
||||||
},
|
|
||||||
y2axis: {
|
|
||||||
min: t.rangeMin, max: t.rangeMax
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
seriesDefaults: {
|
|
||||||
xaxis: 'x2axis',
|
|
||||||
yaxis: 'y2axis',
|
|
||||||
showLabel: true,
|
|
||||||
markerOptions: { style: 'circle', size: 2 }
|
|
||||||
},
|
|
||||||
|
|
||||||
grid: {
|
|
||||||
borderWidth: 1,
|
|
||||||
shadowWidth: 0,
|
|
||||||
shadowDepth: 0,
|
|
||||||
background: '#f0f0f0'
|
|
||||||
},
|
|
||||||
|
|
||||||
legend: {
|
|
||||||
labels: t.labels,
|
|
||||||
renderer: jQuery.jqplot.EnhancedLegendRenderer,
|
|
||||||
rendererOptions: { numberRows: 1 },
|
|
||||||
location: 'n',
|
|
||||||
show: true
|
|
||||||
},
|
|
||||||
|
|
||||||
highlighter: {
|
|
||||||
useAxesFormatters: false,
|
|
||||||
tooltipContentEditor: function(str, seriesIndex, pointIndex, jqPlot) {
|
|
||||||
var pt = jqPlot.series[seriesIndex].data[pointIndex];
|
|
||||||
var dt = new Date(0+pt[0]);
|
|
||||||
var date = $.datepicker.formatDate('dd M yy', dt);
|
|
||||||
var time = dt.getHours().toString()+'h'+dt.getMinutes();
|
|
||||||
return date+' '+time+' ' + pt[1]+' BTC';
|
|
||||||
},
|
|
||||||
show: true
|
|
||||||
}
|
|
||||||
});
|
|
||||||
var x2 = graph.axes.x2axis;
|
|
||||||
for (var i=0; i < x2._ticks.length; i++) {
|
|
||||||
// put in visible axis, only one tick per hour...
|
|
||||||
if (i % 12 == 0) {
|
|
||||||
graph.axes.xaxis.ticks.push(x2._ticks[i].value);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
graph.replot(false);
|
|
||||||
}
|
|
||||||
|
|
||||||
function graph_balance_data(data)
|
|
||||||
{
|
|
||||||
var t = $.parseJSON(data);
|
|
||||||
var graph = $.jqplot('graph_history_balance', t.data,
|
|
||||||
{
|
|
||||||
title: '<b>Market Balances</b>',
|
|
||||||
animate: false, animateReplot: false,
|
|
||||||
stackSeries: true,
|
|
||||||
axes: {
|
|
||||||
xaxis: {
|
|
||||||
show: true,
|
|
||||||
tickInterval: 600,
|
|
||||||
tickOptions: { fontSize: '7pt', escapeHTML: false, formatString:'%#d %b</br>%#Hh' },
|
|
||||||
showMinorTicks: false,
|
|
||||||
renderer: $.jqplot.DateAxisRenderer
|
|
||||||
},
|
|
||||||
x2axis: {
|
|
||||||
// hidden (top) axis with higher granularity
|
|
||||||
syncTicks: 1,
|
|
||||||
tickInterval: 600,
|
|
||||||
tickOptions: { show: false },
|
|
||||||
renderer: $.jqplot.DateAxisRenderer
|
|
||||||
},
|
|
||||||
y2axis: {
|
|
||||||
min: t.rangeMin, max: t.rangeMax
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
seriesDefaults: {
|
|
||||||
xaxis: 'x2axis',
|
|
||||||
yaxis: 'y2axis',
|
|
||||||
fill: true,
|
|
||||||
showLabel: true,
|
|
||||||
markerOptions: { style: 'circle', size: 2 }
|
|
||||||
},
|
|
||||||
|
|
||||||
grid: {
|
|
||||||
borderWidth: 1,
|
|
||||||
shadowWidth: 0,
|
|
||||||
shadowDepth: 0,
|
|
||||||
background: '#f0f0f0'
|
|
||||||
},
|
|
||||||
|
|
||||||
legend: {
|
|
||||||
labels: t.labels,
|
|
||||||
renderer: jQuery.jqplot.EnhancedLegendRenderer,
|
|
||||||
rendererOptions: { numberRows: 1 },
|
|
||||||
location: 'n',
|
|
||||||
show: true
|
|
||||||
},
|
|
||||||
|
|
||||||
highlighter: {
|
|
||||||
useAxesFormatters: false,
|
|
||||||
tooltipContentEditor: function(str, seriesIndex, pointIndex, jqPlot) {
|
|
||||||
var pt = jqPlot.series[seriesIndex].data[pointIndex];
|
|
||||||
var dt = new Date(0+pt[0]);
|
|
||||||
var date = $.datepicker.formatDate('dd M yy', dt);
|
|
||||||
var time = dt.getHours().toString()+'h';
|
|
||||||
return date+' '+time+' ' + pt[1]+' {$coin->symbol}';
|
|
||||||
},
|
|
||||||
show: true
|
|
||||||
}
|
|
||||||
});
|
|
||||||
var x2 = graph.axes.x2axis;
|
|
||||||
for (var i=0; i < x2._ticks.length; i++) {
|
|
||||||
// put in visible axis, only one tick per hour...
|
|
||||||
if (i % 12 == 0) {
|
|
||||||
graph.axes.xaxis.ticks.push(x2._ticks[i].value);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
graph.replot(false);
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
end;
|
|
||||||
|
|
||||||
JavascriptReady("graph_refresh(); $(window).resize(graph_refresh);");
|
|
||||||
Loading…
Add table
Reference in a new issue