Collaboration Ring Graph Team Block for React

Edit PEOPLE and EDGES at the top of the file. A person is an id, a name and a role; the order of PEOPLE is the order around the ring, from the top, clockwise, and the positions are worked out for any count. An edge is two ids and the hours a week they spend working together; its chord is drawn thicker with more hours. The hours are example data: use any measure you can stand behind.

Each person on the ring is a radio button in a group named "Pick a person to see who they work with", so Tab moves into the ring and the arrow keys move around it, picking as they go. Each radio is named with the person's full name and role. The chords are a decoration and are hidden from assistive technology; the list beside the ring holds the same facts as text, and a polite line says who the picked person works with most.

Their chords go from a faint hairline to a strong line, wider for more hours; the avatars of the people they work with stay in tone and everyone else turns to an outline with muted text. The picked person is filled in with a ring. The list under the heading re-sorts to their collaborators, most hours first.

The ring scales with the screen, so the nine avatars sit on it at 320 pixels and up; below the ring comes its caption and then the list, under a hairline. Every list row has the same height and the list keeps room for four rows, so picking someone never changes the block's height, although the rows re-order.

A ring graph is a diagram, not text, so it keeps its own direction and the people stay where they are; the copy, the list and the figures around it follow the page direction. The first names on the ring are set left to right, the way a name in a diagram usually is.

Yes. The ring is built from native radio buttons and plain markup, so the Ark, Base UI, Radix and React Aria versions differ only in the import paths, and the Vue, Svelte and Solid ports behave the same.