[UPDATE] block graphs

This commit is contained in:
iAmShorty 2014-02-28 13:41:40 +01:00
parent 161fb98a92
commit 7924ea0545
5 changed files with 96 additions and 61 deletions

View File

@ -40,10 +40,10 @@ $(document).ready(function() {
var plotObj = $.plot($("#flot-line-chart"), [{ var plotObj = $.plot($("#flot-line-chart"), [{
data: sin, data: sin,
label: "sin(x)" label: "test 1"
}, { }, {
data: cos, data: cos,
label: "cos(x)" label: "test 2"
}], }],
options); options);
} }

6
public/templates/bootstrap/master.tpl Executable file → Normal file
View File

@ -72,14 +72,16 @@
<script src="{$PATH}/js/jquery-1.10.2.js"></script> <script src="{$PATH}/js/jquery-1.10.2.js"></script>
<script src="{$PATH}/js/bootstrap.min.js"></script> <script src="{$PATH}/js/bootstrap.min.js"></script>
<script src="{$PATH}/js/plugins/metisMenu/jquery.metisMenu.js"></script> <script src="{$PATH}/js/plugins/metisMenu/jquery.metisMenu.js"></script>
<!--[if lte IE 8]><script src="js/excanvas.min.js"></script><![endif]-->
<script src="{$PATH}/js/plugins/flot/jquery.flot.js"></script> <script src="{$PATH}/js/plugins/flot/jquery.flot.js"></script>
<script src="{$PATH}/js/plugins/flot/jquery.flot.tooltip.min.js"></script> <script src="{$PATH}/js/plugins/flot/jquery.flot.tooltip.min.js"></script>
<script src="{$PATH}/js/plugins/flot/jquery.flot.resize.js"></script> <script src="{$PATH}/js/plugins/flot/jquery.flot.resize.js"></script>
<script src="{$PATH}/js/plugins/flot/jquery.flot.pie.js"></script> <script src="{$PATH}/js/plugins/flot/jquery.flot.pie.js"></script>
<script src="{$PATH}/js/plugins/morris/raphael-2.1.0.min.js"></script> <script src="{$PATH}/js/plugins/morris/raphael-2.1.0.min.js"></script>
<script src="{$PATH}/js/mpos.js"></script> <script src="{$PATH}/js/mpos.js"></script>
<script type="text/javascript" src="{$PATH}/js/justgage.1.0.1.min.js"></script> <script type="text/javascript" src="{$PATH}/js/justgage.1.0.1.min.js"></script>
<!-- Page-Level Plugin Scripts - Flot -->
<!--[if lte IE 8]><script src="{$PATH}/js/excanvas.min.js"></script><![endif]-->
</body> </body>
</html> </html>

View File

@ -1,3 +1,4 @@
<div class="row">
<div class="col-lg-12"> <div class="col-lg-12">
<div class="panel panel-info"> <div class="panel panel-info">
<div class="panel-heading"> <div class="panel-heading">
@ -182,3 +183,4 @@
</div> </div>
<!-- /.col-lg-12 --> <!-- /.col-lg-12 -->
</div> </div>
</div>

View File

@ -1,57 +1,86 @@
<article class="module width_full"> <script type="text/javascript">
<header><h3>Block Shares</h3></header> $(function() {
<table width="70%" class="visualize" rel="line">
<caption>Block Shares</caption> var exp = [
<thead> {section block $BLOCKSFOUND step=-1}
<tr> [{$BLOCKSFOUND[block].time * 1000}, {$BLOCKSFOUND[block].estshares}],
{section block $BLOCKSFOUND step=-1} {/section}
<th scope="col">{$BLOCKSFOUND[block].height}</th> ];
{/section} var act = [
</tr> {section block $BLOCKSFOUND step=-1}
</thead> [{$BLOCKSFOUND[block].time * 1000}, {$BLOCKSFOUND[block].shares|default:"0"}],
<tbody> {/section}
<tr> ];
<th scope="row">Expected</th> var avg = [
{section block $BLOCKSFOUND step=-1} {section block $BLOCKSFOUND step=-1}
<td>{$BLOCKSFOUND[block].estshares}</td> [{$BLOCKSFOUND[block].time * 1000}, {$BLOCKSFOUND[block].block_avg}],
{/section} {/section}
</tr> ];
<tr>
<th scope="row">Actual</th> function doPlot(position) {
{section block $BLOCKSFOUND step=-1} $.plot($("#block-line-chart"), [{
<td>{$BLOCKSFOUND[block].shares|default:"0"}</td> data: exp,
{/section} label: "Expected Shares"
</tr> }, {
{if $GLOBAL.config.payout_system == 'pplns'}<tr> data: avg,
<th scope="row">PPLNS</th> label: "Average Shares"
{section block $BLOCKSFOUND step=-1} }, {
<td>{$BLOCKSFOUND[block].pplns_shares}</td> data: act,
{/section} label: "Actual Shares",
</tr>{/if} yaxis: 2
{if $USEBLOCKAVERAGE}<tr> }], {
<th scope="row">Average</th> xaxes: [{
{section block $BLOCKSFOUND step=-1} mode: 'time'
<td>{$BLOCKSFOUND[block].block_avg}</td> }],
{/section} yaxes: [{
</tr>{/if} min: 0
</tbody> }, {
</table> // align if we are to the right
<table class="tablesorter"> alignTicksWithAxis: position == "right" ? 1 : null,
<tbody> position: position
<tr> }],
<td> grid: {
<a href="{$smarty.server.SCRIPT_NAME}?page={$smarty.request.page|escape}&action={$smarty.request.action|escape}&height={if is_array($BLOCKSFOUND) && count($BLOCKSFOUND) > ($BLOCKLIMIT - 1)}{$BLOCKSFOUND[$BLOCKLIMIT - 1].height}{/if}&prev=1"><i class="fa fa-chevron-left fa"></i></a> hoverable: true //IMPORTANT! this is needed for tooltip to work
</td> },
<td> tooltip: true,
<a href="{$smarty.server.SCRIPT_NAME}?page={$smarty.request.page|escape}&action={$smarty.request.action|escape}&height={if is_array($BLOCKSFOUND) && count($BLOCKSFOUND) > 0}{$BLOCKSFOUND[0].height}{/if}&next=1"><i class="fa fa-chevron-right fa"></i></a> tooltipOpts: {
</td> content: "%s for %x was %y",
</tr> xDateFormat: "%y-%0m-%0d",
</tbody>
</table> onHover: function(flotItem, $tooltipEl) {
<footer> // console.log(flotItem, $tooltipEl);
<p style="padding-left:30px; padding-redight:30px; font-size:10px;"> }
The graph above illustrates N shares to find a block vs. E Shares expected to find a block based on }
target and network difficulty and assuming a zero variance scenario.
</p> });
</footer> }
</article>
doPlot("right");
$("button").click(function() {
doPlot($(this).text());
});
});
</script>
<div class="row">
<div class="col-lg-12">
<div class="panel panel-info">
<div class="panel-heading">
Block Shares
</div>
<div class="panel-body">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-body">
<div class="flot-chart">
<div class="flot-chart-content" id="block-line-chart"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

View File

@ -1,3 +1,4 @@
<div class="row">
<div class="col-lg-12"> <div class="col-lg-12">
<div class="panel panel-info"> <div class="panel panel-info">
<div class="panel-heading"> <div class="panel-heading">
@ -78,3 +79,4 @@
</div> </div>
<!-- /.col-lg-12 --> <!-- /.col-lg-12 -->
</div> </div>
</div>