Update webui with GitHub link and chart page (#6)

* Update webui with GitHub link and chart page Add GitHub link icon and new chart page to web UI. * **Add GitHub link icon** - Add a GitHub link icon to the top-right corner of all pages in `webapp/index.html`. - Link the icon to the GitHub repository URL. * **Create ChartPage component** - Add a new file `webapp/src/components/ChartPage.tsx` to create a React component for displaying the chart. - Use Chart.js to render the chart. - Load data from `assets/pr_counts_by_date.csv` and display it as a line chart. * **Update main.tsx for routing** - Modify `webapp/src/main.tsx` to include routing for the new chart page. - Import and use the `ChartPage` component. * **Update README.md** - Add instructions for accessing the new chart page. --- For more details, open the [Copilot Workspace session](https://copilot-workspace.githubnext.com/kaakaa/ai-agent-statistics?shareId=XXXX-XXXX-XXXX-XXXX). * Add chart data fetching and routing for ChartPage component * **ChartPage.tsx** - Replace d3-fetch with fetch API to load CSV data - Parse CSV data and update chartData state * **main.tsx** - Replace `Switch` with `Routes` for routing - Update `Route` components to use `element` prop instead of `component` prop * feat: support subpath settings * feat: add new chart page * Update webapp/src/components/statistics/PullRequestsCount.tsx Co-authored-by: Copilot <[email protected]> * Update webapp/src/components/statistics/PullRequestsCount.tsx Co-authored-by: Copilot <[email protected]> --------- Co-authored-by: Copilot <[email protected]>
kaakaa · Jan 3, 2025 · dcd8182 · dcd8182
1 parent d3a88e8
commit dcd8182
Show file tree

Hide file tree

Showing 9 changed files with 234 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -23,4 +23,10 @@ $ npm run preview
 => access to http://localhost:4173/ai-agent-statistics
 ```
 
+## Accessing the Chart Page
 
+To view the chart of PR counts by date, follow these steps:
+
+1. Open your web browser.
+2. Navigate to the following URL: `http://localhost:4173/ai-agent-statistics/chart`
+3. You will see a line chart displaying the PR counts by date.
diff --git a/webapp/index.html b/webapp/index.html
@@ -4,8 +4,18 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>AI-Agent Statistics</title>
+    <style>
+      .github-icon {
+        position: absolute;
+        top: 10px;
+        right: 10px;
+      }
+    </style>
   </head>
   <body>
+    <a href="https://github.com/kaakaa/ai-agent-statistics" class="github-icon">
+      <img src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png" alt="GitHub" width="32" height="32">
+    </a>
     <div id="root"></div>
     <script type="module" src="./src/main.tsx"></script>
   </body>

diff --git a/webapp/package-lock.json b/webapp/package-lock.json
diff --git a/webapp/package.json b/webapp/package.json
@@ -18,8 +18,11 @@
     "@mui/material": "^6.3.0",
     "@mui/x-data-grid": "^7.23.5",
     "@tanstack/react-table": "^8.20.6",
+    "chart.js": "^4.4.7",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-chartjs-2": "^5.3.0",
+    "react-dom": "^18.3.1",
+    "react-router": "^7.1.1"
   },
   "devDependencies": {
     "@eslint/js": "^9.17.0",

diff --git a/webapp/src/components/Statistics.tsx b/webapp/src/components/Statistics.tsx
@@ -0,0 +1,55 @@
+import { useEffect, useState } from 'react';
+import { Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend } from 'chart.js';
+
+import { PRCount } from '../types';
+import PullRequestsCountChart from './statistics/PullRequestsCount';
+import ReposCountChart from './statistics/ReposCount';
+
+ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend);
+
+export type ChartDataType = {
+  labels: string[];
+  datasets: {
+    label: string;
+    data: number[];
+    borderColor: string;
+    backgroundColor: string
+  }[];
+}
+
+const StatisticsPage = () => {
+  const [prCounts, setPrCounts] = useState<PRCount[]>([]);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const basepath = import.meta.env.BASE_URL
+      const baseUrl = `${window.location.protocol}//${window.location.host}${basepath}`.replace(/\/$/, '');
+      console.log(`fetch pr_counts_by_date.csv from baseUrl: ${baseUrl}`);
+      const resp = await fetch(`${baseUrl}/assets/pr_counts_by_date.csv`);
+
+      const csv = await resp.text();
+      const prCounts: PRCount[]= csv.split('\n').slice(1).map(row => {
+        const values = row.split(',');
+        return {
+            date: values[0],
+            author: values[1],
+            count: parseInt(values[2], 10),
+            repos: parseInt(values[3], 10),
+        }
+      });
+      setPrCounts(prCounts);
+    };
+    fetchData();
+  }, []);
+
+  return (
+    <div>
+      <h1>PR Count by Date</h1>
+      <PullRequestsCountChart prCounts={prCounts} />
+      <h1>Repos Count by Date</h1>
+      <ReposCountChart prCounts={prCounts} />
+    </div>
+  );
+};
+
+export default StatisticsPage;
diff --git a/webapp/src/components/statistics/PullRequestsCount.tsx b/webapp/src/components/statistics/PullRequestsCount.tsx
@@ -0,0 +1,34 @@
+import { Line } from 'react-chartjs-2';
+
+import { PRCount } from '../../types';
+
+type ChartProps = {
+    prCounts: PRCount[];
+}
+
+const PullRequestsCountChart = ({prCounts}: ChartProps) => {
+    const authors = [
+        {name: "devin-ai-integration", color: 'rgba(0, 180, 170, 1)'},
+        {name: "devloai", color: 'rgba(0, 122, 255, 1)'},
+        {name: "openhands-agent", color: 'rgba(255, 204, 0, 1)'},
+    ];
+    const labels = Array.from(new Set(prCounts.map((prCount: PRCount) => prCount.date)));
+
+    const datasets = authors.map(author => {
+        const countsByAuthor = prCounts.filter((prCount: PRCount) => prCount.author === author.name)
+        const counts = labels.map(date => countsByAuthor.find((c: PRCount) => c.date === date)?.count || 0);
+        return {
+            label: author.name,
+            data: counts,
+            borderColor: author.color,
+            backgroundColor: 'rgba(75, 192, 192, 0.2)',
+        }
+    });
+    return (
+        <>
+            <Line data={{labels, datasets: datasets}} />
+        </>
+    )
+}
+
+export default PullRequestsCountChart;
diff --git a/webapp/src/components/statistics/ReposCount.tsx b/webapp/src/components/statistics/ReposCount.tsx
@@ -0,0 +1,34 @@
+import { Line } from 'react-chartjs-2';
+
+import { PRCount } from '../../types';
+
+type ChartProps = {
+    prCounts: PRCount[];
+}
+
+const ReposCountChart = ({prCounts}: ChartProps) => {
+    const authors = [
+        {name: "devin-ai-integration", color: 'rgba(0, 180, 170, 1)'},
+        {name: "devloai", color: 'rgba(0, 122, 255, 1)'},
+        {name: "openhands-agent", color: 'rgba(255, 204, 0, 1)'},
+    ];
+    const labels = Array.from(new Set(prCounts.map((prCount: any) => prCount.date)));
+
+    const datasets = authors.map(author => {
+        const countsByAuthor = prCounts.filter((prCount: any) => prCount.author === author.name)
+        const counts = labels.map(date => countsByAuthor.find((c: PRCount) => c.date === date)?.repos || 0);
+        return {
+            label: author.name,
+            data: counts,
+            borderColor: author.color,
+            backgroundColor: 'rgba(75, 192, 192, 0.2)',
+        }
+    });
+    return (
+        <>
+            <Line data={{labels, datasets: datasets}} />
+        </>
+    )
+}
+
+export default ReposCountChart;
diff --git a/webapp/src/main.tsx b/webapp/src/main.tsx
@@ -1,10 +1,19 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
+import { BrowserRouter as Router, Route, Routes } from 'react-router';
 import './index.css'
 import PullRequestsTable from './components/PullRequests.tsx'
+import StatisticsPage from './components/Statistics.tsx';
+
+const base = import.meta.env.BASE_URL
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <PullRequestsTable />
+    <Router basename={base}>
+      <Routes>
+        <Route path="/" element={<PullRequestsTable />} />
+        <Route path="/chart" element={<StatisticsPage />} />
+      </Routes>
+    </Router>
   </StrictMode>,
 )
diff --git a/webapp/src/types.ts b/webapp/src/types.ts
@@ -0,0 +1,6 @@
+export type PRCount = {
+  date: string;
+  author: string;
+  count: number;
+  repos: number;
+}