Rep Attainment Table Stats Block for Vue

Edit REPS at the top of the file. Each rep is an id, a name, closed and quota in dollars, and last, last week's whole percent. This week's percent is the rounded share of quota, and the pill is that percent minus last. The team percent is everyone's closed dollars over everyone's quota.

From the sign of the point change. Above zero it is filled, foreground on the background colour, with an arrow toward the end and up. Below zero it is an outline with an arrow toward the end and down. Zero is an outline with a dash, so a flat week is not drawn as a fall. The number keeps its sign, and a minus is the true minus sign.

Ahead of last week is not always the point of the row: the bar already shows how close the rep is to quota, and the arrow shows the week. Colouring the pill would argue, on a churn-style number, the wrong way. Direction is the arrow and the sign. The sample has three reps ahead, two behind and one flat, and the heading counts only the three ahead.

A caption, hidden visually, names it with the rep count and says the pills are against last week. The column headers are column headers, and each rep's name is a row header.

Every column stays. The table is fixed-layout: the name takes about 38% and truncates, the change takes a narrow column so "vs last week" can wrap, and the bar keeps the rest. The closed and quota amounts wrap onto more than one line rather than pushing the table sideways.

The header and the table fade up once. The bars don't grow, and the badges don't pop in on their own. With reduced motion the fade is off. Hovering a row doesn't tint it, so the filled badge stays as readable as it is at rest.