Skip to content

Commit

Permalink
refactor: separate fetch data and view data
Browse files Browse the repository at this point in the history
  • Loading branch information
@ilyar
ilyar committed Oct 9, 2024
1 parent e8d67cc commit 60ca864
Showing 1 changed file with 80 additions and 48 deletions.
128 changes: 80 additions & 48 deletions widget.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,39 +31,13 @@
<script>
const u8 = (value) => BigInt.asUintN(8, BigInt(value)).toString(16)

function createMetric(network) {
const out = document.createElement('div')
out.className = 'metric'
let extra = ''
if (!network.includes('ackinacki')) {
extra += '<span>(MC: <span data-behavior="tpsMC">...</span></span>'
extra += '<span> WC: <span data-behavior="tpsWC0">...</span>)</span>'
}
out.innerHTML = `<h3>${name(network)}</h3>
<h4>
<span> BPS: <span data-behavior='bps'>...</span><span>
<span> TPS: <span data-behavior='tps'>...</span><span>
${extra}
</h4>
<div data-behavior='output'></div>`
out.updateElem = (name, value) => {
out.querySelector(`[data-behavior=${name}]`).innerHTML = value
}
return out
}

function subscription(root, network, query) {
const host = graphqlHost(network)
const metric = createMetric(network)
root.append(metric)
const log = (message) => metric.updateElem('output', message)

function metricUpdate(elem) {
let startTime
let totalTransactionCount = 0
let totalBlockCount = 0
const wcCount = {}

function up(block) {
return (block) => {
const transactionCount = block.tr_count
const workchainId = u8(block.workchain_id)
wcCount[workchainId] = (wcCount[workchainId] || 0) + transactionCount
Expand All @@ -79,15 +53,54 @@ <h4>
const TPSMC = Number(wcCount['ff'] / timeDiff * 1000)
const TPSMWC0 = Number(wcCount['0'] / timeDiff * 1000)
if (timeDiff > 10000) {
metric.updateElem('bps', `${BPS.toFixed(1)}`)
metric.updateElem('tps', `${TPS.toFixed(1)}`)
elem.updateElem('bps', `${BPS.toFixed(1)}`)
elem.updateElem('tps', `${TPS.toFixed(1)}`)
if (TPSMC) {
metric.updateElem('tpsMC', `${TPSMC.toFixed(2)}`)
metric.updateElem('tpsWC0', `${TPSMWC0 >= 0 ? TPSMWC0.toFixed(2) : '...'}`)
elem.updateElem('tpsMC', `${TPSMC.toFixed(2)}`)
elem.updateElem('tpsWC0', `${TPSMWC0 >= 0 ? TPSMWC0.toFixed(2) : '...'}`)
}
}
}
}

function createMetric(root, network) {
const out = document.createElement('div')
out.className = 'metric'
let extra = ''
if (!network.includes('ackinacki')) {
extra += '<span>(MC: <span data-behavior="tpsMC">...</span></span>'
extra += '<span> WC: <span data-behavior="tpsWC0">...</span>)</span>'
}
out.innerHTML = `<h3>${name(network)}</h3>
<h4>
<span> BPS: <span data-behavior='bps'>...</span><span>
<span> TPS: <span data-behavior='tps'>...</span><span>
${extra}
</h4>
<div data-behavior='output'></div>`
out.updateElem = (name, value) => {
out.querySelector(`[data-behavior=${name}]`).innerHTML = value
}
root.append(out)
return {
up: metricUpdate(out),
log: (message) => out.updateElem('output', message),
}
}

function blockPollingEverX(root, network) {
// TODO implement
console.log(`${network} not implement`)
}

function blockPollingTonCore(root, network) {
// TODO implement
console.log(`${network} not implement`)
}

function blockSubscriptionEverX(root, network) {
const query = 'subscription {blocks {id tr_count workchain_id seq_no shard gen_software_version}}'
const {up, log} = createMetric(root, network)
const connect = (url) => {
const start = Date.now()
let dataCount = 0
Expand All @@ -111,11 +124,9 @@ <h4>
const data = JSON.parse(event.data)
if (data.type === 'data') {
dataCount += 1
log(logTemplate(
network,
data.payload.data.blocks,
))
up(data.payload.data.blocks)
const block = data.payload.data.blocks
log(logTemplate(network, block))
up(block)
} else {
dataEmptyCount += 1
}
Expand All @@ -129,7 +140,7 @@ <h4>
websocket.close()
}
}
connect(`wss://${host}/graphql`)
connect(`wss://${graphqlHost(network)}/graphql`)
}

function logTemplate(network, block) {
Expand All @@ -146,6 +157,8 @@ <h4>

function urlBlock(network, block) {
switch (network) {
case 'shellnet-test':
return `https://shellnet.ackinacki.org/blocks/blockDetails?id=${block.id}`
case 'ackinacki-test':
return `https://ackinacki-testnet.tvmlabs.dev/blocks/blockDetails?id=${block.id}`
case 'ever-main':
Expand Down Expand Up @@ -178,6 +191,8 @@ <h4>
function graphqlHost(network) {
const projectID = 'a3446bfb5e4e4f2a84d68400a28d990e'
switch (network) {
case 'shellnet-test':
return 'shellnet.ackinacki.org'
case 'ackinacki-test':
return 'ackinacki-testnet.tvmlabs.dev'
case 'gosh-main':
Expand All @@ -203,8 +218,10 @@ <h4>

function name(network) {
switch (network) {
case 'shellnet-test':
return 'Acki Nacki Testnet (beta)'
case 'ackinacki-test':
return 'Acki Nacki Testnet'
return 'Acki Nacki Testnet (alpha)'
case 'gosh-main':
return 'Gosh Mainnet'
case 'venom-main':
Expand All @@ -226,17 +243,32 @@ <h4>
}
}

function loadWidget(elem, network) {
switch (network) {
case 'venom-test':
case 'shellnet-test':
blockPollingEverX(elem, network)
break
case 'ton-main':
case 'ton-test':
blockPollingTonCore(elem, network)
break
default:
blockSubscriptionEverX(elem, network)
}
}

window.addEventListener('load', function () {
const root = document.querySelector('[data-behavior=content]')
const query = 'subscription {blocks {id tr_count workchain_id seq_no shard gen_software_version}}'
subscription(root, 'ever-main', query)
subscription(root, 'ever-test', query)
subscription(root, 'venom-main', query)
subscription(root, 'venom-test', query)
subscription(root, 'ton-main', query)
subscription(root, 'ton-test', query)
subscription(root, 'gosh-main', query)
subscription(root, 'ackinacki-test', query)
loadWidget(root, 'ever-main')
loadWidget(root, 'ever-test')
loadWidget(root, 'venom-main')
loadWidget(root, 'venom-test')
loadWidget(root, 'ton-main')
loadWidget(root, 'ton-test')
loadWidget(root, 'gosh-main')
loadWidget(root, 'ackinacki-test')
loadWidget(root, 'shellnet-test')
})
</script>
</head>
Expand Down

0 comments on commit 60ca864

Please sign in to comment.