Skip to content

Status Chart: Colorized counters, mobile-optimized #2845

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
StephanTLavavej merged 10 commits into from
Jul 8, 2022
Merged

Status Chart: Colorized counters, mobile-optimized #2845

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
d905cd8
Primer CSS 20.2.4.
StephanTLavavej Jul 3, 2022
4df9987
Weekly updates.
StephanTLavavej Jul 2, 2022
6f138c0
Adjust bounds.
StephanTLavavej Jul 1, 2022
828a044
Switch the GitHub timeframe to years.
StephanTLavavej Jul 2, 2022
6a605c7
Mobile-optimized viewport.
StephanTLavavej Jul 1, 2022
b4dce9c
Hide the legend when the chart is too narrow.
StephanTLavavej Jul 2, 2022
e980a5d
Extract chart titles to HTML.
StephanTLavavej Jul 2, 2022
f5e1202
Colorize counters to match datasets.
StephanTLavavej Jul 3, 2022
8900bb8
npm update
StephanTLavavej Jul 6, 2022
b37f7ca
npm install [dependencies]@latest
StephanTLavavej Jul 6, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 33 additions & 20 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,9 @@
<meta charset="utf-8" />
<!-- Copyright (c) Microsoft Corporation. -->
<!-- SPDX-License-Identifier: Apache-2.0 WITH LLVM-exception -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>STL Status Chart</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@primer/css@20.2.3/dist/primer.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@primer/css@20.2.4/dist/primer.min.css" />
<script async src="https://cdn.jsdelivr.net/npm/es-module-shims@1.5.8/dist/es-module-shims.min.js"
crossorigin="anonymous"></script>
<script type="importmap">
Expand All @@ -19,12 +20,13 @@
<script type="module" src="built/status_chart.mjs"></script>
</head>

<body class="container-xl markdown-body pt-2 px-3 pb-3">
<body class="container-xl markdown-body p-3">
<h1 id="status">STL Status Chart</h1>
<canvas id="statusChart"></canvas>
<button class="btn" id="moreHistory" type="button">More History</button>
<button class="btn" id="lessHistory" type="button">Less History</button>

<h1>Explanation</h1>
<h2>Explanation</h2>
<p>This tracks the progress of the <a href="https://github.com/microsoft/STL">microsoft/STL</a> repo.
For more info, read the <a href="https://github.com/microsoft/STL/wiki/Changelog">Changelog</a>.</p>

