Add 2 charts to home screen

[marc-aurele-besner]

Add 2 charts to home screen

• Using @nivo/line create a chart section (same width proportion as last blocks section) that show the progression of accumulated on chain activity in size (aka the archived history size divided by 2 to account for erasure encoding) (ideally per hour, day, and month)

• Using @nivo/bar create a chart section (same width proportion as last extrinsic section) that show the specific increase of on-chain activity (current block history size - 1 hour ago history size) divided by 2 to account for erasure encoding) (ideally per hour, day, and month)

This task is specific to the frontend, if someone else decides to pick up the task and don't want to deal with complex query, I don't mind taking care of the query part (then just use static or random mock data) as far as it's fitting theme wise and responsive.

[iamnamananand996]

Hi @marc-aurele-besner, I have a draft version for the charts.

I need your help to get some more details about the chart.

• How query response looks likes, it will help to create a mockData response.
• What is (ideally per hour, day, and month), Is this some kind of filter we need to add on chart, like dropdown, which render the chart according to selected option from per hour / day / month

[marc-aurele-besner]

Hi @marc-aurele-besner, I have a draft version for the charts.

I need your help to get some more details about the chart.

• How query response looks likes, it will help to create a mockData response.
• What is (ideally per hour, day, and month), Is this some kind of filter we need to add on chart, like dropdown, which render the chart according to selected option from per hour / day / month

I was planning to create a stats schema in our db with hourly, weekly and monthly stats tables, and a schedule task in the background that will generate the row. The tables will basically have cumulatedHistorySize, deltaHistorySize, startDate, endData, updatedAt (cumulated correspond to the chart on the left, and so the numbers will always be growing), (delta will be the chart on the right)

For the time frame selector, I had in mind something like a set of button like this, but I'm open to suggestion

For the bar chart, I'll suggest not having the value directly on the graph but rather as tooltip on hover

[iamnamananand996]

Hi @marc-aurele-besner, thanks for explaining things in detail, really appreciate it, I will come back with these changes, meanwhile if you want, we can create a branch named feat-home-screen-charts, to which I will create a PR for my frontend changes, and for query calls, you can takeover from their in the same branch.

Soon, I will add some more information for the data format which charts will take, which will help you create the API response.

[iamnamananand996]

Hi @marc-aurele-besner, I have a draft PR with the implementation.
#1103

• for mock data, we can refer this this function, used in both charts,
  https://github.com/autonomys/astral/blob/1158c35d0ced3ef8e151016fea04a3af94d55985/explorer/src/mocks/charts-mock-data.ts

I want to make these 2 charts as common component, so we can use it further, on other side of application if required, once done with, will open it for review.

Meanwhile if you have any suggestion to make for a draft PR, please do, it will help to improve it.

[marc-aurele-besner]

The frontend part is done, thank you @iamnamananand996