add web server to show data
parent
c62281b2f6
commit
0ecae09714
@ -0,0 +1,186 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Art101 Sales Statistics</title>
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||
<style>
|
||||
#container {
|
||||
display: grid;
|
||||
grid-template-columns: 5fr 2fr;
|
||||
grid-gap: 2.5rem;
|
||||
visibility: hidden;
|
||||
}
|
||||
#container > div {
|
||||
align-self: center;
|
||||
}
|
||||
#loading {
|
||||
font-weight: bold;
|
||||
}
|
||||
body {
|
||||
font-family: "Open Sans";
|
||||
color: black;
|
||||
padding: 20px;
|
||||
}
|
||||
h1 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
</style>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<h1>Art101 Sales Statistics</h1>
|
||||
<p><a href="https://github.com/lalanza808/nft-sales-scraper" target="_blank">Source Code</a></p>
|
||||
<div id="loading">
|
||||
Loading, please wait...
|
||||
</div>
|
||||
<div id="container"></div>
|
||||
<script>
|
||||
const container = document.getElementById('container');
|
||||
|
||||
fetch('/api/contracts').then(function(response) {
|
||||
response.json().then(function(json) {
|
||||
for (contract in json) {
|
||||
console.log(`Found contract ${contract} (${json[contract]['contract_address']})`)
|
||||
const contractName = contract;
|
||||
const contractAddress = json[contract]['contract_address'];
|
||||
const salesId = `sales-chart-${contractName}`;
|
||||
const platformId = `platform-chart-${contractName}`;
|
||||
newSalesChartDiv = document.createElement('div');
|
||||
newSalesChart = document.createElement('canvas');
|
||||
newSalesChart.setAttribute('id', salesId);
|
||||
newSalesChartDiv.appendChild(newSalesChart);
|
||||
newPlatformChartDiv = document.createElement('div');
|
||||
newPlatformChart = document.createElement('canvas');
|
||||
newPlatformChart.setAttribute('id', platformId);
|
||||
newPlatformChartDiv.appendChild(newPlatformChart);
|
||||
container.appendChild(newSalesChartDiv);
|
||||
container.appendChild(newPlatformChartDiv);
|
||||
let loaded = 0;
|
||||
fetch(`/api/${contractAddress}/data`).then(function(response) {
|
||||
response.json().then(function(json) {
|
||||
loaded++;
|
||||
if (loaded == 2) {
|
||||
document.getElementById("container").style.visibility = "visible";
|
||||
document.getElementById("loading").style.display = "none";
|
||||
}
|
||||
const labels = json.map(d => d.block);
|
||||
const data = {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
type: 'line',
|
||||
label: 'Average price',
|
||||
backgroundColor: 'rgb(99, 132, 255)',
|
||||
borderColor: 'rgb(99, 132, 255)',
|
||||
data: json.map(d => d.average_price),
|
||||
yAxisID: 'y1',
|
||||
},
|
||||
{
|
||||
type: 'line',
|
||||
label: 'Floor price',
|
||||
backgroundColor: '#ccc',
|
||||
borderColor: '#ccc',
|
||||
data: json.map(d => d.floor_price),
|
||||
yAxisID: 'y1',
|
||||
},
|
||||
{
|
||||
type: 'bar',
|
||||
label: 'Volume',
|
||||
backgroundColor: 'rgb(255, 99, 132)',
|
||||
borderColor: 'rgb(255, 99, 132)',
|
||||
data: json.map(d => d.volume),
|
||||
yAxisID: 'y',
|
||||
}]
|
||||
};
|
||||
const config = {
|
||||
type: 'line',
|
||||
data: data,
|
||||
options: {
|
||||
elements: {
|
||||
point: {
|
||||
radius: 0
|
||||
}
|
||||
},
|
||||
plugins: {
|
||||
title: {
|
||||
display: true,
|
||||
text: `Sales for ${contractName}`,
|
||||
font: {
|
||||
size: '18px'
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
y: {
|
||||
type: 'linear',
|
||||
display: true,
|
||||
position: 'left',
|
||||
},
|
||||
y1: {
|
||||
type: 'linear',
|
||||
display: true,
|
||||
position: 'right',
|
||||
grid: {
|
||||
drawOnChartArea: false,
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
};
|
||||
const myChart = new Chart(
|
||||
document.getElementById(salesId),
|
||||
config
|
||||
);
|
||||
})
|
||||
});
|
||||
fetch(`/api/${contractAddress}/platforms`).then(function(response) {
|
||||
response.json().then(function(json) {
|
||||
loaded++;
|
||||
if (loaded == 2) {
|
||||
document.getElementById("container").style.visibility = "visible";
|
||||
document.getElementById("loading").style.display = "none";
|
||||
}
|
||||
|
||||
const labels = json.map(d => d.marketplace);
|
||||
const total = json.map(d => d.volume).reduce((prev,next) => prev+next, 0);
|
||||
const data = {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Platform',
|
||||
data: json.map(d => d.volume),
|
||||
backgroundColor: ["#7463A8", "#80B7D8", "#AC39A0", "#B0C484", "#B75055", "#F12055"]
|
||||
}]
|
||||
};
|
||||
const config = {
|
||||
type: 'doughnut',
|
||||
data: data,
|
||||
options: {
|
||||
plugins: {
|
||||
title: {
|
||||
display: true,
|
||||
text: `Volume for ${contractName}: ${total.toFixed(2)}Ξ`,
|
||||
font: {
|
||||
size: '18px'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
position: 'bottom',
|
||||
},
|
||||
}
|
||||
}
|
||||
};
|
||||
const myChart = new Chart(
|
||||
document.getElementById(platformId),
|
||||
config
|
||||
);
|
||||
})
|
||||
});
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,104 @@
|
||||
const ALL_CONTRACTS = require('./contracts');
|
||||
|
||||
const Database = require('better-sqlite3');
|
||||
const express = require('express');
|
||||
|
||||
|
||||
const app = express();
|
||||
const port = process.env.PORT || 3000;
|
||||
const db = new Database('./state/sqlite.db', {readonly: true});
|
||||
|
||||
|
||||
app.use(express.json());
|
||||
|
||||
app.use('/', express.static('public'));
|
||||
|
||||
app.use('/app', express.static('public'));
|
||||
|
||||
app.get('/api/contracts', (req, res) => {
|
||||
res.status(200).json(ALL_CONTRACTS)
|
||||
})
|
||||
|
||||
app.get('/api/:contractAddress/events', (req, res) => {
|
||||
const results = [];
|
||||
const stmt = db.prepare(`select *
|
||||
from events
|
||||
where contract = '${req.params.contractAddress}'
|
||||
collate nocase
|
||||
order by block_number desc
|
||||
limit 100
|
||||
`);
|
||||
for (const entry of stmt.iterate()) {
|
||||
results.push(entry);
|
||||
}
|
||||
res.status(200).json(results);
|
||||
});
|
||||
|
||||
app.get('/api/token/:contractAddress/:tokenId/history', (req, res) => {
|
||||
const results = [];
|
||||
const stmt = db.prepare(`select *
|
||||
from events
|
||||
where token_id = ${req.params.tokenId}
|
||||
and contract = '${req.params.contractAddress}'
|
||||
collate nocase
|
||||
order by block_number desc
|
||||
`);
|
||||
for (const entry of stmt.iterate()) {
|
||||
results.push(entry);
|
||||
}
|
||||
res.status(200).json(results);
|
||||
});
|
||||
|
||||
app.get('/api/latest', (req, res) => {
|
||||
const stmt = db.prepare(`select *
|
||||
from events
|
||||
order by block_number desc
|
||||
limit 1
|
||||
`);
|
||||
res.status(200).json(stmt.get());
|
||||
});
|
||||
|
||||
app.get('/api/:contractAddress/data', (req, res) => {
|
||||
const results = [];
|
||||
const stmt = db.prepare(`select
|
||||
block_number block,
|
||||
sum(sale_price/1000000000000000000.0) volume,
|
||||
avg(sale_price/1000000000000000000.0) average_price,
|
||||
(select avg(sale_price/1000000000000000000.0) from (select * from events
|
||||
where contract = '${req.params.contractAddress}'
|
||||
collate nocase
|
||||
order by sale_price
|
||||
limit 10)) floor_price,
|
||||
count(*) sales
|
||||
from events ev
|
||||
where contract = '${req.params.contractAddress}'
|
||||
collate nocase
|
||||
group by block
|
||||
order by block
|
||||
`);
|
||||
for (const entry of stmt.iterate()) {
|
||||
results.push(entry);
|
||||
}
|
||||
res.status(200).json(results);
|
||||
});
|
||||
|
||||
app.get('/api/:contractAddress/platforms', (req, res) => {
|
||||
const results = [];
|
||||
const stmt = db.prepare(`select marketplace,
|
||||
sum(sale_price/1000000000000000000.0) volume,
|
||||
count(*) sales
|
||||
from events
|
||||
where contract = '${req.params.contractAddress}'
|
||||
collate nocase
|
||||
group by marketplace
|
||||
order by sum(sale_price/1000000000000000000.0) desc
|
||||
`);
|
||||
for (const entry of stmt.iterate()) {
|
||||
results.push(entry);
|
||||
}
|
||||
res.status(200).json(results);
|
||||
});
|
||||
|
||||
app.listen(port, () => {
|
||||
console.log(`Example app listening at http://localhost:${port}`);
|
||||
});
|
||||
Loading…
Reference in New Issue