network-flow(donut): let the legend shrink to a row of chips

At the tightest size a dashboard allows there is no width for both a ring
and a table of numbers: the values were already down to a few characters
and the names to an ellipsis, which is a legend that names nothing. A
reader at that size is asking which categories are in play, not what each
one weighs, so the compact legend carries names only and the ring moves
above it.

Stacked, height is what bounds the ring, so the 40%-of-width cap does not
carry over - it would starve the ring for a width nothing else is competing
for any more. Both figure sizes now come from one custom property, so the
two layouts cannot drift apart.

The chips are the graphing compact legend's, minus the parts that answer a
different question: they wrap instead of scrolling sideways, because a
horizontal scroll hides categories in a widget nobody scrolls, and there is
no middle-truncation arithmetic, because that exists to save metric-name
suffixes and these names are protocols and applications.

The mode arrives as a prop defaulting to the table, so nothing selects the
chips yet except the component library page and the tests.

CMK-37876

Change-Id: I128991f213ea58a4d6007844187b2dfb96331716