react-cheminfo 0.28.0 → 0.30.0

package/src/chart/core/legendBox.ts

@@ -0,0 +1,263 @@
+/**
+ * Where a legend sits, and where every one of its rows sits inside it.
+ *
+ * A legend whose rows carry a control is drawn **twice, in two technologies**,
+ * and that is what this module exists for. The picture has to be SVG, because
+ * an export clones the chart's own `SVGSVGElement` and anything living beside
+ * it in a `<div>` is missing from every figure while looking perfectly right on
+ * screen; a close cross has to be HTML, because an SVG `×` would be cloned into
+ * that same figure as a dead glyph, and a `pointerdown` on the SVG root is read
+ * as a chart gesture rather than as a click on a row. Two renderings of one box
+ * are two chances to place a row differently, so the arithmetic has exactly one
+ * owner and neither of them does any of its own — a cross half a row off the
+ * name beside it is a cross that closes the wrong trace.
+ *
+ * Everything is measured from character counts rather than from the DOM. The
+ * box is worked out during render, where a `getComputedTextLength` would need a
+ * layout pass that has not happened yet, and the exported clone gets no layout
+ * at all — so a legend that measured itself would come out a different size in
+ * the figure than on screen. `CHARACTER_WIDTH` is a conservative average
+ * advance for the face at `FONT_SIZE`: a name that overruns it by a character
+ * is a smaller problem than a picture that disagrees with itself.
+ */
+
+import type { PlotRect } from './chartGeometry.ts';
+
+/** Where a legend sits, and where each of its rows sits inside it. */
+export interface LegendBox {
+  /** The box's left edge, in the plot's own pixels. */
+  left: number;
+  /** Its top edge. */
+  top: number;
+  /** How wide it is. */
+  width: number;
+  /** How tall it is. */
+  height: number;
+  /** The rows it draws, in order. */
+  rows: readonly LegendRow[];
+  /** How many entries were left out, counted on a final row. 0 when none were. */
+  hidden: number;
+}
+
+/** One row of a legend, placed. */
+export interface LegendRow {
+  /** Identity of the entry it draws. */
+  id: string;
+  /** The row's own top edge. */
+  top: number;
+  /** How tall it is. */
+  height: number;
+  /** The vertical middle of the row, which is what a swatch and a baseline sit on. */
+  middle: number;
+}
+
+/** What a legend has to know about an entry to give it room. */
+export interface LegendBoxEntry {
+  /** Identity, which is what the list is keyed on. */
+  id: string;
+  /** What it is called. */
+  name: string;
+  /**
+   * A 1-based number written before the name.
+   * @default undefined
+   */
+  index?: number;
+  /**
+   * A short remark written at the right of the row.
+   * @default undefined
+   */
+  note?: string;
+}
+
+/** How a legend is measured. */
+export interface LegendBoxOptions {
+  /**
+   * How many entries are named before the rest are counted instead.
+   * @default 8
+   */
+  limit?: number;
+  /**
+   * Whether a column is left at the right of each row for a control.
+   * @default false
+   */
+  closable?: boolean;
+}
+
+/**
+ * Measure the legend a set of entries asks for, and place its rows.
+ *
+ * Top right of the plot, because that is where a trace leaves room: a curve
+ * rises from the baseline and the tallest peak is rarely at the right-hand
+ * edge. Over the plot rather than in a gutter beside it, so that naming the
+ * traces never narrows the measurement they are drawn in.
+ *
+ * Past `limit` the remaining entries are counted rather than named — a legend
+ * taller than the plot hides the measurement it is explaining, which is the
+ * failure a scrollbar in a legend admits to. The count is a row of its own, so
+ * it is paid for in `height` while staying out of `rows`: nothing draws a
+ * swatch or a cross for it, and it names no entry to key on.
+ * @param entries - The traces to name, in the order they are drawn. Only the
+ * first `limit` of them get a row; the rest are counted.
+ * @param plot - The plot the legend is placed against.
+ * @param options - How many are named, and whether a control column is kept.
+ * @returns The box and its rows, in the plot's own pixels.
+ */
+export function legendBox(
+  entries: readonly LegendBoxEntry[],
+  plot: PlotRect,
+  options: LegendBoxOptions = {},
+): LegendBox {
+  const { limit = 8, closable = false } = options;
+  // Never taller than the plot it is drawn over. A legend covers the
+  // measurement it explains, so one that overran its plot would hide the axis
+  // under it — and on a pane of a stack that axis is the only one the whole
+  // stack has. The surplus is counted on a last row exactly as `limit`'s is, so
+  // nothing goes missing; it is only no longer named.
+  const room = Math.max(
+    1,
+    Math.floor((plot.height - MARGIN * 2 - PADDING * 2) / ROW_HEIGHT),
+  );
+  const asked = Math.min(Math.max(0, limit), entries.length);
+  // A row is spent on the count whenever anything is left out, so the test is
+  // against `asked + 1` in that case — otherwise a legend of exactly `room`
+  // names would grow a counted row and overflow by one after all.
+  const overflows = asked < entries.length ? asked + 1 > room : asked > room;
+  const named = overflows ? Math.max(0, room - 1) : asked;
+  const shown = entries.slice(0, named);
+  const hidden = entries.length - shown.length;
+
+  const width = boxWidth(shown, hidden, closable);
+  const rowCount = shown.length + (hidden > 0 ? 1 : 0);
+  const height = rowCount * ROW_HEIGHT + PADDING * 2;
+  const left = plot.left + plot.width - width - MARGIN;
+  const top = plot.top + MARGIN;
+
+  const rows: LegendRow[] = [];
+  for (const [index, entry] of shown.entries()) {
+    const rowTop = top + PADDING + index * ROW_HEIGHT;
+    rows.push({
+      id: entry.id,
+      top: rowTop,
+      height: ROW_HEIGHT,
+      middle: rowTop + ROW_HEIGHT / 2,
+    });
+  }
+
+  return { left, top, width, height, rows, hidden };
+}
+
+/**
+ * What a row of the legend actually reads, index and all.
+ *
+ * The number goes in front of the name rather than beside it because the
+ * palette hands out six hues and a seventh trace legitimately repeats one, so
+ * the number is what tells two blue traces apart — and it has to be the first
+ * thing on the row for that to work while the eye is running down the column.
+ * Written here rather than at each drawing site so that whatever measured the
+ * row and whatever draws it agree on the string, to the character.
+ * @param entry - The entry the row names.
+ * @returns The text of the row, without its note.
+ */
+export function legendLabel(entry: LegendBoxEntry): string {
+  return entry.index === undefined
+    ? entry.name
+    : `${entry.index}${INDEX_SEPARATOR}${entry.name}`;
+}
+
+/**
+ * What the final row reads when entries were left out.
+ * @param hidden - How many were not named.
+ * @returns The text of that row.
+ */
+export function hiddenLabel(hidden: number): string {
+  return `+ ${hidden} more`;
+}
+
+/**
+ * The entries a legend actually draws a row for.
+ *
+ * Two rules in one answer, and three drawings depend on both of them agreeing:
+ * the SVG legend, the HTML row layer placed over it, and whatever else is
+ * written along the top of the same plot and has to keep clear of the box. A
+ * trace with no name is not given a row — an unnamed curve in a legend is a
+ * swatch and nothing else, which is worse than being left out — and below
+ * `minimumEntries` names no legend is drawn at all, since the axis title
+ * already says what a single curve is.
+ * @param entries - The traces, in the order they are drawn.
+ * @param minimumEntries - How few named traces are still worth a legend.
+ * @returns The entries that get a row, empty where none is drawn.
+ */
+export function legendNames<Entry extends LegendBoxEntry>(
+  entries: readonly Entry[],
+  minimumEntries = 2,
+): Entry[] {
+  const named = entries.filter((entry) => entry.name !== '');
+  return named.length < minimumEntries ? [] : named;
+}
+
+/**
+ * How wide the box has to be to hold the longest row it is drawing.
+ *
+ * The name column is sized on the longest label — the counted row included,
+ * since it is written in the same column — and clamped at
+ * `MAXIMUM_CHARACTERS`, past which a name simply overruns rather than dragging
+ * the box across the plot it is standing on. A note is a column of its own at
+ * the right, so a long note never pushes the names about, and the control
+ * column is a fixed strip because a cross is one glyph whatever the row says.
+ * @param entries - The rows being drawn.
+ * @param hidden - How many were left out, which the final row counts.
+ * @param closable - Whether a control column is kept at the right.
+ * @returns The width in pixels.
+ */
+function boxWidth(
+  entries: readonly LegendBoxEntry[],
+  hidden: number,
+  closable: boolean,
+): number {
+  let longest = hidden > 0 ? hiddenLabel(hidden).length : 0;
+  let longestNote = 0;
+  for (const entry of entries) {
+    const label = legendLabel(entry).length;
+    if (label > longest) longest = label;
+    const note = entry.note === undefined ? 0 : entry.note.length;
+    if (note > longestNote) longestNote = note;
+  }
+  const text = Math.min(longest, MAXIMUM_CHARACTERS) * CHARACTER_WIDTH;
+  const note =
+    longestNote === 0
+      ? 0
+      : GAP + Math.min(longestNote, MAXIMUM_CHARACTERS) * CHARACTER_WIDTH;
+  return (
+    PADDING * 2 + SWATCH + GAP + text + note + (closable ? CLOSE_COLUMN : 0)
+  );
+}
+
+/** The line of colour that stands for the curve. */
+export const SWATCH = 14;
+
+/** Between the swatch and the name, and between the name and a note. */
+export const GAP = 5;
+
+/** Inside the box, on every side. */
+export const PADDING = 6;
+
+/** One row of the legend. */
+export const ROW_HEIGHT = 14;
+
+/** Between the box and the edge of the plot. */
+export const MARGIN = 6;
+
+/** The face the names are written at. */
+export const FONT_SIZE = 11;
+
+/** About how wide one character is at that size. */
+export const CHARACTER_WIDTH = 6.1;
+
+/** The longest name the box is widened for; past it a name simply overruns. */
+export const MAXIMUM_CHARACTERS = 28;
+
+/** The strip kept at the right of a row for a control, when one is asked for. */
+export const CLOSE_COLUMN = 12;
+
+/** Between the index and the name it numbers. */
+const INDEX_SEPARATOR = ' · ';