Expand All @@ -35,40 +37,45 @@ <h1>Explanation</h1>
<ul>
<li>Right axis:
<ul>
<li><span class="Counter">0</span>
<li><span class="Counter color-bg-severe-emphasis color-fg-on-emphasis">0</span>
C++17 STL features remaining to be implemented. This reached zero when we implemented
<a href="https://www.reddit.com/r/cpp/comments/dgj89g/cppcon_2019_stephan_t_lavavej_floatingpoint/"
rel="nofollow"><code>&lt;charconv&gt;</code>, C++17's final boss</a>.
</li>
<li><span class="Counter" id="currentValue-cxx20"></span>
<li><span class="Counter color-bg-sponsors-emphasis color-fg-on-emphasis"
id="currentValue-cxx20"></span>
<a href="https://github.com/microsoft/STL/issues?q=is%3Aopen+is%3Aissue+label%3Acxx20">
C++20 STL features remaining to be implemented.</a>
This increased whenever more features were voted into the Working Paper at
<a href="https://isocpp.org/std/meetings-and-participation" rel="nofollow">WG21 meetings</a>.
</li>
<li><span class="Counter" id="currentValue-cxx23"></span>
<li><span class="Counter color-bg-done-emphasis color-fg-on-emphasis" id="currentValue-cxx23"></span>
<a href="https://github.com/microsoft/STL/issues?q=is%3Aopen+is%3Aissue+label%3Acxx23">
C++23 STL features remaining to be implemented.</a> Also increases after WG21 meetings.
</li>
<li><span class="Counter" id="currentValue-lwg"></span> <a
<li><span class="Counter color-bg-success-emphasis color-fg-on-emphasis" id="currentValue-lwg"></span>
<a
href="https://github.com/microsoft/STL/issues?q=is%3Aopen+is%3Aissue+label%3ALWG+-label%3AvNext+-label%3Ablocked">
LWG issue resolutions remaining to be implemented.</a> Also increases after WG21 meetings.</li>
<li><span class="Counter" id="currentValue-pr"></span>
LWG issue resolutions remaining to be implemented.</a> Also increases after WG21 meetings.
</li>
<li><span class="Counter color-bg-accent-emphasis color-fg-on-emphasis" id="currentValue-pr"></span>
<a href="https://github.com/microsoft/STL/pulls">Open pull requests.</a>
</li>
</ul>
</li>
<li>Left axis:
<ul>
<li><span class="Counter" id="currentValue-vso"></span>
<li><span class="Counter color-fg-on-emphasis"
style="background-color:var(--color-scale-red-7) !important" id="currentValue-vso"></span>
Active "old bugs" in our Microsoft-internal database. We're keeping them active while
porting them to GitHub, unless they're discovered to be duplicates or already fixed.</li>
<li><span class="Counter" id="currentValue-bug"></span>
<li><span class="Counter color-bg-danger-emphasis color-fg-on-emphasis" id="currentValue-bug"></span>
<a href="https://github.com/microsoft/STL/issues?q=is%3Aopen+is%3Aissue+label%3Abug">
Open GitHub bugs.</a> That is, only GitHub issues that have
<span class="Label Label--danger">bug</span> labels.
</li>
<li><span class="Counter" id="currentValue-issue"></span> <a
<li><span class="Counter Counter--primary" id="currentValue-issue"></span>
<a
href="https://github.com/microsoft/STL/issues?q=is%3Aopen+is%3Aissue+-label%3Acxx20+-label%3Acxx23+-label%3ALWG">
Open GitHub issues.</a> That is, all GitHub issues including
<span class="Label Label--danger">bug</span>,
Expand All @@ -78,7 +85,8 @@ <h1>Explanation</h1>
<span class="Label Label--severe">cxx23</span>, and
<span class="Label Label--success">LWG</span> to avoid double-counting.
</li>
<li><span class="Counter" id="currentValue-libcxx"></span>
<li><span class="Counter color-bg-attention-emphasis color-fg-on-emphasis"
id="currentValue-libcxx"></span>
<a href="https://github.com/microsoft/STL/blob/main/tests/libcxx/expected_results.txt">
Skipped/failing tests in the libcxx test suite.</a> There are many reasons for such tests:
STL bugs, test bugs, compiler bugs, missing STL features, missing compiler features, etc.
Expand All @@ -96,40 +104,45 @@ <h1>Explanation</h1>

<hr />

<h1 id="age">Pull Request Age</h1>
<canvas id="ageChart"></canvas>

<h1>Explanation</h1>
<h2>Explanation</h2>
<ul>
<li>Left axis:
<ul>
<li><span class="Counter" id="currentValue-avg_age"></span>
<li><span class="Counter Counter--primary" id="currentValue-avg_age"></span>
The average age of open pull requests, in days.</li>
<li><span class="Counter" id="currentValue-avg_wait"></span>
<li><span class="Counter color-bg-sponsors-emphasis color-fg-on-emphasis"
id="currentValue-avg_wait"></span>
The average "waiting time" of open pull requests, in days. This measures how long it's been since a
maintainer submitted a review requesting changes. Any other activity doesn't reset this clock.</li>
</ul>
</li>
<li>Right axis:
<ul>
<li><span class="Counter" id="currentValue-sum_age"></span>
<li><span class="Counter"
style="background-color:var(--color-fg-default) !important; color: var(--color-canvas-default) !important;"
id="currentValue-sum_age"></span>
The combined age of open pull requests. The unit is PR-months (like kilowatt-hours);
for example, 5 PRs that were all opened 2 months ago have a combined age of 10 PR-months.</li>
<li><span class="Counter" id="currentValue-sum_wait"></span>
<li><span class="Counter color-bg-done-emphasis color-fg-on-emphasis" id="currentValue-sum_wait"></span>
The combined "waiting time" of open pull requests, in PR-months.</li>
</ul>
</li>
</ul>

<hr />

<h1 id="merge">Monthly Merged PRs</h1>
<canvas id="mergeChart"></canvas>

<h1>Explanation</h1>
<h2>Explanation</h2>
<p>For this chart, more is better. It includes merges into any branch
and excludes PRs that were closed without being merged, which are rare.</p>

