Bugs

src/App.jsx

@@ -1,11 +1,11 @@
 import React, { useEffect, useState } from "react";
 import Header from "./components/header";
 import Index from "./pages/index";
-import PullRequests from "./pages/pullRequests";
+import PullRequestsPage from "./pages/PullRequestsPage";
 import CommitsPage from "./pages/commitsPage";
-import Issues from "./pages/issues";
-import Individual from "./pages/individual";
-import Projects from "./pages/projects";
+import IssuesPage from "./pages/issuesPage";
+import IndividualPage from "./pages/individualPage";
+import ProjectsPage from "./pages/projectsPage";
 import { HashRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
 
 function App() {
@@ -85,10 +85,10 @@ function App() {
         <Route path="/" element={<Navigate to="/general" />} />
         <Route path="/general" element={<Index data={data} historicData={historicData} features={config.features} />} />
         <Route path="/commits" element={<CommitsPage data={data} historicData={historicData} features={config.features}/>} />
-        <Route path="/issues" element={<Issues data={data}  historicData={historicData} features={config.features}/>} />
-        <Route path="/pull-requests" element={<PullRequests data={data}  historicData={historicData} features={config.features}/>} />
-        <Route path="/projects" element={<Projects data={data}  historicData={historicData} features={config.features}/>} />
-        <Route path="/individual" element={<Individual data={data} historicData={historicData} features={config.features}/>} />
+        <Route path="/issues" element={<IssuesPage data={data}  historicData={historicData} features={config.features}/>} />
+        <Route path="/pull-requests" element={<PullRequestsPage data={data}  historicData={historicData} features={config.features}/>} />
+        <Route path="/projects" element={<ProjectsPage data={data}  historicData={historicData} features={config.features}/>} />
+        <Route path="/individual" element={<IndividualPage data={data} historicData={historicData} features={config.features}/>} />
       </Routes>
     </Router>
   );

src/components/dateRangeSelector.jsx

@@ -0,0 +1,22 @@
+const DateRangeSelector = ({ showHistorical, dateRange, setDateRange }) => {
+  if (!showHistorical) return null;
+
+  return (
+    <div className="day-selector-wrapper-comm">
+      <select
+        className="day-selector-comm"
+        onChange={(e) => setDateRange(e.target.value)}
+        value={dateRange}
+        style={{ marginLeft: '1rem' }}
+      >
+        <option value="7">Last 7 days</option>
+        <option value="15">Last 15 days</option>
+        <option value="30">Last 30 days</option>
+        <option value="90">Last 3 months</option>
+        <option value="lifetime">Lifetime</option>
+      </select>
+    </div>
+  );
+};
+
+export default DateRangeSelector;

src/components/historicalToggle.jsx

@@ -0,0 +1,22 @@
+const HistoricalToggle = ({ showHistorical, setShowHistorical }) => {
+  return (
+    <div className="chart-toggle-wrapper-index">
+      <div className="chart-toggle-buttons">
+        <button
+          onClick={() => setShowHistorical(false)}
+          className={!showHistorical ? 'selected' : ''}
+        >
+          Current
+        </button>
+        <button
+          onClick={() => setShowHistorical(true)}
+          className={showHistorical ? 'selected' : ''}
+        >
+          Historical
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default HistoricalToggle;

src/components/radarPieToggle.jsx

@@ -1,11 +1,12 @@
 import React, { useState } from 'react';
+import usePersistentState from './usePersistentState'
 import RadarChart from './radarChart';
 import PieChart from './pieChart';
 import '../styles/radarPieToggle.css';
 
 
-const RadarPieToggle = ({ radarData, pieData, title }) => {
-  const [selectedChart, setSelectedChart] = useState('radar');
+const RadarPieToggle = ({ RadarPieID, radarData, pieData, title }) => {
+  const [selectedChart, setSelectedChart] = usePersistentState(RadarPieID,'radar');
 
   const selectRadar = () => setSelectedChart('radar');
   const selectPie = () => setSelectedChart('pie');

src/domain/commits.jsx

@@ -1,28 +1,14 @@
-export const filterHistoricData = (data, days) => {
-  if (days === "lifetime") return data;
-
-  const today = new Date();
-  const cutoff = new Date(today);
-  cutoff.setDate(today.getDate() - parseInt(days));
-  const cutoffDateString = cutoff.toISOString().split("T")[0];
-
-  const filtered = {};
-  for (const date in data) {
-    if (date >= cutoffDateString) {
-      filtered[date] = data[date];
-    }
-  }
-
-  return filtered;
-};
+export const getGaugeDataAnonymous = (data) => {
+  return data.commits?.total > 0 ? ((data.commits?.total || 0) - (data.commits?.anonymous || 0)) / data.commits?.total : 0
+}
 
 export const transformCommitsDataForLineChart = (data) => {
-  const xDataCommits = [];
+  const xData = [];
   const userSeries = {};
 
   for (const date in data) {
-    xDataCommits.push(date);
-    const commits = data[date].commits;
+    xData.push(date);
+    const commits = data[date].commits || {};
 
     for (const user in commits) {
       if (user === 'total' || user === 'anonymous') continue;
@@ -31,68 +17,136 @@ export const transformCommitsDataForLineChart = (data) => {
     }
   }
 
-  const seriesDataCommits = Object.keys(userSeries).map(user => ({
+  const seriesData = Object.keys(userSeries).map(user => ({
     name: user,
     data: userSeries[user]
   }));
 
-  return { xDataCommits, seriesDataCommits };
+  return { xData, seriesData };
 };
 
 export const transformModifiedLinesDataForLineChart = (data) => {
-  const xDataModified = [];
+  const xData = [];
   const userSeries = {};
 
   for (const date in data) {
-    xDataModified.push(date);
-    const modifiedLines = data[date].modified_lines;
+    xData.push(date);
+    const modifiedLines = data[date].modified_lines || {};
 
     for (const user in modifiedLines) {
       if (user === 'total') continue;
       if (!userSeries[user]) userSeries[user] = [];
-      userSeries[user].push(modifiedLines[user].modified);
+      userSeries[user].push(modifiedLines[user]?.modified || 0);
     }
   }
 
-  const seriesModified = Object.keys(userSeries).map(user => ({
+  const seriesData = Object.keys(userSeries).map(user => ({
     name: user,
     data: userSeries[user]
   }));
 
-  return { xDataModified, seriesModified };
+  return { xData, seriesData };
+};
+
+export const GetRadarDataCommits = (data) => {
+  const radarData = {};
+  for (const [user, val] of Object.entries(data.commits || {})) {
+    if (user !== 'total' && user !== 'anonymous') {
+      radarData[user] = val;
+    }
+  }
+  return radarData;
 };
 
-export const prepareRadarData = (modifiedLinesData) => {
-  const radarChartModifiedLines = {};
-  for (const [user, { modified }] of Object.entries(modifiedLinesData)) {
-    radarChartModifiedLines[user] = modified;
+export const GetRadarDataModifiedLines = (data) => {
+  const radarData = {};
+  for (const [user, val] of Object.entries(data.modified_lines || {})) {
+    if (user !== 'total' && val.modified !== undefined) {
+      radarData[user] = val.modified;
+    }
   }
-  return radarChartModifiedLines;
+  return radarData;
 };
 
-export const getPieChartData = (dataObj, key = null) => {
-  return Object.entries(dataObj)
+export const getPieChartDataCommits = (data) => {
+  return Object.entries(data.commits || {})
     .filter(([user]) => user !== 'total' && user !== 'anonymous')
-    .map(([user, val]) => [user, key ? val[key] : val]);
+    .map(([user, val]) => [user, val]);
 };
 
-export const getGaugeChartPercentages = (dataObj, totalKey, anonymousKey = null) => {
-  const total = dataObj[totalKey];
-  const anonymous = anonymousKey ? dataObj[anonymousKey] : 0;
-  return Object.entries(dataObj)
-    .filter(([user]) => user !== totalKey && user !== anonymousKey)
+export const getPieChartDataModifiedLines = (data) => {
+  return Object.entries(data.modified_lines || {})
+    .filter(([user]) => user !== 'total')
+    .map(([user, val]) => [user, val.modified]);
+};
+
+export const getGaugeChartDataCommits = (data) => {
+  const total = data.commits?.total || 0;
+  const anonymous = data.commits?.anonymous || 0;
+  const denominator = total - anonymous;
+
+  return Object.entries(data.commits || {})
+    .filter(([user]) => user !== 'total' && user !== 'anonymous')
     .map(([user, val]) => ({
       user,
-      percentage: (total - anonymous) > 0 ? val / (total - anonymous) : 0
+      percentage: denominator > 0 ? val / denominator : 0,
     }));
 };
 
-export const getGaugeChartModifiedLines = (dataObj, totalKey) => {
-  const total = dataObj[totalKey].modified;
-  return Object.entries(dataObj)
-    .filter(([user]) => user !== totalKey)
+export const getGaugeChartDataModifiedLines = (data) => {
+  const totalModified = data.modified_lines?.total?.modified || 0;
+
+  return Object.entries(data.modified_lines || {})
+    .filter(([user]) => user !== 'total')
     .map(([user, val]) => ({
       user,
-      percentage: total > 0 ? val.modified / total : 0
+      percentage: totalModified > 0 ? val.modified / totalModified : 0,
     }));
 };
+
+export const transformCommitsDataForUser = (data, username) => {
+    const xDataCommits = [];
+    const yDataCommits = [];
+
+    for (const date in data) {
+      xDataCommits.push(date);
+      yDataCommits.push(data[date].commits[username] || 0);
+    }
+
+    return { xDataCommits, yDataCommits };
+  };
+
+export const transformModifiedLinesDataForUser = (data, username) => {
+    const xDataModifiedLines = [];
+    const yDataModifiedLines = [];
+
+    for (const date in data) {
+      const userData = data[date].modified_lines[username].modified;
+      xDataModifiedLines.push(date);
+      yDataModifiedLines.push(userData);
+    }
+
+    return { xDataModifiedLines, yDataModifiedLines };
+  };
+
+  export const transformDataForLineChartCommits = (data) => {
+    const xData = []; 
+    const yData = []; 
+    for (const date in data) {
+          xData.push(date);
+          yData.push(data[date].commits.total); 
+        }
+
+    return { xData, yData };
+    };
+
+  export const transformDataForLineChartModifiedLines = (data) => {
+    const xDataModifedLines = []; 
+    const yDataModifedLines = []; 
+    for (const date in data) {
+          xDataModifedLines.push(date);
+          yDataModifedLines.push(data[date].modified_lines.total.modified); 
+        }
+
+    return { xDataModifedLines, yDataModifedLines };
+  };