Skip to content

Feature : Built a Github Analytics Dashboard With Repository And Contributor-Level Insights #58

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
yanamavani wants to merge 5 commits into
base: main
Choose a base branch
from
Open

Feature : Built a Github Analytics Dashboard With Repository And Contributor-Level Insights #58

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
fccdaf2
Add full OrgExplorer dashboard: Overview, HealthScore, ActivityChart …
yanamavani Mar 30, 2026
35316fc
fix graph layout
yanamavani Apr 2, 2026
94a446c
Added PR analytics dashboard
yanamavani Apr 19, 2026
f949348
remove unused sidebar menu option
yanamavani Apr 19, 2026
059dc85
removed unused commented lines
yanamavani Apr 20, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2,075 changes: 1,838 additions & 237 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

10 changes: 9 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,15 @@
"preview": "vite preview"
},
"dependencies": {
"@tailwindcss/vite": "^4.2.2",
"axios": "^1.14.0",
"d3-force": "^3.0.0",
"react": "^19.2.0",
"react-dom": "^19.2.0"
"react-dom": "^19.2.0",
"react-force-graph-2d": "^1.29.1",
"react-icons": "^5.6.0",
"react-router-dom": "^7.13.2",
"recharts": "^3.8.1"
},
"devDependencies": {
"@eslint/js": "^9.39.1",
Expand All @@ -23,6 +30,7 @@
"eslint-plugin-react-hooks": "^7.0.1",
"eslint-plugin-react-refresh": "^0.4.24",
"globals": "^16.5.0",
"tailwindcss": "^4.2.2",
"typescript": "~5.9.3",
"typescript-eslint": "^8.46.4",
"vite": "npm:rolldown-vite@7.2.5"
Expand Down
52 changes: 52 additions & 0 deletions src/App.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,58 @@
/* #root {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
text-align: center;
} */
/* @import "tailwindcss"; */
#root {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
text-align: center;
}

body {
background: #0f172a;
color: #e2e8f0;
font-family: "Inter", sans-serif;
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot Apr 19, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Remove quotes around Inter per Stylelint.

Stylelint font-family-name-quotes flags this. Inter is a single identifier with no spaces/special chars and shouldn't be quoted.

-  font-family: "Inter", sans-serif;
+  font-family: Inter, sans-serif;
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
font-family: "Inter", sans-serif;
font-family: Inter, sans-serif;
🧰 Tools
🪛 Stylelint (17.7.0)

[error] 18-18: Expected no quotes around "Inter" (font-family-name-quotes)

(font-family-name-quotes)

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@src/App.css` at line 18, The CSS rule sets font-family: "Inter", sans-serif;
which triggers Stylelint's font-family-name-quotes; update the font-family
declaration used in App.css (the font-family property that currently uses the
string "Inter") to remove the unnecessary quotes so it reads Inter, sans-serif;
keep the fallback and formatting intact.

}

.chart-container {
margin-top: 30px;
padding: 20px;
border-radius: 16px;
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

h1 {
font-size: 32px;
margin-bottom: 20px;
}

h2 {
margin-bottom: 10px;
}

table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}

th, td {
padding: 10px;
border-bottom: 1px solid #444;
text-align: left;
}

th {
cursor: pointer;
color: #38bdf8;
}

tr:hover {
background: rgba(255,255,255,0.05);
Comment on lines +30 to +57
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot Apr 19, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Overly broad global selectors will leak into unrelated UI.

Styling bare h1, h2, table, th, td, and tr:hover globally from App.css will override Tailwind utilities and affect every heading/table in the app (including third-party components, modals, tooltips, etc.). Notably:

  • th { cursor: pointer; color: #38bdf8; } makes every header cell look clickable even when it isn't (misleading affordance).
  • tr:hover applies to all table rows, including header rows and non-interactive tables.
  • h1/h2 margin/size overrides will conflict with Tailwind's text-xl/text-2xl/mb-* utilities used throughout the new components (e.g., StatCard, GraphPage title, Topbar).

Scope these under a class (e.g., .chart-container, .data-table) or move them into the specific components that need them.

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@src/App.css` around lines 30 - 57, The global selectors in App.css (h1, h2,
table, th, td, tr:hover) are too broad and leak into unrelated UI; scope them by
moving these rules into component-scoped CSS or prefixing with a specific
container class (e.g., .data-table or .chart-container) used by the
table/heading components, so only tables and headings inside that container (not
global h1/h2) get the styles; update components like StatCard, GraphPage, and
Topbar to wrap their tables/headings with the chosen class or import the scoped
stylesheet so th { cursor:pointer; color:`#38bdf8` } and tr:hover apply only to
interactive tables.

}
41 changes: 33 additions & 8 deletions src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,37 @@
import './App.css'
import { useState } from "react";
import { Routes, Route } from "react-router-dom";

function App() {
import DashboardLayout from "./layout/DashboardLayout";
import Overview from "./pages/Overview";
import Repositories from "./pages/Repositories";
import GraphPage from "./pages/GraphPage";
import ContributorDetail from "./pages/ContributorDetail";
import RepoDetails from "./pages/RepoDetails";

export default function App() {
const [orgInput, setOrgInput] = useState("");
const [orgLogo, setOrgLogo] = useState("");

return (
<>
<h1>Hello, OrgExplorer!</h1>
</>
)
}
<DashboardLayout orgInput={orgInput} orgLogo={orgLogo}>
<Routes>
<Route
path="/"
element={
<Overview
orgInput={orgInput}
setOrgInput={setOrgInput}
setOrgLogo={setOrgLogo}
/>
}
/>

<Route path="/repositories" element={<Repositories />} />
<Route path="/graph" element={<GraphPage />} />
<Route path="/contributor/:username" element={<ContributorDetail />} />
<Route path="/repo/:name" element={<RepoDetails />} />

export default App
</Routes>
</DashboardLayout>
);
}
13 changes: 13 additions & 0 deletions src/components/Cards/statCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
);
Comment on lines +6 to +12
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot Apr 19, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick | 🔵 Trivial

Use non-heading element (or appropriate level) for the value, and rename the file to PascalCase.

  • Using <h2> for every stat value creates multiple same-level headings on a page and distorts the document outline (a11y/SEO). Since this renders a numeric value, a <p>/<span> with appropriate text utilities is more appropriate, or use <h3> if semantic heading is actually intended. Additionally, App.css applies global h2 { margin-bottom: 10px } which will fight the Tailwind classes here.
  • The file is named statCard.tsx (camelCase) while the exported component is StatCard. React/Google style convention is PascalCase filenames for component modules—rename to StatCard.tsx to match sibling component naming in the repo.
♻️ Proposed change 
-    <div className="bg-[`#1F2937`] p-4 rounded-xl  h-32">
+    <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>
+      <p className="text-2xl font-bold text-green-400">{value}</p>
     </div>
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
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>
);
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>
<p className="text-2xl font-bold text-green-400">{value}</p>
</div>
);
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@src/components/Cards/statCard.tsx` around lines 6 - 12, The StatCard
component currently renders the numeric value as an <h2> which creates multiple
same-level headings and conflicts with global h2 styles; change the markup in
StatCard (component named StatCard) to use a non-heading element such as <p> or
<span> with the existing Tailwind classes for size/weight (or demote to an
appropriate heading level like h3 only if truly semantic), and update any class
utilities accordingly so global h2 rules don't apply. Also rename the file from
statCard.tsx to PascalCase StatCard.tsx so the filename matches the exported
component name and project conventions.

}
Loading
Loading