2c:null 2d:["$","title",null,{"children":"GitHub Repository Visualizer | Northeastern University John A. Guerra Gomez classes | Observable"}] 32:T6b2,# GitHub Repository Visualizer ## Motivation and Use Cases The GitHubRepositoryVisualizer function helps anyone interested in seeing what's happening inside GitHub repositories. It's great for keeping an eye on how projects are moving along, including how new issues and pull requests are being handled over time. ## Overview `GitHubRepositoryVisualizer` is an asynchronous JavaScript function that creates visual representations of GitHub repository activities such as issues and pull requests. It requires a GitHub Personal Access Token to authenticate API requests. ### How to get a GitHub Personal Access Token? [Creating a personal access token](https://docs.github.com/en/enterprise-server@3.9/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens#creating-a-personal-access-token) ### Parameters - **repos**: An array of repository identifiers in the format `"repositoryName:owner"`. - **apiToken**: Your GitHub Personal Access Token. - **controls**: An array of strings to specify which data to visualize (`'Issues'` or `'Pull Requests'`). ### Returns - An HTML element that displays detailed information and visual plots for the specified repositories. ## How to Import ```javascript import { GitHubRepositoryVisualizer } from "@your-org/github-repo-visualizer"; ``` ## How to User ```javascript const repos = ['repoName1:user1', 'repoName2:user2']; const apiToken = 'YOUR_PERSONAL_ACCESS_TOKEN'; const controls = ['Issues', 'Pull Requests']; const visualization = await GitHubRepositoryVisualizer(repos, apiToken, controls); document.body.appendChild(visualization); // or viewof visualization = await GitHubRepositoryVisualizer(repos, apiToken, controls); ```33:T16d5,GitHubRepositoryVisualizer = async function (repos, apiToken, controls) { if (!repos) return; const actualData = [] const getPlots = async (repoName, owner) => { let plts = []; if (controls.includes('Issues')) { const issuesEndpoint = `/repos/${owner}/${repoName}/issues?per_page=100`; const issues = await useGithubApi(issuesEndpoint, apiToken); const groupedIssues = Object.groupBy( issues.data, (item) => item.created_at.split("T")[0] ); const processedData = Object.entries(groupedIssues) ?.map(([date, items]) => ({ date: new Date(date), noOfIssues: items.length, items, })) .sort((a, b) => a.date - b.date); const issuesPlot = Plot.plot({ y: { grid: true, label: "↑ Number of Issues", labelOffset: 10, tickSize: 5, tickPadding: 5, ticks: d3.range( Math.floor(d3.min(processedData, (d) => d.noOfIssues)), Math.ceil(d3.max(processedData, (d) => d.noOfIssues)) + 1 ), tickFormat: (d) => Math.round(d), style: { fontSize: "16px", fontWeight: "bold", }, }, x: { label: "Date →", labelOffset: 10, tickSize: 5, tickPadding: 5, style: { fontSize: "16px", fontWeight: "bold", }, }, color: { legend: true, }, marks: [ Plot.lineY(processedData, { x: "date", y: "noOfIssues", stroke: "#D01B25", strokeWidth: 3, tip: true, }), Plot.crosshair(processedData, { x: "date", y: "noOfIssues", }), ], width: 650, height: 400, marginTop: 50, marginLeft: 60, title: "Open Issues (Latest 100)", }); plts.push(issues.data.length ? issuesPlot : htl.html`

No recent issues

