Stats Overview Team Block for React

Edit DEPARTMENTS and FIGURES at the top of the file. A department is a name, its people a year ago (before) and its people now (now). The headcount figure, the title ("142 people, 30 more than a year ago"), the change beside every department and the length of every bar are computed from that list, so adding a department needs no other change. Countries, tenure and open roles are typed figures with a reading from a year ago, from which their change is computed.

Every bar is drawn against the largest department, so lengths compare across rows. The full-weight part is the people the department had a year ago, the lighter part is what it added since, and the number and arrow at the end of the row say the same in text. If a department shrinks, its bar shows only what is left, at full weight, and its change takes a minus sign and a downward arrow.

A rise in headcount is not always good news, and a fall in open roles is not always bad news, so the block doesn't judge. A change is an arrow and a sign in the foreground colour, with a true minus sign so screen readers say "minus". The bars use two weights of the foreground colour, so the block follows any theme.

The four figures are a list, and each is a description list of its own: the label, the value and the change come in that order, with the value drawn above the label. The departments are a list, each with an h3 for its name and its numbers as text. The bars are drawn parts, hidden from assistive technology.

The figures go two by two, and each department row puts its bar under the name and the number instead of between them, so nothing needs to scroll sideways at 320 pixels. The change labels keep the same width, so the numbers line up from row to row.

Yes. The values are wrapped in bdi and the signed changes keep their order, trend arrows do not mirror, and the bars fill from the start of the track, which is the right edge in a right-to-left page.