Add a chart of how many resources are distributed in the ecosystem

[Keith-CY]

Inspired by #424 and #492, a chart of how capacities are distributed in the ecosystem would be helpful for dapp users to find the most attractive applications built on CKB.

In contrast to the supply chart(https://explorer.nervos.org/charts/total-supply), the capacity-distribution chart reveals how many CKBs are occupied/invested into some specific applications. The amount of deposited capacities represents how valuable the application is.

Simply speaking, each dapp has its own capacity of referring cells(https://explorer.nervos.org/script/0x9bd7e06f3ecf4be0f2fcd2188b23f1b9fcc88e5d4b65a8637b17723bbda3cce8/type), which means how many capacities are in the app. The referring capacities can be ordered and visualized.

In addition to the capacity-distribution, the address account is another index of the activity of an app.

So my idea is to add such a chart

X-axis for capacity-distribution, Y-axis for address-distribution, size and color for other metrics.

[Danie0918]

Do we need to distinguish between types? Something like the following case.

[Keith-CY]

Do we need to distinguish between types? Something like the following case.

Great if possible, but it's hard to distinguish types because in UTXO model, a transaction can includes various types of actions. E.g., a transaction can achieve deposit, withdraw and send simultaneously.

[Sven-TBD]

Can we color these spots by their type and size them by their capacity-distribution?
Then, the X-axis could be used as transaction-distribution which means how many transactions take this kind of cell as input/output, and the Y-axis for address-distribution.

Once decide, I'll promote this issue.

[Keith-CY]

Can we color these spots by their type and size them by their capacity-distribution?

Then, the X-axis could be used as transaction-distribution which means how many transactions take this kind of cell as input/output, and the Y-axis for address-distribution.

Coloring the spots by their types is fine. But I prefer indexing capacity-distribution on the axis while revealing how active the dapp is in size/color because heatmap is more suitable for activity(in 24h or 1 month).

BTW, there was a metaphor that cells in CKB are the blocks of a zone, dapp are the building built on the block. The heatmap of traffic is quite vivid.

[Sven-TBD]

While talking about Dapps, we are actually referring to Scripts, is that right? @Keith-CY That is to say, the statistics of Dapps are based every Script which means @rabbitz Nan needs to provide an api revealing the capacity of every Script.

[rabbitz]

nervosnetwork/ckb-explorer#1612

[zmcNotafraid]

X: address count
Y: capacity amount
hover: contract name
circle size: tx count

---

PR:
nervosnetwork/ckb-explorer#1673
nervosnetwork/ckb-explorer#1680
Magickbase/ckb-explorer-frontend#266