Feat : add analytics dashboard with charts , insights and network graph

src/components/Cards/statCard.tsx

@@ -0,0 +1,13 @@
+interface Props {
+  title: string;
+  value: string | number;
+}
+
+export default function StatCard({ title, value }: Props) {
+  return (
+    <div className="bg-[#1F2937] p-4 rounded-xl  h-32">
+      <p className="text-gray-400 text-sm">{title}</p>
+      <h2 className="text-2xl font-bold text-green-400">{value}</h2>
+    </div>
+  );
+}

src/components/Charts/ActivityChart.tsx

@@ -0,0 +1,121 @@
+import { useState, useMemo } from "react";
+import {
+  LineChart, Line,
+  BarChart, Bar,
+  PieChart, Pie, Cell, LabelList,
+  XAxis, YAxis, Tooltip, Legend
+} from "recharts";
+
+const tooltipFormatter = (
+  value?: number | string,
+  name?: string
+): [string, string] => {
+  return [
+    value !== undefined ? value.toString() : "-",
+    name !== undefined ? name : "-"
+  ];
+};
+
+export default function ActivityChart({ repos }: any) {
+  const [chartType, setChartType] = useState("line");
+  const [filter, setFilter] = useState("top"); 
+
+  const COLORS = ["#22c55e", "#3b82f6", "#f59e0b", "#ef4444", "#8b5cf6", "#ec4899"];
+
+  const data = useMemo(() => {
+    let processed = [...repos];
+
+    if (filter === "top") {
+      processed.sort((a, b) => b.stargazers_count - a.stargazers_count);
+    }
+    if (filter === "inactive") {
+      const now = new Date().getTime();
+      processed = processed.filter(r => 
+        now - new Date(r.updated_at).getTime() > 90 * 24 * 60 * 60 * 1000
+      );
+    }
+
+    return processed.slice(0, 8).map((r: any) => ({
+      name: r.name,
+      stars: r.stargazers_count,
+      forks: r.forks_count
+    }));
+  }, [repos, filter]);
+
+  return (
+    <div className="bg-[#1F2937] p-4 rounded mt-6 text-white" >
+
+      <div className="flex gap-3 mb-4">
+        {["line", "bar", "pie"].map(type => (
+          <button
+            key={type}
+            onClick={() => setChartType(type)}
+            className={`px-3 py-1 rounded ${chartType === type ? "bg-green-500" : "bg-gray-700"}`}
+          >
+            {type.charAt(0).toUpperCase() + type.slice(1)}
+          </button>
+        ))}
+      </div>
+
+      <div className="flex gap-3 mb-4">
+        <button
+          onClick={() => setFilter("top")}
+          className={`px-3 py-1 rounded ${filter === "top" ? "bg-blue-500" : "bg-gray-700"}`}
+        >
+          Top Repos
+        </button>
+        <button
+          onClick={() => setFilter("inactive")}
+          className={`px-3 py-1 rounded ${filter === "inactive" ? "bg-blue-500" : "bg-gray-700"}`}
+        >
+          Inactive
+        </button>
+      </div>
+
+      {chartType === "line" && (
+        <LineChart width={600} height={300} data={data}>
+          <XAxis dataKey="name" />
+          <YAxis />
+          <Tooltip />
+          <Legend />
+          <Line type="monotone" dataKey="stars" stroke="#22c55e" />
+          <Line type="monotone" dataKey="forks" stroke="#3b82f6" />
+        </LineChart>
+      )}
+
+      {chartType === "bar" && (
+        <BarChart width={600} height={300} data={data}>
+          <XAxis dataKey="name" />
+          <YAxis />
+          <Tooltip />
+          <Legend />
+          <Bar dataKey="stars" fill="#22c55e">
+            <LabelList dataKey="stars" position="top" />
+          </Bar>
+          <Bar dataKey="forks" fill="#3b82f6">
+            <LabelList dataKey="forks" position="top" />
+          </Bar>
+        </BarChart>
+      )}
+
+      {chartType === "pie" && (
+        <PieChart width={400} height={400}>
+          <Pie
+            data={data}
+            dataKey="stars"
+            nameKey="name"
+            outerRadius={100}
+            label={({ name, value }) => `${name}: ${value}`} 
+          >
+            {data.map((_, index) => (
+              <Cell key={index} fill={COLORS[index % COLORS.length]} />
+            ))}
+          </Pie>
+          <Tooltip formatter={tooltipFormatter} />
+          <Legend />
+        </PieChart>
+      )}
+
+    </div>
+  );
+}

