CentrifugeApp: Portfolio page Overview graph

[sophialittlejohn]

Description

This pull request portfolio overview graph on the /portfolio page.

Closes #1593

Approvals

• Dev
• Designer
• Product

Screenshots

Impact

Portfolio page

[annamehr]

@jpangelle Looks great let's merge it and I create a follow up ticket for the spacing.

[TimHoub]

Some minor UI improvements that are a not in line with the design yet.

• The 'USD' on the left side looks a bit weird and is not in the designs.
• The active state on the filter is a little bit different. -> the non active items should have a font weight that is lighter than the active one.
• The filter alignment should be on the same width as the right side of the graph, now it is bit too much to the right.

Apart from that, looks great!

[jpangelle]

Some minor UI improvements that are a not in line with the design yet.

• The 'USD' on the left side looks a bit weird and is not in the designs.

• The active state on the filter is a little bit different. -> the non active items should have a font weight that is lighter than the active one.

• The filter alignment should be on the same width as the right side of the graph, now it is bit too much to the right.

Apart from that, looks great!

Regarding the USD bit, this was a suggestion from Dennis in order to signify what the y-axis represents. Is there a position we can place it that would look cleaner?

[annamehr]

@jpangelle that was Tim's suggestion for a cleaner look

[jpangelle]

@TimHoub @annamehr Your comments have been addressed.

[onnovisser]

this feels kinda weird to have in here

[sophialittlejohn]

I think the table sorting requires the sortable value to be a number, maybe you could adapt this so that the sorter checks first if the value is a Dec/BN and sort accordingly? Then you would probs be able to remove the line above it as well

[jpangelle]

Done!

[sophialittlejohn]

instead of calculating the range after fetching the data, would it be possible to use graphQL filters to only fetch only the range you actually need? I think you could edit the getDailyTrancheStates and in the filters to do something like

query($trancheId: String!) {
        trancheSnapshots(
          orderBy: BLOCK_NUMBER_ASC,
          filter: {
            trancheId: { includes: $trancheId },
            timestamp: { greaterThanOrEqualTo: <date to fetch from> }
          }) {
          nodes {
            timestamp
            trancheId
            ...
          }
        }
      }

[jpangelle]

Hm I think so but if the user toggles the selection to another range, it require another call to the subquery to get the data rather than having all of the data already. Might feel sluggish.

[jpangelle]

Dec-05-2023.21-13-10.mp4

Yeah, unfortunately it is a bit janky when implementing it this way.

[github-actions]

PR deployed in Google Cloud
URL: https://app-pr1670.k-f.dev
Commit #: f0349e6
To access the functions directly check the corresponding deploy Action