[ADDED] Sparkline dashboard example for Live API
This commit is contained in:
Sebastian Grewe
parent
8b13d0193e
commit
5e6bf2e765
5
public/site_assets/bootstrap/js/plugins/sparkline/jquery.sparkline.min.js
vendored
Normal file
5
public/site_assets/bootstrap/js/plugins/sparkline/jquery.sparkline.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@ -1,13 +1,11 @@
|
||||
{if $smarty.session.AUTHENTICATED|default}
|
||||
{literal}<div class="row">{/literal}
|
||||
<div class="row">
|
||||
{include file="dashboard/overview.tpl"}
|
||||
{include file="dashboard/system_stats.tpl"}
|
||||
{literal}</div>{/literal}
|
||||
</div>
|
||||
{if !$DISABLED_DASHBOARD and !$DISABLED_DASHBOARD_API}
|
||||
{include file="dashboard/js_api.tpl"}
|
||||
{else}
|
||||
{literal}<div class="row">{/literal}
|
||||
{literal}</div>{/literal}
|
||||
{include file="dashboard/js_static.tpl"}
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
@ -1,131 +1,37 @@
|
||||
<script type="text/javascript" src="{$PATH}/js/plugins/jqplot.json2.min.js"></script>
|
||||
<script type="text/javascript" src="{$PATH}/js/plugins/jqplot.dateAxisRenderer.js"></script>
|
||||
<script type="text/javascript" src="{$PATH}/js/plugins/jqplot.highlighter.js"></script>
|
||||
<script type="text/javascript" src="{$PATH}/js/plugins/jqplot.canvasTextRenderer.min.js"></script>
|
||||
<script type="text/javascript" src="{$PATH}/js/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
|
||||
<script type="text/javascript" src="{$PATH}/js/plugins/jqplot.trendline.min.js"></script>
|
||||
<script type="text/javascript" src="{$PATH}/js/plugins/jqplot.enhancedLegendRenderer.min.js"></script>
|
||||
<script type="text/javascript" src="{$PATH}/js/plugins/jqplot.canvasTextRenderer.min.js"></script>
|
||||
<script type="text/javascript" src="{$PATH}/js/plugins/jqplot.canvasAxisTickRenderer.min.js"></script>
|
||||
<script type="text/javascript" src="{$PATH}/js/plugins/jqplot.categoryAxisRenderer.min.js"></script>
|
||||
<script type="text/javascript" src="{$PATH}/js/plugins/jqplot.pointLabels.js"></script>
|
||||
<script type="text/javascript" src="{$PATH}/js/plugins/jqplot.donutRenderer.js"></script>
|
||||
<script type="text/javascript" src="{$PATH}/../global/js/number_format.js"></script>
|
||||
|
||||
<script>
|
||||
{literal}
|
||||
$(document).ready(function(){
|
||||
var g1, g2, g3, g4, g5;
|
||||
|
||||
// Ajax API URL
|
||||
var url_dashboard = "{/literal}{$smarty.server.SCRIPT_NAME}?page=api&action=getdashboarddata&api_key={$GLOBAL.userdata.api_key}&id={$GLOBAL.userdata.id}{literal}";
|
||||
var url_worker = "{/literal}{$smarty.server.SCRIPT_NAME}?page=api&action=getuserworkers&api_key={$GLOBAL.userdata.api_key}&id={$GLOBAL.userdata.id}{literal}";
|
||||
var url_balance = "{/literal}{$smarty.server.SCRIPT_NAME}?page=api&action=getuserbalance&api_key={$GLOBAL.userdata.api_key}&id={$GLOBAL.userdata.id}{literal}";
|
||||
|
||||
// Enable all included plugins
|
||||
// $.jqplot.config.enablePlugins = true;
|
||||
|
||||
// Store our data globally
|
||||
var storedPersonalHashrate=[];
|
||||
var storedPoolHashrate=[];
|
||||
var storedPersonalSharerate=[];
|
||||
|
||||
// jqPlit defaults
|
||||
var jqPlotOverviewOptions = {
|
||||
highlighter: { show: true },
|
||||
grid: { drawBorder: false, background: '#fbfbfb', shadow: false },
|
||||
stackSeries: false,
|
||||
seriesColors: [ '#26a4ed', '#ee8310', '#e9e744' ],
|
||||
seriesDefaults:{
|
||||
lineWidth: 4, shadow: false,
|
||||
fill: false, fillAndStroke: true, fillAlpha: 0.3,
|
||||
trendline: { show: true, color: '#be1e2d', lineWidth: 1.0, label: 'Your Average', shadow: true },
|
||||
markerOptions: { show: true, size: 6 },
|
||||
rendererOptions: { smooth: true }
|
||||
},
|
||||
series: [
|
||||
{ yaxis: 'yaxis', label: 'Own', fill: true },
|
||||
{ yaxis: 'yaxis', label: 'Pool', fill: false, trendline: { show: false }, lineWidth: 2, markerOptions: { show: true, size: 4 }},
|
||||
{ yaxis: 'y3axis', label: 'Sharerate', fill: false, trendline: { show: false } },
|
||||
],
|
||||
legend: { show: true, location: 'sw', renderer: $.jqplot.EnhancedLegendRenderer, rendererOptions: { seriesToggleReplot: { resetAxes: true } } },
|
||||
axes: {
|
||||
yaxis: { min: 0, pad: 1.25, label: 'Hashrate' , labelRenderer: $.jqplot.CanvasAxisLabelRenderer },
|
||||
y3axis: { min: 0, pad: 1.25, label: 'Sharerate', labelRenderer: $.jqplot.CanvasAxisLabelRenderer },
|
||||
xaxis: { showTicks: false, tickInterval: {/literal}{$GLOBAL.config.statistics_ajax_refresh_interval}{literal}, labelRenderer: $.jqplot.CanvasAxisLabelRenderer, renderer: $.jqplot.DateAxisRenderer, angle: 30, tickOptions: { formatString: '%T' } },
|
||||
},
|
||||
var storedPersonalHashrate = [ 0, 0, 0, 0, {/literal}{$GLOBAL.userdata.hashrate}{literal} ];
|
||||
var storedPoolHashrate = [ 0, 0, 0, 0, {/literal}{$GLOBAL.hashrate}{literal} ];
|
||||
var storedPoolWorkers = [ 0, 0, 0, 0, {/literal}{$GLOBAL.workers}{literal} ];
|
||||
var sparklineOptions = {
|
||||
type: 'bar',
|
||||
barColor: 'green',
|
||||
height: '25px',
|
||||
width: '150px',
|
||||
barWidth: 10
|
||||
};
|
||||
$('.personal-hashrate-bar').sparkline(storedPersonalHashrate, sparklineOptions);
|
||||
$('.pool-hasrate-bar').sparkline(storedPoolHashrate, sparklineOptions);
|
||||
$('.pool-workers-bar').sparkline(storedPoolWorkers, sparklineOptions);
|
||||
|
||||
var jqPlotShareinfoOptions = {
|
||||
title: 'Shares',
|
||||
highlighter: { show: false },
|
||||
grid: { drawBorder: false, background: '#fbfbfb', shadow: false },
|
||||
seriesColors: [ '#26a4ed', '#ee8310', '#e9e744' ],
|
||||
seriesDefaults: {
|
||||
renderer: $.jqplot.DonutRenderer,
|
||||
rendererOptions:{
|
||||
ringMargin: 10,
|
||||
sliceMargin: 10,
|
||||
startAngle: -90,
|
||||
showDataLabels: true,
|
||||
dataLabels: 'value',
|
||||
dataLabelThreshold: 0
|
||||
}
|
||||
},
|
||||
legend: { show: false }
|
||||
};
|
||||
|
||||
// Initilize gauges and graph
|
||||
var plot1 = $.jqplot('hashrategraph', [[storedPersonalHashrate], [storedPoolHashrate], [[0, 0.0]]], jqPlotOverviewOptions);
|
||||
var plot2 = $.jqplot('shareinfograph', [
|
||||
[['your valid', {/literal}{$GLOBAL.userdata.shares.valid}{literal}], ['pool valid', {/literal}{$GLOBAL.roundshares.valid}{literal}]],
|
||||
[['your invalid', {/literal}{$GLOBAL.userdata.shares.invalid}{literal}], ['pool invalid', {/literal}{$GLOBAL.roundshares.invalid}{literal}]]
|
||||
], jqPlotShareinfoOptions);
|
||||
|
||||
g1 = new JustGage({id: "nethashrate", value: parseFloat({/literal}{$GLOBAL.nethashrate}{literal}).toFixed(2), min: 0, max: Math.round({/literal}{$GLOBAL.nethashrate}{literal} * 2), title: "Net Hashrate", gaugeColor: '#6f7a8a', valueFontColor: '#555', shadowOpacity : 0.8, shadowSize : 0, shadowVerticalOffset : 10, label: "{/literal}{$GLOBAL.hashunits.network}{literal}"});
|
||||
g2 = new JustGage({id: "poolhashrate", value: parseFloat({/literal}{$GLOBAL.hashrate}{literal}).toFixed(2), min: 0, max: Math.round({/literal}{$GLOBAL.hashrate}{literal}* 2), title: "Pool Hashrate", gaugeColor: '#6f7a8a', valueFontColor: '#555', shadowOpacity : 0.8, shadowSize : 0, shadowVerticalOffset : 10, label: "{/literal}{$GLOBAL.hashunits.pool}{literal}"});
|
||||
g3 = new JustGage({id: "hashrate", value: parseFloat({/literal}{$GLOBAL.userdata.hashrate}{literal}).toFixed(2), min: 0, max: Math.round({/literal}{$GLOBAL.userdata.hashrate}{literal} * 2), title: "Hashrate", gaugeColor: '#6f7a8a', valueFontColor: '#555', shadowOpacity : 0.8, shadowSize : 0, shadowVerticalOffset : 10, label: "{/literal}{$GLOBAL.hashunits.personal}{literal}"});
|
||||
if ({/literal}{$GLOBAL.userdata.sharerate}{literal} > 1) {
|
||||
initSharerate = {/literal}{$GLOBAL.userdata.sharerate}{literal} * 2
|
||||
} else {
|
||||
initSharerate = 1
|
||||
}
|
||||
g4 = new JustGage({id: "sharerate", value: parseFloat({/literal}{$GLOBAL.userdata.sharerate}{literal}).toFixed(2), min: 0, max: Math.round(initSharerate), gaugeColor: '#6f7a8a', valueFontColor: '#555', shadowOpacity : 0.8, shadowSize : 0, shadowVerticalOffset : 10, title: "Sharerate", label: "shares/s"});
|
||||
g5 = new JustGage({id: "querytime", value: parseFloat(0).toFixed(0), min: 0, max: Math.round(5 * 100), gaugeColor: '#6f7a8a', valueFontColor: '#555', shadowOpacity : 0.8, shadowSize : 0, shadowVerticalOffset : 10, title: "Querytime", label: "ms"});
|
||||
|
||||
// Helper to refresh graphs
|
||||
function refreshInformation(data) {
|
||||
g1.refresh(parseFloat(data.getdashboarddata.data.network.hashrate).toFixed(2));
|
||||
g2.refresh(parseFloat(data.getdashboarddata.data.pool.hashrate).toFixed(2));
|
||||
g3.refresh(parseFloat(data.getdashboarddata.data.personal.hashrate).toFixed(2));
|
||||
g4.refresh(parseFloat(data.getdashboarddata.data.personal.sharerate).toFixed(2));
|
||||
g5.refresh(parseFloat(data.getdashboarddata.runtime).toFixed(0));
|
||||
if (storedPersonalHashrate.length > 20) { storedPersonalHashrate.shift(); }
|
||||
if (storedPoolHashrate.length > 20) { storedPoolHashrate.shift(); }
|
||||
if (storedPersonalSharerate.length > 20) { storedPersonalSharerate.shift(); }
|
||||
timeNow = new Date().getTime();
|
||||
storedPersonalHashrate[storedPersonalHashrate.length] = [timeNow, data.getdashboarddata.data.raw.personal.hashrate];
|
||||
storedPersonalSharerate[storedPersonalSharerate.length] = [timeNow, parseFloat(data.getdashboarddata.data.personal.sharerate)];
|
||||
storedPoolHashrate[storedPoolHashrate.length] = [timeNow, data.getdashboarddata.data.raw.pool.hashrate];
|
||||
tempShareinfoData = [
|
||||
[['your valid', parseInt(data.getdashboarddata.data.personal.shares.valid)], ['pool valid', parseInt(data.getdashboarddata.data.pool.shares.valid)]],
|
||||
[['your invalid', parseInt(data.getdashboarddata.data.personal.shares.invalid)], ['pool invalid', parseInt(data.getdashboarddata.data.pool.shares.invalid)]]
|
||||
];
|
||||
replotOverviewOptions = {
|
||||
data: [storedPersonalHashrate, storedPoolHashrate, storedPersonalSharerate],
|
||||
series: [ {show: plot1.series[0].show}, {show: plot1.series[1].show}, {show: plot1.series[2].show} ]
|
||||
};
|
||||
replotShareinfoOptions= {
|
||||
data: tempShareinfoData
|
||||
};
|
||||
if (typeof(plot1) != "undefined") plot1.replot(replotOverviewOptions);
|
||||
if (typeof(plot2) != "undefined") plot2.replot(replotShareinfoOptions);
|
||||
}
|
||||
|
||||
// Refresh balance information
|
||||
function refreshBalanceData(data) {
|
||||
balance = data.getuserbalance.data
|
||||
$('#b-confirmed').html(number_format(balance.confirmed, 6));
|
||||
$('#b-unconfirmed').html(number_format(balance.unconfirmed, 6));
|
||||
storedPersonalHashrate.shift();
|
||||
storedPersonalHashrate.push(parseFloat(data.getdashboarddata.data.personal.hashrate).toFixed(2))
|
||||
storedPoolHashrate.shift();
|
||||
storedPoolHashrate.push(parseFloat(data.getdashboarddata.data.pool.hashrate).toFixed(2))
|
||||
storedPoolWorkers.shift();
|
||||
storedPoolWorkers.push(data.getdashboarddata.data.pool.workers);
|
||||
$('.personal-hashrate-bar').sparkline(storedPersonalHashrate, sparklineOptions);
|
||||
$('.pool-hashrate-bar').sparkline(storedPoolHashrate, sparklineOptions);
|
||||
$('.pool-workers-bar').sparkline(storedPoolWorkers, sparklineOptions);
|
||||
}
|
||||
|
||||
// Refresh other static numbers on the template
|
||||
@ -164,20 +70,6 @@ $(document).ready(function(){
|
||||
{/literal}{/if}{literal}
|
||||
}
|
||||
|
||||
// Refresh worker information
|
||||
function refreshWorkerData(data) {
|
||||
workers = data.getuserworkers.data;
|
||||
length = workers.length;
|
||||
$('#b-workers').html('');
|
||||
for (var i = j = 0; i < length; i++) {
|
||||
if (workers[i].hashrate > 0) {
|
||||
j++;
|
||||
$('#b-workers').append('<tr><td>' + workers[i].username + '</td><td>' + workers[i].hashrate + '</td><td>' + workers[i].difficulty + '</td></tr>');
|
||||
}
|
||||
}
|
||||
if (j == 0) { $('#b-workers').html('<tr><td colspan="3">No active workers</td></tr>'); }
|
||||
}
|
||||
|
||||
// Our worker process to keep gauges and graph updated
|
||||
(function worker1() {
|
||||
$.ajax({
|
||||
@ -192,34 +84,6 @@ $(document).ready(function(){
|
||||
}
|
||||
});
|
||||
})();
|
||||
|
||||
// Our worker process to keep worker information updated
|
||||
(function worker3() {
|
||||
$.ajax({
|
||||
url: url_balance,
|
||||
dataType: 'json',
|
||||
success: function(data) {
|
||||
refreshBalanceData(data);
|
||||
},
|
||||
complete: function() {
|
||||
setTimeout(worker3, {/literal}{($GLOBAL.config.statistics_ajax_long_refresh_interval * 1000)|default:"10000"}{literal})
|
||||
}
|
||||
});
|
||||
})();
|
||||
|
||||
// Our worker process to keep gauges and graph updated
|
||||
(function worker2() {
|
||||
$.ajax({
|
||||
url: url_worker,
|
||||
dataType: 'json',
|
||||
success: function(data) {
|
||||
refreshWorkerData(data);
|
||||
},
|
||||
complete: function() {
|
||||
setTimeout(worker2, {/literal}{($GLOBAL.config.statistics_ajax_long_refresh_interval * 1000)|default:"10000"}{literal})
|
||||
}
|
||||
});
|
||||
})();
|
||||
});
|
||||
{/literal}
|
||||
</script>
|
||||
|
||||
@ -1,48 +1,6 @@
|
||||
<script type="text/javascript" src="{$PATH}/js/plugins/jqplot.json2.min.js"></script>
|
||||
<script type="text/javascript" src="{$PATH}/js/plugins/jqplot.dateAxisRenderer.js"></script>
|
||||
<script type="text/javascript" src="{$PATH}/js/plugins/jqplot.highlighter.js"></script>
|
||||
<script type="text/javascript" src="{$PATH}/js/plugins/jqplot.canvasTextRenderer.min.js"></script>
|
||||
<script type="text/javascript" src="{$PATH}/js/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
|
||||
<script type="text/javascript" src="{$PATH}/js/plugins/jqplot.trendline.min.js"></script>
|
||||
<script type="text/javascript" src="{$PATH}/js/plugins/jqplot.enhancedLegendRenderer.min.js"></script>
|
||||
<script type="text/javascript" src="{$PATH}/js/plugins/jqplot.canvasTextRenderer.min.js"></script>
|
||||
<script type="text/javascript" src="{$PATH}/js/plugins/jqplot.canvasAxisTickRenderer.min.js"></script>
|
||||
<script type="text/javascript" src="{$PATH}/js/plugins/jqplot.categoryAxisRenderer.min.js"></script>
|
||||
<script type="text/javascript" src="{$PATH}/js/plugins/jqplot.pointLabels.js"></script>
|
||||
<script type="text/javascript" src="{$PATH}/js/plugins/jqplot.donutRenderer.js"></script>
|
||||
|
||||
<script>
|
||||
{literal}
|
||||
$(document).ready(function(){
|
||||
var g1, g2, g3, g4, g5;
|
||||
|
||||
Morris.Donut({
|
||||
element: 'round-donut-chart',
|
||||
data: [{
|
||||
label: "your valid",
|
||||
value: {/literal}{$GLOBAL.userdata.shares.valid}{literal}
|
||||
}, {
|
||||
label: "your invalid",
|
||||
value: {/literal}{$GLOBAL.userdata.shares.invalid}{literal}
|
||||
}, {
|
||||
label: "pool valid",
|
||||
value: {/literal}{$GLOBAL.roundshares.valid}{literal}
|
||||
}, {
|
||||
label: "pool invalid",
|
||||
value: {/literal}{$GLOBAL.roundshares.invalid}{literal}
|
||||
}],
|
||||
resize: true
|
||||
});
|
||||
|
||||
g1 = new JustGage({id: "nethashrate", value: parseFloat({/literal}{$GLOBAL.nethashrate}{literal}).toFixed(2), min: 0, max: Math.round({/literal}{$GLOBAL.nethashrate}{literal} * 2), title: "Net Hashrate", gaugeColor: '#6f7a8a', valueFontColor: '#555', shadowOpacity : 0.8, shadowSize : 0, shadowVerticalOffset : 10, label: "{/literal}{$GLOBAL.hashunits.network}{literal}"});
|
||||
g2 = new JustGage({id: "poolhashrate", value: parseFloat({/literal}{$GLOBAL.hashrate}{literal}).toFixed(2), min: 0, max: Math.round({/literal}{$GLOBAL.hashrate}{literal}* 2), title: "Pool Hashrate", gaugeColor: '#6f7a8a', valueFontColor: '#555', shadowOpacity : 0.8, shadowSize : 0, shadowVerticalOffset : 10, label: "{/literal}{$GLOBAL.hashunits.pool}{literal}"});
|
||||
g3 = new JustGage({id: "hashrate", value: parseFloat({/literal}{$GLOBAL.userdata.hashrate}{literal}).toFixed(2), min: 0, max: Math.round({/literal}{$GLOBAL.userdata.hashrate}{literal} * 2), title: "Hashrate", gaugeColor: '#6f7a8a', valueFontColor: '#555', shadowOpacity : 0.8, shadowSize : 0, shadowVerticalOffset : 10, label: "{/literal}{$GLOBAL.hashunits.personal}{literal}"});
|
||||
if ({/literal}{$GLOBAL.userdata.sharerate}{literal} > 1) {
|
||||
initSharerate = {/literal}{$GLOBAL.userdata.sharerate}{literal} * 2
|
||||
} else {
|
||||
initSharerate = 1
|
||||
}
|
||||
g4 = new JustGage({id: "sharerate", value: parseFloat({/literal}{$GLOBAL.userdata.sharerate}{literal}).toFixed(2), min: 0, max: Math.round(initSharerate), gaugeColor: '#6f7a8a', valueFontColor: '#555', shadowOpacity : 0.8, shadowSize : 0, shadowVerticalOffset : 10, title: "Sharerate", label: "shares/s"});
|
||||
});
|
||||
{/literal}
|
||||
</script>
|
||||
|
||||
@ -4,31 +4,17 @@
|
||||
<h4 class="panel-title">Overview {if $GLOBAL.config.price.currency}{$GLOBAL.config.currency}/{$GLOBAL.config.price.currency}: <span id="b-price">{$GLOBAL.price|number_format:"8"|default:"0"}</span>{/if} / Pool Workers: <span id="b-dworkers">{$GLOBAL.workers}</span></h4>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<center>
|
||||
<div style="display: inline-block;">
|
||||
<div id="poolhashrate" style="width:120px; height:90px;"></div>
|
||||
<div id="sharerate" style="width:120px; height:90px;"></div>
|
||||
</div>
|
||||
<div style="display: inline-block;">
|
||||
<div id="hashrate" style="width:220px; height:180px;"></div>
|
||||
</div>
|
||||
<div style="display: inline-block;">
|
||||
<div id="nethashrate" style="width:120px; height:90px;"></div>
|
||||
<div id="querytime" style="width:120px; height:90px;"></div>
|
||||
</div>
|
||||
</center>
|
||||
{if !$DISABLED_DASHBOARD and !$DISABLED_DASHBOARD_API}
|
||||
<div class="flot-chart">
|
||||
<div class="flot-chart-content" id="flot-line-chart"></div>
|
||||
</div>
|
||||
{/if}
|
||||
<div>My Hashrate <span id="b-hashrate">{$GLOBAL.userdata.hashrate}</span></span> <span class="personal-hashrate-bar"></div>
|
||||
<br>
|
||||
<div><span>Pool Hashrate <span id="b-poolhashrate">{$GLOBAL.hashrate}</span></span> <span class="pool-hashrate-bar"></div>
|
||||
<br>
|
||||
<div><span>Pool Workers <span id="b-poolworkers">{$GLOBAL.workers}</span></span> <span class="pool-workers-bar"></div>
|
||||
</div>
|
||||
<div class="panel-footer">
|
||||
Refresh interval: {$GLOBAL.config.statistics_ajax_refresh_interval|default:"10"} seconds. Hashrate based on shares submitted in the past {$INTERVAL|default:"5"} minutes.
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
{include file="dashboard/round_data.tpl"}
|
||||
{include file="dashboard/account_data.tpl"}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -30,6 +30,7 @@
|
||||
<script src="{$PATH}/js/plugins/metisMenu/jquery.metisMenu.js"></script>
|
||||
<script src="{$PATH}/js/plugins/morris/raphael-2.1.0.min.js"></script>
|
||||
<script src="{$PATH}/js/plugins/morris/morris.js"></script>
|
||||
<script src="{$PATH}/js/plugins/sparkline/jquery.sparkline.min.js"></script>
|
||||
<script src="{$PATH}/js/mpos.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
@ -59,4 +60,4 @@
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user