<ul>
<li><span class="Counter" id="currentValue-merged"></span>
<li><span class="Counter color-bg-accent-emphasis color-fg-on-emphasis" id="currentValue-merged"></span>
Line: How many PRs have been merged over the past month.
This uses a "30 day" sliding window, with some smoothing:
<ul>
Expand Down
42 changes: 21 additions & 21 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
"@octokit/graphql": "^4.8.0",
"@types/cli-progress": "^3.11.0",
"@types/luxon": "^2.3.2",
"@types/node": "^18.0.0",
"@types/node": "^18.0.2",
"@types/yargs": "^17.0.10",
"chart.js": "^3.8.0",
"chartjs-adapter-luxon": "^1.1.0",
Expand Down
40 changes: 17 additions & 23 deletions src/status_chart.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -243,7 +243,7 @@ const timeframe_all: Timeframe = {
};
const timeframe_github: Timeframe = {
min: '2019-09-20', // first Friday after 2019-09-16
time: { unit: 'quarter' },
time: { unit: 'year' },
};
const timeframe_2021: Timeframe = {
min: '2021-01-01',
Expand Down Expand Up @@ -279,7 +279,7 @@ function legend_click_handler(_event: ChartEvent, legend_item: LegendItem, legen
update_url();
}

function make_common_options(title_text: string) {
function make_common_options() {
return {
animation: {
duration: 0,
Expand All @@ -300,6 +300,7 @@ function make_common_options(title_text: string) {
},
plugins: {
legend: {
display: true,
labels: {
color: get_css_property('--color-fg-default'),
},
Expand All @@ -309,14 +310,12 @@ function make_common_options(title_text: string) {
mode: 'nearest' as const,
intersect: false,
},
title: {
color: get_css_property('--color-fg-default'),
display: true,
font: {
size: 24,
},
text: title_text,
},
},
onResize: (chart: Chart, size: { width: number; height: number }) => {
if (chart.options.plugins?.legend === undefined) {
throw new Error('onResize was surprised by chart.options.');
}
chart.options.plugins.legend.display = size.width > 670;
},
};
}
Expand Down Expand Up @@ -373,25 +372,25 @@ function make_yAxis(position: 'left' | 'right', title_text: string, min: number,
}

const status_options = {
...make_common_options('STL Status Chart'),
...make_common_options(),
scales: {
x: make_xAxis(timeframes[timeframe_idx]),
largeAxis: make_yAxis('left', 'Bugs, Issues, Skipped Libcxx Tests', 0, 900, 100),
smallAxis: make_yAxis('right', 'Features, LWG Resolutions, Pull Requests', 0, 90, 10),
largeAxis: make_yAxis('left', 'Bugs, Issues, Skipped Libcxx Tests', 0, 800, 100),
smallAxis: make_yAxis('right', 'Features, LWG Resolutions, Pull Requests', 0, 80, 10),
},
};

const age_options = {
...make_common_options('Pull Request Age'),
...make_common_options(),
scales: {
x: make_xAxis(timeframe_github),
leftAxis: make_yAxis('left', 'Average Age, Average Wait (days)', 0, 600, 100),
rightAxis: make_yAxis('right', 'Combined Age, Combined Wait (PR-months)', 0, 600, 100),
leftAxis: make_yAxis('left', 'Average Age, Average Wait (days)', 0, 500, 100),
rightAxis: make_yAxis('right', 'Combined Age, Combined Wait (PR-months)', 0, 500, 100),
},
};

const merge_options = {
...make_common_options('Monthly Merged PRs'),
...make_common_options(),
scales: {
x: make_xAxis(timeframe_github),
mergeAxis: make_yAxis('right', 'PRs / month', 0, 80, 10),
Expand Down Expand Up @@ -436,16 +435,11 @@ function load_charts() {
const color_border_default = get_css_property('--color-border-default');

for (const chart of [status_chart, age_chart, merge_chart]) {
if (
chart.options.plugins?.legend?.labels === undefined ||
chart.options.plugins?.title === undefined ||
chart.options.scales === undefined
) {
if (chart.options.plugins?.legend?.labels === undefined || chart.options.scales === undefined) {
throw new Error('update_dark_mode() was surprised by chart.options.');
}

chart.options.plugins.legend.labels.color = color_fg_default;
chart.options.plugins.title.color = color_fg_default;

for (const [scaleId, scale] of Object.entries(chart.options.scales)) {
if (scale?.title === undefined || scale?.ticks === undefined || scale?.grid === undefined) {
Expand Down
1 change: 1 addition & 0 deletions src/weekly_table.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -273,4 +273,5 @@ export const weekly_table: WeeklyRow[] = [
{ date: '2022-06-10', vso: 172, libcxx: 614 },
{ date: '2022-06-17', vso: 173, libcxx: 614 },
{ date: '2022-06-24', vso: 177, libcxx: 614 },
{ date: '2022-07-01', vso: 175, libcxx: 614 },
];