APY chart

[NikolaiYurchenko]

https://github.com/Fujicracy/fuji-v2/issues/443 Preparation for a Analytics Tab feature;

• [x] initial chart implementation, nivo was choosen so far because of great customisation without crutches
• [x] create new tab navigation in Overview block
• [x] initial markup with mocks
• [x] create custom component for tab switch
• [x] create custom component for info rows
• [x] loading state
• [x] comment section to not show mocked data after review
• [x] empty state
• [x] sdk calls
• [x] integrate sdk and use real data instead of mocks

[github-actions[bot]]

Please test this PR on: https://v2-staging-441-dot-fuji-306908.ey.r.appspot.com

[ferostabio]

Hi @NikolaiYurchenko! Can you tell me what is this issue about?

[NikolaiYurchenko]

@ferostar Hi, it is a draft for future PR for Analytics tab in Overview

[ferostabio]

Great work so far @NikolaiYurchenko !

I honestly didn't know about nivo, looks pretty cool.

Two quick things I noticed.

• The analytics tab's left padding is slightly off. You can see that the end it's exactly the same as in the overview tab, but not the start/left.
• Rather silly, but can we change tooltip to not expect any as param?

[ferostabio]

@NikolaiYurchenko love how it's looking!

A couple of small things:

• [x] At the moment we have the APYChart just in borrowing analytics, but I’m sure we’ll use it in other places, so move it to ../components/Shared/Chart/ApyChart.tsx
• [x] The component might grow with time, let’s live it as small as possible, so both rename Tooltip (since we have a lot of those in the Analytics folder as well so that way it will be more clear) and move it into its own component in the same folder (also, if possible change its implementation not to have any as param)
• [x] I noticed an inconsistency: for the analytics tab, the design has "1D / 1W / 1M / 1Y" but the modal in my positions has "1D / 7D / 30D / 365D". Move the code to a reusable component and use it in both places.

[ferostabio]

@NikolaiYurchenko I left a similar comment in the UI issues PR. We need to standardize tooltips. Sometimes we change pointer, sometimes we don't. I don't think we should change it unless the user can tap -so please change all the tooltips not to change the pointer.

[NikolaiYurchenko]

for some reason cant commit merge rn, getting sol files errors ◼ yarn format:fix /Users/chau/Projects/fuji-v2/packages/protocol/script/02_SignBorrow.s.sol

[ferostabio]

Three pending tasks were done. Should now be a matter of tweaking, fixing and polishing.

[brozorec]

Pushed some changes to remove the filtering the null values and here's some UI feedback:

1. Polygon, WETH/DAI

• The upper values here occupy the topmost; we can put some margin above the maximum value.
• Similar applies to the bottom where the x-axis is not visible.
• Add a "%" to the y-axis.
• When we hover the right-most data point, the tooltip gets hidden.

2. Arbitrum, WETH/USDC

• When on 365D, the right-most values are from 2022 and not 2023.

3. Optimism, WETH/USDC

• There could be sometimes steep peaks, can we add some scaling so that the curve looks smoother?