Test reporting "bar graph" feels a little hard to read

[cowboy]

I was looking at some of the test results, eg. https://test262.report/browse/language/export and found it a little difficult the read the stacked bar charts. With some very basic changes in the web inspector, I was able to change this:

To this:

I feel this change makes it easier to quickly see which browsers are failing a set of tests.

[boazsender]

This is something we've been going back and forth on. It's a good point. However, the intent behind stacking is to convey an overall interop score. Separating the engine results starts to feel more competitive. We have also discussed adding a total interop % for each line. But, if its too hard to read, we should rethink that.

CC @isaacdurazo

[cowboy]

If the goal is to promote the Interop score, can you display the Interop score alongside the current stacked bar charts, instead of the per-engine scores?

Also, it could be useful to show both sets of data. Maybe there could be a toggle button that defaults to "Interop Score" but can be changed to "Engine Score" mode, that shows the text you currently have, with the bars I've suggested.

And when the user toggles between the two modes, there could be fancy CSS animations!

[MattSurabian]

I think the graph change makes it much easier to read. Rather than a toggle and transition, I think the text to the left should be what drives home the overall interop score, maybe that text area should have some more visual treatment.

The main thought that swayed me against stacking is that it's not true that the "overall interop" score could ever be made to be 100% unless each individual is themselves at exactly 100%. You'd never see Chakra implement 150% for example. IMO the graph that includes the gray spaces for each browser makes the situation easier to immediately comprehend.

[tkellen]

I think it would convey shared progress and make the chart easily readable if you used @cowboy's treatment along with the addition of having the missing portion of each implementation's bar pulsing between like 0 and 50% opacity.

[Tiedye]

The stacked progress bar is useless as a visualization. If you want to see total internet adoption then the bars should be scaled by engine usage, or if you want to compare two engines you would want separate bars. There is no use case where this kind of chart would be useful, and it clutters the screen making the site more taxing to navigate. If the graph as is must be preserved, could there be an option to hide it?