Status Chart: Add GitHub PR/issue/bug data

[StephanTLavavej]

• Switch from Moment.js to date-fns.
  • date-fns loads faster and is more modern. This will make it easier to upgrade to Chart.js v3, which won't bundle Moment.js.
  • We need to adjust our format strings to use Unicode tokens, required by date-fns.
• Make the Toggle Timeframe button larger.
• Mention that the legend is clickable.
• Add 2020-07-10 row.
• Add historical GitHub PR/issue/bug data.
  • To avoid confusion, rename the key for old 'bugs' to 'vso'.
  • Add trailing commas to the table's key/value pairs.
  • Add/recolor datasets, and rename 'Bugs' to 'Old Bugs'.
  • Update axis labels to mention Issues and Pull Requests.
  • Add/update explanations. Reorder them to match the legend.

Live preview: stephantlavavej.github.io/STL/

I am aware of the potential colorblind accessibility issue of having both red and green lines. I'm unsure whether this is a major problem, or how best to mitigate it. The chart is interactive (unlike the old static screenshots of an Excel chart), so toggling line visibility will reveal which is which. Additionally, Chart.js has dashed line styles that also appear in the legend. I am considering making the Old Bugs and GitHub Bugs dashed in a future update.

Finally, I obtained this historical data by becoming even more of a JavaScript programmer! 😸

// Copyright (c) Microsoft Corporation.
// SPDX-License-Identifier: Apache-2.0 WITH LLVM-exception

const { DateTime } = require('luxon');
const { Octokit } = require('@octokit/rest');

function has_label(elem, label_name) {
    for (const label of elem['labels']) {
        if (label['name'] === label_name) {
            return true;
        }
    }
    return false;
}

const octokit = new Octokit({
    auth: 'FIXME_PERSONAL_ACCESS_TOKEN',
});

octokit.paginate(octokit.issues.listForRepo, {
    owner: 'microsoft',
    repo: 'STL',
    state: 'all',
}).then(api_output => {
    console.log(`Received ${api_output.length} PRs and issues.`);

    const begin = DateTime.fromISO('2019-08-30' + 'T23:00:00-07');
    const now = DateTime.local();

    for (let when = begin; when < now; when = when.plus({ weeks: 1 })) {
        let num_pr = 0;
        let num_issue = 0;
        let num_bug = 0;

        for (const element of api_output) {
            const opened = DateTime.fromISO(element['created_at']);
            const closed = DateTime.fromISO(element['closed_at'] ?? '2100-01-01');

            if (when < opened || closed < when) {
                // was not active; do nothing
            } else if (element['pull_request'] !== undefined) {
                ++num_pr;
            } else if (has_label(element, 'cxx20')) {
                // avoid double-counting C++20 Features and GitHub Issues
            } else {
                ++num_issue;

                if (has_label(element, 'bug')) {
                    ++num_bug;
                }
            }
        }

        console.log(`date: '${when.toISODate()}', pr: ${num_pr}, issue: ${num_issue}, bug: ${num_bug}`);
    }
});

[AlexGuteniev]

The chart is interactive (unlike the old static screenshots of an Excel chart), so toggling line visibility will reveal which is which.

This part is not very discoverable (I see colors, but still find it useful to hide axes). Explicit checkboxes could have been better.

Also maybe split legend by left axis / right axis part and a put small gap. So that it would look less like "only seven GihHub bugs"

[StephanTLavavej]

Thanks for reviewing, @AlexGuteniev - it really helps to have another perspective on how comprehensible this thing is.

This part is not very discoverable

Agreed. I'll mention that the legend is clickable.

Explicit checkboxes could have been better.

Yeah, the lack of affordance is an issue. That might be possible with Chart.js's legend configuration but that's beyond my current abilities. (I don't know if legend labels can be controlled separately from dataset labels.)

Also maybe split legend by left axis / right axis part and a put small gap.
So that it would look less like "only seven GitHub bugs"

Adding a gap is also beyond my abilities. (I don't see how to control horizontal padding, or any mechanism for creating two groups.)

I thought about the axis placement a lot - I want the features to occur first in the legend, both because they're "important" and because this gives them z-axis priority. However, I also prefer the feature/small axis to appear on the right, since that's where we naturally look for the current status. So there's left/right reversal that I'm not really fond of.

One response would be to admit defeat and simply generate two charts, instead of having two y-axes. (The same effect can be manually obtained by hiding all of the left-axis or right-axis lines, since display: 'auto' hides unused axes.) I like having the unified view, though. Another response would be to move the feature/small axis to the left (which wouldn't be too bad; they are intentionally scaled by exactly 10x).