Create Harmonia DAO Analytics Dashboard Components - Analytics Dashboard

[Bran18]

🏆 Issue Title: Create Harmonia DAO Analytics Dashboard Components

Difficulty: Medium to Hard
Estimated Time: 8–12 hours

---

Goal

Create the following UI components for the Harmonia DAO Analytics Dashboard:

1. Treasury Chart – Line chart showing treasury growth over time.
2. Voting Distribution – Pie chart showing the distribution of votes on the latest proposal.
3. Member Activity – Bar chart displaying active members and new members over the week.
4. Proposal Categories – Pie chart showing the distribution of proposals by category.

---

Context

The Harmonia DAO Analytics Dashboard will give an overview of the DAO’s performance across key areas, such as treasury growth, voting engagement, membership activity, and proposal trends. The goal is to create a clear and interactive dashboard that provides meaningful insights.

---

Components to Build

1. 📈 Treasury Chart

Create a responsive line chart that shows the growth of the DAO's treasury over time.

✅ Display XLM balance over the last 6 months ✅ Line should have a subtle gradient and smooth transitions ✅ Y-axis should adjust dynamically based on the data range

📌 Props:

• data: Array of { date: string, balance: number }
• title: string
• xLabel: string
• yLabel: string

💡 Styling:

• Use recharts for charting
• Include hover interactions and tooltips

🖥️ Example:
Use @/components/analytics/treasury-chart.tsx

---

2. 🗳️ Voting Distribution

Create a pie chart displaying the latest voting distribution.

✅ Show the percentage of votes "For," "Against," and "Abstain" ✅ Include dynamic legend ✅ Use distinct color codes for each category

📌 Props:

• data: Array of { label: string, value: number }
• title: string
• legend: boolean

💡 Styling:

• Use recharts for charting
• Include hover interactions and tooltips
• Include dynamic percentage text labels

🖥️ Example:
Use @/components/analytics/voting-distribution.tsx

---

3. 👥 Member Activity

Create a bar chart showing active members and new members over the last 7 days.

✅ Display active members and new members with different colors ✅ Ensure Y-axis is responsive to data range ✅ Add hover interactions to show the exact value

📌 Props:

• data: Array of { day: string, activeMembers: number, newMembers: number }
• title: string
• xLabel: string
• yLabel: string

💡 Styling:

• Use recharts for charting
• Include hover interactions and tooltips
• Use clsx and cva for consistent styling

🖥️ Example:
Use @/components/analytics/member-activity.tsx

---

4. 📊 Proposal Categories

Create a pie chart showing the percentage of proposals by category.

✅ Display categories like Treasury, Governance, Community, and Technical ✅ Ensure responsive design ✅ Use consistent color coding

📌 Props:

• data: Array of { category: string, percentage: number }
• title: string
• legend: boolean

💡 Styling:

• Use recharts for charting
• Include hover interactions and tooltips
• Use consistent color coding

🖥️ Example:
Use @/components/analytics/proposal-categories.tsx

---

Suggested File Structure

components/
├── analytics/
│   ├── TreasuryChart.tsx
│   ├── VotingDistribution.tsx
│   ├── MemberActivity.tsx
│   └── ProposalCategories.tsx
└── ui/
    ├── button.tsx
    └── card.tsx

---

Technical Requirements

✅ Use TypeScript
✅ Use recharts for charting
✅ Use Tailwind CSS + clsx + cva for styling
✅ Ensure responsive design (desktop and mobile)
✅ Follow existing component patterns and architecture
✅ Ensure dark/light mode compatibility
✅ Ensure accessibility (ARIA attributes)

---

Acceptance Criteria

• [ ] Treasury chart displays correct data and updates dynamically
• [ ] Voting distribution chart is interactive and correctly labeled
• [ ] Member activity chart is responsive and easy to interpret
• [ ] Proposal categories chart shows correct percentages
• [ ] Code is clean, modular, and well-documented

---

Helpful References

• recharts for charting
• clsx and cva for variants
• @shadcn/ui for reusable components

---

Rewards & Recognition

✅ Contributor will be added to the Harmonia Contributors Page
✅ High-quality contributions may receive bounties

---

How to Claim

1. Comment below if you’d like to claim this issue.
2. Fork the repo and create a feature branch (feature/analytics-dashboard).
3. Open a Pull Request referencing this issue.

---

💡 Tip: Focus on reusable components and clean, modular code! 😎

[ShamzX0]

Hey guys! I am a front-end dev with couple years of experience. I was working for web3 as well as SaaS web2 companies and I would be happy to get this one done for you.

PS: I have very good experience with recharts so this would be fun, but I am pretty sure that this would take more then 12h as this is pretty detailed task. Still more then happy to do it, let me know and I'll start working on it asap.

Thanks and have a good one!

[ShamzX0]

I am on the road now. I'll start tomorrow

[ShamzX0]

I’m sorry, but I won’t be able to deliver. I have too much on my plate right now. Please reassign this to another developer. Once again, I apologize. Thank you, and good luck!

[derianrddev]

Hi @Bran18! I'm a returning contributor and I'm interested in working on this issue.
I really like the challenge and I'm confident I can implement the required analytics components using Recharts and the existing architecture. Excited to contribute again! 🚀

[derianrddev]

@Bran18 Hello! Just letting you know I opened the PR for the Analytics Dashboard implementation — #9. Feel free to take a look whenever you have time. Thanks!