`); } if (controls.includes('Pull Requests')) { const issuesEndpoint = `/repos/${owner}/${repoName}/pulls?per_page=100`; const prs = await useGithubApi(issuesEndpoint, apiToken); const groupedPrs = Object.groupBy( prs.data, (item) => item.created_at.split("T")[0] ); const processedData = Object.entries(groupedPrs) ?.map(([date, items]) => ({ date: new Date(date), noOfPrs: items.length, items, })) .sort((a, b) => a.date - b.date); const prsPlot = Plot.plot({ y: { grid: true, label: "↑ Number of PRs", labelOffset: 10, tickSize: 5, tickPadding: 5, ticks: d3.range( Math.floor(d3.min(processedData, (d) => d.noOfPrs)), Math.ceil(d3.max(processedData, (d) => d.noOfPrs)) + 1 ), tickFormat: (d) => Math.round(d), style: { fontSize: "16px", fontWeight: "bold", }, }, x: { label: "Date →", labelOffset: 10, tickSize: 5, tickPadding: 5, style: { fontSize: "16px", fontWeight: "bold", }, }, color: { legend: true, }, marks: [ Plot.lineY(processedData, { x: "date", y: "noOfPrs", stroke: "steelblue", strokeWidth: 3, tip: true, }), Plot.crosshair(processedData, { x: "date", y: "noOfPrs", }), ], width: 650, height: 400, marginTop: 50, marginLeft: 60, title: "Open PRs (Latest 100)", }); plts.push(prs.data.length ? prsPlot : htl.html`

No recent Pull Requests

`); } return plts }; const getData = async () => { for (let repo of repos) { const repoData = repo.split(":"); const [repoName, owner] = repoData; const plots = await getPlots(repoName, owner); const repoEndpoint = `/repos/${owner}/${repoName}` const languagesEndpoint = `/repos/${owner}/${repoName}/languages` const repository = (await useGithubApi(repoEndpoint, apiToken)).data const languages = (await useGithubApi(languagesEndpoint, apiToken)).data const languagesAsText = Object.keys(languages).join(', ') const outputHtml = htl.html`

${repository.full_name}

Repository link

Created on: ${dayjs(repository.created_at).format('MMMM D, YYYY')}

Last updated: ${dayjs(repository.updated_at).format('MMMM D, YYYY')}

Stars: ${repository.stargazers_count}

No of forks: ${repository.forks_count}

No of open issues: ${repository.open_issues_count}

Language(s): ${languagesAsText}

${plots.map((plot) => { return htl.html`

${plot}

`; })}

`; actualData.push(outputHtml) } } await getData(); return htl.html` ${actualData.map((d) => { return htl.html`

${d}

` })} `; };34:[] 30:{"id":"c9d54d6a9f169009","slug":"githubrepositoryvisualizer","title":"GitHub Repository Visualizer","thumbnail":"9dec0dd8e3c4c84681b2d2b752dba981f004b86985851dc91a3c889d842b618a","access_level":"public","create_time":"$D2024-04-24T21:49:11.788Z","update_time":"$D2024-04-24T22:27:37.344Z","view_time":null,"first_public_time":"$D2024-04-24T21:51:15.518Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"afbaa6d30585fd36","login":"nujguerra","name":"Northeastern University John A. Guerra Gomez classes","avatar_url":"https://avatars-next.observableusercontent.com/04e5ef72b3edcda1296894b5d1ecaa9c92ef5d52d69e65e4c115de5534928fe9","tier":"education_2026","bio":""},"version":22,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"e6c36eea28ddeac5","login":"agnibha-chatterjee","name":"Agnibha Chatterjee","avatar_url":"https://avatars-next.observableusercontent.com/b351f02a429076558a3a897b0aa10f5fef227c3e21fbaee43fc290224bcee620","tier":null,"bio":""}],"members":[{"type":"individual","id":"e6c36eea28ddeac5","login":"agnibha-chatterjee","name":"Agnibha Chatterjee","avatar_url":"https://avatars-next.observableusercontent.com/b351f02a429076558a3a897b0aa10f5fef227c3e21fbaee43fc290224bcee620","tier":null,"role":"editor"},{"type":"team","id":"afbaa6d30585fd36","login":"nujguerra","name":"Northeastern University John A. Guerra Gomez classes","avatar_url":"https://avatars-next.observableusercontent.com/04e5ef72b3edcda1296894b5d1ecaa9c92ef5d52d69e65e4c115de5534928fe9","tier":"education_2026","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"GitHub Repository Visualizer","cells":[{"id":0,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"d3 = require('d3@7')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"dayjs = require('dayjs')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"import {useGithubApi} from \"@nu-cs3200-spring24-db/github-user-explorer\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 31:"$30:body"