src/components/Graph/NetworkGraph.tsx

@@ -0,0 +1,212 @@
+import ForceGraph2D from "react-force-graph-2d";
+import { useEffect, useState, useRef } from "react";
+import { fetchRepoContributors } from "../../services/githubService";
+import * as d3 from "d3-force";
+
+export default function NetworkGraph({ repos }: any) {
+  const [graphData, setGraphData] = useState<any>({
+    nodes: [],
+    links: []
+  });
+
+  const fgRef = useRef<any>(null);
+
+  //  IMAGE CACHE
+  const imageCache = useRef<{ [key: string]: HTMLImageElement }>({});
+
+  //  BUILD GRAPH
+  useEffect(() => {
+    const buildGraph = async () => {
+      const nodes: any[] = [];
+      const links: any[] = [];
+      const addedUsers = new Set();
+
+      for (let repo of repos.slice(0, 6)) {
+        nodes.push({
+          id: repo.name,
+          type: "repo",
+          stars: repo.stargazers_count
+        });
+
+        try {
+          const contributors = await fetchRepoContributors(repo.contributors_url);
+
+          contributors.slice(0, 5).forEach((c: any) => {
+            if (!addedUsers.has(c.login)) {
+              addedUsers.add(c.login);
+
+              nodes.push({
+                id: c.login,
+                type: "user",
+                contributions: c.contributions,
+                avatar: c.avatar_url
+              });
+            }
+
+            links.push({
+              source: c.login,
+              target: repo.name,
+              weight: c.contributions
+            });
+          });
+
+        } catch (e) {
+          console.error(e);
+        }
+      }
+
+      setGraphData({ nodes, links });
+    };
+
+    if (repos.length) buildGraph();
+  }, [repos]);
+
+  // FORCE SETTINGS
+  useEffect(() => {
+    if (!fgRef.current) return;
+
+    fgRef.current.d3Force("center", d3.forceCenter(0, 0));
+    fgRef.current.d3Force("charge", d3.forceManyBody().strength(-100));
+    fgRef.current.d3Force("link", d3.forceLink().distance(70));
+
+    fgRef.current.d3Force(
+      "radial",
+      d3.forceRadial((node: any) => {
+        return node.type === "repo" ? 80 : 180;
+      }).strength(0.8)
+    );
+
+  }, [graphData]);
+
+  useEffect(() => {
+  if (!fgRef.current) return;
+
+  //  trigger render after mount
+  setTimeout(() => {
+    fgRef.current.zoomToFit(400);
+  }, 300);
+}, [graphData]);
+
+  return (
+    <div className="h-[650px] relative overflow-hidden bg-[#020617] rounded-xl mt-6 border border-gray-800">
+
+      <ForceGraph2D
+        ref={fgRef}
+        graphData={graphData}
+        backgroundColor="#020617"
+
+        enableZoomInteraction={true}
+        enablePanInteraction={true}
+        enableNodeDrag={false}
+        autoPauseRedraw={false}
+
+        minZoom={0.5}
+        maxZoom={2}
+
+        onZoomEnd={({k, x, y}) => {
+          const limit = 200;
+
+          if(Math.abs(x) > limit || Math.abs(y) > limit) {
+            fgRef.current.centerAt(0, 0, 400);
+          }
+        }}
+        // AUTO CENTER + FREEZE
+        onEngineStop={() => {
+          fgRef.current.centerAt(0, 0, 400);
+          fgRef.current?.zoomToFit(400);
+
+          graphData.nodes.forEach((node: any) => {
+            node.fx = node.x;
+            node.fy = node.y;
+          });
+
+          fgRef.current?.pauseAnimation();
+        }}
+
+        d3VelocityDecay={0.3}
+        d3AlphaDecay={0.02}
+        cooldownTicks={100}
+        warmupTicks={100}
+
+        // TOOLTIP
+        nodeLabel={(node: any) =>
+          node.type === "repo"
+            ? `📦 ${node.id} (⭐ ${node.stars})`
+            : `👤 ${node.id} (${node.contributions})`
+        }
+
+        // NODE RENDER (FIXED AVATAR)
+        nodeCanvasObject={(node: any, ctx, globalScale) => {
+          const size =
+            node.type === "repo"
+              ? 10 + Math.log(node.stars + 1)
+              : 5; 
+
+          const fontSize = 9 / globalScale;
+
+          if (node.type === "user" && node.avatar) {
+            let img = imageCache.current[node.avatar];
+
+            if (!img) {
+              img = new Image();
+              img.src = node.avatar;
+              imageCache.current[node.avatar] = img;
+            }
+
+            ctx.save();
+            ctx.beginPath();
+            ctx.arc(node.x, node.y, size, 0, 2 * Math.PI);
+            ctx.closePath();
+            ctx.clip();
+
+            if (img.complete) {
+              ctx.drawImage(
+                img,
+                node.x - size,
+                node.y - size,
+                size * 2,
+                size * 2
+              );
+            }
+
+            ctx.restore();
+
+            // white border
+            ctx.beginPath();
+            ctx.arc(node.x, node.y, size, 0, 2 * Math.PI);
+            ctx.strokeStyle = "#ffffff";
+            ctx.lineWidth = 1;
+            ctx.stroke();
+
+          } else {
+            // repo node
+            ctx.beginPath();
+            ctx.arc(node.x, node.y, size, 0, 2 * Math.PI);
+            ctx.fillStyle = "#22c55e";
+            ctx.fill();
+          }
+
+          // label
+          ctx.font = `${fontSize}px Inter`;
+          ctx.fillStyle = "#e2e8f0";
+          ctx.fillText(node.id, node.x + size + 2, node.y + size / 2);
+        }}
+
+        // EDGE DESIGN (VISIBLE)
+        linkWidth={(link: any) =>
+          Math.max(1, Math.log(link.weight + 1))
+        }
+
+        linkColor={() => "rgba(200,200,200,0.6)"} 
+
+        linkDirectionalParticles={1}
+        linkDirectionalParticleSpeed={0.002}
+
+        // HOVER
+        onNodeHover={(node) => {
+          document.body.style.cursor = node ? "pointer" : "default";
+        }}
+      />
+    </div>
+  );
+}

src/components/HealthScore.tsx

@@ -0,0 +1,28 @@
+export default function HealthScore({ score, label }: any) {
+  return (
+    <div className="bg-[#111827] p-5 rounded-xl border border-gray-800 w-full mt-10">
+
+      <h3 className="text-gray-400 text-sm mb-2">
+        Organization Health Score
+      </h3>
+
+      <div className="flex items-center justify-between mb-3">
+        <span className="text-3xl font-bold text-green-400">
+          {score}/100
+        </span>
+        <span className="text-sm text-gray-300">
+          {label}
+        </span>
+      </div>
+
+      {/* Progress bar */}
+      <div className="w-full bg-gray-700 h-3 rounded-full">
+        <div
+          className="h-3 rounded-full bg-green-500 transition-all duration-500"
+          style={{ width: `${score}%` }}
+        ></div>
+      </div>
+
+    </div>
+  );
+}