<bmx-org-chart>
A hierarchy drawn as a diagram, with the curved connectors people know.
The list is flat, with parent references — which is what a SQL result, an HR export or a
Razor model already is. A nested
children array is the prettier literal and would make every
consumer convert their data on each render, so this component takes one shape rather than both.
initial-depth opens the first generations and leaves the rest behind a counter, because a chart
that opens with eleven hundred boxes on it has answered no question anybody had.
Tab into it once, then use the arrows. ↓ and ↑ walk the people
in reading order; → opens a closed branch and, on an open one, steps into it;
← closes an open branch and, on anything else, goes up to the manager; * opens a
whole generation; and typing a name jumps to it. That is the tree pattern every file explorer already taught
the reader, and it is why this is a
tree rather than a diagram with sixteen tab stops in it.
The connectors are decoration and the nesting is the structure. There is no role for
“boxes joined by curves”, and nobody can follow a line with their ears — so the SVG layer is
aria-hidden and the boxes are a real nested tree reporting aria-level,
aria-posinset, aria-setsize and aria-expanded. A relationship drawn in a
hidden layer has to be stated somewhere that is not hidden.
orientation="horizontal" runs the generations left to right, which is what a deep, narrow
hierarchy wants: a chart eleven levels deep and three wide is unreadable drawn downwards and obvious drawn
across. The connectors' anchors follow — they are chosen by the direction of travel rather than fixed to
the bottom and top edges — and under RTL the whole thing mirrors, curves included, because an SVG path
does not flip with a logical property.
Width is declared and height is measured.
node-width keeps the boxes uniform,
which is what makes a chart tidy, and the component writes it into its own CSS so the box drawn and the box
laid out are the same box. The height is measured off the rendered nodes instead, because your font, your
padding and a job title that wraps to two lines all change it — and a layout given a height the boxes do
not have draws them overlapping. Everything about how a node looks is CSS: part="node",
part="node-label", part="node-detail" and a dozen custom properties.
Every property, event and method: https://docs.binarymission.co.uk/webcomponents/bmx/bmx-org-chart.html