[Integrate] As a user, I can see the chart on the Detail screen

[nkhanh44]

Why

• The user should be able to see the chart on the Detail screen.

Acceptance Criteria

• On the Detail screen, the following chart can be seen:

In light mode:

In dark mode:

For both the light and dark modes, we have:

• The line chart is a linear line with the color #00BDB0.
• The highest price text in that frame has the color #10DC78.

• The lowest price text in that frame has the color #F15950

• In a timeframe, the latest data (price) will be on the right, and the oldest data will be on the left.

On behavior:

• The chart will set fit and no zooming for the chart with any gestures.
• No animation is needed when the chart is displayed.

Note: How the detailed range time is filtered in days, months, and years from API document:

Data granularity is automatic (cannot be adjusted)
1 day from current time = 5 minute interval data
1 - 90 days from current time = hourly data
above 90 days from current time = daily data (00:00 UTC)

The response will look like the following:

{
  "prices": [
    [
      1669284289704,
      16595.246079387816
    ],
    [
      1669284585059,
      16602.076684659474
    ],
    [
      1669284921814,
      16606.11839794301
    ],
    [
      1669285188016,
      16606.20441243831
}

Design

https://www.figma.com/file/Iy9eg3ym29pkKGsD5X48O7/Crypto-App-(Community)?node-id=3%3A107&t=PLQA07bsooNZNzKn-0

Resources

https://github.com/danielgindi/Charts

• From the design and the lib above, LineChart (gradient fill) in Charts lib is the most identity to the design.