package/src/chart/core/selectionGeometry.ts

@@ -0,0 +1,68 @@
+/**
+ * The rectangle a drag sweeps out, in the pixels it is drawn in.
+ *
+ * The preview and the release are two readings of one gesture, and they have to
+ * agree: a rectangle that promises a window the release then refuses teaches a
+ * user that the chart is unreliable, which is a far more expensive mistake than
+ * a preview that is a pixel out. So the same two tests decide both — the drag is
+ * pulled back inside the plot and measured against `MINIMUM_DRAG` here exactly
+ * as `zoomedDomain` does it, and the height comes from the answer
+ * `zoomSelection` already worked out rather than from a second one.
+ */
+
+import { clamp } from '../../format/core/clamp.ts';
+
+import type { PlotRect } from './chartGeometry.ts';
+import type { ZoomSelection } from './zoomDomain.ts';
+import { MINIMUM_DRAG } from './zoomDomain.ts';
+
+/** A rectangle in the user units of the SVG. */
+export interface SelectionRectangle {
+  /** Its left edge. */
+  x: number;
+  /** Its top edge. */
+  y: number;
+  /** How wide it is. */
+  width: number;
+  /** How tall it is. */
+  height: number;
+}
+
+/**
+ * The rectangle to draw for a drag being made.
+ *
+ * A drag that takes the y axis with it is drawn at the height of the drag
+ * itself, and one that asks for the x axis alone spans the whole plot.
+ * That is the gesture announcing itself before the button is let go: the
+ * rectangle changing shape as the pointer crosses the baseline is the only
+ * warning a user gets that the release is about to move both axes, and it is one
+ * they can still act on.
+ *
+ * A drag too short to zoom draws nothing at all. Below `MINIMUM_DRAG` the
+ * release does nothing — most clicks made on a trackpad wobble by a pixel or two
+ * — and a rectangle flashing up on every click would say that something
+ * happened.
+ * @param selection - The drag being made, `null` when none is.
+ * @param plot - Where the plot sits inside the SVG, which the drag is confined
+ * to.
+ * @returns The rectangle, `null` when there is nothing to draw.
+ */
+export function selectionRectangle(
+  selection: ZoomSelection | null,
+  plot: PlotRect,
+): SelectionRectangle | null {
+  if (selection === null) return null;
+
+  const { fromX, toX, fromY, toY, zoomsYAxis } = selection;
+  const left = clamp(Math.min(fromX, toX), plot.left, plot.right);
+  const right = clamp(Math.max(fromX, toX), plot.left, plot.right);
+  const width = right - left;
+  if (!(width >= MINIMUM_DRAG)) return null;
+
+  if (!zoomsYAxis) {
+    return { x: left, y: plot.top, width, height: plot.height };
+  }
+  const top = clamp(Math.min(fromY, toY), plot.top, plot.bottom);
+  const bottom = clamp(Math.max(fromY, toY), plot.top, plot.bottom);
+  return { x: left, y: top, width, height: bottom - top };
+}

