The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Published
Edited
Jul 21, 2021
4 forks
Importers
7 stars
GitHub API StarterGitHub API ExplorerGitHub: Pull Request VisualizerGitHub Suggested ReviewersIntegration Test DurationDeveloper Workflows: Integration Test Duration TutorialIntegration Test FlakinessCollapsible Github TreeGitHub Stargazer HistoryGitHub Flat Viewer in ObservableThe D3 Github Network, 2013 - 2021Software Engineering Visualization with GitHub's APIHow to Import a Dataset from GitHubPublic Engagement with NASA's Open-Source Code Projects on Githubgithub pull request analysisZoomable Circle Packing - Files in a Github Repo by SizeGithub Files Graph
GitHub API Helpers
Also listed in…
Template Components
repo = "sveltejs/svelte"
workflow = 196961
workflows = fetchWorkflows(repo)
runs = fetchRuns(repo, workflow, {runsLimit: 5})
jobs = parseJobs(runs)
viewof branch = Inputs.select(new Set(runs.map(r => r.head_branch)))
jobs.filter(d => d.run.head_branch === branch)
sampleWorkflows = FileAttachment("workflows@1.json").json()
sampleRuns = FileAttachment("runs.json").json()
sampleJobs = parseJobs(sampleRuns)
hasApiKey = {
try {
Secret("GITHUB_ACCESS_TOKEN");
return true;
} catch {
return false;
}
}
mutable rateLimit = null
// Makes an authenticated request if token is available, and updates the rate limit info
fetchGithubResponse = async (path, params, options = {}) => {
params = new URLSearchParams(params);
const {headers, ...otherOptions} = options;
const res = await fetch(`https://api.github.com${path}?${params}`, {
headers: {
...(hasApiKey && {authorization: `token ${Secret("GITHUB_ACCESS_TOKEN")}`}),
accept: 'application/vnd.github.v3+json',
...headers
},
...otherOptions
});
mutable rateLimit = {
remaining: +res.headers.get("X-RateLimit-Remaining"),
reset: new Date(res.headers.get("X-RateLimit-Reset") * 1000)
};
return res;
}
// Convenience function to skip right to the json response
fetchGithub = async (...args) => {
const res = await fetchGithubResponse(...args);
return res.ok ? res.json() : false;
}
fetchWorkflows = async (repo, {limit = 50} = {}) =>
(await fetchGithub(`/repos/${repo}/actions/workflows?per_page=${limit}`)).workflows
// This async generator progressively yields more jobs as they're fetched
fetchRuns = async function* (
repo,
workflow,
{ runsLimit = hasApiKey ? 50 : 20, jobsLimit = 100 } = {}
) {
const runs = (
await fetchGithub(`/repos/${repo}/actions/workflows/${workflow}/runs`, {
per_page: runsLimit
})
).workflow_runs;
if (!runs) {
return undefined;
} else {
for await (const [run, { jobs }] of runs.map(async (r) => [
r,
await fetchGithub(r.jobs_url.replace("https://api.github.com", ""), {
filter: "all",
per_page: jobsLimit
})
])) {
run.jobs = jobs;
yield runs;
}
}
}
// There are multiple jobs per run; this flattens them to return tidy data
parseJobs = runs => {
if(!runs) return undefined;
const retries = [];
return runs.flatMap(run => (run.jobs || []).map(j => {
const name = j.name;
const { run_number } = run;
const retry = retries[[run_number, name]] = (retries[[run_number, name]] || 0) + 1;
const started_at = new Date(j.started_at);
const completed_at = new Date(j.completed_at);
return {
...j,
name,
run,
run_number: `${run_number}.${retry}`,
message: run.head_commit.message,
author: run.head_commit.author.name,
branch: run.head_branch,// === 'main' ? 'main' : 'other',
started_at,
completed_at,
minutes: (j.completed_at && j.started_at)
? (completed_at - started_at) / 1000 / 60
: undefined
}
}))
}
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.