Stakgraph test

[tomsmith8]

@stakgraph can you add a monthly earnings bar chart to the /leaderboard page? Below the Top3 section. Please use the paid_date column on the Bounty struct.

CodespaceURL

[stakgraph]

🤖 Processing your request... (Stakwork run: https://jobs.stakwork.com/admin/projects/115610999)

I've received your message and started working on it. You'll receive a detailed response shortly.

[stakgraph]

Summary

Stakgraph will add a monthly earnings bar chart to the /leaderboard page, positioned below the Top3 section. This chart will visualize aggregated monthly earnings using the paid_date field from the Bounty struct, providing users with a clear view of earnings trends over time.

---

Planned Changes

• Implement a bar chart component to display monthly earnings.
• Aggregate earnings data by month using the paid_date field from the Bounty struct.
• Integrate the chart into the /leaderboard page, directly below the Top3 section.
• Ensure data consistency between backend (Go) and frontend (TypeScript) representations of the Bounty model.

---

Files/Areas Affected

• /leaderboard page (frontend)
• Bar chart component (new or existing)
• Data aggregation logic (backend API and/or frontend data processing)
• Bounty data model usage (both Go and TypeScript)

---

Next Steps:
Begin implementation of the bar chart and data aggregation logic, followed by UI integration and testing.

[stakgraph]

Summary

This PR adds a monthly earnings bar chart to the /leaderboard page, positioned below the Top3 section. The chart visualizes total bounty earnings per month, aggregated using the paid_date field from the Bounty struct. Backend, API, and frontend changes were made to support this feature.

---

Changes Made

Backend

• Database Layer

  • Added a new MonthlyEarnings struct to represent monthly earnings data (month, total_earned, bounty_count).
  • Implemented GetMonthlyEarnings() in the database layer to aggregate and return the last 12 months of paid bounties, grouped by month using the paid_date column.

• Handler Layer

  • Added GetMonthlyEarnings HTTP handler to serve monthly earnings data as JSON.

• Routing

  • Registered a new endpoint: GET /bounty/monthly-earnings for fetching monthly earnings data.

Frontend

• Types & Store

  • Defined a MonthlyEarnings TypeScript type.
  • Extended the leaderboard MobX store to include:
    • monthlyEarnings state.
    • isLoadingMonthly state.
    • fetchMonthlyEarnings() method to retrieve data from the backend.

• UI Components

  • Created a new MonthlyEarningsChart React component:
    • Fetches and displays monthly earnings as a bar chart.
    • Handles loading and empty states.
    • Formats months and displays total earnings and bounty count per bar.

• Leaderboard Page Integration

  • Imported and rendered the MonthlyEarningsChart component directly below the Top3 section on the /leaderboard page.

---

Architecture Improvements

• Separation of Concerns: Data aggregation for monthly earnings is handled server-side, ensuring efficient data transfer and reducing frontend computation.
• Extensible API: The new /bounty/monthly-earnings endpoint can be reused for analytics or reporting features in the future.
• Componentization: The chart is encapsulated in its own component, promoting reusability and maintainability.
• Type Safety: Both backend (Go structs) and frontend (TypeScript types) are updated for consistent data handling.

---

Overall Impact:
This update introduces a clear, visually engaging summary of monthly bounty earnings to the leaderboard, improving transparency and user engagement with historical earnings data. No breaking changes were introduced.

[stakgraph]

The code is now available—please review it directly in the codespace.

Code

[stakgraph]

The changes are ready for review.

[stakgraph]

🤖 Processing your request... Stakwork run

I've received your message and started working on it. You'll receive a detailed response shortly.

[stakgraph]

Summary

Stakgraph will add a monthly earnings bar chart to the /leaderboard page, positioned below the Top3 section. This chart will visualize aggregated earnings per month, using the paid_date field from the Bounty struct as the data source. The goal is to enhance the leaderboard with clear, time-based earnings insights.

---

Planned Changes

• Implement a bar chart component to display monthly earnings.
• Aggregate earnings data by month using the paid_date field from the Bounty struct.
• Integrate the chart into the /leaderboard page, directly below the Top3 section.
• Ensure seamless visual and functional integration with the existing page layout.

---

Files/Areas Affected

• /leaderboard page (likely index.tsx or equivalent)
• Bounty data aggregation logic (backend and/or frontend)
• Chart component (new or existing, frontend)
• Styling/CSS for layout adjustments as needed

---

Next Steps:
Design and implement the chart, update data aggregation, and integrate into the leaderboard UI.