Multiuser support (#60)

components/HabitStreak.tsx

@@ -5,7 +5,7 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
 import { d2s, getNow, t2d, getCompletedHabitsForDate } from '@/lib/utils'
 import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts'
 import { useAtom } from 'jotai'
-import { settingsAtom } from '@/lib/atoms'
+import { settingsAtom, hasTasksAtom } from '@/lib/atoms'
 
 interface HabitStreakProps {
   habits: Habit[]
@@ -13,6 +13,7 @@ interface HabitStreakProps {
 
 export default function HabitStreak({ habits }: HabitStreakProps) {
   const [settings] = useAtom(settingsAtom)
+  const [hasTasks] = useAtom(hasTasksAtom)
   // Get the last 7 days of data
   const dates = Array.from({ length: 7 }, (_, i) => {
     const d = getNow({ timezone: settings.system.timezone });
@@ -20,21 +21,27 @@ export default function HabitStreak({ habits }: HabitStreakProps) {
   }).reverse()
 
   const completions = dates.map(date => {
-    const completedCount = getCompletedHabitsForDate({
-      habits,
+    const completedHabits = getCompletedHabitsForDate({
+      habits: habits.filter(h => !h.isTask),
       date: t2d({ timestamp: date, timezone: settings.system.timezone }),
       timezone: settings.system.timezone
-    }).length;
+    });
+    const completedTasks = getCompletedHabitsForDate({
+      habits: habits.filter(h => h.isTask),
+      date: t2d({ timestamp: date, timezone: settings.system.timezone }),
+      timezone: settings.system.timezone
+    });
     return {
       date,
-      completed: completedCount
+      habits: completedHabits.length,
+      tasks: completedTasks.length
     };
   });
 
   return (
     <Card>
       <CardHeader>
-        <CardTitle>Daily Habit Completion Streak</CardTitle>
+        <CardTitle>Daily Completion Streak</CardTitle>
       </CardHeader>
       <CardContent>
         <div className="w-full aspect-[2/1]">
@@ -51,14 +58,25 @@ export default function HabitStreak({ habits }: HabitStreakProps) {
               <CartesianGrid strokeDasharray="3 3" />
               <XAxis dataKey="date" />
               <YAxis />
-              <Tooltip formatter={(value) => [`${value} habits`, 'Completed']} />
+              <Tooltip formatter={(value, name) => [`${value} ${name}`, 'Completed']} />
               <Line
                 type="monotone"
-                dataKey="completed"
+                name="habits"
+                dataKey="habits"
                 stroke="#14b8a6"
                 strokeWidth={2}
                 dot={false}
               />
+              {hasTasks && (
+                <Line
+                  type="monotone"
+                  name="tasks"
+                  dataKey="tasks"
+                  stroke="#f59e0b"
+                  strokeWidth={2}
+                  dot={false}
+                />
+              )}
             </LineChart>
           </ResponsiveContainer>
         </div>