The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Public
Edited
Aug 9, 2023
45 forks
34 stars
repo = "microsoft/Typescript"
isSample = repo === "microsoft/Typescript" && !hasApiKey
// Once authenticated:
// pullRequests = getPullRequests()
pullRequests = isSample ? samplePullRequests : getPullRequests()
// Once authenticated:
// allEvents = getAllEvents(pullRequests)
allEvents = isSample ? sampleEvents : getAllEvents(pullRequests)
async function* getAllEvents(pullRequests) {
const events = [];
for (let pr of pullRequests) {
const {number} = pr;
const prData = await getPRDataWithEvents(pr);
events.push.apply(events, prData)
yield events;
}
return events;
}
// retrieves all relevant information for a pull request
async function getPRDataWithEvents(pr) {
const {number} = pr;
// used to calculate the # of changes in the PR
const files = await getFiles(number);
const events = await getEvents(number);
const formattedPr = formatPr(pr);
// categorize the PR into a state
const category = categorize(pr, events);
// augment each event with necessary information from the original pull request
return events.map((e) => {
const formattedEvent = formatEvents(e);
return {
...formattedPr,
...formattedEvent,
changes: numChanges(files),
category
}
})
}
async function getPullRequests() {
return (await octokit.request(`GET /repos/${repo}/pulls`, {
per_page, state:
state,
sort: "long-running"}
)).data
}
// gets the files changed in a Pull Request
async function getFiles(number) {
return (await octokit.request(`GET /repos/${repo}/pulls/${number}/files`, {
per_page: 100
})).data;
}
// gets the timeline events in a Pull Request
async function getEvents(number) {
return (await octokit.request(`GET /repos/${repo}/issues/${number}/timeline`, {
per_page: 100,
mediaType: {
previews: [
'mockingbird'
]
}})).data
}
timelineGraph = (timelineEvents) => {
if (timelineEvents.length === 0) return 'Waiting for data...'
const handlers = {
click: (event, {datum}) => window.open(`https://github.com/${repo}/pull/${datum.number}`, "_blank"),
pointerenter: function(event, {datum}) {
if (datum.event === "reviewed" || datum.event === "review_requested") mutable selectedEvent = datum;
d3.select(event.target).style("cursor", "pointer");
},
pointerout: function(event, {datum}) {
d3.select(event.target).style("cursor", "default");
mutable selectedEvent = null;
},
};
return addTooltips(
Plot.plot({
y: {
ticks: [],
label: `PR #`,
type: "band",
},
x: {
axis: "bottom",
label: "Time →",
domain: d3.extent(timelineEvents.map(d => d.date))
},
r: {
domain: d3.extent(timelineEvents.map(d => d.changes)),
range: [3, 8]
},
width: width * .8,
color,
marginTop: 10,
marginLeft: 50,
marks: [
// Plot.ruleY(timelineEvents, Plot.selectFirst({ y: "number", z:"number", stroke: "lightgray" })),
Plot.link(timelineEvents, Plot.selectFirst({
y1: "number",
y2: "number",
x1: "date",
x2: new Date(),
z:"number",
stroke: "#eeeeee"
})),
on(
Plot.tickX(timelineEvents,
{
x: "date", y: "number", stroke: "event",
filter: e => e.event === "reviewed" || e.event === "review_requested" | e.event === "commented",
title: d => extractTooltip(d),
strokeWidth: 1.5
}
), handlers
),
on(
Plot.dot(timelineEvents,
{
x: "date", y: "number", fill: "event",
filter: e => e.event === "committed",
title: d => extractTooltip(d)
}),
handlers
),
on(
Plot.text(timelineEvents, Plot.selectFirst({
x: "date",
y: "number",
z: "number",
text: "number",
dx: -30,
fontSize: 13,
title: d => `${d.title}`
})),
handlers
)
],
style: { paddingRight: 150, overflow: "visible" }
})
, {stroke: "grey" }
)
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
