diff --git a/frontend/src/components/HabitInsights.jsx b/frontend/src/components/HabitInsights.jsx new file mode 100644 index 0000000..93f314c --- /dev/null +++ b/frontend/src/components/HabitInsights.jsx @@ -0,0 +1,122 @@ +import React from 'react'; +import { TrendingUp, Calendar, Target, Award } from 'lucide-react'; + +const HabitInsights = ({ habits }) => { + // Calculate insights + const calculateInsights = () => { + if (!habits || habits.length === 0) { + return { + totalHabits: 0, + activeHabits: 0, + bestStreak: 0, + averageCompletion: 0, + mostConsistent: null + }; + } + + const totalHabits = habits.length; + const activeHabits = habits.filter(h => h.currentStreak > 0).length; + const bestStreak = Math.max(...habits.map(h => h.longestStreak || 0)); + + // Calculate average completion rate + const totalCompletions = habits.reduce((sum, h) => sum + (h.completionRate || 0), 0); + const averageCompletion = totalHabits > 0 ? (totalCompletions / totalHabits).toFixed(1) : 0; + + // Find most consistent habit + const mostConsistent = habits.reduce((best, current) => { + if (!best) return current; + return (current.completionRate || 0) > (best.completionRate || 0) ? current : best; + }, null); + + return { + totalHabits, + activeHabits, + bestStreak, + averageCompletion, + mostConsistent + }; + }; + + const insights = calculateInsights(); + + const InsightCard = ({ icon: Icon, label, value, color }) => ( +
+
+
+ +
+
+

{label}

+

{value}

+
+
+
+ ); + + return ( +
+
+

📊 Habit Insights

+

Your habit tracking performance at a glance

+
+ +
+ + + + +
+ + {insights.mostConsistent && ( +
+
+ +

Most Consistent Habit

+
+
+
+

{insights.mostConsistent.name}

+

+ {insights.mostConsistent.completionRate}% completion rate +

+
+
+

Current Streak

+

+ {insights.mostConsistent.currentStreak || 0} days +

+
+
+
+ )} + + {insights.totalHabits === 0 && ( +
+

No habits tracked yet. Start adding habits to see insights!

+
+ )} +
+ ); +}; + +export default HabitInsights; \ No newline at end of file diff --git a/frontend/src/components/README-HabitInsights.md b/frontend/src/components/README-HabitInsights.md new file mode 100644 index 0000000..a7b72fa --- /dev/null +++ b/frontend/src/components/README-HabitInsights.md @@ -0,0 +1,152 @@ +# HabitInsights Component + +A React component that displays analytical insights about user habits in HabitFlow. + +## 📋 Description + +The `HabitInsights` component provides a visual dashboard showing key metrics and statistics about a user's habit tracking performance. It helps users understand their progress at a glance with beautiful, color-coded cards. + +## ✨ Features + +- 📊 **Total Habits**: Count of all tracked habits +- 🔥 **Active Streaks**: Number of habits with current streaks +- 🏆 **Best Streak**: Longest streak achieved across all habits +- 📈 **Average Completion**: Overall completion rate percentage +- ⭐ **Most Consistent Habit**: Highlights the habit with the best completion rate +- 🎨 **Responsive Design**: Works on mobile, tablet, and desktop +- 🌙 **Dark Theme**: Matches HabitFlow's aesthetic with Tailwind CSS +- 🎯 **Real-time Updates**: Automatically reflects changes in habit data + +## 🚀 Usage + +### Basic Implementation + +```jsx +import HabitInsights from './components/HabitInsights'; + +function App() { + const [habits, setHabits] = useState([]); + + return ( +
+ +
+ ); +} +``` + +### Expected Data Structure + +```javascript +const habits = [ + { + id: 1, + name: "Morning Exercise", + currentStreak: 7, + longestStreak: 15, + completionRate: 85.5 + }, + { + id: 2, + name: "Read 30 mins", + currentStreak: 3, + longestStreak: 10, + completionRate: 72.3 + } +]; +``` + +## 🎨 UI Components + +### Insight Cards +Four primary metric cards displaying: +- **Blue**: Total Habits +- **Green**: Active Streaks +- **Purple**: Best Streak +- **Orange**: Average Completion + +### Most Consistent Habit Card +A larger card highlighting the habit with the highest completion rate, showing: +- Habit name +- Completion rate percentage +- Current streak + +### Empty State +When no habits are tracked, displays a friendly message encouraging users to start tracking. + +## 🛠️ Technical Details + +### Dependencies +- React +- Tailwind CSS (for styling) +- Lucide React (for icons) + +### Props + +| Prop | Type | Required | Description | +|------|------|----------|-------------| +| `habits` | Array | Yes | Array of habit objects with stats | + +### Habit Object Properties +- `name` (string): Habit name +- `currentStreak` (number): Current consecutive days +- `longestStreak` (number): Best streak achieved +- `completionRate` (number): Percentage (0-100) + +## 📦 Installation + +1. Copy `HabitInsights.jsx` to your `frontend/src/components/` directory + +2. Import in your main component: +```jsx +import HabitInsights from './components/HabitInsights'; +``` + +3. Pass habit data as props: +```jsx + +``` + +## 🎯 Use Cases + +- Dashboard overview page +- Analytics section +- Progress tracking page +- User profile insights +- Motivation through visual feedback + +## 🖼️ Visual Design + +The component uses a modern, card-based layout with: +- Rounded corners and subtle borders +- Hover effects for interactivity +- Color-coded icons for quick recognition +- Responsive grid layout (1 column on mobile, 4 on desktop) +- Consistent spacing and typography + +## 🔄 Future Enhancements + +Potential additions: +- Weekly/monthly trend graphs +- Habit category breakdown +- Achievement badges +- Export statistics feature +- Comparison with previous periods + +## 👨‍💻 Author + +**Ashvin** +- GitHub: [@ashvin2005](https://github.com/ashvin2005) +- LinkedIn: [ashvin-tiwari](https://linkedin.com/in/ashvin-tiwari) + +## 🎃 Hacktoberfest 2025 + +Created as part of Hacktoberfest 2025 contributions to HabitFlow. + +## 📄 License + +MIT License - Same as HabitFlow project + +--- + +Made with ❤️ for the HabitFlow community \ No newline at end of file