This epic includes issues related to the home screen dashboard/chart.
There are 2 charts combined, using the same data. One is a bar chart (purple), containing range data (smaller / bigger blocks), and the other, is a line chart, with the average amount of transactions on those blocks. By default, each data point represents 10 blocks. This issue does not include the final touches on the design, like shadows or the gradient in the column, but other aspects should be 'identical' (purple rounded columns)
100 datapoints representing 10 blocks. The Y-axis is represented by a rounded column, which displays the smallest and bigger block sizes (transactions).
Example: If the smaller blocks contain 0 transactions, and the bigger 4, the column will start on 4 and end on the 0.
Additional features:
Tooltip: when hovering over the chart, it is possible to see the value represented by the column (smaller block, bigger block, average transactions in that interval, and the block interval that it is covering. Note: It is not possible to follow the design in details
Example (texts to be updated):
- Block #923,232 - 242
- Smaller block: '0' (empty block)
- Biggest block: '20'
- Average block size: 4.5
![image](https://user-images.githubusercontent.com/38396062/142338054-0a437408-fba5-43e3-a133-6842cbf8712b.png)
Zoom:
It is possible to change the zoom in the chart. This changes the number of blocks per data point. There are 3 zoom levels: 100 blocks per data point, 10 blocks per data point, and 3 blocks per data point. This will show data about the latest 100.000, 1000, and 300 blocks respectively.
The values at the axis and the title must be updated to match the new interval.
![image](https://user-images.githubusercontent.com/38396062/142337999-30e61441-e57a-4f72-9db4-1ebbcf6ddc3b.png)
TPS Counter:
Below the chart there is an informative box that shows the total number of transactions in that interval, and the TPS (transactions per second). The TPS is calculated by dividing the sum of total transactions in the interval, by the seconds in the interval. If this value is not provided by the API, we can assume that each block takes 15 seconds to be formed.
![image](https://user-images.githubusercontent.com/38396062/142337680-b0f592b6-9de6-48a0-a823-d096d0fb5b95.png)
API Endpoint:
We need an API to get this information.
Please view the attached issues (make sure you are using ZenHub extension)