stats.html 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>DarkFi Blocks - Statistics</title>
  7. <link rel="stylesheet" href="/static/layout.css">
  8. </head>
  9. <body>
  10. <header class="header">
  11. <div class="container flex justify-between items-center">
  12. <div class="logo">DarkFi {{ network }} Blocks</div>
  13. <nav class="nav">
  14. <a href="/">Explorer</a>
  15. <a href="/contracts">Contracts</a>
  16. <a href="/stats" class="active">Stats</a>
  17. <a href="https://dark.fi/book/">Docs</a>
  18. <a href="https://codeberg.org/darkrenaissance/darkfi/">Code</a>
  19. </nav>
  20. </div>
  21. </header>
  22. <main class="container section">
  23. <form action="/search" method="GET" class="input-group mb-lg" style="max-width: 600px;">
  24. <input type="search" name="q" class="input" placeholder="Search by block height, hash, transaction, or contract ID...">
  25. <button type="submit" class="btn">Search</button>
  26. </form>
  27. <div class="stats-grid mb-lg">
  28. <div class="stat-card">
  29. <div class="label">Difficulty</div>
  30. <div class="value">{{ current_difficulty }}</div>
  31. </div>
  32. <div class="stat-card">
  33. <div class="label">Height</div>
  34. <div class="value">{{ current_height }}</div>
  35. </div>
  36. <div class="stat-card">
  37. <div class="label">Hashrate</div>
  38. <div class="value">{{ hashrate|default('n/a') }}</div>
  39. </div>
  40. <div class="stat-card">
  41. <div class="label">Emission</div>
  42. <div class="value">n/a</div>
  43. </div>
  44. </div>
  45. <h1 class="mb-lg">Blockchain Statistics</h1>
  46. <div class="table-section mb-lg">
  47. <div class="table-header">
  48. <h3>Daily Average Transactions per Block (Last 90 Days)</h3>
  49. </div>
  50. <div class="chart-container" style="text-align: center; padding: 1rem;">
  51. <img src="/stats/daily_tx_chart.png" alt="Daily Average Transactions Chart" style="max-width: 100%; height: auto;">
  52. </div>
  53. </div>
  54. <div class="table-section mb-lg">
  55. <div class="table-header">
  56. <h3>Transactions per Block (Excluding Coinbase)</h3>
  57. </div>
  58. <div class="table-wrapper">
  59. <table>
  60. <thead>
  61. <tr>
  62. <th>Period</th>
  63. <th>Avg TX/Block</th>
  64. <th>Empty Blocks %</th>
  65. <th>Total Transactions</th>
  66. <th>Blocks</th>
  67. </tr>
  68. </thead>
  69. <tbody>
  70. <tr>
  71. <td>Last Day</td>
  72. <td>{{ "%.2f"|format(stats.tx_per_block.last_day.avg_tx) }}</td>
  73. <td>{{ "%.1f"|format(stats.tx_per_block.last_day.empty_pct) }}%</td>
  74. <td>{{ stats.tx_per_block.last_day.total_tx|int }}</td>
  75. <td>{{ stats.tx_per_block.last_day.block_count|int }}</td>
  76. </tr>
  77. <tr>
  78. <td>Last Week</td>
  79. <td>{{ "%.2f"|format(stats.tx_per_block.last_week.avg_tx) }}</td>
  80. <td>{{ "%.1f"|format(stats.tx_per_block.last_week.empty_pct) }}%</td>
  81. <td>{{ stats.tx_per_block.last_week.total_tx|int }}</td>
  82. <td>{{ stats.tx_per_block.last_week.block_count|int }}</td>
  83. </tr>
  84. <tr>
  85. <td>Last Month</td>
  86. <td>{{ "%.2f"|format(stats.tx_per_block.last_month.avg_tx) }}</td>
  87. <td>{{ "%.1f"|format(stats.tx_per_block.last_month.empty_pct) }}%</td>
  88. <td>{{ stats.tx_per_block.last_month.total_tx|int }}</td>
  89. <td>{{ stats.tx_per_block.last_month.block_count|int }}</td>
  90. </tr>
  91. <tr>
  92. <td>Last Year</td>
  93. <td>{{ "%.2f"|format(stats.tx_per_block.last_year.avg_tx) }}</td>
  94. <td>{{ "%.1f"|format(stats.tx_per_block.last_year.empty_pct) }}%</td>
  95. <td>{{ stats.tx_per_block.last_year.total_tx|int }}</td>
  96. <td>{{ stats.tx_per_block.last_year.block_count|int }}</td>
  97. </tr>
  98. </tbody>
  99. </table>
  100. </div>
  101. </div>
  102. <div class="table-section mb-lg">
  103. <div class="table-header">
  104. <h3>Blockchain Growth by Month</h3>
  105. </div>
  106. <div class="table-wrapper" style="max-height: 400px; overflow-y: auto;">
  107. <table>
  108. <thead>
  109. <tr>
  110. <th>Month</th>
  111. <th>Monthly Growth (MB)</th>
  112. <th>Cumulative Size (MB)</th>
  113. </tr>
  114. </thead>
  115. <tbody>
  116. {% for month in stats.monthly_growth|reverse %}
  117. <tr>
  118. <td>{{ month.year|int }}-{{ "%02d"|format(month.month|int) }}</td>
  119. <td>{{ "%.2f"|format(month.size_mb) }}</td>
  120. <td>{{ "%.2f"|format(month.cumulative_mb) }}</td>
  121. </tr>
  122. {% else %}
  123. <tr>
  124. <td colspan="3" style="text-align: center; color: var(--color-muted);">No data available</td>
  125. </tr>
  126. {% endfor %}
  127. </tbody>
  128. </table>
  129. </div>
  130. </div>
  131. </main>
  132. <footer class="footer">
  133. <div class="container">
  134. <a href="https://dark.fi">Let there be Dark</a> · Code licensed under AGPL-3
  135. </div>
  136. </footer>
  137. </body>
  138. </html>