Dashboards are coming to Quarto in version 1.4.
I already gave them a spin for a simple parking dashboard but felt like they deserve
some bigger attention. Given its the time of year where many platforms offer a personal “recap”,
like spotify or twitch, I decided to implement a version of “GitHub wrapped”. Obviously, this also already exists, but I wanted to give it try myself.
Along the way, I actually learned a lot about GraphQL since GitHub does actually also have a GraphQL API. GraphQL is similar to REST but unlike REST, which typically requires loading from multiple URLs to gather different pieces of data, GraphQL allows a client to make a single request to fetch the required information. This flexibility is one of its key advantages. Clients can specify their data requirements, which reduces over-fetching or under-fetching issues common in REST APIs. Additionally, GraphQL APIs are organized in terms of types and fields, not endpoints, allowing for more structured and powerful queries.
In contrast, REST uses predefined and stateless operations. REST APIs work with resources (like users, posts, etc.), each identified by URLs. Each resource can be manipulated using HTTP methods such as GET, POST, PUT, DELETE. REST APIs are known for their simplicity and statelessness, with each call containing all the information needed to understand and process the request. However, this can lead to over-fetching of data, as the data returned from a REST API endpoint is fixed and not customizable by the client.
In R, the Github REST API can be called via the gh
package, and the GraphQL API with ghql
.
A call to the REST API is quite straightforward when you know which endpoint you need. The following call is a good example of a simple REST API call that overfetches a lot of data (all we actually want is the last repository I starred )
star <- gh::gh("/users/schochastics/starred", .limit = 1) star ## [ ## { ## "id": 68328745, ## "node_id": "MDEwOlJlcG9zaXRvcnk2ODMyODc0NQ==", ## "name": "ghql", ## "full_name": "ropensci/ghql", ## "private": false, ## "owner": { ## "login": "ropensci", ## "id": 1200269, ## "node_id": "MDEyOk9yZ2FuaXphdGlvbjEyMDAyNjk=", ## "avatar_url": "https://avatars.githubusercontent.com/u/1200269?v=4", ## "gravatar_id": "", ## "url": "https://api.github.com/users/ropensci", ## "html_url": "https://github.com/ropensci", ## "followers_url": "https://api.github.com/users/ropensci/followers", ## "following_url": "https://api.github.com/users/ropensci/following{/other_user}", ## "gists_url": "https://api.github.com/users/ropensci/gists{/gist_id}", ## "starred_url": "https://api.github.com/users/ropensci/starred{/owner}{/repo}", ## "subscriptions_url": "https://api.github.com/users/ropensci/subscriptions", ## "organizations_url": "https://api.github.com/users/ropensci/orgs", ## "repos_url": "https://api.github.com/users/ropensci/repos", ## "events_url": "https://api.github.com/users/ropensci/events{/privacy}", ## "received_events_url": "https://api.github.com/users/ropensci/received_events", ## "type": "Organization", ## "site_admin": false ## }, ## "html_url": "https://github.com/ropensci/ghql", ## "description": "GraphQL R client", ## "fork": false, ## "url": "https://api.github.com/repos/ropensci/ghql", ## "forks_url": "https://api.github.com/repos/ropensci/ghql/forks", ## "keys_url": "https://api.github.com/repos/ropensci/ghql/keys{/key_id}", ## "collaborators_url": "https://api.github.com/repos/ropensci/ghql/collaborators{/collaborator}", ## "teams_url": "https://api.github.com/repos/ropensci/ghql/teams", ## "hooks_url": "https://api.github.com/repos/ropensci/ghql/hooks", ## "issue_events_url": "https://api.github.com/repos/ropensci/ghql/issues/events{/number}", ## "events_url": "https://api.github.com/repos/ropensci/ghql/events", ## "assignees_url": "https://api.github.com/repos/ropensci/ghql/assignees{/user}", ## "branches_url": "https://api.github.com/repos/ropensci/ghql/branches{/branch}", ## "tags_url": "https://api.github.com/repos/ropensci/ghql/tags", ## "blobs_url": "https://api.github.com/repos/ropensci/ghql/git/blobs{/sha}", ## "git_tags_url": "https://api.github.com/repos/ropensci/ghql/git/tags{/sha}", ## "git_refs_url": "https://api.github.com/repos/ropensci/ghql/git/refs{/sha}", ## "trees_url": "https://api.github.com/repos/ropensci/ghql/git/trees{/sha}", ## "statuses_url": "https://api.github.com/repos/ropensci/ghql/statuses/{sha}", ## "languages_url": "https://api.github.com/repos/ropensci/ghql/languages", ## "stargazers_url": "https://api.github.com/repos/ropensci/ghql/stargazers", ## "contributors_url": "https://api.github.com/repos/ropensci/ghql/contributors", ## "subscribers_url": "https://api.github.com/repos/ropensci/ghql/subscribers", ## "subscription_url": "https://api.github.com/repos/ropensci/ghql/subscription", ## "commits_url": "https://api.github.com/repos/ropensci/ghql/commits{/sha}", ## "git_commits_url": "https://api.github.com/repos/ropensci/ghql/git/commits{/sha}", ## "comments_url": "https://api.github.com/repos/ropensci/ghql/comments{/number}", ## "issue_comment_url": "https://api.github.com/repos/ropensci/ghql/issues/comments{/number}", ## "contents_url": "https://api.github.com/repos/ropensci/ghql/contents/{+path}", ## "compare_url": "https://api.github.com/repos/ropensci/ghql/compare/{base}...{head}", ## "merges_url": "https://api.github.com/repos/ropensci/ghql/merges", ## "archive_url": "https://api.github.com/repos/ropensci/ghql/{archive_format}{/ref}", ## "downloads_url": "https://api.github.com/repos/ropensci/ghql/downloads", ## "issues_url": "https://api.github.com/repos/ropensci/ghql/issues{/number}", ## "pulls_url": "https://api.github.com/repos/ropensci/ghql/pulls{/number}", ## "milestones_url": "https://api.github.com/repos/ropensci/ghql/milestones{/number}", ## "notifications_url": "https://api.github.com/repos/ropensci/ghql/notifications{?since,all,participating}", ## "labels_url": "https://api.github.com/repos/ropensci/ghql/labels{/name}", ## "releases_url": "https://api.github.com/repos/ropensci/ghql/releases{/id}", ## "deployments_url": "https://api.github.com/repos/ropensci/ghql/deployments", ## "created_at": "2016-09-15T20:27:02Z", ## "updated_at": "2023-12-17T16:19:30Z", ## "pushed_at": "2023-01-03T09:08:34Z", ## "git_url": "git://github.com/ropensci/ghql.git", ## "ssh_url": "git@github.com:ropensci/ghql.git", ## "clone_url": "https://github.com/ropensci/ghql.git", ## "svn_url": "https://github.com/ropensci/ghql", ## "homepage": "https://docs.ropensci.org/ghql", ## "size": 148, ## "stargazers_count": 140, ## "watchers_count": 140, ## "language": "R", ## "has_issues": true, ## "has_projects": false, ## "has_downloads": true, ## "has_wiki": false, ## "has_pages": false, ## "has_discussions": true, ## "forks_count": 15, ## "mirror_url": {}, ## "archived": false, ## "disabled": false, ## "open_issues_count": 3, ## "license": { ## "key": "other", ## "name": "Other", ## "spdx_id": "NOASSERTION", ## "url": {}, ## "node_id": "MDc6TGljZW5zZTA=" ## }, ## "allow_forking": true, ## "is_template": false, ## "web_commit_signoff_required": false, ## "topics": [ ## "graphql", ## "graphql-api", ## "graphql-client", ## "r", ## "r-package", ## "rstats" ## ], ## "visibility": "public", ## "forks": 15, ## "open_issues": 3, ## "watchers": 140, ## "default_branch": "master", ## "permissions": { ## "admin": false, ## "maintain": false, ## "push": false, ## "triage": false, ## "pull": true ## } ## } ## ]
The API call returns a lot of extra information that we did not require. All we needed was
star[[1]]$full_name ## [1] "ropensci/ghql"
While GraphQL avoids the overfetching, querying the API is quite a lot more involved.
token <- Sys.getenv("GITHUB_TOKEN") con <- GraphqlClient$new( url = "https://api.github.com/graphql", headers = list(Authorization = paste0("Bearer ", token)) ) variables <- list( userid = params$userid ) con$load_schema() qry <- Query$new() qry$query( "mydata", ' query getContrib($userid: String!){ user(login:$userid){ avatarUrl login contributionsCollection( from: "2023-01-01T00:00:00.000Z" to: "2024-01-01T00:00:00.000Z") { totalCommitContributions totalIssueContributions totalRepositoryContributions totalRepositoriesWithContributedCommits totalPullRequestContributions totalPullRequestReviewContributions contributionCalendar { totalContributions weeks { contributionDays { contributionCount date } } } commitContributionsByRepository { contributions { totalCount } repository { name owner { login } isPrivate languages(first: 5, orderBy: {field: SIZE, direction: DESC}) { edges { size node { color name id } } } } } } } }' ) x <- con$exec(qry$queries$mydata, variables) res <- jsonlite::fromJSON(x)
This is far more complicated than querying a simple http endpoint. But it does only get exactly the data we want for the dashboard from our GitHub profile.
The final dashboard can be found in this repository. To personalize it, do the following:
.Renviron
as GITHUB_TOKENindex.qmd
, change the userid
parameter to your GitHub username.quarto render
If you are missing a logo of a programming language at appears as one of your most used, add a svg version to img/logos
.
I got mine from Wikipedia.
Happy GitHub Wrapping!