Skip to content

feat: add Amount Analysis chart and dashboard layout#27

Merged
0xDeon merged 6 commits intoSpherre-Labs:mainfrom
daaef:main
Mar 25, 2025
Merged

feat: add Amount Analysis chart and dashboard layout#27
0xDeon merged 6 commits intoSpherre-Labs:mainfrom
daaef:main

Conversation

@daaef
Copy link
Contributor

@daaef daaef commented Mar 23, 2025

Description

Related Issue

Fixes #

Type of Change

  • Bug fix
  • New feature
  • Refactor
  • Documentation update
  • Other (please describe)

How Has This Been Tested?

  • Unit tests

  • Integration tests

  • Manual tests :-

    • Tested different time ranges (1D, 7D, 1M, 3M, 1Y, ALL)
    • Verified year selection functionality
    • Confirmed chart responsiveness on different screen sizes
    • Validated tooltip information display
  • Other (please describe)

Checklist:

  • I have read the contributing guidelines.
  • I have updated the documentation (if applicable).
  • My changes do not break existing functionality.
  • I have added tests that cover my changes (if applicable).
  • All new and existing tests pass.
  • I have included screenshots or GIFs to demonstrate the changes (if applicable).

Screenshots (if applicable)

https://www.loom.com/share/0cd4dd56b18f46c59db99d61e0698610?sid=cb63dfb4-4885-41ef-bcee-01d523020517
image
image

Additional Notes

Implementation Details

Created a new AmountAnalysisChart.tsx component with:

Interactive time range selection (1D, 7D, 1M, 3M, 1Y, ALL)
Year filter dropdown (2021-2025)
Dynamic data generation and filtering
Responsive chart with tooltips showing detailed information
Integrated the chart into the dashboard layout in page.tsx

Used Chart.js with React-ChartJS-2 for rendering the line chart

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The chart looks too compacted, please add a little bit of spacing or height to it

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also please increase the width of the div containing the date toggler, I think it would look nicer if it a bit wider
Also work on the date dropdown i want the active date to be purple like our primary color

image

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This lgtm

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great work

@0xDeon 0xDeon self-requested a review March 25, 2025 17:42
@0xDeon
Copy link
Contributor

0xDeon commented Mar 25, 2025

@daaef I don't see any difference here

@daaef
Copy link
Contributor Author

daaef commented Mar 25, 2025

Hi. I was bringing in changes from what you already have. I'll change the pr to draft till done

@daaef daaef marked this pull request as draft March 25, 2025 18:04
@daaef daaef marked this pull request as ready for review March 25, 2025 20:30
@daaef
Copy link
Contributor Author

daaef commented Mar 25, 2025

https://www.loom.com/share/e4804113a6bc48e4a9a16377ee61b328?sid=cc4e15af-805e-4e35-bc50-7c6d24aabc36

Update done.

  • Updated layout
  • Updated members after pull
  • tested build for issues and fixed eslint issues

@0xDeon 0xDeon merged commit e9dcb50 into Spherre-Labs:main Mar 25, 2025
1 of 2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants