Skip to content

Commit

Permalink
test
Browse files Browse the repository at this point in the history
  • Loading branch information
@tksarah
tksarah committed Jun 28, 2024
1 parent 1945e25 commit 1165cc5
Show file tree
Hide file tree
Showing 8 changed files with 62 additions and 1,958 deletions.
85 changes: 0 additions & 85 deletions docs/api_data.csv
View file

This file was deleted.

255 changes: 6 additions & 249 deletions docs/cool.html
View file
Original file line number Diff line number Diff line change
@@ -1,255 +1,12 @@
<!DOCTYPE html>
<html>
<html lang="ja">
<head>
<title>Staker/dApp Amount</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
color: #333;
line-height: 1.6;
}
h2 {
text-align: center;
margin-top: 20px;
color: #34b7f1;
}
.container {
width: 80%;
margin: auto;
overflow: hidden;
padding: 10px 20px;
box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.1);
background: #fff;
border-radius: 10px;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
th, td {
border: 1px solid #ddd;
padding: 10px;
text-align: left;
width: 33%;
}
th:first-child, td:first-child, th:last-child, th:nth-child(2), td:nth-child(2) {
text-align: center;
}
td:last-child {
text-align: right;
}
th {
background-color: #34b7f1;
color: white;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
select {
padding: 10px;
width: 200px;
margin-top: 20px;
border-radius: 5px;
border: none;
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);
}
.footer {
text-align: center;
padding: 20px;
background-color: #f4f4f4;
color: #333;
font-size: 0.8em;
position: fixed;
bottom: 0;
width: 100%;
border-top: 1px solid #ddd;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <!-- Chart.jsライブラリを読み込む -->
<meta charset="UTF-8">
<meta http-equiv="refresh" content="0;url=https://agent.sun-t-sarah.work/dlist/">
<title>Document</title>
</head>
<body>
<div class="container">
<h2 id="section-name">dApp Name</h2>
<ul>
<li>dAppStaking の dApp 毎のステーカーリストを表示します</li>
<li>dApp Name のとなりの（数値）はステーカーの総数を表示しています</li>
<li>オンチェーンデーターから整形しています</li>
<li>デフォルトはステーキング量で降順で表示されます（テーブルヘッダーで切り替え可能）</li>
<li>ステーカーが多い dApp は表示に若干時間がかかる場合があります</li>
<li>dAppを選んでから「Export CSV Data」を押す事でステーカーとそのステーク量を出力したファイルをエクスポートできます</li>
<li>dApp のリスト自体は <font color="red">2024/6/22</font> のデータです</li>
<li>予告なく仕様変更やdApp のリストの更新遅延などがある点はご了承ください</li>
</ul>
<p>
<ul>
<li>Displays a list of stakers for each dApp in dAppStaking.</li>
<li>The number next to the dApp Name represents the total number of stakers.</li>
<li>The data is formatted from on-chain data.</li>
<li>By default, it is displayed in descending order of staking amount (switchable via the table header).</li>
<li>dApps with many stakers may take some time to display.</li>
<li>By selecting a dApp and pressing “Export CSV Data,” you can export a file that lists stakers and their stake amounts.</li>
<li>The list of dApps itself is based on the data from <font color="red">June 22, 2024</font>.</li>
<li>Please be aware that there may be changes to specifications or delays in updating the list of dApps without prior notice.</li>
</ul>


<select id="name-select">
<option selected disabled>dApp を選択してください (Please select a dApp)</option>
</select>
<p>
<button id="export-btn">Export CSV Data</button>
<p>
<canvas id="donut-chart" width=10px height=10px style="max-width: 100%;"></canvas>

<table id="data-table">
<tr>
<th>No.</th>
<th>ステーカー (Staker)</th>
<th id="amount-header" style="cursor:pointer;">ステーキング量 (Amount)</th>
</tr>
</table>
</div>

<script>


let sortedData = [];

let select = document.getElementById('name-select');
let sectionName = document.getElementById('section-name');
let isAscending = false;
let chart;

fetch("api_data.csv")
.then(response => response.text())
.then(data => {
let lines = data.split('\n');
lines.shift();
lines.forEach(line => {
if (line.trim() !== '') {
let parts = line.split(',');
let option = document.createElement('option');
option.value = parts[0];
option.textContent = parts[1];
select.appendChild(option);
}
});
})
.catch(error => console.error('Error:', error));

select.addEventListener('change', () => {
let address = select.value;
sectionName.textContent = select.options[select.selectedIndex].text;
fetch('https://api.astar.network/api/v3/astar/dapps-staking/stakerslist/' + address)
.then(response => response.json())
.then(data => {
sortedData = data.sort((a, b) => isAscending ? a.amount - b.amount : b.amount - a.amount);
let table = document.getElementById('data-table');
table.innerHTML = '<tr><th>No.</th><th>ステーカー (Staker)</th><th id="amount-header" style="cursor:pointer;">ステーキング量 (Amount)</th></tr>';
sortedData.forEach((item, index) => {
let row = document.createElement('tr');
let cell0 = document.createElement('td');
cell0.textContent = index + 1;
let cell1 = document.createElement('td');
cell1.textContent = item.stakerAddress.slice(0, 5) + ' ... ' + item.stakerAddress.slice(-5);
let cell2 = document.createElement('td');
cell2.textContent = (item.amount / 1000000000000000000).toFixed(3);
row.appendChild(cell0);
row.appendChild(cell1);
row.appendChild(cell2);
table.appendChild(row);
});
//
let totalObjects = sortedData.length;
sectionName.textContent = select.options[select.selectedIndex].text + ' (' + totalObjects + ')';
//
document.getElementById('amount-header').addEventListener('click', () => {
isAscending = !isAscending;
let event = new Event('change');
select.dispatchEvent(event);
});

// create donut chart
createDonutChart(sortedData);
})
.catch(error => console.error('Error:', error));
});

// Function creating donut chart
function createDonutChart(data) {
let ctx = document.getElementById('donut-chart').getContext('2d');
let allData = data;

if (chart) {
chart.destroy();
}

chart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: allData.map(item => item.stakerAddress.slice(0, 5) + '...' + item.stakerAddress.slice(-5)),
datasets: [{
data: allData.map(item => item.amount),
backgroundColor: allData.map(() => '#' + Math.floor(Math.random()*16777215).toString(16))
}]
},
options: {
responsive: true,
legend: {
position: 'right',
labels: {
boxWidth: 10
}
},
animation: {
animateScale: true,
animateRotate: true
}
}
});
}
// Add Export CSV
document.getElementById('export-btn').addEventListener('click', function() {
let data = [];
let rows = document.querySelectorAll('table tr');
for (let i = 0; i < rows.length; i++) {
let row = [], cols = rows[i].querySelectorAll('td, th');
for (let j = 0; j < cols.length; j++) {
if (j === 1 && i !== 0) {
let stakerAddress = sortedData[i-1].stakerAddress;
row.push(stakerAddress);
} else if (j === 2 && i !== 0) {
let amount = sortedData[i-1].amount / 1000000000000000000;
row.push(amount.toFixed(3));
}
}
if (i === 0) {
// Set CSV file header
row = ['StakerAddress', 'Amount'];
}
data.push(row.join(','));
}
let csvContent = 'data:text/csv;charset=utf-8,' + data.join('\n');
let encodedUri = encodeURI(csvContent);
let link = document.createElement('a');
link.setAttribute('href', encodedUri);
link.setAttribute('download', 'stakers_data.csv');
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
});

</script>
</br>
</br>
</br>
<p>
<div class="footer">
c 2024 Astar Ecosystem Agent tksarah. This page was created by tksarah from on-chain data.
</div>
Redirect...
</body>
</html>

Loading

0 comments on commit 1165cc5

Please sign in to comment.