five-for-the-future
five-for-the-future copied to clipboard
WordPress
Public stats reports
The data in #37 should be available via public reports that anyone can view, similar to https://central.wordcamp.org/reports/
It should be pulled from MC, rather than the old 5ftf_record_snapshot post type (see #200)
Since we're mainly focused on progress, maybe just have a single page that displays a line chart for each of the metrics in #37?
I think chart.js might be a good framework to use, since it's lean.
I don't think we'll need it for this particular use case, but it also has a React wrapper that could come in handy if we want to use it in the future for other things.
Any thoughts on that or alternative ideas?
The accessibility info for chart.js isn't great. I'd rather see us use something that renders SVG so we can give it semantic markup. Do we have a list of what specific charts we want to render?
Off the top of my head: I've used d3 (which seems overkill here, but lets you add all the necessary a11y markup) and I see w.org/about/stats/ uses google charts (haven't checked the a11y there).
Ah, that's a great point about a11y. I agree that D3 would be overkill. I'm hesitant to use Google Charts if it has to load from their domain (similar performance/security reasons to Google Fonts in Core), and it could also have a11y issues, but it's worth looking into more. It might be able to be done locally and have good a11y.
Ideally, I'd like to find something that's very lean, since I don't think we'll need many features at all. Maybe only line charts? I'll depend on what we end up tracking in #37, but I think it's safe to assume it'd only be a few of the basic types.
The Chart.js docs claim that they're accessible as long as we add aria-label, role, and provide a text fallback, which seems simple enough. What are the pros/cons of that vs an SVG solution? It seems like we'd want to provide a text fallback even with an SVG, unless screen readers can parse the specific data and labels out in an intelligent way, which seems unlikely at first glance.
The Chart.js docs claim that they're accessible as long as we add aria-label, role, and provide a text fallback,
Right, and if we have to we can do that, but screen readers can navigate through an SVG chart if it's coded well. We could pretend the charts are images and just "write good alt text", but that's not really an equivalent experience for screen reader users.
unless screen readers can parse the specific data and labels out in an intelligent way
They can :) We just need to write the markup correctly. Screen readers parse SVG just like HTML. We use the same concepts as HTML too — using aria to mark each line-group as a region, so that each line's data is grouped together, aria-labels to give each point a readable value, and aria-hidden to hide the display-only stuff (it's slightly more complicated than that, but it's all possible).
Highcharts, sadly not GPL, has a good example of a line chart with screen-reader-friendly markup. But we can replicate this with any SVG-generating library (I have with d3).
That sounds like it could be more work if we have to do it ourselves, but if there's a library that will do all of it for us (and meets our other criteria), then that works for me 👍
Rough idea for the page structure:
[intro text if any is desired]
total number of pledged companies
[line chart]
total number of pledged contributors
[line chart]
total number of pledged hours
[line chart]
total number of pledged contributors per team
[ dropdown w/ all team names ]
[ when a team name is picked from the dropdown, show a line chart w/ the data for that team ]
Any thoughts? cc @melchoyce
So I think d3 might be our best bet after all— I don't see anything else out there that focuses just on line charts, and actually it bundles down decently (I put together a quick line chart, and the total JS bundle was 86.3 KiB, which is smaller than that chart.js package).
@melchoyce What we need from you: any thoughts on chart style (axes, legend, etc), and a color or a set of colors for use in the line charts — each chart only has one line, so no need to worry about color contrast between the lines.
We could just use wp-blue… or, for the number of contributors per team, we could use the badge color for that team? It'll still be one line on a chart (with a dropdown, like this example).
There are 4 charts, and they'll only have one line each. The last chart, "total number of pledged contributors per team" is slightly different because it will have one line for the selected team, and you can select different teams (but it will only show one team at a time).
A bunch of the team colors don't pass AA, sadly.
For all the regular line charts, let's use WordPress Blue (#0073AA). It'll be difficult to create enough colors for the teams chart, especially taking colorblindness and contrast into consideration. We could rotate between 3–5 colors, though? Team A has color 1, Team B has color 2, Team C has color 3, Team D has color 1, etc.
For the axes/legends/etc. — let's have the x and y axes lines use #6C7781, legends use #32373C, and if we can, add horizontal lines at each data point on the y axis, like this? I struggle with all varieties of charts, but find having a guiding line helps me trace points back their data.
Those could use #d7dade.