LBRYCommunity/block-explorer
1
0
Fork 0
Code Issues 31 Pull requests 4 Projects Releases Packages Wiki Activity

Added mining inflation chart

Browse source
This commit is contained in:
marcdeb1 2018-10-10 16:02:13 +02:00
parent c8462afdee
commit fb52438586
6 changed files with 526 additions and 238 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/Controller/MainController.php
View file

@ -504,7 +504,8 @@ class MainController extends AppController {
$richList = $this->Addresses->find()->where(['Address <>' => 'bHW58d37s1hBjj3wPBkn5zpCX3F8ZW3uWf'])->order(['Balance' => 'DESC'])->limit(500)->toArray();
$priceRate = 0;
$priceInfo = json_decode($this->redis->get(self::lbcPriceKey));
//$priceInfo = json_decode($this->redis->get(self::lbcPriceKey));
$priceInfo->price = 0.05;
if (isset($priceInfo->price)) {
$priceRate = $priceInfo->price;
}

231
src/Template/Main/blocks.ctp
View file

@ -134,236 +134,7 @@
<script type="text/javascript" src="/amcharts/amcharts.js"></script>
<script type="text/javascript" src="/amcharts/serial.js"></script>
<script type="text/javascript" src="/amcharts/plugins/export/export.min.js"></script>
<script type="text/javascript">
var chart;
var chartData = [];
var chartLoadInProgress = false;
var minPeriod = 'hh';
var validPeriods = ['24h', '72h', '168h', '30d', '90d', '1y'];
var defaultPeriod = (validPeriods.indexOf(localStorage.getItem('chartPeriod')) > -1) ? localStorage.getItem('chartPeriod') : '24h';
var periodGridCounts = {'24h': 24, '72h': 24, '168h': 14, '30d': 30, '90d': 45, '1y': 12 };
AmCharts.ready(function() {
chart = AmCharts.makeChart('block-size-chart', {
type: 'serial',
theme: 'light',
mouseWheelZoomEnabled: true,
categoryField: 'date',
synchronizeGrid: true,
dataProvider: chartData,
valueAxes: [
{
id: 'v-block-size',
axisColor: '#1e88e5',
axisThickness: 2,
labelFunction: function(value) {
return (Math.round((value / 1000) * 100)/100).toFixed(2) + ' KB';
}
},
{
id: 'v-price',
axisColor: '#00e676',
offset: 75,
gridAlpha: 0,
axisThickness: 2,
labelFunction: function(value) {
return '$' + value.toFixed(2);
}
}
],
categoryAxis: {
parseDates: true,
minPeriod: minPeriod, // DD for daily
autoGridCount: false,
minorGridEnabled: true,
minorGridAlpha: 0.04,
axisColor: '#dadada',
twoLineMode: true,
dateFormats: [{
period: 'fff',
format: 'JJ:NN:SS'
}, {
period: 'ss',
format: 'JJ:NN:SS'
}, {
period: 'mm',
format: 'JJ:NN'
}, {
period: 'hh',
format: 'JJ:NN'
}, {
period: 'DD',
format: 'DD'
}, {
period: 'WW',
format: 'DD MMM'
}, {
period: 'MM',
format: 'MMM'
}, {
period: 'YYYY',
format: 'YYYY'
}]
},
graphs: [
{
id: 'g-block-size',
valueAxis: 'v-block-size', // we have to indicate which value axis should be used
title: 'Avg Block Size',
valueField: 'AvgBlockSize',
bullet: 'round',
bulletBorderThickness: 1,
bulletBorderAlpha: 1,
bulletColor: '#ffffff',
bulletSize: 5,
useLineColorForBulletBorder: true,
lineColor: '#1e88e5',
hideBulletsCount: 101,
balloonText: '[[AvgBlockSize]] KB',
switchable: false,
balloonFunction: function(item, graph) {
var result = graph.balloonText;
return result.replace('[[AvgBlockSize]]', (Math.round((item.dataContext.AvgBlockSize / 1000) * 100)/100).toFixed(2));
}
},
{
id: 'g-price',
valueAxis: 'v-price',
title: 'Average Price',
valueField: 'AvgUSD',
bullet: 'round',
bulletBorderThickness: 1,
bulletBorderAlpha: 1,
bulletColor: '#ffffff',
bulletSize: 5,
useLineColorForBulletBorder: true,
lineColor: '#00e676',
balloonText: '$[[AvgUSD]]',
balloonFunction: function(item, graph) {
var result = graph.balloonText;
if (!item.dataContext.AvgUSD) {
return '';
}
return result.replace('[[AvgUSD]]', item.dataContext.AvgUSD.toFixed(2));
},
hideBulletsCount: 101,
labelFunction: function(value) {
return '$' + value;
},
}
],
chartCursor: {
cursorAlpha: 0.1,
fullWidth: true,
valueLineBalloonEnabled: true,
categoryBalloonColor: '#333333',
cursorColor: '#1e88e5',
categoryBalloonDateFormat: minPeriod === 'hh' ? 'D MMM HH:NN ' : 'D MMM'
},
chartScrollbar: {
scrollbarHeight: 36,
color: '#888888',
gridColor: '#bbbbbb'
},
legend: {
marginLeft: 110,
useGraphSettings: true,
valueAlign: 'right',
valueWidth: 60,
spacing: 64,
valueFunction: function(item, formatted) {
if (item.dataContext) {
var g = item.graph;
if (g.id === 'g-block-size' && item.dataContext.AvgBlockSize > 0) {
return g.balloonText.replace('[[AvgBlockSize]]', (Math.round((item.dataContext.AvgBlockSize / 1000) * 100)/100).toFixed(2) );
}
if (g.id === 'g-price' && item.dataContext.AvgUSD) {
return g.balloonText.replace('[[AvgUSD]]', item.dataContext.AvgUSD.toFixed(2));
}
}
return formatted;
}
},
export: {
enabled: true,
fileName: 'lbry-block-size-chart',
position: 'bottom-right',
divId: 'chart-export'
}
});
loadChartData(defaultPeriod);
});
var loadChartData = function(dataPeriod) {
var loadProgress = $('.block-size-chart-container .load-progress');
// clear previous chart data
$.ajax({
url: '/api/v1/charts/blocksize/' + dataPeriod,
type: 'get',
dataType: 'json',
beforeSend: function() {
chartLoadInProgress = true;
loadProgress.css({ display: 'block' });
},
success: function(response) {
if (response.success) {
chartData = [];
var data = response.data;
for (var period in data) {
if (data.hasOwnProperty(period)) {
chartData.push({
date: Date.parse(period),
AvgBlockSize: data[period].AvgBlockSize,
AvgUSD: data[period].AvgUSD
});
}
}
// save selcted period to localStorage
localStorage.setItem('chartPeriod', dataPeriod);
if (chart) {
var isHourly = (dataPeriod.indexOf('h') > -1);
var gridCount = periodGridCounts[dataPeriod];
chart.categoryAxis.minPeriod = isHourly ? 'hh' : 'DD';
chart.categoryAxis.dateFormats[4].format = isHourly ? 'DD MMM' : 'DD';
chart.chartCursor.categoryBalloonDateFormat = isHourly ? 'D MMM HH:NN ' : 'D MMM YYYY';
chart.categoryAxis.gridCount = gridCount;
chart.chartScrollbar.gridCount = gridCount;
chart.dataProvider = chartData;
chart.validateNow();
chart.validateData();
}
}
},
complete: function() {
chartLoadInProgress = false;
loadProgress.css({ display: 'none' });
}
});
};
$(document).ready(function() {
$('.block-size-data-links a').on('click', function(evt) {
evt.preventDefault();
if (chartLoadInProgress) {
return;
}
var link = $(this);
if (link.hasClass('active')) {
return;
}
link.addClass('active').siblings().removeClass('active');
var period = link.attr('data-period');
loadChartData(period);
});
$('a[data-period="' + defaultPeriod + '"]').addClass('active').siblings().removeClass('active');
});
</script>
<script type="text/javascript" src="/js/block-size-chart.js"></script>
<?php $this->end(); ?>
<div class="block-head">

27
src/Template/Main/stats.ctp
View file

@ -1,19 +1,34 @@
<?php $this->assign('title', 'Stats &amp; Rich List') ?>
<?php $this->start('script'); ?>
<script type="text/javascript">
</script>
<?php $this->end(); ?>
<?php echo $this->element('header') ?>
<?php $this->start('script'); ?>
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/responsive/responsive.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/js/mining-inflation-chart.js"></script>
<?php $this->end(); ?>
<?php
$this->start('css');
echo $this->Html->css('/css/mining-inflation-chart.css');
echo $this->Html->css('https://www.amcharts.com/lib/3/plugins/export/export.css');
$this->end();
?>
<div class="stats-head">
<h3>LBRY Stats</h3>
</div>
<div class="stats-main">
<div class="mining-inflation-chart-container">
<div class="load-progress inc"></div>
<h3>Mining Inflation Chart</h3>
<div id="mining-inflation-chart" class="chart"></div>
<div id="chart-export" class="btn-chart-export"></div>
</div>
<div class="richlist">
<h3>LBRY Rich List (Top 500)</h3>
<table class="table">

8
webroot/css/mining-inflation-chart.css Normal file
View file

@ -0,0 +1,8 @@
.mining-inflation-chart-container { width: 1200px; margin: 0 auto 48px auto; box-shadow: 0 2px 6px rgba(0,0,0,.175); border: 1px solid rgba(0,0,0,.15); padding: 24px 36px; position: relative; overflow: hidden }
.mining-inflation-chart-container .load-progress { position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: #1e88e5; animation: indeterminate 4s linear infinite; }
.mining-inflation-chart-container .chart { height: 414px }
.mining-inflation-chart-container .btn-chart-export { position: absolute; right: 40px; bottom: 36px }
@keyframes indeterminate {
from { left: -70%; }
to { left: 100% }
}

228
webroot/js/block-size-chart.js Normal file
View file

@ -0,0 +1,228 @@
var chart;
var chartData = [];
var chartLoadInProgress = false;
var minPeriod = 'hh';
var validPeriods = ['24h', '72h', '168h', '30d', '90d', '1y'];
var defaultPeriod = (validPeriods.indexOf(localStorage.getItem('chartPeriod')) > -1) ? localStorage.getItem('chartPeriod') : '24h';
var periodGridCounts = {'24h': 24, '72h': 24, '168h': 14, '30d': 30, '90d': 45, '1y': 12 };
AmCharts.ready(function() {
chart = AmCharts.makeChart('block-size-chart', {
type: 'serial',
theme: 'light',
mouseWheelZoomEnabled: true,
categoryField: 'date',
synchronizeGrid: true,
dataProvider: chartData,
valueAxes: [
{
id: 'v-block-size',
axisColor: '#1e88e5',
axisThickness: 2,
labelFunction: function(value) {
return (Math.round((value / 1000) * 100)/100).toFixed(2) + ' KB';
}
},
{
id: 'v-price',
axisColor: '#00e676',
offset: 75,
gridAlpha: 0,
axisThickness: 2,
labelFunction: function(value) {
return '$' + value.toFixed(2);
}
}
],
categoryAxis: {
parseDates: true,
minPeriod: minPeriod, // DD for daily
autoGridCount: false,
minorGridEnabled: true,
minorGridAlpha: 0.04,
axisColor: '#dadada',
twoLineMode: true,
dateFormats: [{
period: 'fff',
format: 'JJ:NN:SS'
}, {
period: 'ss',
format: 'JJ:NN:SS'
}, {
period: 'mm',
format: 'JJ:NN'
}, {
period: 'hh',
format: 'JJ:NN'
}, {
period: 'DD',
format: 'DD'
}, {
period: 'WW',
format: 'DD MMM'
}, {
period: 'MM',
format: 'MMM'
}, {
period: 'YYYY',
format: 'YYYY'
}]
},
graphs: [
{
id: 'g-block-size',
valueAxis: 'v-block-size', // we have to indicate which value axis should be used
title: 'Avg Block Size',
valueField: 'AvgBlockSize',
bullet: 'round',
bulletBorderThickness: 1,
bulletBorderAlpha: 1,
bulletColor: '#ffffff',
bulletSize: 5,
useLineColorForBulletBorder: true,
lineColor: '#1e88e5',
hideBulletsCount: 101,
balloonText: '[[AvgBlockSize]] KB',
switchable: false,
balloonFunction: function(item, graph) {
var result = graph.balloonText;
return result.replace('[[AvgBlockSize]]', (Math.round((item.dataContext.AvgBlockSize / 1000) * 100)/100).toFixed(2));
}
},
{
id: 'g-price',
valueAxis: 'v-price',
title: 'Average Price',
valueField: 'AvgUSD',
bullet: 'round',
bulletBorderThickness: 1,
bulletBorderAlpha: 1,
bulletColor: '#ffffff',
bulletSize: 5,
useLineColorForBulletBorder: true,
lineColor: '#00e676',
balloonText: '$[[AvgUSD]]',
balloonFunction: function(item, graph) {
var result = graph.balloonText;
if (!item.dataContext.AvgUSD) {
return '';
}
return result.replace('[[AvgUSD]]', item.dataContext.AvgUSD.toFixed(2));
},
hideBulletsCount: 101,
labelFunction: function(value) {
return '$' + value;
},
}
],
chartCursor: {
cursorAlpha: 0.1,
fullWidth: true,
valueLineBalloonEnabled: true,
categoryBalloonColor: '#333333',
cursorColor: '#1e88e5',
categoryBalloonDateFormat: minPeriod === 'hh' ? 'D MMM HH:NN ' : 'D MMM'
},
chartScrollbar: {
scrollbarHeight: 36,
color: '#888888',
gridColor: '#bbbbbb'
},
legend: {
marginLeft: 110,
useGraphSettings: true,
valueAlign: 'right',
valueWidth: 60,
spacing: 64,
valueFunction: function(item, formatted) {
if (item.dataContext) {
var g = item.graph;
if (g.id === 'g-block-size' && item.dataContext.AvgBlockSize > 0) {
return g.balloonText.replace('[[AvgBlockSize]]', (Math.round((item.dataContext.AvgBlockSize / 1000) * 100)/100).toFixed(2) );
}
if (g.id === 'g-price' && item.dataContext.AvgUSD) {
return g.balloonText.replace('[[AvgUSD]]', item.dataContext.AvgUSD.toFixed(2));
}
}
return formatted;
}
},
export: {
enabled: true,
fileName: 'lbry-block-size-chart',
position: 'bottom-right',
divId: 'chart-export'
}
});
loadChartData(defaultPeriod);
});
var loadChartData = function(dataPeriod) {
var loadProgress = $('.block-size-chart-container .load-progress');
// clear previous chart data
$.ajax({
url: '/api/v1/charts/blocksize/' + dataPeriod,
type: 'get',
dataType: 'json',
beforeSend: function() {
chartLoadInProgress = true;
loadProgress.css({ display: 'block' });
},
success: function(response) {
if (response.success) {
chartData = [];
var data = response.data;
for (var period in data) {
if (data.hasOwnProperty(period)) {
chartData.push({
date: Date.parse(period),
AvgBlockSize: data[period].AvgBlockSize,
AvgUSD: data[period].AvgUSD
});
}
}
// save selcted period to localStorage
localStorage.setItem('chartPeriod', dataPeriod);
if (chart) {
var isHourly = (dataPeriod.indexOf('h') > -1);
var gridCount = periodGridCounts[dataPeriod];
chart.categoryAxis.minPeriod = isHourly ? 'hh' : 'DD';
chart.categoryAxis.dateFormats[4].format = isHourly ? 'DD MMM' : 'DD';
chart.chartCursor.categoryBalloonDateFormat = isHourly ? 'D MMM HH:NN ' : 'D MMM YYYY';
chart.categoryAxis.gridCount = gridCount;
chart.chartScrollbar.gridCount = gridCount;
chart.dataProvider = chartData;
chart.validateNow();
chart.validateData();
}
}
},
complete: function() {
chartLoadInProgress = false;
loadProgress.css({ display: 'none' });
}
});
};
$(document).ready(function() {
$('.block-size-data-links a').on('click', function(evt) {
evt.preventDefault();
if (chartLoadInProgress) {
return;
}
var link = $(this);
if (link.hasClass('active')) {
return;
}
link.addClass('active').siblings().removeClass('active');
var period = link.attr('data-period');
loadChartData(period);
});
$('a[data-period="' + defaultPeriod + '"]').addClass('active').siblings().removeClass('active');
});

265
webroot/js/mining-inflation-chart.js Normal file
View file

@ -0,0 +1,265 @@
function getReward(blockHeight) {
if (blockHeight == 0) {
return 400000000;
}
else if (blockHeight <= 5100) {
return 1;
}
else if (blockHeight <= 55000) {
return 1 + Math.floor((blockHeight - 5001) / 100);
}
else {
var level = Math.floor((blockHeight - 55001) / 32);
var reduction = Math.floor((Math.floor(Math.sqrt((8 * level) + 1)) - 1) / 2);
while(!(withinLevelBounds(reduction, level))) {
if(Math.floor((reduction * reduction + reduction) / 2) > level) {
reduction--;
}
else {
reduction++;
}
}
return Math.max(0, 500 - reduction);
}
}
function withinLevelBounds(reduction, level) {
if(Math.floor((reduction * reduction + reduction) / 2) > level) {
return false;
}
reduction += 1;
if(Math.floor((reduction * reduction + reduction) / 2) <= level) {
return false;
}
return true;
}
function getAverageBlockTime(blocks) {
var numBlocks = blocks.length;
var windowSize = 100;
var sum = 0;
for(i = numBlocks - windowSize; i < numBlocks; i++) {
sum += blocks[i].block_time - blocks[i-1].block_time;
}
return sum / windowSize;
}
function buildChartData(blockData) {
var chartData = [];
var supply = 0;
var reward = 0;
var averageBlockTime = getAverageBlockTime(blockData);
var blockTime = 0;
var lastBlock = 4071017; // Last block with reward
var skip = 100;
var blocksPerYear = Math.floor((3600*24*365) / averageBlockTime);
var historicalSupply = {};
var lastYearSupply = 0;
var lastYearBlock = 0;
var inflationRate = 0;
for(var i = 0; i < lastBlock; i++) {
reward = getReward(i);
supply += reward;
historicalSupply[i + 1] = supply;
if(i == 0) { // Reward for 1st block set to 0 for scale
reward = 0;
}
if(i < blockData.length) {
// Historical Data
var b = blockData[i];
blockTime = b.block_time;
}
else {
// Future blocks
skip = 1000;
blockTime += averageBlockTime;
}
// Inflation Rate
if(i + 1 - blocksPerYear <= 0) {
lastYearBlock = 1;
}
else {
lastYearBlock = i + 1 - blocksPerYear;
}
lastYearSupply = historicalSupply[lastYearBlock];
inflationRate = ((supply - lastYearSupply) / lastYearSupply) * 100;
if(i % skip == 0) { // Only push 1/<skip> of all blocks to optimize data loading
chartData.push({
date: new Date(blockTime * 1000),
date: new Date(blockTime * 1000),
AvailableSupply: supply,
RewardLBC: reward,
InflationRate: inflationRate,
BlockId: i + 1
});
}
}
return chartData;
}
function loadChartData() {
var api_url = "https://chainquery.lbry.io/api/sql?query=";
var query = "SELECT id, block_time FROM block";
var url = api_url + query;
var loadProgress = $('.mining-inflation-chart-container .load-progress');
$.ajax({
url: url,
type: 'get',
dataType: 'json',
beforeSend: function() {
chartLoadInProgress = true;
loadProgress.css({ display: 'block' });
},
success: function(response) {
if(response.success) {
chartData = buildChartData(response.data);
if(chart) {
chart.dataProvider = chartData;
chart.validateNow();
chart.validateData();
}
}
else {
console.log("Could not fetch block data.");
}
},
complete: function() {
chartLoadInProgress = false;
loadProgress.css({ display: 'none' });
}
});
}
var chart;
var chartData = [];
var chartLoadInProgress = false;
AmCharts.ready(function() {
chart = AmCharts.makeChart('mining-inflation-chart', {
type: 'serial',
theme: 'light',
mouseWheelZoomEnabled: true,
height: '100%',
categoryField: 'date',
synchronizeGrid: true,
dataProvider: chartData,
responsive: {
enabled: true,
},
valueAxes: [
{
id: 'v-supply',
axisColor: '#1e88e5',
axisThickness: 2,
position: 'left',
labelFunction: function(value) {
return (Math.round((value / 1000000) * 1000000)/1000000).toFixed(2);
}
},
{
id: 'v-reward',
axisColor: '#0b7a06',
axisThickness: 2,
position: 'left',
offset: 75,
},
{
id: 'v-inflation-rate',
axisColor: '#ff9900',
axisThickness: 2,
position: 'right',
labelFunction: function(value) {
return value.toFixed(2);
}
},
],
categoryAxis: {
parseDates: true,
autoGridCount: false,
minorGridEnabled: true,
minorGridAlpha: 0.04,
axisColor: '#dadada',
twoLineMode: true
},
graphs: [
{
id: 'g-supply',
valueAxis: 'v-supply', // we have to indicate which value axis should be used
title: 'Available supply (millions LBC)',
valueField: 'AvailableSupply',
bullet: 'round',
bulletBorderThickness: 1,
bulletBorderAlpha: 1,
bulletColor: '#ffffff',
bulletSize: 5,
useLineColorForBulletBorder: true,
lineColor: '#1e88e5',
hideBulletsCount: 101,
balloonText: '[[AvailableSupply]]',
balloonFunction: function(item, graph) {
var result = graph.balloonText;
return result.replace('[[AvailableSupply]]', (Math.round((item.dataContext.AvailableSupply / 1000000) * 1000000)/1000000).toFixed(2));
}
},
{
id: 'g-reward',
valueAxis: 'v-reward',
title: 'Block Reward (LBC)',
valueField: 'RewardLBC',
bullet: 'round',
bulletBorderThickness: 1,
bulletBorderAlpha: 1,
bulletColor: '#ffffff',
bulletSize: 5,
useLineColorForBulletBorder: true,
lineColor: '#0b7a06',
balloonText: '[[RewardLBC]] LBC<br>Block [[BlockId]]',
hideBulletsCount: 101
},
{
id: 'g-inflation-rate',
valueAxis: 'v-inflation-rate',
title: 'Annualized Inflation Rate',
valueField: 'InflationRate',
bullet: 'round',
bulletBorderThickness: 1,
bulletBorderAlpha: 1,
bulletColor: '#ffffff',
bulletSize: 5,
useLineColorForBulletBorder: true,
lineColor: '#ff9900',
balloonText: '[[InflationRate]]%',
hideBulletsCount: 101,
balloonFunction: function(item, graph) {
var result = graph.balloonText;
return result.replace('[[InflationRate]]', item.dataContext.InflationRate.toFixed(2));
}
}
],
chartCursor: {
cursorAlpha: 0.1,
fullWidth: true,
valueLineBalloonEnabled: true,
categoryBalloonColor: '#333333',
cursorColor: '#1e88e5'
},
chartScrollbar: {
scrollbarHeight: 36,
color: '#888888',
gridColor: '#bbbbbb'
},
legend: {
marginLeft: 110,
useGraphSettings: true,
valueText: "",
spacing: 64,
},
export: {
enabled: true,
fileName: 'lbry-supply-chart',
position: 'bottom-right',
divId: 'chart-export'
}
});
loadChartData();
});