package/src/chart/core/spectrumColor.ts

@@ -0,0 +1,129 @@
+import { CHART_SERIES_COLORS } from './chartPalette.ts';
+
+/** The universal set's yellow, which a one-pixel stick cannot be drawn in. */
+const CHART_YELLOW = '#f0e442';
+
+/** Its neutral dark, which is already the ink the axes are drawn in. */
+const CHART_NEUTRAL = '#4d4d4d';
+
+/**
+ * The two of the eight a line has to do without.
+ *
+ * Above the palette it filters rather than below it with the other helpers:
+ * the list is built as the module is evaluated, so anything it reads has to
+ * exist by then.
+ */
+const NOT_FOR_A_LINE = new Set([CHART_YELLOW, CHART_NEUTRAL]);
+
+/**
+ * The colours spectra are told apart by, in two tiers.
+ *
+ * A viewer holds a handful of spectra at a time — a measurement, a reference,
+ * a predicted distribution — so the palette is short and every hue in it is
+ * distinguishable at the width of a one-pixel stick, which is all a centroid
+ * ever is. It is deliberately not a generated scale: named colours stay the same
+ * from one session to the next, and a chemist who calls the blue one "the blank"
+ * is still right tomorrow.
+ *
+ * A colour is the only thing telling one trace from another once they overlap,
+ * so a palette that fails for the one man in twelve with a colour vision
+ * deficiency fails at the only job it has. The matplotlib hues this used to hold
+ * put a red beside a green — the very pair a deuteranope reads as one colour,
+ * and the pair a blank and its sample are most often drawn in.
+ *
+ * That is why there are two tiers rather than one long list. Okabe and Ito's set
+ * is short because it holds only colours that survive **every** deficiency at
+ * once, including the rarer ones where two channels are affected; the Color
+ * Universal Design accent set that the same work grew into is longer because it
+ * asks only that a reader missing **one** channel can tell its members apart.
+ * Both are true, and which one is wanted depends on who is reading the chart, so
+ * the short set is what a chart hands out by itself and the longer one is what a
+ * reader may reach for. Nothing picks a colour out of the second tier on anyone's
+ * behalf.
+ *
+ * Every viewer offers both tiers and none of them keeps a set of its own: two
+ * charts on one page have to name a spectrum the same way, and a palette copied
+ * into a second package is a palette that drifts from the first.
+ */
+
+/**
+ * The colours a spectrum is drawn in, in the order they are handed out.
+ *
+ * Okabe and Ito's universal set exactly as {@link CHART_SERIES_COLORS} holds
+ * it, less the two a line cannot use: their yellow, which is faint on a white
+ * plot at the width of a stick, and the neutral dark, which is already the ink
+ * of the axes and the labels. Both are still offered, one tier down.
+ *
+ * Derived rather than written out, because a palette copied into a second
+ * place is a palette that drifts from the first: a scatter plot and a spectrum
+ * on the same page have to call the same blue the same blue.
+ *
+ * Blue and vermillion come first because the commonest use is two spectra
+ * compared — the pair that reads most clearly, and the pair a mirror plot
+ * expects.
+ */
+export const SPECTRUM_COLORS: readonly string[] = CHART_SERIES_COLORS.filter(
+  (color) => !NOT_FOR_A_LINE.has(color),
+);
+
+export const EXTRA_SPECTRUM_COLORS: readonly string[] = [
+  '#000000', // black
+  CHART_YELLOW,
+  '#ff8082', // pink
+  '#990099', // purple
+  '#804000', // brown
+  '#7f878f', // grey
+];
+
+/**
+ * Both tiers in one list, the handed-out six first.
+ *
+ * What a picker shows. The order is the tiers in order and never sorted by hue:
+ * a reader who has learnt that the first chip is the blue their blank is drawn
+ * in must find it in the same place in every viewer, and the row a colour sits
+ * in is itself the answer to "will this survive whoever reads the figure".
+ */
+export const ALL_SPECTRUM_COLORS: readonly string[] = [
+  ...SPECTRUM_COLORS,
+  ...EXTRA_SPECTRUM_COLORS,
+];
+
+/**
+ * The colour to give the next spectrum, given the ones already in use.
+ *
+ * The lowest unused hue, never one derived from how many spectra there are:
+ * dropping the second of three and loading another would otherwise hand out a
+ * colour already on the chart, and two spectra of the same blue is the one
+ * mistake a colour is there to prevent.
+ *
+ * Once every hue is taken it falls to the least-used one, lowest first — the
+ * same rule, since an unused hue is a hue used no times. It never reaches into
+ * the second tier to avoid a repeat: a colour only that reader's eyes can place
+ * is a choice made for them, and a seventh blue they can read beats a brown they
+ * cannot.
+ *
+ * A spectrum a reader has drawn in a second-tier colour counts as holding none
+ * of the six, so it neither uses one up nor frees one: a chart of a black trace
+ * and a blue one is handed vermillion next, exactly as it would have been had
+ * the black one never been recoloured.
+ * @param taken - The colours the spectra already hold, in any order.
+ * @returns One of `SPECTRUM_COLORS`.
+ */
+export function nextSpectrumColor(taken: readonly string[]): string {
+  const counts = new Array<number>(SPECTRUM_COLORS.length).fill(0);
+  for (const color of taken) {
+    const index = SPECTRUM_COLORS.indexOf(color);
+    if (index !== -1) counts[index] = (counts[index] as number) + 1;
+  }
+
+  let best = SPECTRUM_COLORS[0] as string;
+  let bestCount = counts[0] as number;
+  for (let index = 1; index < counts.length && bestCount > 0; index++) {
+    const count = counts[index] as number;
+    if (count < bestCount) {
+      best = SPECTRUM_COLORS[index] as string;
+      bestCount = count;
+    }
+  }
+  return best;
+}

