지난 시간에 C3.js 라이브러리를 소개하면서 잠깐 Steem.js을 연동하여 스팀블록체인 정보를 시각화에 응용하면 좋을 것 같다고 이야기 했는데 그냥 지나치기에 좀 아쉬워서 실제 적용해 보는 시간으로 post를 꾸미면 좋을 것 같아서 오늘 post의 주제로 결정했네요. 오늘의 내용은 특정 post의 보팅한 사람들의 보팅금액을 계산하여 시 pie chart로 출력하는 실험을 하겠습니다.
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="c3.min.js"></script>
<link href="c3.css" rel="stylesheet">
<body>
<div id="chart"></div> //출력
<script>
var chart = c3.generate({
data: {
columns: 출력데이터,
type: 'pie'
},
pie: {
label: {
format: function (value, ratio, id) {
return d3.format('$')(value);
}
}
}
});
</script>
</body>
이 예제에서 Steem.js 연동하여 해당 post 보팅한 스티미언과 보팅금액을 출력데이터로 만들기만 하면 pie chart가 자동으로 만들어 집니다.
예전에 공부할 때 참고한 소스입니다. 출처는 위 상단에 올려놓았으니깐 가셔서 읽어보시기 바랍니다.
<script src="https://cdn.steemjs.com/lib/latest/steem.min.js"></script>
<script>
var author = 'codingman'
var permlink = 'steemit'
steem.api.getActiveVotes(author, permlink, function (err, activeVoters) {
var voterSBD, baseSBD;
var msg = "voters : " + activeVoters.length;
console.log(msg);
steem.api.getRewardFund("post", function (err, rewardFund) {
var reward_balance = parseFloat(rewardFund.reward_balance.split(' '))
var recent_claims = parseInt(rewardFund.recent_claims)
baseSBD = reward_balance/recent_claims;
steem.api.getCurrentMedianHistoryPrice(function (err, historyPrice) {
var basePrice = parseFloat(historyPrice.base.split(' '))
var quotePrice = parseFloat(historyPrice.quote.split(' '))
baseSBD = baseSBD*basePrice/quotePrice;
// voters 계산
var output_SBD=new Array();
for (var i = 0; i < activeVoters.length; i++) {
var sub_SBD=new Array();
var rshares = parseInt(activeVoters[i].rshares)
voterSBD = (baseSBD * rshares).toFixed(2);
sub_SBD.push(activeVoters[i].voter,voterSBD);
output_SBD.push(sub_SBD);
}
console.log(output_SBD);
});
});
});
</script>
출력데이터 형식이 2차배열로 data명과 data값으로 구성되어 있습니다. 그래서
// voters 계산
var output_SBD=new Array();
for (var i = 0; i < activeVoters.length; i++) {
var sub_SBD=new Array();
var rshares = parseInt(activeVoters[i].rshares)
voterSBD = (baseSBD * rshares).toFixed(2);
sub_SBD.push(activeVoters[i].voter,voterSBD);
output_SBD.push(sub_SBD);
}
output_SBD 출력배열변수로 지정한 뒤에 post 보팅한 사람들인 activeVoters 값들을 읽어와서 내부에 sub_SBD 배열변수로 지정하여 보팅한사람과 보팅금액을 저장하고 이 값을 다시 output_SBD에 추가하도록 코딩했습니다. 이렇게 하면 보팅한사람과 보팅금액을 하나로 묶어서 추가하게 됩니다.
그 결과를 출력하면 다음과 같습니다.
[결과]
기준은 Steem.js을 이용하여 post의 보팅한 사람과 보팅한 금액을 계산하여 output_SBD 출력배열변수에 저장했습니다. 참고로 콜백함수로 Steem.js 함수들은 구성되어 있어 외부로 빼면 output_SBD값은 사라집니다. 그래서 내부에 Pie Chart 코딩을 삽입해야 합니다.
삽입하는 위치는 마지막 계산 완료된 위치가 보팅금액 계산하는 for문 다음 라인이니깐 그곳에다가 Pie Chart 코딩을 삽입하면 됩니다.
종합해보면,
<script src="https://cdn.steemjs.com/lib/latest/steem.min.js"></script>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="c3.js"></script>
<link href="c3.css" rel="stylesheet">
<body>
<div id="chart"></div>
<script>
var author = 'codingman'
var permlink = 'steemit'
steem.api.getActiveVotes(author, permlink, function (err, activeVoters) {
var voterSBD, baseSBD;
var msg = "voters : " + activeVoters.length;
console.log(msg);
steem.api.getRewardFund("post", function (err, rewardFund) {
var reward_balance = parseFloat(rewardFund.reward_balance.split(' '))
var recent_claims = parseInt(rewardFund.recent_claims)
baseSBD = reward_balance/recent_claims;
steem.api.getCurrentMedianHistoryPrice(function (err, historyPrice) {
var basePrice = parseFloat(historyPrice.base.split(' '))
var quotePrice = parseFloat(historyPrice.quote.split(' '))
baseSBD = baseSBD*basePrice/quotePrice;
// voters 계산
var output_SBD=new Array();
for (var i = 0; i < activeVoters.length; i++) {
var sub_SBD=new Array();
var rshares = parseInt(activeVoters[i].rshares)
voterSBD = (baseSBD * rshares).toFixed(2);
sub_SBD.push(activeVoters[i].voter,voterSBD);
output_SBD.push(sub_SBD);
}
var chart = c3.generate({
data: {
columns: output_SBD, //출력데이터
type: 'pie'
},
pie: {
label: {
format: function (value, ratio, id) {
return d3.format('$')(value);
}
}
}
});
});
});
});
</script>
</body>
[결과]
보면 0% 보팅금액은 Pie Chart에 표시는 되지 않네요.
오늘은 좀 짜집기 코딩을 해보았습니다. 조금만 머리를 쓰면 다양한 결과를 만들어 낼 수 있습니다. 실험 예제를 입력부분을 만들어서 계정과 post를 입력하게 해서 해당 보팅내역을 출력할 수 있지만 코딩을 간소화 하기 위해서 코딩상으로 계정과 post permlink 주소를 지정하고 테스트를 해보았습니다.
여러분들은 맘에 드는 차트를 골라서 Steem post 중에 누군가 만든 스팀블록체인 정보를 출력하는 post들이 있을 거에요. 그걸 보시고 응용하여 저처럼 만들어 보세요.