diff --git a/app/[username]/Charts.js b/app/[username]/Charts.js new file mode 100644 index 0000000..5b17cb2 --- /dev/null +++ b/app/[username]/Charts.js @@ -0,0 +1,76 @@ +'use client'; + +import GridContainer from '@/components/GridContainer'; +import { Doughnut } from 'react-chartjs-2'; + +const Charts = ({ commitsPerRepo, starsPerRepo, reposPerLanguages, starsPerLanguages }) => { + return ( + +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ + ); +}; + +export default Charts; diff --git a/app/[username]/Languages.js b/app/[username]/Languages.js index 61f41fe..2600e97 100644 --- a/app/[username]/Languages.js +++ b/app/[username]/Languages.js @@ -8,13 +8,13 @@ const Languages = ({ languages }) => { return ( {languages.map(({ name, size }) => ( -
+
-

+

%

diff --git a/app/[username]/PopularProjects.js b/app/[username]/PopularProjects.js index adb6171..fae652f 100644 --- a/app/[username]/PopularProjects.js +++ b/app/[username]/PopularProjects.js @@ -17,7 +17,7 @@ const PopularProjects = ({ projects }) => {

{project.description}

-
+
{/* Language */}

{ {project.primaryLanguage.name}

- {project.stargazerCount} + {project.stargazerCount}

- {project.forkCount} + {project.forkCount}

-

- {project.issues.totalCount} +

+ {project.issues.totalCount}

- {project.pullRequests.totalCount} + {project.pullRequests.totalCount}

diff --git a/app/[username]/page.js b/app/[username]/page.js index b9e8a3c..3112020 100644 --- a/app/[username]/page.js +++ b/app/[username]/page.js @@ -9,26 +9,33 @@ import fetchCalendar from '@/utils/fetchCalendar'; import fetchUserInfo from '@/utils/fetchUserInfo'; import fetchAdditionalData from '@/utils/fetchAdditionalData'; import fetchPopularProjects from '@/utils/fetchPopularProjects'; - +import Charts from './Charts'; const page = async ({ params: { username } }) => { console.log('Username:', username); const userInfo = await fetchUserInfo(username); - const userStats = await fetchStats(username); - const userCalendar = await fetchCalendar(username); - const popularProjects = await fetchPopularProjects(username); - const {languages} = await fetchAdditionalData(username); - - + // const userStats = await fetchStats(username); + // const userCalendar = await fetchCalendar(username); + // const popularProjects = await fetchPopularProjects(username); + // const { languages, commitsPerRepo, starsPerRepo, reposPerLanguages, starsPerLanguages } = + // await fetchAdditionalData(username); return ( -
+
- + {/* - + + + + */}
); }; diff --git a/app/globals.scss b/app/globals.scss index bb8391f..4dadab1 100644 --- a/app/globals.scss +++ b/app/globals.scss @@ -27,7 +27,7 @@ @apply cursor-pointer rounded border border-gray-600 select-none bg-gray-700/25 px-3 py-2 text-center shadow-md shadow-gray-900 transition-all duration-300; &:hover { - @apply scale-105 border-2 border-gray-300 bg-gray-700 shadow-lg shadow-gray-950; + @apply md:scale-105 border-2 border-gray-300 bg-gray-700 shadow-lg shadow-gray-950; } } } diff --git a/app/layout.js b/app/layout.js index 591b974..8fbe10f 100644 --- a/app/layout.js +++ b/app/layout.js @@ -1,6 +1,7 @@ import GithubCorner from '@/components/GithubCorner'; import './globals.scss'; import ParticlesJs from '@/components/ParticlesJs'; +import ChartInit from '@/components/ChartInit'; export const metadata = { title: 'Create Next App', @@ -11,6 +12,7 @@ export default function RootLayout({ children }) { return ( + {children} diff --git a/components/ChartInit.js b/components/ChartInit.js new file mode 100644 index 0000000..98bd385 --- /dev/null +++ b/components/ChartInit.js @@ -0,0 +1,33 @@ +'use client'; + +import colors from 'tailwindcss/colors'; +import { Chart as ChartJS, ArcElement, Tooltip, Legend, Colors, Title } from 'chart.js'; +ChartJS.register(ArcElement, Tooltip, Legend, Title, Colors); + +ChartJS.defaults.plugins.colors.forceOverride = true; + +ChartJS.defaults.plugins.legend.position = 'bottom'; +ChartJS.defaults.plugins.legend.align = 'center'; +ChartJS.defaults.plugins.legend.display = false; + +ChartJS.defaults.plugins.legend.labels.color = 'white'; + +ChartJS.defaults.plugins.legend.labels.pointStyle = 'rect'; +ChartJS.defaults.plugins.legend.labels.usePointStyle = true; + +ChartJS.defaults.plugins.title.display = true; +ChartJS.defaults.plugins.title.color = 'white'; +// ChartJS.defaults.plugins.title.padding = { top: 10, bottom: 30 }; + + +// shuffle colors +let bgColors = Object.values(colors.zinc); +bgColors = bgColors.sort(() => Math.random() - 0.5); + +// ChartJS.defaults.backgroundColor = bgColors; + +const ChartInit = () => { + return
; +}; + +export default ChartInit; diff --git a/components/GridContainer.js b/components/GridContainer.js index 378d63d..abd87ef 100644 --- a/components/GridContainer.js +++ b/components/GridContainer.js @@ -4,7 +4,7 @@ const GridContainer = ({ name, className, children }) => { return (

{name}

-
{children}
+
{children}
); }; diff --git a/components/ParticlesJs.js b/components/ParticlesJs.js index 6c03e7c..6350261 100644 --- a/components/ParticlesJs.js +++ b/components/ParticlesJs.js @@ -41,7 +41,6 @@ const config = { }; const ParticlesJs = () => { - const onLoad = () => { window.particlesJS('particles-js', config); }; diff --git a/package.json b/package.json index 7d11e72..cfc063a 100644 --- a/package.json +++ b/package.json @@ -12,8 +12,10 @@ "@octokit/graphql": "^8.0.1", "@tippyjs/react": "^4.2.6", "axios": "^1.6.8", + "chart.js": "^4.0.0", "next": "14.1.4", "react": "^18", + "react-chartjs-2": "^5.0.0", "react-countup": "^6.5.3", "react-dom": "^18", "react-icons": "^5.0.1", @@ -27,4 +29,4 @@ "prettier-plugin-tailwindcss": "^0.5.12", "tailwindcss": "^3.3.0" } -} +} \ No newline at end of file diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 92ecd15..39ae254 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -14,12 +14,18 @@ dependencies: axios: specifier: ^1.6.8 version: 1.6.8 + chart.js: + specifier: ^4.0.0 + version: 4.4.2 next: specifier: 14.1.4 version: 14.1.4(react-dom@18.2.0)(react@18.2.0)(sass@1.72.0) react: specifier: ^18 version: 18.2.0 + react-chartjs-2: + specifier: ^5.0.0 + version: 5.2.0(chart.js@4.4.2)(react@18.2.0) react-countup: specifier: ^6.5.3 version: 6.5.3(react@18.2.0) @@ -126,6 +132,10 @@ packages: '@jridgewell/sourcemap-codec': 1.4.15 dev: true + /@kurkle/color@0.3.2: + resolution: {integrity: sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw==} + dev: false + /@next/env@14.1.4: resolution: {integrity: sha512-e7X7bbn3Z6DWnDi75UWn+REgAbLEqxI8Tq2pkFOFAMpWAWApz/YCUhtWMWn410h8Q2fYiYL7Yg5OlxMOCfFjJQ==} dev: false @@ -417,6 +427,13 @@ packages: /caniuse-lite@1.0.30001600: resolution: {integrity: sha512-+2S9/2JFhYmYaDpZvo0lKkfvuKIglrx68MwOBqMGHhQsNkLjB5xtc/TGoEPs+MxjSyN/72qer2g97nzR641mOQ==} + /chart.js@4.4.2: + resolution: {integrity: sha512-6GD7iKwFpP5kbSD4MeRRRlTnQvxfQREy36uEtm1hzHzcOqwWx0YEHuspuoNlslu+nciLIB7fjjsHkUv/FzFcOg==} + engines: {pnpm: '>=8'} + dependencies: + '@kurkle/color': 0.3.2 + dev: false + /chokidar@3.6.0: resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==} engines: {node: '>= 8.10.0'} @@ -994,6 +1011,16 @@ packages: resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==} dev: true + /react-chartjs-2@5.2.0(chart.js@4.4.2)(react@18.2.0): + resolution: {integrity: sha512-98iN5aguJyVSxp5U3CblRLH67J8gkfyGNbiK3c+l1QI/G4irHMPQw44aEPmjVag+YKTyQ260NcF82GTQ3bdscA==} + peerDependencies: + chart.js: ^4.1.1 + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + dependencies: + chart.js: 4.4.2 + react: 18.2.0 + dev: false + /react-countup@6.5.3(react@18.2.0): resolution: {integrity: sha512-udnqVQitxC7QWADSPDOxVWULkLvKUWrDapn5i53HE4DPRVgs+Y5rr4bo25qEl8jSh+0l2cToJgGMx+clxPM3+w==} peerDependencies: diff --git a/utils/fetchAdditionalData.js b/utils/fetchAdditionalData.js index 795406e..a7b0fab 100644 --- a/utils/fetchAdditionalData.js +++ b/utils/fetchAdditionalData.js @@ -26,7 +26,7 @@ const getLanguagesData = repos => { const getCommitsPerRepo = repos => { const reposObj = {}; - repos.forEach(repo => { + repos.slice(0, 10).forEach(repo => { const commits = repo.defaultBranchRef.target.history.totalCount; reposObj[repo.name] = commits; }); @@ -35,7 +35,7 @@ const getCommitsPerRepo = repos => { const getStarsPerRepo = repos => { const reposObj = {}; - repos.forEach(repo => (reposObj[repo.name] = repo.stargazerCount)); + repos.slice(0, 10).forEach(repo => (reposObj[repo.name] = repo.stargazerCount)); return reposObj; }; @@ -52,6 +52,19 @@ const getReposPerLanguages = repos => { return languages; }; +const getStarsPerLanguages = repos => { + const languages = {}; + + repos.forEach(repo => { + repo.languages.edges.forEach(({ node: { name } }) => { + if (languages[name]) languages[name] += repo.stargazerCount; + else languages[name] = repo.stargazerCount; + }); + }); + + return languages; +}; + const fetchAdditionalData = async login => { const query = ` query ($username: String!) { @@ -59,7 +72,7 @@ const fetchAdditionalData = async login => { repositories( ownerAffiliations: OWNER isFork: false - first: 10 + first: 20 orderBy: {field: STARGAZERS, direction: DESC} ) { nodes { @@ -95,8 +108,9 @@ const fetchAdditionalData = async login => { const commitsPerRepo = getCommitsPerRepo(repositories); const starsPerRepo = getStarsPerRepo(repositories); const reposPerLanguages = getReposPerLanguages(repositories); + const starsPerLanguages = getStarsPerLanguages(repositories); - return { languages, commitsPerRepo, starsPerRepo, reposPerLanguages }; + return { languages, commitsPerRepo, starsPerRepo, reposPerLanguages, starsPerLanguages }; }; export default fetchAdditionalData;