Added mining inflation chart to stats page #34
5 changed files with 524 additions and 237 deletions
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -1,19 +1,34 @@
|
|||
<?php $this->assign('title', 'Stats & 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
8
webroot/css/mining-inflation-chart.css
Normal 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
228
webroot/js/block-size-chart.js
Normal 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
265
webroot/js/mining-inflation-chart.js
Normal 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();
|
||||
});
|
||||
Loading…
Reference in a new issue