Merge pull request #33 from Devanshgoel-123/cohort-2

Enhanced tooltip to include avg engagement etc

Author: seetadev

src/components/dashboard/views/TimeSeriesView.tsx

@@ -11,54 +11,84 @@ import {
   Tooltip,
   Legend,
   ResponsiveContainer,
-} from 'recharts';
-import { Card } from '@/components/ui/card';
+} from "recharts";
 
 interface TimeSeriesViewProps {
   data: EnhancedTechPartnerData[];
 }
 
+
 interface CustomTooltipProps {
   active?: boolean;
   payload?: {
     name: string;
-    value: number;
+    value: number; 
+    payload:Record<string, number | string>;
   }[];
   label?: string;
 }
 
 const CustomTooltip = ({ active, payload, label }: CustomTooltipProps) => {
   if (!active || !payload?.length || !label) return null;
+  console.log("The payload is", payload);
 
-  const weekNumber = label.replace(/Week Week/, 'Week');
+  const weekNumber = label.replace(/Week Week/, "Week");
+  const insightsElements = payload[0];
 
   return (
-    <Card className="p-3 bg-white/95 shadow-lg border-0">
-      <div className="space-y-2">
-        <div className="font-medium">{weekNumber}</div>
-        <div className="grid gap-1 text-sm">
+    <div className="p-4 bg-white rounded-lg shadow-sm border border-gray-200">
+    <div className="text-base font-medium text-gray-800 pb-3 border-b border-gray-100">
+    {weekNumber}
+    </div>
+    
+    {/* Key Metrics Component */}
+    <div className="py-4 text-sm text-gray-700 space-y-1">
+      <div className="flex justify-between items-center">
+        <span className="text-gray-600">Avg. Engagement</span>
+        <span className="font-medium text-gray-900">
+          {insightsElements?.payload != null
+            ? Number(insightsElements.payload.avgEngagement)
+            : "N/A"}
+        </span>
+      </div>
+      <div className="flex justify-between items-center">
+        <span className="text-gray-600">Issues per capita</span>
+        <span className="font-medium text-gray-900">
+          {insightsElements?.payload != null
+            ? Number(insightsElements.payload.issuesPerCapita)
+            : "N/A"}
+        </span>
+      </div>
+    </div>
+    
+    {/* Partners & Issues List */}
+    <div className="pt-3">
+        <div className="text-xs uppercase font-medium text-gray-500 mb-2">Partners & Issues</div>
+        <div className="divide-y divide-gray-100">
           {payload.map((entry, index) => (
-            <div key={index} className="flex items-center gap-2">
-              <div
-                className="w-3 h-3 rounded-full"
-                style={{ backgroundColor: entry.name }}
-              />
-              <span>
-                {entry.name}: {entry.value}{' '}
-                {entry.value === 1 ? 'issue' : 'issues'}
-              </span>
+            <div key={index} className="flex items-center py-2 text-sm w-full">
+              <div className="flex items-center gap-2 flex-1">
+                <span
+                  className="inline-block w-3 h-3 rounded-full flex-shrink-0"
+                  style={{ backgroundColor: entry.name }}
+                />
+                <span className="text-gray-800">{entry.name}</span>
+              </div>
+              <div className="ml-6 text-gray-700 font-medium">
+                {entry.value} {entry.value === 1 ? "issue" : "issues"}
+              </div>
             </div>
           ))}
         </div>
       </div>
-    </Card>
+  </div>
   );
 };
 
+
 export function TimeSeriesView({ data }: TimeSeriesViewProps) {
-  const chartData = useMemo(() => {
+  const chartData = React.useMemo(() => {
     if (!data?.length) return [];
-
     // Get all unique weeks and format them
     const allWeeks = new Set<string>();
     data.forEach((partner) => {
@@ -69,7 +99,9 @@ export function TimeSeriesView({ data }: TimeSeriesViewProps) {
           if (weekNum) allWeeks.add(`Week ${weekNum}`);
         }
       });
-    });
+    });  
+
+   
 
     // Sort weeks by number
     const sortedWeeks = Array.from(allWeeks).sort((a, b) => {
@@ -78,8 +110,12 @@ export function TimeSeriesView({ data }: TimeSeriesViewProps) {
       return weekA - weekB;
     });
 
+  
     // Create data points for each week
     return sortedWeeks.map((weekLabel) => {
+      let totalEngagement = 0;
+      let totalContributors = 0;
+      let totalIssues = 0;
       const point: Record<string, string | number> = { week: weekLabel };
 
       // Process each partner's data for this week
@@ -90,11 +126,20 @@ export function TimeSeriesView({ data }: TimeSeriesViewProps) {
           const currentWeekNum = weekLabel.match(/Week (\d+)/)?.[1];
           return tsWeekNum === currentWeekNum;
         });
-
+        
+        const contributors = weekData?.contributors.length || 0;
+        const engagement = weekData?.engagementLevel || 0;
         // Add the issue count for this partner
         point[partner.partner] = weekData?.issueCount || 0;
-      });
 
+        if (contributors > 0) {
+          totalEngagement = engagement;
+          totalContributors += contributors;
+          totalIssues += weekData?.issueCount || 0;
+        }
+      });
+      point["avgEngagement"] = (totalEngagement/data.length).toFixed(2) || 0;
+      point["issuesPerCapita"] = totalContributors > 0 ? (totalIssues / totalContributors).toFixed(2) : 0;
       return point;
     });
   }, [data]);