package/src/chart/core/stackCapacity.ts

@@ -0,0 +1,162 @@
+/**
+ * How many charts a column of a given height can stack, and how tall each stands.
+ *
+ * A viewer that draws one pane per selected spectrum has to answer a question
+ * the stack itself never asks. A reader who ticks a dozen spectra has not asked
+ * for twelve panes of fifty pixels, and a stack handed them draws twelve stubs
+ * with a full set of axes over each — the failure `ChartStack.tsx`'s header
+ * describes, arrived at from above instead of through a splitter. So the number
+ * of panes is settled from the height actually available, against the stack's
+ * own floors rather than a number somebody hoped for, and whatever a reader
+ * selects past that number is overlaid together into the last pane rather than
+ * dropped, which is the one outcome a reader cannot see happening.
+ *
+ * All of it is arithmetic over `chartStackLevel.tsx`'s floors and
+ * `chartGeometry.ts`'s margins; nothing here renders, measures or reads a
+ * spectrum.
+ */
+
+import { MARGIN, SHARED_AXIS_MARGIN } from './chartGeometry.ts';
+
+/**
+ * The shortest a pane that is *not* at the foot of the stack may stand, in
+ * pixels.
+ *
+ * Ninety, and ninety exactly, because it is not a judgement about how short a
+ * chart may be: `chartStackLevel.tsx` hands `SplitPane` a `closeThreshold` of 90
+ * at every non-foot split, and a split measuring under that closes its pane
+ * outright — before a splitter has ever been touched, so a stack built on a
+ * floor of 80 would come up with panes already shut and no gesture that made
+ * them so. The threshold is applied as `>=`, which is why standing exactly on it
+ * is allowed. That constant is module-private over there, so its value is
+ * restated here and the two have to move together.
+ *
+ * A caller must state this as each pane's own `minimumHeight`. Left unsaid,
+ * `paneHeight` clamps the pane up to the 120 pixels it defaults to, and five
+ * panes would then demand 688 pixels where 538 draws them.
+ */
+export const STACKED_MINIMUM = 90;
+
+/**
+ * What the pane at the foot pays for its axis beyond what every pane pays, in
+ * pixels.
+ *
+ * Only the foot of a stack writes the tick row and the axis title under its
+ * plot, and that is `MARGIN.bottom` less the `SHARED_AXIS_MARGIN` a pane keeps
+ * even when it writes no axis — 26 of them, not 34. The *difference* is what
+ * matters and the whole bottom margin is not it: a stacked pane still leaves a
+ * little room under its trace, and charging the foot for all 34 draws its plot
+ * eight pixels taller than the others, so a peak of one intensity comes out
+ * taller at the bottom of the stack than at the top. Every other side of the margin
+ * is paid alike by every pane, the room kept above the plot for the tallest
+ * peak's label as much as the gutter the value labels are written in, so it
+ * cancels out of the difference between two panes and does not appear here.
+ * This one asymmetry is the whole of why an equal split of the *boxes* is not an
+ * equal split of the *plots*.
+ */
+export const FOOT_FURNITURE = MARGIN.bottom - SHARED_AXIS_MARGIN;
+
+/**
+ * The shortest the pane at the foot may stand, in pixels.
+ *
+ * The ordinary floor plus the tick row and axis title only it writes, so that
+ * the plot left inside it is the same plot `STACKED_MINIMUM` leaves inside a
+ * pane above it. Deriving it rather than picking 116 is what makes the tightest
+ * stack land exactly on both floors at once: at a height of
+ * `FOOT_MINIMUM + (n - 1) * STACKED_MINIMUM`, `stackShares` gives every pane
+ * above the foot exactly `STACKED_MINIMUM` and the foot exactly this.
+ */
+export const FOOT_MINIMUM = STACKED_MINIMUM + FOOT_FURNITURE;
+
+/**
+ * How much room the splitter between two panes takes, in pixels.
+ *
+ * `react-science` draws a vertical splitter as a ten-pixel bar, and there is one
+ * between each *pair* of panes rather than one per pane — five of them under six
+ * panes. Small enough to be forgotten and large enough that forgetting it costs
+ * a pane: the fifty it comes to across a full stack is more than half a stacked
+ * minimum.
+ */
+export const SPLITTER = 10;
+
+/**
+ * The most panes worth stacking at all, however tall the column.
+ *
+ * Six, and the height is not what settles it. A 1080-pixel screen with the side
+ * panels open leaves the stack something near 900 pixels; six panes take 50 of
+ * those in splitters and share the rest, which is a box of 133 pixels each and a
+ * plot inside it of barely a hundred — about the height of the label stack a
+ * mass spectrum draws over its tallest sticks, so a seventh pane makes the
+ * labels taller than the trace they belong to. And the reader stacked the panes
+ * in order to compare them: past six the first and the last are most of a page
+ * apart, and an eye travelling that far is no longer comparing anything.
+ * Whatever is selected beyond this is overlaid into the last pane, where traces
+ * drawn over one another are compared the way they always were.
+ */
+export const STACK_LIMIT = 6;
+
+/**
+ * How many panes a column of a given height can hold and still draw spectra.
+ *
+ * The arithmetic is the stack as it will actually be built: one pane at the foot
+ * carrying the horizontal axis, every other pane at the stacked floor, and a
+ * splitter between each pair. Nothing here rounds in the caller's favour — a
+ * height one pixel short of the fourth pane holds three.
+ * @param height - The whole column the stack fills, in pixels, with the
+ * splitters counted in: it is the box `ChartStack` is handed, not the room its
+ * panes are left with.
+ * @returns At least one, because a lone pane squeezed short is still the
+ * measurement and the stack draws it rather than nothing — that is why the foot
+ * pane is given no close threshold — and never more than `STACK_LIMIT`.
+ */
+export function stackCapacity(height: number): number {
+  const beyondTheFoot = height - FOOT_MINIMUM;
+  const fits = 1 + Math.floor(beyondTheFoot / (STACKED_MINIMUM + SPLITTER));
+  return Math.min(STACK_LIMIT, Math.max(1, fits));
+}
+
+/**
+ * How tall each pane of the stack stands, top to bottom.
+ *
+ * The split equalises the **plot** rather than the box. An equal share of the
+ * box hands the foot pane 34 pixels of tick row and axis title that the panes
+ * above it do not draw, so its trace comes out visibly shorter than theirs while
+ * every box measures the same — the one thing a reader comparing two spectra
+ * side by side must not be shown. So `FOOT_FURNITURE` is taken off the top, what
+ * is left is divided evenly, and the foot is given its share back with the
+ * furniture on it.
+ *
+ * The division is floored, so the panes above the foot are whole pixels and the
+ * remainder — never more than `count - 1` of them — lands on the foot, which is
+ * the tallest pane and the one where two pixels are least visible. That keeps
+ * the sum exact, and it is also why the foot's share is *at least*
+ * `FOOT_FURNITURE` above a stacked one rather than exactly it.
+ * @param height - The room the panes themselves share, in pixels. A caller
+ * holding the whole column subtracts the splitters first — `height -
+ * (count - 1) * SPLITTER` — because `SplitPane` takes those out of the panes,
+ * not out of the column.
+ * @param count - How many panes to stack, normally whatever `stackCapacity`
+ * answered.
+ * @returns One height per pane, summing exactly to `height`, each at or above
+ * its own floor. The two cannot both hold for a height short of what `count`
+ * panes need, and there the floors win and the sum overshoots: a pane under its
+ * floor is the stub with a full set of axes over it, which is the worse of the
+ * two pictures. A lone pane is the exception and takes the whole height floor
+ * and all, since there is nothing to redistribute to and nothing to compare it
+ * against.
+ */
+export function stackShares(height: number, count: number): readonly number[] {
+  if (!Number.isInteger(count) || count < 1) return [];
+  if (count === 1) return [height];
+
+  const stacked = Math.max(
+    STACKED_MINIMUM,
+    Math.floor((height - FOOT_FURNITURE) / count),
+  );
+  const shares = new Array<number>(count);
+  for (let index = 0; index < count - 1; index++) {
+    shares[index] = stacked;
+  }
+  shares[count - 1] = Math.max(FOOT_MINIMUM, height - stacked * (count - 1));
+  return shares;
+}