Feature: New charts library. #738
Conversation
|
This is really cool. Initial thoughts:
|
|
Sorry maybe I'm missing something but how do you toggle on/off the colors tiers on the stacked chart? |
|
Also missing the button to invert the chart colors. And you should invert the order of the overlay legend to have the order of colors so they always match how they are stacked in the graph. |
|
Might be better without the crosshairs and just focus on polishing the overlay legend |
8eb3da6 to
623fa67
Compare
TASKS
Preview |
|
Hi Miguel, I am a heavy user of mempool charts and I'm really excited for the chart makeover! 🤓 Especially, I frequently post screenshots of mempool charts to comment on the current mempool state. Given that the chart is almost exclusively interesting in the context of the time it was recorded at, I'd prefer if even the 2h/24h chart had the date. I noticed that the order of the layers in the chart (high feerate at the top) is reverse of the order of the legend (low feerate at the top). It would feel more natural to me if they were both in the same order, i.e. if the legend were also to have the lowest feerate at the bottom. I often want to know both the transaction weight in a specific band and the total transaction weight at and above this feerate. The former is for example useful to observe which bands are growing or where big batches of consolidation transactions get added to the mempool. The latter is more useful to determine how long it takes until transactions at specific feerates may be included in blocks. I surmise that a 3-column legend would be rather wide, but would it be possible to have both the specific band's volume and the sum of all transactions down to that feerate per band? If that were deemed too aesthetically unpleasing, would it perhaps be possible to show the two values for the band that the cursor is hovering over in an area of the chart that doesn't show data? To minimize the size of the legend, perhaps the rows for which there are no transactions with that feerate or higher could be not rendered. I.e. if the highest band with transactions were 30-40, 40-50 would show zero/zero and the ones above would not show up in the legend.
|
623fa67 to
65c5147
Compare
|
Hey @xekyo nice to meet you! ❤️ I've added all of your requests to my task list! Tasks
Preview |
|
Oh, I love the progress bar at the bottom. Just to clarify, the total and 100% of that bar refer to the sum of all transactions at that point in time in the chart, right? When you demonstrated the pass from top to bottom on the chart, I noticed that the number above the total was diminishing. Contrary to the intuition, I think that this number should be the sum from the top feerate rather: miners include transactions with the highest feerate first. So, if you want to figure out how many transactions are going to have priority over yours, you would want to know the sum of transactions with a higher feerate. On the other hand, I don't think the sum of transactions from the lowest feerate to this feerate is interesting. At most, I'd perhaps investigate the size of the lowest band to determine whether transactions were displaced from the mempool when the mempool has reached its limit, but even then, I'd only need the size of the lowest band but not the sum from the lowest feerate. The % in the third column is beautiful, but it seems to be replicating the information already shown in the chart itself and the second column. I find it hard to discern all the small percentages shown there right now. Perhaps using it to show the percentage of the total transaction weight from the highest feerate to this band would be more informative. Thanks for your quick response! |
|
@xekyo you can demo the latest changes on mempool.ninja |
|
Ah sweet. I was thinking about asking how I could build it locally, but it seemed like something that would take a lot of time. I'll play with that then! |
|
First question, is the mempool data on mempool.ninja supposed to reflect mainnet? |
it's a bug which miguel is already working on 😅 |
0817429 to
2524284
Compare
|
@xekyo mempool.ninja has been updated with latest fixes |
|
|
And lastly, need a y-axis slider to hide fee rate tiers, as currently works on the old chart library |
|
Oh, and some users want to invert the order of the fee rate tiers, we have this feature on the current site |
|
|
Just a quick follow-up to substantiate the motivation for my proposal for the third column: one of the main insights users wish to glean from a mempool chart is "How much transaction data has a higher priority than mine?". The easiest way to make that available is by summing all transactions' vsizes above a given feerate as I propose for the third column. |
|
@xekyo updated mempool.ninja with a WIP commit just now |
0ec5aa0 to
08de814
Compare
Refactor component mempool-graph; Refactor component fee-distribution-graph; Add incoming-transactions-graph to dashboard; Add incoming-transactions-graph to statistics; Add incoming-transactions-graph to television; Add mempool-graph to dashboard; Add mempool-graph to statistics; Add mempool-graph to television; Remove chartist.component;
Add zoom tools. Add different theme for charts `big` and `small` (default). Fix date format on mouseover. Fix animations on graphs page. Fix overflow tv page. Remove `crosshair` on mouseover, changed to `line`. Fix custom tooltip styles. Remove inverted button (will add in a future PR). Remove fee range labels (will add in a future PR). Fix e2e testing.
Add symbol to tx chart tooltip .
Fix default data to title tooltip MM/dd HH:mm. Add symbol to tx chart tooltip . Add accumulative total for tooltip information. Add 3th column to tooltip with a progress bar. Add and max span zoom span. Add feeRate limit input to mempool graph component. Add showZoom option to mempool graph component. Remove start animation to match the layout for future SSR. Remove mouse wheel zoom from small template. Fix small template style.
Fix data structure of mempool graph. Change tooltip total position (top). Change tooltip visual of partial porcentage.
Fix yAxis value. Fix yAxis value. Make disks smaller and transparent. Change opacity on mouseover stack bars. Add 4th column "sum of vsize" to tooltips table. Add toggle show/hide tier fees. Make progress active bar inline with text value. Add a break line to the timestamp text. Add colored progress bar with number.
Fix no shadowed variable tslint warning.
Fix tv page css.
cc86fee to
8b8b06e
Compare
Fix #94 and #600 .
Tasks
incoming-transactions-graph;mempool-graph;fee-distribution-graph;incoming-transactions-graphtodashboard;incoming-transactions-graphtostatistics;incoming-transactions-graphtotelevision;mempool-graphtodashboard;mempool-graphtostatistics;mempool-graphtotelevision;chartist.component;Preview